Mobile Internetseiten: Fünf Regeln für gutes Webdesign

Die Internetauftritte von BMW, Porsche, Skoda und Toyota stehen dabei stellvertretend für Unternehmen mit komplexen Produktwelten, dementsprechend hohem Informationsgehalt und zahlreichen hierarchischen Menüebenen. Untersucht wurden Internetauftritt und die jeweiligen mobilen Seiten. Es wurden Expertengespräche geführt, und ausführliche Einzelinterviews samt Eye-Tracking beim Surfen vor Desktop-PCs und mobilen Geräten. Ziel war es, Handlungsempfehlungen für eine geräteübergreifende Konzeption von mobilen Internetseiten abzuleiten und praxistaugliche Lösungsansätze für eine optimierte Nutzererfahrung aufzuzeigen.

Die Ergebnisse der Facit-Analyse lassen sich in insgesamt fünf Handlungsempfehlungen zusammenfassen:

1. Einheitlicher Look & Feel – auf allen Geräten

Eine ähnliche Struktur der Seite und ein einheitlicher „Look & Feel“ – egal, ob „responsive Design“ oder mobile-optimierte Seite – wirken positive auf das Nutzererlebnis. User fühlen sich „wohler“ und finden sich besser zurecht, wenn Websites auf allen Geräten gleich oder sehr ähnlich aussehen.

2. Navigation und Menü müssen auf das jeweilige Gerät zugeschnitten sein

Bei komplexen Seiten sollte die Navigationsmechanik auf das jeweilige Endgerät angepasst werden, um eine angenehme Nutzung zu ermöglichen. Im Bereich der mit den Probanden analysierten Seiten von Automobilherstellern kommen auf Desktopseiten teils mehrere Menüleisten, „sticky“ – also auch beim Scrollen verankerte – Elemente oder große Flyout-Menüs mit Bildern verschiedener Modelle zum Einsatz. Solche Navigationselemente funktionieren auf mobilen Seiten nicht und frustrieren die User. Hier sind andere Lösungen nötig und auch möglich, etwa mit dem inzwischen gängigen „Hamburger“- oder „Sandwich“-Menu mit seinen drei charakteristischen Querstrichen, das bei Berührung ein Menü öffnet.

3. „Hamburger“-Menüs müssen immer gleich funktionieren

Kommt auf mobile-optimierten Seiten ein Hamburger-Menü zum Einsatz, führt es zur besten Nutzererfahrung, wenn es viele oder bestenfalls alle der folgenden Kriterien erfüllt:

• Im Hamburger-Menü müssen alle Navigations-Einträge zu finden sein.
• Es sollte oben links oder oben rechts platziert sein.
• Es sollte das „klassische“ Symbol verwendet werden.
• Das Schließen des Menüs sollte jederzeit Zeit möglich und sichtbar sein.
• Idealerweise bleiben Seiteninhalte hinter dem Menü etwas sichtbar.
• Sind weitere Untermenüs nötig, können Symbole als Indikator im Menü hinzugezogen werden. Dabei ist es den Usern egal, welche das sind (Pfeile, Plus-Zeichen etc.)

4. Kein „Hamburger“-Menü auf Desktop-Seiten

Auf Desktop-Seiten ist der „Hamburger“ (noch) nicht gelernt – und vom Großteil der User auch gar nicht gewünscht. Denn hohe Bildschirmauflösungen bieten genügend Raum, um ein vollständig sichtbares Navigationsmenü anzuzeigen, das sofort Übersicht schafft. „Das Verbergen von Navigationselementen ist auf kleinen Displays sinnvoll, um Platz für die Inhalte zu schaffen – auf großen Displays waren unsere Probanden verwirrt und fanden sich nicht intuitiv zurecht. Ein fataler Fehler in Sachen positiver Nutzererfahrung“, mahnt Christian Bopp.Aber auch auf großen Bildschirmen gibt es ein „No go“ im Bereich der Nutzererfahrung: Flyout-Menüs, die plötzlich den Großteil des Bildschirms überlagern, kommen bei den Usern ebenfalls nicht gut an – sie fühlen sich dann von den Inhalten überfordert und überrumpelt.

5. Gleicher Inhalt auf allen Geräten: Content darf nicht beschnitten werden.

Inhalte müssen heutzutage auf allen Geräten mit demselben Umfang angeboten werden. Eine reduzierte mobile-optimierte Fassung mag übersichtlicher wirken, wird von den Nutzern aber als unvollständig wahrgenommen. „Es wird von den Nutzern angesichts der Tatsache, dass Smartphones und Tablets fest etabliert und zum Surfen genutzt werden, erwartet, dass Unternehmen überall alle Inhalte bereitstellen“, so Christian Bopp. Hier haben responsive gestaltete Seiten oft die Nase vorn, da deren Inhalte zumeist von vornherein geräteübergreifend angelegt sind.

„Insgesamt müssen Unternehmen darauf achten, ihre Websites so zu optimieren, dass User eine möglichst positive Nutzungserfahrung auf jedem Gerät erleben – ob responsive Design oder über eine eigene mobile Seite spielt dabei primär keine Rolle. Viel wichtiger ist, dass Websites auf allen Geräten einen ähnlichen Look haben, eine einheitliche Informationsarchitektur aufweisen, sämtliche Inhalte abbilden und eine jeweils intuitiv und leicht verständliche Menüführung bieten“, erklärt Christian Bopp, Geschäftsführer Facit Digital.

Kontakt: www.facit-digital.com