it-swarm.com.de

Vermeidung der Hermann-Gitterillusion

Ich bin ein UX-Neuling und versuche, eine Seite mit Miniaturbildern zu entwerfen. Ich habe mir das ausgedacht:

ow!

Das Problem ist, dass dieses Layout die Hermann Grid Illusion erzeugt. Beim Betrachten des Gitters sehen die meisten Menschen flackernde schwarze Punkte in den Ecken.

Kann jemand vorschlagen, wie ich mein Layout ändern könnte, um diese Illusion zu vermeiden?

147
dB'

Die Illusion wird durch helle Bereiche verursacht, die Netzhautneuronen anregen, während umgebende dunkle Bereiche sie gleichzeitig hemmen und Blutungen verursachen (laterale Hemmung). Daher besteht die Idee darin, die hellen Bereiche an den Ecken zu reduzieren, damit diese Neuronen nicht so stark angeregt werden. Indem Sie die Bilder näher zusammenfügen, können Sie die Illusion verringern und Bildschirmflächen effizienter nutzen.

closer_images

Sie können die hellen Bereiche weiter reduzieren, indem Sie abgerundete Ecken an Kreuzungen entfernen. Dies beseitigt praktisch die Illusion.

without_corners

Sie können aus der zugrunde liegenden neurologischen Theorie extrapolieren, um andere mögliche Lösungen zu erstellen.

Durch Verringern des Kontrasts durch Verdunkeln des Hintergrunds wird das widersprüchliche Ausbluten zwischen diesen Neuronen vermieden, wodurch auch die Illusion beseitigt wird. (Entschuldigung für die schlechte Bearbeitung in diesem)

darker_background

Sie können die Bilder auch so weit auseinander bewegen, dass sie außerhalb des Bereichs der seitlichen Hemmung liegen.

out_of_range

Zugegeben, nicht jede Lösung wird eine gute UX sein.

140
Matthew Piziak

Wie Franchesca erklärt, scheint das Problem aufzutreten, wenn das Raster stark kontrastierende Farben enthält. In Ihrem Fall: Dunkle Bilder und weißer Hintergrund.

Diese Seite beschreibt, wie das Problem beim Stylen von Tabellen behandelt werden kann:

"Vermeiden Sie dunkle und schwere Gitter".

Ein anderer Beitrag Ich fand, dass die Diskussion dieser (und anderer) optischen Täuschung (en) dieselbe Antwort gibt:

Die Hermann-Gitterillusion funktioniert nicht, wenn zwischen den im Gitter enthaltenen Farben ein geringer Kontrast besteht. Als Randnotiz hat Excel deshalb hellblaue Zellen mit weißem Hintergrund: Es gibt nicht genügend Kontrast zwischen den hellblauen und den weißen Farben, um das visuelle System zu verwirren, sodass die Illusion nicht erscheint.

Versuchen Sie, eine andere Farbe für den Hintergrund in Betracht zu ziehen, z. B. ein weiches Grau oder Blau, um den Kontrast zu verringern. Das Erleichtern der Farbe auf den Bildern hilft Ihnen auch, wenn dies eine akzeptable Lösung ist.

18
GWv

Der Kontrast zwischen dem weißen Hintergrund und den dunklen Rändern ist ein wesentlicher Faktor. Wenn Sie die Farben selbst nicht ändern können, versuchen Sie, für jedes Miniaturbild einen radialen Transparenzverlauf festzulegen, der zu einer vollständigen Transparenz am Rand führt, anstatt einen harten Rand zu haben. Auf dieser Seite zu Farbverläufen in CSS finden Sie Ideen, wie Sie diesen Effekt erzielen können.

11
Franchesca

Laut Artikel: Wie sich die Hermann-Gitter-Illusion auf das auswirkt, was Benutzer sehen

Die Hermann-Gitter-Illusion tritt auf, wenn ein Bildraster gleiche Ränder von mehr als 2 Pixeln hat. Benutzer sehen graue, geisterhafte Blobs an den Schnittpunkten des Rasters. Wenn sie sich jedoch auf die Kreuzung konzentrieren, sehen sie nichts.

Es werden 4 Möglichkeiten aufgeführt, um die Illusion in Bildgittern zu vermeiden:

  1. 2-Pixel-Ränder - Rasterränder von 2 Pixel oder weniger
  2. Zackige Ränder - Ausrichten von Bildern unterschiedlicher Größe
  3. Breitere Zeilenränder - machen die Zeilenränder breiter als die Spaltenränder
  4. Farbiger Hintergrund - Setzen Sie das Raster auf einen farbigen Hintergrund

Siehe Artikel für Abbildungen.

8
Fluke

Verwenden Sie eine andere Hintergrundfarbe anstelle von Weiß, so wie mir Schwarz b/c scheint, dass der von Ihnen beschriebene Effekt bei einer dunklen bis hellen Fata Morgana weniger verbreitet ist. Wenn die Bilder dunkel gefärbt sind, begrenzen Sie sie mit einem hellen Rand (und wirken Sie geschickt, wie in einigen anderen Antworten beschrieben).

3
stackuser83