UX-Gesetz 6

Similarity verständlich erklärt

Similarity beschreibt, dass User Elemente mit ähnlichen visuellen Eigenschaften als zusammengehörig wahrnehmen. Gleiches Aussehen erzeugt die Erwartung, dass Elemente dieselbe Rolle, Bedeutung oder Funktion haben.

Ähnlichkeit in der Demo vergleichen Zu den Anwendungsbeispielen

Was beschreibt Similarity?

Wenn Elemente dieselbe Farbe, Form, Größe oder denselben Stil haben, gehen User meist davon aus, dass sie zusammengehören oder sich ähnlich verhalten. Diese Zuordnung geschieht sehr schnell und oft schon vor dem genauen Lesen der Inhalte.

In der UX ist das besonders wichtig, weil visuelle Muster Erwartungen formen. Wenn gleiche Funktionen konsistent gleich gestaltet sind, wird ein Interface schneller verständlich. Problematisch wird es, wenn unterschiedliche Funktionen zu ähnlich aussehen oder gleiche Funktionen uneinheitlich gestaltet werden.

Typische Anwendungsbeispiele

Primäre Buttons sollten im gesamten System konsistent aussehen. Sekundäre Aktionen sollten ebenfalls einem klaren Muster folgen. In Navigationen, Listen, Karten oder Statusanzeigen hilft Similarity dabei, Beziehungen sichtbar zu machen, ohne dass jede Gruppe zusätzlich erklärt werden muss.

Besonders relevant ist das Prinzip immer dann, wenn User wiederkehrende Funktionen schnell erkennen sollen. Konsistenz spart dort Zeit und reduziert Fehlinterpretationen.

Interaktive Demonstration

Links siehst du eine konsistente Variante: gleiche Funktionsarten sehen gleich aus. Rechts siehst du eine uneinheitliche Variante: ähnliche Aufgaben erscheinen in sehr unterschiedlichen Stilen. Genau dieser Unterschied zeigt den Kern von Similarity.

Konsistente Ähnlichkeit

Primäre Aktionen, sekundäre Aktionen und riskante Aktionen sind jeweils klar über wiederkehrende visuelle Muster unterscheidbar.

Uneinheitliche Gestaltung

Hier fehlt ein klares Muster. Ähnliche Funktionen sehen verschieden aus und unterschiedliche Bedeutungen sind nicht zuverlässig unterscheidbar.

Noch keine Auswahl getroffen.

✓

Gleiche Funktion, gleiches Aussehen
Primäre und sekundäre Aktionen folgen auf dieser Seite jeweils einem klaren visuellen Muster.

✓

Unterschiedliche Bedeutung, sichtbare Differenz
Riskante Aktionen unterscheiden sich bewusst von normalen Aktionen.

✓

Demo trifft den Kern des Gesetzes
Die Gegenüberstellung zeigt nicht bloß Schönheit oder Ordnung, sondern genau die Wirkung visueller Ähnlichkeit auf Zugehörigkeit und Erwartung.