Читать книгу Texten fürs Web: Planen, schreiben, multimedial erzählen - Stefan Heijnk - Страница 25

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.

Abb. 25: Welche Zone schnell erreicht werden kann, hängt von der Griffhaltung ab. Die abgebildete Haltung »Mit der rechten Hand und auf den kleinen Finger gestützt« ist jedoch nur eine von vielen zu beobachtenden Griffhaltungen. Quelle: uxmatters.com

Abb. 26: Gängige Griffhaltungen beim Benutzen eines Smartphones. Die beiden Zwei-Hände-Haltungen ermöglichen es, mit den Daumen alle Display-Bereiche erreichen zu können. Quelle: uxmatters.com

Abb. 27: Vier Griffhaltungen und typische Aufgaben. Schreiben ist beispielsweise eine Aufgabe, die mehrheitlich entweder mit beiden Daumen erledigt wird oder mit dem Zeigefinger der Schreibhand. Quelle: uxmatters.com

Der UX-Forscher Steven Hoober allerdings hat sich das Tipp-Geschehen auf Smartphones in den vergangenen Jahren genauer angesehen. Und festgestellt: Im täglichen Gebrauch sind auch andere Haltungen zu beobachten; er beschreibt sechs weit verbreitete Griffhaltungen (siehe Abb. 26). Welche dieser Haltungen jeweils eingenommen wird, ist abhängig vom Endgerät, von der sich stellenden Aufgabe und vom aktuellen Kontext. In der Regel wird während eines mobilen Visits zwischen den unterschiedlichen Haltungen hin und her gewechselt.

Hoobers vielleicht wichtigste Beobachtung ist, dass die Nutzerinnen und Nutzer – anders als auf Desktop-Monitoren – nicht von links oben nach rechts unten scannen, sondern auf das Displayzentrum fokussiert sind. Er schreibt: »Für die Leute ist es am angenehmsten, im Zentrum des Displays zu lesen. Deshalb scrollen sie den Bereich, der gelesen werden soll, in die Displaymitte – sofern möglich.« Die Primärinhalte gehören deshalb immer in die Mitte des Minimonitors. Die Mitte ist zudem die bevorzugte Antippzone, und hier ist auch die Treffsicherheit beim Antippen am höchsten. Alle anderen Navigationskomponenten gehören in die Sekundär- beziehungsweise in die Tertiärzone, also an den Seitenkopf und ans Seitenende der ersten Bildschirmportion. Das können Tabs sein, die beispielsweise einen Rubrikwechsel erlauben. Das können Buttons sein, die eine Funktion starten, etwa das Ein- und Ausschalten des Tons. Und das können Komponenten sein, die komplexere Submenüs öffnen. Sollte eine Navigationsleiste stören und die Fläche für die Primärinhalte zu klein sein, dann kann sie dynamisch implementiert werden, sodass sie beim Scrollen einfach verschwindet. Wichtig ist allerdings, dass die Hauptnavigationselemente im ersten Moment auch wirklich zu sehen sind. Denn was nicht zu sehen ist, wird auch nicht genutzt.

Abb. 28: Auf mobilen Endgeräten ist die Seitenmitte der Hotspot. Quelle: uxmatters.com

Abb. 29: Navigation auf Smartphones sollte vor allem im Primärbereich stattfinden können. Quelle: uxmatters.com