Design til udseende af hastighed

Juryen har talt: performance, konvertering og brandengagement er uløseligt forbundet. Amazon har vist, at hver 100m forsinkelse koster dem 1% i salget. Walmart kriterer en ekstra 2% konvertering med hvert sekund af forbedring af ydelsen. Enhver online shopper vil fortælle dig, at hurtigere er bedre end langsommere - men er hastigheden så enkel som den korteste afstand fra punkt A til B?

”Hastighed, forekommer det for mig, giver den en virkelig moderne fornøjelse.” - Aldous Huxley

Hvorfor designe for performance-spørgsmål

Ydeevne spiller en vigtig rolle i udformningen af, hvordan kunder opfatter dit brand og kan påvirke en kundes købsintention. En undersøgelse fra 2013 af virkningerne af mobilwebpræstationer på følelsesmæssigt engagement hos brugerne fandt, at en forsinkelse på kun 500 millisekunder resulterede i en stigning på 26% i brugerens frustration og et fald på 8% i engagementet. I den samme undersøgelse reducerede langsomme websteder dramatisk de målte følelsesmæssige dimensioner omkring købsintention og brandfunktionalitet. Hvis det ikke er en rygerpistol, ved jeg ikke, hvad der er!

Vi i den vestlige verden kan heller ikke overse vores førsteverdens bias: Mens 4G LTE-forbindelser er blevet den defakte mobilstandard for nordamerikanske forbrugere, er de fleste af verden afhængige af 3G (sub 15 mbps) netværkshastigheder. For at sætte dette i en sammenhæng, forestil dig at vente næsten 8 sekunder på, at Amazon.com skal indlæses fuldstændigt på en 3G-forbindelse! Med disse begrænsninger i tankerne er det vigtigere end nogensinde at designe til forbindelser i den virkelige verden og optimere hvor det er muligt for at sikre den hurtigst mulige belastning for dine kunder.

Målbar vs opfattet ydelse

Er hastigheden så enkel som den korteste afstand fra punkt A til B?

Virkelighedens virkelighed (statistisk målbar) og den opfattede ydelse (en kvalitativ måling af effektiviteten) er forskellige ting.

For ti år siden øgede Houston lufthavn i et forsøg på at dæmpe kundeklager over lange ventetider på bagageopkaldet antallet af ansatte, der arbejdede med at håndtere skift for at forbedre den målbare ydelse af deres bagage. Ventetiderne faldt betydeligt - men klager fortsatte med at rulle ind.

Et objektivt mål for ydeevnen ignorerer det, der virkelig betyder noget: kunderejsen.

Lufthavnens ledere havde ikke set det rigtige problem - en menneskelig tilbøjelighed til at afsky ubesatte tid. Mens ventetiderne var nede, var gåturen fra terminalporten til bagageopfordringen en kort trav, så rejsende brugte det meste af deres tid på at vente. Ved strategisk at flytte ankomstportene længere væk fra bagagekarusellen, øgede de rejsendes gangtid til bagageopfordringen og fjernede næsten enhver tid uden besættelse. Klagerne stoppede. Dette er et reelt eksempel på, hvordan den ydelse, som folk føler, er vigtigere end "under hætte" -præstationen. Et objektivt mål for ydeevnen ignorerer det, der virkelig betyder noget: kunderejsen. Glem ikke at tjekke denne artikel af Mobifys produktchef Peter McLachlan om, hvordan vi har målt webpræstation alt forkert.

Sådan kan du ændre brugeropfattelser

Som Houston lufthavn fandt ud, tilfredsstiller brugerne mere end om at tilføje ressourcer - det handler også om at forstå, hvad der får folk til at krydse. Her er tre måder, du kan begynde at udnytte kundernes opfattelse af ydeevne:

1. Omfavn nu: Øjeblikkelig belastning

I 2013 diskuterede Luke Wroblewski først ulemperne ved at bruge indlæsning af spinnere i oplevelser på skærmen og talte for det, han kaldte ”skeletskærme”.

Eksempler på skeletskærme fra hele internettet.Ligegyldigt hvordan du klipper det, trækker spinnere, læssere og statuslinjer opmærksomheden på, at brugeren venter.

Konceptet bag skeletskærme er brugen af ​​tomme sider, der gradvis er befolket med indhold, når det bliver tilgængeligt - uforanderlige regioner på en side gengives med det samme under belastning, vises som neutrale farveblokke og erstattes gradvist med indhold som billeder, overskrifter , og interfaceetiketter. Hos Mobify har vi lavet skeletskærme til en integreret del af vores Progressive Mobile Web-ramme i form af det, vi kalder Instant Load Transitions.

Øjeblikkelig belastningsovergange fra crabtree-evelyn.com, et websted bygget på Mobifys Progressive Mobile Web-teknologi.

Denne fremgangsmåde står i kontrast til brugen af ​​en lastespinner. En spinner er god til at kommunikere, at brugeren er i en ventetilstand - men det er et problem! Som vi husker i anekdoten af ​​påstanden om lufthavnsbagage, er ventetilstanden en irriterende prøvelse. Med andre ord kan designere utilsigtet få ventetiden til at føles længere og mere ubehagelig ved at gnide ventetiden i brugerens ansigt. Hvordan er det med et ikke-brugercentrisk designvalg?

Øjeblikkelig belastningsovergange dæmper ventetiden ved at give en opfattet følelse af bevægelse og aktivitet ved at indlæse pladsholdere i stedet for at gøre det, når man venter showet, som spinnere gør. Det ligner, hvordan nogle af de bedste tandlæger tænder operationsstuen TV til dit foretrukne show, mens du udfører din rodkanal. På samme måde kan de bedst designede shoppingsider distrahere dig fra at vente på, at sider indlæses, ved tilsyneladende at sige, at der overhovedet ikke er nogen ventetid.

2. Uændelighed og bevægelse

Den visuelle kraft af uforanderlighed

Øjeblikkelig belastningsovergange (ILT'er) forbedrer venteoplevelsen ved forudgående at give en synlig følelse af konstant fremgang - men en vigtig rolle, der spilles af de pladsholdere, som ILTs giver, er at give en ensartet visuel oplevelse mellem, f.eks. En hjemmeside og en produktbeskrivelsesside.

Hvor ofte har du set billedtunge websteder indlæse med sidefoden, der vises, hvor du kunne forvente et smukt splashy produktbillede? Sekunder senere gengives billedet og skubber sidefoden og andre brugergrænsefladeelementer ned på siden. Denne blitz af et layout i sin uafsluttede indlæsningstilstand har den kraftige effekt af at få webstedet til at føles både langsomt og desorienterende.

Oprethold en konsistent visuel oplevelse og formidle følelsen af ​​en performant sidebelastning ved at designe en stærkt kontrolleret belastning på førstesiden. Med andre ord skal du holde sideelementer, især interfaceelementer, i den position, de ville være i, efter at siden er indlæst fuldstændigt. Brug indstillede højder og bredder til sideelementer for at undgå uventet eller uberegnelig omorganisering af elementer på dine sider, da indhold som tekst og billeder indlæses.

Mindful Motion

Animation i en grænseflade kan påvirke opfattelsen af ​​tid og varighed for dit websteds besøgende. Undersøgelser viser, at omhyggeligt implementeret animation har en direkte effekt på kognitiv belastning (kognitiv belastning er et mål for mental indsats). I det væsentlige er det muligt, at når animationer er dårligt designet, er for komplekse eller bare ikke fungerer som forventet, kan du få dine kunder til at tænke hårdere og bruge mere mental energi, hvilket indirekte kan påvirke deres beslutningsproces.

Som Allen Pike diskuterer i en artikel om ydeevne i originale applikationer, sigter mod at holde dine animationer glatte ved 60 billeder i sekundet. Pike anbefaler også brug af momentum-rulning i forhold til enhver form for "falsk" -rulning for at skabe en virkelig oprindelig fornemmelse (fordi det er en naturlig indfødt adfærd). Interfaceanimationer skal ideelt set være et øjeblikkeligt svar på en brugers berøring - alt andet ville simpelthen kommunikere en forsinkelse eller afbryde forbindelsen mellem dine kunder og din interface.

Momentum scrolling (til venstre) er langt mere ønskeligt over en javascript-baseret kunstig rulle. Kunstige rulleløsninger skaber regelmæssigt frustration for brugerne.Brug af en optimal billedhastighed til centrale interfaceanimationer som denne navigationsskuffe kan kommunikere mængder om resten af ​​dette websteds brugeroplevelse.

For at opnå den bedste ydelse med den hardware, som dine besøgende bruger, skal du basere dine animationer på CSS-transformationer af position (oversætte), skala, rotation og opacitet, som er CSS-transformationer, der accelereres ved hjælp af en hardwaregrafikprocessor. Ved at bruge disse hardware-accelererede CSS-egenskaber har du en bedre chance for at ramme de eftertragtede 60 billeder pr. Sekund.

Mindre er mere, når det kommer til animation på nettet, og målene skal altid være ydelse og funktionalitet frem for alt andet.

3. Persistens er nøglen

Hos Mobify har vi opbygget vores vision om internettet omkring Progressive Web Apps, en tilgang til at opbygge browserdrevne mobile shoppingoplevelser, der søger at erstatte kronen for pålidelighed og engagement fra indbyggede apps. Da almindelige tilgange til opbygning af progressive webapps involverer cache-cache-dele af en mobil interface, indlæses websteder hurtigt og gentages besøg med det samme.

Progressive Web-apps er ofte bygget på, hvad der kaldes en app-shell-model, hvilket betyder, at den absolutte minimumsmængde HTML, CSS og Javascript indlæses af en webbrowser ved første indlæsning. For eksempel er interfaceelementer som en navigationshovedlinje integreret i denne app-shell.

Jeg nævnte tidligere, hvor vigtigt en kontrolleret første belastning er at indstille brugerforventningerne. Ved at prioritere visse aspekter af grænsefladen og indlæse indhold på plads, skaber vi en jævn, ikke-pludselig sideindlæsning. Vigtigst af alt ved at cache disse centrale dele af grænsefladen vises gentagne belastninger af grænsefladen næsten øjeblikkeligt. I det væsentlige gør cachen af ​​grænsefladen, at den ikke er afhængig af en netværksforbindelse, så den kan opføre sig mere applignende og indbygget, fordi koden findes lokalt på målenheden.

Med tilstedeværelsen af ​​en lille smule Javascript, der er kendt som en servicemedarbejder, kan Progressive Web Apps endda indlæses offline for at give en næsten komplet shoppingoplevelse, alt uden netværksforbindelse. Som en sidefordel reducerer du også mængden af ​​data, som dine kunder bruger, når de gennemser dit websted.

Transformer gradvis opfattelser

Vi har lært, at ydeevne, både opfattet og reel, påvirker brand engagement, konvertering og shopper beslutningstagning. Vi har set, hvordan designbeslutninger kan styre brugernes emotionelle tilstand, kognitive belastning og visuelle forventninger, samtidig med at de mindskede forsinkede forsinkelser ved indlæsning af websteder på langsommere netværksforbindelser. Vi har også lært, hvordan Progressive Web Apps ved hjælp af en app shell-tilgang kan give en næsten øjeblikkelig belastningsoplevelse for gentagne besøgende.

Oplevet ydelse er den eneste måde, hvorpå ydeevne skal gælde for vores syn på internettet. Almindelig blandt de fleste forbrugere er en forkert informeret vision om en nær fremtid, hvor alle netværk i det mindste er i stand til LTE, og at netværksforsinkelse snart vil være en saga blid. Men med milliarder af nye mobilforbrugere i stigning i udviklingslande, hvor netværkshastigheder er en betydelig hindring, har kampen for at opbygge performante brugeroplevelser aldrig været mere reel.

Er du interesseret i at lære mere om design af brugeroplevelse? Se vores webinar for over 30 bedste fremgangsmåder til UX-design til mobil handel.

Oprindeligt offentliggjort på www.mobify.com den 23. marts 2017.