Die Qual der (Aus)Wahl – DropDown-Listen benutzerfreundlich gestalten

Benutzerfreundlichkeit ist für den Erfolg moderner Websites ein Kernthema. Web-Entwickler stecken meist (und zu Recht) viel Arbeit in die Gestaltung der Oberfläche und die Struktur der Seiten. Oft sind es aber die Details in der Tiefe des HTML- beziehungsweise CSS-Codes, die diesen Aufwand zumindest gefährden. Eines meiner beliebtesten Beispiele sind die in Kontaktformularen üblichen DropDown-Listen zur Landesauswahl.

Sicher hat sich jeder von uns – zumindest anfangs und in Unkenntnis einiger „Workarounds“ – über diese „Zeitfresser“ beim Ausfüllen eines Formulars geärgert. Man scrollt und sucht und scrollt und sucht… Sortiermöglichkeiten von Begriffen gibt es viele, hier ein paar der gebräuchlichsten Arten:

• unsortiert (sei hier mit aufgenommen, da ich dies sogar auf größeren professionellen Sites immer noch erlebe)
• alphabetisch (zum Beispiel gemäß ISO 3166-1)
• kategorisiert (zum Beispiel nach Kontinenten)
• Top 3/5/10 – Begriffe + Rest (TopWords – Sortierung)
• Begriffssuche mit AJAX (Verarbeitungsskript auf Server erforderlich)

Unsortierte Listen – schlechter geht es nicht

Unsortierte Listen sollten ausgetauscht beziehungsweise gar nicht erst eingepflegt werden. Sie entstehen meist dadurch, dass der Webworker auf eine Ansammlung an Ländernamen im Netz stößt und diese per Copy&Paste in sein HTML-Dokument kopiert und entsprechend weiterverarbeitet (hier: mit <option>-Tags versieht).

Alphabetisch sortierte Listen

Im Falle der Landesauswahl-DropDown-Box kursieren im Internet zahlreiche vorgefertigte <select>/<option> – Konstrukte (ein Länderlisten-Generator findet sich zum Beispiel bei About) mit den entsprechenden Einträgen. Außerdem kann man sich ein solches Konstrukt aus dem Quellcode der entsprechenden Seite (in der gewünschten Sprache) per Copy&Paste in seine eigenen HTML-Dateien holen und anpassen. Es gibt übrigens (wie für fast alles) eine ISO-Norm (siehe auch) für die korrekte Abfolge der Ländernamen.

Besonders für unerfahrene Webnutzer sind diese Listen, zumal wenn sie auf einer englischsprachigen Seite surfen, ein kleines Martyrium, da das Auffinden des eigenen Landes oft einige Scroll-Durchläufe in Anspruch nimmt. Erfahrene User bedienen sich hier eines Shortcuts, den DropDown-Listen grundsätzlich anbieten: Aktiviere ich das DropDown-Feld und tippe dann auf der Tastatur in schneller Reihenfolge die Anfangsbuchstaben meines Landes (in meinem Fall also D-E-U…) ein, so springt das Auswahlfeld zu dem ersten passenden Eintrag. Aus Usability-Sicht ist dies aber zu beanstanden, da ich unnötigerweise von der Maus zur Tastatur wechseln muss.

Trotz dieses Shortcuts rangieren alphabetische Länderauswahllisten daher unter benutzerunfreundlich.

Kategorie – Listen bringen Farbe ins Spiel

Ein Schritt in die richtige Richtung sind sicher so genannte kategorisierte Auswahllisten. Dabei werden die Begriffe in Kategorien angeordnet, innerhalb derer sie alphabetisch sortiert sind. Je nach Fokus der Website bieten sich als Kategorien zum Beispiel die Kontinente oder Kontinentteile an, zum Beispiel Nord-, West-, Mittel-, Ost- und Südeuropa.

Formatiert man die Kategorie-Titel, die eine eigene CSS-Klasse oder das HTML-Tag <optgroup> erhalten, zum Beispiel noch mit einer anderen Hintergrundfarbe, stärkeren Rändern oder Schriftauszeichnung, dann ergibt sich eine für das Gehirn ansprechende und übersichtlich gegliederte Informationsstruktur, die es gerne und schnell aufnimmt. Die allgemeine Darstellung in Form eines DropDown-Formular-Elements wahrt zudem den wichtigen Gewohnheitsaspekt:

Je gewohnter ein Interface, auch mit eventuell suboptimaler Gestaltung, ist, umso leichter fällt es uns, uns darin zurecht zu finden. Man denke nur an Bankangestellte, die von Ihrem vorsintflutlichen Mainframe-Terminal auf Windows XP umsteigen und trotz gestiegenem Komfort erst einmal verzweifeln.

Top-Word Listen: best practice ?

Eine sehr gute Lösung, um Vollständigkeit und schnellen Zugriff zu vereinen, bietet eine TOP-Words Sortierung. Diese DropDown-Liste gliedert sich in mindestens 2 Teile:

1. Ein Abschnitt mit 3,5 oder 10 der geschätzt meist gesuchten Länder. Zum Beispiel Deutschland, Österreich,
   Schweiz als Top 3. Dieser Abschnitt steht IMMER ganz am Anfang der Liste und ermöglicht so der Mehrzahl der User, schnell ihr Land zu wählen, ohne sich mit der weiteren Auswahl beschäftigen zu müssen oder von der Maus zur Tastatur zu wechseln.
2. Der Rest der Länder in zum Beispiel alphabetischer Reihenfolge ohne die Top-Begriffe. Auch wenn dieser Teil wieder die weiter oben genannten Probleme aufwerfen kann, so hat man doch die überwiegende Mehrzahl der User benutzerfreundlich bedient. Eine zusätzliche Kategorisierung dieses Rest-Teils verwirrt den Benutzer meiner Erfahrung nach eher.

Technisch lässt sich diese Abgrenzung wie bei kategorisierten Listen über Cascading Style Sheets realisieren.

Eine Alternative zur klassischen DropDown-Liste:

Gerade bei dynamisch generierten Seiten bietet sich eine komfortable Alternative zur herkömmlichen DropDown-Liste an: Ein Suchfeld, dass schon während der Eingabe den Ländernamen automatisch vervollständigt. Seit Google AJAX als technische Grundlage für sein Google Suggest Feature verwendet, hat sich dieses Verfahren zu einer der Standard-Webtechniken entwickelt. Auf unser Beispiel gemünzt, könnte ein AJAX-unterstütztes Suchfeld etwa so aussehen:

Dabei wird mit jedem Tastendruck ein Javascript-Event ausgelöst. Dieser wiederum löst per HTTP-Request an den Server ein Skript zum Beispiel zur Abfrage einer Datenbanktabelle mit Ländern aus. Dabei wird die Abfrage so gestaltet, dass die Serverantwort nur die auf die Suche zutreffenden Ergebnisdatensätze enthält. Die Nachteile dabei sind der zusätzliche Datenbank-Traffic, der sich vor allem bei kleinen und auf Shared Hostern untergebrachten Websites auswirkt und der erhöhte Programmieraufwand. Im Rahmen eines Kontaktformulars verhindert man durch diese Variante allerdings, dass der User zur Auswahl des entsprechenden Landes überhaupt zur Maus wechseln muss. Im Idealfall „tabbt“ sich der Benutzer also durch das Formular und füllt  – zum Beispiel bei der Postleitzahl, dem Ort und dem Land AJAX-unterstützt – die Eingabefelder aus. Wer nicht auf seine DropDown-Liste verzichten möchte, kann die <option>-Tags des <select>-Elements auch AJAX-basiert füllen.

Fazit:

Aus den beschriebenen Möglichkeiten bietet sich meiner Meinung nach als bester Kompromiss zwischen Aufwand bei der Realisierung und Usability die TopWords-Liste an. Sie ermöglicht einen schnellen, komfortablen Zugriff für die überwiegende Mehrzahl der User und ist im Vergleich zur AJAX-basierten Lösung auch ohne serverseitige Verarbeitung der dargestellten Daten einsetzbar. ™