rankingCHECK
MENÜ

Google’s Empfehlungen zum Mobilen Webdesign

Vergangene Woche hat Google ein Whitepaper veröffentlicht, welches die Ergebnisse einer Studie zum Webdesign mobiler Websites zusammenfasst. Basierend auf 119 Stunden an User-Feedback von Testpersonen, die 100 prominente mobile Websites in so genannten Usability-Sessions ausprobierten und Ihr Feedback zur Nutzererfahrung wiedergaben, hat Google 25 Regeln für gutes mobiles Webdesign definiert. Die Teilnehmer der Studie mussten dabei ganz bestimmte Aufgaben lösen, die jeweils eine Conversion zum Ziel hatten.

Besonders spannend erscheint die Betrachtung auch in Bezug auf Googles zuletzt veröffentlichte Ranking-Faktoren für mobile Websites. Wird Google die nun definierten Regeln für ein optimales mobiles Webdesign ebenfalls in die Bewertung von mobilen Websites mit einfließen lassen? Doch auch davon abgesehen empfiehlt es sich für Webseitenbetreiber die Nutzererfahrung auf Ihrer mobile Webseite zu berücksichtigen.  Die wichtigsten Regeln haben wir im Folgenden nun noch einmal zusammengefasst: 

Startseite und Seitennavigation

Die mobile Startseite sollte weniger als Willkomensseite fungieren, sondern den vom Nutzer geforderten Content direkt in den Fokus setzen. Dabei sollten die wichtigsten Call-to-Actions direkt im Body auf der Startseite prominent platziert werden. Das Haupt-Seitenmenu sollte wiederum kurz gehalten werden und nur die wichtigsten Menupunkte beinhalten. Hintergrund ist, dass mobile Nutzer sich ungern durch lange Listen von Optionen navigieren um zum gewünschten Ziel zu finden. Aus dem gleichen Grund sollte die Navigation zurück zur mobilen Startseite von jeder Unterseite aus barrierefrei möglich sein. Dies lässt sich idealer Weise durch das intern verlinkte Logo am Seitenkopf realisieren.

Aber auch eine Breadcrumb kann hier hilfreich sein. Zu guter Letzt empfiehlt Google, Werbebanner und sonstige Promotion-Elemente inhaltlich vom Haupt-Content klar zu trennen und somit eine problemlose Navigation durch die mobile Seite und eine klare Erkennung von wichtigen Call-to-Actions zu gewährleisten.

Interne Suche

Auch wenn die interne Suche in aller Regeln eher als letztmögliche Alternative genutzt werden sollte: Wenn der Nutzer einen gewünschten Inhalt nicht über die Navigation findet, sollte das Suchfeld auf mobilen Websites stets prominent am Seitenkopf platziert sein. Dazu empfiehlt Google, ein klar sichtbares Textfeld zu integrieren, welches sich sofort als interne Suche zu erkennen gibt.

Um möglichst relevante Suchergebnisse aus der internen Suche gewinnen zu können, empfiehlt Google weiterhin ’smart-search-features‘ wie Autocomplete und Autocorrections zu implementieren. Darüber hinaus sollten natürlich sofort auf der ersten Suchergebnisseite die relevantesten Suchergebnisse zur Suche erscheinen. Um die interne Suche wiederum komfortabler zu gestalten, sollte sie durch Filter erweitert werden, die jedoch keine Filterkombinationen erlauben dürfen, für die es keine passenden Suchergebnisse gibt.

E-Commerce und Conversions

Zur Conversion-Steigerung empfiehlt Google im ersten Schritt, die Registrierungshürde auf mobilen Websites so niedrig wie möglich zu halten. Fordert die Webseite eine Registrierung vom Nutzer, oder bietet sie diesem sogar nur sehr prominent auf der Startseite an, bevor dieser den Content der Seite durchsuchen kann, so verringert dies die Bereitschaft zur Nutzung der Website. Demnach sollte die Nutzerregistrierung erst dann gefordert werden, wenn Sie tatsächlich erforderlich ist, z.B. im Bestellprozess. Doch auch hier kann es von Vorteil sein, dem Nutzer den Guest-Checkout zu ermöglichen, und die endgültige Nutzerregistrierung nur als Alternative anzubieten. In vielen Szenarien sehen mobile Nutzer keine Vorteil darin, sich mit Ihren persönlichen Daten überhaupt zur registrieren.

Darüber hinaus empfiehlt Google die Verwendung von ‚third-party checkout services‘ und ‚third-party payment services‘ also Option, um die Frustration beim Ausfüllen von Formularen im Kaufprozess zu minimieren.

Ein Punkt der auch in meinem Artikel zur mobilen Usability immer wieder Erwähnung fand, sind Click-to-Call Buttons. Auch Google rät dazu, gerade bei komplexeren Aufgaben / Branchen, den Nutzern immer einen telefonischen Support über einen simplen Click-to-Call Button anzubieten.

Um die Konvertierung möglichst Geräteunabhängig zu gestalten, sollten dem mobilen Nutzer Möglichkeiten angeboten werden, seinen Verlauf im Conversion-Prozess ohne Verlust auf ein anderes Device übertragen zu können. Eine Möglichkeit besteht zum Beispiel darin, eine Merkliste von Produkten anzubieten, die sich problemlos über Sharebuttons teilen bzw. weiterleiten lässt. So erhält der Nutzer die Option, den sensiblen Konvertierungsprozess in der mobilen Situation an anderen Stelle fortzufahren.

Formulare

Auch dieser Aspekt fand schon in meinem Usability-Artikel Erwähnung. So empfiehlt auch Google ganz klar, dem Nutzer immer das korrekte Tastaturlayout darzustellen, abhängig von dem Formularfeld, welches er gerade bearbeitet. Darüber hinaus sollte generell immer der einfachste Eingabetyp in mobilen Formularen angeboten werden und  zum Beispiel zwischen Dropdown-Menus und Radio-Buttons abgewägt werden, abhängig davon ob der Nutzer eine Auswahl aus vielen verschiedenen Optionen, oder einer limitierten Anzahl an Optionen tätigen muss.

Zur Eingabe von Kalenderdaten sollte auch mobil selbstverständlich immer die Option eingeblendet werden, das Datum über einen visuellen Kalender zu definieren. Und grundsätzlich sollte jedem Formularfeld ein aussagekräftiges Label spendiert werden und durch eine Echtzeitvalidierung der eingegeben Daten sofort über Fehleingaben informieren, um dem Nutzer ein erneutes Absenden des Formulars zu ersparen, falls er eine falsche Eingabe getätigt hat.

Nutzererfahrung und Design

Neben der Notwendigkeit die mobile Seite konsequent für die Nutzung & Darstellung auf mobilen Endgeräten zu optimieren, empfiehlt es sich, das Bedürfnis von Pinch-to-Zoom Gesten vollständig zu vermeiden. So sollten alle Call-to-Actions ohne eine manuelle Skalierung des sichtbaren Bereichs problemlos sichtbar und erreichbar sein. Dazu sollte bei der Gestaltung der mobilen Website ganz einfach auf die feste Skalierung auf die Displaybreite des Endgerätes geachtet werden.

Auch wenn die Übertragungsrate auf mobilen Endgeräten immer ein Thema ist, sollten Produktfotos auf mobilen Webshops wenn möglich in einer hochauflösenden Variante angeboten werden, die sich alternativ betrachten lässt.

Eine durchaus interessante Möglichkeit ist es, dem Nutzer eine Empfehlung hinsichtlich der optimalen Geräteausrichtung zu geben. Lässt sich die mobile Webseite besser darstellen, wenn das Smartphone horizontal gehalten wird, oder bietet Sie in dieser Lage eine erweiterte Darstellung an? Google empfiehlt in solchen Fällen, den Nutzer aktiv darüber zu informieren. Dennoch sollten wichtige Call-to-Actions immer unabhängig von der Ausrichtung sichtbar bleiben.

Bzgl. der Browserverwendung rät Google ganz klar dazu, innerhalb der mobilen Website niemals das Fenster verlassen zu müssen, indem z.B. durch den Klick auf einen Call-to-Action Button ein neues Fenster geöffnet wird. Dies kann, aufgrund der unterschiedlichen Funktionsweisen mobiler Browser zu Verwirrung beim Nutzer führen.

Beim nächsten Tip knüpft Google an seiner klaren Empfehlung zu mobilen Rankingfaktoren an, dem mobilen Nutzer immer einen Zugang zur Desktop Seite zu ermöglichen. Interessant ist hier der Hinweis, den Zugang nicht mit der Bezeichnung „Full Site“ zu betiteln, da dem mobilen Nutzer sonst suggeriert werden könnte, dass die mobile Seite eine abgespeckte Variante darstellt. So sollte der Button zur klassischen Seite auch immer entsprechend mit dem Ankertext „Desktop..“ oder „klassische Seite…“ beschrieben werden.

Zuletzt empfiehlt Google, wenn der Standort des mobilen Nutzers ermittelt werden soll, diesen immer darüber zu informieren, wozu dies dient und welchen Vorteil der Nutzer dadurch erhält.

Fazit

Viele der dargelegten Ergebnisse aus Google’s Studie lassen sich schon lange auch auf Desktop Webseiten beziehen. Dennoch gibt Google einige interessante Hinweise und Tipps, gerade in Bezug auf die mobile Nutzererfahrung und zur Conversionsteigerung. Und auch wenn einige der Regeln schon lange nicht unbekannt sind, zeigt die vorliegende Studie, dass selbst prominente mobile Websites viele der Design-Patterns noch vernachlässigen.

Das gesamte Whitepaper könnt Ihr hier downloaden. Zudem haben wir die wichtigsten Regeln noch einmal in eine Checkliste gepackt, die Ihr hier ebenfalls downloaden könnt:

Jasper Thibaut ist Head of SEO bei rankingCHECK und mobile SEO Spezialist. Beruflich wie auch privat setzt er sich verstärkt mit dem mobilen Web und Disziplinen des mobile Marketings auseinander. Mehr von ihm gibt es auf jasper-thibaut.de

4.89 / 5 (9 votes)

Schreibe einen Kommentar

Loading Facebook Comments ...

3 Kommentare

Trackbacks

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Loading Disqus Comments ...