8 Tipps für eine bessere mobile User Experience
Fit für das Google Core Update im Mai 2021

13.04.2021 | Design und Performance Ihrer Website haben maßgebliche Auswirkungen darauf, ob User zu Käufern und Käuferinnen werden. Wir haben für Sie acht Tipps zusammengestellt, wie Sie das Beste aus Ihrer mobilen Website herausholen und Ihre Webpräsenz für das nächste Google Update fit machen.

Inhalt

• Fit für das Google Core Update im Mai 2021
• Tipp 1: Für die Core Web Vitals optimieren
• Tipp 2: Mobile First Design anwenden
• Tipp 3: Navigation vereinfachen
• Tipp 4: Texte übersichtlich strukturieren
• Tipp 5: Bilder bedacht einsetzen
• Tipp 6: Frust bei Formularen reduzieren
• Tipp 7: Kontaktmöglichkeiten anbieten
• Tipp 8: Suche prominent platzieren
• TL;DR – Zusammenfassung

Fit für das Google Core Update im Mai 2021

• Weil die meisten Menschen am Smartphone surfen und suchen, nimmt Google beim Ranking zusehends die Mobilversion von Websites in den Fokus:
• Seit März 2021 besucht Google hauptsächlich die mobile Version Ihrer Websites, um den Inhalt zu erfassen und in den Google-Index aufzunehmen. (Quelle: Google)
• Für Mai 2021 hat Google ein Core Update angekündigt, im Zuge dessen die User Experience bzw. die Core Web Vitals als Ranking-Signal stark an Bedeutung gewinnen werden. (Quelle: Google)
• Daraus folgt, dass Websites, die nicht für Mobilgeräte optimiert sind, im Google Ranking oft schlechter abschneiden. Dass Google WebsitebetreiberInnen kontinuierlich pusht, den Usern eine bessere Erfahrung zu bieten, ist nichts Neues: Man erinnere sich an die Einführung von HTTPS als Ranking-Signal.
  Doch zurück zur User Experience: Was können Sie tun, um Ihre Website fit für das Core Update zu machen?

Tipp 1: Für die Core Web Vitals optimieren

Wie eingangs erwähnt nimmt Google ab Mai 2021 die sogenannten Core Web Vitals (CWV) als Ranking-Signale auf. Die Core Web Vitals sind Metriken, durch die sich Geschwindigkeit und optimierte Darstellung von Websites bewerten lassen:

1. Largest Contentful Paint (LCP): Wie lange dauert es, bis der Screen vollständig geladen ist?
2. Final Input Delay (FID): Wie lange dauert es, bis der User mit der Seite interagieren kann?
3. Cumulative Layout Shift (CLS): Wie viele Veränderungen im Layout gibt es während des Ladeprozesses? Wird der User dadurch gestört (z. B. springende Buttons, nachgeladene Inhalte verschieben den Text)

Wie eine einzelne URL bei den Core Web Vitals abschneidet, kann man in den Pagespeed Insights testen, sofern genügend Userdaten zur Verfügung stehen. Einen Überblick über die Performance der gesamten Domain gibt das CrUX Dashboard. Es handelt sich dabei um eine Vorlage für Data Studio Berichte, die man ganz einfach für die eigene Domain übernehmen kann. Das CrUX Dashboard bietet gegenüber den Pagespeed Insights den Vorteil, dass auch historische Daten verfügbar sind.

An welchen Schräubchen Sie drehen müssen, damit ihre Website bei den CWV gut abschneidet, lässt sich nicht pauschal sagen. Bedenken sollten Sie jedenfalls, dass Websites mittlerweile viele rechenintensive Features haben, die meisten User jedoch Handys mit begrenzter CPU-Power verwenden. Geräte, die bei der Programmierung zum Testen verwendet werden, sind für gewöhnlich sehr performant und haben mit Skript-lastigen Seiten kein Problem. Probleme, die sich negativ bei den CWV zu Buche schlagen, fallen daher oft erst im Nachgang auf. Um dem vorzubeugen, sollten Sie Testtools wie webpagetest.org und yellowlab.tools verwenden.

Beispiele, wie sich LCP, FID und CLS verbessern lassen

Es muss zwar für jede Website individuell analysiert werden, wo es Verbesserungspotenzial gibt, doch einige Punkte haben sich in unserer Arbeit als „übliche Verdächtige“ herausgestellt. Diese wollen wir Ihnen nicht vorenthalten:

• Für Ads schon vorab richtig dimensionierte Platzhalter einblenden, damit sich das Layout nicht durch nachgeladene Banner verschiebt
• „Hero Images“ möglichst früh laden
• Bei Bildern immer die „width“- und „height“-Attribute definieren.
• Die Browser-eigene Funktion für Lazy Loading benutzen
• Schriftarten am eigenen Server hosten (es gibt keinen tabübergreifenden Cache mehr) und per HTML laden, nicht erst im CSS. Das verkürzt den kritischen Pfad und es muss keine Verbindung zu einer zusätzlichen Domain hergestellt werden

Wie diese Beispiele verdeutlichen, geht es bei der Optimierung für die Core Web Vitals stark darum, die wahrgenommene Geschwindigkeit zu verbessern und ein flüssiges Interagieren mit der Seite zu ermöglichen. Darüber hinaus existieren aber noch weitere Aspekte, die eine gute mobile User Experience ausmachen. Auf diese gehen wir in den folgenden Tipps ein.

Tipp 2: Mobile First Design anwenden

Gehen Sie schon beim Entwurf der Layouts von „Mobile First“ aus: Zuerst für den kleinsten möglichen Screen designen und davon ausgehend die Komplexität der Designs steigern. Beachten Sie dabei:

• Web-Standards (W3) beim Implementieren von flexiblen Layouts berücksichtigen
• Pop-ups und Banner vermeiden, die einen Großteil des Bildschirms einnehmen

Tipp 3: Navigation vereinfachen

Viele UserInnen verwenden nur eine Hand, um ihr Smartphone zu bedienen. Außerdem können Handy-BenutzerInnen keinen Mauszeiger verwenden, um zu sehen, ob ein Element interaktiv ist. Die Menüführung sollte auf diese Faktoren ausgerichtet sein:

• Navigationselemente so gestalten, dass sie mit dem Finger präzise gedrückt werden können
• Buttons und Tabs sollen mindestens 30×30 Pixel (7-10 mm) groß sein
• Mehrstufige Menüs lassen sich auf mobilen Endgeräten schlecht bedienen, Full-Screen Menüs sind zu bevorzugen
• Links deutlich kennzeichnen und Feedback geben, wenn der User einen Link aktiviert
• Scrollen nur in eine Richtung ermöglichen

Tipp 4: Texte übersichtlich strukturieren

Texte brauchen eine klare Struktur und Formatierung, damit User beim „Querlesen“ schnell den gesuchten Inhalt finden. Gehen Sie nicht davon aus, dass Ihr Text von oben bis unten durchgelesen wird. Ein Großteil der BenutzerInnen liest nur die für sie relevanten Passagen.

• Texte mit Zwischenüberschriften strukturieren und Absätze einfügen
• Von Formatierungsmöglichkeiten wie Aufzählungen und Listen Gebrauch machen
• Farbe und Kontrast nutzen, um die Lesbarkeit zu erhöhen
• Mindestmaß für die Schriftgröße: 11 Punkt

Tipp 5: Bilder bedacht einsetzen

Unnötige Grafiken und Videos nehmen auf mobilen Screens viel Platz weg und verlangsamen das Laden der Seite. Bildmaterial sollte daher mit Bedacht eingesetzt werden. Abgesehen davon ist auf eine korrekte Skalierung der Bilder zu achten. Stellen Sie Bilder in unterschiedlichen Größen bereit und nutzen Sie dafür das Attribut „srcset“.

Tipp 6: Frust bei Formularen reduzieren

User werden schnell frustriert, wenn sie viele Buttons drücken und lange Formulare ausfüllen müssen. Um die Conversion-Rate zu erhöhen sollten Formulare auf das Nötigste reduziert sein.

• Autovervollständigung und Rechtschreibkorrektur anbieten
• Unbedingt erforderliche Felder gering halten
• Alternative Eingabemethoden anbieten, z. B. Sprachsteuerung
• Usern erlauben dauerhaft eingeloggt zu bleiben
• Daten für den Fall zwischenspeichern, das die Verbindung ausfällt

Tipp 7: Kontaktmöglichkeiten anbieten

Scrollen ist auf dem Smartphone umständlicher als auf dem Desktop. Daher sollte der Call-to-action von vorneherein leicht zu erreichen sein. Telefonnummer und E-Mail-Adresse sollen für den User zumindest am Seitenanfang und am Seitenende sichtbar sein.

• Telefonnummern klickbar machen, damit User vom Handy aus gleich anrufen können

Tipp 8: Suche prominent platzieren

• Da aus Platzgründen auf mobile Screens nur eine reduzierte Menüführung passt, sollten Sie eine gut durchdachte Suchfunktion anbieten. Kein User will sich die gesamte Website ansehen, wenn er/sie nach einer spezifischen Information sucht. Daher erspart eine Suchfunktion sowohl am Handy als auch am Desktop viel Frust.
• Die Suche an einer prominenten Stelle platzieren und klar kennzeichnen (z. B. mit Lupen-Icon)
• Die Suche soll immer ein Ergebnis liefern (gibt es kein passendes Ergebnis, zumindest ähnliche Ergebnisse oder einen Info-Text anzeigen)

TL;DR – Zusammenfassung

Ohne solide Performance auf mobilen Endgeräten bringt Sie Ihre Website um Sichtbarkeit in den Rankings, um Conversions und um einen Vorsprung vor der Konkurrenz.

Damit Ihre Webpräsenz fit für das Google Core Update im Mai wird, sollten Sie Optimierungen rund um die Core Web Vitals ins Auge fassen. Wichtig: Die Mobilversion ist nicht nur eine abgespeckte Version der Desktopseite, sondern muss an die Bedingungen von Smartphone, Tablet und Co. angepasst werden. Falls Verbesserungen technisch nicht möglich sind oder Sie gar noch keine Website haben, die sich an unterschiedliche Screens anpasst, sollten Sie sich fragen: Ist es vielleicht Zeit für einen Relaunch?

Weitere Quellen: Interaction Design, Ryte Wiki

Gerne unterstützt Sie otago mit SEO Beratung rund um Ihren Website-Relaunch oder analysiert Ihre aktuelle mobile Website unkompliziert und schnell in einem kostenlosen SEO-Check.

Kontaktieren Sie uns einfach – wir freuen uns auf Ihre Anfrage!