7 Fakten zu Usability und Design

Was sollte man beachten, wenn man eine gute Internet- oder Intranetseite erstellen möchte? Und was ist eigentlich gut? Gut für wen? Für mich als Ersteller*in? Für meine Nutzer*innen? Und wer sind die überhaupt?!

Livia Czernohorsky
veröffentlicht am 31. März 2022
Design, Nutzerführung, Usability, User Experience

Kenne deine Zielgruppe!

Mit welchen Erwartungen und Erfahrungen kommen Deine User auf die Seite? Was suchen sie? Was brauchen sie? Wie müssen jetzt Dienstleistungen oder Produkte beschrieben sein, damit sie gefunden und genutzt werden?

«Content ist King»

Diese Fragen müssen beantworten sein, damit nutzerrelevante Inhalte erstellt werden können, die einen Mehrwert bieten. «Content ist King» lautet die Devise bei der Erstellung einer Seite. Der erstellte Inhalt (Content) MUSS für Deine Zielgruppe(n) relevant sein. Es gibt kaum etwas frustrierenderes, als die gesuchten Inhalte auf einer Website nicht zu finden. Die Erwartungen werden damit nicht erfüllt und die Nutzerinnen und Nutzer springen wieder ab.

DESIGN

Gutes Design ist, wenn man nichts mehr weglassen kann.

Antoine de Saint-Exupéry

7 Gestaltprinzipien

Klarheit

Navigation per Smartphone

Führe Deiner Nutzer*innen sicher von A nach B ohne Umweg oder Stolpersteine. Die Navigation auf der Seite ist  für die Orientierung sehr wichtig. Halte die Navigation möglichst klar und einfach: 

  • mit so wenigen Klicks wie möglich das Ziel erreichen
  • man muss immer sehen können, wo man sich in der Navigation befindet
  • man muss vor- und zurücknavigieren können ohne stecken zu bleiben
  • man muss wissen, was sich hinter einem Navigationspunkt verbirgt und keine Angst haben, diesen zu klicken

Erkennbarkeit

iPad auf Zeitungsstapel

Die Aufmerksamkeit wird auf die benötigte Information gerichtet.

  • das Wichtigste steht immer ganz oben
  • Unwichtiges nach unten oder ganz streichen (orientiere Dich an der Zeitungsmetapher)
  • Navigation, Button, Links, Info-Texte sollte als solche erkennbar sein
  • verlinkte Elemente müssen als soche wahrgenommen werden können – unterstreiche nichts, was nicht klickbar ist
  • Pflichtfelder mit * kennzeichnen

Konsistenz

Home Button

Informationen werden immer auf die gleiche Weise dargestellt. Das verringert die kognitive Belastung! Man muss nicht immer wieder neu lernen, sondern kann auf erlerntes zurückgreifen. 

  • Button sollten immer gleich aussehen und als Button wahrgenommen werden
  • Links (im Text zum Beispiel) sollten immer unterstrichen sein
  • halte Dich an gelernte Internetkonventionen, dann findet sich Dein User zurecht
  • biete einen Home-Button, um den Weg nach Hause zu finden

Lesbarkeit

Mann mit Lupe

Die Information sollte leicht zu lesen sein.

  • Deine Information ist von Aktion getrennt und erkennbar
  • nutze Weißraum, um Informationen voneinander abzugrenzen
  • verschiedene Textgrößen geben die Hierarchie der Seite wieder: von großer Überschrift bis kleiner Bildunterschrift (H1 bis H6)
  • nutze die Corporate Schriftart bzw. eine gut lesbare Schriftart 
  • verwende Absätze und kurze, klare Sätze (Zielgruppengerecht!)

Verständlichkeit

Bereite Deine Information für Deine Zielgruppe verständlich auf.

  • Du machst eine Onbarding-Seite? Dann nutze keine Abkürzungen, die nur alte Hasen kennen können
  • Du beschreibst Installationsanleitungn für Admins? Dann schreib auf Admin-Niveau
  • Kenne Deine Zielgruppe!
  • Deine Zielgruppe soll sich immer sicher fühlen bei den Aktionen, die Du anbietest

Unterscheidbarkeit

Informations-Items oder Gruppen von Items können vom Nutzer unterschieden werden.

  • nutze aussagekräftige Icons oder Informations-Items, die sich sichtlich voneinander unterscheiden
  • nutze dieselben Icons für dieselben Aussagen
  • verwirre den Nutzer nicht mit unbekannten, nicht erkennbaren Symbolen – oder erkläre sie!

Prägnanz

Stelle nur die notwendigen Informationen dar.

  • Gib so viele Informationen wie nötig, dabei aber so wenig wie möglich.
  • konzentriere Dich auf das Wichtigste, auf Kernaussagen
  • Rauschen vermeiden –> zu viel Schwafel-Text weglassen!
  • kommuniziere prägant, klar, einfach.

USABILITY

A User Interface is like a joke. If you have to explain it, it's not that good.

Martin Leblanc

7 Dialogprinzipien für eine gute Nutzerführung

Aufgabenangemessenheit

Unterstütze Deine User die eigene Arbeitsaufgabe zu erledigen.

  • die Dialogschritte sollten zum Arbeitsablauf passen
  • zeige nur die Informationen, die im Zusammenhang mit der Aufgabe stehen
  • eliminiere alle überflüssigen Informationen, die nicht für die Erledigung der Aufgabe relevant sind
  • passe die Form der Ein-/Ausgabe an die Aufgabe an
  • typische Eingabewerte sollten voreingestellt sein
  • sind Quelldokumente nötig, sollte die Benutzungsschnittstelle damit kompatibel sein (gib also an, welche Formate zb. beim Hochladen von Dokumenten genutzt werden können)
  • vermeide Medienbrüche (ausdrucken, unterschreiben, einscannen)

Selbstbeschreibungsfähigkeit

Für den User ist zu jeder Zeit offensichtlich, in welchem Dialog und an welcher Stelle im Dialog er/sie sich befindet, welche Handlungen unternommen werden können und wie diese ausgeführt werden können. 

  • Deine User sollten sich selbstständig und sicher durch Deine Seiten navigieren können
  • optimiere Deine Seiten so, dass Hilfetexte minimiert  oder ganz weggelassen werden können
  • erkläre so viel wie nötig, aber so wenig wie möglich
  • versuche klar und deutlich zu kommunizieren
  • versuche alles zu vermeiden, was Deine User verwirren könnte und zu Eingabefehlern führt
  • informiere die User über Deine erwartete Eingabe bzw. Eingabeformate
  • alle Interaktionsmöglichkeiten sollten für Deine User offensichtlich sein

Erwartungskonformität

Deine Seite sollte die Erwartungen der Nutzer*innen erfüllen bzw. übererfüllen.

  • Kenne Deine User und verwende deren Sprache
  • gib unmittelbare und passende Rückmeldungen (zb. beim Ausfüllen von Formularen)
  • teile mit, wenn das System Daten verarbeitet (visuelles Feedback, dass gerade etwas passiert im Hintergrund und Dein User kurz warten muss)
  • strukturiere Deine Informationen so, dass es sich für Deine User „natürlich“ anfühlt
  • passe Deine Formate an kulturelle und sprachliche Konventionen an
  • passe die Art und Länge von Rückmeldungen an Benutzerbelange an
  • halte alle Dialogverhalten und Informationsdarstellungen konsistent, so müssen Deine User nicht immer wieder neu überlegen oder lernen, was das System ihm/ihr sagen möchte

Lernförderlichkeit

Hilf Deinen Usern beim Erlernen Deines interaktiven Systems. Unterstütze sie und leite sie an. 

  • Deine User sollten in der Lage sein, Dein System selbst zu erlernen bzw. eigenständig damit umzugehen
  • gibt geeignete Unterstützung für selten benötigte Dialoge
  • unterstütze Deine User dabei, mit dem Dialog oder Deiner Seite vertraut zu werden
  • alle Rückmeldungen (zb. Fehlermeldungen vom System) und Erläuterungen sollten zum Verständnis beitragen
  • kurz: Hilfetexte sollten auch wirklich helfen und nicht noch mehr verwirren

Steuerbarkeit

Deine User sollten in der Lage sein, den Dialogablauf zu starten sowie seine Richtung und Geschwindigkeit zu beeinflussen, bis das Ziel erreicht ist. 

  • die Dialoggeschwindigkeit muss durch den User steuerbar sein
  • der User kann steuern, wie und wann der Dialog fortgesetzt wird
  • bei einer Unterbrechung/Pause, kann er/sie den Ablauf ohne Beeinträchtigung fortsetzen
  • User können mindestens einen Schritt rückgängig machen
  • voreingestellte Werte sollten änderbar sein
  • das System sollte die Originaldaten verfügbar halten (Reset-Funktion)

Fehlertoleranz

Wichtig ist, dass das beabsichtigte Arbeitsergebnis, trotz erkennbar fehlerhafter Eingaben entweder mit keinem oder mit minimalem Korrekturaufwand seitens des Users erreicht werden kann. 

Fehlervermeidung

  • verhindere, dass etwas, was Deine User tun, zu undefinierten Systemzuständen führt
  • Prüfe alle eingegebenen Daten vor der Datenverarbeitung auf Gültigkeit und Korrektheit
  • blende Sicherheitsabfragen vor der Ausführung kritischer Aktionen ein („Möchtest du das wirklich absenden?“)

Fehlererkennung

  • ist doch ein Fehler passiert, unterstütze Deine User dabei, den Fehler zu entdecken und zu korrigieren
  • erkenne Fehler möglichst während der Eingabe, um eine Fehlermeldung an den User zu vermeiden – das fühlt sich immer nicht gut an

Fehlerkorrektur

  • gib Erläuterungen, die zur Fehlerkorrektur beitragen
  • wenn möglich, korrigiere automatisch 
  • mach die Eingabe so fehlerunanfällig wie möglich
  • minimiere die Schritte zur Fehlerkorrektur!

Individualisierbarkeit

Versuche, dass Deine User die Darstellung von Informationen ändern können, um diese an ihre individuellen Fähigkeiten und Bedürfnisse anzupassen. 

  • Anpassung an unterschiedliche Nutzerbelange anbieten (Schrift vergrößern, vorlesen lassen, Farben einstellen)
  • biete eventuell verschiedene Formen der Darstellung an (Liste, Kacheln, Sortierformate, Freitextsuche)
  • über „mehr anzeigen“ schaffst Du es, den Umfang von Erläuterungen an individuelle Bedürfnisse anzupassen
  • nutze einen Expertenmodus für die User, die mehr können und wollen
  • User können eventuell Dialogelemente hinzufügen oder anpassen (individualisierte Startseiten zb.)
  • alle individuelle Einstellungen müssen zurücksetzbar sein