4.1 Design
Das Ziel ist, eine konsistente und ansprechende Benutzererfahrung zu schaffen, die sich über alle modernen Browser hinweg hält. Das Design der neuen Auswahlkomponente ist stark vom Kolibri-Designsystem inspiriert. Das Designsystem bietet bereits ein umfassendes Set von Richtlinien und Komponenten. Diese ermöglichen eine einheitliche und benutzerfreundliche Gestaltung von Anwendungen. Das neue Design enthält jedoch einige Anpassungen, um die Lesbarkeit zu optimieren. Dazu benötigt es eine Analyse der Möglichkeiten, welche im nachfolgenden Kapitel beschrieben sind.
4.1.1 Mögliche Designoptionen eines Elements & deren Wahl
Elemente lassen sich durch diverse Eigenschaften stylen. Die Anpassung der Hintergrundfarbe fällt am schnellsten ins Auge. Diese ist hell zu gestalten, damit der Kontrast zur dunklen Standard-Schriftfarbe erhalten bleibt. Der Rahmen bietet eine weitere Designmöglichkeit. Seine Farbe, Dicke oder Struktur können variieren. Eine andere Alternative ist, nur eine Seite des Rahmens zu verwenden. Als Beispiel dafür gilt der sogenannte Spiegelstrich, welcher auf der linken Seite platziert ist. Für eine gute Erkennbarkeit sollte die Färbung rund um den Rahmen in einer eher dunklen Schattierung Anwendung finden. Als weitere Style-Eigenschaften bieten sich Änderungen der Schrift an. Bei der Farbe ist der Kontrast zu beachten, weswegen eine eher dunkle zu wählen ist. Alternativ lassen sich die Dicke, Schriftart, Neigung, Grösse oder Dekoration ändern. All diese Style-Anpassungen lassen sich auf unterschiedliche Art und Weise kombinieren.
Bei den Farben existiert eine grosse Bandbreite. Da Kolibri bereits ein Designsystem besitzt, schränkt sich die Menge ein. Unter den vorhandenen Farbwerten bieten sich die Folgenden am besten an:
Kolibri-Light/Yellow/100 → helles Weiss-Gelb
Kolibri-Light/Yellow/300 (
--kb-color-select) → helles GelbKolibri-Light/Warning/
--kb-warning-dark→ dunkles GelbKolibri-Light/Danger/
--kb-danger-accent(--kolibri-color-accent) → mittleres RasaKolibri-Light/Success/
--kb-success-accent→ mittleres GrünKolibri-Light/Success/
--kb-success-light→ helles GrünKolibri-Light/Primary/
--kb-primary-accent→ mittleres ViolettKolibri-Light/Primary/
--kb-primary-light→ helles ViolettKolibri-Light/Secondary/
--kb-secondary-accent→ mittleres BlauKolibri-Light/Secondary/
--kb-secondary-light→ helles BlauKolibri-Light/Monochrome/
--kb-color-body→ mittleres GrauKolibri-Light/Monochrome/
--kb-color-line→ helles Grau
Da die Elemente drei verschiedene Zustände gleichzeitig erhalten können, müssen die Styles kombinierbar sein. Nicht jede der erwähnten Eigenschaften und Farben eignet sich in gleichem Masse. Yellow-100 fällt schnell wieder weg, da je nach Display der Kontrast zu gering ist. Unter den restlichen hellen Schattierungen passt Yellow-300 am besten. Diese Farbe ist bereits als Selektionsfarbe im Code hinterlegt. Das vordefinierte --kb-color-select eignet sich am ehesten als Hintergrundfarbe. Dadurch ist klar, dass die anderen beiden Zustände eine eher kräftige bzw. dunkle Färbung benötigen. Der Blick auf die Namen im Designsystem zeigt eine weitere Farbe zur Hervorhebung eines Elements. Die Benennung des mittleren Rosas mit Accent (--kolibri-color-accent) bietet einen guten Kontrast zur Selektion. Diese Farbe ist ebenfalls im Code vordefiniert. Da die dritte Farbe nicht zu viel Unruhe in das Design bringen soll, schränkt sich die Farbauswahl weiter ein. Mit einem gut erkennbaren Kontrast zur Selektion bietet sich das dunkle Gelb --kb-warning-dark an.
Wie erwähnt ist die Eigenschaft Hintergrundfarbe durch die Wahl der Farbe bereits festgelegt. Die Änderung der Schrift sollte maximal die Farbe betreffen. Die anderen Font-Stylings sind schwer erkennbar oder zerstören das Bild. Der komplette Rahmen passt nicht in das Design und fällt somit ebenfalls weg. Da nicht beide Zustände auf die Schriftfarbe zugreifen können, bietet sich der oben genannte Spiegelstrich an. Das Rosa mit einem guten Kontrast zum Gelb findet sich im linksseitigen Rahmen wieder. Das dunkle Gelb färbt – nebst dem linksseitigen Strich – die Schrift. Die Zuordnung der Designwahl zu den fehlenden Zuständen steht im Kapitel Farbpalette.
4.1.2 Figma-Prototypen
Zur Visualisierung und zum interaktiven Testing des Designs kommt Figma zum Einsatz. Figma ist ein webbasiertes Tool zur Erstellung von UI/UX-Designs, das Echtzeit-Kollaboration ermöglicht. Das Sammeln der Feedbacks von Stakeholdern und Nutzern unterstützt eine effiziente Entwicklung. Dafür ist es unabdingbar, im Vorfeld mit Figma schnell Prototypen zu erstellen und mit den Probanden zu teilen. Das Arbeiten mit Figma-Komponenten erleichtert das Entwickeln enorm. Dies ermöglicht das Erstellen von Varianten ohne viel Aufwand. Die folgenden Screenshots 4.1 bis 4.3 zeigen die Prototypen der neuen Dropdown-Komponente.
Die ersten beiden Grafiken bilden die Komponente in verschiedenen Anwendungsgebieten ab. Die Abbildung 4.3 zeigt ein mögliches Design für einen Dark-Mode. Dabei sind die Farben so weit angepasst, dass der Kontrast weiterhin gegeben ist.
4.1.3 Farbpalette
Das Kolibri-Designsystem bietet eine Vielzahl von Farben. Der Figma-Prototyp enthält spezifische Anpassungen, so dass die Dropdown-Komponente gut lesbar ist. Für den Erhalt einer besseren Nutzerfreundlichkeit gestaltet sich die Farbauswahl aus Abbildung 4.4.
Diese bietet hohen Kontrast und verbessert somit die Barrierefreiheit der Anwendung. Die Gründe der Auswahl befinden sich im früheren Kapitel Mögliche Designoptionen eines Elements & deren Wahl. Die Zustände verbinden sich wie folgt mit der getroffenen Wahl der Farben.
Original → Neu
Kolibri-Light/Yellow/300 bzw.
--kb-color-select→ selectedKolibri-Light/Danger/
--kb-danger-accent→ highlightedKolibri-Light/Warning/
--kb-warning-dark→ cursor position
Bei der Verwendung dieser Farben in der neuen Komponente sind einige CSS-Dateien notwendig. Diese dienen als Grundlage für das weitere Design. Der Code 4.1 zeigt die importierten CSS-Files.
Die erste Zeile enthält die grundlegenden Kolibri Designs. Dazu gehören einige vordefinierte Farben wie eine Selektion oder ein Highlight. Weiterhin sind die Schriften und die Invalidität von Inputs festgelegt. Die zweite Datei ist für die breite Palette an Farben im Light-Mode zuständig.
4.1.4 Layout und Animation
Die Dropdown-Komponente besteht aus der Detail- und der Master-Ansicht. Dieser Aufbau ist im Kapitel Master-Detail-Ansicht genauer beschrieben. Das Layout innerhalb des Option-Popovers liegt in Spalten vor. Die einzelnen Optionen listen sich zeilenweise in den Spalten auf. Der Listencontainer öffnet sich mit einer Animation. Nachfolgender Codeausschnitt 4.2 zeigt die dafür relevanten Zeilen.
Die grundlegenden Styling-Properties des Popover-Containers sind nicht aufgeführt. Die CSS-Regeln aus Code 4.2 definieren die öffnende Animation des Popovers. Das @keyframes regelt die Transformation bzw. Animation, welche das Ausfahren des Containers festlegt. Das [popover] steuert das Erscheinungsbild des geschlossenen Popovers. Die Animation ist mit Zeile 9 an den Popover-Container gebunden. Die Zeilen 12 bis 16 definieren die CSS-Regeln, welche zum Start des Öffnens gelten. Der Selektor :popover-open legt die Darstellung des offenen Zustands fest.
Das Togglen des Popover erhält zusätzlichen Code, damit der Controller aktuell bleibt. Das entsprechende Event aus Codeausschnitt 4.3 führt ein Update auf dem Controller aus.
Dieser Code (4.3) prüft beim Togglen den neuen Status des Events. Anhand des Status erhält das Popover ein Update bei den Klassen. Die weiteren Zustände sind im nachfolgenden Kapitel genauer beschrieben.
4.1.5 Implementation der Zustände
Die Auswahlkomponente ist so gestaltet, dass sie sowohl für Maus- als auch Tastaturbenutzer optimal funktioniert. Das Design der Interaktionen bietet eine intuitive und leicht zugängliche Bedienung der Komponente. Spezifische CSS-Klassen erleichtern die Benutzerführung. Sie definieren die Styles der hervorgehobenen (highlighted) bzw. ausgewählten (selected) Optionen. Die Cursor-Position für die Tastatur erhält ebenfalls eine eigene CSS-Klasse. Dieser Zusand wie auch das Highlight sind unter anderem durch einen Spiegelstrich dargestellt. Der CSS-Code 4.4 zeigt einen Style-Ausschnitt auf ein Cursor-Position-Element.
Der Selektor .cursor-position befindet sich immer nur auf einem Element – der Cursor-Position. Die Zeilen 2 bis 6 in Code 4.4 definieren die Position des Spiegelstrichs. Das Erscheinungsbild ist durch die Zeilen 8 bis 10 beschrieben. Eine dunkle Farbe und eine linksseitige Markierung betonen das Element der Cursor-Position. Das Highlight verwendet einen sehr ähnlichen Code. Die Farbe wie auch die Position sind jedoch angepasst. Zudem hält sich das Highlight nicht an eine Klasse, sondern nutzt die Pseudo-Klasse :hover.
Für ein konsistent gehaltenes UI sind diverse Event-Handler und UI-Update-Funktionen notwendig. Im columnOptionsProjector.js existiert beispielsweise ein Event-Handler. Er steuert das Setzen und Entfernen der Selektionsklasse. Dieser ist im nachfolgenden Code 4.5 ersichtlich.
Die Funktion selectOptionItem verschiebt die Klasse selected vom Alten auf das neue Element. Dadurch passt sich das UI automatisch an. Damit sich die Änderung nur auf die Selektion der aktuellen Spalte auswirkt, verlangt die Funktion ein Elternelement. Das hier versendete getHtmlElementByOption sucht nur im mitgebenen Teilbaum des DOMs das HTML-Element zur mitgegebenen Option.
4.1.6 Prototyping
Der Einsatz von interaktiven Figma-Prototypen ist hilfreich beim Evaluieren der Benutzerfreundlichkeit und intuitiven Bedienung. Die Prototypen der neuen Auswahlkomponente bauen auf dem Resultat der Vorarbeit auf. Daher sind keine Low-Fi-Gestaltungen notwendig. Die Einbindung der in der Vorarbeit erhaltenen Feedbacks der Länderkomponente findet in den neuen Hi-Fi-Prototypen ihre Anwendung. Beispiele für die Designs sind in der Grafik 4.1 ersichtlich. Im oberen Bereich des Bildes befinden sich die Zustände der Optionen. Benutzertests decken die Mängel und Wünsche der Probanden auf. Mit der Integration der Rückmeldungen von Benutzerinteraktionen in das Design verbessert sich die Usability. Mehr zu den Nutzerfeedbacks folgt im Kapitel User-Tests. Das Resultat des umgesetzen Prototypen ist im nachfolgenden Kapitel genauer beschrieben.
4.1.7 Implementationsresultat
Die diversen oben beschriebenen Design-Schritte resultieren in den Abbildungen 4.5 bis 4.10. Weitere Bilder befinden sich im Anhang B.
Im geschlossenen Zustand (Abbildung 4.5) zeigt der Pfeil auf der rechten Seite nach unten. Das Icon ändert beim Öffnen der neuen Komponente die Richtung und zeigt nach oben (Abbildung 4.7). Die selektierte Option kann wie in der Grafik 4.6 ein Bild enthalten. Der Fokus auf der SelectComponent ist durch einen gelben Rahmen um die Detail-Ansicht visualisiert. Dies ist in Abbildung 4.8 im oberen Bereich ersichtlich. Ist das Feld required, erhält der Rahmen einen rosafarbenen Rahmen. Dabei ist der Fokus aber nicht überdeckt. Die disabled SelectComponent zeigt sich wie die anderen Eingabefelder ebenfalls ausgegraut.
Die offene Komponente stellt den Options-Container in jedem Fall unterhalb dar. Die Abbildung 4.7 enthält – nebst Normal – die drei möglichen Zustände der einzelnen Optionen. Der Wert Macedonia visualisiert die Selektion, welche sich ebenfalls im oberhalb befindlichen Detail-Container wiederfindet. Moldova zeigt die Optionen mit der Cursor-Position und somit die Stelle, an welcher sich die Tastatur befindet. Das Highlight enthält den Wert Montenegro. Die Cursor-Position und das Highlight können auf der gemeinsamen Option liegen. Dabei sind beide Zustände sichtbar. Die Abbildungen 4.8 bis 4.10 zeigen, dass die SelectComponent mehrere Spalten besitzen kann.
In diesen Beispielen befindet sich die Value-Option [1] jeweils in der rechten Spalte. Die anderen Spalten dienen zur Filterung der Werte. Die Grafik 4.8 mit der Selektion 2000’s begrenzt die Jahreszahlen von ursprünglich 70 auf noch 10 Werte. Nebst der selektierten Option kann jedes andere Element ebenfalls ein Bild enthalten (Abbildung 4.9). Wenn mehrere Kategorien existieren, bewirkt eine Selektion ganz links eine Reduktion aller Optionen, die auf der rechten Seite liegen. In der Abbildung 4.10 bewirkt die Wahl von North America die Reduktion der Länder und der Städte.
[1] Formular-Wert, wenn einer selektiert is
Last updated
