Ich habe über 150 mobile Websites konsultiert - hier ist, was ich über effektives UX weiß

Als leitender Mitarbeiter von Mobile UX bei Google, der mit Webentwicklungsteams kleiner Unternehmen zusammenarbeitet, habe ich viele Beobachtungen gemacht - und gelernt, wie man die Fallstricke vermeidet

Dies ist eine fortlaufende Liste von Erkenntnissen aus der Zusammenarbeit mit über 150 Webentwicklungsteams in den letzten zwei Jahren.

Ich bin 2016 einem Google-Team beigetreten, dem Mobile Transformation Team. Unser Team hatte ein einfaches, aber sehr ehrgeiziges Ziel: Das mobile Web für alle zu verbessern. Wir haben uns darauf konzentriert, kleinen und mittleren Unternehmen dabei zu helfen, ihre mobilen Web-Erlebnisse zu verbessern. Insbesondere waren wir UX-Berater, die mit Web-Entwicklerteams zusammenarbeiteten und Empfehlungen gaben, wie sie die Leistung, Benutzerfreundlichkeit und Zugänglichkeit besser optimieren können.

Wir haben uns für Endverbraucher stark gemacht.

Hier sind die Erkenntnisse, Beobachtungen und Fallstricke, die wir gesammelt haben, nachdem wir buchstäblich Hunderte von Websites gesehen haben:

Der erste Eindruck zählt. Mobile User sind sehr zielorientiert und super ungeduldig. Vermeiden Sie es, einen Benutzer von seinen Zielen abzulenken. Halten Sie Ihre Homepage und die wichtigsten Zielseiten einfach. Stellen Sie sicher, dass Sie eine klare Aufforderung zum Handeln und ein Wertversprechen über der Falte haben. Ein Nutzer sollte wissen, was zu tun ist und warum er auf einen Blick auf Ihre mobile Website zugreifen sollte.

Von links nach rechts: Warby Parker, Stash Invest, Drizly

Mache weniger. Die Empfehlung Nummer eins, die ich konsequent ausgesprochen habe, lautete: "Weniger tun". Das bedeutet weniger Bilder, weniger Formularfelder, weniger komplizierte Navigationsmuster, weniger Plugins, weniger Pixel von Drittanbietern, weniger Textwände, weniger Vollbild-Overlays, weniger Render-Blocking-Js , weniger Klicks ... weniger Möglichkeiten, Ihre Nutzer von ihren Zielen abzulenken.

Geschwindigkeit betont gutes Design. Es ist keine Überraschung, dass schnellere mobile Websites ein besseres Nutzerengagement aufweisen. Zahlreiche Fallstudien, Usability-Tests und Ihre persönlichen Anekdoten machen deutlich, dass die Geschwindigkeit die Conversions fördert. Die drei Leistungsmetriken, die die Benutzererfahrung wirklich widerspiegeln, sind First Contentful Paint (FCP), Geschwindigkeitsindex und Time to Interactive (TTI). Es ist wichtig, ein Leistungsbudget festzulegen und Ihr Team zur Rechenschaft zu ziehen. Es ist eine Schande, wenn Ihre wunderschön gestaltete Website zu einem unzustellbaren Benutzer führt, weil Sie vergessen haben, Ihr 2-MB-Heldenbild zu komprimieren. Verwenden Sie Tools wie Lighthouse (siehe unten), um diese Metriken zu überwachen.

Empfohlene Benchmarks:
 <2s First Content Paint (FCP)
<3s Geschwindigkeitsindex (SI)
<5s Time to Interactive (TTI)

Screenshot vom Leuchtturm

Sprechen Sie mit Ihren Kunden. Dies mag unglaublich offensichtlich erscheinen, aber ich kann Ihnen nicht sagen, wie viele leere Blicke ich ausgelöst habe, indem ich Sie gefragt habe: „Wann haben Sie das letzte Mal mit Ihren Benutzern gesprochen?“ Unser Ziel als Lead von Mobile UX war es, nicht nur Empfehlungen abzugeben, sondern die Stimme des Benutzers sein. Versetzen Sie sich in die Lage Ihrer Benutzer und versuchen Sie, die häufigsten Aufgaben zu erledigen (verfolgen Sie die Anzahl der Klicks und die Gesamtzeit).

Verwenden Sie Daten, um das Design zu rechtfertigen. Der Trend zum „Data-Backed Design“ ist nichts Neues. Nach der Priorisierung eines mobilen Projekts ist es wichtig, mobile KPIs zu verfolgen. Überwachen Sie für Einzelhändler den durchschnittlichen Bestellwert (Average Order Value, AOV) und die Ausstiegsrate auf der Seite, auf der der Checkout-Trichter beginnt. Bei Lead-Generierungsunternehmen liegt der Fokus auf der Klickrate der primären Call-To-Action-Schaltfläche und dem Verhältnis von Lead zu Close (erfolgreicher Verkauf / Anzahl der Leads * 100). Wenn Sie über eine Reiseseite verfügen, konzentrieren Sie sich auf Rücknahmesitzungen (Kundenbindung) und kanalspezifischen Datenverkehr (dh: Steigern sich die sozialen Anteile). Überlegen Sie sich, ob Sie Mikro-Conversions überwachen möchten, beispielsweise E-Mail-Newsletter-Anmeldungen, Kommentare zu einem Artikel, Nutzerkritiken, Videoansichten oder Freigaben in sozialen Medien. Profi-Tipp: Ich empfehle dringend, dieses brillante Datastudio-Dashboard zu nutzen, das einer meiner Kollegen (Damla Cakirca) erstellt hat, um die Benutzerinteraktion auf Ihrer Website zu überwachen.

Rückfall ist real. Die Mehrheit der Unternehmen, mit denen wir zusammengearbeitet haben, verzeichnete signifikante Verbesserungen bei der Geschwindigkeit der Website und / oder der Nutzerinteraktion. 30 bis 60 Tage nach der Konsultation (wenn wir keine Sehnsucht hatten, über die Schulter zu schauen), tauchten jedoch wieder schlechte Gewohnheiten auf. Verwenden Sie ein Leistungsbudget, um diese Gefahr zu vermeiden. Ich empfehle außerdem, das Chrome Dev-Tool zu verwenden, um nicht verwendeten CSS- und JS-Code auf der Registerkarte "Coverage" zu finden. Wenn Sie eine Seite laden oder ausführen, werden Sie auf der Registerkarte darüber informiert, wie viel Code verwendet wurde und wie viel geladen wurde. Sie können die Größe Ihrer Seiten reduzieren, indem Sie nur den Code versenden, den Sie benötigen. Es ist wichtig, Ihre mobile Site ständig zu überwachen und zu überwachen.

Seien Sie optimistisch in Bezug auf neue Technologien. Wenn Sie auf der Suche nach einer transformativen modernen mobilen Erfahrung sind, sollten Sie eine PWA aufbauen. Wenn Sie Ihren bezahlten Traffic optimieren möchten, sollten Sie AMP für Ihre Top-Zielseiten in Betracht ziehen. Wenn Sie ein Einzelhändler sind, prüfen Sie, wie Sie den Checkout beschleunigen können, z. B. Felder verkleinern, das automatische Ausfüllen aktivieren oder Google Pay implementieren. Der Schlüssel zum Erfolg besteht darin, Technologien schrittweise hinzuzufügen, um die Benutzerfreundlichkeit zu verbessern. Wenn es Ihren Nutzern keinen Mehrwert bringt, investieren Sie nicht in es.

Von links nach rechts: American Tin Ceilings, Rhone, SnapDeal

Cross Functional Buy-In ist der Schlüssel. Alle wichtigen Stakeholder auf eine Seite zu bringen, ist eine offensichtliche, aber wichtige Erinnerung. Das Verbessern Ihres mobilen Web-Erlebnisses ist eine Teamleistung. Alle Teams müssen die Verantwortung für die Überwachung der mobilen Erfahrung übernehmen. Marketing-Teams sollten die Verwendung von Tracking-Pixeln von Drittanbietern beobachten. Entwicklungsteams sollten sich auf die Optimierung des kritischen Renderpfads konzentrieren (Entfernen von rendersperrenden Elementen). UX-Teams sollten sicherstellen, dass die Bilder optimiert werden, und sich auf die Reduzierung von Usability-Schwachstellen konzentrieren (dh automatische Schieberegler). Es ist wichtig, funktionsübergreifende Ziele festzulegen und alle Teams zur Rechenschaft zu ziehen.

Beobachtungen mobiler Trends. Dieser letzte Abschnitt ist ein Überblick über die besten UX-Trends, die ich im Jahr 2018 gesehen habe.

  • Seien Sie sofort mit AMP
  • Bieten Sie eine zuverlässige Erfahrung, indem Sie Netzwerkunabhängigkeit erlangen
  • Sei zuverlässig mit besserem Caching
  • Verwenden Sie Material Design-Webkomponenten
  • Bieten Sie allen Benutzern die gleiche konsistente Erfahrung, unabhängig davon, auf welcher Plattform sie mit Ihrer Marke interagieren
  • Seien Sie sympathisch mit einer einfacheren Authentifizierung
  • Optimieren Sie die Aufgabenerfüllung durch Optimierung der Formulare
  • Erleichtern Sie die Rückkehr, indem Sie Webbenachrichtigungen aktivieren
  • Seien Sie es wert, auf dem Startbildschirm zu sein
  • Verwenden Sie Lighthouse, um die Leistung zu überwachen
  • Probieren Sie die neuesten Webentwicklungstools aus

Denken Sie daran, dass es keine Wunderwaffe gibt, mit der Sie alle Ihre UX-Probleme lösen können. Die Verbesserung Ihrer mobilen Website erfordert Geduld, Analyse und funktionsübergreifendes Engagement. Starten Sie das Webprojekt, das für Ihre Benutzer und Ihr Unternehmen geeignet ist.

@ RyanWarrender