Usability-Tipp Nr. 1: Den Systemstatus sichtbar machen

Vor fast 20 Jahren beschrieb Jakob Nielsen, einer der wichtigsten Pioniere in Sachen Usability, insgesamt 10 Heuristiken, die die Nutzbarkeit von Produkten und Services erhöhen. Dies ist die Erste.
Inhalt

Vor fast 20 Jahren beschrieb Jakob Nielsen, einer der Pioniere in Sachen Usability, insgesamt 10 Heuristiken, die die Nutzbarkeit von Produkten und Services erhöhen. „Heuristiken? Was ist denn das“, mag man sich fragen.

Heuristiken sind keine spezifischen Anweisungen, die streng zu befolgen sind. Vielmehr sind es Faustregeln, die helfen, die Usability eines Produkts oder Services zu erhöhen.

In diesem Beitrag beleuchte ich die erste der von Nielsen beschriebenen Heuristiken. Sie lautet: Mache den Systemstatus für Nutzer:innen immer sichtbar.

Worum geht es dabei genau?

Die Sichtbarkeit des Systemstatus bezieht sich darauf, wie gut der aktuelle Zustand einer Website oder App oder eines digitalen Produkts für die Nutzer:innen erkennbar ist. Idealerweise sollten Nutzer:innen zu jeder Zeit darüber informiert sein, was aktuell passiert, gerade passiert ist oder als Nächstes passieren wird – durch geeignetes Feedback innerhalb einer vertretbaren Zeit.

Warum ist es wichtig, den Systemstatus sichtbar zu machen?

Um besser zu verstehen, warum diese Heuristik so wichtig ist, versetze Dich einmal in die Rolle eines Nutzers oder einer Nutzerin – in diesem Fall einer Autofahrer:in: Während Du Auto fährst, musst Du permanent darüber informiert werden, wie schnell Du fährst, um Deine Geschwindigkeit erhöhen oder reduzieren zu können.

Informationen geben Dir Kontrolle über das, was Du als Nächstes tun möchtest. Fehlt diese Information, verlierst Du die Kontrolle.

Gleiches gilt, wenn Du Dich beispielsweise auf einer Website bewegst: Du klickst einen Button und möchtest wissen, ob die Aktion, die mit dem Klick verbunden ist, auch wirklich ausgeführt wurde. Oder Du möchtest etwas hochladen und darüber informiert sein, wie weit der Upload-Vorgang fortgeschritten ist.

Wie kann diese Heuristik im UX-Design umgesetzt werden?

Eine große Rolle bei der Umsetzung der Sichtbarkeit eines Systemstatus spielt das User-Interface-Design (UI-Design). UI-Designer:innen können nämlich durch zahlreiche Designelemente unterstützen, dass Nutzer:innen auf dem Laufenden bleiben.

Welche Designelemente das genau sind, stelle ich Dir jetzt vor:

Buttonstatus

Der Zustand (Status) eines Buttons kann dadurch angezeigt werden, dass er die Farbe oder auch die Form ändert. Aus diesem Grund haben Buttons im Designsystem verschiedene Status für diverse Aktionen der Nutzer:innen, etwa „hover“ (beim Überfahren mit der Maus), „active“ , „pressed“ oder „disabled“.

Der Buttonstatus gibt Nutzern wertvolle Hinweise auf den aktuellen Systemstatus (Quelle: MentorHero).

Übrigens gehören auch Links auf einer Website in gewisser Weise zu den Buttons. Auch bei Ihnen sollte sichtbar sein, ob sie bereits aktiviert wurden.

Fortschrittsanzeiger

Fortschrittsanzeiger (Progress Indicators) sind ein wichtiges Designelement im UX- und UI-Design. Sie geben Nutzer:innen Feedback, während Inhalte geladen oder langwierigere Operationen ausgeführt werden.

Es gibt 3 Informationen, die ein Fortschrittsanzeiger liefern kann:

  1. Aktueller Status: Was passiert gerade?
  2. (Zwischen)Ergebnis: Was ist gerade passiert?
  3. Zukünftiger Status: Was wird als nächstes passieren?


[dark_box]Für jeden Vorgang, der länger als 1 Sekunde dauert, sollte ein Fortschrittsanzeiger integriert werden. Bei kürzeren Aktionen lenkt er jedoch eher ab.[/dark_box]

Wie ein Fortschrittsanzeiger idealerweise designt werden sollte, dazu führt Apple in seinem Designblog ein paar Best-Practice-Ansätze auf:

Sei so konkret wie möglich. Wann immer es möglich ist, sollte ein Fortschrittsanzeiger verwendet werden, der die konkrete Dauer der Aktion anzeigt („Determinate Progress Indicator“). Denn wenn lediglich angezeigt wird, dass etwas passiert, aber nicht, wie lange der Vorgang noch dauert, dann ist der Fortschrittsanzeiger weniger nützlich. Auch hier geht es um die bereits angesprochene Kontrolle: Wenn ich als Nutzer:in weiß, wie lange etwas dauert, kann ich selbst entscheiden, ob ich warte, den Vorgang abbreche oder währenddessen etwas anderes tue.

Zeitfenster realistisch darstellen. Der Fortschrittsanzeiger sollte so genau wie möglich sein und die reale Wartezeit widerspiegeln. Wenn ich etwa auf die ersten 90 % eines Vorgangs nur 10 Sekunden warte, die letzten 10 % dann aber 3 Minuten Wartezeit in Anspruch nehmen, dann frage ich mich natürlich, ob die Anwendung überhaupt funktioniert – oder ich fühle mich schlimmstenfalls sogar veräppelt (und breche den Vorgang ab).

Aktionen zusätzlich beschreiben. Neben dem reinen Fortschrittsanzeiger hilft es Nutzer:innen, wenn eine Beschreibung ergänzt wird. Aber Achtung: Beschreibungen wie „Lädt“ sind wenig hilfreich. Deshalb solltest Du konkret beschreiben, was gerade passiert, etwa „Abbildung 4 von 8 wird hochgeladen“.

Vorgang anhalten oder pausieren. Wenn es möglich ist, dann gib den Nutzer:innen die Möglichkeit, einen Vorgang zu unterbrechen oder anzuhalten. Hier kann ein „Cancel“- oder „Abbrechen“-Button hilfreich sein.


[dark_box]Sollten beim Abbrechen eines Vorgangs allerdings Daten verloren gehen, solltest Du einen zusätzlichen Hinweis integrieren, etwa durch ein Alert-Overlay oder Modal-Window (Apps), dass Daten verloren gehen. Bei längeren Uploads kann ein „Pausieren“-Button die Usability enorm erhöhen.[/dark_box]

Anzahl der Schritte in einem Prozess anzeigen

Neben den eben beschriebenen Fortschrittsanzeigern hilft es Nutzer:innen auch bei einem mehrstufigen Prozess, zu wissen, wo sie sich gerade befinden und wie viele Schritte noch folgen. Dies kann vor allem bei einem Registrierungs- oder Bezahlprozess hilfreich sein.

Audiofeedback

Voice-Assistenten wie Siri, Alexa oder Google Assistant erfreuen sich immer größerer Akzeptanz. Auch sie bedürfen eines Feedbacks, wenn eine Aktion ausgeführt wird. So spielen die Assistenten in der Regel einen Bestätigungston ab, wenn eine Anweisung angenommen wurde.

Fazit

Rückmeldungen zum Systemstatus sind ein wesentliches Element guter User-Experience. Mit einfachen Designelementen kann so die Usability enorm erhöht werden.

Inspiration:

Bildquelle: canva.com

Das könnte Dich auch interessieren: