Die Hauptnavigation wurde 2001 klar in einer linken Spalte erwartet, in 2004 und später sind aber verstärkt auch Positionserwartungen in einer horizontalen Linie am Seitenkopf dokumentiert – hier zeichnete sich also ab, dass Hauptnavigationslinks nicht nur links in einer Spalte angemessen sind, sondern auch in einer quer laufenden Zeile am Seitenkopf. Ähnliches war zu beobachten für die erwartete Position der site-internen Suche: 2002 wurde sie von den Probanden mehrheitlich am Seitenkopf in der Mitte erwartet, in einer Folgestudie von A. Dawn Shaikh und Kelsi Lenz aus dem Jahr 2006 (in leicht veränderter Methodik) dann tendenziell aber eher rechts oben auf der Startseite.
Auch wenn die genannten Studien sicher nicht mehr taufrisch sind, so sind die Erkenntnisse für praktische Fragen nach wie vor tragfähig, wurden und werden regelmäßig für Relaunch-Planungen prominenter Websites herangezogen. Auch für Web-Publishing-Projekte, die einem Mobile-First-Ansatz folgen, bleibt das für die Desktop-Varianten so gültig. Wer also ein Responsive Design entwickelt, sollte weiterhin unbedingt auch eine irritationsfreie Usability seiner Desktop-Site im Blick behalten – zumindest solange die Inhalte in nennenswertem Umfang auch über Desktops abgerufen werden.
Um Missverständnissen vorzubeugen: Die schematischen Positionserwartungen für einzelne Website-Standardkomponenten bedeuten auf keinen Fall, dass alles immer genau dort zu stehen hätte, wo es von den Nutzern erwartet wird. Gezielte Positionsabweichungen von den generalisierten Nutzererwartungen sind zuweilen durchaus nützlich, sollten allerdings immer gut durchdacht und gut begründet sein. Von den Platzierungserwartungen kann also auch abgewichen werden, sofern nicht gleich mehrere Standardkomponenten an ungewohnter Stelle stehen. Und selbst das kann im Grenzfall freilich Konzept sein. Web-Publishing ist eben keine Mathematik, in der es nur die eine richtige Lösung gäbe, sondern psychologisch determiniert. Im Einzelfall kommt es auf den Gesamtzusammenhang an. Sonst wär’s ja auch irgendwie langweilig. Im Web Style Guide von Patrick J. Lynch und Sarah Horton sind die vorliegenden Befunde zu den nutzerseitigen Positionserwartungen für Websites grafisch zusammengefasst worden (s. Abb. 21).
Positionserwartungen für Mobile Sites
Jede Mediennutzung baut bei den Rezipienten im Zeitverlauf ein Wissen über typische Komponenten der jeweiligen Medienobjektklasse auf. Zeitungsleser beispielsweise wissen durch regelmäßigen Gebrauch einer Zeitung, wie eine Zeitung konstruiert und wie sie zu bedienen ist. Dieses Wissen geht ihnen buchstäblich in Fleisch und Blut über, es konstituiert ein sogenanntes Mediennutzungsschema, hier für die Objektklasse »Zeitung«.
Für Desktop-Websites kann ein solches Schema heute in vielen Details relativ genau skizziert werden, selbst für unterschiedliche Objektklassentypen wie Online-Shops oder Nachrichten-Sites ist das der Fall. Auch wenn die Gattungsevolution für Desktop-Sites vermutlich noch nicht abgeschlossen ist: In den vergangenen 20 Jahren haben sich im Wechselspiel aus rezipientenseitigen Erwartungen und anbieterseitigen Erwartungserwartungen bestimmte Komponenten an bestimmten Positionen für das Medienobjekt »Desktop-Site« als erforderliche Standards herauskristallisiert. Auch für Mobile Sites wird sich ein solches Schema etablieren. Die Gattungsevolution steht hier zwar noch am Anfang, Konturen lassen sich allerdings erkennen. Geprägt wird eine Software-Oberfläche ganz wesentlich von den visuell rahmengebenden Komponenten, den sogenannten »Chrome«-Elementen. Das hat nichts mit dem Browser gleichen Namens zu tun: Chrome-Elemente sind Steuerelemente für den Umgang mit den dargebotenen Inhalten. In einem Webbrowser sind es beispielsweise das Adressfeld, die Schaltflächen fürs Navigieren, die Register, der Scrollbalken und die Statusanzeigen. Auf einer Website wiederum sind es zum Beispiel die Navigationsleiste(n), das Logo, das interne Sucheingabefeld, der Warenkorb, das Log-in-Feld etc. (vgl. Nielsen 2013, S.74).
Abb. 21: Erwartete Positionen für typische Desktop-Site-Komponenten in 2009; die aktuellen Positionserwartungen sehen etwas anders aus (siehe Desktop-Maßnahmen). Quelle: webstyleguide.com
Die wohl wichtigste Leitlinie für das Webdesign von Mobile Sites ist es, Anzahl und Fläche der Chrome-Elemente auf das notwendige Maß zu beschränken. Zwingend erforderlich sind mindestens zwei Elemente: ein Logo zur sofortigen Quellen-Identifikation und eine erste Navigationsoption, beispielsweise ein Hauptmenü oder ein Sucheingabefeld. Um mit den Fingern unproblematisch angetippt werden zu können, sollten diese anklickbaren Elemente mindestens 45 Pixel breit sein, besser sind Breiten bis 57 Pixel.
Abb. 22: Schaltflächen mit einer Breite von 57 Pixeln sind mobilnutzerfreundlich, weil die klickbare Fläche beim Antippen in Teilen sichtbar bleibt. Quelle: smashingmagazine.com
Bei aller Reduktion: Diese beiden Elemente sind das Minimum. Logo plus erste Navigationsoption werden deshalb Standardkomponenten im Mobile-Site-Schema sein. Tatsächlich sind sie auf den Mobile Sites vielgenutzter News-Angebote, beispielsweise bei Spiegel und Süddeutsche Zeitung, bei ZEIT und BILD, bei FAZ und Focus, heute überall implementiert. Standard-Positionen für die einzelnen Chrome-Elemente gibt es bislang allerdings noch nicht, das Mobile-Site-Schema ist also noch nicht abschließend konturiert.
Von Fall zu Fall kommen weitere Chrome-Elemente hinzu, etwa eine permanent sichtbare Datumsangabe oder ein Zahnrad-Symbol für das Aufrufen eines »Einstellungen«-Menüs; auch diese werden bislang nicht einheitlich verwendet. Die Entwicklung eines Mobile-Site-Standardschemas ist also noch im Fluss.
Perspektivisch lässt sich mit einiger Sicherheit sagen, dass zwei Chrome-Elemente auf jeden Fall zum Mobile-Site-Standardschema gehören werden: In der ersten Bildschirmportion muss der Anbieter identifizierbar sein (per Logo) und es müssen die wesentlichen Navigationsoptionen zu sehen sein. Im Idealfall sollten die Nutzerinnen und Nutzer so navigieren können, dass sie allein durch Scrollen und Tippen innerhalb der Primärinhalte zum Ziel gelangen – ohne dabei speziellere Suchoptionen einzusetzen.
Abb. 23:Chrome-Elemente für eine mobile Shop-Website. Quelle: sitepoint.com, eigener Screenshot.
Abb. 24:Die mobile Startseite der Süddeutschen Zeitung. Navigationsoptionen sind im Hamburger-Menü untergebracht. Die Blicke werden ins Seitenzentrum geführt. Quelle: sueddeutsche.de, eigener Screenshot.
Um die Chrome-Elemente optimal zu positionieren, muss die Physiologie der menschlichen Hand beachtet werden. Smartphones werden in typischen Handhaltungen bedient, und es spielt eine große Rolle, welche Flächenanteile direkt mit dem Daumen erreicht werden können. Bei oberflächlicher Betrachtung scheint die Sache einfach zu sein: Hält man das Gerät in einer Hand (nicht: mit beiden Händen), dann sollten die wesentlichen Navigationskomponenten in der Daumenzone liegen (siehe Abb. 25). Optimal wären danach alle Positionen in der grünen Fläche. Ganz in Ordnung wären Positionen in der gelben Zone. Problematisch wäre, wenn wichtige Navigationselemente auf den roten Flächen untergebracht sind – da kommt der Daumen nämlich nicht ohne Weiteres hin.
