# 3.3 Testing ## 3.3 Testing 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.

Abbildung 3.14 - Schritt für Schritt Ablauf der Testperson 1

Abbildung 3.15 - Schritt für Schritt Ablauf der Testperson 2

Abbildung 3.16 - Schritt für Schritt Ablauf der Testperson 3

### 3.3.1 Methodik 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. ### 3.3.2 Ergebnisse und Feedback Folgende Rückmeldungen unterstützen die weitere Entwicklung der Komponente enorm. Die unterschiedlichen Sichtweisen beheben den eigenen schwarzen Fleck. #### *3.3.2.1 Testperson 1: Robert* * *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. #### *3.3.2.2 Testperson 2: Sara* * *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. #### *3.3.2.3 Testperson 3: Nick* * *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. ### 3.3.3 Zusammenfassung des Feedbacks 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. ### 3.3.4 Schlussfolgerungen 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. ### 3.3.5 Testing mit den Kunden Die Kunden testen die gleichen Papierprototypen wie die Testpersonen aus [Kapitel 3.3.1](#id-3.3.1-methodik). 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. #### *3.3.5.1 Feedback und Anpassungen* * *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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://kolibri-selection-component.gitbook.io/kolibri-auswahlkomponente/3-weg-zur-auswahlkomponente/3.3-testing.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.