Interview mit Peter Rozek

Responsive Design: Navigation-Patterns sind keine „eierlegenden Wollmilchsäue“
Kommentare

Die Navigation ist eines der Kernelemente einer responsiven Website. Doch welches Navigationsprinzip ist für die Informationsarchitektur, Bedienbarkeit und User Experience am besten geeignet? Neben der Skalierbarkeit für unterschiedliche Bildschirmgrößen ist die größte Herausforderung, die Balance zwischen Vollständigkeit und Klarheit zu finden.

Content First und Mobile First impliziert dabei, die Navigation zu überdenken. User Research und authentische User Journeys liefern valide Entscheidungsgrundlagen für die Priorisierung des Navigationsmodells. Je nach Komplexität sind Navigation Patterns erprobte Modelle, die man einsetzen kann.
In seiner Session „Responsive Navigation Patterns – UX und Guidelines“ auf der MobileTech Conference in München (23. bis 26. März 2015) geht Peter Rozek (ecx.io) diesen Fragen nach und demonstriert ferne welche Vor- und Nachteile Ansätze wie Off-Canvas, Slidedown oder Hamburger-Icon haben. Darüber hinaus formuliert er Guidelines für die Praxis. Wir haben mit Peter Rozek im Vorfeld der Konferenz gesprochen.

Welche Aspekte sollte man unbedingt beachten, wenn man das Navigationsprinzip einer responsiven Website konzipiert?

Peter Rozek: Progressive Enhancement einerseits sowie Bedienbarkeit, Position und Sichtbarkeit sind Grundvoraussetzungen für eine funktionierende Navigation und gehören nach meinem Verständnis zusammen. Frühzeitiges Testen der Darstellung, Funktionsweise und Touchability mit Mockups sind unverzichtbar, weil Ergebnisse und Fehler viel schneller erkannt werden. Unterschiedliche Browser, eine Vielzahl an Bildschirmauflösungen und die Funktionalität der Navigation in der Porträt- oder Landscape-Ansicht können evaluiert werden. Aus diesem Grunde arbeiten wir bei ecx.io mit Mockups.

Megadropdowns sind ein schönes Beispiel dafür, was alles schief gehen kann. Nicht selten sind Megadropdowns auf dem Tablet größer als der Viewport des Device. Navigationspunkte ausserhalb des Viewports können Sie dann nur noch sehr schwer erreichen. Links sollten auch nicht mit einer Doppelfunktion belegt werden. Für viele Nutzer ist die Doppelfunktion nicht verständlich. Das Hamburger-Icon allein ist kein Garant für die klare Erkennbarkeit der Navigation. Über die Beschriftung „Menü“ wird z.B. die Bedeutung auch für weniger webaffine Zielgruppen deutlich.

Abgesehen von den technischen Herausforderungen bei der Navigation und den unterschiedlichen Browsern, Auflösungen und Devices, sind bei mehrsprachigen Webseiten auch die länderspezifischen Unterschiede und technischen Begebenheiten zu bedenken.

Wie genau werden Navigation-Patterns bei der Konzeptionierung als Entscheidungshilfe eingesetzt?

Peter Rozek: Entwurfsmuster befassen sich formal mit bekannten, wiederkehrenden Entwurfsproblemen. Sie bekommen Antworten auf typische Design und Architektur Probleme und sind meistens in kompakter und wiederverwertbarer Form dokumentiert. Der Grundgedanke bei Patterns ist, Lösungswege für immer wiederkehrende Probleme aufzuzeigen. Nutzer haben sich an bestimmte Navigationsmodelle und Funktionsweisen im Netz gewöhnt und haben das als mentales Modell für sich abgespeichert. Was wir denken und tun, folgt Mustern. Jakob Nielsen hat das anschaulich zusammengefasst: „Nutzer surfen die meiste Zeit nicht auf Ihrer, sondern auf anderen Webseiten. Hier bekommen sie Erfahrungen, wie das Web funktioniert.“ Nutzererwartung und Erfahrung sind wichtige Punkte, die man nicht aus den Augen verlieren darf. Im Kontext von Multiscreen-Experience sind Pattern als ein unverzichtbarer Bestandteil der Entwicklung anzusehen.

Für die gängigsten Lösungsschablonen sind einige Vor- und Nachteile bekannt. Abhängig von der Zielgruppe und der Informationsarchitektur können Navigation-Patterns im Mockup getestet werden. Egal ob sie eine klassische Lösung, einen explorativen Einstieg oder die Stimulation durch Bilder testen wollen, vorgefertigte Patterns bieten die passende Grundlage zum Testen. In der Praxis können Sie sich für ein Dropdown, die Off-Canvas-Navigation, Drilldown, ein Slidemenü oder die Galerie entscheiden. Das Feedback aus den Test fließt zurück in die Entwicklung. Agile Arbeitsmethoden basieren auf dem Prinzip schneller Feedbackschleifen und dem Experimentieren. Durch schnelle Iterationen nähert man sich Schritt für Schritt einem optimalen Ergebnis. Überflüssige Komponenten können innerhalb eines agilen Entwicklungsprozesses weggelassen werden und schärfen den Blick für das Implizite. Dennoch ist Vorsicht geboten: Entwurfsmuster können allzu schnell als Universallösung für eine fehlerfreie und funktionierende Navigation fehlinterpretiert werden. Patterns beschreiben im Wesentlichen einen Lösungsansatz, sind aber nicht zwangsläufig die „eierlegende Wollmilchsau“.

MobileTech-Conference-2015

MobileTech-Conference-2015

Mobile Innovation & Enterprise Mobility
Die MobileTech Conference ist die führende Konferenz für Mobile Technologien und Innovation im deutschsprachigen Raum. Als Impulsgeber der Mobile-Branche führt sie erfahrene Experten aus allen Bereichen der mobilen Produktentwicklung zusammen.
Den Teilnehmern stehen mehr als 60 international bekannte Experten aus dem Mobile-Umfeld zur Seite, die ihr praktisches Know-how und hilfreiche Tipps weitergeben. Im Fokus des Konferenzprogramms steht die  erfolgreiche Entwicklung und Umsetzung von Mobile Services – sowohl im Consumer- als auch im Enterprise-Umfeld. Vom 23.-26. März findet die MobileTech Con in München statt. Bis heute, den 26. Februar, profitieren Sie noch von attraktiven Frühbucherpreisen. Alle Infos zu Konferenz, Programm und Speakern unter: http://mobiletechcon.de

Aus Ihrer alltäglichen Praxiserfahrung in Projekten: Wie sehr haben sich belastbare Guidelines inzwischen etabliert oder besteht hier immer noch großer Nachholbedarf?

Peter Rozek: Wenn Sie Guidelines für die responsive Navigation meinen, haben sich deutlich drei Lösungsansätze in der Praxis durchgesetzt. Etabliert und für die meisten Nutzer verständlich als auch akzeptiert sind das Hamburger-Icon, die Off-Canvas-Navigation und die Drilldown-Navigation. Allerdings muss man bei den drei Lösungen einiges beachten. Konventionen können je nach Zielgruppe unterschiedlich verstanden oder auch missverstanden werden. Bei Gelegenheitsnutzern kann die Lernkurve in Bezug auf Verständlichkeit und Bedienbarkeit flacher sein als bei Trendnutzern, digitalen Profis oder der digitalen Avantgarde.

Allgemein gibt es aber immer noch ein deutliches Defizit was die Usability und User Experience von responsiven Webseiten betrifft. Das trifft im übrigen auf den gesamten Mobile Bereich zu. 52 Prozent der Nutzer machen mindestens einmal schlechte Erfahrungen, 58 Prozent der Websites sind unübersichtlich und 36 Prozent haben eine schlechte Usability.

Nachholbedarf besteht sowohl bei der Bedienbarkeit und der Funktionsweise. Schlechte Bedienbarkeit ist oft das Ergebnis von mangelhaften oder zu wenigen Tests. Nutzer erwarten das die Navigation bestimmten Mustern folgt. Die Erwartungshaltung steuert wiederum das Nutzerverhalten.

Was sind Ihre bevorzugten Responsive-Webdesign-Frameworks/Plugins, die Sie empfehlen können und auf die Sie nicht mehr verzichten möchten?

Peter Rozek: Es gibt mittlerweile viele gute Framesworks und Plugins, und es kommen immer neue hinzu. Bootstrap, Foundation oder auch YAML sind eine gute Ausgangslage, wenn man sich keine Gedanken um Grids und Standardkomponenten machen will. Prüfen Sie sorgfältig und kritisch, was Sie von den Frameworks tatsächlich im Projekt benötigen und worauf Sie verzichten können. Sonst schleppen Sie Ressourcen mit ins Projekt, die sich als Performancebremse herausstellen. Ansonsten gibt es eine wirklich sehr gute Auswahl an unterschiedlichen Plugins, die man einsetzen kann. Worauf ich auf keinen Fall mehr verzichten möchte ist SASS. Allgemein kann ich jedem nur empfehlen: Bleiben Sie neugierig und lernen Sie hinzu! Wer einfach nur kopiert, kopiert auch die Fehler der anderen.

Welches ist der Aspekt im aktuellen Responsive Webdesign, bei dem Ihrer Meinung nach der größte Handlungs- bzw. Verbesserungsbedarf besteht?

Peter Rozek: Handlungs- bzw. Verbesserungsbedarf gibt es bei der Zusammenarbeit der unterschiedlichen Gewerke, beim Prozess und der Performance/Ladezeit. Die Gewerke stehen vor der Herausforderung, sich der Unterschiede bewusst zu sein und produktiv damit umzugehen. Es geht darum, das Mindset von Conceptioner, Designern und Developern für das Fachgebiet des anderen zu erweitern und ein gemeinsames Verständnis für einander zu schaffen. Ich gehöre bereits seit langem zu denen, die sagen, der Workflow im Responsive Webdesign muss sich ändern. Das klassische Wasserfallmodell hat ausgedient. Wer dies erst jetzt erkennt oder nur langsam darüber nachdenkt, seinen Prozess zu ändern, ist schon fast zu spät. Änderungen bei den Prozessen kann man aber nicht einfach auf Managementebene beschließen. Jeder muss sich fragen: Ist meine Arbeits- und Denkweise noch zeitgemäß?

Erste Probleme treten auf, wenn der Kunde und das Team unterschiedliche Vorstellungen von Responsive Design haben. Was im Prozess fehlt, ist oft eine klare Definition von dem, was „Responsive“ bedeutet und wie die projektspezifischen Anforderungen aussehen. Viel zu oft wird über Breakpoints gesprochen und darüber, was wie umgesetzt werden kann. Herkömmliche Webseiten kann man nicht einfach responsiv machen, indem man Media Queries und fluide Grids nutzt. Hier fehlt bei vielen noch das tiefgreifende Verständnis dafür, was Responsive Webdesign eigentlich bedeutet.

Die meisten responsiven Webseiten sind zum Teil viel zu überladen und die Performance ist für die mobile Nutzung erschreckend langsam. Viel zu spät wird darüber nach gedacht, wie die Ladezeit verbessert werden kann. Augenmerk wird zunächst auf ein schickes Layout und eine ausgefallene Interaktion gelegt. Allerdings sinkt die kognitive Aufmerksamkeit beim Nutzer rapide, wenn die Ladezeit über zwei Sekunden steigt. Performance wird eines der wichtigsten Themen werden.

Deutlichen Nachholbedarf gibt es noch bei Display Ads, die dynamisch im Frontend ausgespielt werden. Bisher gibt ein paar Lösungsansätze, bei denen Responsive-Design-Ad-Formate angeboten werden. In der Breite ist das klassische Advertising nach wie vor das Businessmodell. Hier brauchen wir eine dynamische Lösung, bei der die Interessen der Werbetreibenden berücksichtigt sind und die der Nutzer. Wenn eine responsive Webseite auf dem Tablet oder dem Smartphone durch Display Ads nicht mehr bedienbar ist oder die Ladezeit viel zu lang ist, wird der Nutzer die Seite nicht ein zweites Mal besuchen.

 

Peter RozekPeter Rozek arbeitet bei ecx.io in Düsseldorf und beschäftigt sich seit Jahren mit den Themen UX, Usability, Accessibility und Frontend-Entwicklung. Responsive Webdesign heißt nicht, etwas Tolles kleiner machen, damit es passt, sondern ein nutzerorientiertes Design zu entwickeln, mit dem Kunden ein gebrauchsfertiges Modell entwerfen und dabei von kleinen Einheiten zum großen Ganzen denken.

 

Aufmacherbild: „Wollmilchsau“ von Georg Mittenecker – http://kamelopedia.mormo.org/index.php/Datei:Wollmilchsau.jpg. Lizenziert unter CC BY-SA 2.5 über Wikimedia Commons – http://commons.wikimedia.org/wiki/File:Wollmilchsau.jpg#mediaviewer/File:Wollmilchsau.jpg

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -