Die meiste Nutzung auf dem Smartphone geschieht einhändig. Für ein gutes UX-Design ist dies zu beachten.
Neben diesen Tipps wollen wir gerne eine Reihe von Fragen auflisten, was die Zusammensetzung und Art einer responsiven Navigation angeht. Je nach Weblösung sind andere Ansätze sinnvoll:
- Sticky Navigation?
Eine Navigation die am unteren oder oberen Displayrand fixiert ist. Pro: Orientierung. Kontra: Platzverbrauch.
(Bemerkung für nachfolgende Fragen: Die normale Navigation und die Sticky Navigation kann jeweils individuell gelöst werden.)
- Scroll to Top Button?
Pro: Navigation. Kontra: Platzverbrauch, Design.
- Burger Icon / Text Button (Menü oder Mehr) / Burger Icon mit Text?
Pro Icon: Design. Pro Text: Verständlichkeit.
- Direktzugänge?
Aktionen oder Seiten in der mobilen Navigation (E-Mail Link, Anmelden usw.)
Pro: Zielführung. Kontra: Platzverbrauch.
(5. und 6. nur bei Direktzugänge: Ja)
- Direktzugänge sichtbar in der Navigationsleiste /
Direktzugänge in geöffneter Navigation?
- Direktzugänge im Inhaltsbereich?
- Logo in Navigation?
Pro: Wiedererkennung. Kontra: Platzverbrauch.
- Geöffnete Navigation als: Slide / Slide Aside / Push Down / Push Aside / Fullscreen?
Pro Slide Down: Orientierung. Pro Slide Aside: Orientierung. Pro Push Down: Browser Freundlichkeit. Pro Fullscreen: Design.
- Geöffnete Navigation Level 2 als: Push Down / Push Aside?
Pro Push Down: Übersicht. Pro Push Aside: Platzverbrauch.
Zusammenfassung als Print-Pdf mit Flussdiagramm: Download
Responsive Webdesign ist nicht mehr wegzudenken. Gerade die Navigation ist von entscheidender Bedeutung für den Erfolg einer Weblösung und muss für verschiedene Endgeräte oft neu angedacht werden. Hier ein paar Tipps, was bei einer mobilen Navigation zu beachten ist.
Um das bestmögliche Nutzererlebnis zu erreichen, können diverse Punkte und unterschiedliche Lösungsansätze beim Design der responsiven Navigation berücksichtigt werden. Wir haben die wichtigsten hier zusammengetragen:
- Simpel: Auf mobilen Geräten ist das Display sehr limitiert. Darum muss der wertvolle Platz so gut als möglich eingesetzt werden. Die mobile Navigation sollte bis aufs nötigste reduziert sein und optisch nicht vom Inhalt ablenken.
- Touchscreen freundlich: Damit die responsive Navigation auch für Touch-Devices funktioniert, ist darauf zu achten, dass die touch-sensitiven Flächen auch gut mit dem Finger bedient werden können. Apple empfiehlt in der „iPhone Human Interface Guidelines“ eine Grösse von mindestens 44 x 44 Pixel und Windows im „UI Design and Interaction Guide for Windows Phone 7“ ein Minimum von 34 x 34 Pixel. Auch daran zu denken ist, dass es auf Touchscreen Displays keinen Hover State gibt, sprich kein „Überfahren“ eines Elementes.
- Die Möglichkeiten zeigen: Der Nutzer wird gerne geleitet und möchte di gewünschte Aktion nicht suchen. Wenn möglich sollten die meist gesuchten Aktionen oder Seiten in der mobilen Navigation daher direkt sichtbar sein. Auch im Seiteninhalt können Links oder Buttons zum nächsten logischen Schritt platziert werden.
- Verständlich: Die mobilen Navigationspunkte sollten immer eindeutig und selbsterklärend sein. So schön Icons auch sein mögen; Symbole ohne Text darzustellen, ist nur sinnvoll, wenn sie als allgemein bekannt gelten. Im Zweifelsfall ist es immer hilfreich, die Navigation von wenig technikaffinen Personen testen zu lassen.
- Platzierung auf dem Display: Laut der Recherche „How Do Users Really Hold Mobile Devices?„ in „UXmatters„ ist die meist angewandte Art wie Smartphones gehalten werden einhändig. Demnach sollte bei der Platzierung von aktiven Elementen in der mobilen Navigation die „daumenfreundliche Zone“ berücksichtigt werden.
