Navigation

Im vorherigen Kapitel haben wir mit Erschließbarkeit eine der wichtigsten Forderungen beschrieben, um einen Computer möglichst weitgehend ohne vorherige Schulungen oder das Lesen eines Handbuchs nutzen zu können. Die Forderung zielt darauf ab, am Bildschirm sichtbare Hinweise zu geben, welche Operationen möglich sind, wie man sie ausführen kann und welche Inhalte erreichbar sind. Dies ist jedoch nur vollständig umsetzbar, wenn es gelänge, für jede mögliche Anschlusshandlung und auf jedes Inhaltsobjekt einen sichtbaren Hinweis zu geben. Anhand eines großen Textverarbeitungssystems wie beispielsweise Microsoft Word lässt sich vergegenwärtigen, was ein solcher Anspruch auf Vollständigkeit bedeuten würde. Das System müsste beispielsweise für jede Funktion der Software dauerhaft ein sichtbares Icon als Hinweis anzeigen. Der Bildschirm bestünde nur noch aus Icons und Hinweisen auf Tastenkürzel und würde vermutlich noch nicht einmal alle Funktionen abbilden können. Für den eigentlichen Inhalt, den zu bearbeitenden Text, bliebe kein Platz. Vollständigkeit ist mit Ausnahme sehr einfacher Nutzungsschnittstellen, etwa einer Lichtsteuerung, nicht ohne Gestaltkonflikte umsetzbar.

Die sich aus dieser Erkenntnis ergebenden Problemstellungen werden mit Techniken von Nutzungsschnittstellen gelöst, die wir unter dem Begriff „Navigationsschnittstellen“ zusammenfassen wollen. Dabei geht es darum, wie man die möglichen Handlungsoptionen und Inhalte, ohne zu viel Platz zu verbrauchen und ohne unübersichtlich zu werden, zugänglich machen und wie man den Ausschnitt aus einem Objekt darstellen und den Rest zugänglich machen kann.

Navigation ist immer mit Sequenzialität verbunden, denn wenn Sie erst navigieren müssen, um etwas zu erreichen, heißt es, dass das, was Sie erreichen wollen, nicht sofort im Zugriff ist, es also Zusatzschritte braucht. Gänzlich vermeiden lässt sich diese Sequenzialität nicht, denn es sind nicht nur viele Forderungen wie Erkennbarkeit (alle Objekte sind hinreichend vom Hintergrund abgesetzt etc.), Übersichtlichkeit und Strukturiertheit (die Objekte sind räumlich abgesetzt), Handhabbarkeit (die verschiedenen Alternativen sind sicher auswählbar) und Eingabeminimalität (für die Auswahl einer Option sollten möglichst wenig Eingaben notwendig sein) zu bedenken, die Abwägung dieser Anforderungen hängt auch von einer Vielzahl von Rahmenbedingungen wie Bildschirm- bzw. Fenstergröße, Eingabemodus, erwarteten Nutzungscharakteristiken etc. ab. Die Konsequenz ist, dass es keine für alle Einsatzzwecke gleich gut geeignete Navigationsschnittstelle gibt. Stattdessen gilt es, das Spektrum aufzuspannen, die auftretenden Gestaltungskonflikte zu erkennen und über die Ausgestaltung verbreiteter Navigationstechniken nachzudenken.

Vielleicht sind Sie über den Begriff „Navigationsschnittstelle“ gestolpert, den wir hier verwenden. Wir wollen damit unseren Fokus auf Navigationstechniken einschränken, die über eigene Objekte in der Nutzungsschnittstelle verfügen. Diese Navigationsobjekte erscheinen als zusätzliche Elemente zu den eigentlichen Inhaltsobjekten der Anwendung. Wir bezeichnen solche Elemente in Anlehnung an den Experten Jacob Nielsen als „GUI-Chrome“³.

Wir beschränken uns bei unserer Betrachtung von Navigationstechniken auf solche, die zum GUI-Chrome gehören, bei denen es also eine explizite Nutzungsschnittstelle zur Erschließung der Inhalte und Optionen gibt⁴. Obiger Screenshot von Microsoft Word kann gut verdeutlichen, um welche Art von Bildschirmelementen es uns geht. Im Inhaltsbereich in der Mitte werden Anwendungsobjekte angezeigt. Rund um diesen Inhaltsbereich befindet sich aber viel GUI-Chrome; von den von Microsoft „Ribbons“ getauften Reitern (deutsch: „Menüband“ oder technokratisch „Multifunktionsleiste“) im oberen Teil des Bildes, über eine Scrollbar auf der rechten Seite bis hin zur Fußzeile unten. Die meisten Elemente im GUI-Chrome sind Navigationselemente, denn sie dienen der Zugänglichmachung der Funktionalität der Software einerseits (die Ribbons, die Kurzwahlleiste oben, die Icons und Menüs innerhalb der Ribbons) und der Manipulation und Darstellung des sichtbaren Ausschnitts andererseits (die Scrollbar, die Zoom-Einstellungen, die Seitenangabe). Daneben gibt es auch einige wenige andere Metainformationen, die hier ebenfalls untergebracht sind, etwa die Anzeige der Dokumentsprache. Ebenfalls zum Bereich des GUI-Chromes zählen wir Objekte wie das Pop-up-Menü im obigen Beispiel oder auch Navigationsbereiche, die in den Inhalt eingebunden sind oder eingeblendet werden, aber nicht selbst den Inhalt verkörpern.

Was GUI-Chrome, also Anwendungsrahmen, ist und was der Inhalt der Anwendung ist, kann sich so verhalten wie die russischen Matroschkas. Beim Auseinandernehmen der größeren Puppe kommt eine kleinere, identisch aussehende Puppe zum Vorschein. Vor allem in webbasierten Nutzungsschnittstellen ist das so. Der Browser selbst hat sein GUI-Chrome, das dazu dient, Websites anzusteuern, Lesezeichen zu verwalten und andere Browser-Funktionalitäten zugänglich zu machen. Daneben gibt es den Inhaltsbereich, in dem Websites angezeigt werden. Wenn man nun eine Website oder Web-Anwendung öffnet, zum Beispiel eine Online-Version einer Textverarbeitung, hat auch diese Anwendung wieder ihren GUI-Chrome- und ihren Inhaltsbereich.

Navigationsschnittstellen zur Wahl des Ausschnitts

Die Menge der Inhaltsobjekte einer Anwendung (zum Beispiel die Bilder im Fotoalbum, die heruntergeladenen Musikstücke oder der Inhalt eines Verzeichnisses der Festplatte) und auch die einzelnen Inhaltsobjekte selbst (etwa ein Textdokument oder aber auch ein Eingabeformular) können in den wenigsten Fällen auf nur einer einzigen Bildschirmseite vollständig angezeigt werden. Der Ausschnitt dessen, was gerade angezeigt wird, ist immer begrenzt. Wenn Sie nur einen Ausschnitt sehen, kann es zu Orientierungsproblemen kommen. Gestaltet man die Navigationsschnittstelle nicht angemessen, kann es passieren, dass während der Nutzung nicht erkannt wird, dass es sich nur um einen Ausschnitt handelt. Das bedeutet, dass die weiteren Inhalte nicht erschließbar sind und dass es keine Unterstützung gibt, um eine Vorstellung davon zu entwickeln, wie sich der aktuelle Ausschnitt zum Ganzen verhält.

Zoomen

Ein Ansatz zur Wahl des Ausschnitts kann eine Zoom-Technik sein. Sie soll zweierlei leisten, zum einen, den Überblick über den gesamten oder zumindest einen großen Teil des Inhalts anzubieten, zum anderen aber auch eine Detailbetrachtung zu ermöglichen, indem die Granularitätsstufe gewechselt wird. Gute Zoom-Techniken erlauben es, zwischen mehreren Granularitätsstufen geschmeidig hin und her zu wechseln.

Der folgende Screenshot zeigt mehrere Seiten eines Textes in einer verkleinerten Darstellung. Diese Darstellung ist gut geeignet, um sich eine Übersicht zu verschaffen, nicht aber, um den Text tatsächlich zu lesen.

Scrolling

Wenn nicht alle Objekte zu sehen sind oder nicht das vollständige Objekt auf einmal angezeigt werden kann, braucht es einen Mechanismus, um den aktuellen Ausschnitt erschließbar und manipulierbar zu machen. Eine der beiden wichtigsten Techniken hierfür ist das Scrolling (auf Deutsch „Rollen“ oder „Bildlauf“ genannt). Scrolling an sich kommt ohne Schnittstellenelemente aus. In einem Text kann zum Beispiel der Cursor bewegt werden. Der dargestellte Bildausschnitt wandert mit dem Cursor mit, sobald dieser den aktuellen Bildschirmbereich verlässt. Ein derart simples Scrolling ist aber aus mehreren Gründen nicht ergonomisch, denn es liefert keine erschließbaren Hinweise auf die Ausschnittsnavigation. So ist nicht direkt ersichtlich, dass es weiteren Inhalt gibt, dass auf diese Weise gescrollt werden kann, welcher Ausschnitt innerhalb des Ganzen gerade zu sehen ist und schlussendlich, welches Verhältnis der aktuelle Ausschnitt zum Ganzen hat. Abhilfe für diese Erschließbarkeitsprobleme schafft eine Scrollbar.

Eine Scrollbar (deutsch „Rollbalken“ oder „Bildlaufleiste“), dargestellt sind die Bildlaufleisten des Atari ST aus den 1980er Jahren, zeigt nicht nur die aktuelle Position des Ausschnitts innerhalb des Dokuments, sondern auch das Größenverhältnis des aktuellen Ausschnitts im Vergleich zum Ganzen. Ein solcher Bildlauf vermittelt also umfangreiche Informationen, die der Orientierung innerhalb des dargestellten Inhalts dienen. Scrollbars dienen bei reiner Mauseingabe nicht nur dazu, den Ausschnitt anzuzeigen, sondern auch dazu, ihn zu manipulieren. Die genaue Ausgestaltung hängt stark vom Betriebssystem ab. Allen gemein ist die Möglichkeit, die Position im Dokument durch Verschieben des Bildlauffeldes zu ändern. Zusätzliche Schaltflächen oder auch das Klicken in Bereiche auf dem Rollbalken bewirkt zudem das zeilen- oder seitenweise Scrollen.

Die verschwundene Scrollbar

Leider sind Scrollbars heute teils einer Mode und teils einem falschen Minimalismus zum Opfer gefallen. Zunächst sind sie auf Touch-Geräten wie Handys und Tablets verschwunden, später bei MacOS und inzwischen hat auch Microsoft bei Windows 10 nachgezogen und blendet Scrollbars unter bestimmten Bedingungen aus. Die Ausblendung ist insofern verständlich, als die Leiste als Eingabeelement für das Scrollen heute kaum noch benötigt wird. Verwendet man eine Maus, scrollt man mit dem Scrollrad, auch Trackpads bieten direkte Möglichkeiten zum Scrollen und bei Touch-Eingaben wird ohnehin durch Wischen auf dem Inhaltsbereich gescrollt. Ausladende Scrollbars, wie sie in der obigen Abbildung zu sehen sind, werden in diesen Fällen zwar nicht mehr unbedingt benötigt, doch rechtfertigt das nicht, sie gänzlich wegzulassen.

Dieses Beispiel illustriert, zu welchen Problemen das Fehlen einer Scrollbar führen kann. Es ist der Inhalt eines Ordners mit einer Reihe von Foliensätzen zu sehen. Beim Betrachten entsteht der Eindruck, dass diese Darstellung alle Icons anzeigt. Bestärkt wird man darin nicht zuletzt dadurch, dass es freien Raum gibt, was den Eindruck erweckt, dass die Anzeige größer ist als die Menge der anzuzeigenden Objekte. Lediglich die kleine Anzeige „7 Objekte“ unten in der Fußleiste des Fensters gibt einen Hinweis darauf, dass ein Objekt fehlt. Allerdings wird diese Statusleiste im Regelfall nicht angezeigt, sondern muss explizit aktiviert werden. Abgesehen davon gibt es keinen Hinweis darauf, dass es ein weiteres Objekt gibt und wie man es erreicht, denn die Scrollbar wird nur angezeigt, während man scrollt. Diese Implementierung verstößt gegen unsere Forderung nach Erschließbarkeit. Die Oberfläche wird durch das Weglassen der Scrollbar vielleicht schicker, in keinem Fall jedoch besser. Mit Übersichtlichkeit für die Ausblendung von Scrollbars zu argumentieren, wird übrigens schwierig, denn vor allem wenn man sie nur zur Positionsanzeige und nicht mehr als eigentliches Interaktionselement nutzt, brauchen die Scrollbars kaum Platz und können sehr unaufdringlich gestaltet werden.

Wenn das Ende kein Ende ist

Eine andere problematische Einrichtung, die die Funktion von Scrollbars stark beeinträchtigt, ist das dynamische Nachladen weiterer Inhalte, wie es häufig bei modernen Webanwendungen üblich ist. Wenn Sie beispielsweise in Facebook durch die Inhalte einer Seite scrollen und unten angekommen sind, lädt die Seite nach und wird nach unten hin verlängert. Die Scrollbar, die gerade noch bis nach unten gezogen wurde, springt unvermittelt wieder nach oben. Dadurch wird es schwerer bis unmöglich, mittels der Scrollbar einzuschätzen, welchen Ausschnitt man an welcher Position zu sehen bekommen wird. Auch die Orientierungsfunktion ist nicht mehr gegeben, denn am unteren Ende der Scrollbar ist nicht mehr das Ende, sondern nur das Ende des gerade geladenen Ausschnitts.

Der Vorteil bei Facebook ist, dass in der Regel viel weniger Daten übertragen werden müssen, denn bei biografisch geordneten Inhalten sind oft nur die aktuellen Inhalte, die oben stehen, von Interesse. Es gibt jedoch zu diesem Nachlademechanismus auch Alternativen, um die Datenmenge klein zu halten. Die einfachste ist, unten auf der Seite jeweils einen Link zu Folgeseiten anzubieten, das Scrollen also mit dem Blättern zu kombinieren, um das es im folgenden Abschnitt geht. Auch Nachladen ist grundsätzlich in Ordnung, könnte aber zum Beispiel durch Klicken auf einen Button am Ende geschehen. Mit dem automatischen Nachladen wird zwar dieser Klick gespart, dies geschieht jedoch auf Kosten der Orientierung.

Wenn Sie eine Software haben, bei der Inhalte erst hinzugeladen werden, wenn sie gebraucht werden, stößt die klassische Scrollbar an ihre Grenzen.

Blättern

Die Alternative zum Scrollen, vor allem bei den oft anzutreffenden eindimensionalen Ausdehnungen, ist das Blättern. Der Vorteil des Scrollings liegt vor allem in der Kontinuität – im Gegensatz zum Blättern wird der Inhalt weitergeschoben statt komplett ersetzt. Das ermöglicht auf modernen Desktop-Rechnern, Laptops und Touch-Geräten, bei denen per Wischen oder per Scrollrad gescrollt werden kann, eine sehr einfache Handhabung. Für das Blättern ist es im Gegensatz dazu in den meisten Fällen nötig, einen Verweis oder einen Button räumlich auszuwählen und anzuklicken. Es gibt dennoch Bedingungen, unter denen das Blättern besser ist als das Scrollen:

• Wenn die Anzahl der Elemente oder der Inhalt sehr groß ist: Das Scrollen über die komplette Menge verliert seine Vorteile, denn der jeweils aktuelle Ausschnitt wird im Vergleich zur Gesamtmenge sehr klein, die Anzeige ungenau und das manuelle Wählen des Ausschnitts durch das Positionieren des Rollfeldes nicht mehr handhabbar.
• Wenn die Anzahl der gleichzeitig zu ladenden Elemente verringert werden soll: Hierfür kann es inhaltliche, aber auch technische Gründe, wie Arbeitsspeicherbedarf oder die Übertragungszeit, geben. Gerade für die Fälle, in denen weiter hinten bzw. unten liegende Elemente selten betrachtet werden (zum Beispiel in der Facebook-Timeline) ist das Einteilen in Seiten sinnvoll.
• Wenn Eingabetechniken eingesetzt werden, die kein Scrollen unterstützen oder das Wissen über die Scroll-Technik nicht vorausgesetzt werden kann: Fahrkartenautomaten wären hier ein Beispiel.
• Wenn es möglich sein soll, einzelne Ausschnitte oder Positionen innerhalb des Inhalts oder der Objekte zu adressieren: Dies geht zwar grundsätzlich auch mit Scroll-Techniken, ist aber komplexer und von einer spezifischen Umsetzung abhängig. Bei der Verwendung von Seiten ist eine Adressierung leichter zu bewerkstelligen.
• Wenn einzelne Seiten mit semantischen Einheiten des Inhalts, wie zum Beispiel Handlungsschritte, Kapitel, Ereignisse oder Vergleichbares gekoppelt werden können: Die Verwendung von Seiten sorgt in diesem Fall für inhaltlich abgeschlossene Einheiten.

Für die Navigationselemente zum Blättern gelten ähnliche Anforderungen wie an Scrollbars. Sie sollten nicht nur Möglichkeiten bereithalten, die vorherige und die nachfolgende Seite zu erreichen, sondern auch anzeigen, auf welcher Seite man sich gerade befindet, und auch verdeutlichen, in welcher Relation die aktuelle Seite zum Ganzen steht.

Diese Seitenauswahl stammt aus der Bildplattform flickr. Das Navigationselement zeigt, dass die aktuelle Seite die Nummer 5 ist und erlaubt das Weiterschalten auf die direkt umgebenden Seiten 4 und 6. Darüber hinaus veranschaulicht sie auch die Relation zum Ganzen durch die Angabe der Gesamtseitenzahl und ermöglicht, wenn auch mit Einschränkungen, die direkte Anwahl von Seiten.

Navigation auf Strukturebene

Die oben beschriebenen Navigationstechniken erweitern die Bildschirmanzeige um Navigationselemente, mittels derer der Ausschnitt aus einem Objektarrangement oder einem großen Objektinhalt dargestellt und gewählt werden kann. Die Voraussetzung dafür ist, dass es einen solchen räumlich-grafisch darstellbaren Inhalt gibt. Beim schon mehrfach benutzten Beispiel eines längeren Textes ist das der Fall, denn dieser ist linear und wird räumlich dargestellt. Viele Navigationsprobleme sind jedoch anders gelagert. Denken Sie zum Beispiel an die Menge aller Funktionen, die eine Textverarbeitung bietet. Jede einzelne davon könnten Sie über eine Textfläche, einen Button oder ein Icon darstellen, aber die Gesamtheit dieser Funktionen hat keine natürliche Ordnung, die sich direkt auf räumliche Achsen abbilden ließe. Um in ihnen scrollen oder blättern zu können, müssen sie erst in eine darstellbare Anordnung gebracht werden. Man könnte zum Beispiel alle Funktionen mit einem Namen versehen und sie alphabetisch sortieren.

Eine solche Liste ist keine angemessene Struktur, da die alphabetische Distanz auf kein semantisches Kriterium abbildbar ist. Doch bleiben wir kurz bei dieser abwegigen Idee, denn sie verdeutlicht eine notwendige Voraussetzung, die erfüllt sein muss, um eine Nutzungsschnittstelle zur Navigation umsetzen zu können. Bei einer alphabetischen Liste auf dem Bildschirm handelt es sich um eine räumliche Darstellung eines linearen Index. Ein solcher Index ist die Grundlage für die Navigationstechniken, die wir im Folgenden besprechen wollen. Alphabetische Listen oder auch eine Sortierung nach Zeitpunkten sind für die meisten Anwendungen allerdings nur am Rande interessant, wenn es darum geht, die Funktionalität zu erschließen.

Die am häufigsten anzutreffende Indexart für die Navigation ist die zweidimensionale Struktur des Baums, denn sie gestattet das Bilden von Kategorien und Unterkategorien und ermöglicht dadurch die Realisierung von Menüs, Reitern und Pfaden.

Wenn Sie das Wort „Index“ im Zusammenhang mit dem Wort „Navigation“ hören, mag Ihnen vielleicht das Thema „Suche“ in den Sinn kommen. Um eine Suche geht es hier allerdings nicht. Wenn für eine Suche indiziert wird, ist damit nicht das Erstellen einer Struktur für die Inhalte gemeint, sondern das Erstellen eines Volltextindexes. Suchen ist zwar eine sehr praktische Funktion, sorgt jedoch nicht für die Erschließbarkeit einer Software und schafft auch keine Orientierung innerhalb der von ihr angebotenen Handlungsoptionen.

Damit ein Index die Navigation unterstützen kann, muss er unter Berücksichtigung vielfältiger Rahmenbedingungen und Forderungen zur Anzeige gebracht werden. Werden zum Beispiel alle Funktionen einer Textverarbeitung in Kategorien und Unterkategorien, also in einen Baum, eingeordnet, könnte man versuchen, den Baum vollständig darzustellen. Allerdings würde man nicht nur viel Platz verbrauchen, man käme auch nicht den Anwendungsanforderungen entgegen. Ein Menü, bei dem einzelne Ebenen bei Bedarf eingeblendet werden können, wäre an dieser Stelle die bessere Navigationstechnik.

Menüs

Menüs dienen der Darstellung eines hierarchischen Index, also eines Baums. Die Funktionen einer Software, aber auch Inhalte von Websites werden sehr häufig in Baumstrukturen organisiert und damit per Menü zugänglich gemacht. Wie ein solcher Baum konstruiert wird, also welche Elemente jeweils unter einem Oberbegriff zusammengefasst werden sollten, hängt von der Anwendung ab. Im Folgenden geht es uns stattdessen darum, wie das Menü ergonomisch dargestellt werden sollte. Die konkrete Gestaltung hängt von vielen Rahmenbedingungen ab, etwa, ob ein Menü häufig genutzt wird oder nicht und vor allem auch, wie viel Platz zur Verfügung steht und welche Eingabetechnik zum Einsatz kommt. Menüs können, wie der kurze historische Rückblick zeigt, sehr verschiedene Darstellungsformen annehmen.

In der Abbildung sehen Sie die klassische Darstellung eines Menüs. Die Menüpunkte sind textuell untereinander dargestellt und mit Zahlen versehen. Diese Zahlen dienen dazu, einen Menüpunkt anzuwählen. Wird ein Menüpunkt ausgewählt, so wird entweder die direkt damit verbundene Funktion ausgeführt oder es öffnet sich ein Untermenü, das wiederum den Großteil des Bildschirms einnimmt, sodass die vorherige Menüebene nicht mehr zu sehen ist. Mit dem Aufkommen grafischer Nutzungsoberflächen mit Zeigegeräten ist diese Form des Menüs nahezu vollständig von den Personal Computern verschwunden. Man findet sie allerdings noch häufig in Einstellungsbereichen von Fernsehern und in Geräten mit nur kleinen Anzeigen. Zu letzteren gehören interessanterweise auch Handys. Die Einstellungs-App von iOS auf einem iPhone funktioniert genau auf die oben beschriebene Weise. Es ist stets nur eine Menüebene zu sehen, ein Klick auf ein Element wechselt in eine andere Menüebene und ein einzeln herausgestelltes Eingabeelement wird dazu verwendet, wieder auf die übergeordnete Ebene zurückzuwechseln. Der einzige Unterschied zwischen dieser Art des Menüs und dem oben abgebildeten klassischen Menü aus der Zeit der textbasierten Computersysteme ist die Eingabemodalität. Statt Zahlen einzugeben wird nun auf den entsprechenden Menüeintrag getippt.

Menüs dieser Art haben den großen Nachteil, dass bei jedem Wechsel der Menüebene der räumliche Kontext verloren geht, denn eine Menüebene ersetzt vollständig die vorherige, sodass man die Ebene der parallelen Untermenüs nicht mehr im Blick hat. In solchen Menüs etwas zu finden oder sie zu durchschauen, ist nicht einfach. Man kann sich leicht in ihnen „verlaufen“. Nach Möglichkeit sollten derartige Menüs vermieden werden. Nur in Ausnahmefällen wie dem kleinen Bildschirm eines Smartphones sind sie gerechtfertigt.

Wie Menüs dargestellt werden, wie viel von ihnen dauerhaft zu sehen ist und inwiefern mit Aufdecken und Überlagern gearbeitet werden kann, ist Gegenstand vieler Forderungen an die Ergonomie. Die Forderung nach Erschließbarkeit würde darauf abzielen, möglichst viele Elemente und Ebenen dauerhaft darzustellen. Platzbeschränkungen und die Forderungen nach Übersichtlichkeit, Erkennbarkeit und Handhabbarkeit sprechen allerdings dagegen, dies zu extensiv auszugestalten und eher darauf zu setzen, die Menüebenen nacheinander aufzurufen. Man erkauft sich allerdings die gewonnene Übersichtlichkeit durch zusätzliche Eingabeschritte mit Maus oder Tastatur, opfert also bis zu einem bestimmten Grad die Eingabeminimalität.

Erste Menüebene möglichst sichtbar machen

Mit dem WIMP-Paradigma (Windows, Icons, Menus, Pointer) der 1980er Jahre ist es üblich geworden, die oberste Ebene des Hauptmenüs einer Anwendung dauerhaft anzuzeigen. Sowohl Apples Betriebssysteme als auch Microsofts Windows sowie die meisten grafischen Nutzungsschnittstellen von Linux und Unix halten es auf diese Weise.

Hier sieht man dies am Beispiel von LibreOffice Writer. Die erste Ebene des Anwendungsmenüs mit den Unterpunkten „Datei“, „Bearbeiten“, „Ansicht“ usw. ist dauerhaft sicht- und jederzeit anwählbar. Eine solche Darstellung des Menüs würde auf einem Tablet mit Touch-Eingabe nicht gut funktionieren. Die Elemente müssten größer sein, um per Touch-Eingabe gut und sicher getroffen werden zu können. Dieser Platz geht jedoch zulasten des Anwendungsinhalts. Spätestens auf einem kleinen Smartphone-Bildschirm gibt es nicht mehr genug Platz, um neben dem Anwendungsinhalt auch noch das Menü auf diese Weise anzuzeigen. Im Falle einer solchen Platzbeschränkung ist es sinnvoll, auch die oberste Menüebene erst auf explizite Anforderung anzuzeigen. Heute geschieht das meist durch den Klick auf ein sogenanntes „Burger-Icon“.

Die Tendenz, Nutzungsschnittstellen, die für eine Geräteklasse optimiert worden sind, auf andere Arten von Geräten zu übertragen, ohne die Designkonflikte neu auszutarieren, führt heutzutage leider oft dazu, dass generell auf die Menüleiste verzichtet wird, auch wenn genügend Platz vorhanden ist und die Eingabeform per Maus und Tastatur genutzt wird. Die Ausnahme ist hier Apple, wo die Menüleiste so stark in die Nutzungsschnittstelle des Betriebssystems MacOS integriert ist, dass auch Software wie Google Chrome, Firefox und Microsoft Word, die unter Windows ihr klassisches Menü haben, sich dem angepasst haben.

Keine fixe Grenze für die Anzahl von Menüelementen

In manchen Hinweisen zur Gestaltung grafischer Nutzungsoberflächen werden Angaben darüber gemacht, wie viele Elemente ein Menü bzw. ein Untermenü enthalten sollte. Manche dieser Hinweise sind sinnvoll, viele sind es allerdings nicht.

• Für Menüs, die per Maus oder Tastatur gesteuert werden, sollte man vermeiden, dass innerhalb eines Menüs gescrollt oder geblättert werden muss. Dies ist zwar grundsätzlich bei jedem Menü anzustreben, wird aber zum Beispiel auf Handys mit kleinem Bildschirm und aufgrund der nötigen Touch-Eingabe oft nicht sicherzustellen sein.
• Eine zu tiefe Menüstruktur hat den Nachteil, dass zum Erreichen eines Elements sehr viele Klicks, Berührungen oder Tastatureingaben nötig sind und dass es keine Möglichkeit mehr gibt, ein Element direkt zu entdecken, da man in diesem Fall einen recht komplexen Pfad kennen muss. Eine Menütiefe größer als 3 ist unüblich und sollte aus den oben genannten Gründen auch vermieden werden.

Kritisch sind Angaben zur maximalen Elementanzahl innerhalb von Menüs. Häufig wird die Zahl 7(+-2), also 5 bis 9, als das Maximum von Elementen innerhalb einer Menüebene genannt. Diese „Magical Number 7“ ist von George Miller 1956 experimentell ermittelt worden⁵. Allerdings hat Miller in den 1950ern nichts über die Gestaltung von Menüs in grafischen Nutzungsschnittstellen gesagt. Schlimmer noch: Seine Ergebnisse lassen sich auch nicht darauf anwenden. Millers Experimente sollten zeigen, wie gut bzw. eher wie schlecht das Erinnerungsvermögen von Menschen ist. Um semantische Zusammenhänge und damit individuell nutzbare Hinweise auszuschließen, wurden im Experiment nur Gegenstände zusammen gezeigt, die möglichst keinen gemeinsamen Handlungskontext haben. Nach einer Ablenkungsaktivität wurden die Probanden gefragt, an welche Gegenstände sie sich erinnern können. Es zeigte sich, dass die Probanden sich jeweils nur an fünf bis neun Gegenstände erinnern konnten. Aufgrund dieses Befundes ist die „Magical Number 7“ auch als Richtwert für die Anzahl von Menüelementen entstanden. Diese Empfehlung hat es in etliche Ergonomie-Bücher und Styleguides geschafft.

Betrachtet man das von Miller konzipierte Experiment und sein Erkenntnisinteresse genauer, fällt auf, dass eine maximale Anzahl von Menüelementen aus seinen Untersuchungen nicht abgeleitet werden kann. Bei Millers Experiment hatten die Gegenstände, die gezeigt wurden, nichts miteinander zu tun. Das war auch nötig, weil das Erinnerungsvermögen und nicht die Assoziationsfähigkeit getestet werden sollte. Bei gut gestalteten hierarchischen Menüs hingegen haben die einzelnen Elemente sehr wohl etwas miteinander zu tun. In Millers Experiment wurden zudem die Gegenstände nur kurz gezeigt. Die Probanden sollten sich später ohne weiteren visuellen Hinweis an sie erinnern. Das Charakteristikum eines Menüs ist dagegen, dass es bis zur Auswahl eines Elements kontinuierlich am Bildschirm zu sehen ist. Man muss sich an die Elemente nicht frei erinnern, sondern unter dem Angebot eine Auswahl treffen. Die Empfehlung, die Anzahl von Menüpunkten auf fünf bis neun Elemente zu begrenzen, kann somit nicht aus diesem Experiment abgeleitet werden und könnte sich als ergonomisch nachteilig erweisen, wenn dadurch semantische Zusammenhänge unnötig auseinandergerissen werden.

Reiter

Menüs sind eine Navigationstechnik für einen hierarchischen Index. Nicht immer ist es jedoch nötig und sinnvoll, eine hierarchische Struktur aufzustellen. In vielen Fällen reicht es, Inhalts- und Funktionsbereiche lediglich zu kategorisieren. Würde man stattdessen ein Menü verwenden, enthielte es nur eine Ebene. Jeder der Punkte würde direkt zu einem Funktionsaufruf oder zu einem Inhalt führen. In den Fällen, in denen ein Aufruf eines Elements dieses Menüs dazu führen würde, dass jeweils verschiedene Bildschirmseiten angezeigt werden, das Menü also nur zur Auswahl dieser Bildschirmseiten verwendet wird, kann man das Menü auch durch eine Reiternavigation ersetzen.

Die Abbildung zeigt eine Reiternavigation innerhalb der Anzeigeeinstellungen von Windows XP. Die Kategorien „Designs“, „Desktop“, „Bildschirmschoner“, „Darstellung“ und „Einstellungen“ sind dauerhaft verfügbar. Ein Klick darauf wechselt den unten dargestellten Inhalt. Reiter sind mit der Verbreitung von Windows 95 vor allem bei Einstelldialogen sehr beliebt geworden. Gerade in diesem Bereich nimmt ihre Verwendung aber ab. Dagegen haben sie als Alternative zur Darstellung mehrerer Fenster in einer Vielzahl von Anwendungen, angefangen bei Webbrowsern über Dateimanager bis hin zu Grafikbearbeitungsprogrammen, weite Verbreitung gefunden.

Die Reiternavigation ist eine geschickte Verbindung eines Menüs zur Inhaltsauswahl mit der Möglichkeit, die aktuelle Auswahl direkt darzustellen. Der Clou bei der Darstellung als Reiter liegt in der optischen Einheit der Auswahlelemente für den Reiter und seinem Inhalt. Dazu wird die Illusion erzeugt, dass sich alle auszuwählenden Inhalte auf Registerkarten befinden, unter denen eine Karte ausgewählt werden kann. Die ausgewählte Karte wird jeweils als die zuoberst liegende dargestellt.

Hier ist dargestellt, wie Reiter unter Windows 10 aussehen. Die optische Gestaltung lässt jedoch stark zu wünschen übrig. Die nicht aktiven Reiter sind, im Gegensatz zur Darstellung unter Windows XP und unter Windows 7, nur unzureichend als im Hintergrund liegend abgesetzt, weshalb der aktive Reiter schlecht zu erkennen ist.

In diesem Beispiel des Browers Edge zeigt Microsoft, wie man es besser machen kann. Die nicht ausgewählten, also die „hinten liegenden“ Reiter sind im Vergleich zum hellen, aktiven Reiter optisch abgedunkelt. Ein Schlagschatten verstärkt die optische Absetzung (siehe hierzu unsere Ausführungen im Kapitel Bildschirmobjekte).

Eine andere Form von Reitern stellen Microsofts Ribbons dar, die Microsoft als Weiterentwicklung der Menüleisten verwendet. Anstelle der Anzeige einer Vielzahl von Leisten mit kleinen Icons ohne Beschriftung hat Microsoft sich vor einigen Jahren dazu entschlossen, die Elemente fortan in einer Reihe von Bändern, den sogenannten Ribbons, zugänglich zu machen. Oben abgebildet ist Microsofts Ribbon-Design aus dem Jahr 2016. Der aktuell ausgewählte Ribbon setzt sich sehr gut von den gerade nicht aktiven ab. Es bleibt das Geheimnis von Microsoft, warum die 2019er-Version der gleichen Ribbons (unten) erheblich schlechter gestaltet wurde. Der aktuell ausgewählte Ribbon ist nun durch eine Unterstreichung ausgezeichnet. Der räumliche Effekt der Reiterdarstellung ist dahin.

Auch die Reiternavigation hat ihre Grenzen. Die Abbildung zeigt ein altes Beispiel von Reitern in Microsoft Word unter Windows 95. Der jeweils aktive Karteireiter ist schlecht zu erkennen. Er unterscheidet sich von den anderen Reitern nur durch sehr wenige Merkmale: Der Reiter ist genau ein Pixel höher als die anderen und im unteren Bereich fehlt die Begrenzung. Bedeutend problematischer ist aber die Anzahl der Reiter, die nicht mehr in eine Zeile passen. Dies hat zur Folge, dass sich die Position der Karteireiter mit der Selektion ändert, weil die komplette Reihe, in der sich der ausgewählte Reiter befindet, nach vorne wandert. Das erzeugt ein Kontinuitätsproblem, das auf jeden Fall vermieden werden sollte.

Pfade und Brotkrumen

Die vorgestellten Reiter erfüllen drei wichtige Funktionen: Sie zeigen die zur Auswahl stehenden Optionen, verdeutlichen die aktuelle Auswahl und bieten zudem die Möglichkeit, diese Auswahl zu verändern. Leider eignen sich Reiter nur für flache Strukturen. Ein Navigationselement, das die gleichen guten Darstellungsmöglichkeiten und Manipulationsoperationen böte wie Reiter, existiert für hierarchische Strukturen leider nicht, denn es ist meist nicht möglich, alle Hierarchieebenen gleichzeitig übersichtlich darzustellen. Jedoch sind die Darstellung der aktuellen Position innerhalb der Hierarchie und der direkte Zugriff auf höhere Hierarchieebenen und, wie wir sehen werden, teils auch auf parallele Ebenen größtenteils ohne Probleme möglich.

Die aktuelle Position innerhalb einer hierarchischen Struktur lässt sich analog zu Dateipfaden als „Pfad“ beschreiben. Für die Anzeige eines Pfades hat sich vor allem im Webdesign der Begriff „Brotkrumen-Navigation“ bzw. „Breadcrumb Navigation“ durchgesetzt. Der Begriff nimmt Bezug auf das Märchen „Hänsel und Gretel“ und ist im Gegensatz zum Märchen insofern erfolgreich, als es keine Instanz gibt, die die Brotkrumen auffrisst.

Hier sehen sie eine Breadcrumb-Navigation in einer universitären Lernplattform. Der Pfad wird innerhalb der hierarchischen Struktur der Plattform verdeutlicht. Der Begriff „Breadcrumb“ hat sich auch für diese Lösung durchgesetzt, obwohl die Analogie nicht passt, denn die dargestellte Abfolge zeigt die Einordnung in die Hierarchie, nicht etwa den tatsächlich zurückgelegten Weg, über den man zur aktuellen Position gekommen ist. Dies wird durch Unterscheidung von ortsbezogenen und verlaufsbezogenen Breadcrumbs verdeutlicht. Letztere sind vor allem bei der Navigation durch Hypertextstrukturen interessant.

Zugriff auf höhere und parallele Hierarchieebenen

Breadcrumbs zeigen nicht nur den Pfad zur aktuellen Position, sondern erlauben es auch, höhere Ebenen der Hierarchie direkt durch Anklicken anzuspringen. Je nach Anwendung kann man auch weitergehen und die höheren Ebenen nicht nur als anklickbaren Text ausgestalten, sondern als manipulierbares Menü.

Im Explorer von Windows (hier zu sehen ist die Version in Windows 10), sind die Elemente des angezeigten Pfades nicht nur Abkürzungen, um diese Ebene wieder zu erreichen, sondern Objekte. Dadurch ist es auf einfache Weise möglich, ein Objekt in diese Ebene zu verschieben oder zu kopieren, indem es auf den entsprechenden Teil des Pfades verschoben wird. Im Finder von MacOS steht eine ähnliche Funktion zur Verfügung, wenn die sogenannte „Pfadleiste“ eingeblendet wird.

Mit der Einführung von Windows 7 fügte Microsoft der Pfadleiste des Explorers eine interessante Funktion hinzu, die es ermöglicht, Zugriff auf die Paralleläste der Elemente innerhalb des Pfades zu erhalten. Sie ermöglicht einen bequemen und schnellen Zugriff auf viele Hierarchieebenen, ohne dass dafür viele Klicks benötigt werden.