Глаз не читает: иерархия и гештальт

Ты открываешь страницу, чтобы узнать, сколько это стоит. Взгляд прыгает: большая картинка, какой-то заголовок, серый блок текста, пропущенный целиком, коробка справа, обратно в середину, вниз — вот оно. Четыре секунды. Прочитано слов одиннадцать.

Теперь вспомни, как эта страница делалась. Люди спорили о формулировке абзаца, на который ты не взглянул, и никто не решил, какой единственный элемент ты увидишь первым. Это порядок наоборот, и статья — о том, как развернуть его правильно.

Три секунды разведки

Данные тут старые и скучные — то есть самые надёжные. Исследования реальных сессий просмотра — Вайнрайх с коллегами в 2008 году и до них анализы Якоба Нильсена — дают долю реально прочитанных слов на типичной странице примерно в пятую-четвёртую часть. Не четверть предложений: четверть слов, вразброс.

Ещё две находки айтрекинга стоит носить с собой:

F-паттерн. На текстовых страницах со слабой структурой взгляд рисует грубую F: проход поверху, более короткий ниже, потом скольжение вдоль левого края. Это не закон природы — это то, к чему человек откатывается, когда страница не говорит ему, куда смотреть. Сильная иерархия его перебивает. Реальный смысл находки: первые два слова каждой строки и каждого заголовка делают почти всю работу.

Баннерная слепота. Бенвей и Лейн описали её в 1998-м: люди не просто игнорируют рекламу — они перестают видеть всё, что на неё похоже. Яркое, в рамке, справа, слегка декоративное — глаз отфильтровывает это раньше, чем приходит сознание. Немало важных продуктовых сообщений стали невидимыми ровно потому, что их сделали важными не тем способом.

Под обеими находками лежит поведение, которое Стив Круг взял у Герберта Саймона: сатисфайсинг. Люди не осматривают варианты и не выбирают лучший. Они берут первое, что похоже на рабочее, потому что отступить дёшево, а прочитать всё — нет.

Выбирают не лучший вариант, а первый правдоподобный.

Значит, быть доступным важнее, чем быть полным. Верный ответ в третьем абзаце проигрывает сносному ответу в заголовке.

Что глаз видит раньше тебя

Часть визуальных различий обрабатывается параллельно, до прихода внимания, — примерно за 200 миллисекунд, и с одинаковой скоростью, десять там объектов или сотня. Работы Энн Трейсман по интеграции признаков составили их карту. Практический список короткий: цвет, размер, наклон, движение, обводка, положение.

Всё, что попало в список, делает элемент находимым мгновенно. Всё, что не попало, — форма иконки, слово, чуть иной шрифт — требует последовательного перебора, элемент за элементом.

Есть подвох, и его чаще всего упускают. Эффект работает, только пока различие единственное. Один красный элемент среди серых находится сразу. Десять красных среди двенадцати серых — просто каша без всякого сигнала. Хедвиг фон Ресторф показала в 1933 году память-версию того же: запоминается элемент, который отличается от соседей, — но лишь пока он и есть тот, кто отличается.

Поэтому акцент — это бюджет, а не свойство. Каждый элемент, который ты делаешь громче, обесценивает все остальные громкие элементы экрана. У дизайнера с пятью приоритетами нет ни одного.

Гештальт: как глаз решает, что с чем вместе

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

Близость. Объекты рядом читаются как одна группа. Самый сильный принцип из всех, перебивает почти всё остальное — включая цвет и сходство. И он бесплатный: добавить пространство ничего не стоит.

Сходство. Вещи с общей формой, цветом или размером читаются как один класс. Именно поэтому «все кнопки выглядят как кнопки» — правило функциональное, а не стилистическое.

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

Непрерывность. Глаз следует за линиями и выравниванием и ждёт продолжения. Выровненные элементы читаются как последовательность; выпавший из ряда — как посторонний или как ошибка.

Замыкание. Человек достраивает незавершённые формы. Обрезанный краем экрана ряд элементов говорит глазу: «здесь есть ещё, крути» — самый полезный случайный аффорданс в дизайне интерфейсов.

Общая судьба. Что движется вместе — то и вместе. Анимация не украшение, а высказывание о группировке.

Классический баг от игнорирования всего этого: форма, где подпись стоит прямо над своим полем, но с щедрым отступом, а поля жмутся друг к другу. Близость связывает каждую подпись с полем снизу. Люди заполняют не те графы, и никто не может объяснить почему. Чинится это не шрифтом получше, а четырьмя сдвинутыми пикселями.

Иерархия — это ответ, а не стиль

Визуальная иерархия звучит как эстетическое понятие. Это не оно. Это ответ на один вопрос: в каком порядке это увидят? Либо ты на него отвечаешь, либо за тебя произвольно отвечает раскладка.

Работу делают пять инструментов, примерно по силе: размер, насыщенность, контраст, пространство, положение. Цвет входит в список только как контраст — в монохромном интерфейсе иерархия ничего не теряет.

Два рабочих правила:

Максимум три уровня на экран. Первый — то единственное, ради чего экран существует. Второй — поддерживающая информация, находимая при поиске. Третий — всё остальное, намеренно тихое. Четыре уровня на практике неразличимы, и все всё равно пытаются.

На каждом экране ровно один главный элемент. Если за первенство дерутся двое, решение ещё не принято — оно передано пользователю, а тот разрешит его уходом.

Самая дешёвая проверка из когда-либо придуманных: прищурься. Расфокусируй зрение так, чтобы остались одни пятна. Что видно — то и есть твоя настоящая иерархия. Если это не то, что должен увидеть первым незнакомый человек, всё остальное на экране пока неважно.

Пустое место работает

На пространство всегда давят — и заказчики, для которых пустота есть трата, и искренняя вера, что чем больше видно контента, тем больше им пользуются.

Но пространство — не отсутствие, а главный инструмент группировки, а группировка и есть почти всё, чем человек занят в первые три секунды. Убирая пространство, ты не добавляешь информации — ты разрушаешь структуру, благодаря которой информация находилась.

Обычное оружие в этом споре — «выше линии сгиба», и это в основном миф, унаследованный от газет. Люди крутят страницу и делают это уже два десятилетия. Убивает прокрутку другое: экран, нижний край которого выглядит как конец, — сплошная полоса во всю ширину, аккуратная замыкающая линия, ничего не обрезано. Лечится гештальтом: пусть что-нибудь заметно обрывается нижней границей — и глаз поймёт, что надо продолжать.

На практике

Проверка прищуром. После каждого сделанного экрана расфокусируй глаза и назови, что видишь первым, вторым, третьим. Делай это до того, как показать кому-либо.

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

Меряй отступы, а не прикидывай. В любой группе элементов расстояние внутри группы должно быть заметно меньше расстояния вокруг неё. Не чуть-чуть — заметно. Большинство «перегруженных» интерфейсов в одном таком проходе от нормального состояния.

Считай акценты. Пройди по экрану и посчитай всё, что кричит: жирный текст, цветные элементы, рамки, крупный кегль. Больше трёх — бюджет израсходован. Понижай, а не добавляй.

Обрезай край экрана. Убедись, что низ первого экрана заметно продолжается. Наполовину видимая карточка стоит дороже любой стрелки «листайте вниз».

Тест на пять секунд. Покажи экран человеку на пять секунд, убери и спроси, для чего это и что бы он сделал дальше. Самая дешёвая настоящая проверка в этой сфере, и её можно провести на коллеге в коридоре.

Проверь себя

Закрой статью и ответь своими словами:

Какая примерно доля слов на странице прочитывается и что из этого следует о том, куда класть ответ?
Что F-паттерн говорит на самом деле — правило про глаза или симптом страницы?
Почему выделить пять вещей означает не выделить ни одной?
Какой принцип гештальта самый сильный и какой способен его перебить?
Как плохие отступы заставляют людей заполнять не те поля формы?
О чём на самом деле правило «один главный элемент на экран»?
Из-за чего страница выглядит непрокручиваемой и какой принцип это чинит?

Коротко

Люди читают малую долю слов и сатисфайсят: берут первый правдоподобный вариант, а не лучший.
Цвет, размер, наклон, движение и обводку глаз находит до внимания — но только пока различие единственное. Акцент — это бюджет.
Принципы гештальта группируют элементы автоматически: близость, сходство, общая область, непрерывность, замыкание, общая судьба. Ты выбираешь не «произойдёт ли», а «то ли сгруппируется».
Близость — самый сильный и самый дешёвый инструмент. Большинство «каши» — проблема отступов, а не количества контента.
Иерархия отвечает на вопрос «что увидят первым». Максимум три уровня, один главный элемент, инструменты — размер, насыщенность, контраст, пространство, положение.
Пространство — инструмент, а не трата. Линия сгиба — миф; прокрутку останавливает экран, который внизу выглядит законченным.
Прищур, серый и пять секунд — три проверки, которые ничего не стоят и ловят большую часть проблем.