risposta-alla-domanda-sullo-sviluppo-web-bd.com

Evitare l'illusione della griglia di Hermann

Sono un principiante UX e sto cercando di progettare una pagina di miniature di immagini. Ho pensato a questo:

ow!

Il problema è che questo layout crea Hermann Grid illusion . Quando si guarda la griglia, la maggior parte delle persone vede punti neri tremolanti negli angoli.

Qualcuno può suggerire come potrei modificare il mio layout per evitare di creare questa illusione?

147
dB'

L'illusione è causata da aree luminose che eccitano i neuroni retinici mentre le aree scure circostanti le inibiscono simultaneamente, causando sanguinamento (inibizione laterale). Pertanto, l'idea è quella di ridurre le aree luminose agli angoli in modo che quei neuroni non siano tanto eccitati. Mettendo le immagini più vicine, è possibile ridurre l'illusione e utilizzare gli immobili dello schermo in modo più efficiente.

closer_images

È possibile ridurre ulteriormente le aree luminose rimuovendo gli angoli arrotondati agli incroci. Questo praticamente elimina l'illusione.

without_corners

Puoi estrapolare dalla sottostante teoria neurologica per creare altre possibili soluzioni.

Ridurre il contrasto rendendo lo sfondo più scuro evita il sanguinamento in conflitto tra quei neuroni, in modo da eliminare anche l'illusione. (Ci scusiamo per il cattivo montaggio in questo)

darker_background

È anche possibile spostare le immagini abbastanza distanti da andare al di fuori del campo di inibizione laterale.

out_of_range

Certo, non tutte le soluzioni saranno buone UX.

140
Matthew Piziak

Come spiega Franchesca, il problema sembra sorgere quando nella griglia sono presenti forti colori contrastanti. Nel tuo caso: immagini scure e sfondo bianco.

Questa pagina descrive come il problema può essere affrontato durante lo styling delle tabelle:

"Evita di usare griglie scure e pesanti".

Another post Ho scoperto che discutendo questa (e altre) illusioni ottiche si afferma la stessa risposta:

L'illusione della griglia Hermann non funzionerà se c'è un basso contrasto tra i colori coinvolti nella griglia. Come sidenote, questo è il motivo per cui Excel ha celle blu chiaro con uno sfondo bianco: non c'è abbastanza contrasto tra i colori azzurro e bianco per confondere il sistema visivo, quindi l'illusione non appare.

Prova a considerare un colore diverso per lo sfondo, come un morbido grigio o blu per facilitare il contrasto. Facilitare il colore delle immagini ti aiuterà anche se questa è una soluzione accettabile.

18
GWv

Il contrasto tra lo sfondo bianco e i bordi scuri è un fattore significativo. Se non puoi cambiare i colori da soli, prova a impostare un gradiente di trasparenza radiale su ogni miniatura che sfuma verso la trasparenza completa sul bordo invece di avere un bordo duro. Vedi questa pagina sui gradienti in css per idee su come ottenere questo effetto.

11
Franchesca

Secondo l'articolo: Come l'illusione di Hermann Grid influenza ciò che gli utenti vedono

L'illusione della griglia di Hermann si verifica quando una griglia di immagini ha margini uguali di oltre 2 pixel. Gli utenti vedranno macchie grigie simili a fantasmi alle intersezioni della griglia. Ma quando si concentrano sull'intersezione, non vedranno nulla.

Elenca 4 modi per evitare l'illusione nelle griglie delle immagini:

  1. Margini di 2 pixel: margini della griglia di 2 pixel o meno
  2. Margini irregolari: allineamento insieme di immagini di dimensioni diverse
  3. Margini di riga più ampi: rendono i margini di riga più ampi di quelli di colonna
  4. Sfondo colorato - mettendo la griglia su uno sfondo colorato

Vedi l'articolo per le illustrazioni.

8
Fluke

Usa un colore di sfondo diverso invece del bianco, come il nero b/c mi sembra che l'effetto che descrivi sarebbe meno diffuso in un miraggio dal buio alla luce. Se le immagini sono di colore scuro, bordale con un bordo chiaro (ed elegante effetto come descritto in alcune delle altre risposte).

3
stackuser83