Off-Canvas-Navigation mit Axure

Inzwischen kommen auf mobilen Websites bzw. bei der mobilen Darstellung von Responsive Webdesigns häufig so genannte Off-Canvas-Menüs zum Einsatz. Bei dieser Art der Navigation wird der gesamte Seiteninhalt auf Knopfdruck nach rechts verschoben, außerhalb des sichtbaren Bereiches, und das Menü rutscht von links ins Bild.

Somit muss eine solche Navigation natürlich auch für einen Prototypen umgesetzt werden können, um etwa im Usability-Lab einen validen Test der in der Entwicklung befindlichen Website zu ermöglichen. Vor dieser Herausforderung stand ich schon vor einiger Zeit in einem Projekt und möchte heute zeigen, wie sich eine Off-Canvas-Navigation ganz einfach mit Axure umsetzen lässt.

Beispiel-Prototyp zum Ansehen und Downloaden

Da ich den richtigen Kunden-Prototypen an dieser Stelle nicht zeigen kann, habe ich ein Beispiel konstruiert, das alle wichtigen Elemente enthält (siehe Abb. 1). Dieses gibt es hier:

Der Axure-Prototyp ist für eine (virtuelle) Displaybreite von 320 Pixeln optimiert, also etwa für iPhones. Aber auch auf größeren Displays sollte das Menü funktionieren.

Abb. 1: Der Beispiel-Prototyp mit geschlossenem (links) und geöffnetem Off-Canvas-Menü (rechts)

Abb. 1: Der Beispiel-Prototyp mit geschlossenem (links) und geöffnetem Off-Canvas-Menü (rechts)


Dynamische Panel als Wrapper für den Bildschirmausschnitt und den Inhalt

Der Prototyp des Off-Canvas-Menüs basiert auf zwei dynamischen Paneln und einem Master für den Header und die Navigation (siehe Abb. 2). Die beiden Panel fungieren dabei nur als Wrapper (Container) für andere Inhalte.

Abb. 2: Die Gesamtstruktur des Prototypen mit dynamischen Panels als Wrapper

Abb. 2: Die Gesamtstruktur des Prototypen mit dynamischen Panels als Wrapper


Das äußerste dynamische Panel „OverallWrapper“ beinhaltet alle Elemente des Prototyps und bezweckt, dass über den Seitenrand herausragende Elemente nicht angezeigt werden und auch kein Scrollen zu diesen möglich ist.

Das zweite dynamische Panel „ContentWrapper“ umfasst den eigentlichen Inhaltsbereich der Website. In meinem Beispiel ist dies nur ein Element, doch meist besteht dieser Bereich aus einer Vielzahl von Texten und Formen. Dieser Wrapper ist notwendig, damit alle Inhalte gemeinsam nach rechts verschoben werden können.

Header und Menü habe ich als Master „HeaderMenu“ umgesetzt, damit diese sehr einfach auf weiteren Seiten eingesetzt und zentral verwaltet werden können – denn meistens besteht ein Prototyp schließlich aus einer ganzen Reihe von Einzelseiten. Insgesamt besteht der Master aus 3 Elementen (siehe Abb. 3): Einem dynamischen Panel mit dem eigentlichen Menü, einem Platzhalter für den Header und dem Menü-Button. Bei einem echten Prototypen gäbe es natürlich auch hier noch eine Reihe von weiteren Elementen.

Abb. 3: Der Inhalt des Masters für Menü und Header

Abb. 3: Der Inhalt des Masters für Menü und Header


Menü mit Slide-Right-Animation und Push-Widgets-Einstellung

Der Schlüssel für die Off-Canvas-Navigation mit Axure ist das Einblenden des Menüs, bei dem ich eine Animation einsetze, die gleichzeitig den Rest der Seite nach rechts verschiebt. Das Ausblenden funktioniert dann genau umgekehrt.

Ein- und Ausblenden des Menüs funktioniert über das OnClick-Event des Buttons im Header (siehe Abb. 4). Ob das Menü bereits angezeigt wird oder nicht – und welche Aktion somit ausgeführt werden muss – ermittle ich über den Selected-Status des Menü-Buttons, der immer entsprechend gesetzt wird. Auf diese Weise kann der Button auch visuell sehr einfach auf die Interaktion reagieren. Zur Sicherheit wird das Menü noch einmal nach vorne gebracht und dann eingeblendet. Hier passiert die Magie: Als Animation für die Einblendung wähle ich „Slide right“ mit einer entsprechenden Animationsdauer, hier etwa 1000ms. Zudem muss „Push Widgets“ aktiviert werden, ebenfalls mit einer Animation über die identische Dauer. Auf diese Weise schiebt sich das Menü von links in den Bildschirm und drückt dabei den gesamten Inhalt und den Header weg.

Abb. 4: Das OnClick-Event des Menü-Buttons

Abb. 4: Das OnClick-Event des Menü-Buttons


Bei Animationen mit einer Dauer sollte man immer aufpassen, dass die Animation nicht doppelt aktiviert werden kann, sonst passieren schnell unerwartete Dinge. Dafür nutze ich die globale Variable „MenuAnimationInProgress“. Sie wird vor der Animation auf „true“ und dann bei den OnShow- bzw. OnHide-Events, also nach Abschluss der Animation, wieder auf „false“ gesetzt (siehe Abb. 5). In Abb. 4 ist zu sehen, dass das Öffnen und Schließen des Menüs nur aktiviert werden kann, wenn die Variable aktuell auf „false“ steht.

Abb. 5: Das Setzen der globalen Variable für die Menü-Animation

Abb. 5: Das Setzen der globalen Variable für die Menü-Animation


Vorteile und Einschränkungen dieser Umsetzung

Dies ist sicher nicht die einzig mögliche Umsetzung eines Off-Canvas-Menüs mit Axure. Lennart Hennigs etwa beschreibt in seinem Buch Axure for Mobile eine andere Variante. Aus meiner Sicht hat diese hier aber folgende Vorteile:

  • Diese Umsetzung ist auf Prototypen von mobilen Websites ausgelegt, die als so genannte seitenbasierte Prototypen umgesetzt werden. Bei diesen ist die hier beschriebene Möglichkeit, das Menü als Master zu verwalten, sehr praktisch.
  • Meine Variante verwendet die korrekte Animation zum Einblenden des Menüs, ein Einschieben von links.
  • Durch das dynamische Panel „OverallWrapper“ verhindere ich, dass der Nutzer per Swipe nach rechts scrollen kann und somit zum Content der Website zurückgelangt, ohne das Menü zu schließen.
  • Die Navigation lässt sich problemlos um weitere Funktionen und um ein detaillierteres Design erweitern. Je nachdem, wie genau das Off-Canvas-Menü funktionieren soll, lassen sich etwa OnSwipe-Events nutzen, damit die Nutzer das Menü auch per Wischen öffnen oder schließen können.

Folgende Einschränkungen will ich aber nicht verschweigen:

  • Der „OverallWrapper“ passt sich nicht automatisch in der Länge an den Content an. Werden ausklappende Elemente im Content einsetzt, so muss der Wrapper von Beginn an höher sein, um auch im ausgeklappten Zustand den gesamten Content anzeigen zu können. Durch die Einstellung „Fit to content“ lässt sich dies leider nicht lösen, da sich der Wrapper dann auch nach rechts erweitert. Falls jemand eine Lösung dafür kennt – immer her damit!
  • Insgesamt sieht der Prototyp durch die vielen dynamischen Panel recht kompliziert aus. Die Bearbeitung wird etwas erschwert, da man nicht immer sofort weiß, in welchem Panel ein Element genau ist. Da die Struktur aber auf jeder Seite des Prototypen identisch ist, gewöhnt man sich meiner Erfahrung nach recht schnell daran.

Somit lässt sich in Axure eine realistische mobile Navigation umsetzen, die der einer fertigen Website in quasi nichts nachsteht. Was es bei der Gestaltung einer solchen Navigation – ob Off-Canvas oder nicht – zu beachten gibt, finden Sie in meiner Grundlagenstudie zu diesem Thema: Mobile Web Navigation – Navigieren und Orientieren auf dem Smartphone.

Portraitfoto: Jan Pohlmann

Jan Pohlmann

UX Designer

BMW AG

Bisher veröffentlichte Beiträge: 60

Ein Kommentar

Schreibe einen Kommentar

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