Um Designvarianten zu bewerten, ist die Durchführung von User-Tests unerlässlich. Ein Teil der Nutzerbefragungen basiert auf Papierprototypen. Die Tests zielen darauf ab, die Benutzerfreundlichkeit, Effizienz und intuitive Bedienbarkeit der verschiedenen Prototypen zu ermitteln. Die Evaluation der drei Prototypen – L (Abbildung 3.14), M (Abbildung 3.15) und R (Abbildung 3.16) – findet mit unterschiedlichen Testpersonen statt.
Um die Prototypen zu testen, sind die oben erwähnten Testpersonen mit abweichenden Profilen – Robert (junger Alltagsbenutzer, Digital-Native), Sara (semi aufmerksam, nicht schnell auf der Tastatur) und Nick (Alltagsbenutzer/ Student) – ausgewählt. Jeder der drei Nutzer führt eine Reihe von Aktionen durch, wie etwa das Auswählen eines Landes. Daraus resultiert jeweils Feedback mit ihren Erfahrungen.
Folgende Rückmeldungen unterstützen die weitere Entwicklung der Komponente enorm. Die unterschiedlichen Sichtweisen beheben den eigenen schwarzen Fleck.
Prototyp L: Als effizienteste Lösung bewertet, da dieser verschiedene Auswahlmöglichkeiten bietet und eine schnelle Navigation ermöglicht.
Prototyp M: Verwirrung über die Notwendigkeit, Kontinente zuerst auszuwählen; unklar, ob Länderkürzel eingegeben werden können.
Prototyp R: Vorauswahl nicht intuitiv; Anwender wollte ursprüngliche Auswahl bestätigen, nicht ändern.
Prototyp L: Klare und einfache Bedienung, Tastaturbedienung nicht notwendig.
Prototyp M: Einfache Bedienung, aber Tastaturbedienung nicht erforderlich.
Prototyp R: Klar und einfach zu bedienen, keine Tastaturbedienung erforderlich.
Prototyp L: Klare und direkte Auswahlmöglichkeit, schnelle und intuitive Bedienung.
Prototyp M: Negatives Feedback wegen zu vieler Zwischenschritte und aufgezwungener Auswahl.
Prototyp R: Anfängliche Verwirrung, Vorauswahl sollte klarer sein.
Das allgemeine Feedback betont die Wichtigkeit einer effizienten und benutzerfreundlichen Gestaltung der Dropdown-Komponente. Die Testpersonen bevorzugen Ansätze, die eine direkte und schnelle Auswahl ermöglichen, ohne unnötige Zwischenschritte oder Verwirrung. Prototyp L erhält insgesamt als auch einzeln die beste Bewertung in der Effizienz und Benutzerfreundlichkeit.
Die Ergebnisse zeigen, dass eine optimale Dropdown-Komponente eine Balance zwischen Effizienz, Einfachheit und intuitiver Bedienung bieten muss. Die Möglichkeit, direkt und ohne Umwege ein Land auszuwählen, löst ein positives Gefühl aus. Dies unterstreicht die Bedeutung einer gut durchdachten Benutzeroberfläche, die die Bedürfnisse der Endnutzer in den Vordergrund stellt. Das Finale Design muss diese Erkenntnisse berücksichtigen, um eine optimale Benutzererfahrung zu gewährleisten.
Die Kunden testen die gleichen Papierprototypen wie die Testpersonen aus Kapitel 3.3.1. Sie bewerten die Benutzerinteraktion und die technische Umsetzung, um spezifisches Feedback zur Weiterentwicklung der Komponente zu geben. Erfahrungen und Fachkenntnisse sind in die Bewertung mit eingeflossen.
Autovervollständigung: Die Dropdown-Komponente soll nicht sofort bei Fokussierung öffnen, sondern erst bei der Eingabe von Buchstaben. Indem das spätere Öffnen die Übersichtlichkeit erhöht und gleichzeitig die Auswahl zu treffen beschleunigt, könnte sich die Benutzererfahrung verbessern.
Tastaturinteraktion: Die Pfeiltasten zur Navigation in der Dropdown-Liste nutzen. Beispielsweise könnte die Pfeil-nach-unten-Taste die Liste öffnen, um eine flüssigere Bedienung zu ermöglichen.
Browser-Autocomplete-Standard: Standards wie die Browser-Autocomplete-Funktion können genutzt werden, um die Bedienung intuitiver zu gestalten.
Leertaste als Öffnungsmechanismus: Die Integration der Leertaste als zusätzliche Option zum Öffnen der Komponente, um die Bedienbarkeit zu erleichtern.
Fokus- und Schliessverhalten: Den Fokus innerhalb der Komponente auch bei Mouse-Out zu behalten, aber bei einem Klick ausserhalb zu schliessen, um eine konsistente Benutzererfahrung zu gewährleisten.
Backspace für Korrekturen: Die Möglichkeit, mit Backspace eine Auswahl rückgängig zu machen.
Weitere technische Empfehlungen:
Wo möglich const
verwenden und die Implementierung des vorhandenen DebounceInput
für die Sucheingaben nutzen.