Navigation Drawer, Off-canvas navigation

In einem älteren Artikel habe ich sinngemäss geschrieben:

Wenn man Interaktionselemente von nativen Apps bei WebApps einsetzt, müssen diese die Benutzererwartungen erfüllen.

Was ist damit gemeint?

Ein Beispiel.

Fig. 1: Für native Android-Apps gibt es das Design-Pattern „Navigation Drawer“. Nach dem Klick auf das Hamburger-Icon (1) erscheint ein Navigations-Panel (2) das den Bildschirm überlagert. Genutzt zum Beispiel bei GoogleGmail, GoogleMaps, GooglePlay und den meisten neueren Android-Apps.

Illusrtration Navigation Drawe
Fig. 1 screen_01.jpg

Ein ähnliches Pattern gibt es auch bei der nativen Facebook-App. Bei Facebook wird dieses Panel allerdings von rechts nach links eingeblendet.

Ein solches Panel wird seit längerem auch bei vielen Mobileversionen von Websites und Web-Applikationen verwendet. Eine Beeinträchtigung der Benutzererfahrung entsteht aber dann, wenn man dem Benutzer ein zwar, visuell, bekanntes Interaktionselement zur Verfügung stellt, dieses aber in seiner Funktionalität nicht die Erwartungen erfüllt. Ein kleiner, aber wichtiger Unterschied: Es kann (meistens) nicht über Touch-Gesten wieder geschlossen werden.

Fig. 2: Und oft wird dieses Interaktionselement zuwenig ausgestaltet (1). Wichtig ist nämlich auch die klare Trennung zwischen dem Navigations-Panel und dem „darunterliegenden“ Seiteninhalt. Durch Abdunklung des Seiteninhalts wird eine bessere Trennung zwischen Navigation und Seiteninhalt erreicht (3). Natürlich darf der Seiteninhalt bei geöffnetem Panel nicht scrollbar sein. Wie schliesse ich das Panel? In diesem Beispiel ist die einzige Möglichkeit ein weiterer Klick auf das Hamburger-Icon mit sehr kleiner Klickfläche (2).

Screen Navigation Drawer
Fig. 2 screen_02.jpg

Die oben erwähnten Aspekte habe ich in einem einfachen Prototypen berücksichtigt und umgesetzt.

Fig: 3: Klick auf das Hamburger-Icon öffnet das Navigationspanel (1). Seiteninhalt und Panel sind klar getrennt (2). Das Panel kann nicht nur durch Klicken auf das Schliessen-Icon (3), sondern auch durch einen Klick auf die ganze Fläche mit Ausnahme der Navigation (4) und durch die Touch-Geste „Swipe-left“ geschlossen werden (5).

Screen Navigation Drawer
Fig. 3 screen_03.jpg
QR Code Link zu Artikel
View on your phone

Technische Aspekte

Um eine optimale Benutzererfahrung zu erreichen, ist auch ein „weiches“ Öffnen und Schliessen des Panels wichtig. Das kann man dadurch erreichen, dass man nicht mit einem Script (z.B. jQuery’s .animate) arbeitet, der den Browser dazu zwingt bei jedem Öffnen des Panels das Layout neu zu berrechnen, sondern mit dem moderneren Ansatz von „CSS transforms“ und „CSS transitions“. Zum Beispiel: -webkit-transform: translate3d(-100%, 0, 0); und -webkit-transition: -webkit-transform 500ms ease;. David Bushell beschreibt das ausführlich in seinem Artikel „Implementing Off-Canvas Navigation for a Responsive Website“ (smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website).

Weiterführende Links zum Thema