Benutzerfreundlichkeit in der Praxis

Strategien für das Entwerfen einer Anwendungsnavigation

Dr. Charles Kreitzberg und Ambrose Little

Inhalt

DIE KOGNITIVE SICHT
Navigation ist eine Metapher
Warum es bei Benutzern zur Verwirrung kommt
Gruppieren Sie mehrere Seiten in logische Abschnitte
Erstellen Sie einen Frame
Verwenden Sie Navigationshilfen
Schlussfolgerungen
DIE SOFTWARESICHT
Dem Beispiel der Großen folgen
Karteikartensortierung
UX-Entwurfsmuster
Klare Einstiegspunkte
Implementierung
Steuerelemente
Testen, Nachverfolgen und Anpassen
Zusammenfassung

DIE KOGNITIVE SICHT

Dr. Charles B. Kreitzberg

Eine gute Navigation ist einer der wichtigsten Aspekte des Entwurfs. Navigation ist das Framework, in dem die Bildschirme, die Interaktion und das visuelle Erscheinungsbild entworfen werden. Der einfachste Grundsatz der Benutzerfreundlichkeit lautet, dass die Interaktion mit der Software so einfach wie möglich gestaltet sein muss, damit die Benutzer sich auf die Aufgaben konzentrieren können, die sie zur Software geführt haben. In dem Maß, in dem die Navigation verwirrend ist und die Aufmerksamkeit des Benutzers erfordert, um sie zu verstehen, leidet die Benutzerfreundlichkeit.

Navigation ist eine Metapher

Der Begriff „Navigation“ vermittelt u. a. die Idee des Reisens von Ort zu Ort. Er deutet an, dass es Pfade gibt, denen Sie folgen, um von einem Punkt zu einem anderen zu gelangen, und dass es ein zugrunde liegendes Framework gibt, das Sie auf Ihrem Weg leitet (und einschränkt). Aber obwohl wir über das Navigieren in einem Softwareprodukt sprechen, gehen wir dabei tatsächlich nie irgendwohin. Wir bleiben an einem Ort, während sich das Bild auf dem Bildschirm infolge unserer Interaktionen ändert. Also handelt es sich bei dem Begriff „Navigation“ vielmehr um eine Metapher, ein Gedankenspiel, das wir verwenden, um uns den Entwurf vorstellen zu können.

Die meisten Menschen denken bei Navigation vor allem an Menüs als Möglichkeit, sich von Bildschirm zu Bildschirm zu bewegen. Aber es ist durchaus möglich, leistungsfähige Programme zu schreiben, die sich um einen einzigen Bildschirm drehen. Denken Sie zum Beispiel an Microsoft Word. Trotz seiner umfassenden und leistungsfähigen Funktionalität ist beinahe das gesamte Programm um einen einzigen Bildschirm herum aufgebaut, wie Sie in Abbildung 1 sehen können.

Abbildung 1 Dekonstruktion von Word – Alles in einem Bildschirm

Das zu bearbeitende Dokument nimmt im Bildschirmentwurf eine zentrale Rolle ein. Tools, die in der Multifunktionsleiste ausgewählt werden, werden auf das Dokument angewendet und ändern seinen Inhalt oder sein Erscheinungsbild. Wenn ein Tool eine komplexe Interaktion erfordert, zeigt es in der Regel ein untergeordnetes Fenster über dem Dokument an. Das untergeordnete Fenster ist gegebenenfalls ein modales Fenster, in dem die Benutzer die Interaktion abschließen und das untergeordnete Fenster schließen müssen, bevor sie zum Dokument zurückkehren. Ein Beispiel dafür ist der Befehl zum Einfügen eines Bilds. Möglicherweise führt ein Assistent den Benutzer durch einen Prozess. Alternativ dazu ist das untergeordnete Fenster möglicherweise nicht modal, so wie der Thesaurus-Befehl. In diesem Fall wird es an der Seite angedockt, wo es geöffnet bleiben kann, während der Benutzer das Dokument bearbeitet.

Der Vorteil eines einfachen, aus einem einzigen Bildschirm bestehenden Navigationsansatzes besteht darin, dass der Benutzer nie die Orientierung verliert. Das Dokument bleibt immer überschaubar. Der Benutzer muss zwar nach wie vor lernen, wo sich die Tools befinden und wie sie funktionieren, wird sich aber nie im Cyberspace verirren oder sich wundern, wo das Dokument geblieben ist. Zusätzlich zu seiner fast universellen Verwendung in Textverarbeitungsprogrammen wurde das Einzelbildschirmparadigma in Grafikprogrammen wie Microsoft Paint und Tabellenprogrammen wie Microsoft Excel verwendet. Excel führt eine leistungsfähige Möglichkeit vor, wie die Metapher des einzelnen Bildschirms bei mehreren Dokumenten beibehalten werden kann, indem das aktive Dokument mit einem Mausklick auf die entsprechende Registerkarte gewechselt wird. Sie können dies in der linken unteren Ecke von Abbildung 2 sehen.

Abbildung 2 Auch Excel verwendet einen einzelnen Bildschirm

Die Einfachheit der Einzelbildschirmmetapher ist sehr viel wert. Die meisten Programme wurden aber basierend auf der Metapher mehrerer Bildschirme (oder Seiten) erstellt. Nachdem Sie sich entschieden haben, Ihre Darstellungsschicht unter Verwendung mehrerer Seiten zu entwerfen, können Sie viel Verwirrung stiften. Aufgrund meiner Beobachtungen in vielen Tests zur Benutzerfreundlichkeit bin ich zu dem folgenden Schluss gekommen: Jedes Mal, wenn Sie Benutzer auf eine neue Seite leiten, gehen Sie das Risiko ein, sie zu desorientieren.

Warum es bei Benutzern zur Verwirrung kommt

Bei näherer Betrachtung ist es keine Überraschung, dass das Navigieren von Bildschirm zu Bildschirm desorientiert. Desorientierung bedeutet, dass der Benutzer die Richtung verloren hat. Sehen Sie sich die zwei Benutzer in Abbildung 3 an. Bob arbeitet mit einem Programm, das für einen einzelnen Bildschirm entworfen wurde. Sally arbeitet mit einem Programm, das für mehrere Bildschirme entworfen wurde.

Wenn Sie dieses Diagramm betrachten, wird deutlich, dass Sally eine schwierigere kognitive Aufgabe zu bewältigen hat. Sie muss nicht nur daran denken, wo sie sich befindet und wohin sie gehen muss. Der schwierige Prozess, einen inneren Überblick zu entwickeln, wird durch die Tatsache, dass Sally immer nur einen Bildschirm sieht, weiter erschwert. Sie muss sich ihr gedankliches Modell ohne eine Vogelperspektive über das Terrain zusammensetzen und gleichzeitig eine unbekannte Software kennenlernen. Das ist viel zusätzliche Arbeit und kann den Lernprozess sehr anspruchsvoll machen.

Abbildung 3 Das Verwirren des Benutzers

Die Navigation durch die Website oder das Produkt dient zur Einrahmung des gesamten Entwurfs der Darstellungsschicht. Wenn Sie dies richtig angehen, haben Sie sehr viel zur Steigerung der Benutzerfreundlichkeit des Produkts getan. Bedenken Sie die folgenden Vorschläge, wenn Sie beginnen, die Navigation zu entwerfen:

Bieten Sie nach Möglichkeit eine Einzelseitennavigation

Die Einzelseitenmetapher ist einfach und leistungsfähig. Stellen Sie mehr Funktionalität auf einer Seite bereit. Dies kann die Benutzerfreundlichkeit um einiges verbessern, vorausgesetzt, Sie lassen beim Bildschirmentwurf Vorsicht walten, damit der Benutzer nicht verwirrt oder überfordert wird. Was den Einzelbildschirmentwurf so leistungsfähig macht, ist die Tatsache, dass die Benutzer den Kontext nicht verlieren, während sie sich die neuen Informationen ansehen.

Infolge der Dokumentorientiertheit des Web, der Frequenz, mit der Suchmaschinen einen Benutzer zu einer internen Seite führen, der Einschränkungen der Verfahren zur Suchmaschinenoptimierung und der unhandlichen Seitenneuzeichnungseigenschaften von HTML und seiner primitiven Benutzeroberflächen-Steuerelemente ist es zu einer Standardentwurfspraxis geworden, viele Webseiten zu erstellen. Es gibt Situationen, in denen es in Ordnung ist, viele Seiten zu haben und den Benutzer irgendwo abzusetzen, aber diese sind selten. Die unverbindlichen Links, die den Reiz und die Leistungsfähigkeit des World Wide Web ausmachen, sind eine großartige Sache beim Surfen im Internet, aber nicht in Situationen, die einen Aufgabenfluss beinhalten.

Das Unvermögen zu erkennen, wie verwirrend es sein kann, wenn ein Benutzer von Seite zu Seite geleitet wird, führt oft dazu, dass mehr Seiten als nötig entworfen werden. Benutzer haben mir bei Benutzerfreundlichkeitstests erzählt, dass sie direkt zum Suchfeld gehen, um die gewünschte Seite zu finden, statt sich mit der Navigation durch die Website auseinanderzusetzen.

Heute haben wir die Möglichkeit, umfangreiche Webseiten mit hochentwickelten Benutzeroberflächen-Steuerelementen zu erstellen. Registerkarten, Karusselle, Akkordeons, QuickInfos und untergeordnete Fenster sind sogleich verfügbar und können den Umfang der erforderlichen Navigation von Bildschirm zu Bildschirm verringern.

Eine Entwurfsidee, die ich ernst nehme, besteht darin, die Navigation von Bildschirm zu Bildschirm nach Möglichkeit zu vermeiden. Ein einfaches Beispiel veranschaulicht die Gründe dafür. Abbildung 4 zeigt einen typischen Webnavigationsentwurf.

Abbildung 4 Typische Webnavigation

Hier hat das Unternehmen eine Reihe von Produkten, die als Liste auf der ersten Seite angezeigt werden. Durch Klicken auf den gewünschten Produktnamen gelangen Sie zu einer Produktinformationsseite, von der Sie entweder wieder zur Produktliste zurückkehren oder zu einer dritten Seite gehen und die Garantie anzeigen können.

Betrachten Sie jetzt eine Einzelbildschirmversion der Navigation (siehe Abbildung 5). In dieser Version werden die drei Produkte in einem Registerkartensteuerelement anzeigt. Durch Klicken auf die Registerkarte wird die Produktbeschreibung angezeigt. Wenn Sie auf den Link „Warranty Information“ klicken, werden in einem modalen Popupfenster die Informationen angezeigt. Wenn Sie es schließen, kehren Sie zur anfänglichen Seite zurück.

Abbildung 5 Ein Einzelbildschirm-Navigationsmodell

Selbstverständlich ist die Registerkartenmethode nicht gut skalierbar, wenn es viele Auswahlmöglichkeiten gibt. Deshalb kommt vielleicht ein Listenansicht-Steuerelement oder ein interessanteres Steuerelement wie ein Karussell in Betracht. Allein aus den Diagrammen können Sie erkennen, wie viel einfacher das zweite Navigationsmodell ist. Zudem hat es den Vorteil, dass auf den Produktregisterkarten viele Links und jeweils ein separates Fenster (oder ein Assistent) verfügbar sein können. Sie kehren immer mit einem einzigen Klick zu Ihrer Basis zurück, und es wird dasselbe Produkt angezeigt, wie zu dem Zeitpunkt, als Sie das Popupfenster ausgelöst haben. Benutzer werden dieses Modell viel einfacher finden, weil es den Kontext beibehält. Der Benutzer muss nie die Seite verlassen, um Details abzurufen.

Selbstverständlich enthalten die meisten Produkte, die ich entwerfe, mehrere Seiten. Schließlich ist der Umfang der Funktionalität, die auf einer einzelnen Seite untergebracht werden kann, begrenzt. Bei vorsichtiger Verwendung können mehrere Seiten die Benutzeroberfläche vereinfachen, indem die Funktionalität in sinnvoller Weise gruppiert wird. Der Trick besteht darin zu erkennen, dass Sie jedes Mal, wenn Sie Benutzer zu einer neuen Seite führen, das Risiko eingehen, dass sie die Orientierung verlieren. Deshalb verwende ich Seiten sparsam und vorsichtig. Außerdem denke ich gründlich über die richtige Art der Seitensegmentierung nach.

Gruppieren Sie mehrere Seiten in logische Abschnitte

Mein Navigationsalbtraum ist der bescheidene HTML-Link. (Es ist eigentlich ein Albtraum, den mein Kollege Ben Shneiderman und ich mit HyperTies, einem Hypertextbrowser vor den Zeiten des Web, in die Welt gesetzt haben, aber diese Geschichte muss ein anderes Mal erzählt werden.) Jedes Mal, wenn Benutzer auf einen Link klicken, werden sie zu einer neuen Seite geführt. Ohne einen sorgfältigen Entwurf kann sich das Navigieren ohne weiteres so anfühlen, als ob Sie sich im Wald verirrt haben.

Wenn Sie ein Produkt mit mehreren Seiten entwerfen, denken Sie gründlich darüber nach, wie Sie die Seiten in Abschnitte aggregieren. Abbildung 6 zeigt einen typischen Navigationsentwurf, der die Seiten in Unterabschnitte gruppiert.

Abbildung 6 Ein typischer Navigationsentwurf

Das Hauptmenü ist eine Reihe von Registerkarten, die mit der Homepage starten und drei Abschnitte anbieten. Wenn Sie einen Abschnitt anzeigen, ermöglicht ein Abschnittsmenü, durch die Seiten in diesem Abschnitt zu navigieren. Was den Inhaltsbereich angeht, habe ich ja ein Multistatus-Inhaltssteuerelement gezeigt. Abschnitt 1 enthält ein Registerkartensteuerelement und Abschnitt 2 ein Akkordeonsteuerelement.

Ein Entwurf wie dieser ist für viele Seiten geeignet. Wenn Sie zum Beispiel sieben Hauptmenüabschnitte hätten und jeder Abschnitt sieben Seiten und jede Seite ein Multistatus-Inhaltssteuerelement mit sieben Fensterbereichen besäße, würden Sie effektiv 73 oder 343 verschiedene Seiten steuern. Da jeder Inhaltsfensterbereich eine unbegrenzte Zahl von Popupfenstern hervorbringen kann, können Sie eine Unmenge an Inhalten verwalten. Falls Sie mehr Seiten benötigen, können Sie die Menüs erweitern, indem Sie ausziehbare und überlappende Menüs verwenden.

Wo Sie besonders vorsichtig sein müssen, sind Situationen, in denen Sie feststellen, dass Sie eine Navigation außerhalb von Menüs erstellen müssen. Oft ist die Versuchung stark, einen Link oder eine Schaltfläche im Inhalt der Seite zu platzieren, der bzw. die den Benutzer auf eine andere Seite führt. Ich habe sehr oft gesehen, dass dies Probleme verursacht. Die Navigation sollte nach Möglichkeit über das Menü erfolgen, und es sollten eingebettete Links oder Schaltflächen verwendet werden, um den Zustand eines Steuerelements zu ändern oder ein Popupfenster zu erstellen.

Das Navigationsmodell, das in Abbildung 6 gezeigt wird, hat eine implizite Hierarchie. Sie können dies deutlich erkennen, wenn Sie die Pfade in Diagrammen darstellen.

Im Diagramm in Abbildung 7 können Sie die horizontale Navigation von Abschnitt zu Abschnitt und die Navigation innerhalb eines Abschnitts sehen. Es gibt mehrere Fragen, die erörtert werden müssen.

Abbildung 7 Navigation zwischen Abschnitten

1. Wo landen Sie, wenn Sie von Abschnitt zu Abschnitt navigieren? Das hängt vom angestrebten Fluss ab. In den meisten Fällen wäre die am wenigsten verwirrende Option, den Benutzer beim ersten Besuch der Sitzung zur ersten Seite des Abschnitts (zum Beispiel Seite A im Diagramm) zu führen. Sie können diese Seite als einen Eingang zu einem Abschnitt entwerfen (das ist eine Art Abschnittshomepage). Dann würde ich den Zustand des Randleistenmenüs beibehalten, sodass der Benutzer beim Verlassen des Abschnitts zu derselben Seite zurückkehrt.
2. Was ist, wenn Sie (zum Beispiel) von Seite B zu Seite G gelangen möchten?

Hier ist wirklich Vorsicht angesagt, denn wenn Sie den Rahmen des Navigationsmodells verlassen, verwirren Sie den Benutzer. Die erste Frage, die sich stellt, lautet: Warum müssen Sie zwischen zwei internen Seiten springen? Wenn der Benutzer beide Abschnitte abrufen muss, um eine Aufgabe abzuschließen, muss der Entwurf möglicherweise angepasst werden. Das Aufteilen einer Aufgabe auf zwei interne Seiten ist ungeschickt und ineffizient.

Darauf bin ich kürzlich bei einem Dateiübertragungsprogramm gestoßen, das sowohl eine Datendatei als auch eine Protokolldatei schreibt. Da ich mich in einer Umgebung befand, in der sich die zugeordneten Datenträgerbuchstaben täglich änderten, weil die USB-Laufwerke angeschlossen und wieder entfernt wurden, musste ich den Datenträgerbuchstaben bei jeder Programmverwendung neu einstellen. Ich musste zu „Abschnitt A“ gehen, um den Speicherort der Datei festzulegen, und zu „Abschnitt B“, um den Speicherort der Protokolldatei festzulegen. Es war recht unpraktisch und zeitaufwändig.

Die Lösung in so einer Situation besteht darin, alle Datenträgerinformationen auf einer einzigen Seite zu platzieren oder, wenn das nicht möglicht ist, eine „Schattenkopie“ des zweiten Datenträgers in einem Popupfenster anzuzeigen, damit der Benutzer die Eingabe vornehmen kann, ohne zur zweiten Seite navigieren zu müssen.

Wenn es nur eine Frage der Bequemlichkeit ist, müssen Sie entscheiden, ob die hinzugefügte Komplexität den Klick, den Sie dem Benutzer ersparen, wert ist. Das hängt davon ab, wie oft der Benutzer den Wechsel vornehmen muss. Wenn es gelegentlich ist, würde ich zur einfacheren Navigation und dem zusätzlichen Mausklick greifen. Wenn es häufig ist, würde ich erwägen, ein Dropdownmenü der Seiten in der horizontalen Menüleiste zu verwenden, damit der Benutzer in einem einzigen Schritt zu einer internen Seite gelangen kann. Ich kann mir keine Umstände vorstellen, in denen ich den Benutzer einfach von einer internen Seite zu einer anderen transportieren würde. Das macht sich gut bei Raumschiff Enterprise, aber in einer Software ist das eher verwirrend.

Erstellen Sie einen Frame

Beim abschließenden Thema, das hier behandelt werden soll, geht es darum, wie der visuelle Entwurf eine einfache Navigation unterstützen kann. Bedenken Sie zuerst, welche Elemente Sie für den Seitenframe wünschen. Das sind die Elemente, die auf allen Seiten konsistent angezeigt werden. Eine der besten Möglichkeiten, die Orientierung des Benutzers zu unterstützen, sind konsistente Elemente an vorhersagbaren Positionen. Diese werden zu visuellen Fixpunkten für den Benutzer.

Ein wichtiges Element für die meisten Frames ist ein Seitentitel. Dadurch erhält der Benutzer nicht nur eine Hilfe beim Assoziieren der Seite mit einem Namen, sondern es vereinfacht auch Gespräche mit dem Supportpersonal.

Bedenken Sie auch die Farbcodierung. Im vorherigen Beispiel habe ich für die Farbcodierung des Homepageabschnitts ein helles Blau, Grün für Abschnitt 1 und Orange für Abschnitt 2 verwendet. Diese Farben sind eine Hilfestellung für die Benutzer, die auf diese Weise erkennen können, in welchem Abschnitt sie sich befinden. Ich würde im visuellen Entwurf zudem Form und Textur verwenden, um farbenblinde Benutzer zu unterstützen.

Verwenden Sie Navigationshilfen

Zwei häufige Navigationshilfen, die es wert sind, einbezogen zu werden, sind Breadcrumbs und eine Sitemap. Verlassen Sie sich aber nicht darauf, dass sie Entwurfsprobleme lösen. Viele Benutzer sehen Breadcrumbs nicht oder verstehen sie nicht. Aber für die anderen sind sie eine nützliche Hilfe. Auf seiner Website useit.com erwähnt Jakob Nielsen, der Guru der Benutzerfreundlichkeit, dass sich immer mehr Benutzer auf Breadcrumbs stützen. Er weist außerdem darauf hin (und ich stimme dem völlig zu), dass Breadcrumbs die Navigationshierarchie, nicht den Verlauf der Seitenbesuche widerspiegeln sollten.

Sitemaps können einem Benutzer helfen, das Navigationslayout zu verstehen, aber sie werden selten verwendet. Trotzdem sollten sie enthalten sein, weil sie dem Benutzer eine Vogelperspektive in Bezug auf die Navigation bieten. Erwarten Sie nur nicht, dass sie Entwurfsprobleme beseitigen.

Bei einem der Witze, über die in der Benutzerfreundlichkeitscommunity immer wieder gelacht wird, geht es darum, dass bei jeder Frage bezüglich der Benutzerfreundlichkeit die Antwort gleich lautet: „Das kommt ganz darauf an.“ Leider gilt dies auch für die Navigation. Es gibt kaum Entwurfsregeln, und bei den meisten handelt es sich um Richtlinien und Heuristik. Deshalb ist es so wichtig, sich mit den Benutzern zu befassen und den Kontext der Verwendung zu verstehen, bevor die Benutzeroberfläche erstellt wird.

Neben der Berücksichtigung dieses Grundsatzes sind folgende bewährte Methoden zu empfehlen:

1. Minimieren Sie die Anstrengungen, die erforderlich sind, um die navigationsbezogenen Auswahlmöglichkeiten zu verstehen und über sie zu entscheiden. Je einfacher es ist, die Benutzeroberfläche zu verwenden, desto größer ist die Benutzerfreundlichkeit.
2. Verwenden Sie nach Möglichkeit Einzelbildschirmentwürfe. Verwenden Sie reichhaltige Steuerelemente mit mehreren Fensterbereichen, Popupfenster und Assistenten, damit die Benutzer einen Großteil der Aufgabe durchführen können, ohne seitwärts navigieren zu müssen.
3. Wenn Sie mehrere Seiten erstellen, kombinieren Sie diese in Abschnitten. Vereinfachen Sie den Wechsel zwischen Abschnitten durch ein Hauptnavigationssteuerelement, und verwenden Sie ein sekundäres Steuerelement für die Navigation innerhalb der Abschnitte. Versuchen Sie, nicht tiefer zu gehen, wenn Sie es vermeiden können. Je einfacher die Navigation ist, desto schneller wird sie von den Benutzern gemeistert.
4. Stellen Sie sicher, dass Hauptelemente, wie z. B. Menüs, Titel und andere Informationen, die auf allen Seiten angezeigt werden, visuell konsistent dargestellt werden. Die Benutzer sollten den Eindruck haben, dass einige Elemente auf dem Bildschirm stabil sind und dass sie sie verwenden können, um die Orientierung zu behalten.
5. Lassen Sie bei Navigationselementen, die Benutzer von der internen Seite eines Abschnitts zur internen Seite eines anderen transportieren, große Vorsicht walten. Dies ist zwar möglich, aber es ist allzu leicht, den Benutzer dabei zu verwirren.
6. Verwenden Sie sekundäre Navigationshilfen, wie z. B. Breadcrumbs und Sitemaps, aber verlassen Sie sich nicht auf sie.
7. Denken Sie immer an die zukünftige Erweiterung. Wenn Sie erwarten, dass in das Produkt in der Zukunft neue Funktionalität integriert wird, entscheiden Sie gleich zu Beginn, wie Sie die Navigation nahtlos erweitern werden, um neue Bildschirme zu integrieren.

Die Navigation richtig hinzubekommen, ist einer der wichtigsten Schritte, um die Benutzerfreundlichkeit Ihres Produkts zu gewährleisten. Nehmen Sie sich die Zeit, um es richtig zu machen, und prüfen Sie Ihren Entwurf durch Benutzerfreundlichkeitstests, und Sie werden die gewünschten Ergebnisse erzielen.

DIE SOFTWARESICHT

Ambrose Little

Navigation ist eines dieser Dinge, die die meisten in der Softwarebranche für selbstverständlich halten, und wie bei den meisten Fragen des Entwurfs besteht die Tendenz, einfach auf die anderen und ihre Arbeit zu sehen und ihrem Beispiel zu folgen. Manager geben ihre Erwartungen kund: „Es soll wie Office aussehen“ oder „Es soll wie Amazona.com aussehen“, aber ich denke, dass wir als Entwickler, die sich darauf konzentrieren, Programme zum Laufen zu bringen, nicht viel Zeit damit verbringen, über den Entwurf nachzudenken.

Einige von uns haben das Glück, mit Informationsarchitekten (oder anderen UX-Alleskönnern) zusammenzuarbeiten. Aber manchmal erwarten wir, dass Grafikdesigner die Navigation als Teil ihres Entwurfs behandeln, obwohl vielen von ihnen die Fachkenntnis oder der entsprechende Hintergrund fehlt. Erfreulicherweise gibt es viele gute Ressourcen, in denen das hartnäckige Problem der Navigation behandelt wird, und ich möchte hier kurz auf einige davon eingehen.

Dem Beispiel der Großen folgen

Zunächst einmal ist es nicht immer schlecht, dem Beispiel der führenden Anbieter zu folgen. Die Chancen, dass sie tatsächlich viel Zeit und viele Ressourcen in die Informationsarchitektur gesteckt haben, um sie optimal umzusetzen, stehen gut. Folglich setzen die führenden Anbieter den Maßstab dafür, was Benutzer erwarten. Sie schaffen gewissermaßen Konventionen und legen Standards fest, durch die sich die Erwartungen darüber, wie eine Software funktionieren soll, verändern.

Andererseits ist es, wie Charles Kreitzberg weiter oben bereits angemerkt hat, viel besser, die Personen zu verstehen, die Ihre Lösung und die Elemente, mit denen Sie zu tun haben, verwenden. Diese Elemente enthalten die Informationen und den Inhalt für eine Website oder die Objekte in Ihrer Domäne. Wenn es darum geht, die Personen zu verstehen, kommt es darauf an, ihre Motivation für die Interaktion mit Ihrer Lösung zu verstehen, und wenn Sie sich diese Grundlage erarbeiten, wird Ihnen das beim Strukturieren Ihrer Anwendung sehr helfen.

Sie können von den Großen viel lernen, aber es hilft nichts, ihnen blind zu folgen, weil sich deren Publikum möglicherweise von Ihrem unterscheidet. Vielleicht haben Sie ein viel kleineres Publikum, oder Ihre Inhalte oder Produkte sind ganz andere. Eines der besten Beispiele für diesen Unterschied, das ich gefunden habe, ist der Versuch, die Microsoft Office-Multifunktionsleiste nachzuahmen (siehe Abbildung 8).

Abbildung 8 Microsoft Word-Multifunktionsleiste (Teil der Office Fluent-Benutzeroberfläche)

Die Multifunktionsleiste ist das aktuelle Schema in der Reihe der Office-Benutzeroberflächenschemas, und es besteht die Tendenz, dass sie von vielen Entwicklern nachgeahmt wird. Das Problem ist, dass die Multifunktionsleiste einen schlechten Navigationsentwurf noch zu verschlimmern scheint. Wenn Sie Standardmenüs, Registerkarten und andere Steuerelemente schlecht ausführen, können Sie mit einem schlechten Navigationsentwurf davonkommen, aber wenn Sie die Multifunktionsleiste verpfuschen, ist der Schaden groß.

Die Registerkarten sollten auf Benutzerzielen und Aufgaben basieren. Folglich gibt es eine Registerkarte für das Einfügen von Elementen, eine Registerkarte für das Seitenlayout, eine Registerkarte für das Überprüfen eines Dokuments. Innerhalb der Registerkarten gibt es Befehlsgruppen (wie die Zwischenablage und die Schriftart in Abbildung 8), die wiederum benutzerbezogen und nach verwandten Aufgaben und Aktionen gruppiert sind. Die Multifunktionsleiste verwendet Schaltflächen unterschiedlicher Größen, die auf Verwendungsdaten basieren (das große Einfügen-Symbol im Vergleich zu den kleineren Symbolen für das Ausschneiden und das Kopieren), sodass Benutzern geholfen wird, häufiger verwendete Funktionen zu finden und zu verwenden.

Kurz gesagt, es steckt viel Arbeit dahinter, effektive Elemente im Stil der Multifunktionsleiste zu entwerfen. Deshalb sollten Sie sie nicht blind als Navigationsmethode für Ihre Anwendung übernehmen.

Bevor Sie also andere Anwendungen nachahmen, müssen Sie entscheiden, ob deren Entwurf in Ihrer Situation angebracht ist. Haben Sie die gleiche Skalierung? (Amazon.com und Netflix verwenden Empfehlungen, die auf vielen Benutzerdaten basieren. Die richtige Umsetzung erfordert eine beachtliche Skalierung.) Office enthält unzählige Befehle, die von der mehrschichtigen Organisation der Multifunktionsleiste profitieren, aber wenn Sie nur eine Handvoll von Befehlen haben, ist ein typisches Menü wahrscheinlich besser.

Haben Sie die gleiche Art von Inhalt? Was für eine E-Commerce-Website wie Amazon die richtige Wahl darstellt, eignet sich unter Umständen nicht für eine Informationswebsite zur Umwelt. Was sich für eine Informationswebsite eignet, funktioniert möglicherweise nicht für eine Anwendung. Wie Charles Kreitzberg schon erläutert hat, eignet sich das im Web häufig verwendete informelle Navigationsmodell häufig nicht, wenn Benutzer versuchen, eine Aufgabe auszuführen. Sie möchten Benutzern helfen, ihre Ziele zu erreichen, und sie nicht ablenken oder auf Irrpfade führen.

Was bedeutet das nun für uns? Verzweifeln Sie nicht! Selbst wenn Ihnen keine UX-Fachleute als Berater zur Seite stehen, gibt es Verfahren, die Sie einsetzen können, um Ihre Navigation zu verbessern. Ein solches Verfahren ist die so genannte Karteikartensortierung.

Karteikartensortierung

Die Karteikartensortierung ist eine Möglichkeit, Benutzer (vorzugsweise aus Ihrer Zielgruppe) dafür zu gewinnen, Ihnen bei der Organisation Ihres Inhalts zu helfen (siehe Beispiel in Abbildung 9). Sie hat insofern Ähnlichkeiten mit anderen Verfahren, bei denen Beteiligte befragt werden, wie z. B. die CRC-Karten (class-responsibility-collaboration) (ein Verfahren des objektorientierten Entwurfs), Benutzergeschichten usw., als sie sich aktiv auf die Teilnahme der Beteiligten am Lösungsentwurf stützt (und dabei werden Karteikarten verwendet). In der Regel wird die Karteikartensortierung für das Organisieren von Informationen auf Websites verwendet, aber die Verfahren können auch verwendet werden, um Befehle innerhalb einer Anwendung zu organisieren.

Abbildung 9 Beispiel für die Karteikartensortierung unter Usability.gov/design/cardsort.html

Sie ist ein benutzerzentriertes und kein lösungszentriertes (oder domänenzentriertes) Verfahren und ist deshalb nützlich beim Ermitteln des Entwurfs, der für die Benutzer, die letzten Endes mit der Lösung interagieren werden, sinnvoll ist. Die Funktionsweise des eigentlichen Verfahrens soll hier nicht näher beleuchtet werden. Es soll nur darauf hingewiesen werden, dass Benutzer daran beteiligt sind, Ihr Material für Sie zu kategorisieren. Es gibt viele Ressourcen, die online frei verfügbar sind (wie z. B. usability.gov/design/cardsort.html), und es gibt auch einige Softwarepakete als Hilfestellung, wie z. B. OptimalSort. Aber ziehen Sie vor dem Verwenden der Software den Karteikartenansatz in Betracht. Die Fachleute sind sich darüber einig, dass es im Allgemeinen zu guten Ergebnissen führt, wenn sie Benutzer zusammenbringen und echte Karteikarten verwenden.

UX-Entwurfsmuster

Muster sind wahrscheinlich eine der besten Ressourcen im UX-Entwurf. Es ist keine Überraschung, dass es viele Entwurfsmuster für Navigation gibt, die von Breadcrumbs (Orientierungshilfe für Benutzer) über Facettennavigation – bei der mit Facetten (Metadaten) zu Suchergebnissen letztere aktiv gefiltert werden – bis zum modalen Fensterbereich reichen, der auf dem vertrauten modalen Dialogfeld aufbaut, und vieles dazwischen. Als ein Beispiel wird in Abbildung 10 die Verwendung des Musters der klaren Einstiegspunkte gezeigt.

Klare Einstiegspunkte

Es ist möglicherweise nicht offensichtlich, was Benutzer tun können oder sollten, wenn sie eine Anwendung starten oder eine Website besuchen. Sie müssen ihnen einen Satz klarer Einstiegspunkte für die Anwendung oder Website geben, die auf ihren häufigsten Aufgaben oder Zielen basieren.

Abbildung 10 Beispiel für klare Einstiegspunkte

Ohne klare Einstiegspunkte können sich neue oder gelegentliche Benutzer verloren vorkommen, wenn sie eine Anwendung oder Website öffnen. Indem Sie sie mit klaren Einstiegspunkten anleiten, nehmen Sie Ihnen die Last ab herauszufinden, was sie tun können oder sollen.

Dieses Muster funktioniert nur, wenn Sie einen Satz der häufigsten Aufgaben oder Ziele für einen großen Teil Ihrer Zielgruppe ermittelt haben oder ermitteln können. Wenn Sie dies nicht ermitteln können, verursacht das Muster im Grunde mehr Schwierigkeiten, weil es stört und keine wirkliche Hilfe für die Benutzer darstellt.

Es ist von Bedeutung, dass es sich bei einem Großteil Ihrer Benutzer um neue oder gelegentliche Benutzer handelt, denn wenn die betreffenden Aufgaben nicht die einzigen relevanten Aufgaben sind, empfinden reguläre Benutzer klare Einstiegspunkte als störend.

Lassen Sie sich nicht dazu verleiten zu denken, dass es offensichtlich ist, was Benutzer tun sollten. Viele Homepages sind eine bunte Mischung aus allem, was die Organisation zu bieten hat, und die Benutzer werden verwirrt und wissen nicht, was sie tun sollen oder wohin sie navigieren müssen. Klare Einstiegspunkte beseitigen die Verwirrung.

Implementierung

Der Trick beim Muster der klaren Einstiegspunkte ist das erfolgreiche Ermitteln der wichtigsten Aufgaben oder Ziele. Wenn Sie einen benutzerzentrierten Entwurf eingesetzt haben, haben Sie diese bereits als die Aufgaben identifiziert, die den Hauptzielen Ihrer Benutzer dienen. Verwenden Sie diese Informationen, um Ihre klaren Einstiegspunkte zu entwerfen.

Wenn Sie dem benutzerzentrierten Entwurf nicht gefolgt sind, müssen Sie etwas Forschung betreiben, wahrscheinlich sowohl intern als auch extern, um die Hauptaufgaben und -ziele der Benutzer zu bestimmen. Wenn Ihre Anwendung oder Website bereits existiert, ist die Auswertung der Verwendungsprotokolle eine große Hilfe. Außerdem können Sie die Hauptaufgaben in der Regel oft aus funktionalen Spezifikationen herausdestillieren. Dabei sollten Sie aber versuchen, sie von Benutzern oder zumindest von Geschäftsbeteiligten bestätigen zu lassen, um sicherzustellen, dass die Aufgaben, die Sie auswählen, mit den Hauptzielen in Einklang stehen, denen die Anwendung oder die Website dient.

Nachdem Sie Ihre Hauptaufgaben festgelegt haben, sollten Sie überlegen, wie sie präsentiert werden müssen. Wenn Sie mehr als eine Handvoll von Aufgaben haben, sollten Sie überlegen, wie Sie sie visuell gruppieren können, aber denken Sie daran, dass dies kein Replikat Ihrer Hauptnavigation sein soll, sondern wirklich die Hauptaufgaben repräsentieren muss.

Zeigen Sie die Aufgaben sehr deutlich und zentral in der Startansicht Ihrer Anwendung oder Website an. Stellen Sie sicher, dass Sie sie im Sinne der Aufgaben formulieren, die der Benutzer durchzuführen versucht, statt Markenterminologie wie Toolnamen oder andere Terminologie zu verwenden, mit der die Benutzer nicht vertraut sind. Wenn Sie die Aufgabe in wenigen Worten darstellen können, ist das ideal, aber es empfiehlt sich, Namen durch hilfreiche Beschreibungen zu ergänzen, die ganz genau darlegen, zu welchem Ergebnis die Auswahl einer Aufgabe oder eines Ziels führt.

Stellen Sie sicher, dass Sie keine Falltüren schaffen, durch die Benutzer plötzlich ins Zentrum Ihrer Lösungsstruktur geraten. Das Ziel, das sie durch das Auswählen der Aufgabe erreichen, sollte klar und deutlich mit der Aufgabe verbunden sein. Dies ist ein guter Anfang für einen Assistenten, aber es muss nicht unbedingt auf einem Assistent basieren. Stellen Sie einfach eine starke Verbindung zwischen der ausgewählten Aufgabe und der Ansicht her, die den Benutzern nach dem Auswählen der Aufgabe angezeigt wird.

Wenn es Unteraufgaben gibt, auf die Benutzer direkt zugreifen können, können Sie erwägen, diese bei der Auswahl der Hauptaufgabe anzuzeigen. Beachten Sie aber, dass dies kein vollständiges Menü oder Navigationsschema sein soll.

Es ist eine bewährte Methode, die häufigsten Aufgaben gegenüber den weniger häufig verwendeten visuell hervorzuheben, was automatisch die Aufmerksamkeit der Benutzer anzieht. Diese Ansicht mit Haupteinstiegspunkten sollte nicht von der üblichen Navigationsstruktur oder von sekundären Tools/Informationen umgeben sein. Blenden Sie diese aus, um die Einstiegspunkte ins Blickfeld zu rücken.

Wenn Sie darüber nachdenken, werden Sie erkennen, dass Steuerelemente meist nur Implementierungen von Mustern sind, die als wiederverwendbarer Code formalisiert werden. Wenn Sie sich an einer Silverlight-Entwicklung, vor allem Silverlight 1.0 (oder Entwicklung von Hochleistungs-Desktopbenutzeroberflächen), versucht haben, haben Sie wahrscheinlich zu schätzen gelernt, welche Arbeit Steuerelemente für Sie erledigen können. Sogar die grundlegenden Interaktionen eines Textfelds manuell erstellen und behandeln zu müssen, ist nicht ganz einfach.

Außerdem schaffen Steuerelemente, vor allem Plattformsteuerelemente wie jene in der HTML-Spezifikation, implizite Konventionen für standardmäßige Benutzeroberflächenmuster. Es gibt viele andere Optionen für die Mehrfachauswahl, aber das HTML-SELECT-Steuerelement ist gewissermaßen zum Standardsteuerelement für diese Aufgabe im Web geworden. Mit RIA-Plattformen (Rich Internet Application) haben die Auswahlmöglichkeiten zugenommen, aber es besteht kein Zweifel, dass die einsatzbereiten Steuerelemente letzten Endes Konventionen schaffen werden (die natürlich von der vorangehenden Plattformsteuerungsverwendung beeinflusst werden). Es gibt viele komplexe und oft nützliche Muster, die Sie mit benutzerdefinierten Steuerelementen implementieren können, oder Sie können Steuerelemente eines Drittanbieters, wie z. B. von Infragistics, nutzen.

Für die Navigation ist natürlich der Hyperlink das häufigste Steuerelement, der, wie Charles Kreitzberg weiter oben erläutert hat, in aufgabenorientierten Anwendungen mit Bedacht und sogar sparsam verwendet werden muss. Es gibt Registerkartensteuerelemente, die das Gruppieren ähnlicher Elemente, die Navigation zwischen den Gruppen sowie eine implizite Anzeigemöglichkeit für die Inhalte, die ein Benutzer betrachtet, unterstützen (über die gerade ausgewählte Registerkarte). Es gibt Popupmenüsteuerelemente sowohl auf Web- als auch auf Desktopplattformen: Wenn Sie diese verwenden, achten Sie darauf, dass Sie nicht tiefer als drei (vorzugsweise zwei) Ebenen gehen, weil deren Verwendung Geschick im Umgang mit der Maus erfordert (wenn der Benutzer verzweifelt versucht, sich schnell seitwärts von einem Menü zum anderen zu bewegen). Das wird vielleicht die Techniker überraschen, die es tagein tagaus mit Menüs zu tun haben. Es gibt Schlagwortwolken-Steuerelemente, die die Implementierung dieses Musters vereinfachen, Seitennavigationen, die bei diesem Muster behilflich sind, Dialogfeld-Steuerelemente und so weiter.

Schlagworte und Schlagwortwolken sind großartige Möglichkeiten, eine flexible Organisation zu erstellen, um Benutzer bei ihrer Suche zu unterstützen. Diese können ein formelleres Organisationsschema, wie z. B. Menüs, ergänzen. In Abbildung 11 ist ein Beispiel dargestellt.

Abbildung 11 Schlagwortwolke von Flickr

Denken Sie über das Steuerelement (Muster) nach, das Sie auswählen. Verwenden Sie es nicht nur, weil es am einfachsten oder am vertrautesten ist. Lesen Sie in einem Musterkatalog nach, um besser zu verstehen, wann welches Muster verwendet werden sollte. Außerdem können Sie die Muster gegebenenfalls als Hilfestellung bei der Auswahl der Implementierung nutzen.

Testen, Nachverfolgen und Anpassen

Ganz unabhängig davon, welches Navigations- und Organisationsschema Sie sich ausdenken, wird es falsch sein – zumindest teilweise. Selbst wenn es vorläufig das richtige ist, werden sich Ihre Anforderungen mit der Zeit wahrscheinlich ändern. Also müssen Sie, wie weiter oben schon von Charles Kreitzberg ausgeführt, in einen skalierbaren und flexiblen Navigationsentwurf investieren.

Regelmäßige wesentliche Änderungen an Ihren Navigationsstrukturen sind nicht wünschenswert, aber Sie sollten sie auf Grundlage der Verwendungsdaten und Benutzerfreundlichkeitstests anpassen. Das Testen der Benutzerfreundlichkeit ist eine gute Option, weil Sie dabei vor dem Veröffentlichen der Anwendung Probleme aufspüren können. Stellen Sie nur sicher, dass Sie genug Platz im Projektzeitplan vorsehen, um das Testen und die auf den Testergebnissen basierenden Änderungen durchzuführen.

Wenn Ihnen Verwendungsdaten vorliegen (z. B. aus Webprotokollen oder durch Nachverfolgen der Featureverwendung), verwenden Sie sie, um besser zu verstehen, wie die Benutzer den vorhandenen Entwurf nutzen, und nehmen Sie entsprechende Änderungen vor. Suchprotokolle sind besonders informativ, weil sie auf die Schwächen in Ihrem Navigationsschema hinweisen können, wenn Benutzer anfangen, die Suchfunktion zur Navigation zu verwenden. Wenn Sie keine webbasierte Nachverfolgung verwenden, erwägen Sie, eine Infrastruktur zum Nachverfolgen der Verwendung zu erstellen, damit Ihnen Daten für das Erstellen einer Sicherungskopie und für zukünftige Änderungen vorliegen.

Das Erstellen einer guten Navigation kann neben all den anderen Aufgaben, um die sich Entwickler kümmern müssen, äußerst schwierig erscheinen. Wenn Sie keine Fachleute an Ihrer Seite haben, können Sie die Angelegenheit selbst in die Hand nehmen und einigen der hier aufgelisteten Vorschläge folgen.

Navigation ist äußerst wichtig. Es lohnt sich, Zeit und Ressourcen in sie zu investieren. Sie können es inkrementell mithilfe von Mustern angehen, und Sie können großartige, leicht verständliche Einführungen wie „Don't Make Me Think“ von Steve Krug oder „Ambient Findability“ von Peter Morville nutzen. Die Benutzer, die Ihre Software verwenden müssen, werden sich darüber freuen.

Dr. Charles Kreitzberg ist CEO der Cognetics Corporation (www.cognetis.com), die Beratung rund um das Thema Benutzerfreundlichkeit sowie Dienstleistungen im Bereich des Entwurfs der Benutzerfunktionalität anbietet. Seine Leidenschaft ist die Erstellung intuitiver Oberflächen, die die Benutzer ansprechen und begeistern und gleichzeitig die Geschäftsziele für das Produkt unterstützen. Charles Kreitzberg lebt in Central New Jersey, wo er in seiner Freizeit auch als Musiker auftritt.

Ambrose Little lebt mit seiner Ehefrau und vier Kindern in Central New Jersey. Er entwirft und entwickelt seit mehr als 10 Jahren Software und fühlt sich geehrt, ein INETA-Sprecher und Microsoft MVP zu sein. Vor kurzem ist er vom technischen Entwurf zum benutzerorientierten Entwurf gewechselt und ist jetzt als Designer von Benutzerfunktionalität für Infragistics tätig.