Responsives Webdesign: 9 „Do´s“  und „Don´ts“  bei der Navigation

    Websites müssen jederzeit, überall und plattformunabhängig zugänglich sein. Wir stellen die 9 Do's und Don'ts beim Design Ihrer responsiven Website vor.

    Abonnieren Sie unseren Blog

    Alles begann im Jahr 2015 mit dem Algorithmus-Update „Mobilegeddon“ von Google, das dafür sorgte, dass mobil-freundliche Websites in den mobilen Suchergebnissen von Google besser abschnitten. Heute gehört es zu den Standardvoraussetzungen für ein gutes Suchmaschinenranking, dass Websites für unterschiedliche Displaygrößen geeignet sind. Sie müssen jederzeit und überall plattformunabhängig aufgerufen werden können: egal, ob mit herkömmlichen Desktop-PCs und Tablets oder einfachen Smartphones mit kleinem Display. In diesem Blog stellen wir Ihnen die Do's and Don'ts beim Navigationsdesign für unterschiedliche Geräte vor.

    Komplexe Navigation im responsiven Webdesign

    Bei der Gestaltung der Website für unterschiedliche Gerätetypen müssen viele verschiedene Aspekte beachtet werden. Natürlich muss das Design in allen Displaygrößen stimmen, vor allem sollten aber auch der Content auf die unterschiedlichen Anzeigegeräte zugeschnitten sein. Jan Lemmens hat gesagt, dass responsive Websites eine durchdachte Content-Strategieerfordern.

    Eine wichtige Rolle spielt an dieser Stelle die Hierarchie des Contents, die eine logische, benutzerfreundliche Navigation ermöglicht. In diesem Rahmen bestehen verschiedene Herangehensweisen. Hier sollen drei große Kategorien betrachtet werden: flache Listen, Baumhierarchien und Tag-basierte Strukturen. In einer flachen Liste befinden sich alle Seiten auf derselben Hierarchieebene: Es gibt keine über- oder untergeordneten Seiten, stattdessen haben alle Seiten benachbarte Seiten. Diese Struktur findet sich häufig bei Blogs. In einer Baumhierarchie kann jeder Knoten (das heißt jede Seite) nur eine übergeordnete Seite haben, aber mehrere benachbarte und/oder untergeordnete Seiten.

    Diese Strukturierung wird in vielen Bereichen verwendet – Nicht nur bei Websites, sondern auch etwa für die Verzeichnisstrukturen von Betriebssystemen oder Familienstammbäume. Eine Alternative stellt die Tag-basierte Strukturierung dar: Dabei werden jeder Webseite verschiedene Tags zugewiesen, über die wiederum den einzelnen Seiten übergeordnete Seiten zugewiesen werden. Beim Tagging kann jede Seite mehrere übergeordnete Seiten haben, während die benachbarten Seiten abhängig davon variieren, welcher Tag aktuell für die Navigation verwendet wurde. Tagging ist das komplizierteste Strukturierungsverfahren, bietet aber den Vorteil, dass es sehr flexible Content-Hierarchien ermöglicht.

    Bei einer geringen Zahl an Dokumenten benötigen einfache Strukturen wie flache Listen nur eine einfache Navigation und sind wenig fehleranfällig. Sollen dagegen Zehntausende von Dokumenten verwaltet werden, ist die Navigation schon gar nicht mehr so trivial  − erst recht nicht, wenn eine Vielzahl von Geräten unterstützt werden soll. Im Folgenden werden wir sehen, was beim geräteübergreifenden Design zu beachten und was zu vermeiden ist.

    Was beim responsiven Navigationsdesign zu beachten ist

    Erfolgsmaßnahme Nr. 1: Anpassung der Navigation an die Displaygröße

    Die Navigationsgestaltung ist keine einfache Angelegenheit, schon gar nicht, wenn sich die Nutzer unterschiedlichster Geräte bequem auf einer Website zurechtfinden sollen. Achten Sie darauf, dass für jede Bildschirmgröße eine geeignete Navigationsart vorhanden ist. Horizontales Scrollen sollte auf mobilen Geräten vermieden werden. Darum muss die Navigation so gestaltet werden, dass die Seite auch bei vertikalem Scrollen immer richtig angezeigt wird. Wandeln Sie die horizontale Navigation der Desktopversion in ein vertikales Akkordeonmenü um.

    Außerdem müssen die Schaltflächen und Links Ihrer Website so gestaltet sein, dass mobile Nutzer sie auch auf kleinen Displays problemlos „treffen“.

    Erfolgsmaßnahme Nr. 1: Anpassung der Navigation an die Displaygröße

     

    Erfolgsmaßnahme Nr. 2: Anpassung der Navigation an den Content

    Nicht jede Navigation passt gleich gut zum Design Ihrer Website oder zur Vision, die Sie vermitteln möchten. Trotzdem sollten Sie bei der Gestaltung der Navigation vorrangig den Content betrachten. Manche Navigationsmuster sind eher auf Navigationsstrukturen mit einer geringen Anzahl an Optionen zugeschnitten, andere eignen sich gut für Websites mit vielen Hierarchieebenen. Rechtzeitige, vorausschauende Planung ist hier die beste Wahl: Eine gut definierte Informationsarchitektur macht das Navigationsdesign gleich viel einfacher und übersichtlicher.

    Erfolgsmaßnahme Nr. 2: Anpassung der Navigation an den Content

    Erfolgsmaßnahme Nr. 3: Konzentrieren Sie sich auf den Content und halten Sie den Umfang der Navigation so gering wie möglich

    Auf dem Desktop, wo Platz reichlich vorhanden ist, nimmt die Navigation im Verhältnis zum Website-Content oft einen großen Teil der Bildschirmfläche ein. Auf mobilen Geräten ist davon abzuraten, da hier deutlich weniger Platz für Content zur Verfügung steht. Achten Sie darauf, dass Ihr mobiles Navigationsmenü im eingeklappten bzw. inaktiven Zustand so klein wie möglich ist, damit der Fokus auf dem Content liegt. Nur so können Besucher auch auf kleinen Displays so viel Content wie möglich sehen.

    Konzentrieren Sie sich auf den Content und halten Sie den Umfang der Navigation so gering wie möglich

    Erfolgsmaßnahme Nr. 4: Einleuchtende Symbolbeschriftungen

    When using labeled icons as a part of your navigation, make sure it's clear for visitors how the labels relate to the chosen icons. Without this connection, it's hard for them to understand what was intended by the icons and this will take them longer to figure out and will result in many errors. Use well established icons, such as a house for home and a pin for a map.

    Einleuchtende Symbolbeschriftungen

     

    Erfolgsmaßnahme Nr. 5: Einfachheit

    Versuchen Sie, die Navigation so einfach wie möglich zu halten. Das ist vermutlich der schwierigste Aspekt der Navigationsgestaltung. Ihre Besucher müssen rasch in der Lage sein, sich anhand der Navigation ein Modell Ihrer Seite vorstellen zu können. 

    Erfolgsmaßnahme Nr. 6: Effektive Suchfunktion

    Websites brauchen Suchoptionen. Die Suche ist eine wichtige Alternative zur herkömmlichen Navigation. Sie wird von Besuchern vor allem dann genutzt, wenn die Navigation nicht funktioniert. Nur selten verwenden Besucher die Suchfunktion öfter als die Navigation der Website. Die meisten Besucher benutzen zunächst die Navigation und später auch die Suche.

     

    Was beim responsiven Navigationsdesign zu vermeiden ist

    Fehler Nr. 1: Verstecktes Navigationsmenü

    Für Nutzer mobiler Endgeräte ist das Navigationsmenü manchmal nicht leicht zu finden. Davon frustrierte Besucher verlassen Ihre Website vorzeitig und kommen auch nicht zurück. Das Ergebnis ist eine hohe Absprungrate, die sich negativ auf das Suchmaschinenranking Ihrer Website auswirkt. Achten Sie unbedingt darauf, dass Ihr Navigationsmenü gut sichtbar und leicht erkennbar ist. So surfen Besucher länger durch Ihre Website und die Konversionsrate verbessert sich idealerweise.

    Fehler Nr. 2: Versteckter Content

    Ob Ihre Website auf Mobilgeräten denselben Content anzeigen sollte wie auf dem Desktop, ist eine Frage, die derzeit hitzig debattiert wird. Ich würde sagen: ja. Wenn der Content plattformunabhängig identisch ist, sollten Sie in jedem Fall die Layouts, Schaltflächen und sonstigen Website-Elemente so anpassen, dass die Besucher unabhängig vom Gerät ein angenehmes Navigationserlebnis haben. Unterschiedliche Menüeinträge verunsichern die Nutzer und bringen ihr geistiges Modell ins Wanken. Sie müssen sich erneut mit Ihrer Website vertraut machen – wenn sie nicht gleich zu einem Mitbewerber abwandern.

    Fehler Nr. 3: Ihrem CMS zu vertrauen, dass …

    … sich dieser dem Content perfekt anpasst!

    Bei der Content-Erstellung für responsive Websites können Sie sich nicht darauf verlassen, dass Ihr CMS die nötige Anpassung vornimmt. Die Redakteure müssen darauf achten, dass der gesamte eingegebene Content (Text, Bilder, Videos usw.) auch tatsächlich für sämtliche unterstützten Displaygrößen in das Design der Website passt. Das CMS kann hier Abhilfe schaffen, indem nicht nur etwa die Bildgrößen an die verschiedenen Größen des Designs angepasst werden, sondern darüber hinaus die passende Auflösung für Retina-Displays oder Bildschirme mit geringerer Punktdichte gewählt wird. Dafür zu sorgen, dass die Titel in die Navigation passen und das Design nicht durch lange Wörter "zerschossen" wird, ist freilich nach wie vor Sache des Content-Teams!

    Ihrem CMS zu vertrauen, dass ich dieser dem Content perfekt anpasst!

     

    Fazit

    Eine gute Menüstruktur (Navigation) zu erarbeiten, erfordert einiges an Vorausplanung sowie eine gute Kenntnis Ihrer Nutzer und der unterstützten Formfaktoren. Smarte Endgeräte sind in zahlreichen unterschiedlichen Größen und Formen auf dem Markt. Sie müssen sicherstellen, dass Ihre Seiten auf allen Geräten nutzbar und navigierbar sind. Verlassen Sie sich nicht einfach auf Ihr Bauchgefühl, sondern testen Sie die Navigation systematisch. Auch nach der Einrichtung der Navigationsstruktur müssen Sie regelmäßig überprüfen, ob Ihre Website auf allen Geräten so aussieht und funktioniert, wie sie es auch sollte.

    Veröffentlicht auf    Zuletzt aktualisiert am 25/01/2021

    #Digitale Strategie, #Kundenerfahrung

    Über den Autor

    Maarten Krijn is WCM Senior Consultant at Amplexor, based in Belgium. Maarten is a certified Java SE 7 Programmer, skilled in Cascading Style Sheets (CSS), SDL Tridion, .NET Framework and Android Development. With a demonstrated history of working in the Information technology and Services, he joined the Amplexor Digital Experience team in 2011.

    SUBSCRIBE TO OUR BLOG