Tipps & Tools

10 Faustregeln für gutes UX-Design (6-10)

Was macht gute Software, gute Apps und gute Websites aus? Die Antwort geben wir euch in zwei Teilen. Dieser Artikel ist der zweite Teil.
Collage aus einem altern Apple Mackintosh und ein paar Icons

Im ersten Teil dieses Zweiteilers ging es unter anderem auch um das Nutzen von Vertrautem und Wiedererkennbarem. Und der sechste Tipp schließt direkt daran an:

Nr. 6: Erkennen ist leichter als erinnern.

In der Psychologie werden zwei Arten unterschieden, wie man sich etwas Gemerktes wieder ins Gedächtnis ruft:

  1. Man erkennt eine Information als bekannt, z. B. als richtig oder falsch: So wisst ihr etwa, dass die Aussage “Der Wanderfalke ist das schnellste Tier der Welt.” stimmt, wenn ihr dies vorher schon einmal gelernt und sich gemerkt habt.
  2. Man erinnert sich an eine Information, ohne sie zu sehen oder zu hören:Ihr könnt also z. B. die Frage “Was ist das schnellste Tier der Welt?” ohne weitere Hinweise oder Auswahl-Optionen beantworten.

Diese Beispiele zeigen deutlich, dass es viel einfacher ist, eine Information zu erkennen als sich an sie zu erinnern. Deshalb sollten wir Nutzer·innen möglichst viel erkennen lassen. Hier ein paar konkrete Beispiele:

  • Navigation: Eine gute Navigation sowie Breadcrumbs helfen bei der Orientierung, ohne dass man sich erinnern muss, wo welche Bereiche zu finden sind.
  • Such- und Besuch-Historien: Wenn ihr eine Suche bei euch habt, ist es hilfreich, wenn ihr die letzten Suchen übersichtlich darstellt, so dass man sich nicht daran erinnern muss. Ebenso hilfreich kann eine Übersicht der Bereiche bzw. Seiten sein, die man zuletzt besucht hat.
  • Lesezeichen: Mithilfe von Lesezeichen, Merklisten und ähnlichen Funktionen können eure Nutzer·innen Seiten, Produkte oder anderes festhalten und müssen sich nicht daran erinnern.
  • Werkzeugleisten: Mithilfe gut sichtbarer und gut verständlicher Werkzeugleisten sind Funktionen auf einen Blick erkennbar und zugänglich, also z. B. die Optionen für die Formatierung von Texten in einem Texteditor. Wichtig dabei: Prüft, welche Symbole für sich stehen können, weil sie Standard sind und erkannt werden können – und welche vielleicht lieber eine Beschriftung bekommen sollten. Viele machen hier den Fehler, sich aus ästhetischen oder Platz-Gründen nur für Symbole zu entscheiden, was zu großen Problemen führen kann.

Nr. 7: Baut Abkürzungen ein.

Wenn wir ein digitales Produkt einführen, testen wir es am liebsten mit Menschen, die es vorher noch nie gesehen haben, weil nur sie unvoreingenommen sind. Das ist auch gut so, weil wir unser Interface ja so optimieren wollen, dass es ohne einen langen Lernprozess bedienbar ist.

Die Kehrseite der Medaille ist allerdings, dass erfahrene Nutzer·innen viele Dinge irgendwann vielleicht als kleinschrittig, überflüssig oder ineffizient empfinden. Für diese Zielgruppe ist es nützlich, Abkürzungen zu integrieren, mit denen wichtige Handgriffe schneller zu erledigen sind:

  • Vorlagen: Mithilfe von Vorlagen, z. B. für bestimmte Dokumente oder E-Mails, lassen sich oft einige Arbeitsschritte sparen. Idealerweise ist es sogar möglich, in den Vorlagen Variablen einzusetzen, sodass z. B. bei der Anrede einer E-Mail automatisch der Vorname der entsprechende Person eingefügt wird.
  • Duplizieren: Ähnlich hilfreich wie Vorlagen ist die Möglichkeit, Dinge zu duplizieren und dann das duplizierte Objekt anzupassen. Das kann z. B. ein Dokument, eine Veranstaltung, eine Stellenanzeige oder eine Produktseite sein.
  • Anpassungs-Optionen: Wenn Auswahlmenüs und Werkzeugleisten anpassbar sind, also z. B. bestimmte Werkzeuge ausgeblendet oder zusätzlich angezeigt werden und nach Belieben angeordnet werden können, ist dies für Fortgeschrittene oft ein echter Gewinn. Weil dies technisch jedoch recht aufwändig ist, solltet ihr vorher prüfen, ob es dafür wirklich einen signifikanten Bedarf gibt.
  • Macros: Dies sind kleine Programme, die Profi-Nutzer·innen selbst erstellen können, um bestimmte Prozesse zu automatisieren. Sie sind insbesondere bei Microsoft Excel weit verbreitet.
  • Tastatur-Kürzel: Wenn ihr für die Funktionen eures Programms Tastatur-Kürzel definiert, können Profi-Nutzer·innen sie schneller auswählen.

Beim Thema Abkürzungen ist es grundsätzlich sinnvoll, zunächst Fortgeschrittene zu befragen und so herauszufinden, was sie als besonders umständlich und nervig empfinden – und was sie benötigen würden, um euer digitales Produkt effizienter benutzen zu können.

Nr. 8: Macht euer Design schön und schlicht.

Was von euren Nutzer·innen als schön, also visuell ansprechend, empfunden wird, findet ihr am besten anhand von Nutzertests heraus. Fest steht: Auch beim Benutzen von digitalen Produkten isst das Auge mit. Das Design hat nämlich einen großen Einfluss darauf, als wie hilfreich eine Software oder App subjektiv wahrgenommen wird, ganz unabhängig von seiner objektiven Bedienbarkeit und Funktionalität. Und letztendlich ist das Design ja auch Ausdruck eurer Marke und kann diese entsprechend stärken … oder eben auch schädigen.

Schlicht bedeutet hier, dass ihr auf Überflüssiges verzichtet: Bei jedem Interface ist immer gleichzeitig eine Vielzahl von Informationen und Optionen sichtbar – das lässt sich nicht verhindern. Achtet aber darauf, dass nur das zu sehen ist, was Nutzer·innen im jeweiligen Kontext wirklich nützt. Oder anders: Beseitigt alles, was ablenken oder verwirren könnte.

Auch hier ist Nutzerforschung sehr nützlich: Denn wie könnt ihr wissen, was in welchem Kontext wichtige Informationen und Funktionen sind und was nicht, ohne dass ihr echte Nutzer·innen befragt habt? Wenn ihr nämlich ohne Rücksicht auf Nutzerbedürfnisse ein minimalistisches Design umsetzt, z. B. weil ihr das einfach schicker findet, kann es dazu führen, dass essenzielle Infos oder Funktionen fehlen.

Hier ein paar Beispiele, wie ein Design gelingen kann, das gleichzeitig schlicht und nützlich ist:

  • Temporäre Anzeigen: Dies bedeutet, dass Infos und UI-Elemente nicht immer zu sehen sind, sondern nur, wenn sie gebraucht werden, z. B. die Bedien-Elemente in einer Video-App, die nach wenigen Sekunden automatisch verschwinden, oder Optionen in einer Liste, die im Web nur bei Mouse-Over erscheinen.
  • Ausgelagerte Infos: Viele Bereiche und Funktionen erfordern Erklärungen für Neulinge, aber nicht für Fortgeschrittene. Dies kann man lösen, indem man die Verfügbarkeit von Infos deutlich kennzeichnet, die Infos selbst aber nicht direkt anzeigt. Beispiel: ein “i”-Symbol, das angeklickt werden kann, um eine Erklärung zu lesen. “Progressive disclosure” heißt dieses Prinzip im UX-Jargon.
  • Klare Hierarchien: Verschiedene Schriftgrößen, Abstände und andere strukturgebende Design-Elemente können dazu beitragen, dass auf einen Blick erkennbar ist, was wichtig ist und was weniger wichtig, was übergeordnet ist und was untergeordnet.

Nr. 9: Schreibt hilfreiche Fehlermeldungen.

Bevor ihr diese Regel befolgt, solltet ihr natürlich erst Regel Nr. 5 einhalten und Fehler verhindern, wo auch immer das technisch möglich ist. Manchmal aber ist dies nicht möglich: So habt ihr z. B. keinen Einfluss darauf, ob eure Nutzer·innen immer eine stabile Internetverbindung haben. Und für diese Fälle ist es wichtig, dass eure Fehlermeldungen hilfreich sind.

Das Thema Fehlermeldungen ist so wichtig, dass wir ihm einen eigenen Artikel gewidmet haben, den hier hier findet:

9 Tipps für gute Fehlermeldungen

Nr. 10: Bietet Hilfe an.

In einer perfekten Welt ist ein Hilfebereich nicht notwendig, weil eure Software oder App sich von selbst erklärt. In Wirklichkeit aber gibt es immer wieder Situationen, in denen Nutzer·innen Fragen haben oder etwas nicht verstehen. Seid auf diese Fälle vorbereitet – und prüft in regelmäßigen Abständen, welche Situationen dies sind. Tut dies idealerweise in Kooperation mit eurem Kundenservice-Team, das euch hier wertvolle Einblicke geben kann.

Diese Beispiele können hilfreiche Hilfeangebote sein:

  • Einführung / Rundgang für Neulinge: Oft ist es hilfreich, wenn ihr neuen Nutzer·innen schon ganz zu Beginn einen kleinen Rundgang durch euer digitales Produkt anbietet, in dem ihr die wichtigsten Bereiche und Funktionen anschaulich erklärt.
  • Vorlagen für häufige Anwendungszwecke: Wenn ihr z. B. eine Software zum Erstellen von Präsentationen habt, ist es hilfreich, wenn es Vorlagen gibt, die dies deutlich erleichtern.
  • Proaktive Tipps: Ihr könnt Nutzer·innen mit kleinen Hinweisen (”coach marks” genannt) auf bestimmte Bereiche oder neue Funktionen aufmerksam machen, die sie sonst vielleicht übersehen würden.
  • Hilfebereich: Dieser Service wird auch “FAQ” genannt und löst idealerweise zwei Probleme gleichzeitig: Er hilft Nutzer·innen bei der Beantwortung von Fragen und dem Lösen von Problemen – und er sorgt dafür, dass euer Kundenservice mehr Zeit für wirkliche Herausforderungen hat und sich nicht um die Beantwortung immer wiederkehrender Fragen kümmern muss.Tipp: Beginnt mit einer kleinen Auswahl von Fragen, von denen ihr wisst, dass sie wirklich oft gestellt wird. Fügt dann in Abstimmung mit eurem Kundenservice nach und nach weitere hinzu. So verhindert ihr, dass ihr Fragen beantwortet, die noch nie jemand gestellt hat.

Fazit

Und damit sind wir am Ende unserer Beschreibungen zu den 10 wichtigsten Faustregeln für gutes UX-Design nach Jacob Nielsen. Aus unserer Erfahrung helfen sie sehr dabei, gute Software, Apps und Websites zu gestalten — auch wenn sie nicht der Weisheit letzter Schluss sind: Denn ohne Nutzerforschung könnt ihr eure digitale Lösung nicht auf die spezifischen Bedürfnisse und Wünsche eurer Nutzer·innen ausrichten. Aber in Kombination mit den Methoden der Nutzerforschung bilden diese Faustregeln beste Voraussetzungen, ein hervorragendes Nutzererlebnis zu erschaffen.

Wie hat euch der Artikel gefallen?

Und habt ihr dazu noch Fragen? Oder vielleicht ganz allgemein dazu, was das Geheimnis richtig guter Apps und Software ist? Dann lasst uns gern unterhalten: