Wie kreiere ich einen Fokus im Design?
Aus der Reihe: UX Design in 5 Ebenen
Mit Design Thinking kann man nutzerzentriert Nutzerbedürfnisse und Produktanforderungen analysieren und iterativ verbessern. Mithilfe mehrerer Abteilungen können viele Nutzungskontexte einbezogen werden und der gemeinsame Wissenspool kann langfristig hilfreich sein. Mithilfe der 5 Elemente des UX Designs kann man sich den Maximen des Design Thinkings annähern. Dabei handelt es sich um ein konzeptionelles Framework, das den Designprozess in fünf Elemente aufteilt. Man analysiert das Problem in abstrakter Weise, um dann immer konkreter in den Fragestellungen und Lösungsideen zu werden. Die Erarbeitung der Ebenen sollte nacheinander ablaufen und Entscheidungen können dafür sorgen, dass die vorige Ebene erneut angegangen und ergänzt oder korrigiert wird. Das kann zum Beispiel beim Wechsel einer Priorität passieren.
In den vorigen Blogartikeln wurden bereits die Strategie und die Scope Ebene vorgestellt. In der ersten werden die Bedürfnisse der Nutzer:innen erforscht und die unternehmenseigenen Ziele. In der Scope Ebene werden daraus die Anforderungen analysiert, sodass Features und Inhalt des Produkts entworfen und priorisiert werden. In der Structure Ebene wird die Struktur des Produkts bestimmt. Die Skeleton Ebene visualisiert diese Struktur in erster grober Weise und die Surface Ebene setzt sich dann mit den Details auseinander. Unsere Fragen, die in diesem Blogartikel beleuchtet werden:
Wie erhöhe ich das Verständnis für Interaktionsmöglichkeiten?
Wie erleichtere ich die Navigation?
Wie setze ich den Fokus korrekt um?
Sensorische Sinne einbeziehen
In detaillierten Mockups wird es ästhetisch: Die visuellen Elemente werden so aufbereitet, dass sie ansprechend sind, gleichzeitig aber die erarbeiteten Ziele betonen. Man darf sich demnach nicht darauf ausruhen, dass ein Design modern und ansprechend aussieht. Wenn man zum Beispiel im Wireframe eine Struktur positioniert und abgegrenzt hat, sollte das Mockup durch Farbwahl und Abstände nicht dafür sorgen, dass diese Abgrenzung nicht mehr deutlich ist. Weiterhin sollte das Design das Auge leiten. Durch Hervorhebungen und zurückhaltende Elementdesigns sollte der Fokus auf die wichtigsten Elemente geleitet werden und so fortführen lassen, wie es für die Reihenfolge der Prozessschritte in der Oberfläche geplant ist.
Welche gestalterischen Mittel kann ich nutzen?
Kontrast sorgt für Hervorhebungen, die zum Beispiel den Call To Action Button erkenntlich machen. Kontraste helfen auch dabei, das Auge zu leiten, sodass man von einem kontrastreichen Element zum nächsten springt. Zu viele eingesetzte Kontraste lenken voneinander ab, sodass Hervorhebungen bewusst und reduziert eingesetzt werden sollten. Wenn ein Produkt regelmäßig neue Funktionen erhält, auf die man situationsbedingt aufmerksam machen möchte, kann das darin enden, dann man am Ende viele Call To Actions hat, da die ehemals neuen Funktionen immer noch betont sind. Daher ist es wichtig, bei neuen Funktionen objektiv zu hinterfragen, wie stark sie im eingesetzten Kontext betont sein müssen. Allgemein macht es Sinn, Designs einzelner Elemente in verschiedenen Kontexten auszuprobieren, um sicherzugehen, dass sie flexibel einsetzbar sind.
Ein Mittel, um visuell Ordnung zu schaffen, ist die Nutzung einer Tabellenstruktur, wodurch Elemente auf dieselbe vertikale oder horizontale Linie gesetzt werden. Zu viele genutzte Linien wirken visuell chaotisch, zu wenige können sehr statisch, bis zu langweilig wirken. Ein weiteres Mittel für mehr Ordnung und auch ein flexibles Layout sind Elemente in selber Höhe anzuwenden. Das erleichtert die Positionierung der Elemente nebeneinander.
Insgesamt wird in der Surface Ebene das Corporate Design angewendet. Wie detailliert es beschrieben ist, ist von Unternehmen zu Unternehmen unterschiedlich. Das Corporate Design mit der genutzten Farbpalette, der Typographie, den Icons und anderen Details sollten als Style Guide festgehalten werden. Zum Einen vereinfacht es die Arbeit an neuen Produktfeatures, da man sich der bestehenden Elemente bedienen kann und das Design konsistent bleibt. Zum Anderen verbessert man das Verständnis für Designentscheidungen, da die Gründe für die Farbwahl zum Beispiel festgehalten wird und auch für neue Kolleg:innen wird die Einarbeitung vereinfacht.
Welche Methoden gibt es?
In der Surface Ebene wird die Anwendungsoberfläche so detailliert gestaltet, dass man sie wie einen realistischen MVP evaluieren kann. Bei den Methoden konzentrieren wir uns also auf Evaluationsmethoden, die zu konstruktivem Feedback führen und auf Basis dessen man dann die Mockups optimieren kann.
Ressourcenintensiv
Wenn man genau prüfen möchte, ob der Fokus der Oberflächen korrekt gesetzt wurde, kann man dies mithilfe von Eye Tracking machen. Hierfür gibt es verschiedene Geräte. Optimal ist es, wenn die Geräte so unauffällig wie möglich nutzbar sind, sodass Nutzer:innen die Anwendung in einer weitestgehend natürlichen Umgebung testen können. Die erfassten Daten können in verschiedener Weise zur Auswertung visualisiert werden: Heatmaps markieren Stellen in der Oberfläche abhängig von der Häufigkeit und Dauer des Blicks. Eine Opacity Map dunkelt alle Bereich ab, die wenig bis gar nicht angesehen wurde. Die Methode kann helfen, schnell herauszufinden, ob Elemente nicht gefunden werden. Gazeplots stellen den gesamten Blickverlauf dar, sodass hier sehr gut geprüft werden kann, ob die geplante Blickrichtung erfolgreich umgesetzt wurde. Die Methode ist ressourcenintensiv, da die Anschaffung und Einarbeitung der Eye Tracking Hard- und Software eingeplant werden muss. Darüber hinaus finden Nutzertests statt, wofür passende Nutzer:innen aquiriert und Termine gefunden werden müssen. Danach müssen die Ergebnisse evaluiert werden. Im Idealfall findet jedoch nach jedem Nutzertest noch ein kurzes Interview statt, um weitere Informationen zu erhalten und Spekulationen in der Auswertung des Tests vorzubeugen.
Ressourcensparend
Beim Cognitive Walkthrough geht ein UX Experte die Mockups gedanklich durch, indem die Use Cases der Nutzer:innen Schritt für Schritt abgearbeitet und die Interaktion mit der Oberfläche evaluiert wird. Es wird kritisch geprüft, ob die Oberfläche ohne besonderen kognitiven Aufwand genutzt werden kann, um sein Ziel zu erreichen. Hierbei reicht es, wenn wenige UX Experten die Fälle gedanklich durchlaufen und die Notizen mit Verbesserungsideen dann weitergegeben werden.
Das empfohlene Minimum
Wenn es die Ressourcen hergeben, sollte die Evaluation nicht vom Designteam selbst kommen, das die Mockups erstellt hat. Man ist voreingenommen und nicht im selben Maß objektiv in der Ausübung kritischen Feedbacks wie Außenstehende. Aber auch für andere Kolleg:innen kann es schwierig sein, ehrliches Feedback zu geben. Zum Ermutigen können Black Hat Sessions helfen: Hierbei wird, im Sinne des Design Thinkings natürlich interdisziplinär, eine kleine Gruppe von Kolleg:innen eingeladen. Teilnehmer:innen setzen sich metaphorisch verschiedene Hüte auf, die einen bestimmten Fokus setzen: Optimismus, Emotionen, Kreativität und andere Sichtweisen, unter denen bestimmte Kritik beigesteuert werden soll. Eine weitere wichtige Sichtweise: Skepsis in Form des schwarzen Huts. Eine reine Black Hat Session fordert nur die Skepsis der Teilnehmer:innen ein, sodass sichergestellt wird, dass alle sich trauen, nur das negative Feedback abzugeben. Je nach individuellem Bedarf und Zielsetzungen macht der Einsatz mehrerer Hüte Sinn. In der Black Hat Session wird das Feedback über Post its notiert und neben die Mockups gehangen. Im Anschluss haben alle Teilnehmer:innen die Möglichkeit, das Feedback der anderen zu lesen und es wird Raum für Diskussionen gegeben. Mithilfe des gesammelten Feedbacks können die Mockups dann optimiert werden.
Ein Beispiel:
Ein Personalmanagementtool soll konzipiert und implementiert werden. Das eigene Software Unternehmen ist mit dem bisher genutzten Produkt nicht ausreichend zufrieden, sodass ein eigenes entwickelt werden soll. Da es sich um ein intern zu nutzendes Produkt handelt, handelt es sich bei den Nutzer:innnen um Kolleg:innen und die Stakeholder sind die Geschäftsführung, die Personalabteilung und Projektleitungen.
Welche Methode wird genutzt?
Der UX Experte gestaltet für alle Oberflächen des MVPs Mockups auf Basis der Erkenntnisse der vorigen Ebenen und unter Berücksichtigung des Style Guides. Die Mockups werden an ein Whiteboard gehangen und zwei Kolleg:innen aus der Personalabteilung und Projektleitung werden dazu gebeten, um die Black Hat Session durchzuführen. Für das Meeting inklusive Diskussion wird eine Stunde eingeplant. Während der Diskussion werden bereits auf den Mockups Verbesserungsvorschläge skizziert. Im Anschluss werden die digitalen Mockups entsprechend aktualisiert und dienen als Grundlage für die Implementierung.
Wer die letzte Ebene im Designprozess der 5 Elemente des UX Designs erfolgreich erarbeitet hat, hat den Designprozess des Produkts dennoch nicht abgeschlossen. Design Thinking verläuft iterativ. Würde man mit den korrigierten Mockups erneut eine Evaluation mit anderen Teilnehmer:innen durchführen, würde man mit hoher Wahrscheinlichkeit weiteres wertvolles Feedback erhalten. Weiterhin ergab die Evaluation vielleicht Kritikpunkte an anderen Stellen des Produkts, die in dem aktuellen Zeitpunkt aber nicht im Fokus standen. Die Punkte könnten als nächstes angegangen werden, um das Produkt nutzerfreundlicher zu gestalten.
Jede der Ebenen kann Verbesserungsvorschläge und Innovationen hervorbringen. Je nach zugeschriebener Priorität können Vorschläge dann ressourcenintensiv geplant werden oder so ressourcensparend wie möglich, ohne zu sehr von den Prinzipien des Design Thinkings abzuweichen. In dieser Blogreihe konnten hoffentlich genug Umsetzungsvorschläge präsentiert werden, die auch unter verschiedensten Voraussetzungen anwendbar sind. Wer weiteres Interesse an den 5 Ebenen des UX Design hat, dem wird erneut das Buch "The Elements of User Experience" von Jesse James Garrett empfohlen. Möglichkeiten zur flexiblen Umsetzung von UX Design Methoden mit praktischen Identifizierungen des jeweiligen Fokus werden im Buch "The User Experience Team of One: A Research and Design Survival Guide" von Leah Buley bereitgestellt.
