Представьте, что вы смотрите на сетку изображений, а на вашем экране начинают появляться серые, призрачные круги. Это не галлюцинация, это то, что видят пользователи, когда имеет место иллюзия сетки Германа. Она появляется тогда, когда зазоры между изображениями в сетке равны, и их размер больше, чем 2px. В этом случае, пользователи будут видеть серые круги на пересечениях сетки. Но стоит им сфокусировать взгляд на этом пересечении, и кружок пропадет.
В местах пересечения сетки, белый свет наполняет большую часть поля зрения сетчатки. Это вызывает сильное латеральное торможение, которое заставляет человека видеть серые области. При этом, взгляд, непосредственно на пересечение, активирует центральное углубление. Это приводит к снижению латерального торможения из-за сужения поля зрения, и задействования самого большого количества клеток фоторецепторов.
Как выравнивать изображения в сетке
Веб-сайты часто выравнивают изображения в сетке, оставляя зазоры, величиной в 10рх и больше. Но это создает иллюзию сетки Германа, что, в свою очередь, может раздражать пользователей при просмотре изображений. Серые круги утомляют глаза, но вот несколько способов, применив которые, вы можете заставить их исчезнуть.
Двухпиксельные зазоры
Если использовать сетку, с двухпиксельными зазорами, то круги пропадут. Еще одно преимущество такого подхода заключается в том, что это экономит экранное пространство и зазоры превращаются в тонкие, красивые линии.
Неравномерные зазоры
Еще один подход заключается в выравнивании в одной сетке изображений, с различной высотой или шириной. Это создает неравномерные зазоры, которые убирают призрачные круги.
Широкие зазоры между рядами сетки
Такой подход также убирает призрачные круги. А еще он заставляет пользователя просматривать изображения ряд за рядом.
Цветной фон
Вместо изменения величины зазоров, вы можете изменить цвет фона. Любой цветной фон поможет избавится от иллюзии Германа.
Заключение
Очень интересно наблюдать за тем, как нас обманывают наши же глаза. Иллюзия сетки Германа обманывает зрение пользователя, и отвлекает его от выполняемой задачи. Но при помощи правильного выравнивания вы можете сократить визуальный шум. Сетки с изображениями — это распространенный выбор разметки, и в следующий раз, когда вы решите его использовать, помните о том, что пользователь может увидеть.
