Ein sonniger Tag. Wir befinden uns auf einem herrlichen Wanderweg mit großartigem Panorama. Der wunderschöne Bergsee, der in so vielen Prospekten zu finden ist, ist unser Ziel. Plötzlich haben wir eine Gabelung vor uns – drei Möglichkeiten und kein Wegweiser. Und jetzt?
Jetzt stellen wir uns vor, dass der Wanderweg unser kleiner, wunderschön gestalteter Webshop ist und einer unserer User den traumhaften Bergsee – beziehungsweise in diesem Fall eine Hochzeitseinladung – finden möchte. Auch hier würden wir unsere Besucher ohne Wegweiser ganz schön alleine lassen. Und der bekannteste und beste Wegweiser für eine Website ist das Menü.
Doch nicht nur für unsere Nutzer ist das Menü relevant, auch für Suchmaschinen und damit im Endeffekt wieder für uns als Shopbetreiber. So zeigt das Menü den Webcrawlern, das sind die Programme der Suchmaschinen, die unsere Websites durchsuchen und analysieren, welche Struktur unsere Seite hat und welche Seiten wir als Betreiber als am relevantesten betrachten (Beus 2019).
Wenn die Suchmaschinen unsere Seite verstehen, können sie Nutzern aus unserer Zielgruppe genau jene Ergebnisse liefern, die sie im Moment der Suche erwarten, womit wir abermals beim schon besprochenen Thema des User-Intents wären, der von uns erfüllt wird.
Das Menü bietet für uns außerdem die Möglichkeit, uns einige psychologische Phänomene anzusehen, die wir beim Aufbau und der Gestaltung unseres Menüs nicht außer Acht lassen sollten.
Bleiben wir gleich bei den psychologischen Phänomenen und sehen uns an, wie wir deren Erkenntnisse nutzen können, um ein aus Sicht der User-Experience optimales Menü entwickeln können. Das in meinen Augen wichtigste Gesetz ist dabei Millers Gesetz. Es besagt, dass der durchschnittliche Mensch lediglich sieben (± 2) Informationseinheiten im Kurzzeitgedächtnis behalten kann (Miller 1956, S. 81-97).
Diese Erkenntnis ist deshalb relevant, weil sie für uns als User-Experience-Designer besagt, dass wir kein Menü mit mehr als sieben Menüpunkten entwickeln sollten. Haben wir – was selbstverständlich nicht selten vorkommt – deutlich mehr als sieben Menüpunkte, reicht es aus, diese zu gruppieren. Allerdings auch wieder nur in maximal sieben Untergruppen, die von unserem Gehirn als jeweils eine Informationseinheit wahrgenommen werden.
Das nach William Edmund Hick benannte Hicks Gesetz besagt, dass die Zeit, die wir Menschen benötigen, um eine Entscheidung zu treffen, mit der Anzahl der Auswahlmöglichkeiten korreliert (Hick 1952, S. 11-26).
Mehr Auswahlmöglichkeiten – in unserem Fall mehr Menüpunkte – bedeuten somit, dass unsere Nutzer länger brauchen, sich für einen Menüpunkt zu entscheiden. Oder schlimmstenfalls, dass sie durch Überforderung gar keinen Menüpunkt wählen und unseren Webshop verlassen. Damit unterstützt auch dieses Gesetz die Aussage von Miller, dass weniger tatsächlich mehr ist.
Einen weiteren Effekt unseres Kurzzeitgedächtnisses beschreibt der Primacy-Recency-Effekt. Der serielle Positionseffekt, wie er auch genannt wird und von Hermann Ebbinghaus erstmals geprägt wurde, beschreibt, wie sehr die Positionen einzelner Elemente in einer Reihe von Elementen mit unserem Erinnerungsvermögen an die einzelnen Elemente zusammenhängen (Ebbinghaus 1913).
Einfach ausgedrückt besagt es, dass sich Menschen das erste und letzte Element einer Reihe besser merken als die Elemente dazwischen. Für uns Designer und unser Menü bedeutet das, dass wir mit viel Bedacht das erste und letzte Element in unserem Menü auswählen sollten, da diese am ehesten in den Köpfen unserer Nutzer verbleiben.
Wie wir schon in anderen Kapiteln erfahren haben, sind es die Inhalte, die zählen. Nachdem dies beim Menü selbstverständlich nicht anders ist, sollte das Wording nicht unüberlegt gewählt werden. Wichtig ist, dass wir – wie einleitend beschrieben – mit unserem Menü »Wegweiser« setzen, um unseren Nutzern wie auch den Suchmaschinen Orientierung zu geben.
Aus unserem Produktangebot ergeben sich schon einige Menüpunkte wie Save-The-Date-Karten, Hochzeitseinladungen, Dankeskarten, Menükarten und Tischkärtchen. Da wir alleine damit jetzt schon fünf Hauptmenüpunkte hätten und laut Millers Gesetz maximal sieben haben sollten, liegt eine Gruppierung dieser Menüpunkte auf der Hand. Ein Menüpunkt namens Produkte wäre zwar naheliegend, sagt aber weder unseren Besuchern, noch den Suchmaschinen, was sich dahinter verbirgt. Deshalb habe ich mich für Unsere Papeterie als Bezeichnung für diesen Hauptmenüpunkt entschieden.
Weitere Hauptmenüpunkte sind die Kontaktseite, Häufige Fragen, eine Über uns-Seite sowie ein Blog. Mit diesen fünf Hauptmenüpunkten befinden wir uns deutlich unter der von Miller angegebenen Maximalanzahl und können uns sicher sein, dass unsere Seitenstruktur mit einem Blick erfasst und grundsätzlich verstanden werden kann.
Bei der Gestaltung des Menüs für die Desktop-Ansicht kommen zwei weitere Gesetze aus der Gestaltungspsychologie zum Tragen, nämlich das Gesetz der Nähe und das Gesetz der Ähnlichkeit. Ersteres besagt, dass Elemente, die näher aneinander liegen, als Einheit wahrgenommen werden, zweiteres, dass wir ähnliche Objekte als zusammengehörig betrachten (Yablonski 2017). Übertragen auf unser Menü heißt das, dass die einzelnen Menüpunkte gleich formatiert sein sollten und so nah aneinander liegen müssen, dass sie als Einheit verstanden werden.
Bei der Positionierung des Menüs sollten wir uns abermals Jakob Nielsen ins Gedächtnis rufen und bedenken, dass diese nicht besonders ausgefallen sein sollte, was die Navigation damit möglicherweise schwer auffindbar machen würde, sondern so, wie es unsere Nutzer von anderen Websites gewohnt sind. Es macht zudem vor allem bei einem Webshop Sinn, das Menü am oberen Bildschirmrand auch beim Scrollen zu fixieren, um es zu jeder Zeit zugänglich zu machen. Eine Usability-Untersuchung von Denney ergab, dass Aufgaben auf einer Website mit einem fixierten Menü 22 Prozent schneller erledigt werden konnten und alle Teilnehmenden das fixierte Menü gegenüber dem nicht fixierten bevorzugten – allerdings ohne zu wissen warum (Denney 2012).
Für unseren Hochzeitspapeterie-Shop habe ich mich dazu entschieden, die Hauptmenüpunkte in Großbuchstaben mit erweiterter Laufweite für bessere Leserlichkeit (siehe »Typografie«) zu setzen, um es vom restlichen Content der Seite deutlich abzuheben. Aktive Menüpunkte müssen klar als aktiv erkennbar sein – damit wissen unsere Nutzer mit nur einem Blick, wo sie sich gerade befinden.
Die wohl bekannteste Form zur Gruppierung von Menüpunkten ist ein Dropdown-Menü. Angie Li von der Nielsen Norman Group fasst die bei Websites beliebte Art der Menügestaltung als »überstrapaziert und unhandlich« (Li 2017) zusammen.
Jakob Nielsen sieht sogenannte Mega-Menus als benutzerfreundliche Alternative, die mehr und mehr Einzug in moderne Websites halten. Das sind – im Gegensatz zu kleinen Dropdown-Menüs – große, teilweise sogar bildschirmfüllende Boxen, in denen die einzelnen Menüpunkte gruppiert dargestellt werden können. Mit guter Typografie sowie Bildern oder Illustrationen aufgewertet, kann ein solches Menü sogar Teil unseres Visual-Storytellings sein. Und wenn wir unseren Nutzern damit helfen, in unserem Webshop mehr Produkte beziehungsweise Kategorien zu finden, helfen wir uns damit, mehr zu verkaufen.
Am Desktop werden Mega-Menus angezeigt, wenn man mit der Maus über den entsprechenden Hauptmenüpunkt fährt. Geschieht dies unabsichtlich, kann es zu einem Flackern auf der Website kommen, wenn das Menü dadurch nur kurz angezeigt und sofort wieder ausgeblendet wird. Aus diesem Grund empfiehlt Nielsen eine Verzögerung von einer halben Sekunde bis zur Anzeige von Elementen, die durch solch eine »Hover«-Aktion ausgelöst werden. Sind die 0,5 Sekunden überschritten, sollte das Menü möglichst schnell – höchstens in 0,1 Sekunden – angezeigt werden, um nicht für weitere Wartezeiten zu sorgen.
Umgekehrt gelten die gleichen Verzögerungen: Erst 0,5 Sekunden nachdem die Maus das Menü verlassen hat, sollte es innerhalb von 0,1 Sekunden ausgeblendet werden (Nielsen und Li 2017).
Auf Mobilgeräten fehlt uns meist der Platz, um mehr als ein oder zwei Menüpunkte als Menüzeile am oberen Bildschirmrand darzustellen. Designer sind deshalb schon vor langer Zeit dazu übergegangen, sogenannte Hamburger-Menüs einzusetzen. Ein einem Hamburger entfernt ähnelndes Icon blendet nach einem Tap mit dem Finger das Menü ein.
Die Meinungen dazu gehen deutlich auseinander: So zeigt eine Studie, dass dadurch wesentliche Navigationselemente wie Hauptmenüpunkte versteckt werden und damit seltener geklickt werden (Pernice u. Budiu 2016). Andere argumentieren, dass Hamburger-Menüs mittlerweile so weit verbreitet und bekannt sind, dass der Großteil der Nutzer weiß, wie damit umzugehen ist und dass sich dahinter für sie wichtige Navigationselemente verbergen – wir erinnern uns an Jakobs Gesetz (Fordham 2019).
Ich persönlich schließe mich der zweiten Argumentation an und habe mich auch für unseren kleinen Hochzeitspapeterie-Shop für diese Art des mobilen Menüs entschieden. Diese Entscheidung hängt auch mit der Anzahl der Menüpunkte zusammen und der Tatsache, dass es auch Untermenüpunkte gibt. Zusätzlich haben wir einen starken CTA-Button, der vor allem auf der Startseite als Hauptnavigationselement betrachtet werden kann und unsere Nutzer zu den Papeterie-Designs führt, ohne das Menü bemühen zu müssen.
Bei der Positionierung des Hamburger-Icons empfehle ich die rechte obere Ecke des Bildschirms. Einerseits hat sich dies als Pattern etabliert und unsere User suchen damit an dieser Stelle danach, andererseits ist die linke obere Ecke häufig für andere Navigationselemente wie einen Zurück-Button reserviert (Apptimize 2018).
Wie in der Desktop-Ansicht des Mega-Menus ersichtlich, hat der Untermenüpunkt Extras sogar noch weitere Untermenüpunkte. Bei weniger als sechs Untermenüpunkten ist laut Experten ein Akkordeonmenü die beste Wahl. Dabei kann ein Menüpunkt durch einen Klick auf einen Pfeil nach unten geöffnet werden und die Untermenüpunkte anzeigen.
Da wir in unserem Webshop aber sechs Untermenüpunkte im Menüpunkt Extras haben, ist ein sogenanntes sequentielles Menü zu bevorzugen. Dabei werden – nach einem Klick auf einen Menüpunkt – anschließend nur die Untermenüpunkte aufgelistet. Darüber ist ein deutlicher und sinnvoll benannter Zurück-Button platziert.
Eine kurze (300 ms) Animation, die das Hauptmenü nach einem Klick aus dem sichtbaren Bereich und das Untermenü aus der gleichen Richtung in den sichtbaren Bereich schiebt, zeigt schnell und effektiv, dass man hier in tiefere Menüebenen vordringt und macht die Interaktion sofort nachvollziehbar.
Wie rechts in der Illustration erkennbar ist, habe ich für das mobile Menü den Menüpunkt Unsere Papeterie aufgelöst und zeige direkt die vier Menüpunkte des ehemaligen Mega-Menus an. Damit werden diese für uns und unsere Besucher so wichtigen Navigationselemente nicht noch weiter versteckt und sie müssen sich nicht – beispielsweise um zu den Tischkärtchen zu gelangen – durch zwei Hierarchieebenen kämpfen.
Das Problem der maximal sieben Informationseinheiten habe ich mit einer Trennlinie gelöst, die die Menüpunkte in zwei Gruppen visuell und logisch unterteilt. Die erste Gruppe stellt dabei die Produktkategorien dar, die zweite die übrigen Hauptmenüpunkte.
Ganz unproblematisch ist ein solches Menü leider dennoch nicht, denn der Zurück-Button könnte einigen Usern suggerieren, dass der Zurück-Button des Browsers oder des Betriebssystems genutzt werden kann, womit Nutzer schlimmstenfalls sogar die Seite komplett verlassen (Budiu 2017).
Eine von mir aufgrund des Problems mit dem sequentiellen Menü oftmals eingesetzte Lösung ist, die Untermenüpunkte erst auf der Unterseite horizontal nebeneinander aufzulisten, nachdem der entsprechende Hauptmenüpunkt gewählt wurde. Damit nehmen wir zwar in Kauf, dass unsere Nutzer nicht direkt aus dem Menü zur untersten Hierarchieebene springen können, reduzieren aber deutlich die Komplexität des Menüs. Zudem nehmen wir unsere User damit noch mehr an die Hand und können sie Schritt für Schritt durch unseren Shop führen.
Allerdings ist auch das nicht die ultimativ perfekte Lösung, da Untermenüpunkte, die aus dem Bildschirmrand ragen, möglicherweise nie geklickt werden, weil sie nicht entdeckt werden. Um zumindest den Angebotscharakter des horizontalen Scrollens zu stärken, empfehle ich, den Menüpunkt am rechten Bildschirmrand anzuschneiden und mit einem Verlauf auszublenden, um visuell anzuzeigen, dass es an dieser Stelle noch nicht zu Ende ist.
Befinden sich unsere Nutzer nicht direkt in einem Hauptmenüpunkt, sondern mehrere Ebenen darunter, helfen sogenannte Breadcrumbs bei der Orientierung und Navigation auf unserer Seite. Mit diesem kleinen Element in unserem Webshop können Besucher wichtige Fragen schnell beantworten, wie: Wo bin ich gerade und auf welcher Hierarchieebene befinde ich mich? Wie ist der Webshop allgemein aufgebaut? Finde ich möglicherweise auf einer anderen Ebene das, wonach ich suche?
Breadcrumbs sollten allerdings erst ab drei Hierarchieebenen eingesetzt werden, da sie bei flacheren Seitenhierarchien keinen Mehrwert bieten und eher störend sind. Experten empfehlen, auf Mobilgeräten auf Breadcrumbs zu verzichten und stattdessen die Komplexität der Struktur zu reduzieren, um Breadcrumbs gar nicht erst nötig zu machen (Babich 2017).
Bei der Gestaltung von Breadcrumbs ist zu beachten, dass sie nicht das Erste sein sollten, was unsere Nutzer auf der Seite sehen – heißt, dass sie möglichst subtil gehalten werden sollten. Die einzelnen »Brotkrumen« bis zur aktiven Seite sollten beispielsweise durch kleine Pfeile visuell getrennt sein. Die aktive Seite sollte der letzte »Brotkrumen« und nicht verlinkt sein, nachdem es aus Nutzersicht wenig Sinn macht, auf die aktuelle Seite zu verlinken und dies eher für Verwirrung sorgen würde (Laubheimer 2018).
