Indikatoren, Validierungen und Benachrichtigungen: wählen Sie die richtige Kommunikationsmethode

by Kim Flaherty (deutsche Übersetzung) - 26.07.2015

Im Interaktionsdesign sollten Nutzer immer durch die Bereitstellung geeigneter Rückmeldungen informiert werden - egal, ob es sich um eine App, Website oder Hardware handelt (alles, von der Smartwatch bis hin zum Thermostat). Sicherzustellen, dass der Zustand des Systems immer sichtbar ist, ist eine der 10 Usability-Heuristiken für das Design von Nutzeroberflächen. Informationen über den Systemstatus, wie Fehlermeldungen und Benachrichtigungen über die Systemaktivität, ermöglicht es den Nutzern, den aktuellen Kontext zu verstehen.

Die beste Möglichkeit, den Systemstatus anzuzeigen, variiert abhängig von folgenden Schlüsselfaktoren:

• Der Art der Informationen, die kommuniziert werden.
• Der Dringlichkeit der Informationen - wie wichtig ist es, dass der Nutzer sie sofort sieht?
• Ob der Nutzer aufgrund der Informationen eine Handlung vornehmen muss

Drei gängige Methoden der Statuskommunikation sind Validierungen, Benachrichtigungen und Statusindikatoren. Diese Begriffe werden im Produktdesign manchmal synonym verwendet, sie repräsentieren allerdings verschiedene Kommunikationsmethoden, die in unterschiedlichen Situationen verwendet werden sollten. Die Unterschiede zwischen ihnen zu verstehen, hilft Ihnen dabei, Ihr Feedback für Nutzer zu verfeinern und für jede Situation die beste Option zu wählen.

Indikatoren

Ein Indikator ist eine Methode, um ein Seitenelement (zum Beispiel Inhalte oder Teile der Nutzeroberfläche) hervorzuheben und Nutzer darüber zu informieren, dass das Element speziell ist und die Aufmerksamkeit des Nutzers erfordert. Häufig liefern Indikatoren Hinweise darauf, ob ein Objekt, das von diesem Element repräsentiert wird, verändert wurde.

Obwohl Indikatoren, wie wir später sehen werden, relativ häufig verwendet werden, um Validierungsfehler zu signalisieren, können sie auch selbstständig genutzt werden. Indikatoren sind visuelle Hinweise, die die Aufmerksamkeit des Nutzers auf spezielle Inhalte oder Elemente der Nutzeroberfläche lenken, die dynamischer Natur sind. (Falls Dinge immer gleich aussehen, sind sie keine Indikatoren - egal, wie extravagant sie gestaltet wurden.)

Es gibt mindestens drei Möglichkeiten, Indikatoren zu implementieren:

• Häufig, aber nicht immer, werden Indikatoren als Symbole implementiert. Leicht erkennbare Symbole sind sehr effektive Kommunikationsinstrumente.
• Typografische Variationen können ebenfalls als Indikatoren verwendet werden, beispielsweise ungelesene E-Mail Nachrichten fettgedruckt anzuzeigen oder Aktiensymbole in einem Handelskonto farbig zu kennzeichnen, falls sich ihr Preis signifikant verändert hat. 
• Obwohl sie weniger häufig sind, können auch Vergrösserungen und Animationen (z.B. Vibrieren) verwendet werden, um bestimmte Objekte hervorzuheben, wodurch sie als Indikator agieren.

Yelp verwendet in den Suchresultaten einen grünen Etiketten-Indikator, um hervorzuheben, dass Tea Market spezielle Aktionen anbietet. Dieser Indikator kommuniziert zusätzliche Informationen über Tea Market.

Charakteristika von Indikatoren:

• Indikatoren sind kontextbezogen. Sie stehen mit einem Element der Nutzeroberfläche oder mit bestimmten Inhalten in Verbindung und sollten in unmittelbarer Nähe dieses Elements angezeigt werden.
• Indikatoren sind konditional. Sie sind nicht immer vorhanden, erscheinen oder verändern sich aber abhängig von bestimmten Bedingungen. Ein Indikator für die Aktienperformance, wie jener im unten stehenden Beispiel von American Century, kann sich verändern, um zu signalisieren, dass der Aktienpreis steigt oder sinkt. Außerdem wird der Etiketten-Indikator im oben stehenden Yelp-Beispiel nur dann angezeigt, wenn das Unternehmen eine spezielle Aktion anbietet.
• Indikatoren sind passiv. Sie setzen keine Handlung des Nutzers voraus, werden aber als Kommunikationsinstrument verwendet, um den Nutzer über wichtige Dinge zu informieren.

American Century Investments verwendet einen konditionalen Indikator, um Informationen über die Performance einer bestimmten Aktie zu liefern. War die tägliche Veränderung negativ, ist der Indikator ein roter Pfeil, der nach unten zeigt. War die tägliche Veränderung positiv, ist ein grüner Pfeil nach oben zu sehen. Die Aktienperformance beeinflusst den Indikator, der neben dem Preis angezeigt wird.

Indikatoren können die Nutzeroberfläche stören bzw. überladen und Nutzer ablenken, weshalb es wichtig ist, sich genau zu überlegen, wie viele Indikatoren Sie in Ihrem Design verwenden wollen bzw. ob überhaupt Indikatoren notwendig sind.

Denken Sie über folgende Dinge nach, bevor Sie sich für oder gegen einen Indikator entscheiden:

• Wie wichtig ist die Information für den Nutzer? Lohnt es sich, Platz auf der Website zu investieren, um den Nutzer darüber zu informieren?
  • Wie oft werden die Informationen verwendet?
  • Erwartet sich der Nutzer, die Informationen zu sehen?
  • Würden die Informationen vermisst werden, wenn sie fehlen würden?
  • Wie wichtig ist es für die App, dass der Nutzer die Information findet?

Validierungen

Validierungsnachrichten sind Fehlermeldungen, die mit den Eingaben des Nutzers in Verbindung stehen: sie kommunizieren, dass die soeben eingegebenen Daten unvollständig oder falsch waren. In e-Commerce Systemen, enthalten Validierungsnachrichten zum Beispiel häufig Informationen, wie den Namen, die Rechnungsadresse und Kreditkarteninformationen.

Cobragolf.com verwendet eine Validierungsnachricht, die genau anzeigt, welches Feld falsch ausgefüllt wurde. Die Nachricht ist allerdings komplex und verwirrend. Ein besserer Text wäre: „Bitte geben Sie eine gültige E-Mail Adresse ein“.

Charakteristika der Validierung:

• Ein Nutzer muss eine Handlung unternehmen, um die Validierungsnachricht zu entfernen.
• Die Information in der Validierungsnachricht ist kontextbezogen und bezieht sich auf eine spezifische Eingabe des Nutzers, bei der ein Problem aufgetreten ist.

Die Art, auf die Validierungen implementiert werden sollten, variiert basierend auf den einzigartigen Anforderungen des Formulars. Im Allgemeinen sollte das System den Nutzer allerdings über eine falsche Eingabe des Nutzers informieren, indem eine verständliche, klare Nachricht angezeigt wird, die dabei hilft, den Fehler zu beheben. Validierungsnachrichten sollten die Richtlinien für Fehlermeldungen befolgen. Anstatt einfach das Problem zu beschreiben, sollte Nutzern mitgeteilt werden, wie sie es lösen können. Schreiben Sie nicht einfach „Das Feld ist leer“, sondern entscheiden Sie sich für „Bitte geben Sie Ihre Adresse ein“, was höflicher ist und eine Lösung vorschlägt.

Da Validierungen vom Inhalt abhängen, kann es hilfreich sein, neben der Validierungsnachricht einen Symbol-Indikator zu verwenden, der darauf hinweist, welche Eingabe fehlt oder korrigiert werden muss.

Bestbuy.com zeigt eine hilfreiche Validierungsnachricht an, in der Nutzer darüber informiert werden, wie sie das Problem beheben können. Außerdem werden ein Symbol-Indikator und eine andere Farbe verwendet, um die Aufmerksamkeit des Nutzers auf das Feld, das korrigiert werden muss, zu lenken.

Benachrichtigungen

Benachrichtigungen sind informative Nachrichten, die Nutzer über allgemeine Ereignisse in einem System informieren. Im Gegensatz zur Validierung, müssen Benachrichtigungen nicht direkt mit der Eingabe des Nutzers oder der aktuellen Aktivität des Nutzers im System in Verbindung stehen - sie informieren den Nutzer aber normalerweise über eine Veränderung des Systemstatus oder ein Ereignis, das interessant sein könnte. Im Falle von E-Mails, sozialen Netzwerken und Handy-Apps können Benachrichtigungen sogar übermittelt werden, während der Nutzer die App gar nicht verwendet.

Benachrichtigungen können kontextbezogen - und damit für ein bestimmtes Element der Nutzeroberfläche gelten - oder global sein, was bedeutet, dass sie sich auf das gesamte System beziehen.

Die Facebook App verwendet eine kontextbezogene Benachrichtigung, um im Nachrichten-Feed zu kommunizieren, dass dem Feed neuere Geschichten hinzugefügt wurden. Der Nutzer muss auf diese Benachrichtigung nicht reagieren.

Charakteristika von Benachrichtigungen:

• Sie werden nicht durch Handlungen des Nutzers ausgelöst.
• Sie kündigen ein Ereignis an, das für den Nutzer wichtig ist.

Es gibt zwei Haupttypen von Benachrichtigungen, deren Unterschied darin besteht, dass sie eine Handlung des Nutzers voraussetzen oder nicht:

• Benachrichtigungen, die eine Handlung voraussetzen, informieren den Nutzer über ein Ereignis. Ihre Funktion ähnelt Validierungen, da sie allerdings nicht durch eine Aktion des Nutzers ausgelöst werden, setzen sie ein anderes Design voraus.

Benachrichtigungen, die eine Handlung voraussetzen, sind häufig dringend und sollten auffällig sein. Sie können zum Beispiel als modale Pop-ups implementiert werden, die Nutzer unterbrechen und sie zwingen, die Nachricht sofort zu lesen. Außerdem ist eine Handlung notwendig, um die Benachrichtigung zu schließen.

Das Mac Betriebssystem verwendet eine Benachrichtigung, um Nutzer über verfügbare System-Updates zu informieren. Der Nutzer muss die Nachricht aktiv schließen, indem er entweder das Update installiert oder sich für eine Erinnerung zu einem späteren Zeitpunkt entscheidet. Hierbei handelt es sich um eine aufdringliche Benachrichtigung, die eine Handlung des Nutzers voraussetzt.

• Passive Benachrichtigungen dienen Informationszwecken. Sie melden ein Ereignis im System, das keine Handlung des Nutzers voraussetzt. Viele Benachrichtigungen in mobilen Apps sind passiv: sie kündigen normalerweise ein Ereignis an, das für den Nutzer interessant sein könnte.

Passive Benachrichtigungen sind normalerweise nicht dringend und sollten weniger aufdringlich präsentiert werden. Eine typische Implementierung einer passiven Benachrichtigung könnte ein kennzeichnendes Symbol oder ein kleines, nicht modulares Pop-over in einer Ecke des Bildschirms sein. Passive Benachrichtigungen können leicht übersehen werden, da keine Aktion des Nutzers notwendig ist. Wenn die in der Benachrichtigung enthaltenen Informationen benötigt werden, um das System zu verstehen, kann eine passive Benachrichtigung, die leicht ignoriert werden kann, problematisch sein.

Adobe Creative Cloud verwendet eine nicht aufdringliche, passive Benachrichtigung, um Nutzer über ein verfügbares App-Update zu informieren. Diese Benachrichtigung erscheint mehrere Sekunden lang auf dem Bildschirm, bevor sie verschwindet. Der Nutzer muss keine Handlung vornehmen.

Uniqlo.com verwendet eine nicht aufdringliche, passive Benachrichtigung, um Nutzer darüber zu informieren, dass ein Artikel in den Warenkorb gelegt wurde. Es ist keine Handlung notwendig, um die Nachricht zu schließen. Derartige Benachrichtigungen stellen für Käufer auf e-Commerce Websiten manchmal ein Problem dar, da sie die Nachricht nicht bemerken. Nutzer, die den Hinweis übersehen, könnten einen Artikel mehrmals in den Warenkorb legen oder müssen ihren Einkauf überbrechen, um zu kontrollieren, welche Artikel sich im Warenkorb befinden.

Eine Design-Herausforderung von Benachrichtigungen ist, dass sie nicht das sofortige und offensichtliche Resultat einer bestimmten Handlung des Nutzers sind. Im Gegenteil, der Nutzer ist wahrscheinlich gerade mit anderen Dingen beschäftigt und denkt gar nicht über das in der Warnung behandelte Thema nach. Deshalb müssen die Benachrichtigungen mehr Kontext enthalten und den Nutzern genügend Informationen liefern, um zu verstehen, wovon die Benachrichtigung handelt.

(Im Gegensatz dazu hat der Nutzer im Falle einer Validierung gerade jene Aktion durchgeführt, die korrigiert werden muss. Die Validierungsnachricht muss den Nutzer also nicht über die zugehörige Aufgabe informieren. Falls das Kassenformular einer e-Commerce Seite zum Beispiel ein Feld für das Ablaufdatum der Kreditkarte enthält, welches nicht ausgefüllt wurde, muss die Nachricht nicht lauten „Bitte geben Sie das Ablaufdatum der Kreditkarte an, mit der Sie $29,90 für das ärmellose blaue Kleid, das Sie gerade bei Uniqlo.com kaufen, bezahlen möchten“. Eine Benachrichtigung, die am nächsten Tag angezeigt wird und Sie darüber informiert, dass das Kleid versandt wurde, muss allerdings mehr Text enthalten als nur „Ihr Paket wurde versandt“.)

Falls eine Benachrichtigung kontextuell ist und mit einem speziellen Element der Nutzeroberfläche in Verbindung steht, kann ein Symbol-Indikator auf dem Element darauf hinweisen, worauf sich die Benachrichtigung bezieht und die Aufmerksamkeit des Nutzers wecken. Ein Indikator-Symbol auf dem Icon einer mobilen App signalisiert zum Beispiel, dass der Nutzer eine Benachrichtigung von der entsprechenden App erhalten hat.

Die iPhone Messaging-App enthält eine Benachrichtigung, dass eine neue Nachricht erhalten wurde. Neben der Benachrichtigung wurde ein Indikator-Symbol auf dem Icon der Messaging App platziert, um darauf hinzuweisen, worauf sich die Benachrichtigung bezieht. Um den Indikator zu entfernen, muss der Nutzer die Nachricht öffnen.

Mint.com verwendet einen Indikator und eine Benachrichtigung, um darauf hinzuweisen, dass ein Konto Aufmerksamkeit erfordert. Der Warn-Indikator (1) erscheint in der Nähe der Zusammenfassung des Kontos, das Aufmerksamkeit erfordert, während die Benachrichtigung (2) neben anderen wichtigen Informationen im zentralen Bereich der Seite erscheint. Der tatsächliche Text der Benachrichtigung könnte allerdings hilfreicher sein.

Es ist wichtig, die richtige Kommunikationsmethode zu wählen

Die falsche Kommunikationsmethode zu verwenden, kann negative Auswirkungen auf das Nutzererlebnis haben. Kehren wir zum oben stehenden Szenario zurück, in dem Yelp in den Suchresultaten einen grünen Etiketten-Indikator verwendete, um darauf hinzuweisen, dass Tea Market derzeit ein Spezialangebot im Programm hat. Diese Information ist kontextuell und wichtig für Nutzer, die gerade nach einem Lokal suchen, in dem sie Tee trinken können.

Sie könnten jetzt annehmen, dass Sie Nutzer alternativ über potenzielle Tee-Angebote informieren können, indem Sie ihnen Benachrichtigungen senden, sobald ein derartiges Angebot verfügbar ist. Falsch! Eine Benachrichtigung, die ohne Rücksicht auf die aktuellen Ziele des Nutzers angezeigt wird, wird mit großer Wahrscheinlichkeit ignoriert und könnte Nutzer sogar stören, da sie ihre aktuelle Tätigkeit unterbricht und irrelevant für ihre aktuellen Bedürfnisse ist.

 (Im Allgemeinen wird jede Art von Werbung ignoriert, sofern sie nicht mit den Zielen und der Einstellung des Nutzers in Verbindung steht.)

Alternativ wäre ein Toast (ein kleines, nicht modulares Pop-up, das nach wenigen Sekunden verschwindet, wie die Neuen Geschichten der Facebook App) zwar für passive Benachrichtigungen geeignet, er ist allerdings eine schlechte Methode, um eine Fehlermeldung anzuzeigen - egal ob es sich um eine Validierung oder eine andere Nachricht handelt. Eine unserer mobilen Nutzerinnen wartete 5 Minuten darauf, dass sich Inhalte laden, da sie die kleine Fehlermeldung im unteren Bereich der Seite, welche nach 5 Sekunden verschwand, nicht bemerkt hatte.

Allmodern.com verwendet eine Benachrichtigung, die eine Handlung voraussetzen, um zu kommunizieren, dass ein Produkt als Favorit gespeichert wurde. Für Nutzer, die viele Artikel als Favorit speichern, kann diese Art des Feedbacks nervtötend und störend sein. Die Information könnte besser in einem passiven, nicht modalen Pop-over in der Ecke des Bildschirms angezeigt werden, wo sie gesehen wird, aber keine Handlung voraussetzt, um geschlossen zu werden.

Schlussfolgerung

Denken Sie daran, dass die wichtigsten Unterschiede zwischen den drei Kommunikationsmethoden die folgenden sind:

• Indikatoren enthalten Zusatzinformationen über dynamische Inhalte oder ein Element der Nutzeroberfläche. Sie sind konditional, was bedeutet, dass sie erscheinen oder sich verändern, sobald bestimmte Voraussetzungen erfüllt werden.
• Validierungen stehen mit Aktionen oder Eingaben des Nutzers in Verbindung.
• Benachrichtigungen konzentrieren sich auf Ereignisse, die mit dem System in Verbindung stehen.