Die UX-Design-Checkliste

Während des Designprozesses bleiben einige Fehler in Ihrem Produkt unbemerkt. Diese kleinen (oder manchmal großen) Dinge können viel dazu beitragen, die Erfahrung zu beeinträchtigen, die der Benutzer bei der Verwendung Ihrer Software hat. Wir haben eine Liste mit Punkten zusammengestellt, die Sie überprüfen können, bevor das Design freigegeben wird.

Bitte beachten Sie, dass nicht alle dieser Punkte für alle Produkte gelten, aber im Allgemeinen sind dies die relevantesten.

Interaktionsdesign

01 – Sich wiederholende Aktionen oder häufige Aktivitäten fühlen sich mühelos an

Warum es wichtig ist: Wiederholte Aktionen für die gleiche Ausgabe (z. B. das Ausfüllen verschiedener Formulare mit den gleichen Informationen) ist eine anstrengende Aufgabe, die dem Benutzer nicht hilft, seine Ziele schneller oder besser zu erreichen. Der Benutzer wird wahrscheinlich auch versuchen, einen Weg zu finden, um es zu umgehen: zum Beispiel nach Konkurrenten suchen, die ihm helfen können, es schneller/besser zu machen.

So testen Sie es: Sie sollten damit beginnen, alle Flows Ihres Produkts zu analysieren und das Verhalten des Benutzers zu beobachten. Sie möchten sicherstellen, dass es bei sich wiederholenden Aktionen eine Möglichkeit gibt, diese zu erleichtern: eine Option zur Verwendung zuvor eingegebener Informationen.

02 – Benutzer können sich leicht von Fehlern erholen

Warum es wichtig ist: Häufig führen Benutzer unbeabsichtigte Aktionen oder Aktionen aus, die nicht zu den gewünschten Ergebnissen geführt haben – und ihnen zu erlauben, zurückzugehen und es erneut zu versuchen, bedeutet, dass sie nicht frustriert sind und sich leicht erholen und den Fluss fortsetzen können.

So testen Sie es: Stellen Sie zunächst sicher, dass Ihr Navigationssystem das Zurückgehen zulässt und dass Aktionen rückgängig gemacht werden können. Erstellen Sie dann bei der Durchführung von Usability-Tests Szenarien, in denen der Benutzer höchstwahrscheinlich die falsche Aktion ausführt, und prüfen Sie, ob er sich leicht erholen kann.

03 – Anwender werden entsprechend ihrem Kenntnisstand adäquat unterstützt

Warum es wichtig ist: Es ist wichtig sicherzustellen, dass unerfahrene Benutzer Ihres Produkts eine reibungslose Lernerfahrung haben. Sobald sie jedoch bereits mit dem Produkt vertraut sind, sollte dies Tools weichen, die ihnen helfen, sich schneller durch die Abläufe zu bewegen. Beide Szenarien verbessern die Benutzerfreundlichkeit und die Aufbewahrung. Zum Beispiel Shortcuts für erfahrene Benutzer, Tooltips für unerfahrene Benutzer usw.

So testen Sie es: Überprüfen Sie zunächst, ob Sie Tools für beide Zielgruppen haben. Führen Sie dann Usability-Tests mit Anfängern und erfahrenen Benutzern durch, um zu sehen, ob diese Tools richtig verwendet werden.

04 – Der Zugriff auf die Hilfe behindert den Fortschritt des Benutzers nicht

Warum es wichtig ist: Benutzer bitten um Hilfe, wenn sie in einem bestimmten Teil Ihres Produkts stecken bleiben. Es ist wichtig, dass die Hilfe – online oder offline – zusätzlich ist und es dem Benutzer ermöglicht, die Arbeit dort fortzusetzen, wo er aufgehört hat.

So testen Sie es: Erstellen Sie Testszenarien, in denen Benutzer um Hilfe bitten und sehen, ob ihre Arbeitsabläufe und Fortschritte unterbrochen werden.

Visuelle Gestaltung

05 – Nicht mehr als drei Grundfarben

Warum es wichtig ist: Dies ist keine feste Regel – und manchmal können in bestimmten Fällen mehr als drei Primärfarben verwendet werden. Denken Sie jedoch daran, dass das Kombinieren von drei Farben bereits schwierig ist, sodass in den meisten Fällen mehr als das vermieden werden sollte.

So testen Sie es: Stellen Sie sicher, dass die Farbpalette, die Sie beim Entwerfen des Produkts verwendet haben, nicht mehr als drei Primärfarben enthält.

06 – Farbe allein dient nicht dazu, Hierarchie, Inhalt oder Funktionalität zu vermitteln

Warum es wichtig ist: Ein barrierefreies Produkt zu haben, ist kein Plus – es ist ein Muss. Menschen mit Sehbehinderungen wie Farbenblindheit verlassen sich ausschließlich auf Farbe, um Hierarchie, Inhalt oder Funktionalität zu vermitteln. Dies bedeutet, dass sie Ihr Produkt nicht verwenden können und eine ausgeschlossene demografische Gruppe darstellen.

So testen Sie es: Mit colorfilter.wickline.org können Sie einen Farbfilter auf Ihre Webseite legen und ihn auf verschiedene Arten von Farbenblindheit testen. Sie können Ihr Produkt auch per Bildschirmaufnahme erfassen und in einem Bildeditor in Graustufen umwandeln und sehen, ob Sie Farben leicht voneinander unterscheiden können.

07 – Visuelle Hierarchie leitet den Benutzer zur erforderlichen Aktion

Warum es wichtig ist: Benutzer verlassen sich auf die Produkthierarchie und Hinweise, um zu wissen, was zu tun ist und wohin sie gehen müssen – es ist wichtig, dies zu verstehen und sie bei der Verwendung dieser Hierarchie richtig anzuleiten.

So testen Sie es: Verstehen Sie, wie die Abläufe in Ihrem Produkt funktionieren und ob die wichtigsten Aktionen durch die visuelle Hierarchie angeregt werden.

08 – Elemente an der Spitze der visuellen Hierarchie sind die wichtigsten

Warum es wichtig ist: Die visuelle Hierarchie ermöglicht es Benutzern, Informationen schnell zu durchsuchen und Inhalte basierend auf ihren unmittelbaren Bedürfnissen zu priorisieren. Elemente ganz oben in der visuellen Hierarchie müssen für das Unternehmen am wichtigsten und für die Benutzer am relevantesten sein.

So testen Sie es: Nehmen Sie eine Bildschirmaufnahme Ihres digitalen Produkts auf, und verwischen Sie diesen Screenshot dann mit Gaussian in einem Radius von etwa 5 Pixeln. Wenn Sie sich das Ergebnis ansehen, werden Sie sofort die Hierarchie visualisieren und feststellen, welche Elemente hervorstechen. Sind das die wichtigsten für das Unternehmen und den Benutzer?

09 – Primäre Aktion unterscheidet sich visuell von sekundären Aktionen

Warum es wichtig ist: Unterschiedliche primäre und sekundäre Aktionen bedeuten, dass der Benutzer bei der Interaktion mit Ihrem Produkt nicht verwirrt wird und weniger anfällig für Fehler ist. Beispielsweise müssen „Senden“ und „Abbrechen“ klar voneinander getrennt sein.

So testen Sie es: Achten Sie bei der Durchführung von Usability-Tests auf häufige Fehler, die nicht auf die Absicht des Benutzers zurückzuführen sind, sondern auf schlecht voneinander getrennte primäre und sekundäre Aktionen. Stellen Sie bei der Überprüfung des Designs außerdem sicher, dass Farbe, Größe, Positionierung und andere Elemente die Aktionen unterscheiden.

10 – Interaktive Elemente werden nicht abstrahiert

Warum es wichtig ist: Bei der Verwendung eines neuen Produkts kommen Benutzer mit einer Reihe von Erwartungen, die auf früheren Erfahrungen mit anderen digitalen Produkten basieren – zum Beispiel, wie Schaltflächen aussehen und wie sie funktionieren sollten. Diese Erwartungen zu erfüllen bedeutet, dass Sie keine unnötigen Reibungen erzeugen.

So testen Sie es: Überprüfen Sie zunächst Ihr Produkt und suchen Sie nach Bereichen, in denen gängige Muster nicht verwendet werden. Zum Beispiel Links, die nicht wie Links aussehen.

11 – Die Formularübermittlung wird visuell deutlich bestätigt

Warum es wichtig ist: Es ist wichtig, dem Benutzer eine Bestätigung darüber zu geben, ob eine Aktion erfolgreich ausgeführt wurde oder nicht. Beispielsweise wird nach dem Absenden eines Formulars eine eindeutige Bestätigungsmeldung in Form eines Farbbanners angezeigt, dass der Benutzer mit der nächsten Aufgabe fortfahren kann.

So testen Sie es: Überprüfen Sie alle Bereiche Ihres Produkts, in denen der Benutzer Informationen eingibt. Lösen Sie nach Abschluss der Benutzereingabe eine Bestätigung darüber aus, ob diese Aktion erfolgreich war oder nicht. Stellen Sie sicher, dass das Feedback bezüglich des Endstatus glasklar ist.

12 – Warnmeldungen sind konsistent

Was es ist: Warnmeldungen haben denselben visuellen Stil und werden auf dieselbe Weise an derselben Stelle angezeigt.

Warum es wichtig ist: Konsistente Warnmeldungen bedeuten, dass der Benutzer immer versteht, was sofort Aufmerksamkeit verdient. Nicht konsistent mit den Warnungen zu sein, würde jedes Mal eine zusätzliche mentale Belastung bedeuten, wenn eine neue Warnung auftaucht.

So testen Sie es: Stellen Sie sicher, dass Warnmeldungen den gleichen visuellen Stil haben und ihre Positionierung ähnlich oder identisch ist.

13 – Warnmeldungen sind visuell unterschiedlich

Warum es wichtig ist: Indem sichergestellt wird, dass Warnmeldungen klar von anderen Bildschirmelementen unterschieden werden, kann der Benutzer sie tatsächlich bemerken und/oder darauf reagieren.

So testen Sie es: Nachdem Sie selbst die visuelle Unterscheidung überprüft haben, sehen Sie, wie Benutzer auf die Warnmeldungen im Usability-Test reagieren.

Informationsarchitektur

14 – Die Navigation ist konsistent

Warum es wichtig ist: Die Art und Weise, wie Benutzer sich in Ihrem Produkt orientieren und dann durch Ihr Produkt navigieren, beeinflusst direkt, ob sie ihre Ziele unabhängig von ihrer aktuellen Seite erreichen können.

So testen Sie es: Überprüfen Sie die Dokumentation Ihrer Informationsarchitektur und stellen Sie sicher, dass die Navigation auf jeder Seite erreichbar ist und sich nicht ändert oder verschwindet. Bevor Sie sich mit dem visuellen Design befassen, versuchen Sie es mit Card Sorting oder Baumtests, um sicherzustellen, dass Ihre Informationsarchitekturpfade so intuitiv wie möglich sind.

15 – Raum für Wachstum

Warum es wichtig ist: Sie können das Navigations- und Informationssystem eines Produkts nicht jedes Mal neu gestalten, wenn neue Funktionen oder Inhalte auftauchen. Navigationsmenüs und das Gesamtlayout müssen mehr Kategorien/Themen unterstützen, ohne zu brechen. Design mit Raum für Wachstum bedeutet, dass große Design- und Entwicklungsanstrengungen problemlos über die Benutzeroberfläche skaliert werden können.

So testen Sie es: Fragen Sie alle Beteiligten, wie der Inhalt im Laufe der Zeit im Produkt wachsen könnte. Werden Sie mehr statische Inhalte unterstützen? Muss die Architektur Videos unterstützen?

Typografie

16 – Es werden nicht mehr als zwei unterschiedliche Typenfamilien verwendet

Warum es wichtig ist: Dies ist keine feste Regel: Manchmal ist es möglich, mehr als zwei durchzuziehen. Aber im Allgemeinen ist es keine leichte Aufgabe, mehr als zwei zusammenzubringen. Aus benutzerfreundlichen und visuellen Gründen vereinfacht das Festhalten an zwei Ihre typografische Hierarchie, was das Verständnis verbessert.

So testen Sie es: Stellen Sie sicher, dass Ihr Design nicht mehr als zwei Schriftfamilien mischt. Es wäre hilfreich, wenn Sie auch sicherstellen würden, dass die von Ihnen ausgewählten Familien richtig zusammenpassen (erfahren Sie hier mehr).

17 – Schriftarten, die für Textinhalte verwendet werden, sind mindestens 12 Pixel groß

Warum es wichtig ist: Auch hier handelt es sich nicht um eine feste Regel – Sie könnten theoretisch kleinere Größen für bestimmte Zwecke verwenden – aber im Allgemeinen ist die Lesbarkeit bei Größen unter 12 Pixel stark eingeschränkt.

So testen Sie es: Überprüfen Sie alle Ihre Inhalte und stellen Sie sicher, dass die dafür verwendeten Schriftarten mindestens 12 Pixel groß sind.

18 – Großbuchstaben für Bezeichnungen, Überschriften oder Akronyme reservieren

Warum es wichtig ist: Es ist bekannt, dass die Beschränkung der Verwendung von Großbuchstaben das Verständnis erleichtert – es ist weniger visuell schwerfällig und für den Benutzer leichter zu verdauen. Es sollte speziell für Hervorhebungen oder sehr eingeschränkte Fälle verwendet werden – zum Beispiel Akronyme.

So testen Sie es: Führen Sie eine gründliche Inhaltsprüfung durch und stellen Sie sicher, dass Wörter in Großbuchstaben entweder nur auf Überschriften, Beschriftungen oder Akronyme beschränkt sind.

19 – Unterschiedliche Schriftartstile oder -familien werden verwendet, um Inhalt von Steuerelementen zu trennen

Warum es wichtig ist: Es muss klare Indikatoren dafür geben, was Inhalt und was Steuerelemente sind – das heißt, womit der Benutzer interagieren kann. Diese Indikatoren können Größe, Farbe, Positionierung, Schriftart usw. sein. Die Schriftart ist ein wichtiger Faktor: Die Verwendung verschiedener Stile oder Familien bedeutet, dass der Benutzer nicht verwirrt wird und leicht erkennen kann, womit er interagieren kann.

So testen Sie es: Identifizieren Sie alle Steuerelemente in Ihrem Produkt und stellen Sie sicher, dass sie sich vom Inhalt abheben. Achten Sie beim Ausführen von Usability-Tests darauf, ob Benutzer Schwierigkeiten haben, mit Steuerelementen zu interagieren.

20 – Schriftgröße/-stärke unterscheidet zwischen Inhaltstypen

Warum es wichtig ist: Es wirkt sich stark auf die Lesbarkeit und das Verständnis aus. Eine klare Unterscheidung zwischen Überschriften, Unterüberschriften und Absätzen reduziert die mentale Überlastung beim Verdauen dieser Inhalte. Es hat auch optische Vorteile – es sieht besser aus und fühlt sich besser an.

So testen Sie es: Stellen Sie beim Überprüfen des Inhalts in Ihrem Produkt sicher, dass Überschriften, Unterüberschriften und Absätze unterschiedliche Schriftgrößen und -stärken verwenden.

Benutzeroberfläche

21 – Nähe und Ausrichtung

Warum es wichtig ist: Der Benutzer neigt dazu, Objekte, die nahe beieinander liegen, funktional oder kontextbezogen zu gruppieren. Eine Navigationsleiste ist ein gutes Beispiel dafür. Wenn Sie diesem Muster folgen und verbundene Elemente gruppieren, versteht der Benutzer Ihre Benutzeroberfläche sofort.

So testen Sie es: Suchen Sie nach Elementen mit ähnlicher Funktionalität und prüfen Sie, ob sie (wenn möglich) zusammen gruppiert sind.

22 – Fortschrittsanzeige für mehrstufige Arbeitsabläufe

Warum es wichtig ist: Besonders bei mehrstufigen Workflows kann sich der Benutzer leicht überfordert fühlen oder sich fragen, wie lange es dauert, bis es endlich fertig ist. Eine Fortschrittsanzeige hilft ihnen, sich selbst zu finden, aber was noch wichtiger ist, sie schafft ein Erfolgserlebnis und reduziert die Drop-Quote.

So testen Sie es: Überprüfen Sie alle Abläufe in Ihrem Produkt, in denen es verschiedene Schritte gibt, um etwas zu erreichen, und stellen Sie dann sicher, dass der Fortschritt durch einen Indikator angezeigt wird.

23 – Vordergrundelemente (wie Inhalte und Steuerelemente) lassen sich leicht vom Hintergrund unterscheiden

Warum es wichtig ist: Wichtig für Menschen mit Sehbehinderungen. Es verbessert auch die Lernkurve und das Verständnis eines Benutzers. Eine klare Unterscheidung erleichtert die Navigation, lenkt die Aufmerksamkeit auf Schaltflächen und erhöht die Benutzerfreundlichkeit im Allgemeinen.

So testen Sie es: Machen Sie eine Bildschirmaufnahme Ihres Produkts und verwischen Sie diesen Screenshot nach Gauß mit einem Radius von etwa 3 bis 5 Pixeln. Können Sie beim Betrachten des Ergebnisses leicht erkennen, was sich im Vordergrund und was im Hintergrund befindet?

Herzlichen Glückwunsch zum Durchgehen der Liste! Dies ist jedoch nicht das Ende.

Ihr Produkt ist jetzt solider und Sie haben sich vielleicht in mehreren Bereichen verbessert – vielleicht ist es jetzt zum Beispiel zugänglicher – aber denken Sie immer daran, weiter zu testen, Benutzerfeedback zu sammeln und weiter zu iterieren.