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

<div><figure><img src="https://1522838658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNvo6hdRzjxG7GD0plKny%2Fuploads%2FcFLnAd9BbyZvZuUSXOlD%2Ftestp1.png?alt=media&#x26;token=026a456d-569a-431f-825c-f7db7e0792c5" alt=""><figcaption><p>Abbildung 3.14 - Schritt für Schritt Ablauf der Testperson 1</p></figcaption></figure> <figure><img src="https://1522838658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNvo6hdRzjxG7GD0plKny%2Fuploads%2FSb9aXNuKB88jidcLTIcu%2Ftestp2.png?alt=media&#x26;token=45d64fe0-a3c5-445e-b6a1-49fe8fd99b04" alt=""><figcaption><p>Abbildung 3.15 - Schritt für Schritt Ablauf der Testperson 2</p></figcaption></figure> <figure><img src="https://1522838658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNvo6hdRzjxG7GD0plKny%2Fuploads%2FtSipBQ6pioYAyEV1vD5q%2Ftestp3.png?alt=media&#x26;token=b0647d6b-383b-4a0a-accf-b5913410212b" alt=""><figcaption><p>Abbildung 3.16 - Schritt für Schritt Ablauf der Testperson 3</p></figcaption></figure></div>



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

