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
Mehr Haftkraft auf Desktop-Startseiten
Stehen die Standard-Komponenten an den zu erwartenden Positionen, dann hat die Website einen stabilen Navigations- und Orientierungsrahmen. Um für die Website jetzt auch Stickyness, also Haftkraft, zu erzeugen, braucht es jedoch noch deutlich mehr. Nicht nur der Rahmen ist möglichst nutzerorientiert zu gestalten, sondern natürlich auch der eigentliche Inhalt. Um ihn optimal zu arrangieren, hilft es, das Layout konsequent auf das typische Nutzerverhalten in der Scan-Phase abzustimmen. Der typische Verlauf dieser Scan-Phase sieht so aus:
Auf der Startseite angelangt, stellt sich jeder Nutzer zuerst die Frage: Bin ich hier jetzt auf der gewünschten Site gelandet oder nicht? Entsprechend wird nach Anhaltspunkten gesucht, die diese Frage beantworten.
Hat der Nutzer festgestellt, dass er genau dort gelandet ist, wo er hinwollte, dann wird der angebotene Inhalt überflogen. Anhand von Überschriften, Fotos, Grafiken und Teaser-Texten wird das Inhalte-Spektrum taxiert und punktuell überprüft, ob der gerade betrachtete Inhalt gesteigert relevant sein könnte.
Scheint dies der Fall zu sein, wird ein erster Link angeklickt und eine erste Artikelseite aufgerufen.
Auf dem Weg von der Startseite zum Volltext durchlaufen die Besucher also mehrere Mikrophasen, und jede birgt potenziell ein Ausstiegsrisiko. Mit Blick auf den typischen Verlauf der Scanphase sind zwei Punkte besonders wichtig: Die Startseite muss in Bruchteilen einer Sekunde glasklar darüber Auskunft geben, was sie anbietet. Und in den Folgesekunden muss sie möglichst zahlreiche Blickkontakte zwischen Inhalten und Nutzern anregen, damit ein erstes Angebot angeklickt wird. Die folgenden Maßnahmen helfen, diese Anforderungen zu meistern.
Maßnahme 1: Glasklare Übersicht
Um die Nutzerblicke möglichst rasch an die Site binden zu können, ist es nützlich zu wissen, an welcher Stelle der Startseite die Nutzer ihren Blickflug typischerweise starten. Dort, wo die Nutzer zuerst hinschauen, sollte auch das zugkräftigste, stärkste Thema platziert werden. Die Befundlage zu dieser Frage ist inzwischen recht eindeutig: Die Nutzer schauen in den ersten Sekunden auf das obere linke Viertel der ersten Bildschirmportion – sofern die angebotenen Bildformate bestimmte Flächengrößen nicht überschreiten.
Die Fläche oben links ist also der Top-Quadrant jeder Website. Nach dem Aufrufen der Seite schauen die Nutzer auf diese heiße Zone, vor allem, um sich rasch zu orientieren. Das Firmenlogo, der Firmenname und Teile der Hauptnavigation gehören deshalb als visuelle Anker immer in diese Fläche. Neuankömmlingen auf einer Site wird auf diese Weise in Sekundenbruchteilen unzweifelhaft mitgeteilt, wo sie sich jetzt befinden und wie sie navigieren können. Abweichungen von diesem Standard sind zwar nicht von vornherein unsinnig, aber es sollte schon klar sein, dass sie in jedem Fall kostbare Zeit verbrauchen. Auf der anderen Seite: Wenn gezielte Abweichungen positiv überraschen, kann natürlich auch ein aufmerksamkeitssteigender Effekt eintreten.
Die beiden im Folgenden beschriebenen Automobil-Websites finden sich als Screenshots auf der folgenden Doppelseite.
Abb. 30:Blickverlauf in der Scan-Phase auf informierenden Websites. Links oben ist die wichtigste Blickkontakt-Zone für den Bindungsaufbau. Quelle: Poynter Institute.
Die Website von BMW zum Beispiel ist im Screenlayout seit Jahren strukturell nur moderat verändert worden, wie die Abbildungen 31 bis 33 zeigen.
Der zentrale Eye-Catcher ist das BMW-Foto im Seitenzentrum, auch der Schriftzug BMW Deutschland steht im Top-Quadranten. Das Logo ist rechts oben platziert und damit an eher ungewohnter Position außerhalb des Top-Quadranten. 2010 ist das kaum anders: Der Auftritt ist visuell noch stärker auf das Produkt Automobil fokussiert. Der Aufmacher ist ein schnell ladendes Video, die Videoszenen sind
