Jeg har konsulteret over 150 mobilwebsteder - her er hvad jeg ved om effektiv UX

Som en mobil UX-leder hos Google, der arbejder med webselskaber for små virksomheder, har jeg lavet en masse observationer - og lært, hvordan man undgår faldgruberne

Dette er en løbende liste over indsigt fra partnerskab med over 150 webudviklingshold i løbet af de sidste 2 år.

Jeg blev medlem af et team hos Google i 2016 kaldet Mobile Transformation Team. Vores team havde et enkelt, men meget ambitiøst mål: Gør mobilwebben bedre for alle. Vi fokuserede på at hjælpe små til mellemstore virksomheder med at forbedre deres mobile weboplevelser. Mere specifikt var vi UX-konsulenter, der ville arbejde med web-dev-teams og give anbefalinger om, hvordan de bedre kan optimere ydelse, brugervenlighed og tilgængelighed.

Vi kæmpede for slutbrugere.

Her er de erfaringer, observationer og faldgruber, vi samlet efter at have bogstaveligt talt hundredvis af websteder:

Første indtryk betyder noget. Mobilbrugere er meget målorienterede og super utålmodige. Undgå at distrahere en bruger fra deres mål. Hold din startside og de bedste landingssider enkle. Sørg for at have en klar opfordring til handling og et værdiproposition over folden. En bruger skal vide, hvad de skal gøre, og hvorfor de skal bo på dit mobilwebsted i et øjeblik.

Venstre til højre: Warby Parker, Stash Invest, Drizly

Gør mindre. Anbefaling nr. 1, som jeg konsekvent fremsatte, var “Gør mindre.” Det betyder færre billeder, færre formularfelter, færre komplicerede navigationsmønstre, færre plugins, færre tredjepartspixel, færre vægge af tekst, færre overlay på fuld skærm, færre gengiver blokerende js , færre klik… færre måder at distrahere din bruger fra deres mål.

Hastighed fremhæver godt design. Det er ingen overraskelse, at hurtigere mobilwebsteder har bedre brugerengagement. Utallige casestudier, brugervenlighedstest, og jeg er sikker på, at dine egne personlige anekdoter gør det rigeligt klart, at hastighed driver konverteringer. De tre præstationsmetrics, der virkelig afspejler brugeroplevelsen, er First Contentful Paint (FCP), Speed ​​Index og Time to Interactive (TTI). Det er kritisk at indstille et præstationsbudget og holde dit team ansvarligt. Det er en skam, når dit smukt designede websted resulterer i en sprang bruger, fordi du glemte at komprimere dit 2MB-heltebillede. Brug værktøjer som Fyrtårn (vist nedenfor) til at overvåge disse beregninger.

Anbefalede benchmarks:
 <2s Første indholdsmaling (FCP)
<3s hastighedsindeks (SI)
<5s tid til interaktiv (TTI)

Skærmbillede fra Fyrtårnet

Tal med dine kunder. Dette kan virke utroligt indlysende, men jeg kan ikke fortælle dig, hvor mange blanke stirrer jeg har anmodet ved at spørge: ”Hvornår var sidste gang du talte med dine brugere?” Vores mål som mobil UX-leder var ikke bare at fremsætte anbefalinger, men at være brugerens stemme. Sæt dig selv i dine brugers sko, og prøv at udføre de mest almindelige opgaver (spore antallet af klik og total tid til at udføre).

Brug data til at retfærdiggøre design. Tendensen med "datastøttet design" er ikke noget nyt. Efter prioritering af et mobilprojekt er det vigtigt at spore mobile KPI'er. For detailhandlere skal du overvåge gennemsnitlig ordreværdi (AOV) og udgangssatsen på den side, hvor kassetragten begynder. For blygenerationsvirksomheder fokuserer på CTR på den primære Call-To-Action-knap og bly-til-forholdet (vellykket salg / antal kundeemner * 100). Hvis du har et rejsewebsted, skal du fokusere på returneringssessioner (kundeopbevaring) og kanalspecifik trafik (dvs.: øges sociale andele). Overvej at overvåge mikrokonverteringer såvel som tilmeldinger til e-mail-nyhedsbrev, kommentarer til en artikel, brugeranmeldelser, videovisninger eller delinger på sociale medier. Pro tip: Jeg kan varmt anbefale, at du udnytter dette strålende Datastudio-instrumentbræt, som en af ​​mine kammerater (Damla Cakirca) lavede for at overvåge brugerengagement på dit websted.

Tilbagefald er reelt. De fleste af de virksomheder, vi arbejdede med, oplevede betydelige forbedringer i webstedshastighed og / eller brugerengagement. Imidlertid 30–60 dage efter konsultation (da vi ikke længere længt kiggede over deres skulder) ville vi se dårlige vaner komme igen. Brug et præstationsbudget for at undgå denne faldgrube. Jeg anbefaler også at bruge Chrome Dev-værktøjet til at finde ubrugte CSS og JS-kode under fanen Dækning. Når du indlæser eller kører en side, fortæller fanen, hvor meget kode der blev brugt, kontra hvor meget der blev indlæst. Du kan reducere størrelsen på dine sider ved kun at sende den kode, du har brug for. Det er vigtigt at overvåge og revidere dit mobilwebsted løbende.

Vær bullish på ny teknologi. Hvis du leder efter en transformativ moderne mobiloplevelse, skal du bygge en PWA. Hvis du søger at optimere din betalte trafik, skal du undersøge at bruge AMP til dine top landingssider. Hvis du er forhandler, skal du undersøge måder at fremskynde kassen, f.eks. Reducere felter, aktivere autofyld eller implementere Google Pay. Nøglen til succes er at tilføje teknologier trinvist med fokus på at forbedre brugeroplevelsen. Hvis det ikke tilføjer værdi til dine brugere, skal du ikke investere i det.

Venstre til højre: Amerikanske tinlofter, Rhone, SnapDeal

Krydsfunktionelt køb i er nøglen. At få alle de vigtigste interessenter på den samme side er en indlysende, men vigtig påmindelse. At forbedre din mobile weboplevelse er en teamindsats. Alle hold skal tage ansvar for at overvåge den mobile oplevelse. Marketinghold bør se brugen af ​​sporingspixels fra tredjepart. Ingeniørteams skal fokusere på at optimere den kritiske gengivelsessti (fjerne renderblokerende aktiver). UX-hold skal sikre, at billeder optimeres og fokusere på at reducere brugervenlighed smertepunkter (dvs.: automatiske skydere). Det er kritisk at sætte tværfunktionelle mål og holde alle hold ansvarlige.

Observationer af mobile tendenser. Denne sidste sektion er en fangst af alle de bedste UX-trends, som jeg har set positive resultater fra i løbet af 2018.

  • Vær øjeblikkelig ved at bruge AMP
  • Lever en pålidelig oplevelse ved at få netværksuafhængighed
  • Vær pålidelig med bedre cache
  • Brug materialedesign webkomponenter
  • Giv den samme konsistente oplevelse til alle brugere, uanset hvilken platform de vælger at interagere med dit brand
  • Vær nøjagtig med lettere godkendelse
  • Strømlinjeforme opgaven ved at optimere formularer
  • Gør det nemt at vende tilbage ved at aktivere internetunderretninger
  • Vær værdig at være på startskærmen
  • Brug Fyrtårn til at overvåge ydeevne
  • Prøv de nyeste webudviklingsværktøjer

Husk, at der ikke er nogen magisk kugle, der løser alle dine UX-problemer. At forbedre dit mobilwebsted kræver tålmodighed, analyse og tværfunktionelt engagement. Kickoff det webprojekt, der er rigtigt for dine brugere og din virksomhed.

@RyanWarrender