Last updated
Last updated
© 2024 Ramona Marti & Lea Burki
Die Zukunft der zwei entstandenen SelectComponents zeigt sich sehr vielfältig. Durch die modulare Struktur vereinfacht sich die Erweiterung, indem einzelne Komponenten wie Projektoren austauschbar sind. Nachfolgend sind mögliche Verbesserungen und Features aufgelistet.
Die aus den Feedbacks der Programmierer entstandene SelectComponent sollte sich weiteren Tests mit Entwicklern stellen. Dies garantiert eine gut verständliche Dokumentation und effiziente Einbindung in den Code. Allenfalls lassen sich weitere Bugs aufdecken. Die weiteren Tests bieten die Möglichkeit, einen Vergleich zu den bereits durchgeführten Tests zu ziehen. Spezifische Fragen können die Vereinfachung der Anwendung beweisen oder widerlegen.
Die Anzahl der Personen der Testgruppe massiv zu erhöhen, führt zu mehr Feedback. Gewisse Interaktionen der Nutzer können möglicherweise auf bisher unentdeckte Probleme hinweisen. Diese lassen sich in einem weiteren Schritt beheben.
Eine Umfrage bei den Endanwendern weist auf bisher unbekannte Wünsche hin. Durch eine grosse Diversität beim Hintergrundwissen der Befragten entstehen neue Designansätze. Aus den Feedbacks lassen sich neue Projektoren – ob UI oder Interaktion – designen und umsetzen.
Die während des Design-Prozesses entstandenen Prototypen bieten sich als Grundlage für neue UI-Projektoren [1] an. Aus diesen Designskizzen lassen sich in Figma ausgearbeitete Prototypen erstellen. Diese finden sich in der späteren Implementation zu einzelnen Projektoren wieder.
Weitere Projektoren könnten den gleichen Aufbau besitzen, aber mit alternativen Design-Implementationen ausgestattet sein. Dabei zeigen sich die Unterschiede beispielsweise in der Visualisierung des Highlights, der Cursor-Position oder der Selektion. Das Design kann jedoch wie beim Darkmode die komplette Komponente betreffen.
Statt einer Spalten-Darstellung visualisiert sich eine Idee als Zeilen-Darstellung (Abbildung 5.1). Die Kategorien zeigen initial nur die ausgewählte Option in einer Zeile an. Die ValueOption stellt die Werte in einer normalen Spalte dar. Beim Eintreten [2] in eine Kategorie ändert die Darstellung der aktiven Zeile in ein Rad (Mitte Abbildung 5.1). Sobald das Highlight bzw. die Cursor Position die Kategorie-Zeile verlässt, minimiert sich die Visualisierung zurück auf den selektierten Wert. Nach dem Erstellen eines Figma-Prototypen findet sich in dieser Idee ein neuer UI-Projektor wieder.
Die entstandenen wie auch zukünftige UI-Projektoren lassen sich mit unterschiedlichen Interaktionen verbinden. Dabei ist es hilfreich, verschiedene Interaktions-Projektoren [3] zu bieten.
Neue UI-Projektoren lassen sich nicht ausnahmslos mit den bestehenden Tastatur-Interaktionen kombinieren. Zudem ist nicht in jeder Situation erwünscht, dass die Cursor-Position die Selektion beeinflusst. Weitere Projektoren können eventuell neue UI-Projektor-spezifische Interaktionen bieten.
Ein Interaktionsprojektor kann das Auswahlkomponentebezogene Undo und Redo enthalten. Diese Funktion bietet an, eine geänderte Auswahl rückgängig zu machen oder zu wiederholen.
Zukünftig besteht die Möglichkeit, Auswahlkomponenten für spezielle Anwendungsfälle zu erstellen. Ein altbekanntes Beispiel ist die Auswahl eines Datums mit Tag, Monat und Jahr. Dabei kann weitere Logik zur Kontrolle der möglichen Werte zum Einsatz kommen.
Das Erweitern der Multiselect-Funktionalität führt die Anpassung mehrerer Subkomponenten mit sich. Es betrifft die Implementation von der SelectComponent bis hin zu der ColumnOptionsComponent. Eine mögliche neue Single-Select-Komponente bietet die Funktionalität, mehrere Kategorien auswählen zu können. Hierbei ist zu unterscheiden, ob die ausgewählten Kategorien als AND- oder OR-Verknüpfung zu verstehen sind.
Die SelectComponent garantiert bis 5'000 Werte eine annehmbare [4] Ladezeit. Diese Performance lässt sich weiter optimieren. Zudem führen diese Verbesserungen dazu, dass sich eine noch höhere Anzahl Optionen anwenden lässt. Eine Kombination der Auswahlkomponente mit der Lazy Table des Kolibri ermöglicht eine optimierte Performance. Denn die Lazy Table kann eine Datenmenge von über 100'000 Werten verwalten.
Die entstandene Auswahlkomponente ist nur für nicht beeinträchtigte Menschen optimiert. Zukünftig ist die Komponente noch für Screenreader und somit für Blinde zu ergänzen. Die getroffenen Styles benötigen ein Testing mit Sehbeeinträchtigten, um die Accessability garantieren zu können. Dazu zählt zum Beispiel die bekannte Rot-Grün-Schwäche.
All diese Erweiterungen und Verbesserungen zielen darauf ab, die Auswahlkomponente für alle Endnutzer zugänglich zu machen. Sie ermöglichen eine angenehme Benutzung. Zudem soll die SelectComponent einfach in jeden bestehenden JavaScript-Code einzubinden sein. Anschliessend an diese Arbeit steht die Integration in das Toolkit Kolibri an.
[1] Projektoren, die nur die View generieren (ohne Tastatur-Interaktion) [2] Wechsel der Cursor-Position in die Kategorie oder ein Klick auf die Kategorie [3] Projektoren, die nur die Tastatur-Interaktion definieren [4] Ladezeit < 500 ms, bis die Webseite fertig geladen is
