Die Grundlagen ermöglichen einen Einblick in den Hintergrund des Projekts. Die vorhandene Basis findet sich in der Beschreibung der Ausgangslage des Kolibri wieder. Weiter setzt es den Grundstein für das Verständnis und Anwendung der Auswahlkomponente.

2.1 Ausgangslage

Die FHNW betreibt und verwaltet das Toolkit Kolibri. Dabei wird das Projekt unter anderem durch Resultate aus Web-Projekten der Hochschule für Technik schrittweise weiterentwickelt. Interessierte Entwickler aus aller Welt können die Open-Source Codebasis ohne Probleme verwenden. Die Implementation der standardisierten Komponenten ist in reinem JavaScript umgesetzt. Daher sind keine komplexen Management-Systeme wie npm von Nöten. Die intuitive Zugänglichkeit von Kolibri ermöglicht einen schnellen Einstieg ohne lange Einarbeitungszeiten oder komplexe Tutorials. Auf der anderen Seite sind jedoch noch nicht alle Interaktionen vollständig erhältlich.

Um die Auswahlkomponente einfacher einbinden zu können, wurde aus der Github-Codebasis von Kolibri (Appendix B) vom 18.09.2023 ein Fork erstellt. Dieser Stand enthält unter anderem bereits die SimpleInput Komponenten, welche alle Felder des input Tags verwalten kann. Noch nicht eingebundene Komponenten früherer Projekte sind unter dem Ordner contrib bereitgestellt.

Im Design Tool Figma existiert bereits ein Designsystem, als auch in das Toolkit eingebundene UI-Komponenten. Ein Satz von Icons ist bereits vorhanden, welcher bei Bedarf erweitert werden kann. Die bereits vorhandenen Elemente besitzen einen Komponenten-Aufbau. Dies erleichtert die Anwendung der Bausteine in der Entwicklung weiterer Elemente.

Ein gemeinsames Verständnis der Auswahl-Komponente und deren Herausforderung stellt eine wichtige Basis dar. Um diese Übereinstimmung zu schaffen, folgt die detaillierte Beschreibung in nachfolgenden Kapitel.

2.2 Auswahlkomponente

Folgende Abschnitte beschreiben das gemeinsame Verständnis einer Auswahlkomponente, als auch die Wichtigkeit in der Anwendung, im besonderen mit grossen Datenmengen. Es zeigt die Herausforderungen und erste Lösungsgedanken auf.

2.2.1 Definition und Bedeutung

Eine Auswahlkomponente, oft ein integraler Bestandteil moderner Benutzeroberflächen, ist ein interaktives Element in der Softwareentwicklung. Es ermöglicht den Benutzern, eine oder mehrere Optionen aus einer vordefinierten Liste auszuwählen. Ihre Anwendung reicht von einfachen Dropdown-Menüs bis hin zu komplexen Such- und Filtermechanismen. In der wissenschaftlichen Terminologie wird eine Auswahlkomponente oft als eine Schnittstelle definiert. Diese ermöglicht eine effektive Interaktion zwischen dem Benutzer und den verfügbaren Datenoptionen.

2.2.2 Wichtigkeit bei umfangreichen Datensätzen

(UX PICKLE, 2024) Die Bedeutung von Auswahlkomponenten nimmt zu, insbesondere in Szenarien, in denen Benutzer aus einer grossen Menge von Daten auswählen müssen. Ein klassisches Beispiel hierfür ist die Auswahl eines Wohnsitzlandes aus allen Ländern der Welt. In solchen Fällen muss die Auswahlkomponente nicht nur eine umfassende Liste der verfügbaren Optionen bereitstellen, sondern auch eine benutzerfreundliche Schnittstelle, um die Suche und Auswahl zu erleichtern.

2.2.3 Herausforderungen und Lösungsansätze

(Maurer Spence, 2024) Die Hauptherausforderung bei der Gestaltung einer Auswahlkomponente für grosse Datensätze liegt in der Bereitstellung einer nahtlosen und intuitiven Benutzererfahrung. Zu viele Optionen können überfordernd wirken und die Benutzerfreundlichkeit beeinträchtigen. Um dies zu bewältigen, kommen oft fortschrittliche Techniken wie inkrementelle Suche, Filterung und Kategorisierung zum Einsatz.

Inkrementelle Suchmechanismen ermöglichen es den Benutzern, ihre Auswahl durch Eingabe von Suchbegriffen zu verfeinern, wodurch die Liste der Optionen dynamisch gefiltert wird. Dies ist besonders effektiv, wenn die Auswahl aus einer umfangreichen Liste – wie der aller Länder der Welt – erfolgen soll. Durch die Filterung nach bestimmten Kriterien, wie etwa dem Kontinent, können Anwender die Auswahl effizienter eingrenzen.

2.2.4 Fazit

Zusammenfassend lässt sich sagen, dass Auswahlkomponenten eine wichtige Rolle in der Gestaltung benutzerzentrierter Software spielen, insbesondere wenn es um die Navigation und Auswahl aus umfangreichen Datensätzen geht. Die Herausforderung besteht darin, eine Balance zwischen der Bereitstellung aller notwendigen Informationen und der Gewährleistung einer intuitiven, effizienten Benutzeroberfläche zu finden. Innovative Ansätze in der UI/UX-Designphilosophie, wie die Implementierung der inkrementellen Suche und intelligenten Filtermechanismen, sind dabei unerlässlich, um eine optimale Benutzererfahrung zu ermöglichen. Zusätzlich kann das Analysieren der Fehler von Konkurrenzprodukten hilfreich sein.

2.3 Konkurrenzanalyse und Positionierung

Im Rahmen der Entwicklung der Kolibri Dropdown-Komponente ist die Untersuchung der bestehenden Lösungen ein wichtiger Bestandteil. Dadurch zeigen sich Stärken und Schwächen gängiger Auswahlkomponenten auf. Diese Analyse dient als Grundlage für die Gestaltung einer benutzerfreundlichen, technisch effizienten und unabhängigen Komponente. Diese ist speziell auf die Bedürfnisse Endnutzer zugeschnitten.

2.3.1 Vergleich bestehender Lösungen

Standard-HTML-Elemente wie <select> und <datalist> bieten zwar grundlegende Funktionalitäten, sind jedoch in Bezug auf Designflexibilität und Benutzerfreundlichkeit limitiert. Bibliotheksabhängige Lösungen wie Bootstrap, React und Vue.js erweitern zwar die Möglichkeiten, bringen aber zusätzliche Abhängigkeiten und Einarbeitungsaufwand mit sich. jQuery-basierte Lösungen bieten eine verbesserte Benutzererfahrung, sind jedoch ebenfalls von externen Bibliotheken abhängig.

() Das select-Tag von HTML bietet nur sehr begrenzte Möglichkeiten in der Gestaltung bzw. Darstellung der Auswahl-Elemente. Grosse Datenmengen benutzerfreundlich darzustellen stellt sich als sehr schwierig dar. Das HTML-Element wird von allen Browsern unterstützt und nimmt nur vorgegebene Werte an.

() Eine HTML-datalist ist an ein Input-Feld gebunden und bietet ebenfalls fast kein Spielraum für ein eigenes Design. Dabei können eigene Werte eingegeben werden, was nicht in allen Fällen erwünscht ist. Ein Vorteil ist, die Liste filtert bzw. passt sich bei einer Eingabe automatisch an.

2.3.2 Vergleichende Übersicht der Dropdown-Komponenten

Tabelle 2.1 - Vergleich der Konkurrenz Produkte

2.3.3 Spezifische Herausforderungen und Einschränkungen

Diese Lösungen stellen Entwickler oft vor Herausforderungen hinsichtlich der Integration, Anpassungsfähigkeit und Performance. Insbesondere bei grossen Datenmengen und spezifischen Designanforderungen offenbaren sich die Grenzen herkömmlicher Dropdown-Elemente.

2.3.4 Eigene Entwicklung: Kolibri Dropdown-Komponente

Die Kolibri Dropdown-Komponente soll unabhängig von externen Bibliotheken funktionieren. Diese Komponente zeichnet sich durch eine hohe Flexibilität, einfache Integration und benutzerfreundliche Interaktion aus. Sie folgt den Design- und Codierungsstandards von Kolibri und sie soll einfach in verschiedene Webprojekte integrierbar sein.

2.3.5 Vorteile der Kolibri Dropdown-Komponente

• Unabhängigkeit von Drittbibliotheken: Die neue Komponente benötigt keine externen Abhängigkeiten, was die Sicherheit und Stabilität erhöht.

• Benutzerfreundlichkeit und Zugänglichkeit: Die Komponente entwickelt sich mit Fokus auf eine intuitive und barrierefreie Benutzererfahrung.

• Anpassungsfähigkeit und Erweiterbarkeit: Sie lässt sich leicht an unterschiedliche Designrichtlinien und Anforderungen anpassen.

• Technische Effizienz: Durch die Vermeidung unnötiger Bibliotheken wird eine hohe Performance erreicht.

2.3.5 Fazit

Die Kolibri Dropdown-Komponente soll ein Fortschritt in der Entwicklung von benutzerzentrierten, technisch effizienten Webanwendungen sein. Als Reaktion auf die Einschränkungen bestehender Lösungen entsteht diese Selektionskomponente und erweitert das Kolibri Toolkit um eine wichtige und flexible Funktionalität.

Die meisten anderen Konkurrenz-Auswahlkomponenten benötigen möglicherweise eine längere Einarbeitungszeit, da eine Dokumentation durchgelesen werden muss oder die Anwendung sehr komplex sein kann. Weiter haben viele Library-Lösungen Abhängigkeiten zu weiteren Komponenten oder externen Ressourcen wie einem Package Manager. Die Verwendung von Bibliotheken hat zur Folge, dass Vertrauen auf die Sicherheit und Verfügbarkeit der Ressourcen erforderlich ist. Anderenfalls ist mit Abstrichen zu rechnen. Einige Konkurrenzprodukte erfordern viele Codezeilen, um die gewünschte Funktionalität zu erreichen. Häufig ist die Definition spezifischer Konfigurationen notwendig. Diese Kenntnisse unterstützen die Recherche nach Umsetzungsmöglichkeiten.