Meisterhafte UI-Konsistenz: Wie Sie ein nahtloses Benutzererlebnis schaffen
Haben Sie sich schon einmal darüber geärgert, eine Website oder App zu benutzen und einfach nicht zu verstehen, wie sie funktioniert? Natürlich haben Sie das.
Der Grund für Ihren Frust ist höchstwahrscheinlich eine schlecht gestaltete Benutzeroberfläche, die es Ihnen nicht erlaubt, intuitiv zu navigieren. Stattdessen müssen Sie anhalten und jedes Element analysieren, um zu verstehen, wie es funktioniert und wozu es dient.
Einer der häufigsten Fehler, der zu schlechtem Produktdesign führt, ist Inkonsistenz in der Benutzeroberfläche.
Du willst mehr vom The CPO Club?
Registriere dich für eine kostenlose Mitgliedschaft, um diesen Artikel vollständig zu lesen:
Have an account? Log In
Abgesehen davon, dass es sich um einen der weit verbreitetsten Fehler handelt, lässt er sich auch sehr leicht beheben oder insgesamt vermeiden. Schauen wir uns also an, worum es bei UI-Inkonsistenz geht und wie Sie sicherstellen können, dass Ihre Nutzer davor verschont bleiben.
Verständnis von UI-Konsistenz
Wie der Name schon sagt, bedeutet UI-Konsistenz, dass gleichartige UI-Elemente, Atomic Design und das gesamte Nutzererlebnis für dieselbe Art von Aktion oder Entität in Ihrem Produkt identisch sind.
Wenn Sie an mehreren Stellen in Ihrer Benutzeroberfläche Primär-Buttons haben, sollten diese alle gleich aussehen (UI) und sich gleich verhalten (UX). Wenn Sie sich zum Beispiel bei Ihrem Dropbox-Konto anmelden und die verschiedenen Bereiche durchstöbern, werden Sie feststellen, dass alle primären Aktionsschaltflächen identisch sind.
Wenn Sie genauer hinschauen, sind nicht nur die primären Aktionsschaltflächen in Dropbox konsistent gestaltet, sondern fast alle Elemente.
Es gibt mehrere wichtige Gründe, warum Design-Teams großen Wert auf einheitliches User Interface Design legen. Nämlich:
- Es sieht übersichtlich und angenehm fürs Auge aus. Vielfalt ist auf Benutzeroberflächen nicht unbedingt wünschenswert. Zu viele unterschiedliche visuelle Elemente erschweren die Benutzeroberfläche und beeinträchtigen die Lesbarkeit.
- Es wirkt professionell. Eine aufgeräumte Benutzeroberfläche hinterlässt den Eindruck von Professionalität und Kompetenz. Nutzer tendieren dazu, Marken mehr zu vertrauen, wenn ihre Websites oder Produkte gut gestaltet sind.
- Es verbessert die Nutzererfahrung. Wenn Sie irgendwo bei Dropbox einen schwarzen Button als primäre Aktion identifizieren, wissen Sie jedes Mal, wenn Sie einen identisch aussehenden Button sehen, dass es sich ebenfalls um eine primäre Aktion handelt. Sie müssen also nicht jedes Mal darüber nachdenken, was dieser Button bewirken soll.
Schließlich gibt es auch noch den Faktor der Entwicklung der Benutzeroberfläche. Wenn in Ihrem Produkt überall konsistente UI-Elemente verwendet werden, muss das Frontend-Team nicht jedes neue Element von Grund auf neu entwickeln. Stattdessen wird ein einzelnes Element erstellt und in den neuen Screens wiederverwendet, die entwickelt werden müssen. Auf diese Weise reduzieren Sie die Zeit, um neue Oberflächen und Funktionen zu entwickeln, drastisch.
Trotz ihrer Wichtigkeit und des Einflusses auf die Nutzererfahrung wird Konsistenz im Design oft nicht umgesetzt. Sogar große Tech-Produkte sind diesem Problem nicht fremd. Das Einstellungsmenü von Android ist mein Lieblingsbeispiel.
Schauen Sie sich die verschiedenen Elemente in dieser Liste an und sagen Sie mir, welche davon anklickbar sind (Buttons) und welche nur informativer Text. Wahrscheinlich können Sie es nicht sagen, es sei denn, Sie öffnen das Menü auf Ihrem eigenen Telefon und tippen auf alles.
Selbst wenn Sie es richtig erraten haben (Es sind „Google Kontodaten" und „Fotos & Videos"), mussten Sie dafür ein wenig kognitiv nachdenken.
So sollte UX aber nicht funktionieren. Schließlich sagt das berühmte Zitat des UX-Gurus Steve Krug:
Lass mich nicht nachdenken.
Übrigens empfehle ich Ihnen sehr, sein Buch sowie die „Bibel“ für UX von Don Norman – The Design of Everyday Things – zu lesen.
Die Grundidee ist hier, dass Ihre Nutzer Elemente auf Ihrer Benutzeroberfläche automatisch wiedererkennen können, ohne nachdenken zu müssen, was es ist, und so Ihre App quasi auf „Muskelgedächtnis“-Niveau bedienen.
Grundlagen des UI-Designs
Bevor wir uns damit beschäftigen, wie Sie Ihr Design konsistent halten, lassen Sie uns noch einmal die grundlegenden Designprinzipien durchgehen, die eine benutzerfreundliche Benutzeroberfläche und Konsistenz überhaupt erst möglich machen.
Klarheit und Einfachheit
Die Zeiten von Webseiten mit blinkenden GIFs und allen Farben des Regenbogens auf der Benutzeroberfläche sind vorbei (Millennials, erinnert ihr euch an diese Zeit?).
Je mehr Menschen das Internet zu nutzen begannen, desto mehr achteten UI- und UX-Designer darauf, wie sie Benutzeroberflächen wahrnehmen und mit ihnen interagieren.
Schon bald stellten sie fest, dass zu viele Farben und visuelle Elemente die Nutzer daran hindern, die gewünschten Aufgaben auszuführen. Stattdessen erhalten sie beim Durchsuchen solcher UIs nur eines: Augenbelastung.
Deshalb haben wir uns ganz natürlich Minimalismus und Einfachheit zugewandt. Tatsache ist, dass UI-Konsistenz eine weitere Möglichkeit ist, Ihre Benutzeroberfläche einfacher zu gestalten.
Visuelle Hierarchie
Wenn viele Elemente auf Ihrem Bildschirm sind, wird es schwierig zu verstehen, wie sie zueinander in Beziehung stehen. Woher weiß man beispielsweise, ob ein bestimmter Text ein Artikel-Header oder einfach nur Teil des Fließtexts ist?
Sie helfen Ihren Nutzern, diese Zusammenhänge mit visueller Hierarchie zu verstehen. Wenn Sie Elemente ganz nach oben stellen, sie größer, farbiger, fett oder mit anderen Tricks hervorheben, können Ihre Nutzer auf einen Blick erkennen, dass diese wichtiger sind als andere Elemente auf dem Bildschirm. Daher werden diese Elemente vom Nutzer intuitiv zuerst erfasst, bevor er sich dem nächsten zuwendet.
Es gibt ein berühmtes Meme, das die Magie der visuellen Hierarchie demonstriert.
Mussten Sie beim Lesen des Textes eben schmunzeln? Genau, wie jeder andere Mensch ist auch Ihre Wahrnehmung darauf ausgelegt, der visuellen Hierarchie zu folgen.
Feedback
Jedes Mal, wenn Ihre Nutzer eine Aktion in Ihrem Produkt ausführen, erwarten sie zu verstehen, ob diese Aktion auch tatsächlich erfolgt ist.
Wenn Sie zum Beispiel auf den Button „Löschen“ klicken und danach nichts Offensichtliches passiert, könnten Sie verwirrt sein. Wurde gelöscht, oder ist ein Fehler aufgetreten? Um den Nutzern hier zu helfen, sollten Sie ihnen eine visuelle (oder akustische bzw. sogar haptische) Rückmeldung geben, die das Ergebnis ihrer Aktion kommuniziert.
Wenn Ihr System die Löschanfrage erfolgreich bearbeitet hat, teilen Sie dem Nutzer mit, dass das Element gelöscht wurde. Wenn stattdessen ein Fehler auftritt, kommunizieren Sie diesen ebenso. So weiß der Nutzer, dass sein Element nicht gelöscht wurde, und er kann es noch einmal versuchen oder Sie für Support kontaktieren.
Best Practices für konsistente Benutzeroberflächen
Auf den ersten Blick scheint UI-Konsistenz sehr einfach zu sein, und jeder Designer sollte sie problemlos erreichen können. Das stimmt auch – vorausgesetzt, Sie sind der einzige, der an dem Produkt arbeitet und das Produkt selbst ist überschaubar und einfach.
In dem Moment, in dem Sie jedoch in einem größeren Team arbeiten (wo jeder Designer seinen eigenen Stil hat) und an einem Produkt, das Dutzende Seiten und Funktionen umfasst, wird die Konsistenz der Elemente zur echten Herausforderung.
Sie können sich schlichtweg nicht physisch merken, wie jedes einzelne Element im Produkt aussieht und dieses dann im neuen Feature exakt nachbauen.
Glücklicherweise gibt es viele Prozesse und Frameworks, mit denen Sie das Risiko von Inkonsistenzen in Ihrem Design deutlich reduzieren können. Hier sind drei, die als Branchenstandard gelten.
Styleguides: Hierbei handelt es sich um ein Dokument, das die Designstandards Ihres Produkts festlegt und Ihre Markenidentität widerspiegelt. Es umfasst die Typografie (also Schriftarten, -größen, Platzierungen usw.) für verschiedene Textarten (z. B. Überschriften, Fließtext, Kommentare), Ikonografie, Ihre Farbpalette und andere zentrale Designelemente.
Mit einem Styleguide stellen Sie sicher, dass das gesamte Designteam nach denselben globalen Standards arbeitet und Ihre Inhalte, Farben sowie Ikonen im gesamten Produkt konsistent sind.
Apple ist vermutlich das beste Beispiel dafür, wie konsequent ein Styleguide durchgesetzt wird – sogar bei Unternehmen, die Apps für deren Produkte entwickeln.
Das Beispiel hier zeigt den Styleguide für den Button, den Sie auf Ihrer Website einbauen können, um Nutzern den Download Ihrer App aus dem App Store zu ermöglichen. Wie Sie sehen, gibt Apple sehr klare Vorgaben, wie dieser Button verwendet werden darf.
Pattern Libraries: Dies ist ein weiteres essentielles Dokument, das die Details der Design-Standards auf niedriger Ebene beschreibt, im Gegensatz zu den vorherigen Richtlinien, die die Designgrundlagen auf hohem Niveau festlegen. Design Pattern Libraries sind ein häufiges Ergebnis, wenn Ihr Team nach Atomic Design Prinzipien arbeitet.
Das Konzept von Atomic Design basiert darauf, klar definierte kleine UI-Elemente zu nutzen, die miteinander kombiniert komplexere Komponenten ergeben. Übliche Kategorien dieser Elemente und Kombinationen in diesem Framework umfassen:
- Atome (daher der Name): Basiselemente wie Formulare, Schaltflächen, Symbole und andere. Diese Elemente lassen sich nicht weiter zerlegen.
- Moleküle: Kombinationen von Atomen, die einen bestimmten Zweck erfüllen. Beispiele sind die Seitennavigation für Listen, Brotkrumen zur Navigation usw.
- Organismen: Komplexere Interface-Elemente, die aus mehreren Atomen und Molekülen bestehen und Einheiten repräsentieren. Dazu gehören Karten, Suchleisten und Ähnliches.
- Templates: Kombinationen von wiederverwendbaren Organismen, die du zu deinen Seiten hinzufügen kannst. Das können z. B. Suchergebnislisten oder Produktbeschreibungsabschnitte sein.
- Seite: Das Endergebnis deines Designs und der Ort, an dem der Benutzer damit interagiert. Wie der Name schon sagt, sind das die verschiedenen Seiten deines Produkts, etwa deine Startseite.
Eine Pattern Library ist eine Sammlung standardisierter Moleküle und Organismen, die du in deinem Design einsetzen kannst. Du erreichst Konsistenz, indem du immer dieselben Elemente in verschiedenen Bereichen deines Produkts wiederverwendest, denn die Nutzer erkennen das Element sofort wieder, wenn sie eine bestimmte Seite öffnen.
Designsystem: Dies ist die Gesamtkombination aus übergeordneten Styleguides, Schriftarten, Farbschemata und detaillierten Beschreibungen kleinster UI-Elemente – sowie eine Sammlung vorgefertigter UI-Komponenten, die du sowohl beim Design als auch bei der Entwicklung des Produkts einsetzen kannst.
Nahezu alle großen Tech-Unternehmen entwickeln ihr eigenes Designsystem, um visuelle Konsistenz zu gewährleisten. Google hat Material, Shopify hat Polaris und Apple hat das Human Interface. Es gibt auch eigenständige Open-Source-Systeme, die du problemlos in dein Produkt integrieren und kostenfrei nutzen kannst. Mein Favorit unter diesen ist ant.design.
Wie andere Designsysteme bietet es sowohl eine Designbibliothek, die du in Figma oder anderen gängigen Tools nutzen kannst, als auch eine Komponentenbibliothek, die bereits für beliebte Frameworks (z. B. react) vorgefertigt ist und von deinen Entwicklern direkt im Code verwendet werden kann.
Tools zur Wahrung von UI-Konsistenz
Damit dein Design in allen Teams und Produktbereichen konsistent bleibt, musst du deine Richtlinien dokumentieren und dafür sorgen, dass das gesamte Team daran mitarbeitet.
Zur Dokumentation und Anwendung deiner Designstandards in alltäglichen Features und Screen Designs kannst du die spezialisierten Funktionen vieler moderner Design-Tools nutzen.
Figma zum Beispiel ermöglicht es, skalierbare Komponenten zu erstellen, die du in deiner Designsystem-Datei speicherst, sodass jeder im Unternehmen sie verwenden kann.
Außerdem unterstützt Figma UI Kits – eine vorab zusammengestellte Bibliothek von Designrichtlinien und Regeln, die du aus der Figma-Bibliothek herunterladen und in deinen Produkten verwenden kannst. Hier ist ein Kit für Googles Material Design.
Mit diesem Kit erhältst du eine große Auswahl an Elementen für die Gestaltung einer Android-App nach Googles Designstandards.
Kommen wir nun zur Zusammenarbeit: Ohne ausreichende Teamarbeit im Designteam wirst du zwangsläufig Elemente haben, die nicht zu deinen Richtlinien passen und die visuelle Konsistenz stören. Glücklicherweise gibt es auch UX/UI-Design-Tools zur Förderung der Zusammenarbeit.
Zeplin zum Beispiel unterstützt Designer und Entwickler bei der effektiveren Zusammenarbeit, indem es entwicklerfreundliche Versionen des Designs erzeugt, in denen das Codeteam genaue CSS-Spezifikationen der Elemente und die fertigen Bilder, Icons und anderen Assets leicht herunterladen kann. Außerdem lässt es sich mit anderen Tools für die UI-Entwicklung integrieren, sodass du deine Designs einfach aus den ursprünglichen Anwendungen in Zeplin übertragen kannst.
Testen und Weiterentwickeln für UI-Konsistenz
Ebenso wie deine Produktanforderungen oder Strategien sind auch Designrichtlinien keine statischen Dokumente. Du wirst sie immer wieder ändern und aktualisiert halten müssen.
Einige der häufigsten Gründe, deine Richtlinien zu ändern, sind:
- Hinzufügen neuer Elemente, die in der Bibliothek bislang fehlen.
- Übernahme aktueller Designtrends und Best Practices.
- Entdecken von Problemen und „Design-Bugs“, die behoben werden müssen.
Schließlich ist es eine gute Praxis, Ihr Designteam gelegentlich überprüfen zu lassen und kleine Verbesserungen daran vorzunehmen.
Abgesehen davon, dass das allgemeine Erscheinungsbild und die Qualität Ihres Designs verbessert werden, ermöglicht Letzteres zudem das Durchführen eines sogenannten „UI-Konsistenztests“, bei dem Ihr Designteam aktiv nach Unstimmigkeiten im Designsystem sucht und diese behebt.
Sie können einen solchen Test auch an Ihren fertigen Designs durchführen. Es besteht immer die Möglichkeit, dass verschiedene Features Elemente enthalten, die im UI Kit nicht vorhanden sind oder nicht so aussehen, wie sie sollten.
Neben internen Tests würde ich Ihnen auch empfehlen, Ihre Nutzer aktiv in den Testprozess einzubeziehen. Es gibt zwei Möglichkeiten, dies zu tun.
- Bitten Sie um Feedback zum Design, verstehen Sie die Bedürfnisse Ihrer Nutzer und iterieren Sie das Design aktiv auf Basis ihrer Kommentare.
- Führen Sie Usability-Tests durch, um das Maß an Konsistenz Ihrer Benutzeroberfläche zu verstehen.
Bezüglich Letzterem: Stellen Sie sich vor, Sie haben Ihren primären Aktions-Button an 10 verschiedenen Stellen in Ihrem Produkt verwendet. Sind Sie sicher, dass Ihre Nutzer in allen 10 Fällen diesen als Hauptaktion erkennen?
Sie können sich dessen nur sicher sein, wenn Sie moderierte oder unmoderierte Usability-Tests mit Prototypen, die mit Ihrem UX-Tool erstellt wurden, durchführen und beobachten, wie Nutzende damit interagieren.
Basierend auf diesen Tests und dem Nutzerfeedback können Sie anschließend datengestützte Designentscheidungen treffen.
Lass mich nicht nachdenken
Konsistenz ist eines der Kernelemente eines gelungenen UI-Designs. Wenn Sie alles einfach und visuell einheitlich halten, stellen Sie sicher, dass Ihre Nutzer sich auf Ihrer Benutzeroberfläche nicht verlieren. Stattdessen verstehen sie intuitiv den Zweck jedes Elements auf dem Bildschirm und führen ihre Aufgaben mühelos aus.
Vergessen Sie nicht, unseren Newsletter für weitere Ressourcen und Leitfäden zum Produktmanagement zu abonnieren - sowie für aktuelle Podcasts, Interviews und andere Einblicke von Branchenführern und Experten.
