Der Von-Restorff-Effekt (Isolationseffekt)

Kurz gesagt

Stehen in einer Liste neun Wörter in Schwarz und eines in Rot, erinnern Sie sich laut dem Von-Restorff-Effekt nach dem Schließen der Liste eher an das rote Wort.

Man nennt das auch Isolationseffekt, auf Englisch Isolation Effect. Der Effekt hat weniger mit dem abweichenden Element zu tun als mit seiner Umgebung. Ein Element sticht nur hervor, wenn sich die Elemente um es herum ähneln.

In der Oberfläche nutzen wir diesen Effekt bewusst, zerstören ihn aber auch leicht. Zwei einfache Wege, ihn zu zerstören: alles hervorheben oder die Hervorhebung nur der Farbe überlassen.

Hedwig von Restorffs Studie von 1933

Der Effekt ist nach der deutschen Psychiaterin und Kinderärztin Hedwig von Restorff benannt. Ihre Studie erschien 1933 im 18. Band der Zeitschrift Psychologische Forschung. Der Titel lautet „Über die Wirkung von Bereichsbildungen im Spurenfeld“.

Der Kern der Versuche: Teilnehmende sahen eine Liste aus einander ähnlichen Elementen. Eines der Elemente unterschied sich von den anderen. Das abweichende Element wurde besser behalten als die ähnlichen.

Der Unterschied kann auf vielen Wegen entstehen. Größe, Form, Farbe, Abstand oder Unterstreichung sind einige davon.

Der Psychologe R. R. Hunt hält die verbreitete Darstellung dieses Befunds für unvollständig. Hunt veröffentlichte 1995 in Psychonomic Bulletin & Review einen Artikel mit dem Titel „What von Restorff really did“. Laut Hunt zeigen von Restorffs Daten, dass der Effekt nicht unbedingt einen auffälligen Unterschied braucht.

Hunts eigentlicher Schwerpunkt ist die Ähnlichkeit. Ihm zufolge erklärt der Unterschied allein den Effekt nicht, man muss ihn zusammen damit sehen, wie sehr sich die umgebenden Elemente ähneln. Das liegt sehr nah an der Idee der Ähnlichkeit in den Gestaltprinzipien.

Wo man ihn in der Oberfläche nutzt

In der Oberfläche nutzen wir den Von-Restorff-Effekt meist bewusst. Ziel ist, den Blick auf eine einzige Sache auf dem Bildschirm zu lenken.

• Hervorgehobener Tarif. In der Preistabelle steht der empfohlene Tarif mit anderem Hintergrund und Rahmen und trägt ein Etikett wie „Am häufigsten gewählt“. Die anderen Tarife bleiben schlicht. Details dazu im Muster Preisseite.
• Primärer CTA. Auf einem Bildschirm gibt es einen einzigen gefüllten, dunklen Button, die übrigen haben einen Rahmen oder sind Textbuttons. Die Person muss die Hauptaktion nicht suchen. Im Muster CTA-Button können Sie einen und zwei primäre Buttons nebeneinander ausprobieren.
• Benachrichtigungsbadge. Auch die kleine Zahl in der Ecke eines App-Symbols nutzt denselben Effekt. Die Symbole ähneln sich, das mit Badge hebt sich ab.

Ein hervorgehobener Tarif kann auch mit einem anderen Effekt arbeiten. Der teure Tarif daneben liefert einen Vergleichspunkt, das beschreibe ich auf der Seite zum Ankereffekt.

Womit man ein Element abhebt

Zuerst denkt man an Farbe. Doch jede der oben genannten Arten von Unterschied hat eine Entsprechung in der Oberfläche.

• Größe und Gewicht. Eine größer oder fetter gesetzte Überschrift hebt sich vom übrigen Text in derselben Zeile ab.
• Form. Ein gefüllter Button wirkt neben Buttons mit Rahmen anders, ein rundes Badge neben eckigen Karten.
• Abstand. Ein Element, das etwas weiter weg von den anderen steht, liest sich als eigene Gruppe.
• Text. Ein Etikett wie „Empfohlen“ oder „Aus“ lässt sich lesen, auch wenn man die Farbe nicht sieht.

Die robusteste Hervorhebung nutzt mindestens zwei davon zusammen. Wird eines übersehen, wirkt das andere.

Live-Beispiel: dieselbe Einstellungsliste, vier Zustände

Der Bildschirm unten zeigt die Sicherheitseinstellungen einer fiktiven Banking-App. Eine von acht Einstellungen ist aus, und die Person soll das bemerken. Wechseln Sie die Zustände und achten Sie darauf, wohin Ihr Blick geht.

Dieselbe Liste, vier Zustände

Sicherheit und Benachrichtigungen

• Anmeldehinweis Neu

  Schickt eine E-Mail, wenn sich jemand von einem neuen Gerät anmeldet.

  An

• Zahlungshinweis Beliebt

  Bei jeder Kartenzahlung kommt sofort eine Nachricht.

  An

• Anmeldung per Gesichtserkennung Empfohlen

  Sie melden sich mit dem Gesicht statt mit dem Passwort an.

  An

• Zwei-Faktor-Authentifizierung WichtigIch empfehle, das einzuschalten

  Verlangt bei der Anmeldung zusätzlich einen Code auf Ihr Telefon.

  Aus

• Automatische Abmeldung Neu

  Beendet die Sitzung, wenn Sie eine Weile nichts tun.

  An

• Angebots-E-Mails Angebot

  Schickt Ihnen persönliche Angebote per E-Mail.

  An

• Screenshot-Sperre Empfohlen

  Verhindert Screenshots auf den Kontobildschirmen.

  An

• Hinweis bei Auslandszahlung Wichtig

  Warnt Sie bei einer Zahlung im Ausland.

  An

Wohin geht das Auge?

Die ausgeschaltete Zeile hebt sich durch Hintergrundfarbe, dicken Rahmen und ein beschriftetes Etikett ab. Das Auge geht zuerst dorthin.

Da JavaScript ausgeschaltet ist, sehen Sie die Liste mit „Eine Hervorhebung“. Im Live-Beispiel sehen Sie dieselbe Liste auch ohne Hervorhebung, mit hervorgehobenen Zeilen überall und nur mit Farbe hervorgehoben, und Sie können eine Graustufenansicht einschalten.

Der Einstellungsbildschirm einer fiktiven Banking-App; Einstellungen und Zustände sind erfunden. Von acht Einstellungen ist nur die Zwei-Faktor-Authentifizierung aus. Die Ansicht für Farbenblindheit stellt den Bildschirm in Graustufen dar. Das ist eine grobe Annäherung daran, was jemand sieht, der gar keine Farben unterscheidet.

Im Zustand „Eine Hervorhebung“ heben drei Dinge die Zeile ab: Hintergrund, dicker Rahmen und beschriftetes Etikett. In der Ansicht für Farbenblindheit verschwindet die Farbe, die anderen beiden bleiben.

Übermäßiger Einsatz: wenn alles hervorgehoben ist

Bedingung für den Von-Restorff-Effekt ist eine ruhige Umgebung. Trägt jedes Element auf dem Bildschirm eine eigene Farbe oder ein Etikett, bleibt kein Element übrig, das sich abhebt.

Das passiert meist schleichend. Das Marketing will ein Kampagnenetikett, das Produktteam setzt ein Badge „Neu“ an die neue Funktion. Jede Bitte ist für sich vernünftig, die Summe ist Lärm.

Wählen Sie das eine, was auf einem Bildschirm wirklich hervorstechen muss. Der Rest bleibt im selben visuellen Gewicht. Warum ein voller Bildschirm ermüdet, beschreibe ich auf der Seite zur kognitiven Belastung.

Barrierefreiheit: nicht nur mit Farbe hervorheben

Farbe ist der einfachste Weg der Hervorhebung, aber auch der zerbrechlichste. Das Erfolgskriterium 1.4.1 Benutzung von Farbe (Use of Color) der WCAG behandelt dieses Thema und gehört zur Stufe A.

Laut Kriterium darf Farbe nicht das einzige visuelle Mittel auf dem Bildschirm sein. Das gilt, wenn Information vermittelt, eine Aktion angezeigt, eine Reaktion verlangt oder ein Element unterschieden wird. Wer den Farbunterschied nicht sieht, muss dieselbe Information über einen anderen visuellen Hinweis bekommen.

Die Erläuterungsseite des W3C verbietet Farbe nicht. Farbcodierung ist erlaubt, solange ein weiterer visueller Hinweis dazukommt. Ein Beispiel auf der Seite sind Pflichtfelder: Neben dem roten Text steht zusätzlich ein Symbol.

Beträgt der Helligkeitsunterschied zwischen zwei Farben mindestens 3:1, kann er als zusätzliche visuelle Unterscheidung gelten. Muss die Person aber eine bestimmte Farbe wahrnehmen, ist unabhängig vom Kontrast ein zusätzlicher Hinweis nötig. Die Verhältnisse messen Sie mit dem Kontrastrechner.

Schalten Sie im Beispiel oben den Zustand „Nur mit Farbe“ ein und wechseln Sie dann zur Ansicht für Farbenblindheit. Die grünen und orangen Punkte werden fast zum selben Grau, die ausgeschaltete Einstellung verschwindet. Für die anderen Kriterien der WCAG sehen Sie sich den WCAG-Ratgeber an.

Wie Sie es auf Ihrem eigenen Bildschirm prüfen

1. Schreiben Sie auf, welches Element auf dem Bildschirm hervorstechen soll. Stehen mehrere Elemente auf der Liste, beginnt das Problem schon dort.
2. Machen Sie den Bildschirm unscharf oder schauen Sie mit zusammengekniffenen Augen hin. Ist das Erste, was Sie sehen, das aufgeschriebene Element?
3. Wandeln Sie einen Screenshot in Graustufen um. Ist die Hervorhebung noch erkennbar? Wenn nicht, ergänzen Sie ein Etikett, Symbol oder einen Rahmen.
4. Zählen Sie die Badges und farbigen Etiketten. Fragen Sie bei jedem: Was verlieren wir, wenn es fehlt?

Wollen Sie mit Nutzern messen, ob die Hervorhebung wirklich wirkt, ist ein First-Click-Test ein guter Anfang. Die übrigen Prinzipien stehen in der Liste der UX-Gesetze.

Meine Notiz

Der Hervorhebungsfehler, den ich in Audits oft sehe, ist das Zuviel. Auf der Startseite gibt es Buttons in vier Farben, auf jeder Karte ein Badge. Die Person weiß nicht, wohin sie schauen soll.

Meine Regel ist einfach: eine primäre Aktion je Bildschirm. Gibt es einen empfohlenen Tarif, hebt sich in der Tabelle nur dieser ab. Farbe kommt immer zusammen mit Text oder einem Symbol.

Soll jemand von außen prüfen, was auf Ihrem Bildschirm hervorsticht, macht das UX Audit diese Prüfung zusammen mit der Barrierefreiheit.