Design

Off-Canvas-Flyouts werden bei Websites gesellschaftsfähig

Als Off-Canvas-Flyouts werden die Menüleisten bezeichnet, die sich von einer Displaykante aus ins Bild schieben lassen. Die meisten Menschen kennen diese Menüleisten von den Benutzeroberflächen ihrer Smartphones und Tablets. Dort reicht die Größe des Displays nicht aus, um alle Navigationselemente in ähnlicher Form wie auf dem Desktop eines Notebooks oder dem Display eines Arbeitsplatzrechners anzeigen zu lassen. Inzwischen wurden die Off-Canvas-Flyouts aber auch für diese beiden Gerätearten übernommen. Microsoft führte sie beim hauseigenen Betriebssystem Windows mit der Version 8 ein. Hier lassen sich mit den Off-Canvas-Flyouts beispielsweise die Einstellungen und die Hilfefunktionen blitzschnell erreichen.

Welchen Vorteil bieten Off-Canvas-Flyouts bei Websites?

Responsive Webdesign bedeutet, dass die Inhalte einer Website an die Anzeige auf verschiedenen Displays automatisch angepasst werden. Bei den Content Management Systemen werden die in den Sidebars angeordneten Menüs bei der Anzeige auf dem Smartphone oder dem Phablet kurzerhand nach unten verschoben, wenn sie nicht als Off-Canvas-Flyouts angelegt sind. Die Konsequenz für den Nutzer solcher Websites ist, dass er erst umständlich scrollen muss, um die Navigationsmenüs zu erreichen. Das wiederum wird als erheblicher Nachteil bei der Usability eingeschätzt. Der Besucher wird dadurch mit hoher Wahrscheinlichkeit nur den Artikel lesen, den er aus den Google-Suchergebnissen heraus aufgerufen hat. Das geht mit kurzen Verweildauern einher, die sich nachteilig auf die Bewertung durch die bei den Suchmaschinen verwendeten Algorithmen zur Sortierung der Suchergebnisse auswirken. Mit den Off-Canvas-Flyouts lassen sich diese Nachteile vermeiden.

Wann machen Off-Canvas-Flyouts bei Websites Sinn?

Auch für Websites, die auf die Anwendung auf dem Display eines klassischen Desktop-PCs optimiert werden sollen, kann die Umstellung auf Off-Canvas-Flyouts eine gute Sache sein. Werden rund um die Angebote eines Online-Shops oder die informativen Artikel einer Website umfangreiche Menüs dauerhaft eingeblendet, führt das dazu, dass die Inhalte der Website in die Länge gezogen werden. Der sichtbare Bereich der eigentlichen Informationen und Angebote wird dadurch erheblich geringer. Dabei ist gerade der erste Eindruck von der Qualität der Produkte und Informationen wichtig, um einen Besucher auf einer Website festzuhalten und zum Stöbern in weiteren Inhalten zu bewegen. Auch Handlungsaufforderungen, die zumeist am Ende der Artikel platziert werden, geraten so aus dem Sichtfeld des Besuchers einer Website. Die Off-Canvas-Flyouts verschaffen dem Webdesigner / Programmierer die Möglichkeit, die für den ersten Eindruck wichtigen Inhalte im direkten Sichtbereich zu platzieren.

Off-Canvas-Flyouts bringen weitere Vorteile bei der Usability

Zu den ersten Anwendern der Off-Canvas-Flyouts gehörte Facebook. Hier bestand die Zielstellung darin, dem Nutzer die Suche in der Chronik der einzelnen Seiten zu ersparen. Mit den Off-Canvas-Flyouts (die Faceboook derzeit allerdings nur für Mobilgeräte anwendet) erhielten die Nutzer die Chance, beispielsweise Freundes- und Kontaktlisten einsehen zu können, ohne die angezeigte Seite verlassen zu müssen. So wurde ein schneller Wechsel zwischen den verschiedenen Bereichen einer Seite möglich, bei denen ein Rücksprung jederzeit ohne zusätzliche Eingaben erfolgen kann.

Das zeigt, dass die Off-Canvas-Fylouts eine gute Chance zur Verbesserung der Usability auf Websites mit sehr umfangreichen und in verschiedene Bereiche gegliederten Inhalten sind. Die Off-Canvas-Flyouts schaffen sozusagen eine zweite Ebene auf einer Website, die nur bei Bedarf eingeblendet wird.

Sie möchten sich die Vorteile dieser Technologie auf Ihren Websites zunutze machen? – Dann finden Sie bei Baseplus DIGITAL MEDIA GmbH fachkundige Ansprechpartner für die W3C-konforme Umsetzung.

We create for you

Unter der Überschrift „Kreation“ vereinen wir die 4 Kernkompetenzen von baseplus®: Das Design, die Entwicklung, das Online Marketing und Print, in der jeweils anmutenden Farbe. Das konsequente Color-Coding dient der optimierten Benutzerführung, die Claims kommunizieren jeden Bereich zusätzlich.

Klicken Sie hier, um zu sehen was wir meinen