Blogpost vom 08. Februar 2023
3 UX-Strategien um Komplexität zu meistern
Eine große Herausforderung von Webanwendungen, ob am Desktop oder mobil, ist die visuelle Komplexität. Alle Screens haben eine begrenzte Größe und es ist oft nicht möglich – und auch nicht sinnvoll – alle Funktionen im sichtbaren Bereich zu platzieren.
Denn wenn die Weboberfläche zu überladen ist und mit Interaktions- und Designelementen überfrachtet, müssen Nutzer:innen oft erstmal jedes Element in Augenschein nehmen, um das zu finden, was sie gerade brauchen. Diesen Prozess der visuellen Inspektion können wir UX-Designer:innen deutlich optimieren.
Doch wie genau können wir die Komplexität von Webanwendungen reduzieren und die Orientierung der Nutzer:innen auf der Bedienoberfläche verbessern?
Im Folgenden möchten wir drei Strategien vorstellen, die es Nutzer:innen erleichtern, sich in komplexen Applikationen zurechtzufinden. Bei allen geht es darum, die Anzahl der Optionen zu verringern, um die Nutzer:innen schneller an das gewünschte Ziel zu bringen.
1. Wir platzieren die Dinge an der richtigen Stelle
Bei der ersten Strategie geht es darum, Dinge an einem erwartbaren Ort zu platzieren. Wenn wir eine fremde Küche betreten und einen Mülleimer suchen, werden viele von uns zunächst unter der Spüle nachsehen, denn dort findet man ihn erfahrungsgemäß oft. Sollten wir dort nicht fündig werden, öffnen wir nach und nach weitere Türen, solange bis wir fündig werden.
Übertragen auf einen Onlineshop werden wir beispielsweise nach dem Warenkorb zuerst oben rechts Ausschau halten, weil wir es gewohnt sind, ihn dort zu finden. Dieses Gewohnheitsverhalten gilt auch für die persönlichen Einstellungen, das Sortiment oder den Logout-Button.
Menschen haben also gewisse Erwartungen, wo sie typische Steuerelemente von Webapplikationen finden. Als Designer:innen sind wir folglich gut beraten, solche Funktionen an genau diesen Orten zu platzieren und erwartbare Layouts und Konvention zu verwenden. Das erleichtert den Nutzer:innen die Orientierung auf der Nutzungsoberfläche und erhöht die Zufriedenheit mit der Anwendung.
2. Wir gestalten eine klare visuelle Hierarchie
Empfehlenswert ist außerdem das sinnvolle Gruppieren artverwandter Features und Funktionen – deren Sinn und Zweck zudem deutlich und unmissverständlich gekennzeichnet ist.
Wer hat noch nicht einen vermissten Gegenstand in einer Schublade gesucht, die so aussieht wie die rechte Abbildung? Oft leeren wir die komplette Schublade, um das vermisste Stück zu finden. Oft auch nur, um festzustellen, dass es sich gar nicht darin befindet.
Das zeigt uns: Wenn es keine visuelle Hierarchie gibt, ist es sehr nervig und zeitaufwendig, Dinge zu finden. Die Wahrscheinlichkeit, dass wir die suche erfolglos und gereizt abbrechen, ist hoch.
Wenn die Schublade hingegen in kleine Fächer unterteilt ist, worin die Gegenstände möglichst sortenrein nach Ähnlichkeit sortiert sind, finden wir wesentlich schneller, was wir suchen.
Das Gleiche gilt für die Benutzeroberflächen von Webanwendungen. Wenn die Interaktionselemente klar gruppiert sind und sich an erwartbaren Stellen befinden, ersparen wir den Nutzer:innen sehr viel kostbare Zeit und Nerven.
In einer guten visuellen Hierarchie sind Dinge mit gleicher Funktion nahe beieinander platziert und von anderen Themengruppen durch Weißraum oder Linien getrennt.
Interaktionselemente mit hoher Relevanz oder Frequenz sollten außerdem so gestaltet sein, dass sie den Blick auf sich ziehen. Weniger wichtige Interaktionen dürfen demgegenüber optisch zurückhaltend oder nicht auf den ersten Klick erreichbar sein.
3. Wir sorgen für eine progressive Offenlegung
Die dritte Strategie ist die progressive Offenlegung. Das heißt, dass wir einige Elemente zunächst ausblenden. Welche, das entscheiden wir wieder anhand der Kriterien Relevanz und Frequenz bei der Nutzung.
Betrachten wir das Beispiel einer Buchhaltungssoftware. Hier gibt es Funktionen, die mit hoher Frequenz genutzt werden, z. B. das Erfassen von Rechnungen oder Belegen. Diese Funktionen sollten wir also prominent im User Interface platzieren. Die Funktion für den jährlichen Buchhaltungsabschluss hat demgegenüber eine sehr niedrige Frequenz, nämlich nur 1 x im Jahr, wenn der Jahresabschluss ansteht. Diese Funktion muss also nicht mit einem Mausklick erreichbar sein und darf auch an weniger prominenter Stelle im Menü verstaut werden.
Zum Verständnis hilft auch hier wieder ein Beispiel aus der Küche: Dinge, die mit hoher Frequenz und hoher Relevanz genutzt werden, bewahren wir am besten griffbereit auf – wie etwa Teller, Töpfe und Besteck. Für die Pasta-Maschine oder das Raclette-Zubehör tut es auch ein oberes Fach im Wandschrank.
Genauso ist es in Webapplikationen. Funktionen, die nur selten oder von wenigen Nutzern genutzt werden, können z. B. in Tabs, Untermenüs oder Akkordeons „versteckt“ werden. Diese Elemente folgen dann dem Prinzip der progressiven Offenlegung.
Fazit
Durch diese drei Strategien reduzieren wir Designer:innen die visuelle Komplexität von Webanwendungen nach dem Vorbild einer gut organisierten Küche: sie bietet alles, was wir für zum Kochen und Essen brauchen und ist dabei stets aufgeräumt und sinnvoll strukturiert.
