Mehr vom Gleichen
Wenn Sie noch nie von einem UI-Muster gehört haben, hier eine kurze Erklärung: Wie bei den meisten Dingen, insbesondere während der Softwareentwicklung, kann eine große Menge von Elementen oft gruppiert werden, da sie ein erkennbares Muster bilden. Ein Beispiel für Software wäre die Definition von Architekturmustern oder Mustern, die sich auf eine bestimmte Programmiersprache beziehen.
Es gibt jedoch auch gängige Muster beim Entwerfen von Benutzeroberflächen. Wenn Sie nur einen kurzen Blick auf einige Apps auf dem Gerät werfen, auf dem Sie diesen Artikel lesen, wiederholen sich bestimmte Dinge irgendwann:
- Modale Ansichten mit einer Aktion zum Speichern, Abbrechen und/oder Löschen delete
- Abschnitte von Elementen, die Text enthalten, zum Beispiel Listen mit einer Wischaktion für jedes Listenelement
Denken Sie also noch einen Schritt weiter: Gibt es Ressourcen, auf die Sie zugreifen können, wenn Sie selbst eine Benutzeroberfläche entwerfen? Vielleicht eine Sammlung von Mustern, die andere Designer bereits erkannt und formalisiert haben? Nun, ich würde diese Frage nicht stellen, wenn ich die Antwort nicht schon hätte! Zeit für Kapitel zwei!
Kapitel zwei (das angekündigte)
Auf der Suche nach einer formalen Definition hat das Carbon Design-Team von IBM eine großartige: Muster sind Best-Practice-Lösungen dafür, wie ein Benutzer ein Ziel erreicht. Sie zeigen wiederverwendbare Kombinationen von Komponenten und Vorlagen, die allgemeine Benutzerziele mit Sequenzen und Abläufen ansprechen.
Schauen wir uns einige Beispiele an. Die folgenden Einträge stammen von der Carbon Design-Site von IBM sowie der Material-UI-Musterseite von Google. Ich konnte keine Seite für Microsofts Fluent Design finden, habe aber trotzdem deren Startseite im Nachtrag verlinkt.
Suche
Das Durchsuchen von Inhalten gehört für die meisten Apps zu den wesentlichen Bausteinen und ist daher die perfekte Wahl, um ein UI-Muster dafür zu definieren. Unabhängig von ihrer endgültigen Verwendung (entweder eine globale Suche oder eine spezifische Suche auf einer Inhaltsseite) hat die Such-UI zu bieten
- eine Texteingabe
- ein textueller Platzhalter, wenn noch keine Eingabe vorhanden ist
- ein Symbol, das den Zweck der Texteingabe deutlich anzeigt, zum Beispiel durch eine Lupe, sowie als Auslöser für eine neue Suche dient
In bestimmten Fällen kann ein Hinweislabel helfen, zwischen verschiedenen Inhaltstypen zu unterscheiden oder Hilfe bei ungültigen Eingaben bereitzustellen. Je mehr Bedingungen eine Suche zu bewältigen hat, desto besser kann sich eine Suche dieser Anforderung anpassen, indem sie explizite Filtermenüs hinzufügt.
Dialog
Eines der sehr prominenten UI-Muster. Dialoge ermöglichen es einer App, Informationen anzuzeigen, ohne den Gesamtkontext einer Site zu verlieren. Dies wird dadurch erreicht, dass nicht das gesamte Fenster abgedeckt wird, sondern nur ein kleinerer Teil. Dialoge unterbrechen den aktuellen Workflow des Benutzers und sollten daher nur dann als notwendig erachtet werden, wenn ein Stopp im Workflow tatsächlich gültig ist. Sie sollten nur kleine Aufgaben erledigen und einen klaren Fokus darauf haben, was zu tun ist. Machen Sie beispielsweise nicht gespeicherte Änderungen rückgängig oder begehen Sie eine wichtige Aktion.
Leere Staaten
Auch wenn es zunächst seltsam klingen mag, sind leere Zustände in Apps sehr verbreitet. Es ist wichtig, dem Benutzer mitzuteilen, dass keine Daten verfügbar sind, und im Idealfall zu erklären, warum dies der Fall ist. Je nach Kontext kann ein Hinweis zum Auflösen des leeren Zustands sehr hilfreich sein, um eine gute UX zu erstellen. Ein Benutzer hat beispielsweise nach etwas gesucht, aber nichts gefunden. Dies kann ein Anwendungsfall sein, bei dem das Vorschlagen einer anderen Suchabfrage dem Benutzer helfen könnte, die Aufgabe zu erfüllen. In jedem Fall muss jede Ansicht, die einen leeren Zustand darstellt, kontextbezogen sein. Ein negatives Beispiel wäre so etwas wie „Das hat nicht funktioniert. Versuchen Sie es später noch einmal".
Behandeln Sie leere Zustände nicht als nachträglichen Einfall in Ihrem UI-Designprozess. Bei richtiger Implementierung ermöglichen sie den Benutzern einen reibungslosen Ablauf des Workflows. Leere Zustände, die den gesamten Workflow zum Erliegen bringen, sind eigentlich ein Worst-Case-Szenario, abgesehen von App-Abstürzen.
Nur ein Anfang
Dies war ein kurzer Blick auf einige UI-Muster, die ich aus dem Carbon Design von IBM sowie der Musterseite von Material UI ausgewählt habe. Das Anwenden von UI-Mustern auch auf Ihre App kann erheblich dazu beitragen, die Reibung zwischen dem Workflow eines Benutzers und der Benutzeroberfläche zu verringern, um die Aufgabe zu erfüllen. Das Entwerfen der Benutzeroberfläche kann eine ziemliche Herausforderung sein. Wenn Sie also auf den Schultern von Giganten stehen, indem Sie aus bestehenden UX-Studien lernen, können Sie die Wahrnehmung Ihrer Benutzer über das Verhalten Ihrer App verbessern.
