Das Kolibri Web Ui Toolkit ist eine Sammlung von nachhaltig und hochwertig programmierten Abstraktionen in JavaScript. In diesem Projekt wurde das Toolkit mit einer einigen nützlichen Auswahlkomponente ergänzt.
Die neue Dropdown-Komponente zielt darauf ab, eine benutzerfreundliche und konsistente Auswahlmöglichkeit über alle modernen Browser hinweg zu bieten. Durch ein ansprechendes Design und die Unterstützung von Maus- und Tastaturbedienung soll eine optimale Benutzererfahrung erreicht werden. Die Komponente wurde entwickelt, um die Auswahl aus grossen Datenmengen zu erleichtern, beispielsweise durch die Möglichkeit, mit einem Klick ganze Kategorien oder Jahrzehnte auszuwählen, was insbesondere bei umfangreichen Listen wie Länder- oder Jahresauswahlen nützlich ist.
Die Entwicklung der neuen Dropdown-Komponente basiert auf dem Kolibri-Designsystem und wurde unabhängig von externen Bibliotheken implementiert. Die existierenden HTML-Auswahlkomponenten, wie select und datalist, boten keine zufriedenstellende Lösung für die Anforderungen an Flexibilität und Benutzerfreundlichkeit. Bestehende Komponenten wiesen zudem Inkonsistenzen in der Darstellung und Interaktion auf verschiedenen Plattformen auf, was die Notwendigkeit einer neuen, optimierten Lösung verdeutlichte.
Die Umsetzung der neuen Dropdown-Komponente erfolgte unter Anwendung moderner Webtechnologien und Designprinzipien. Die Integration von Elementen wie Farbpalette, Layout und Interaktionsdesign, optimiert durch Figma-Prototypen und Benutzerfeedback, führte zu einer konsistenten und ansprechenden Benutzeroberfläche. Die Komponente zeigt sich als flexibel und erweiterbar, was zukünftige Anpassungen und Erweiterungen erleichtert. Die durchgeführten Performance-Optimierungen und Benutzertests bestätigen die hohe Qualität und Benutzerfreundlichkeit der Komponente, die nun bereit ist, in verschiedenen Anwendungsbereichen eingesetzt zu werden.
| Projekttyp: | Informatik Projekt 6 (IP6) |
| Projektdauer: | 19.02.2024 bis 16.08.2024 |
| Teamgrösse: | 2 Personen |
| Aufwand: | 360h pro Person |
University of Applied Sciences and Arts Northwestern Switzerland
Institute of Mobile and Distributed Systems
Prof. Dierk König
dierk.koenig@fhnw.ch
Fabian Affolter
fabian.affolter@fhnw.ch
Lea Burki - lea.burki@students.fhnw.ch
Ramona Marti - ramona.marti@students.fhnw.ch
Prof. Dierk König -
dierk.koenig@fhnw.ch
Fabian Affolter - fabian.affolter@fhnw.ch
