Ik heb meer dan 150 mobiele sites geraadpleegd - Dit is wat ik weet over effectieve UX

Als mobiele UX-leider bij Google in samenwerking met webontwikkelingsteams voor kleine bedrijven, heb ik veel observaties gedaan - en geleerd hoe de valkuilen te vermijden

Dit is een doorlopende lijst met inzichten van de samenwerking met meer dan 150 webontwikkelteams in de afgelopen 2 jaar.

Ik ben in 2016 lid geworden van een team bij Google, het Mobile Transformation Team. Ons team had een eenvoudig, maar zeer ambitieus doel: mobiel internet voor iedereen beter maken. We hebben ons gericht op het helpen van kleine tot middelgrote bedrijven om hun mobiele webervaringen te verbeteren. Meer specifiek waren we UX-consultants die zouden samenwerken met webontwikkelteams en aanbevelingen zouden doen over hoe ze de prestaties, bruikbaarheid en toegankelijkheid beter kunnen optimaliseren.

We hebben ons ingezet voor eindgebruikers.

Hier zijn de lessen, observaties en valkuilen die we hebben verzameld na het zien van letterlijk honderden websites:

Eerste indrukken doen ertoe. Mobiele gebruikers zijn erg doelgericht en super ongeduldig. Vermijd het afleiden van een gebruiker van zijn doelen. Houd uw startpagina en topbestemmingspagina's eenvoudig. Zorg voor een duidelijke call-to-action en een waardepropositie boven de vouw. Een gebruiker moet weten wat hij moet doen en waarom hij zo op uw mobiele site moet blijven.

Van links naar rechts: Warby Parker, Stash Invest, Drizly

Doe minder. De belangrijkste aanbeveling die ik consequent deed was: "Doe minder". Dat betekent minder afbeeldingen, minder formuliervelden, minder gecompliceerde navigatiepatronen, minder plug-ins, minder pixels van derden, minder tekstwanden, minder overlays op het volledige scherm, minder renderblokkering js , minder klikken ... minder manieren om uw gebruiker af te leiden van zijn doelen.

Snelheid benadrukt een goed ontwerp. Het is geen verrassing dat snellere mobiele sites een betere gebruikersbetrokkenheid hebben. Talloze case-studies, usability tests en ik weet zeker dat uw eigen persoonlijke anekdotes overduidelijk maken dat snelheid conversies stimuleert. De drie prestatiestatistieken die de gebruikerservaring echt weerspiegelen, zijn First Contentful Paint (FCP), Speed ​​Index en Time to Interactive (TTI). Het is van cruciaal belang om een ​​prestatiebudget in te stellen en uw team verantwoordelijk te houden. Het is jammer wanneer je prachtig ontworpen site resulteert in een teruggekaatste gebruiker omdat je bent vergeten je 2MB-afbeelding van een held te comprimeren. Gebruik hulpmiddelen zoals Lighthouse (hieronder weergegeven) om deze statistieken bij te houden.

Aanbevolen benchmarks:
 <2s First Content Paint (FCP)
<3s Speed ​​Index (SI)
Time to Interactive <5s (TTI)

Screenshot van Lighthouse

Praat met uw klanten. Dit lijkt misschien ongelooflijk voor de hand liggend, maar ik kan je niet vertellen hoeveel blanco blikken ik heb aangezet door te vragen: "Wanneer heb je voor het laatst met je gebruikers gepraat?" Ons doel als mobiele UX-leads was niet alleen om aanbevelingen te doen, maar om de stem van de gebruiker te zijn. Plaats uzelf in de schoenen van uw gebruikers en probeer de meest voorkomende taken te voltooien (houd het aantal klikken en de totale te voltooien tijd bij).

Gebruik gegevens om het ontwerp te rechtvaardigen. De trend van 'data-backed design' is niets nieuws. Na het prioriteren van een mobiel project is het belangrijk om mobiele KPI's te volgen. Voor detailhandelaren houdt u de gemiddelde bestelwaarde (AOV) en het uitstappercentage in de gaten op de pagina waar de uitchecktrechter begint. Voor leadgeneratiebedrijven richten zich op de CTR van de primaire call-to-action-knop en de lead to close-ratio (succesvolle verkoop / aantal leads * 100). Als u een reissite heeft, richt u dan op retoursessies (klantbehoud) en kanaalspecifiek verkeer (dwz: nemen sociale aandelen toe). Overweeg om microconversies te controleren, zoals aanmeldingen voor e-mailnieuwsbrieven, reacties op een artikel, gebruikersrecensies, videoweergaven of gedeelde berichten op sociale media. Pro-tip: ik raad u ten zeerste aan dit briljante Datastudio-dashboard te gebruiken dat een van mijn collega's (Damla Cakirca) heeft gemaakt om de betrokkenheid van gebruikers op uw site te controleren.

Terugval is echt. Het merendeel van de bedrijven waarmee we samenwerkten, zag aanzienlijke verbeteringen in sitesnelheid en / of gebruikersbetrokkenheid. Echter, 30-60 dagen na consultatie (toen we niet verlangden om over hun schouder te kijken) zouden we slechte gewoonten opduiken. Gebruik een prestatiebudget om deze valkuil te voorkomen. Ik raad ook aan om de Chrome Dev-tool te gebruiken om ongebruikte CSS- en JS-code te vinden op het tabblad Coverage. Wanneer u een pagina laadt of uitvoert, geeft het tabblad aan hoeveel code is gebruikt, versus hoeveel er is geladen. U kunt de grootte van uw pagina's verkleinen door alleen de code te verzenden die u nodig hebt. Het is van cruciaal belang dat u uw mobiele site voortdurend bewaakt en controleert.

Wees optimistisch over nieuwe technologie. Als u op zoek bent naar een transformerende moderne mobiele ervaring, bouw dan een PWA op. Als u uw betaalde verkeer wilt optimaliseren, kunt u AMP gebruiken voor uw beste bestemmingspagina's. Als u een detailhandelaar bent, zoekt u naar manieren om het afrekenen te versnellen, zoals het verminderen van velden, het inschakelen van automatisch aanvullen of het implementeren van Google Pay. De sleutel tot succes is het stapsgewijs toevoegen van technologieën met een focus op het verbeteren van de gebruikerservaring. Als het geen waarde toevoegt aan uw gebruikers, investeer er dan niet in.

Van links naar rechts: American Tin Ceilings, Rhone, SnapDeal

Cross functionele buy-in is de sleutel. Alle belangrijke belanghebbenden op dezelfde pagina krijgen, is een voor de hand liggende, maar belangrijke herinnering. Het verbeteren van uw mobiele webervaring is een teaminspanning. Alle teams moeten de verantwoordelijkheid nemen om de mobiele ervaring te monitoren. Marketingteams moeten het gebruik van trackingpixels van derden in de gaten houden. Technische teams moeten zich richten op het optimaliseren van het kritieke renderingpad (het verwijderen van renderblokkerende middelen). UX-teams moeten ervoor zorgen dat afbeeldingen worden geoptimaliseerd en zich richten op het verminderen van pijnpunten in de bruikbaarheid (bijv. Automatische schuifregelaars). Het is van cruciaal belang om functionele doelen te stellen en alle teams verantwoordelijk te houden.

Observaties van mobiele trends. Dit laatste gedeelte bevat alle beste UX-trends waarvan ik in 2018 positieve resultaten heb gezien.

  • Wees direct met AMP
  • Lever een betrouwbare ervaring door netwerkonafhankelijkheid te verkrijgen
  • Wees betrouwbaar met betere caching
  • Gebruik webcomponenten voor materiaalontwerp
  • Bied alle gebruikers dezelfde consistente ervaring, ongeacht welk platform ze kiezen om met uw merk te communiceren
  • Wees knap met gemakkelijkere authenticatie
  • Stroomlijn het voltooien van taken door formulieren te optimaliseren
  • Maak het gemakkelijk om terug te komen door webmeldingen in te schakelen
  • Ben het waard om op het startscherm te zijn
  • Gebruik Lighthouse om de prestaties te controleren
  • Probeer de nieuwste hulpmiddelen voor webontwikkeling

Vergeet niet dat er geen magische kogel is om al uw UX-problemen op te lossen. Het verbeteren van uw mobiele site vereist geduld, analyse en cross-functionele inzet. Start het webproject dat geschikt is voor uw gebruikers en uw bedrijf.

@RyanWarrender