Während des Designprozesses bleiben einige Fehler in Ihrem Produkt unbemerkt. Diese kleinen (oder manchmal großen) Dinge können die Benutzererfahrung bei der Verwendung ihrer Software erheblich beeinträchtigen. Wir haben eine Liste mit Punkten zusammengestellt, die Sie überprüfen müssen, bevor das Design genehmigt wird.
Bitte beachten Sie, dass nicht alle diese Punkte für alle Produkte gelten, diese jedoch im Allgemeinen am relevantesten sind.
Die UX Design Toolbox
Unbegrenzte Downloads: Über 1.000.000 Wireframe- und UX-Vorlagen, Benutzeroberflächen-Kits, Design-Assets und mehr.
jetzt downloaden
Interaktionsdesign
01 – Wiederholte Aktionen oder häufige Aktivitäten fühlen sich mühelos an
Weil es wichtig ist: Wiederholte Aktionen für dasselbe Ergebnis (z. B. das Ausfüllen verschiedener Formulare mit denselben Informationen) sind 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, dies zu vermeiden – zum Beispiel nach Konkurrenten zu suchen, die ihm helfen können, es schneller / besser zu machen.
So testen Sie es: Sie sollten zunächst alle Abläufe Ihres Produkts analysieren und das Benutzerverhalten beobachten. Sie möchten sicherstellen, dass es bei sich wiederholenden Aktionen eine Möglichkeit gibt, diese zu vereinfachen: Zum Beispiel eine Option zur Verwendung der zuvor eingegebenen Informationen.
02 – Benutzer können Fehler leicht beheben
Weil es wichtig ist: Oft ergreifen Benutzer unerwünschte Aktionen oder Aktionen, die nicht zu den gewünschten Ergebnissen geführt haben. Wenn sie zurückkehren und es erneut versuchen können, sind sie nicht frustriert und erholen sich leicht und bewegen sich weiter.
So testen Sie es: Stellen Sie zunächst sicher, dass Ihr Navigationssystem die Rückgabe zulässt und Aktionen rückgängig gemacht werden können. Wenn Sie dann Usability-Tests ausführen, erstellen Sie Szenarien, in denen der Benutzer wahrscheinlich die falschen Maßnahmen ergreift, und prüfen Sie, ob Sie sie problemlos wiederherstellen können.
03 – Benutzer erhalten je nach Erfahrung einen angemessenen Support
Weil es wichtig ist: Es ist wichtig sicherzustellen, dass unerfahrene Benutzer Ihres Produkts eine reibungslose Lernerfahrung haben. Sobald Sie jedoch mit dem Produkt vertraut sind, sollte dies zu Tools führen, mit denen Sie sich schneller durch die Abläufe bewegen können. Beide Szenarien verbessern die Benutzerfreundlichkeit und die Aufbewahrung. Zum Beispiel Verknüpfungen für erfahrene Benutzer, Tooltipps für Anfänger 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 festzustellen, ob diese Tools ordnungsgemäß verwendet werden.
04 – Der Zugriff auf die Hilfe behindert den Benutzerfortschritt nicht
Weil es wichtig ist: Benutzer fordern Hilfe an, wenn sie in einem bestimmten Teil ihres Produkts gefangen sind. Es ist wichtig, dass die Online- oder Offline-Hilfe 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 prüfen, ob ihre Workflows und Fortschritte unterbrochen sind.
Visuelles Design
05 – Nicht mehr als drei Grundfarben
Weil es wichtig ist: Dies ist keine festgelegte Regel, und manchmal können in bestimmten Fällen mehr als drei Primärfarben verwendet werden. Beachten Sie jedoch, dass das Kombinieren von drei Farben bereits schwierig ist. In den meisten Fällen sollte daher mehr vermieden werden.
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 wird nicht verwendet, um Hierarchie, Inhalt oder Funktionalität zu vermitteln
Weil es wichtig ist: Ein zugängliches Produkt zu haben ist kein Vorteil, es ist wichtig. Für Menschen mit Sehbehinderungen wie Farbenblindheit bedeutet die alleinige Verwendung von Farbe zur Vermittlung von Hierarchie, Inhalten oder Funktionen, dass sie Ihr Produkt nicht verwenden können und eine ausgeschlossene Bevölkerungsgruppe sind.
So testen Sie es: Mit colorfilter.wickline.org können Sie einen Farbfilter oben auf Ihrer Webseite platzieren und auf verschiedene Arten von Farbenblindheit testen. Sie können Ihr Produkt auch auf dem Bildschirm erfassen und in einem Bildeditor in Graustufen konvertieren, um festzustellen, ob Sie Farben leicht unterscheiden können.
07 – Die visuelle Hierarchie leitet den Benutzer zur gewünschten Aktion
Weil es wichtig ist: Benutzer verlassen sich auf Hierarchie- und Produkthinweise, um zu wissen, was zu tun ist und wohin sie gehen müssen. Es ist wichtig, dies zu verstehen und sie anhand dieser Hierarchie angemessen zu führen.
So testen Sie es: Verstehen Sie, wie Flows in Ihrem Produkt funktionieren und ob Ihre Schlüsselaktionen durch die visuelle Hierarchie angeregt werden.
08 – Die Elemente oben in der visuellen Hierarchie sind die wichtigsten
Weil es wichtig ist: Die visuelle Hierarchie ermöglicht es Benutzern, Informationen schnell zu scannen und Inhalte basierend auf ihren unmittelbaren Anforderungen zu priorisieren. Elemente am oberen Rand der visuellen Hierarchie sollten für das Unternehmen am wichtigsten und für die Benutzer am relevantesten sein.
So testen Sie es: Erfassen Sie den Bildschirm Ihres digitalen Produkts und verwischen Sie dann den Screenshot in einem Radius von etwa 5 Pixel. Wenn Sie sich das Ergebnis ansehen, werden Sie sofort die Hierarchie visualisieren und feststellen, welche Elemente hervorgehoben sind. Sind sie für das Unternehmen und den Benutzer am wichtigsten?
09 – Die primäre Aktion unterscheidet sich optisch von den sekundären Aktionen
Weil 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 fehleranfällig ist. Beispielsweise müssen "Senden" und "Abbrechen" deutlich voneinander abweichen.
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 differenzierte primäre und sekundäre Aktionen. Stellen Sie bei der Überprüfung des Designs außerdem sicher, dass Farbe, Größe, Position und andere Elemente die Aktionen unterscheiden.
10 – Interaktive Elemente werden nicht abstrahiert
Weil es wichtig ist: Bei der Verwendung eines neuen Produkts haben Benutzer eine Reihe von Erwartungen, die sich aus ihren früheren Erfahrungen mit anderen digitalen Produkten ergeben, z. B. wie Schaltflächen aussehen und wie sie funktionieren sollen. Wenn Sie diese Erwartungen erfüllen, entsteht keine unnötige Reibung.
So testen Sie es: Überprüfen Sie Ihr Produkt zunächst auf Bereiche, in denen keine gängigen Muster verwendet werden. Zum Beispiel Links, die nicht wie Links aussehen.
11 – Die Übermittlung des Formulars wird visuell anders bestätigt
Weil es wichtig ist: Es ist wichtig, dem Benutzer zu bestätigen, ob eine Aktion erfolgreich war oder nicht. Beispielsweise bedeutet eine eindeutige Bestätigungsnachricht in Form eines farbigen Banners nach dem Absenden eines Formulars, 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. Nachdem die Benutzereingabe abgeschlossen ist, lösen Sie eine Bestätigung aus, ob diese Aktion erfolgreich war oder nicht. Stellen Sie sicher, dass das Feedback zum Endzustand klar ist.
12 – Warnmeldungen sind konsistent
Was es ist: Warnmeldungen haben denselben visuellen Stil und werden auf dieselbe Weise an derselben Stelle angezeigt.
Weil es wichtig ist: Konsistente Warnmeldungen bedeuten, dass der Benutzer immer versteht, was sofortige Aufmerksamkeit verdient. Die Nichtübereinstimmung mit Warnungen würde jede neue Warnung zusätzlich mental belasten.
So testen Sie es: Stellen Sie sicher, dass die Warnmeldungen denselben visuellen Stil haben und dass ihre Position ähnlich oder identisch ist.
13 – Warnmeldungen unterscheiden sich optisch
Weil es wichtig ist: Indem sichergestellt wird, dass die Warnmeldungen klar von anderen Elementen auf dem Bildschirm unterschieden werden, kann der Benutzer sie bemerken und / oder entsprechend handeln.
So testen Sie es: Nachdem Sie die visuelle Differenzierung selbst überprüft haben, sehen Sie, wie Benutzer in Usability-Tests auf Warnmeldungen reagieren.
Informationsarchitektur
14 – Die Navigation ist konsistent
Weil es wichtig ist: Wie Benutzer Ihr Produkt anvisieren und dann 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 verfügbar ist und sich nicht ändert oder verschwindet. Bestellen Sie vor dem Eintauchen in das visuelle Design Karten oder testen Sie Bäume, um sicherzustellen, dass Ihre Routen für die Informationsarchitektur so intuitiv wie möglich sind.
15 – Raum für Wachstum
Weil 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 sollten ohne Unterbrechung mehr Kategorien / Themen unterstützen. Design mit Raum für Wachstum bedeutet, dass große Design- und Entwicklungsanstrengungen einfach über die Benutzeroberfläche skaliert werden können.
So testen Sie es: Fragen Sie alle Betroffenen, wie der Inhalt des Produkts im Laufe der Zeit wachsen könnte. Wird es mehr statischen Inhalt unterstützen? Muss die Architektur Videos unterstützen?
Typografie
16 – Es werden nicht mehr als zwei Familien unterschiedlicher Typen verwendet
Weil es wichtig ist: Dies ist keine feste Regel: Manchmal ist es möglich, mehr als zwei zu erreichen. Aber im Allgemeinen ist es keine leichte Aufgabe, mehr als zwei zu finden. Aus Gründen der Benutzerfreundlichkeit und der visuellen Darstellung vereinfacht das Festhalten an zwei Ihre typografische Hierarchie und verbessert das Verständnis.
So testen Sie es: Stellen Sie nur sicher, dass Ihr Design nicht mehr als zwei Typenfamilien mischt. Sie sollten auch sicherstellen, dass die von Ihnen ausgewählten Familien richtig übereinstimmen (mehr dazu hier).
17 – Für Textinhalte verwendete Schriftarten haben eine Größe von mindestens 12 Pixel
Weil es wichtig ist: Auch hier ist es keine harte Regel: Theoretisch könnten Sie kleinere Größen für ganz 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 den gesamten Inhalt und stellen Sie sicher, dass die für sie verwendeten Schriftarten mindestens 12 Pixel groß sind.
18 – Reservieren Sie Großbuchstaben für Beschriftungen, Überschriften oder Akronyme
Weil es wichtig ist: Es ist bekannt, dass die Beschränkung der Verwendung von großgeschriebenen Wörtern das Verständnis erleichtert: Es ist weniger visuell schwer und für den Benutzer leichter zu verdauen. Es sollte speziell verwendet werden, um Fälle hervorzuheben oder sehr einzuschränken – zum Beispiel Akronyme.
So testen Sie es: Bitte führen Sie eine gründliche Inhaltsprüfung durch und stellen Sie sicher, dass großgeschriebene Wörter auf Überschriften, Bezeichnungen oder Akronyme beschränkt sind.
19 – Verschiedene Schriftstile oder -familien werden verwendet, um den Inhalt der Steuerelemente zu trennen
Weil es wichtig ist: Es sollte klare Indikatoren dafür geben, was der Inhalt ist und was die Steuerelemente sind, dh mit was der Benutzer interagieren kann. Diese Indikatoren können Größe, Farbe, Position, Schriftart usw. sein. Die Quelle ist wichtig: Die Verwendung verschiedener Stile oder Familien bedeutet, dass der Benutzer nicht verwirrt ist und leicht erkennt, mit was er interagieren kann.
So testen Sie es: Identifizieren Sie alle Steuerelemente Ihres Produkts 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 / -gewicht unterscheidet zwischen Inhaltstypen
Weil es wichtig ist: Es beeinflusst stark die Lesbarkeit und das Verständnis. Eine klare Unterscheidung zwischen Überschriften, Untertiteln und Absätzen verringert die mentale Belastung, indem dieser Inhalt verdaut wird. Es hat auch visuelle Vorteile: Es sieht besser aus und fühlt sich besser an.
So testen Sie es: Stellen Sie beim Überprüfen des Inhalts Ihres Produkts sicher, dass die Überschriften, Untertitel und Absätze unterschiedliche Schriftgrößen und -stärken verwenden.
Benutzeroberfläche
21 – Nähe und Ausrichtung
Weil es wichtig ist: Der Benutzer hat die Tendenz, Elemente, die nahe beieinander liegen, funktional oder kontextuell zu gruppieren. Eine Navigationsleiste ist ein gutes Beispiel dafür. Wenn Sie diesem Muster folgen und die verbundenen Elemente gruppieren, versteht der Benutzer die Benutzeroberfläche sofort.
So testen Sie es: Suchen Sie nach Elementen mit ähnlichen Funktionen und prüfen Sie, ob sie (wenn möglich) zusammengefasst sind.
22 – Fortschrittsanzeige für mehrstufige Workflows
Weil es wichtig ist: Insbesondere bei mehrstufigen Workflows kann sich der Benutzer leicht überfordert fühlen oder sich fragen, wie lange es dauert, bis dies endgültig erledigt ist. Eine Fortschrittsanzeige hilft Ihnen, sich selbst zu finden, aber was noch wichtiger ist, sie schafft ein Erfolgserlebnis und reduziert die Dropraten.
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 Inhalt und Steuerelemente) sind leicht vom Hintergrund zu unterscheiden
Weil es wichtig ist: Wichtig für sehbehinderte Menschen. Es verbessert auch die Lernkurve und das Benutzerverständnis. Die klare Unterscheidung erleichtert die Navigation, schenkt den Schaltflächen mehr Aufmerksamkeit und erhöht die allgemeine Benutzerfreundlichkeit.
So testen Sie es: Erfassen Sie den Bildschirm Ihres Produkts und die Gaußsche Unschärfe, die in einem Radius von etwa 3 bis 5 Pixel angezeigt wird. Können Sie anhand des Ergebnisses leicht erkennen, was im Vordergrund und was im Hintergrund steht?
Herzlichen Glückwunsch zur Überprüfung der Liste!
… Dies ist jedoch nicht das Ende.
Ihr Produkt ist jetzt robuster und hat sich möglicherweise in mehreren Bereichen verbessert, z. B. jetzt besser zugänglich. Denken Sie jedoch immer daran, zu testen, Feedback von Benutzern zu sammeln und weiter zu iterieren.
