UX: User Centered Process einfach erklärt
Mitte April 2021 hatten wir die Gelegenheit, einen Workshop zum Thema UX Design zu besuchen. In diesem Beitrag versuchen wir euch die wichtigsten Erkenntnisse weiterzugeben.
Was ist UX?
Die User eXperience (UX) wird häufig mit dem Begriff User Interface (UI) gleichgesetzt. Das UI ist ein Bestandteil von UX, vernachlässigt aber den Feel- und Usability-Aspekt von UX.
- Usability: Die wichtigsten Funktionen sind schnell erreichbar, gut als solche erkennbar und verhalten sich intuitiv.
- Look: Layout, Visual Design und Branding
Beispiel: Online Auftritt Conforama vs. Pfister.- Conforama: Aktionen im Zentrum, Möbelstücke freistehend präsentiert, Preise und Rabatte werden gross und farbig dargestellt.
- Pfister: Grosse Bilder um Stimmung zu schaffen, die Möbel werden unten auch einzeln verkauft, es wird aber mit ganzen Wohnungseinrichtungen geworben.
- Feel: Das Gefühl muss auf die Zielgruppe ausgerichtet sein. Joy of Use nicht übertreiben, der Mehrwert muss ersichtlich sein!
Beispiele:- Outfittery: Filtert Kleidung so, dass nur wenige, aber vom Typ her passende Kleider vorgeschlagen werden. Dies aus dem Grund, dass für die Kundengruppe Effizienz wichtig ist.
- Fluggesellschaft: Der Anspruch der Zielgruppe ist, ein Wochenende an sonnigem Ort zu verbringen. Da ist eine Lösung, das Ziel auf einer Karte mit Drag'n'Drop wählbar zu machen. Die Wettervorhersage vom gewählten Ziel wird direkt angezeigt.
User Centered Process
Dieser Prozess zeigt auf, welche Phasen man bei einem UX Projekt durchläuft. In den folgenden Abschnitten wird jede Phase einzeln erklärt.
1. Kickoff
Beim Kickoff sollten die ersten wichtigen Anhaltspunkte von allen gleich verstanden werden. Dazu werden sie oft in einem Creative Brief kommuniziert und festgehalten. Dieser kann sehr kurz sein (ca. 1 A4 Seite lang) und enthält in der Regel die folgenden Elemente:
- Kunde
- Hintergrund:
- Angebotene Produkte
- Abhebung von Konkurrenten
- Zielgruppe
- Probleme
- Konkurrenten
- Image und gängige Vorurteile gegen den Kunden
- Auftritt und Image das erreicht werden will
- Lieferobjekt (Desktop, Mobile, Web; n-Vorschläge)
- Ist es eine Live Seite oder ein Mockup?
2. Discovery
In der Discovery-Phase werden Informationen zur Zielgruppe, Problem und der angestrebten Lösung gesammelt.
Bei existierenden Produkten kann der Nutzer bei der Bedienung beobachtet werden. Dies sollte in dem Umfeld geschehen, indem das Produkt eingesetzt wird. Der Nutzer soll seine Überlegungen idealerweise kommentieren. Folgende Punkte sollten dabei analysiert werden:
- Aktive Sinnesorgane (Sehen, Hören, …)
- Umgebungsbedingungen (Lichtverhältnisse, Störgeräusche, …)
- Vorgehen
- Emotionen/Gemütszustand
- Genutzte Hilfsmittel (z. Bsp. Spickzettel für Tastenkombinationen)
- Beteiligte Personen
Falls der Nutzer nicht beobachtet werden kann, oder weitere Informationen benötigt werden, werden Fokusgruppen, 1:1 Interviews und Umfragen eingesetzt.
Die Konkurrenzanalyse sollte auch bei der UX Entwicklung Bestandteil der Analyse-/Discoveryphase sein. Gute Lösungsansätze für gewisse Probleme können übernommen werden und es kann eine gezielte Differenzierung in der Erfahrung stattfinden.
Checkliste Discovery
- Von welchen Problemen ist der Nutzer (wirklich) betroffen?
- Was für eine Lösung braucht der Nutzer (wirklich)?
- Was wünscht sich der Nutzer (auch, wenn er es gar nicht weiss)?
- Was macht die Konkurrenz gut/schlecht?
- Wie hebe ich mich von anderen ab?
- Wieso sollten Nutzer mein Produkt kaufen?
Hilfreiche Tools für die Discovery Phase
3. Define
Die Erkenntnisse aus der Discovery-Phase werden in dieser Phase strukturiert. Dafür werden Personas und User Journey Maps sowie User Flows und Storyboards erstellt.
Personas
Die Zielgruppe wird durch fiktive Personas dargestellt. Diese basieren auf den gesammelten Erkenntnissen der Discovery-Phase. Jede Persona erhaltet eine Kurzbiographie, welche Charakterzüge und Affinitäten enthält. Die Personas sollen ernsthaft und möglichst ohne Stereotypen erstellt werden. Design Entscheidungen sollen später durch das Hineinversetzen in die Personas begründet werden können.
User Journey Map
Die User Journey Map hält die Interaktionen der Zielgruppe mit dem Produkt ganzheitlich (inkl. Umgebung) fest. Aktionen, Emotionen und involvierte Objekte und Orte werden aufgezeichnet und Highlights und Pain-Points markiert.
User Flow / Storyboard
Die Benutzerabläufe bestimmen die Anzahl und Reihenfolge der Screens, sowie die benötigten Komponenten. Die Screens müssen noch nicht detailliert ausgearbeitet werden, es geht darum zu zeigen, welche Probleme wie gelöst werden können.
Checkliste Define
- Zielgruppen und Bedürfnisse sind allen Beteiligten gleich verständlich?
- Detaillierte Abläufe des Nutzers sind mir klar?
- Mit welchen Geräten interagiert der Nutzer (Multiscreen Experience)?
- Umfang der Applikation ist definiert?
- Schnittstellen sind klar?
Hilfreiche Tools für die Define Phase
4. Ideation
Die Ideation besteht aus Ideenskizzen und Lo-Fi/Paper Prototypen. Ersteres wird üblicherweise in Workshops und Brainstorming-Sessions erarbeitet. Die Lo-Fi Prototypen, oder Prototypen aus Papier eignen sich gut um Userfeedback zu holen. Durch das offensichtlich noch unterentwickelte «Look&Feel» der Komponenten, steht automatisch das Konzept im Fokus der Testuser. Das Konzept sollte den Ablauf befolgen. In dieser Phase sollte man folgende Fragen beachten:
- Sieht man die wichtigen Elemente?
- Wie kann man interagieren?
- Sind alle wichtigen Elemente auf dem Screen?
- Wie sind die Übergänge gestaltet?
Checkliste Ideation
- Ich kenne die Hauptscreens/Interaktionen?
- Ich bin überzeugt, mindestens zwei gute Lösungen zu haben?
- Mit diesen Screens kann ich anderen meine Ideen verständlich machen?
- Mit diesen Screens kann ich eine technische Abklärung machen?
- Mit diesen Screens kann ich meine Idee überprüfen?
Hilfreiche Tools für die Ideation Phase
- mural.co
- miro.com
- milanote.com
- Papier und Stift
- dribble.com
- balsamiq.com
- wireframe.cc
5. Validation
In dieser Phase wird überprüft, ob die Idee vom Nutzer verstanden und gebraucht wird. Testen und beobachten sollte man wenn möglich mit echten Nutzern. Falls man verschiedene Varianten hat, A/B-Testing durchführen, um die beste zu finden.
Hilfreiche Tools für die Validation Phase
6. Design & Development
Umsetzung der Idee in einem Hi-Fi Prototype testen. Animationen entwickeln um Geschwindigkeit und technische Einschränkungen, z. Bsp. durch Performance auf dem Nutzergerät, zu erkennen. Mit dem Visuellen kann man einen Zustand und das Aussehen abdecken. Wie sich aber die Bedienung anfühlt, mit Interaktionen, Bewegungen und Animation, muss man ausprobieren und dementsprechend entwickeln.
Design Prinzipien
In der Design Phase sollte man folgende Prinzipien befolgen:
-
Visibility: Gutes Interaktionsdesign ist sichtbar.
- Interaktionselemente klar visualisieren (z. Bsp. Button anstelle von klickbarem Text)
- Visuelle Hilfestellungen
- z. Bsp. nur wichtige Interaktionselemente in Primärfarbe
- oder beim Cookie-Banner "Tracking-Cookies Ablehnen" als disabled Button gestallten (sonst könnte ja jemand auf die Idee kommen das anzuwählen ;))
- Feedback: Das Prinzip, dem Benutzer deutlich zu machen, welche Aktion er durchgeführt hat und was er erreicht hat.
- Animationen und Micro-Interactions um Interaktionsmöglichkeit, Fortschritt, Fehlermeldungen, Alarm, Erfolgsmeldung, Status hervorzuheben
- Fehlermeldungen sollten bestmöglich folgendes beinhalten:
- Beschreibung was passiert ist
- Erklärung weshalb es passiert ist
- Lösungsvorschlage
- Nie den Nutzer beschuldigen
- Affordance: Haptische Darstellung von Elementen; das Aussehen erklärt die Bedienung
- On/Off Knopf mit sichtbarem Zustand
- Drehregler, Position und Anschläge sichtbar, Bedienung durch Form und Farbe intuitiv.
- Mapping: Vertraute Logik
- Vertrautheit mit Objekten und Aktivitäten der realen Welt ausnutzen
- Nicht vergessen die Aufhebung der physikalischen Limitierungen auszunutzen
- Metaphern bei der Gestaltung von Schnittstellen berücksichtigen (teils je nach Kultur anders)
- Drehregler: Steigerung von links nach rechts
- Temperatur: blau = kalt, rot = heiss
- Worte und Laute können Erwartungen an visuellen Elementen wecken:
- Beispiel: Maluma und Takete Studie, welche gezeigt hat, dass das Wort "Maluma" eher runden Formen zugeordnet wird, und "Takete" spitzigen.
- Vertrautheit mit Objekten und Aktivitäten der realen Welt ausnutzen
- Consistency: Gleiche Darstellung und gleiche Funktionalitäten über verschiedene Screens oder Medien
- Ästhetisch: Farben, Formen, Grössen, Schriften
- Funktionell: Ähnliche Menü-Führung
- Bekannte Formen: Playbutton, Diskettensymbol, etc.
- Simplicity: Einfach und klar
- Aufs wesentliche Reduzieren (z. Bsp. Google Hompage ist nur ein Suchfeld)
- Redundanz minimieren
- Selten verwendete Funktionen im Menu verstecken
- Gutes Design ist so wenig Design wie möglich; nur Akzente setzen wo nötig
- Spacing
- Viel Platz zwischen den Elementen verbessert die Lesbarkeit und Unterscheidbarkeit
- Text wirkt leichter + Elemente leichter anwählbar auf Touchscreen
- Kleine Varianz
- Möglichst wenig verschieden Fonts und Farben verwenden
- Primary Farbe kann durch "invertieren" (Rahmen und Text anstelle von Fläche färben) auch als Secondary genutzt werden.
- Aufs wesentliche Reduzieren (z. Bsp. Google Hompage ist nur ein Suchfeld)
- Structure: Verwandte Dinge zusammenbringen, Unterschiedliche unterscheiden
- Miller's Law: Ein Mensch kann sich durchschnittlich 7±2 Elemente einfach merken => Gruppen mit 5-7 Elemente bilden; das gilt auch für Formulare (z. Bsp. Personalstammblatt in Kategorien unterteilen)
Layout
Die wichtigsten Punkte, die man bezüglich Layout wissen sollte:
- Ausrichtung der Elemente beachten, Einheitliches Raster verwenden.
- Header und Content mit gleicher Margin zum Seitenrand - Stimmungsbilder um Kontext zu setzen, Text kurz halten und Lesbar machen evt. neutraler Farb-/Alphaverlauf über das Bild legen, das kann auch das Tauschen der Graphik erleichtern
- Informationsgehalt und deren Wichtigkeit geben Grösse und Positionierung der Elemente vor.
- Produktbilder gross; Markennamen klein; Buttons, die niemand verwendet, entfernen - Textblöcke mit reduzierter Breite können ansprechender wirken als lange Textzeilen
- Platz neben Textblöcken kann für eine Graphik verwendet werden die zum Text gehört oder für Elemente die Speziell hervorgehoben werden sollen (z. Bsp. Sonderangebot)
Hilfreiche Tools für die Development Phase
Key Takeaways
1) UX != UI
2) Gutes Design ist so wenig Design wie nötig.
3) Der Benutzer sollte immer im Mittelpunkt stehen.
4) Mit welchen Geräten interagiert der Nutzer (Multiscreen Experience)
5) Visibility => Interaktionen sind sichtbar und verständlich
6) Consistency => Gleich Darstellung und gleiche Funktionalitäten über verschiedene Screens oder Medien
7) Millers’s Law => Organisieren Sie den Inhalt in kleinere Abschnitte/Gruppierungen
8) Spacing => Das Gesetz der Nähe legt dies nahe: Zusammengehörige Elemente sollten näher beieinander liegen. Umgekehrt sollten nicht verwandte Elemente weiter voneinander entfernt sein.
Weitere Hilfreiche Links
Farben
- https://coolors.co
- https://color.adobe.com/de/create/color-wheel
- https://www.happyhues.co
- https://colorhunt.co
- [ Nicht Teil vom Workshop: https://tallys.github.io/color-theory/ ]
Icons
Illustrationen
Fotos
Videos
Data Visualization
Über die Referenten
Fabian Affolter arbeitet am Institut für Interatkive Technologien (IIT) der FHNW und ist Dozent für User Interface und Interaction Design. Er kommt von der technischen Seite und hat ein Bachelor-Studium in Informatik in der Profilierung iCompetence abgeschlossen. Ulrike Schock ist UX Designering und COO bei der Lusee AG. Sie kommt mehr von der gestalterischen Seite und hat Kommunikationsdesign studiert. Vor der Lusee AG war sie 8 Jahre als Mitarbeiterin am IIT und Dozentin für Design.
Kommentare