Как иллюзия сетки Германа влияет на то, что видят пользователи

Представьте, что вы смотрите на сетку изображений, а на вашем экране начинают появляться серые, призрачные круги. Это не галлюцинация, это то, что видят пользователи, когда имеет место иллюзия сетки Германа. Она появляется тогда, когда зазоры между изображениями в сетке равны, и их размер больше, чем 2px. В этом случае, пользователи будут видеть серые круги на пересечениях сетки. Но стоит им сфокусировать взгляд на этом пересечении, и кружок пропадет.

В местах пересечения сетки, белый свет наполняет большую часть поля зрения сетчатки. Это вызывает сильное латеральное торможение, которое заставляет человека видеть серые области. При этом, взгляд, непосредственно на пересечение, активирует центральное углубление. Это приводит к снижению латерального торможения из-за сужения поля зрения, и задействования самого большого количества клеток фоторецепторов.

Как выравнивать изображения в сетке

Веб-сайты часто выравнивают изображения в сетке, оставляя зазоры, величиной в 10рх и больше. Но это создает иллюзию сетки Германа, что, в свою очередь, может раздражать пользователей при просмотре изображений. Серые круги утомляют глаза, но вот несколько способов, применив которые, вы можете заставить их исчезнуть.

Вконтакте4

Facebook

Twitter

Двухпиксельные зазоры

Если использовать сетку, с двухпиксельными зазорами, то круги пропадут. Еще одно преимущество такого подхода заключается в том, что это экономит экранное пространство и зазоры превращаются в тонкие, красивые линии.

Неравномерные зазоры

Еще один подход заключается в выравнивании в одной сетке изображений, с различной высотой или шириной. Это создает неравномерные зазоры, которые убирают призрачные круги.

Широкие зазоры между рядами сетки

Такой подход также убирает призрачные круги. А еще он заставляет пользователя просматривать изображения ряд за рядом.

Цветной фон

Вместо изменения величины зазоров, вы можете изменить цвет фона. Любой цветной фон поможет избавится от иллюзии Германа. Продолжение: http://uxgu.ru/hermann-grid-illusion/

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.