UX DESIGN, UI DESIGN

UX Arbeitsprobe: Dog breeds

Dieses Teilbereich eines abgeschlossenen Projekts eines großen Kunden soll vor allem meine Arbeitsweise im Bereich User Experience Design (UX) aufzeigen. Im Dezember 2022 stand einer meiner Kunden vor dem Problem, kurzfristig noch das Thema Hunderassen in seine App integrieren zu müssen und so widmete ich mich auch diesem Thema. Ein Thema, das sich nach etwas Recherche etwas komplexer und langwieriger erwies als anfänglich angenommen.

01.

Research

Zu allererst ging ich in die Recherche und schaute nach wie Konkurrenz Apps das Problem lösen. Beispiele wie Tractive, felmo und vetevo zeigten deutlich, dass fast immer der gesamte Smartphone Screen genutzt wurde, um das gesamte Interface auf einem Screen abzubilden. Die meisten Apps verwendeten die sogenannten „Chips“ Komponente, um eine aktive Hunderasse darzustellen und wieder zu entfernen. Hierbei handelt es sich um Tags, die sich durch ein Close Icon auch wieder entfernen lassen. Nur wenige Apps verwendeten andere Eingabemethoden, wie z.B. reine Tags oder Option Groups. 

02.

1. Exploration: Inline Phase

Da auf initialen Wunsch des Kunden kein Modal verwendet werden sollte, da das Thema im gegebenen zeitlichen Rahmen nicht ausufernd behandelt werden konnte und für die interne Logik der App nicht essenziell war, wurde zuerst probiert, das ganze Thema innerhalb des Hundeprofils zu integrieren. Diese Vorgehensweise war aber sowohl aus UX-Sicht als auch UI-Sicht problematisch: Für die Darstellung der verschiedenen Kombinationsmöglichkeiten stand hier, vor allem auf kleineren Smartphones, wenig Raum zur Verfügung. Und aus Designsicht sprang dieses Eingabefeld im Vergleich zu den anderen visuell aus der Reihe. Außerdem war es konzeptuell unlogisch, dass die meisten anderen Eingabefelder zur näheren Definition von Gewicht oder Aktivitätslevel ein Modal öffneten und dieses es nicht tun sollte. 

03.

2. Exploration: Wizard Phase

Da nun also der Weg Richtung Modal führte, um über genug Platz, Konzentration und Konsistenz zu verfügen, war der erste Ansatz, den User mit einer Art „Wizard“ durch Weichen in die verschiedenen User flows zu führen:

  1. Reinrassiger Hund
  2. Mischling und Hunderassen bekannt
  3. Mischling und Hunderassen unbekannt

Diese Methode gefiel dem Kunden jedoch nicht, es sollte nur ein Modal geben, welches alle diese Flows in einem vereint.

04.

3. Exploration: Modal Phase

In dieser Phase wurden verschiedene Methoden getestet, um Chips und Option Fields nebeneinander oder getrennt zu kombinieren, um zu sehen ob sich für die Auswahl des Mischlings ein Chip oder ein Toggle besser eignet und um herauszufinden, ob eine immer sichtbare Liste an Hunderassen überhaupt sinvoll ist oder ob eine Autosuggestion / Fuzzy Search hier ausreicht. 

Mischling und Hunderassen unbekannt

Reinrassiger Hund

Mischling und Hunderassen bekannt

05.

Finale Lösung

Das Testen der verschiedenen Lösungsansätze führte schließlich zu der finalen Ausarbeitung des feingeschliffenen User Interfaces, das nach und nach UX-technisch noch weiter verfeinert wurde. Die Lösung besteht final aus einem Modal, das im Wesentlichen aus einem Autosuggest Suchfeld, einem Mischling Toggle und einem Platz für die Hunderassen Chips besteht, das im empty state mit einem Hinweistext versehen ist. Im angehängten Screenshot sieht man die 3 Userflows für reinrassige- und Mischlingshunde mit bekannten oder unbekannten Rassen. Die Option Fields wurden verworfen, da diese suggerieren könnten, dass keine Mehrfachauswahl möglich sein könnte. Dafür wurde in den Listenergebnissen der Suchbegriff fett hervorgehoben. Eingetragene Hunderassen werden im Hintergrund gespeichert, damit bei unabsichtlichem Aktivieren oder Deaktivieren des Mischlings Toggle die Auswahl nicht verloren geht. Da die Vorgabe des Kunden war, dass man bei einem Mischling nur maximal 3 Hunderassen angeben kann, wird das Suchfeld ab dieser Anzahl deaktiviert und mit dem Hinweis „Maximal 3 Hunderassen“ versehen. Es wurden außerdem noch 2 Screens für kleinere Phones angefertigt, um das Verhalten bei zu wenig Platz zu demonstrieren.

06.

UX Doku

Um das Hunderassenthema den Entwicklern und dem Kunden in seiner gesamten Logik verständlich zu machen, wurde das Ganze noch in der UX Doku festgehalten. Diese besteht aus dem User Flow, der allgemeinen Beschreibung, dem Designscreen Flow und den funktionalen Beschreibungen dieser Screens. Diese Doku enthält alle Feinheiten und Sonderfälle, wie z.B. ab wie vielen Zeichen die Autosuggest Liste angezeigt wird oder dass sich das Search Icon bei aktiver Eingabe

UX Doku Teil 1: User Flow

UX Doku Teil 2: Designscreen Flow

UX Doku Teil 3: Beschreibung

07.

UI Doku Design Library

Die User Interface Dokumentation in der Design Library dient den Entwicklern zur Erleichterung der Umsetzung der Oberfläche. Sie beschreibt die verwendeten Komponenten, Schriftarten und Stile.

08.

User Testing

Im Usertest wurden den Probanden verschiedene Aufgaben erstellt, um herauszufinden, ob diese die Logik des Modals verstehen würden. Da bei den Teilnehmern keine grundlegenden Schwierigkeiten auftraten und den meisten das Konzept schlüssig schien, mussten in diesem Fall keine Änderungen vorgenommen werden. Lediglich der Text im Disabled Input war für einen User schwierig zu erkennen („Maximal 3 Hunderassen“), hier war man jedoch an den Styleguide des Kunden gebunden.

Testimonial

„Lieber Lukas, danke für diese in sich schlüssige und benutzerfreundliche Lösung für das Hunderassenthema, das du uns heute präsentiert hast. Und danke vor allem auch für die wahnsinnig schnelle und saubere Ausarbeitung!“

Portfolio

Ähnliche Projekte

AirGuide – Digital Tour Guide

Wireframes, UX/UI Design, Branding

silencio – Fighting noise pollution

UI/UX Design, Prototyping, Branding