Blog ĂŒber User Experience, Usability und Interface Design

10 Prinzipien fĂŒr Usability und UI-Design

Share on linkedin
Share on xing
Share on twitter
Share on whatsapp
Share on email

Die 10 Usability-Heuristiken fĂŒr das Design von BenutzeroberflĂ€chen wurden bereits in den 1990er-Jahren u. a. von Jakob Nielsen entwickelt. Jakob Nielsen ist einer der Usability-Experten und MitbegrĂŒnder der Norman Nielsen Group.

Diese Richtlinien geben einen Überblick ĂŒber die wichtigsten Faktoren guter Usability und den grundlegenden Eigenschaften eines benutzerfreundliches User-Interface.

#1: Sichtbarkeit des Zustands und Feedback des Systems

Nutzer sollen erkennen, was das System gerade macht und das es auf ihre Aktionen reagiert. Deshalb sollen BenutzeroberflĂ€che ĂŒber AktivitĂ€t oder Status informieren und das in einer angemessenen Zeitspanne. Als Faustregel fĂŒr Reaktionszeit bieten sich 400ms an (https://lawsofux.com/doherty-threshold/).

Ein Button der sichtbar auf Klick oder Hover reagiert, eine Ladeanimation bei Seitenaufruf. Beides gibt dem Nutzer Feedback ĂŒber den Zustand des Systems. Ein anderes Beispiel gibt es unten als Animation, dass die Speichern-Funktion und den Speicher-Status kombiniert.

Animierter Buttons beim Speichervorgang
In diesem Beispiel sind die Aktion fĂŒr Speichern, der Speichervorgang und der Status im Button-Element kombiniert.

#2: Übereinstimmung mit der (realen) Welt der Nutzer

Bekannte mentale Modelle und Konventionen, aus der realen Welt, helfen Interfaces intuitiver zu gestalten. Unter anderem geht es darum die Sprache der Anwender zu sprechen. Sind, deine Nutzer Ingenieure sind entsprechende Fachbegriffe richtig. Verkaufst du Solaranlagen an Hausbesitzer solltest du nicht davon ausgehen, dass deine Kunden alle typischen Branchenbezeichnungen kennen.

Deshalb verwende die Wörter, AusdrĂŒcke und Konzepte, die den jeweiligen Nutzern vertraut sind.Floppydisc und Disketten-Icon

Ein visuelles Beispiel ist der Skeuomorphismus: Bei dem Objekte, aus der realen Welt, in User-Interfaces nachgeahmt werden. FrĂŒher eine beliebte Herangehensweise: Zum Beispiel steht ein Disketten-Symbol fĂŒr Speichern, weil Disketten sehr bekannte DatentrĂ€ger waren. Heute ist das Icon ein Artefakt, was auch von Nutzern verstanden wird, denen Disketten als Medium unbekannt sind.

#3: Kontrolle und Freiheit der Nutzer

Nutzer sollen die Freiheit haben Aufgaben abzubrechen und Aktion zu widerrufen. Undo-Funktionen und „NotausgĂ€nge“ geben Anwendern die Kontrolle ĂŒber das System. Zudem wird dadurch verhindert, dass sie stecken bleiben und sich frustriert fĂŒhlen.

Illustration der Tastenkombination Command und Z

In Prozessen sollten Nutzer die Möglichkeit haben, zwischen einzelnen Schritten zu wechseln. Dazu sollten auch bereits getĂ€tigte Eingaben gespeichert bleiben. So unterstĂŒtzt man den Nutzer bestmöglich bei seinen Aufgaben.

#4: Konsistenz und Standards

Du kannst sicher sein, dass deine Anwender mehr Zeit mit anderen Produkten verbringen als mit deinem. Deswegen solltest du dich bei deiner Anwendungen an branchenĂŒblichen Standards orientieren. Damit wird dein Produkt intuitiver und nach außen konsistent.

Inneren Konsistenz bedeutet, dass Elemente, die gleiche Aufgaben haben, auch in Aussehen und Verhalten gleich sind.

Darstellung des Icons fĂŒr Warenkorb und Icon einer Einkaufstasche

Bestimmte Symbole sind von einem Großteil der Nutzer gelernt, z. B. Icons fĂŒr Warenkorb, Startseite, MenĂŒ oder Schließen. Weicht man hier von Standard ab, sollte man triftige GrĂŒnde haben.

#5: FehlerprÀvention

Fehler können aus Unaufmerksamkeit passieren oder aufgrund von MissverstĂ€ndnissen. Am besten gestaltest du das System so, dass Fehleingaben unwahrscheinlich werden.

Screenshot des Formulars bei der Amazonapp

Wenn ein Eingabefeld fĂŒr Telefonnummer nur Ziffern als Eingabe zulĂ€sst, können nicht versehentlich Buchstaben eingegeben werden.

#6: Erkennen ĂŒber Erinnern

Reduziere den kognitiven Aufwand! Ein Grundprinzip guter Usability. FĂŒr Menschen ist es leichter Dinge zu sehen, als sich an sie zu erinnern. Zeige Nutzern die wichtigsten Informationen, VorgĂ€nge und Optionen an. Gehe nicht davon aus, dass Nutzer sich Dinge gemerkt haben.

Screenshot Google Suche mit Autosuggest
Die Google Suche zeigt vor kurzem eingebene Suchbegriffe bei der AutovervollstÀndigung an.

Du weißt, dass du eine Website besucht hast, kannst dich aber nicht mehr an den Namen erinnern. Dein Browserverlauf zeigt dir wo du warst.

#7: Biete FlexibilitĂ€t fĂŒr effizientere Nutzung

Es gibt fĂŒr Anwendung zumindest zwei Nutzergruppen: AnfĂ€nger und Nutzer die deine Anwendung bereits kennen. Sorge fĂŒr „AbkĂŒrzungen“ um Fortgeschrittenen effizientere Lösungen zu bieten, ohne AnfĂ€nger dabei zu ĂŒberfordern.

Screenshot von Fenster Tastaturbefehle und MenĂŒs aus Photoshop

Besonders bei Programmen mit mehr Funktionsumfang ein wichtiger Faktor, TastenkĂŒrzel sind hier wohl der bekannteste Standard. Als Erweiterung dieses Patterns, ist es in Programmen wie z. B. Photoshop ist es auch möglich, TastenkĂŒrzel konfigurieren und neue hinzufĂŒgen.

#8: Ästhetisches und minimalistisches Design

Konzentriere dich bei visuellen Elementen auf das Wesentliche. Jede unnötige Informationseinheit macht das Interface komplizierter. Stelle sicher, dass die visuellen Elemente der BenutzeroberflĂ€che die primĂ€ren Ziele der Anwender unterstĂŒtzen.

Flatdesign ist sicher eine Konsequenz dieses Prinzips. Trotzdem geht es nicht um Minimalismus im Stil (oder zumindest nur zum Teil), sondern um Auswahl und Menge von inhaltlichen und interaktiven Elementen in einer grafischen OberflÀche.

Screebshot der Google Startseite

Die Google Startseite ist ein hervorragendes Beispiel wie durch die achte Usability-Heuristik, Handlungen von Nutzern geleitet und kognitive Belastung reduziert werden kann.

#9: Helfen Fehler zu erkennen, verstehen und beheben

Sorge fĂŒr verstĂ€ndliche und gut sichtbare Fehlermeldungen. Am besten bietest du deinen Nutzern gleich einen Lösungsvorschlag oder Hilfe bei der Behebung an.

Fehlerbeschreibung und VerbesserungsvorschlÀge an Eingabefeld Nickname

Beispiel: ein Formularfeld fĂŒr Nickname, z. B. bei einer Anmeldung in einem Forum. Das Feld ist durch farbige Kontur und Icon als Fehler hervorgehoben. Die Meldung beschreibt den Grund des Fehlers und die Lösung. Zudem werden Namen vorgeschlagen, die als Eingaben möglich sind.

#10: Hilfe und Dokumentation

Intuitive Bedienung ist das Ziel, aber nicht jedes System kommt ohne ErklÀrung aus. Achte darauf, dass Hilfe und Dokumentation schnell und leicht zu finden sind. Die ErklÀrung sollte möglichst kurz und gut konsumierbar sein. Des Weiteren sollte Hilfe möglichst in direktem Kontext zur jeweiligen Aufgabe des Nutzers stehen.

Tooltip vom Freistellungwerkzeug in Photoshop
Photoshop bietet Tooltips mit Animationen fĂŒr die Werkzeugleiste, inklusive Direkteinstieg zur Hilfe.

Ein Tooltip der erscheint, wenn der Cursor ĂŒber SchaltflĂ€chen hovert, ist ein Klassiker. Außerdem ein schönes Pattern fĂŒr eine unaufdringliche Hilfe und Dokumentation in direktem Kontext zur Aufgabe. Der FAQ-Bereich einer Website ist ein zweites Beispiel, das Nutzern schnell und kompakt ErklĂ€rungen liefern kann.

Fazit & praktische Anwendung

Bei diesen Richtlinien handelt es sich um Faustregeln. Sie sind allgemeingĂŒltig, dafĂŒr aber grob.

Regeln wie „#1: Sichtbarkeit des Zustands und Feedback des Systems“ haben fĂŒr mich eine zeitlose Relevanz. Andere Regeln wie„#2: Übereinstimmung mit der (realen) Welt der Nutzer“ wirken, etwas aus der Zeit gefallen.

Was hauptsĂ€chlich an der Formulierung im Original liegt: „Match between system and the real world“. Da passen Titel und die heutige Beschreibung einfach nicht mehr genau zusammen.

Am Ende bleiben es Heuristiken, also eine Methode mit begrenztem Wissen, wahrscheinlich richtige Aussagen zu treffen. Ein guter Ausgangspunkt, aber nur in Kombination mit Nutzertests wirklich aussagekrÀftig.

Links & Quellen

Die Norman Nielsen Group hat vor einiger Zeit den Bereich zu den 10 Usability Heuristiken komplett ĂŒberarbeitet. Dazu gibt es zu den meisten Heuristiken auch separate Artikel und Videos. Die 10 Heuristiken auf nngroup.com

Ähnliche BlogbeitrĂ€ge:

Share on linkedin
Share on xing
Share on twitter
Share on whatsapp
Share on email

Fragen oder Feedback ?
Sag hallo, per Mail oder auf Linkedin!