Wie Katz und Maus: Auswahlmenüs und Scrollmäuse
von Simone Brandt
Eine Scrollmaus ist nicht nur modern, sondern auch praktisch. Manchmal aber, etwa auf den Seiten eines Webshops, will das verflixte Ding plötzlich nicht mehr scrollen. So scheint es jedenfalls. Simone Brandt beleuchtet ein noch weitgehend unbekanntes Usability-Problem, das sowohl für den Betreiber als auch für den Kunden sehr ärgerlich sein kann.
Das Problem: Nach Auswählen eines Eintrags im Auswahlmenü bleibt der Fokus auf dem Element liegen. Beim Bewegen des Mausrads wird dann versehentlich ein anderer Eintrag des Menüs ausgewählt.
Am Ende eines Bestellvorgangs ist die Überraschung groß, wenn sich die Zahlungsweise von "Rechnung" in "Lastschrift" verwandelt hat und statt einem Kühlschrank gleich zehn im Warenkorb liegen.
Insbesondere beim Internet Explorer in Kombination mit den Windows-Standardmaustreibern tritt dieses unbeabsichtigte Scrollen in Auswahlmenüs häufig auf. Selbst wenn das Problem dem Besucher der Website bekannt sein sollte, ist es nicht im Sinne der Usability, wenn er nach jeder Auswahl erst in das Browserfenster klicken muss, um den ungewollten Fokus wieder loszuwerden.
Beispiel 1
Wählen Sie zum Beispiel "Rechnung" aus, und scrollen Sie mit dem Mausrad nach unten (eigentlich wollten Sie ja nur die Seite herunterscrollen). Vorausgesetzt Sie surfen mit dem Internet Explorer und haben keinen speziellen Maustreiber installiert, wird anstatt "Rechnung" nun "Nachnahme" selektiert.
Beispiel 2
Mit ein wenig Javascript lässt sich der unerwünschte Effekt eindämmen. Wenn Sie nun wieder "Rechnung" auswählen, verliert das Element durch den onChange Eventhandler seinen Fokus, und "normales" Scrollen der Seite ist wieder möglich.
Ganz ausschließen lässt sich das unbeabsichtigte Scrollen allein mit dieser Methode jedoch nicht. Wenn der Besucher der Website zunächst das Auswahlmenü anklickt (etwa um zu sehen, welche Optionen zur Verfügung stehen) und denselben Eintrag wählt, der schon vorher selektiert war, dann greift der onChange Eventhandler hier nicht, da ja nichts geändert wurde.
Notieren Sie für dieses Beispiel im einleitenden <select> Tag: onChange="window.focus()"
Beispiel 3
Um zu gewährleisten, dass der Eventhandler onChange tatsächlich greift, kann zusätzlich eine weitere Option in das Auswahlmenü aufgenommen werden, zum Beispiel "Bitte wählen Sie die Zahlungsweise" (Beispiel 3a), die eine Auswahl seitens des Besuchers obligatorisch macht.
Der Nachteil dieser Methode ist natürlich, dass dem Besucher ein weiterer Klick abverlangt wird, der unter Umständen unnötig gewesen wäre.
Wenn Sie ein Auswahlmenü verwenden, in dem nur die Anzahl der Artikel (Beispiel 3b) ausgewählt werden soll, kann dies, etwa in einem Shopsystem, schnell zu lästiger Klickerei ausarten. Es ist für den Besucher der Website nicht nachvollziehbar warum er jedes Mal eine Artikelanzahl auswählen muss und die Mindestanzahl von 1 nicht vorselektiert ist.
Im Übrigen ist es bei einem Auswahlmenü, das allein die Anzahl der Artikel enthält, eher unwahrscheinlich, dass der Besucher darauf klickt, ohne die Anzahl tatsächlich ändern zu wollen. Denn im Gegensatz zur Zahlungsoption verbergen sich dahinter erfahrungsgemäß keine potenziell unbekannten Optionen. Deshalb sollte für eine Auswahl der Artikelanzahl die unter Beispiel 2 beschriebene Methode ausreichen.
3a: Auswahl Zahlungsweise
3b: Auswahl Artikelanzahl
Beispiel 4
Sie kommen ohne Javascript aus, wenn Sie im einleitenden <select> Tag eine Größe von mindestens 2 angeben, um eine mehrzeilige Auswahlliste zu erzeugen. Das Scrollen mittels Mausrad hat keine Auswirkung auf die Auswahl der Einträge. Allerdings bleibt der Fokus trotzdem auf der Auswahlliste liegen, weshalb auch hier in das Browserfenster geklickt werden muss, um die Seite "normal" weiterscrollen zu können. Außerdem verbrauchen diese mehrzeiligen Auswahlmenüs mehr Platz.
Darüber hinaus sind sie weniger intuitiv zu bedienen, da hier nicht ausschließlich die gewählte Option zu sehen ist, wie man es von einzeiligen Auswahlmenüs gewohnt ist. Sollte der Besucher, nachdem er bereits eine Auswahl getroffen hat, bei Beispiel 4a gar auf die Idee kommen die Scrollbar der Auswahlliste zu betätigen, ist der gewählte Eintrag unter Umständen überhaupt nicht mehr zu sehen, was leicht zu weiterer Verunsicherung führen kann.
4a: <select name="select_41" size="2">
4b: <select name="select_42" size="3">
Wie viele potenzielle Kunden werden ihren Bestellvorgang wohl vorzeitig abbrechen, wenn sie auf der Bestätigungsseite Einträge finden, von denen sie nicht wissen, wo sie herkommen?
Der Versuch diese Probleme einzudämmen scheint deshalb durchaus angezeigt, besonders wenn Ihre Website in großem Umfang von Auswahlmenüs Gebrauch macht. Eine Patentlösung gibt es jedoch nicht. Die optimale Lösung hängt von der Art der verwendeten Auswahlmenüs ab, davon, ob sich hinter dem Auswahlmenü für den Besucher Bekanntes oder Unbekanntes verbirgt und nicht zuletzt davon, wie viel Platz auf Ihrer Website für die Auswahlmenüs zur Verfügung steht.
Verwandte Artikel
(No Ratings Yet)
