Das Website-Menü an konkreten Aufgaben ausrichten
Ordnen Sie vorhandene Seiten den Aufgaben Ihrer Besucher zu. Eine ausgefüllte Zuordnung macht Menübegriffe, Ziele und die anschließende Prüfung nachvollziehbar.
Planen Sie das Website-Menü anhand dessen, was Besucher erledigen möchten. Dazu müssen Sie wissen, welche Inhalte vorhanden sind und welche Frage jede Zielseite beantwortet. Die Abteilungsnamen Ihres Unternehmens sind dafür zunächst nur eine mögliche Ordnung.
Den vorhandenen Inhalt mit einer Aufgabe verbinden
Das folgende Beispiel ist erfunden. Die Website eines Softwareanbieters enthält eine Integrationsseite, ein Formular für Projektanfragen und Hilfe zur bereits genutzten Portalsoftware. Die Kennungen bezeichnen eigene Beispielseiten, keine tatsächlichen ASES-Routen.
Die Tabelle zeigt einen Ausschnitt der Navigation. Die Menübegriffe sind Vorschläge; die Zielzuordnung ist eine Erwartung für die spätere Prüfung, kein Ergebnis einer Nutzerstudie.
Aufgabe | Vorhandener Inhalt | Vorgeschlagener Menüpunkt | Ziel |
|---|---|---|---|
Prüfen, ob der Anbieter Kundendaten zwischen CRM und ERP übertragen kann. | Systemintegration mit Datenflüssen, Grenzen und Anfrageweg. | Systeme verbinden |
|
Eine geplante Webanwendung und die eigenen Kontaktdaten beschreiben. | Projektanfrage mit Angaben zum Vorhaben und zur Kontaktaufnahme. | Projekt anfragen |
|
Nachlesen, wie ein Dateiexport in der vorhandenen Portalsoftware funktioniert. | Portalhilfe mit der entsprechenden Anleitung. | Portalhilfe |
|
Eine Zielseite muss das Versprechen des Menüpunkts einlösen. Eine allgemein gehaltene Leistungsübersicht reicht beispielsweise nicht, wenn dort die gesuchte Integrationsinformation fehlt. Prüfen Sie zuerst den Inhalt, bevor Sie nur den Link umbenennen.
Menübegriffe mit konkreten Aufgaben prüfen
GOV.UK empfiehlt konkrete, glaubhafte Testaufgaben, die den Lösungsweg nicht verraten. Geben Sie einer passenden Testperson etwa die erste Aufgabe der Tabelle. Sagen Sie nicht, welchen Menüpunkt sie wählen soll. Beobachten Sie die gewählte Bezeichnung, Umwege und das Ergebnis auf der Zielseite.
Fragen Sie anschließend, ob die gefundene Information die Aufgabe beantwortet. Ein erster Klick allein belegt das noch nicht. Halten Sie Beobachtung und Interpretation getrennt fest: Eine falsche Zielwahl kann an Begriff, Gruppierung oder fehlendem Inhalt liegen. Aus einem einzelnen Versuch folgt keine allgemeine Erfolgsquote.
Die Orientierung auf kleinen Bildschirmen erhalten
Das WAI-Menü-Tutorial beschreibt semantische Struktur und konsistente sichtbare Einträge über Bildschirmgrößen hinweg. Ein einklappbares mobiles Menü soll die gleichen Aufgaben unterstützen. Bei Einträgen, die in beiden Ansichten sichtbar sind, sollen Reihenfolge, Bezeichnung und Ziel übereinstimmen; die aktuelle Seite muss erkennbar sein.
Planen Sie lange Übersetzungen und mehrere Navigationsebenen ausdrücklich mit. Ob ein Punkt in einer Untergruppe verschwindet, ist eine inhaltliche Entscheidung, keine reine Platzfrage. Prüfen Sie, ob die drei Beispielaufgaben dort noch ohne Erklärung lösbar sind.
Navigation auch als Bedienung abnehmen
Das WAI-ARIA-Beispiel unterscheidet gewöhnliche Website-Navigation von einem Anwendungsmenü mit spezieller Tastatursteuerung. Die Rolle menu ist für übliche Navigationslinks nicht automatisch passend. Verwenden Sie verständliche Links und geeignete Bedienelemente zum Aufklappen; deren Zustand und Fokus müssen nachvollziehbar sein.
Prüfen Sie in der implementierten Variante Tastaturbedienung, Vergrößerung und eine passende Screenreader-Konfiguration. Die Beispielprüfung der drei Ziele ersetzt diese technische Kontrolle nicht. Übernehmen Sie Menübegriffe und Gruppen, wenn Aufgabenverständnis, Zielinhalt und Bedienung zusammenpassen; behalten Sie offene Befunde sichtbar.
Quellen
Geschrieben von
- Julia HoffmannRedakteurin für Design und UXJulia Hoffmann ist bei ASES für die redaktionellen Inhalte zu Design und User Experience zuständig. Ihre Beiträge behandeln die Nutzung von Websites und Anwendungen, die Gestaltung von Benutzeroberflächen und digitale Barrierefreiheit.
Weiterlesen
Alle Beiträge
Design & UX mit ASES
Nutzererlebnis, Oberflächen und Markenauftritt