Wie positioniere ich die Inhalte und wie gestalte ich die Interaktionselemente?
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 mithilfe von Information Design, Interface Design und Navigation Design. Behandelt werden damit folgende Fragen:
Wo positioniere ich Inhalte und die Navigation, damit Nutzer:innen sich schnell zwischen den Seiten fortbewegen können?
Wie erhöhe ich das Verständnis, mit welchen Elementen man interagieren kann und mit welchen nicht?
Interface Design
Die Features, die in der Scope Ebene definiert und in der Structure Ebene kategorisiert wurden, werden über das Interface Design interaktiv ermöglicht. Dabei bieten sich beim Wording und der Wahl der Interaktionselemente Metaphern aus der realen Welt an, um die Einarbeitung für Nutzer:innen zu erleichtern. Dabei sollte man jedoch nicht zu weit gehen. Es besteht ein Unterschied zwischen der realen Welt und Konventionen von Softwarelösungen, die man durchaus als Designinspirationen bevorzugen kann.
Die Vorgehensweise beim Interface Design widerspricht der Vorgehensweise bei der Programmierung: Bei zweitem werden Abweichungen vom geplanten Nutzerpfad als Edge Cases bedacht, um Fehlerfälle abzufangen. Diese Edge Cases sollten im Interface Design weitestgehend außen vor gelassen werden, um die Oberfläche übersichtlich zu halten und den geplanten Pfad fokussiert zu präsentieren.
Navigation Design
In der Structure Ebene wurde der Inhalt über die Information Architecture strukturiert. Im Navigation Design überträgt man die Ergebnisse auf die Navigationselemente und dessen Position im Produkt. Es wird geplant, auf welcher Seite welche Links verfügbar sein sollten, da nicht in jedem Prozessschritt der Nutzer:innen alle Links relevant sind. Um den Fokus auf den aktuellen Prozess zu halten, sollten demnach nur Navigationswege ergänzt werden, die thematisch passen. Falls also entgegen der Konvention von vielen Softwares keine global erreichbare Navigation genutzt wird, kann hier mit einer lokalen Navigation gearbeitet werden. Dabei werden nicht alle Navigationswege dargestellt, sondern nur die hierarchisch naheliegenden, die als relevant genug eingeschätzt werden. Weiterhin sollten Links unterschiedlich visualisiert werden: Mehrere Links können bei thematischer Ähnlichkeit gruppiert und bei besonderer Wichtigkeit hervorgehoben werden. Das erleichtert Nutzer:innen die Orientierung im Produkt.
Information Design
Interface und Navigation Design werden vom Information Design gestützt, da sie ohne ausgearbeitetem Information Design missverständlich sein können. Inhalte werden mithilfe der gewählten konzeptionellen Modelle beschrieben und so gruppiert und sortiert, dass Nutzer:innen sich schnell zurecht finden. Dabei ist der Kontext immer einzubeziehen, da einige allgemein sinnvolle Gruppierungen von Inhalten in bestimmten Anwendungsfällen verändert werden sollten, um Prozessschritte sinnvoll abarbeiten zu können. Das kann bedeuten, dass Daten, die konventionell oft mit abgefragt werden, im konkreten Kontext eigentlich egal sind und daher entfernt werden können. Es kann auch bedeuten, dass die Daten einfach nur umsortiert dargestellt werden.
Warum sollte ich Konventionen folgen?
Design Thinking zielt eine hohe Nutzerorientierung bis hin zu Innovationen ab. Warum sollte man also Konventionen folgen, wenn man innovativ sein möchte? Gewohnheiten sorgen dafür, dass man effizient Aufgaben erledigen kann. Vor allem tägliche Aufgaben sparen Nutzer:innen viel Zeit, wenn die Prozessschritte täglich zügig abgearbeitet werden können. Wird also ein neues Produkt eingesetzt, das einem helfen soll, eine gewohnte Aufgabe effizienter zu erledigen, dann machen befolgte Konventionen es den neuen Nutzer:innen leichter, das Produkt fließend in den Alltag zu integrieren. Bei ungewohnten Strukturen und Interaktionselementen müssten die Nutzer:innen das neue konzeptionelle Modell erstmal anlernen. Dabei wäre also die Hemmschwelle größer, das neue Produkt auszuprobieren, weil mehr Zeit investiert werden müsste, obwohl man eigentlich Zeit sparen möchte. Innovationen machen demnach dann Sinn, wenn analysiert wurde, dass sich die investierte Anlernzeit durch gesparte Zeit in der anschließenden regelmäßigen Nutzung lohnt. Entscheidet man sich für ein konzeptionelles Modell, sollte dieses in der gesamten Anwendung beibehalten werden, um konsistent zu bleiben. Es bietet sich an, ähnliche Inhalte mit dem selben konzeptionellen Modell zu visualisieren.
Unser Ziel: Effizienz und Orientierung
Welche Methoden gibt es?
Ressourcenintensiv
Die Critical Artifact Method nimmt sich zum Anlass, innovative Ideen als Prototypen zu analysieren. Prototypen werden dabei absichtlich provokant entworfen, um innovative Ansätze kritisch zu hinterfragen. Weiterhin gewinnt man durch die konkretere Ausarbeitung ungewöhnlicher Ideen neue Erkenntnisse, die man als eventuell sogar unerwartete Innovationen erfassen kann.
Ressourcensparend
Ein Wireframe kann entweder ähnlich eines Papierprototypen auf Papier gezeichnet oder digital mit einem Designtool erstellt werden. Dabei werden Interaktionselemente und Inhalte nur grob skizziert. Es werden keine Details ausgearbeitet, sodass nur die Struktur visuell festgehalten wird und der Fokus auf der Positionierung liegt.
Das empfohlene Minimum
Sketchboards verbindet die schnelle Gestaltung von Wireframes mit dem kritischen Hinterfragen von innovativen Ideen im interdisziplinären Team, inkludiert aber auch die erfassten Ziele aus der Strategie Ebene. Und auch in der Skeleton Ebene gilt die Design Thinking Maxime, dass interdisziplinäre Zusammenarbeit die Entwicklung bereichert. Bei den Sketchboards wird eine große Papierfläche benötigt, die in verschiedene Bereiche unterteilt wird. Für jeden zu diskutierenden Prozess wird ein Bereich auf dem Papier vorbereitet, in den auch Post its mit den korrespondierenden Nutzer- und Unternehmenszielen geklebt werden. Eine Person sortiert ihre vorbereiteten Wireframes und Skizzen ein. Es fällt hier auf, an welchen Prozessschritten noch zu wenig Vorarbeit investiert wurde und wo viele Ideen vorhanden sind. Idealerweise werden für jeden Schritt mehrere Ideen erfasst. Dann beginnt die interdisziplinäre Diskussion: Es werden Teilnehmer:innen hinzugebeten, denen die Ideen erklärt werden und die mithilfe von ehrlichem Feedback helfen, die bestehenden Skizzen zu korrigieren und zu ergänzen. Klare Favoriten können sofort markiert werden. Am Ende der Diskussion muss deutlich sein, welche Ideen genug Konsens gefunden haben, dass sich detailliertere Designs in der nächsten Ebene lohnen.
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 Wireframes auf Basis der Erkenntnisse der vorigen Ebenen. Entsprechend hat er das Papier für die Sketchboards Methode bereits vorbereitet und die Post its mit den Produktzielen vor sich liegen, während die Wireframes entworfen werden. Dann lädt er zwei Kolleg:innen aus der Personalabteilung und Projektleitung einzeln für eine Diskussion ein. Während der Diskussion skizziert er die neuen sich herauskristallisierenden Ideen als weitere Wireframes. Für jede Diskussion wird eine Stunde eingeplant. Zur Nachbereitung wird eine weitere Stunde eingeplant, um die Ergebnisse zu ordnen und den Fokus der folgenden detaillierten Mockups zu definieren.
Wie wird die Navigation eingeplant?
Da die Software zwar sehr datenlastig ist, aber wenige einzelne Seiten hat, wird mit einer globalen Navigation gearbeitet. Dafür wird ein Rahmenelement genutzt, dass sich auf jeder Seite der Software befindet und wodurch Nutzer:innen immer denselben Orientierungspunkt haben. Alle Unterseiten sind über die Navigation erreichbar.
In der Skeleton Ebene der fünf Elemente des UX Designs hat man die Ergebnisse der vorigen Ebenen bereits in grober Weise skizziert. Durch die groben Skizzen konnten effizient verschiedene Design Ideen evaluiert werden, um sich letztlich für bestimmte Ideen zu entscheiden. In der letzten Ebene wird man nun also sehr konkret: In der Surface Ebene wird das Design nun detailliert ausgearbeitet.
