# 1 Einleitung

Dieses Projekt setzt sich mit der Herausforderung auseinander, intuitive und zugleich technisch fortschrittliche Web-Komponenten zu entwickeln. Die Auswahlkomponente ist ein Beispiel dafür, wie komplexe Benutzeranforderungen mit einfacher, aber leistungsfähiger Technologie erfüllt werden kann. Sie zeigt auf, wie das Kolibri Toolkit nicht nur als Sammlung von Tools, sondern als integriertes System zur Verbesserung der Webentwicklung beiträgt.



## 1.1 Problemstellung

Ein zentrales Problem, das in diesem Projekt adressiert wird, ist die Unzulänglichkeit der standardisierten Auswahlkomponenten im Web – insbesondere die `select` und `datalist` Elemente. Diese weisen Mängel in Design, Integration in einheitliche Datenmodelle, Konsistenz im Interaktionsdesign und Benutzereffizienz auf. Beispielsweise wenn grosse Datenmengen dargestellt werden müssen, kann die unzureichende Gestaltung von `select` Elementen zu einer verwirrenden Benutzererfahrung führen. Das nachfolgende Kapitel 1.2 basiert auf den hier genannten Problemen.



## 1.2 Ziel

Das primäre Ziel dieser Arbeit ist die Gestaltung und Implementierung einer Dropdown-Auswahlkomponente. Diese ermöglicht eine effiziente und ansprechende Auswahl aus mehreren vorgegebenen Optionen. Einerseits umfasst dieses Projekt die Synchronisation von Design und Implementation. Weiter beinhaltet die Komponente die Integration in das Kolibri-Designsystem. Die Auswertung von Benutzertests hilft beim Visualisieren der Inhalte sowie dem Interaktionsdesign. Automatisierte Umsetzungstests begünstigen einen fehlerfreien Code. Ebenfalls beinhaltet die Erstellung dieser Komponente die Anbindung an Kolibri-Modelle, -Controller und -Projektoren sowie die Durchführung von Usability-Tests. Spezifische Kriterien für die Bewertung des Erfolgs der Komponente, einschliesslich Benutzerzufriedenheit und Integrationseffizienz, nehmen ihren Platz ein. Dabei gilt zu beachten, dass sich die Ziele nicht ausserhalb des definierten Projekts bewegen.



## 1.3 Out of Scope

Dieses Projekt konzentriert sich ausschliesslich auf die Entwicklung der Auswahlkomponente und deren Integration in das bestehende Kolibri-Framework. Aspekte ausserhalb dieses Rahmens, wie die Überarbeitung anderer UI-Komponenten oder die Erweiterung der Kern-Codebasis von Kolibri, fallen nicht in den Umfang dieser Arbeit. Dadurch wird sichergestellt, dass die Arbeit fokussiert und zielgerichtet bleibt.

Der Fokus für das Projekt liegt spezifisch auf der Entwicklung einer Auswahlkomponente für Länder. Dies bedeutet, dass andere potenzielle Anwendungsbereiche wie die Integration von Datums- oder Jahreszahl-Auswahl keine Berücksichtigung finden. Dieser begrenzte Fokus ermöglicht, eine massgeschneiderte Lösung zu entwickeln. Diese ist speziell auf die Anforderungen und Herausforderungen der Länderauswahl zugeschnitten. Dadurch gelingt die Sicherstellung, dass die vorhandenen Ressourcen gezielt für die Optimierung der Benutzererfahrung und Funktionalität im Kontext der Länderauswahl einsetzbar sind.&#x20;



## 1.4 Leitfaden

Dieser Bericht gliedert sich in die Teile Recherche, Design und Implementation. Das Konzeptionelle findet sich in den [Kapiteln 2](2-grundlagen) bis [3.2](3-weg-zur-auswahlkomponente/3.2-prototyping) wieder. Der [Abschnitt 3.3](3-weg-zur-auswahlkomponente/3.3-testing) prüft das erarbeitete Konzept. Dieses findet in nachfolgendem [Unterkapitel 3.4](3-weg-zur-auswahlkomponente/3.4-implementation) seine Umsetzung. Das Resultat des Designs als auch der Implementation ist unter der Nummer [4 Länder-Auswahlkomponente](4-lander-auswahlkomponente) beschrieben. [Kapitel 5](5-diskussion) bewertet das Produkt und die erhaltenen Erkenntnisse.

