1. Einleitung

1.1 Problemstellung

Im Web existieren diverse Möglichkeiten zur Erstellung eines Auswahl-Inputs mit vorgegebenen Werten. Die HTML-Elemente bieten über die verschiedenen Browser keine konsistente Darstellung und Interaktion an. Dazu sind sie nicht schön anzusehen und nur geringfügig anpassbar. Die Werte sind begrenzt auf Text und Unicode-Symbole. Die Komponente ist nicht effizient bedienbar – besonders bei einer grossen Menge an Werten.

Als Alternative zu den Basiselementen existieren unzählige Bibliotheken, welche solche Eingabemöglichkeiten unterstützen. Diese besitzen externe Abhängigkeiten, welche das eigene Projekt unnötig aufblasen. Zudem benötigen viele dieser Libraries eine längere Einarbeitungszeit, um die Funktionalitäten verstehen und anwenden zu können.

Das Vorgängerprojekt Länderauswahl-Komponente deckt die Probleme ab, ist aber nur auf die Auswahl eines Landes zugeschnitten. Eine Anwendung dieser Komponente mit anderen Inhalten kann zu unerwünschtem Verhalten führen. Die oben genannten Probleme dienen als Basis für das folgende Kapitel.

1.2 Ziel

Die neue Komponente SelectComponent zielt darauf ab, die Auswahl eines Wertes aus einer begrenzten, vorgegebenen Menge zu ermöglichen. Dazu finden die Generalisierung und der Ausbau der vorangegangenen Länderauswahl statt. Die Eingabe soll weiterhin effizient bleiben und sich konsistent über alle Browser zeigen. Dabei liegt der Fokus auf Browsern von Desktop-Computern bzw. Laptops. Die Komponente soll sich einfach anpassen lassen. Als Werte sind nebst Texten auch Bilder wünschenswert. Die Qualität ist auf dem Kolibri-Standard zu halten und durch Tests zu beweisen. User-Tests mit Programmierern wie auch Endanwendern beweisen die gute Usability. Automatisierte Komponententests stellen die Korrektheit der Implementation sicher. Bei der Umsetzung sollen die Design-Patterns des Kolibri ihre Anwendung finden. Dabei sollen das Design und die Interaktion mit dem Toolkit synchronisiert sein. Hierbei ist zu beachten, die Ziele nicht ausserhalb des Projekts zu definieren.

1.3 Out of Scope

Dieses Projekt bezieht sich auf die Entwicklung einer Auswahlkomponente für Nutzer ohne Seheinschränkungen. Daher spielt die Accessibility nur eine begrenzte Rolle. Screenreader sind nicht zu beachten, da dies zu umfangreich für diese Arbeit ist. Die effiziente Anzeige von übergrossen Datenmengen mit mehr als 10'000 Werten ist nicht verlangt. Die Eingabe eines eigenen Wertes in die neue Auswahlkomponente ist ebenfalls ausserhalb der Anforderungen. Für die generalisierte Komponente reicht es, wenn die Auswahl eines einzelnen Wertes möglich ist. Die Auswahl mehrerer Werte im selben Eingabeelement ist nicht gefordert. Die Komponente ist nicht speziell auf Mobile-Geräte auszurichten. Eine Undo- wie auch eine Redo-Funktion der ausgewählten Werte ist ausserhalb des geforderten Rahmens. Ein Bestandteil dieser Arbeit ist das Erweitern des SimpleInputs um ein Select und eine Datalist. Damit der Fokus des Projekts auf der generalisierten Auswahlkomponente bleibt, sind keine Änderungen ausserhalb der oben genannten Ziele gefordert. Anpassungen der Kern-Codebasis gehören nicht in den Rahmen dieses Projekts. Die Eingrenzung der Anforderungen stellt sicher, dass die Ressourcen auf das Ziel fokussiert bleiben.

1.4 Leitfaden

Dieser Bericht gliedert sich in die Teile Hintergrund, existierende und neue Komponenten sowie die Diskussion. Jedes Kapitel baut auf dem Vorherigen auf und führt den Leser Schritt für Schritt durch die Entwicklung und Optimierung der neuen Auswahlkomponente.

Im Kapitel Hintergrund (2) ist die Ausgangslage (2.1) des Kolibri-Toolkits und des Projekts erläutert. Es folgt eine Erklärung der Master-Detail-View (2.2). Nachfolgend sind die verschiedenen Zustände (2.3), die eine Auswahlkomponente besitzen kann, aufgeführt. Eine Beschreibung der Browser und deren Rendering-Engines (2.4) ist ebenfalls enthalten. Der Rendering-Prozess einer HTML-Seite sowie die wichtigsten Browser-Implementationen sind ebenfalls auf dem Plan.

Das Kapitel existierende Komponenten (3) vergleicht die HTML-Elemente Datalist und Select (3.1). Die Nutzung und Unterschiede der verschiedenen Elemente sind hier ebenfalls beschrieben. Dabei hebt es die Browser-Inkonsistenzen (3.2) hervor. Sie führen zu unterschiedlichen UI-Erfahrungen. Die Länderauswahl-Komponente (3.3) aus der Vorarbeit ist nur auf die Auswahl eines Landes zugeschnitten. Mögliche Anwendungsfälle (3.4) der existierenden Komponenten zeigen die dabei entstehenden Probleme auf.

Eine detaillierte Beschreibung der neuen Komponente findet sich im gleichnamigen Kapitel 4. Das Design (4.1) basiert auf dem Kolibri-Designsystem. Beim Visualisieren und Testen des neuen Designs kommen Figma-Prototypen zum Einsatz. Die Implementation der Zustände optimiert die Benutzerführung für Maus- und Tastaturbenutzer. Prototyping und Benutzerfeedback tragen in einem iterativen Prozess zur Verbesserung bei. Das Implementationsresultat visualisiert und beschreibt die neue Komponente in diversen Beispielen. Im Abschnitt Interaktionen (4.2) sind Regeln für die Maus- und Tastaturinteraktion festgelegt. Für einen stabilen und verständlichen Code sorgt die Einhaltung diverser Prinzipien und Regeln (4.3). Der Einsatz von Patterns (4.4) wie Null-Object, Projector und Decorator strukturiert die Implementation. Die Patterns erhöhen die Wartbarkeit des Codes. Der Dropdown-Container (4.5) lässt sich auf verschiedene Weisen umsetzen. Das Kapitel Performance (4.6) beschreibt Optimierungen zur Verbesserung der Ladezeit sowie des Leistungspotenzials der neuen Auswahlkomponente. Das Testing-Kapitel (4.7) dokumentiert die Durchführung sowie die Auswertung manueller, automatisierter und Usability-Tests. Schliesslich fasst das Fazit der neuen Komponente (4.8) die wichtigsten Erkenntnisse zusammen.

Abschliessend bietet die Diskussion (5) einen Überblick über die Bedeutung der Erkenntnisse für die Entwicklung. Zudem beschreiben die Future Features (5.1) Ideen für eine Weiterentwicklung sowie Verbesserungsvorschläge.