4 Länder-Auswahlkomponente
Last updated
Last updated
© Lea Burki, Ramona Marti 2024
Die Auswahlkomponente entwickelt sich durch die Verwendung von Lo-Fi-, Papier- und Hi-Fi-Prototypen. Daraus entsteht ein einfach zu bedienendes und schön gestaltetes Dropdown. Dank der verschiedenen Methoden und Nutzertests entsteht ein durchdachtes Design. Im aktuellen Zustand ist die Lösung auf das Beispiel einer Länder-Selektion ausgelegt. Das gut strukturierte und farblich angepasste Erscheinungsbild findet sich im CSS wieder. Zur Vervollständigung kommt die umgesetzte Ausgestaltung der Interaktion, sowie die Logik hinter der Komponente dazu.
Das komplette Design basiert auf dem Beispiel einer Länder-Auswahl-Komponente.
Im groben Aufbau besteht das neue Dropdown aus zwei Teilen – die Kopfzeile und die Content-Box. Die Kopfzeile besteht aus einem Feld für das selektierte Land und einem Button für das Öffnen und Schliessen der Komponente (Abbildung 4.1). Ist ein Wert enthalten, lässt sich dieser mit dem angezeigten "X" löschen (Abbildung 4.2). Wird das Dropdown geöffnet, erscheint eine zweigeteilte Box. Diese zeigt die Kontinente auf der linken und die Länder des jeweilig selektierten Kontinents auf der rechten Seite an (Abbildung 4.3). Die Content-Box ist ein Popover und überdeckt nachfolgende Webseiten-Elemente. Die einzelnen Kategorien bzw. Länder sind jeweils untereinander angeordnet. Ein allfälliger Überfluss, wie bei der Menge aller Länder, versteckt sich hinter der Scrollfunktion. Dadurch nimmt die Komponente keine Übermasse in der Grösse an.
Über die diversen Varianten in der Entwicklungszeit zeigen sich die benötigten Status. Die vier festgelegten Zustände sind normal, selektiert, fokussiert und selektiert-fokussiert. Zur Unterscheidung erhalten diese jeweils ein eigenes Aussehen (Abbildung 4.4). Die Benennungen der Status ist auf das Designsystem abgestimmt. Das normale Element soll nicht aufdringlich wirken und sich gut in den Webseiten-Verlauf einbinden. Die aktuelle Selektion hingegen ist prominenter hervorgehoben. Somit erkennt der Nutzer seine momentane Wahl. Als Selektionsvariable existiert in der vorhandenen Farbgestaltung des Kolibri ein mittel-dunkles Gelb. Schwache Farben, wie die gewählte Gelbschattierung, bieten als Schrift- oder Rahmenfarbe einen schlechten Kontrast. Deswegen ist das Einfärben des Elementhintergrunds die beste Wahl. Steht ein Baustein im Fokus, erhält dieser die Akzentfarbe der Kolibri, welche als Pink-Schattierung erscheint. Da der Farbton kräftig ist, eignet er sich gut als Schriftfarbe und lässt sich für den Zustand selektiert-fokussiert (Abbildung 4.4) kombiniert anwenden.
Die einzelnen Kontinente in der Liste bieten dem Anwender jeweils eine Zusatzinformation (Abbildung 4.5). Diese steht in der rechtsbündigen Informationsbox und zeigt die Anzahl der Länder der jeweiligen Gruppe. Um ein überfülltes Erscheinungsbild zu vermeiden ist diese zusätzliche Angabe (Abbildung 4.5) bei den Ländern (Abbildung 4.4) nicht vorhanden. In der Kopfzeile wird jedoch die Kontinenten-Zugehörigkeit als ergänzende Information angezeigt (Abbildung 4.2).
Durch die User-Tests mit den Papierprototypen zeigt sich, dass Nutzer Webformulare möglichst effizient ausfüllen möchten. Diese Feststellung findet sich im aktuellen Interaktion-Design wieder. Die grosse Menge der Länder im geöffneten Zustand lässt sich mithilfe von Kategorien reduzieren. Die Komponente enttäuscht auch Tastatur-Benutzer nicht. Es bietet sich die Möglichkeit mit der Eingabe der ersten paar Zeichen direkt in die Nähe des gewünschten Landes zu springen. Wenn das Dropdown geschlossen ist, wird der erste gefundene Eintrag über alle Länder direkt als Selektion eingetragen (Abbildung 4.6 - Eingabe "Swi").
Abbildung 4.6: In geschlossenem Zustand kann die Liste durch Space, Enter oder Pfeil nach unten geöffnet werden. Geöffnet verspricht die Komponente eine angenehme Bedienung, da eine Navigation mit Pfeiltasten unterstützt wird. Die üblichen Bedienelemente – wie Tab für das nächste Eingabefeld, Space bzw. Enter für eine Selektion, ESC zum Schliessen der Content-Box und Backspace bzw. Delete zum Löschen der Selektion – stehen dem Super-User ebenfalls zur Verfügung.
Die Implementierung der Kolibri-Auswahlkomponente kombiniert Intuitivität und benutzerfreundliche UI-Elemente. Sie markiert den Übergang von der Konzeption zur praktischen Anwendung der Ideen und Prinzipien.
Im Bereich CSS nutzt das Projekt bereits vorhandene Kolibri-Dateien und fügt eigene stilistische Erweiterungen hinzu. Dadurch ist die Erfüllung der spezifischen Anforderungen des Dropdown-Elements garantiert. Die Verwendung von vordefinierten Kolibri-Stilen gewährleistet Konsistenz im Gesamtdesign. Währenddessen ermöglichen eigene Erweiterungen eine präzise und massgeschneiderte Nutzererfahrung.
Die JavaScript-Implementierung folgt einem modularen Ansatz. Hierbei sorgen klar definierte Controller, Models und Projectors für eine strukturierte und wartbare Codebasis.
Die Implementierung zeigt sich technisch effizient. Dabei nutzt sie moderne Webtechnologien und optimiert die Performance. Features, wie Debouncing in den Controllern, verbessern die Benutzerfreundlichkeit der Komponente.
Vordefinierte CSS-Dateien des Kolibri finden im Rahmen dieses Projekts ihren Einsatz. Eigene Stildefinitionen fliessen durch zwei ergänzende Dateien mit ein. Somit ist Konsistenz im Design gewährleistet, während gleichzeitig spezifische Anforderungen des Teilprojekts erfüllt werden.
Kolibiri Basis CSS-Dateien
kolibri-base.css:
Diese Datei legt grundlegende Stile wie Schriftarten, Farben, Box-Modell-Regeln und Auswahl-Styles fest. Die Definitionen von Schriftarten wie RobotoSlab und JetBrainsMono sowie Kernfarben und Schatteneffekte sind hier enthalten.
kolibri-light-colours.css: Fokussiert auf Farbdefinitionen, bietet diese Datei eine breite Palette von Farbvarianten in verschiedenen Helligkeitsstufen – unter anderem Lila, Lavendel und Gelb.
kolibri-light-fonts.css:
Ergänzt die Basisschriftarten um weitere Stile und das Font-Weight der Rubik-Schriftfamilie, was eine feinere Typografie-Kontrolle ermöglicht.
testUI.css: Speziell für Testzwecke entwickelt, definiert es Stile für Testelemente und -layouts, um eine konsistente Benutzeroberfläche während der Entwicklung zu gewährleisten.
Eigene CSS-Erweiterungen
kolibri-input-elements-dd.css: Konzentriert sich auf die Gestaltung von Dropdown-Elementen. Es definiert Stile für Elemente wie Auswahllisten, Schaltflächen und Eingabefelder. Ein besonders grosser Wert liegt auf Anpassungen wie Abstände, Schriftgrössen und Farben.
kolibri-input-elements-colours.css: Diese Datei erweitert die Farbpalette und passt sie an spezifische Bedürfnisse dieser Komponente an. Es legt Farben für ausgewählte und fokussierte Elemente sowie Schriftarten und Hintergründe fest.
Die vordefinierten Kolibri-CSS-Dateien in Kombination mit den ergänzenden Erweiterungen ermöglichen, eine einheitliche und projektspezifische Benutzeroberfläche zu schaffen. Diese Herangehensweise stellt sicher, dass die Komponente visuell in das Gesamtbild des Kolibri passt. Gleichzeitig erfüllt sie ihre einzigartigen Designanforderungen.
Der JavaScript-Code folgt einem modularen Ansatz, um wiederverwendbare und wartbare Komponenten zu erstellen. Der Schwerpunkt liegt auf der Funktionalität, Klarheit und Einhaltung der Kolibri-Programmierstandards.
Controller (choiceInputController.js):
Dienen als Schnittstelle zwischen der Benutzeroberfläche und den Geschäftslogik-Modellen. Der ChoiceDetailController und der ChoiceMasterController verwalten die Interaktionen und Datenflüsse zwischen den UI-Komponenten und den Modellen.
Models (choiceInputModel.js):
Repräsentieren die grundlegende Geschäftslogik und Zustände. Das ChoiceDetailModel und das ChoiceMasterModel bieten eine abstrakte Darstellung der Daten und ihrer Beziehungen.
Projector (choiceInputProjector.js): Befasst sich mit der Darstellung der Daten auf der Benutzeroberfläche. Diese Datei enthält Funktionen und Methoden, um die Modelldaten in ein nutzbares Format für die Benutzeroberfläche zu konvertieren und zu präsentieren.
Starter Code (starter.js): Bindet die Komponente und deren Logik in die View ein. Die hier definierten Controller erhalten die Daten des Models. Der Projector empfängt den Master- als auch den Detail-Controller, um die View zu generieren.
Tests: Dienen zur Sicherstellung der Funktionalität aller Komponenten des Projector Pattern als auch der Master-Detail View. Für jeden der vier oben aufgeführten Punkten existiert ein eigenes Test-File. Diese gewährleisten die Zuverlässigkeit und Stabilität des Codes.
Spezifische Implementierungsdetails
Datenbindung und Zustandsmanagement: Um eine reibungslose Benutzererfahrung zu gewährleisten, nutzt die Implementierung reaktive Datenbindungen und das Zustandsmanagement. Änderungen im Modell spiegeln sich unmittelbar in der Benutzeroberfläche wider, und umgekehrt.
Event Handling: Die Event-Handling-Logik ermöglicht eine effiziente und wartbare Interaktion der Benutzeroberfläche.
Modularität und Wiederverwendbarkeit: Der Code ist so strukturiert, dass er leicht in verschiedenen Teilen des Projekts oder in zukünftigen Projekten wiederverwendet werden kann.
Die JavaScript-Implementierung stellt eine effektive Symbiose aus den Standards des Kolibri-Frameworks und den spezifischen Komponenten-Anforderungen dar. Die klare Trennung von Modellen, Controllern und Projectors ermöglicht es, wartbaren und erweiterbaren Code zu schreiben. Dieser bildet die Grundlage für die weitere Entwicklung und Verbesserung dieses Produkts.
Die Komponente unterzieht sich Tests, um die Korrektheit und Bedienbarkeit des Ergebnisses zu gewährleisten. Automatisierte Tests konzentrieren sich auf die Implementierung und das Vorhandensein der Elemente in der Ansicht. Benutzertests hingegen decken die Bedienbarkeit und die Erfüllung von Nutzerwünschen auf.
Zur Sicherstellung der Funktionalität der Komponente existieren Tests für die Bestandteile des Projector Patterns. Abbildung 4.7 zeigt die Resultate der Durchführung der vier Test-Dateien. Die Model-Tests prüfen das Vorhandensein bestimmter Observables. Dies geschieht für beide Modelle, Master und Detail, einmal mit kompletten und einmal mit minimalen Angaben. Bei den Controllern liegt das Augenmerk der Tests auf den Getter und Setter von Attributen, als auch auf den Triggerfunktionen wie onValueChanged. Dabei findet die Überprüfung für den Master- sowie den Detail-Controller ebenfalls getrennt statt. Der Test für den Projector kontrolliert die Werte des Controllers initial und nach dem Ausführen eines Events. Zuletzt wird die View rudimentär geprüft. Hier liegt der Fokus auf der Existenz der Elemente.
Dieses Unterkapitel dokumentiert das User-Testing der finalen Dropdown-Komponente zur Länderauswahl. Der Schwerpunkt liegt auf der Interaktion der Testpersonen mit dem Prototyp und deren direktem Feedback. Das Ziel ist, die Benutzerfreundlichkeit und Intuitivität der Komponente zu bewerten.
Teilnehmer: Verschiedene Benutzerprofile, um eine breite Palette an Feedback zu erhalten.
Aufgabe: Ausfüllen eines Formulars mit der Auswahl des Wohnsitzlandes.
Werkzeuge: Beispiel-Formular choiceInputView.html, Maus und Tastatur.
Messwerte:
Benötigte Zeit
Aktionen der Testpersonen
Reaktion des Prototyps
Feedback der Testpersonen
Ein Beispiel dieses Testdurchlaufs (Tabelle 4.1) zeigt die Interaktion der Testperson Robert mit dem Prototypen der Dropdown-Komponente. Robert, ein junger, alltäglicher Nutzer und Digital Native, verwendet sowohl die Maus als auch die Tastatur für verschiedene Interaktionen. Dabei gibt er wertvolles Feedback zur Benutzerfreundlichkeit und Funktionalität der Komponente. Robert braucht 17.77 Sekunden um das Testformular bzw. die Testaufgabe zu vervollständigen.
Tabelle 4.1 - Ablauf finaler Benutzertest Robert
Maus
Klickt in Feld First name
Feld aktiv
Tastatur
Namen Eintippen
Namen wird in Feld geschrieben
Maus
Klick in Feld Name
Feld aktiv
Tastatur
Namen eintippen
Namen wird in Feld geschrieben
Maus
Klick in Feld Country
Feld aktiv, Dropdown öffnet
Tastatur
"Switz" eintippen
Schweiz erscheint im Feld
Wäre gut, wenn man sehen würde, was man tippt
Maus
Klick bei Schweiz
Komplett ausgefüllt
Zufrieden mit Mausinteraktion
Die folgende Übersicht zeigt die Testergebnisse der Testpersonen (Tabelle 4.2), welche auch bereits die Papierprototypen bewertet haben. Sie geben Einblicke in die Bedienbarkeit und Nutzerfreundlichkeit der finalen Dropdown-Komponente.
Tabelle 4.2 - Testbenutzer finaler Benutzertest
Robert
Junger Alltagsbenutzer, Digital-Native
Wünscht visuelles Feedback beim Tippen. Schwierigkeiten mit der Tastaturnavigation beim alleinigen Verwenden der Tastatur. (Hover Maus, Problem)
Sara
Semi aufmerksam, nicht so schnell auf der Tastatur
Möchte visuelles Feedback beim Tippen. Ansonsten gut navigierbar mit Maus
Nick
Alltagsbenutzer/ Student
Schwierigkeiten mit Tastaturnavigation; empfiehlt Verbesserungen für den Eingabefeld-Wechsel. -> Feld-Bestätigung/ -wechsel mit Enter gewünscht.
Durchgängigkeit: Es zeigt sich, dass die Konsistenz und Vorhersehbarkeit der Interaktionen für alle Benutzergruppen von großer Bedeutung sind. Insbesondere die visuellen Hinweise und Tastaturinteraktionen müssen konsistent und intuitiv gestaltet sein.
Barrierefreiheit: Die Berücksichtigung der Bedürfnisse von Benutzern mit unterschiedlichen Fähigkeiten ist essenziell für die universelle Usability der Komponente.
Benutzerführung: Die Ergebnisse weisen darauf hin, dass eine zusätzliche Benutzerführung, wie klare visuelle Hinweise die Bedienung verbessern könnte – insbesondere für weniger erfahrene User. Diesen erscheint es unklar, wo sich sie momentan befindet bzw. was er tippt.
