Die folgenden Kapitel beschreiben das Vorgehen in der Prototyping-Phase. Angefangen von der Suche eines geeigneten Beispiels über diverse Lo-Fi bis hin zu den Hi-Fi Prototypen entwickeln sich mehrere Strukturen und Varianten. Mit dem Voranschreiten der Prototypen zeichnen sich immer mehr Details aus und beantwortete Fragen fliessen ein.
Eine Möglichkeit, die Aufgabenstellung zu visualisieren, ist Anwendungsbeispiele für die Auswahl-Komponente zu finden. Die verschiedenen Ideen helfen die Problematik des Standard-Dropdown aufzuzeigen. Sobald die Fragestellung geklärt ist, folgt das Analysieren aller Beispiele. Die Fokussierung auf ein gemeinsames Beispiel erleichtert das weitere Vorgehen. Die Arbeit mit konkreten Daten ist einfacher. Dadurch sind die Prototypen bzw. Varianten nicht nur analysierbar sonder auch vergleichbar.
Die Liste "alle Länder der Welt" bietet sich als passendes Beispiel an. Dieser Datensatz enthält eine grosse Datenmenge von ca. 250 Werten. Das konkrete Beispiel findet sich auf vielen Formularen wieder. Zudem deckt es die in Kapitel 1.1 erwähnte Problematik ab.
Um schnell eine Vielzahl von Ideen zu entwickeln und zu visualisieren, ist das aktive Verwenden des Lo-Fi Prototyping die beste Möglichkeit. Dadurch entstehen zwischen 7 und 10 Konzepte mit jeweils 2 bis 5 Varianten. Wegen den Feinheiten des Designs nicht vom Weg abzukommen, ist das oberste Ziel.
Die Konzentration liegt auf der grundlegenden Anordnung und den erforderlichen Elementen der Komponente. Effizient klären sich hierbei entscheidende Fragen zur Funktionalität und zum Nutzererlebnis. Die unbedingt benötigten Elemente als auch deren Anordnung innerhalb der Benutzeroberfläche stehen im Fokus. Ideen schnell zu Papier gebracht (Abbildung 3.4) helfen verschiedene Lösungsansätze unmittelbar zu visualisieren und zu bewerten.
Die Verwendung von Lo-Fi Prototyping erweist sich als besonders vorteilhaft für die Förderung der Kreativität. Diese Methode erleichtert das frühzeitige Einholen von Feedback. Dadurch minimiert sich der Zeitaufwand und die Kosten für Änderungen.
Als Teil der Lo-Fi Prototypen entstehen HTML-Skizzen (Abbildung 3.5 und 3.6). Hierbei liegt – wie auf Papier – die Anordnung der Elemente im Mittelpunkt. Schnell fällt auf, welcher Prototype eher unübersichtlich wirkt (Abbildung 3.6) und welcher viel Platz einnimmt (Abbildung 3.5). Die Code-Ordnung ist nicht relevant.
Um die Interaktionen und das Benutzererlebnis der Entwürfe zu verfeinern, kommen im UX/UI-Design-Prozess Papierprototypen zum Einsatz. Durch die Erstellung von drei Lo-Fi Prototypen aus Papier gelingt die detaillierte Darstellung der geplanten Interaktionen. Dies hilft die Bedienung Schritt für Schritt nachzuvollziehen.
Dieser Ansatz ermöglicht, die Handlungen der User präzise zu durchdenken und darzustellen. Erst wenn die Abläufe geklärt sind, ist der Übergang zur digitalen Umsetzung sinnvoll. Durch die Dokumentation der Interaktionen auf Papier zeigen sich verschiedene Benutzerpfade. Hierbei ermöglichen sich Simulationen als auch das Ausprobieren der Benutzeroberfläche. Dies begünstigt frühzeitig mögliche Probleme und Herausforderungen in der Benutzerführung zu erkennen und anzugehen.
In User-Tests erweist sich das Papier-Prototyping als besonders wertvoll. Die direkten Benutzerfeedbacks sind eine einfache und kostengünstige Möglichkeit Korrekturen früh einzubringen. Zugleich testet dieser Schritt die grundlegenden Designkonzepte. Das analoge Durchlaufen der Papiermodelle bietet einen grossen Gewinn an Erkenntnissen über die Benutzererfahrung. Zusätzlich stellt der Vorgang sicher, dass Designentscheidungen auf den Bedürfnissen und Erwartungen der künftigen Benutzer basiert.
Insgesamt ist das Papier-Prototyping ein entscheidender Schritt im Designprozess. Dabei unterstützt der analoge Lo-Fi Prototyp die Entwicklung einer nutzerzentrierten und intuitiven Benutzeroberfläche. Daraus entsteht eine solide Grundlage für den Hi-Fi Designansatz.
Bei der Übernahme des Papierprototypen ins Figma entstehen zwei Varianten. Von Anfang an liegt der Fokus darauf in Komponenten zu arbeiten. Dadurch lassen sich Anpassungen einfach ergänzen und umsetzen. Das im Figma bereits enthaltene Designsystem hilft bei der Entwicklung der Hi-Fi Prototypen. Das monochrome Grau bzw. Violett stellt sich im ersten Farbkonzept in den Mittelpunkt. Ziel der Grautöne ist es, dezent und elegant zu wirken. Das Violett greift die Primärfarbe des Kolibri auf und arbeitet mit dessen Schattierungen.
Die erste Variante bildet grösstenteils den Papier-Prototypen strukturell ab. Die violetten Stylings stellen die Status der Elemente dar. Der geschlossene Zustand der Auswahlkomponente erscheint in einem einfachen Aufbau (Abbildung 3.8). Dabei zeigt sie den Platzhalter oder das selektierte Land mit einem rechtsbündigen "X" an, als auch einen Pfeil für das Öffnen der Komponente.
Die Ausarbeitung des Dropdown-Inhalts gestaltet sich aufwendiger. Die möglichen Zustände stellen sich bei der Analyse der Komponente heraus. Beim Designen teilen sich die Status in normal, selektiert, fokussiert und selektiert-fokussiert auf. Für eine Unterscheidung dessen erhält jeder ein eigenes Aussehen (Abbildung 3.9).
Die Selektion muss auf den ersten Blick gut sichtbar sein, daher erscheint eine dezente Hintergrundfarbe logisch. Denn diese sticht, ohne aufdringlich zu wirken, gut heraus. Der Fokus erhält ein dezenteres Erscheinungsbild, muss aber zugleich mit der Selektion kombinierbar sein. Daraus resultiert die Entscheidung das Element durch einen Rahmen umzugestalten. Da dieser nicht so viel Fläche abdeckt und einen Kontrast zur Selektion bieten soll, ist die Violett-Schattierung kräftiger.
Die geöffnete Auswahlkomponente setzt sich aus vorbereiteten Elementen zusammen (Abbildung 3.10). Die Kopfzeile enthält dabei nur noch oben einen Border-Radius, um die Listenbox zu ergänzen. Dadurch zeigen sich die beiden Teil-Komponenten als Einheit. Um dem Benutzer den Zustand der Listenbox anzuzeigen, dreht sich der Pfeil in der Kopfzeile.
Parallel zu der ersten Version (Abbildung 3.10) entfaltet sich eine zweite kompaktere Variante (Abbildung 3.11). In dieser ist dieselbe Kopfzeile ersichtlich, jedoch mit anders gerichteten Pfeilen. Im geschlossenen Dropdown zeigt der Pfeil nach links und im offenen nach unten. Um die Auswahlkomponente (Abbildung 3.11) kompakter darstellen zu können, sind die Kontinente als Kürzel in Lesezeichen orientierten Reitern angeordnet. Der aktive Kontinent erhält einen dunkleren Hintergrund, um den selektierten Zustand anzuzeigen.
Beim Vergleich der beiden Varianten zeigt sich der erste Hi-Fi Prototyp als geeigneter. Bei der späteren Generalisierung findet sich nicht für jede Kategorie eine Abkürzung. Die erste Variante der unterschiedlichen Pfeile ist den meisten Usern geläufiger.
Eine intensivere Auseinandersetzung mit der Bedienbarkeit zeigt auf, dass die Accessibility der Komponente eine Überarbeitung benötigt. Der Rahmen für den Fokus und die Ähnlichkeit der Schattierungen sind in dieser Hinsicht eher ungeeignet (Abbildung 3.9). Für Personen mit einer Sehbeeinträchtigung bietet das gewählte monochrome Farbkonzept einen zu schwachen Kontrast. Die Namen der Status geben den Hinweis auf die neuen Farben. Im Kolibri existieren bereits die Selektionsfarbe Gelb und die Akzentfarbe Rosa, welche einen guten Kontrast bieten. Zusätzlich wird Gelb in der Farbpsychologie (Abbildung 3.2) für eine energetische Stimmung genutzt. Diese beiden Farben bilden das zweite Farbkonzept. Für eine bessere Erkennung des Fokus-Elements löst sich der Rahmen zu Gunsten der Schriftfarbe auf. Daraus entstehen die Elemente der Abbildung 3.12. Diese wiederum sind in der Abbildung 3.13 im Einsatz zu sehen.
In der Lo-Fi und Hi-Fi Prototyping Phasen sammeln sich verschiedene Interaktionsmöglichkeiten und -abläufe. Dabei spielt der Hintergrund der befragten Nutzer eine tragende Rolle.
Ein typischer Alltagsnutzer verwendet in der Interaktion grösstenteils die Maus. Diese ermöglicht unter anderem die Aktionen Klick, Hover und Scrollen. Der Klick auf ein Element – Kontinent oder Land – setzt den Status dessen auf selektiert. Dadurch erhält jener Bestandteil das dazu passende Design. Das zuvor in der selben Spalte selektierte Element wechselt den Status auf normal. Bei dem Klick auf ein Land wird dessen Wert in der Kopfzeile eingesetzt. Wenn sich die Maus über einem Kontinenten oder Land bewegt oder befindet, steht dieses mit dem dafür definierten Stil im Fokus. In der ganzen Listenbox besitzt nur ein Eintrag den Status fokussiert. Ein Klick auf den Pfeil auf der rechten Seite der Kopfzeile öffnet bzw. schliesst das Dropdown, je nach Zustand vor der Aktion. Bei einem Klick auf das "X" neben dem ausgefüllten Wert leert sich das Feld in der Kopfzeile. Zusätzlich hebt sich die Selektion in der Länderspalte auf. Das Scrollen innerhalb der Länderspalte bewegt diese Liste nach oben oder unten.
Auch Tastatur-User kommen bei dieser Komponente auf ihre Kosten. Aktionen mit der Tastatur sind ein weiterer Bestandteil des Interaktion-Designs. Im geschlossenen Zustand des Dropdown bewirkt die Enter-, Leer- oder Pfeiltaste nach unten das Öffnen des Dropdown. Ist die Listenbox einmal sichtbar, dienen die Pfeiltasten zur Navigation zwischen den Elementen. Springt der Fokus auf ein Land ausserhalb des sichtbaren Bereichs, verschiebt sich die Liste um einen Eintrag in dessen Richtung. Enter oder Space selektieren den im Fokus stehenden Wert. Bei einer Länder-Selektion füllt sich die Kopfzeile aus, anderenfalls wechselt der Fokus vom Kontinenten-Eintrag in die Länder-Spalte. Die Escape-Taste schliesst die Listenbox, ohne eine Änderung am eingetragenen Wert vorzunehmen. Backspace und Delete entfernen den Wert aus der Kopfzeile. Tab behält die typische Funktion in Formularen bei und wechselt zum nachfolgenden Input. Zusätzlich schliesst die Aktion die Listenbox. Bei der Verwendung der einzelnen Symbole – wie z.B. Buchstaben – beginnt eine Suche in der Länderliste. In der Liste wird zum ersten mit der Eingabe übereinstimmenden Eintrag gescrollt. Bei der Eingabe der Suche kommt die nachfolgende Strategie zum Einsatz.
Die Debounce-Technik als Schlüsselelement trägt wesentlich zur Effizienz und Benutzerfreundlichkeit bei. Um die Benutzerinteraktionen zu optimieren, bietet es sich an, diese Technologie bei einer umfangreichen Liste strategisch einzusetzen. Die Eingabe hält sich jedoch nur eine kurze Zeit – weniger als eine Sekunde – im Speicher. Nach dem Ablauf dieser Zeitspanne, ab dem ersten Symbol gemessen, fängt die Suche neu an. Genauere Implementationsdetails folgen im Kapitel 3.4.2.2.
