--- title: "Der Von-Restorff-Effekt: Warum auffällt, was anders ist" url: "https://www.insideuxdesign.com/de/blog/der-von-restorff-effekt-warum-auffaellt-was-anders-ist" language: "de" description: "Was der Von-Restorff-Effekt ist und wie du CTAs, Tarife und Badges gezielt hervorhebst, ohne Banner-Blindheit. Mit Praxisbeispiel und Checkliste." published: "2026-07-29T09:00:00+02:00" updated: "2026-10-15T00:09:49+02:00" --- # Der Von-Restorff-Effekt: Warum auffällt, was anders ist Was sich von seiner Umgebung abhebt, bleibt im Kopf. Was Hedwig von Restorff 1933 herausfand und wie du Hervorhebung im Interface gezielt und barrierefrei einsetzt. Stell dir das Dashboard einer Rechnungs-App für Selbstständige vor. Oben rechts stehen vier Buttons in kräftigem Orange: „Neue Rechnung“, „Export“, „Kunde anlegen“ und „Jetzt upgraden“. In der Seitenleiste tragen fünf Menüpunkte rote Zähler. Darüber läuft ein gelbes Banner, das sanft pulsiert und einen Rabatt auf den Pro-Tarif verspricht. Überfällige Rechnungen erkennt man daran, dass der Betrag rot ist. Mehr nicht. Jedes dieser Elemente wurde mit guter Absicht hervorgehoben. Das Ergebnis ist trotzdem ein Bildschirm, auf dem nichts mehr auffällt. Wer eine Rechnung schreiben will, sucht den richtigen Button zwischen vier gleich lauten. Die roten Zähler werden nach ein paar Tagen ignoriert. Und die überfällige Rechnung eines wichtigen Kunden geht unter, weil Rot hier ohnehin überall ist. Dahinter steckt ein Prinzip, das die Psychologin Hedwig von Restorff 1933 beschrieben hat: Was sich von seiner Umgebung abhebt, wird besser behalten. Der Effekt gehört zu den bekanntesten Werkzeugen im Interface-Design und zu den am häufigsten falsch eingesetzten. Dieser Artikel erklärt, was von Restorff tatsächlich untersucht hat, wie sich das auf Interfaces übertragen lässt und warum zu viel Hervorhebung sich selbst aufhebt. Die Rechnungs-App dient dabei als durchgehendes Beispiel. Sie ist erfunden, aber typisch. ## Was Hedwig von Restorff 1933 herausfand Hedwig von Restorff wurde 1906 in Berlin geboren und promovierte am Psychologischen Institut der Berliner Universität bei Wolfgang Köhler, einem der Begründer der Gestaltpsychologie. Ihre Arbeit erschien 1933 in der Zeitschrift Psychologische Forschung unter dem Titel „Über die Wirkung von Bereichsbildungen im Spurenfeld“. 1935 wurde sie vom Institut entlassen. Im selben Jahr verließ Köhler Deutschland und ging an das Swarthmore College in den USA. Von Restorff studierte danach Medizin und arbeitete bis zu ihrem Tod 1962 als Ärztin in Freiburg. Ihre Versuche waren schlicht aufgebaut. Versuchspersonen lernten Listen mit Paaren aus unterschiedlichem Material: sinnlose Silben, Zahlen, Buchstaben, Sonderzeichen von der Schreibmaschinentastatur und Farben. In einer Liste stammte ein Teil der Einträge aus derselben Kategorie, die übrigen waren jeweils einzeln vertreten. Nach einer Pause sollten die Versuchspersonen so viel wie möglich wiedergeben. Das Ergebnis: Die isolierten Einträge wurden häufiger erinnert als die gleichartigen. In weiteren Experimenten variierte von Restorff die Bedingungen. Als sie die Zahl der herausstechenden Einträge pro Liste von vier auf zwei reduzierte, wurde der Vorteil größer, so wie sie es vorhergesagt hatte. In einem späteren Experiment, das dem heute üblichen Versuchsaufbau am nächsten kommt, gab es nur noch ein einziges isoliertes Element: eine Zahl unter 19 Silben oder umgekehrt eine Silbe unter 19 Zahlen. Der Vorteil stieg noch einmal deutlich. Die umgekehrte Variante ist aufschlussreich, denn sie zeigt, dass Zahlen nicht an sich besser haften. Entscheidend ist der Unterschied zum Rest der Liste. Diese Details hat der Psychologe Colin MacLeod 2020 in einer historischen Aufarbeitung in der Zeitschrift Memory & Cognition zusammengetragen. Dort findet sich auch ein Punkt, der in Zusammenfassungen meist verloren geht: Von Restorff selbst deutete den Effekt weniger als besonderen Vorteil des herausstechenden Elements. Sie sah eher einen Nachteil für die gleichartigen Elemente, die sich gegenseitig stören und zu einer Gruppe verschwimmen. Das isolierte Element bleibt dagegen für sich stehen. Für Interfaces ist diese Lesart wichtiger, als es zunächst scheint. Anders als manche populären Befunde der Psychologie steht der Effekt auf festem Grund: MacLeod beschreibt ihn als robust und leicht replizierbar. Diskutiert wird vor allem, wie man ihn sauber misst und erklärt, nicht, ob es ihn gibt. ### Mehr als ein Aufmerksamkeitstrick Die naheliegende Erklärung lautet: Das Auffällige bekommt mehr Aufmerksamkeit und wird deshalb besser gespeichert. Ganz so einfach ist es nicht. Der Gedächtnisforscher R. Reed Hunt wies 1995 darauf hin, dass von Restorff den Effekt auch fand, wenn das isolierte Element an zweiter Stelle der Liste stand. In diesem Moment konnte es noch gar nicht als anders auffallen, weil die gleichartigen Elemente erst danach kamen. Hunt folgert daraus, dass Auffälligkeit im Moment der Wahrnehmung den Effekt allein nicht erklärt. Es kommt auf das Verhältnis zum gesamten Kontext an, also darauf, was ähnlich ist und was nicht. ## Vom Gedächtnis zum Interface Streng genommen ist der Von-Restorff-Effekt ein Gedächtnisbefund. In Interfaces geht es meist um etwas anderes: Was sehen Menschen zuerst, was finden sie schnell? Dass sich das Prinzip trotzdem übertragen lässt, liegt an einem verwandten Mechanismus aus der Wahrnehmungsforschung. Anne Treisman und Garry Gelade beschrieben 1980 in ihrer Feature-Integration-Theorie, dass ein Ziel, das sich in einem einzelnen Merkmal wie der Farbe vom Rest unterscheidet, bei der visuellen Suche regelrecht herausspringt. Fachleute sprechen vom Pop-out-Effekt. Muss jemand dagegen nach einer Kombination von Merkmalen suchen, etwa „orange und eckig“ zwischen orangen Kreisen und grauen Quadraten, dauert die Suche deutlich länger. Beide Befunde laufen auf dieselbe Regel hinaus: Hervorhebung ist relativ. Ein orangefarbener Button fällt nicht auf, weil Orange eine starke Farbe ist, sondern weil der Rest nicht orange ist. Jon Yablonski fasst das in seiner Sammlung „Laws of UX“ für die Praxis zusammen: Wichtige Informationen und zentrale Aktionen sollen visuell unterscheidbar sein, aber mit Zurückhaltung, damit hervorgehobene Elemente nicht miteinander konkurrieren. Unterscheiden kann sich ein Element in vielen Dimensionen: Farbe, Größe, Form, Position, Weißraum, Schriftgewicht, Bewegung. Die [Gestaltgesetze](https://www.insideuxdesign.com/de/glossar/gestaltgesetze) beschreiben das Gegenstück: Was ähnlich aussieht und nah beieinanderliegt, wird als Gruppe wahrgenommen. Hervorheben heißt, ein Element bewusst aus dieser Gruppe herauszulösen. ## Drei typische Einsatzorte ### Der primäre Call to Action Fast jeder Bildschirm hat eine Hauptaktion, die die meisten Menschen dort ausführen wollen. Ein Call to Action, kurz CTA, ist ein Element, das genau zu dieser Handlung auffordert. Im Dashboard der Rechnungs-App ist das „Neue Rechnung“. Damit dieser Button funktioniert, braucht er einen Unterschied, den die anderen nicht haben. - **Vorher:** Vier gleich große, orange gefüllte Buttons nebeneinander. Keiner sticht hervor, weil alle gleich laut sind. - **Nachher:** „Neue Rechnung“ bleibt als einziger gefüllter Button. „Export“ und „Kunde anlegen“ werden zu Buttons mit Rahmen, „Jetzt upgraden“ wandert als Textlink in das Kontomenü. Größe hilft dabei doppelt. Ein größerer Button fällt nicht nur eher auf, er ist nach [Fitts’ Law](https://www.insideuxdesign.com/de/glossar/fitts-law) auch leichter zu treffen. Im Kern ist das alles eine Frage der visuellen Hierarchie. Es lohnt sich, sie im [Design System](https://www.insideuxdesign.com/de/glossar/design-system) festzuschreiben: eine Abstufung in primäre, sekundäre und tertiäre Buttons und die Vereinbarung, dass es pro Ansicht nur einen primären gibt. Dann muss das Team die Entscheidung nicht bei jedem Screen neu treffen. Wie das mit wenig Aufwand gelingt, zeigt der Artikel [Design Systems für kleine Teams](https://www.insideuxdesign.com/de/blog/design-systems-fuer-kleine-teams). ### Der empfohlene Tarif Auf Preisseiten ist der Effekt besonders gut zu sehen. Drei oder vier Tarife stehen nebeneinander, einer davon ist größer, farbig hinterlegt oder trägt ein Etikett wie „Beliebt“. Das hilft Menschen, die unsicher sind, welcher Tarif zu ihnen passt. Eine solche Empfehlung strukturiert die Auswahl, ohne sie einzuschränken. - **Vorher:** Alle drei Tarife der Rechnungs-App tragen ein farbiges Etikett: „Neu“, „Beliebt“ und „Bestes Angebot“. Damit ist die Empfehlung keine mehr. - **Nachher:** Nur der mittlere Tarif bekommt einen kräftigeren Rahmen und ein Etikett mit Begründung: „Empfohlen für Selbstständige mit bis zu 50 Rechnungen im Monat“. Die anderen beiden bleiben ruhig. Die Begründung macht den Unterschied. Ein Etikett, das erklärt, für wen der Tarif gedacht ist, hilft bei der Entscheidung. Ein Etikett, das nur Druck aufbaut, tut das nicht. Wo die Grenze zur Manipulation verläuft, zeigt der Abschnitt zu den Fallstricken weiter unten. ### Benachrichtigungen und Badges Badges sind kleine Markierungen, meist ein Punkt oder ein Zähler, die auf etwas Neues oder Ungelesenes hinweisen. Sie leben vollständig vom Von-Restorff-Effekt: Ein roter Punkt auf einem sonst ruhigen Symbol fällt sofort auf. Genau deshalb nutzen sie sich schnell ab. Wenn fünf Menüpunkte rote Zähler tragen und einer davon nur meldet, dass es neue Vorlagen gibt, lernen Menschen, die Zähler zu übergehen. Dann fällt auch der eine nicht mehr auf, der wirklich wichtig ist. - **Vorher:** Rote Zähler bei „Rechnungen“, „Kunden“, „Vorlagen“, „Berichte“ und „Hilfe“. - **Nachher:** Ein Zähler nur bei „Rechnungen“, und nur für überfällige Rechnungen, also für etwas, das eine Handlung verlangt. Neue Vorlagen erscheinen als dezenter Hinweis auf der Vorlagenseite selbst. Eine hilfreiche Frage für jedes Badge lautet: Muss die Person deswegen jetzt etwas tun? Wenn nicht, braucht es keins. ## Wenn alles hervorgehoben ist, ist nichts hervorgehoben Die vielleicht wichtigste Lehre aus dem Von-Restorff-Effekt steckt schon in den Originalversuchen. Als von Restorff weniger Elemente isolierte, wurde der Effekt stärker. Mit nur einem einzigen isolierten Element stieg er noch einmal deutlich. Überträgt man ihre eigene Deutung, dass gleichartige Elemente sich gegenseitig schwächen, auf ein Interface, wird das Problem klar: Vier orange Buttons bilden einfach eine neue, orange Gruppe. Das Auffällige wird zum Normalfall, und der Kontrast ist weg. In der Praxis wächst dieses Problem schleichend. Das Marketing möchte das Upgrade sichtbarer haben, das Produktteam die neue Exportfunktion, der Support den Hilfe-Link. Jede Bitte ist für sich nachvollziehbar, zusammen ergeben sie einen Bildschirm, auf dem alles schreit. Zwei Gewohnheiten helfen dagegen: - **Ein Budget für Hervorhebung:** Leg pro Ansicht fest, wie viele Elemente höchstens hervorgehoben sein dürfen, zum Beispiel ein primärer Button und ein Statushinweis. Wer etwas Neues hervorheben will, muss sagen, was dafür zurücktritt. - **Hervorheben durch Zurücknehmen:** Statt das Wichtige immer lauter zu machen, kannst du das Unwichtige leiser machen. Ein Button mit Rahmen statt Füllung, grauer statt farbiger Text, mehr Weißraum. Der Kontrast entsteht dann durch die Umgebung. Davon profitiert auch die [kognitive Last](https://www.insideuxdesign.com/de/glossar/cognitive-load). Jedes hervorgehobene Element fordert Aufmerksamkeit ein. Konkurrieren mehrere gleichzeitig darum, muss das Gehirn erst sortieren, bevor es handeln kann. Mehr dazu im Artikel [Kognitive Last: Warum weniger im Interface oft mehr ist](https://www.insideuxdesign.com/de/blog/kognitive-last-warum-weniger-im-interface-oft-mehr-ist). ## Banner-Blindheit: Wenn Auffälliges übersehen wird Hervorhebung hat eine Kehrseite, die auf den ersten Blick paradox wirkt: Manchmal wird gerade das Auffälligste übersehen. Jan Panero Benway und David M. Lane berichteten 1998 von einer Studie, in der Testpersonen auf einer Website eine bestimmte Information finden sollten. Der passende Link stand in einem großen, farbigen Banner oben auf der Seite. Kaum jemand bemerkte, dass gerade dieses Banner die gesuchte Information enthielt. Der Titel ihres Beitrags gab dem Phänomen seinen Namen: „Banner Blindness“. Der Designforscher Don Norman erklärte das kurz darauf mit Schemata, also gelernten Erwartungen darüber, wie eine Website aufgebaut ist. Menschen suchen Links dort, wo Links üblicherweise stehen. Ein großes, buntes Banner passt in dieses Schema nicht als Navigation, sondern als Werbung, und wird deshalb übergangen. Die Nielsen Norman Group hat das Phänomen 2018 mit [Eyetracking](https://www.insideuxdesign.com/de/glossar/eye-tracking) erneut untersucht und bestätigt. Kara Pernice nennt drei Merkmale, an denen Menschen Werbung erkennen: eine typische Werbeposition wie oben auf der Seite oder in der rechten Spalte, eine werbeähnliche Gestaltung wie Animation und die Nähe zu echter Werbung. Bemerkenswert ist ein Satz aus dem Artikel: Alles, was sich stark von seinem unmittelbaren Umfeld abhebt, wird wahrscheinlich für Werbung gehalten. Hier liegt die Grenze des Von-Restorff-Effekts. Unterschied erzeugt Aufmerksamkeit, aber nur, solange er als relevant gelesen wird. Sieht ein Element aus wie Werbung, hilft die stärkste Hervorhebung nichts. Für die Rechnungs-App heißt das: - **Vorher:** Ein gelbes, pulsierendes Banner über dem Dashboard wirbt für den Pro-Tarif. Direkt darunter steht der Hinweis auf zwei überfällige Rechnungen, im selben Gelb. - **Nachher:** Das Banner entfällt. Der Hinweis auf überfällige Rechnungen steht als ruhige Statuszeile in der Rechnungsliste selbst, dort, wo Menschen ohnehin nachsehen. Das Upgrade-Angebot erscheint erst, wenn jemand an eine Grenze des aktuellen Tarifs stößt. ## Nicht nur über Farbe hervorheben Farbe ist das bequemste Mittel der Hervorhebung und zugleich das unzuverlässigste. Nicht alle Menschen nehmen Farben gleich wahr. Bei einer [Farbsehschwäche](https://www.insideuxdesign.com/de/glossar/farbsehschwaeche) können etwa Rot und Grün schwer zu unterscheiden sein, und bei Sonnenlicht auf dem Smartphone verschwimmen Farbunterschiede für alle. Die [WCAG](https://www.insideuxdesign.com/de/glossar/wcag), die international maßgeblichen Richtlinien für barrierefreie Webinhalte, regeln das ausdrücklich. Das Erfolgskriterium 1.4.1 „Use of Color“ auf Stufe A verlangt, dass Farbe nicht das einzige visuelle Mittel ist, um Informationen zu vermitteln, eine Aktion anzuzeigen, zu einer Reaktion aufzufordern oder Elemente zu unterscheiden. Ein Pflichtfeld, das nur rot markiert ist, oder ein Link, der sich nur durch seine Farbe vom Fließtext abhebt, erfüllt das nicht. Ein Helligkeitsunterschied kann als zusätzliches Merkmal zählen, wenn er ein [Kontrastverhältnis](https://www.insideuxdesign.com/de/glossar/kontrastverhaeltnis) von mindestens 3:1 erreicht. Müssen Menschen aber einen bestimmten Farbton erkennen, etwa Grün für gültig und Rot für ungültig, braucht es zusätzlich ein weiteres Merkmal. Daneben gilt Kriterium 1.4.11 „Non-text Contrast“ auf Stufe AA: Bedienelemente und ihre Zustände sowie Grafiken, die zum Verständnis nötig sind, brauchen einen Kontrast von mindestens 3:1 zu den angrenzenden Farben. Ein hervorgehobener Tarif, der sich nur durch einen blassen Rahmen auf weißem Grund abhebt, fällt dann nicht nur kaum auf, sein entscheidendes Merkmal ist auch für viele Menschen nicht wahrnehmbar. Für die Praxis heißt das: Kombiniere Farbe immer mit einem zweiten Merkmal, etwa Form, Größe, Schriftgewicht, einem Symbol oder einem kurzen Text. In der Rechnungs-App: - **Vorher:** Überfällige Rechnungen sind nur am roten Betrag zu erkennen. - **Nachher:** Neben dem Betrag stehen ein Warnsymbol und der Text „Überfällig seit 12 Tagen“. Der empfohlene Tarif hebt sich durch Rahmen, Etikett und Position ab, nicht nur durch seine Farbe. Ein schneller Test: Schalte den Bildschirm in Graustufen. Was dann noch auffällt, ist auch ohne Farbe hervorgehoben. Weitere Werkzeuge stellt der Artikel [Farbenblindheit im UX-Design](https://www.insideuxdesign.com/de/blog/farbenblindheit-im-ux-design-richtlinien-und-werkzeuge) vor. ## Bewegung: das stärkste und heikelste Mittel Nichts fällt so zuverlässig auf wie Bewegung: ein wackelnder Button, ein pulsierender Punkt, ein Zähler, der hochzählt. Genau deshalb ist sie das heikelste Mittel der Hervorhebung. Sie lässt sich kaum ignorieren, auch wenn jemand gerade in Ruhe etwas anderes lesen will. Für manche Menschen ist das mehr als lästig. Die WCAG nennen in den Erläuterungen zu Kriterium 2.3.3 „Animation from Interactions“ Menschen mit Störungen des Gleichgewichtsorgans im Innenohr. Bei ihnen kann Bewegung auf dem Bildschirm Schwindel, Übelkeit und Kopfschmerzen auslösen. Das Kriterium auf Stufe AAA verlangt, dass durch Interaktion ausgelöste Bewegungsanimationen abgeschaltet werden können, sofern sie nicht wesentlich sind. Schon auf Stufe A gilt Kriterium 2.2.2 „Pause, Stop, Hide“: Bewegte, blinkende oder scrollende Inhalte, die automatisch starten, länger als fünf Sekunden laufen und neben anderen Inhalten stehen, brauchen eine Möglichkeit zum Pausieren, Stoppen oder Ausblenden. Technisch gibt es dafür eine einfache Lösung. Windows, macOS, iOS und Android bieten eine Einstellung, um Bewegung zu reduzieren. Websites können sie über die CSS-Media-Query `prefers-reduced-motion` abfragen. Innerhalb von `@media (prefers-reduced-motion: reduce)` lassen sich Animationen abschwächen oder durch ruhigere Varianten ersetzen, etwa ein sanftes Einblenden statt eines Wackelns. Für die Rechnungs-App bedeutet das: - **Vorher:** Das Upgrade-Banner pulsiert dauerhaft, der Zähler für neue Nachrichten hüpft bei jedem Seitenaufruf. - **Nachher:** Es gibt keine Daueranimation mehr. Wenn eine Rechnung erfolgreich verschickt wurde, bestätigt eine kurze [Microinteraction](https://www.insideuxdesign.com/de/glossar/microinteractions) den Vorgang ein einziges Mal. Ist reduzierte Bewegung eingestellt, erscheint die Bestätigung ohne Bewegung. Die Faustregel: Bewegung ist für Rückmeldungen und Zustandswechsel da, nicht als Dauerwerbung. Auch die Laws of UX empfehlen ausdrücklich, Menschen mit Bewegungsempfindlichkeit mitzudenken, wenn Bewegung als Kontrastmittel dient. ## Grenzen und Fallstricke **Hervorhebung als Manipulation.** Derselbe Mechanismus, der Menschen zur richtigen Aktion führt, kann sie auch zur falschen führen. Ein knallbunter „Ja, ich will das Angebot“-Button neben einem kaum sichtbaren grauen Textlink zum Ablehnen ist kein gutes Design, sondern ein [Dark Pattern](https://www.insideuxdesign.com/de/glossar/dark-patterns). Dasselbe gilt für einen empfohlenen Tarif, der nicht der passendste ist, sondern der, der am meisten Umsatz bringt. Die Faustregel: Hebe hervor, was den meisten Menschen in dieser Situation hilft. Mehr dazu im Artikel [Dark Patterns erkennen und vermeiden](https://www.insideuxdesign.com/de/blog/dark-patterns-erkennen-und-vermeiden). **Gewöhnung.** Hervorhebung nutzt sich ab. Ein Badge, das immer da ist, wird irgendwann zum Teil des Hintergrunds. Das spricht dafür, Hervorhebungen an echte Zustände zu knüpfen und sie wieder verschwinden zu lassen, wenn der Zustand vorbei ist. **Kontext schlägt Rezept.** Ob etwas auffällt, hängt immer von der Umgebung ab. Ein roter Button auf einer bunten Kampagnenseite geht unter, derselbe Button in einer grauen Verwaltungsoberfläche springt ins Auge. Pauschale Regeln wie „CTAs immer orange“ helfen deshalb wenig. Entscheidend ist, was auf der jeweiligen Seite den Kontrast zum Rest herstellt. **Keine Wunderzahlen.** Im Netz kursieren Fallstudien, nach denen eine andere Buttonfarbe die [Conversion](https://www.insideuxdesign.com/de/glossar/conversion) um einen bestimmten Prozentsatz gesteigert habe. Solche Ergebnisse lassen sich nicht verallgemeinern. Sie hängen vom Umfeld, vom Publikum und von der Testmethode ab. Was auf deiner Website funktioniert, zeigt nur ein eigener Test. ## Hervorhebung prüfen Ob die Hervorhebung funktioniert, lässt sich mit wenig Aufwand überprüfen. **Unschärfetest:** Kneif die Augen zusammen oder leg einen Weichzeichner über einen Screenshot. Was dann noch heraussticht, nehmen Menschen zuerst wahr. Ist es das Richtige? **Graustufentest:** Schalte die Farbe ab. Bleiben die wichtigen Elemente erkennbar, hängt die Hervorhebung nicht allein an der Farbe. **Fünf-Sekunden-Test:** Zeig Testpersonen einen Bildschirm für fünf Sekunden und frag danach, was ihnen aufgefallen ist und was sie als Nächstes tun würden. Nennen sie die Hauptaktion, stimmt die Hierarchie. **Aufgaben im Usability-Test:** Gib Testpersonen in einem [Usability-Test](https://www.insideuxdesign.com/de/glossar/usability-test) eine Aufgabe, deren Lösung in einem hervorgehobenen Hinweis steckt. Wird er übersehen, könnte Banner-Blindheit im Spiel sein. [Heatmaps](https://www.insideuxdesign.com/de/glossar/heatmap) oder Eyetracking machen das zusätzlich sichtbar, sind aber kein Muss. **A/B-Test:** Bei ausreichend Traffic zeigt ein [A/B-Test](https://www.insideuxdesign.com/de/glossar/a-b-test), ob eine veränderte Hervorhebung das Verhalten tatsächlich ändert. Achte dabei auch darauf, ob andere wichtige Aktionen darunter leiden. ## Fazit Hedwig von Restorff hat 1933 gezeigt, dass Menschen sich besser an das erinnern, was sich von seiner Umgebung abhebt. Ihr Befund ist robust und hat einen Kern, der bis heute oft übersehen wird: Der Effekt entsteht aus dem Verhältnis zum Kontext. Je weniger Elemente herausstechen, desto stärker wirkt der Unterschied. Für Interfaces heißt das: Hervorhebung ist eine knappe Ressource. Ein primärer Button pro Ansicht, ein empfohlener Tarif mit Begründung, Badges nur für Dinge, die eine Handlung verlangen. Dazu kommen zwei Pflichten: Farbe nie als einziges Merkmal einsetzen und Bewegung so gestalten, dass sie sich abschalten lässt. Und ein Vorbehalt: Was zu sehr nach Werbung aussieht, wird übersehen, egal wie auffällig es ist. Das Dashboard der Rechnungs-App wirkt nach der Überarbeitung ruhiger, nicht lauter. Gerade deshalb springt jetzt ins Auge, was zählt: der Button für eine neue Rechnung und die eine Rechnung, die seit zwölf Tagen überfällig ist. ## Checkliste - Jede Ansicht hat höchstens eine primäre Aktion, die sich klar von allen anderen abhebt. - Für Hervorhebungen gibt es ein Budget: Neue Hervorhebungen ersetzen alte, statt sie zu ergänzen. - Der empfohlene Tarif ist der einzige hervorgehobene und nennt, für wen er gedacht ist. - Badges und Zähler erscheinen nur, wenn eine Handlung nötig ist, und verschwinden danach. - Wichtige Hinweise stehen im Inhalt, nicht in werbeähnlichen Bannern oder auf typischen Werbepositionen. - Kein Zustand wird allein über Farbe vermittelt (WCAG 1.4.1). - Bedienelemente und ihre Zustände haben mindestens 3:1 Kontrast zur Umgebung (WCAG 1.4.11). - Animationen sind kurz, haben einen Anlass und respektieren `prefers-reduced-motion`. - Automatisch startende Bewegung, die länger als fünf Sekunden läuft, lässt sich pausieren, stoppen oder ausblenden (WCAG 2.2.2). - Hervorhebungen helfen Menschen und drängen sie nicht zu Entscheidungen gegen ihre Interessen. - Die Hierarchie ist mit Unschärfe-, Graustufen- oder Fünf-Sekunden-Test überprüft. ## Quellen - [Hedwig von Restorff (1933): Über die Wirkung von Bereichsbildungen im Spurenfeld. Psychologische Forschung, 18(1), 299 bis 342](https://doi.org/10.1007/BF02409636) - [Colin M. MacLeod (2020): Zeigarnik and von Restorff: The memory effects and the stories behind them. Memory & Cognition, 48, 1073 bis 1088](https://doi.org/10.3758/s13421-020-01033-5) - [R. Reed Hunt (1995): The subtlety of distinctiveness: What von Restorff really did. Psychonomic Bulletin & Review, 2(1), 105 bis 112](https://doi.org/10.3758/BF03214414) - [Anne M. Treisman und Garry Gelade (1980): A feature-integration theory of attention. Cognitive Psychology, 12(1), 97 bis 136](https://doi.org/10.1016/0010-0285(80)90005-5) - [Jon Yablonski, Laws of UX: Von Restorff Effect](https://lawsofux.com/von-restorff-effect/) - [Don Norman (1999): Banner Blindness, Human Cognition and Web Design. Internetworking, veröffentlicht auf jnd.org](https://jnd.org/banner-blindness-human-cognition-and-web-design/) - [Kara Pernice, Nielsen Norman Group (2018): Banner Blindness Revisited: Users Dodge Ads on Mobile and Desktop](https://www.nngroup.com/articles/banner-blindness-old-and-new-findings/) - [W3C: Understanding Success Criterion 1.4.1: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) - [W3C: Understanding Success Criterion 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) - [W3C: Understanding Success Criterion 2.2.2: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) - [W3C: Understanding Success Criterion 2.3.3: Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) - [MDN Web Docs: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)