Локус внимания что это

Когнетика и локус внимания

Когнетика так же как и эргономика, учитывает статистическую природу различий между людьми.

Изучение прикладной сферы наших ментальных способностей называется когнитивным проектированием или когнетикой.От слова Cognate – родственный, сходный.

Сознательное и бессознательное – это термины из области психологии, философии и истории применяются для описания аспектов функционирования нашего мышления.

В плане проектирования человеческой части интерфейса имеет смысл пользоваться более ограниченными понятиями когнитивного сознательного и когнитивного бессознательного или более точно эмпирическое сознательное и эмпирическое бессознательное.

Когнитивное бессознательное – это те ментальные процессы, которые вы не осознаете в тот момент, когда они происходят.

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

Свойства когнитивного сознательного и когнитивного бессознательного сведены в таблицу 1.

Локус внимания – это некоторое место или область, на которое может быть сосредоточено ваше внимание. В отличие от фокуса, часто обозначающего не только место, но и действие (сфокусировать ваше внимание), локус обозначает только место и переводится с латинского, как место положения или область.

Видимый предмет не всегда может быть локусом вашего внимания. Локус внимания может быть только один.

Информация, ставшая локусом внимания перемещается в кратковременную память, где храниться в течение 10 секунд.

Память

Возможности человеческой памяти существенно влияют на качество взаимодействия пользователя с системой. Для нас актуально знать про две подсистемы памяти, а именно про кратковременную и долговременную подсистемы.

Источник

Рекомендации по проектированию пользовательских интерфейсов (по книге Раскина «Интерфейс»). Часть 1

1. Особенности человеческого восприятия

1.1. Локус внимания

В любой момент времени человек может сосредоточить свое внимание только на одном предмете. Это может быть какой-то объект реального мира (например, лист бумаги) определенная область экрана или окна, а может и какой-нибудь процесс «в уме» (например, когда человек обдумывает свои действия или что-то рассчитывает). Предмет, на котором сосредоточено внимание человека, будем называть локусом его внимания. С локусом внимания связано как минимум две особенности человеческого восприятия.

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

2. При пристальном сосредоточении внимания все события вне локуса могут игнорироваться или просто оставаться незамеченными.

1.2. Формирование привычек

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

Привычка может оказаться и вредной. Типичный пример — подтверждение выполнения команды в диалоговом окне. Если диалоговое окно возникает каждый раз при выполнении рутинных операций, то в конце концов человек перестает читать текст в этом окне (и это справедливо не только для таких «классических» пользователей как бухгалтеры или секретарши, но и для самих программистов). Поэтому если похожее окно возникнет, когда пользователь отдал команду по ошибке, то он, не задумываясь, подтвердит команду, потому что это вошло у него в привычку. Это может иметь печальные последствия, если команда была необратимой и привела к уничтожению важных данных. Хочу подчеркнуть, что приведенный пример вреда от привычки является проблемой не пользователя, а самого интерфейса. Одним из способов избежать подобных проблем является обеспечение обратимости команд везде, где это только возможно.

1.3. Промлема модальности

Существенным препятствием для формирования у пользователя привычек при работе с интерфейсом является наличие в интерфейсе нескольких режимов. Режимы — это состояния интерфейса, в которых один и тот же жест пользователя интерпретируется по-разному. Жестом может являться набор слова, нажатия определенного сочетания клавиш (например, Ctrl-S) или кнопки мыши, даже движение мышью и т.п. Модальность является также серьезным источником ошибок при взаимодействии с программой. Даже изменение состояния объекта (например, с включенного на отключенное), выполняемое одним и тем же жестом, является модальным, поскольку для выполнения желаемого действия («включить», «отключить») необходимо знать и держать в локусе внимания текущее состояние объекта. Как было сказано в подразделе 1.1, если внимание человека сосредоточено на чем-то другом, то информация о состояниянии объекта может быть проигнорирована, что повлечет за собой ошибки.

К счастью, модальности интерфейса не возникает в двух случаях.

1. В случае, если контекст, в котором выполняется жест, находится в локусе внимания пользователя. Например, нажатие клавиши Backspace при наборе текста можно было бы считать модальным, поскольку результат этого жеста зависит от того, какая буква находится перед курсором. Однако, данная буква находится в локусе внимания, поскольку именно ее пользователь хочет удалить при нажатии Backspace. Клавиша Caps Lock, напротив, во многих случаях является модальной, т.к. сохраняет свой эффект — изменение регистра букв — и после того, как локус внимания пользователя сместился с набора нужного слова в верхнем регистре на другие операции.

2. Если при выполнении жеста дополнительно удерживается какая-либо клавиша или несколько (например, Ctrl или Ctrl + Alt). Фактически, такой жест воспринимается как новый, поэтому не конфликтует с другими. Раскин называет подобную модификацию «квазирежимом».

2. Принципы построения интерфейсов

2.1. Отсутствие модальности

Поскольку модальность приводит к ошибкам взаимодействия с программой, хорошим принципом создания интерфейсов является исключение модальности. Один из способов достичь этого — использование «квазирежимов» (см. также подраздел 1.3).

2.2. Сохранность пользовательских данных

Назначением большинства программ в конечном итоге является (должно являться) упрощение работы, выполняемой человеком. Пользовательские данные — это результат работы человека. Если этот результат будет утерян, работу придется выполнять снова, что нельзя назвать упрощением. Поэтому любая программа должна обеспечивать сохранность данных пользователя, будь то простое текстовое сообщение, 3D-модель или научная статья. О важности данных может судить только сам пользователь, но никак не программа, с которой он взаимодействует. Путей для обеспечения сохранности данных может быть много: это и автоматическое сохранение любых изменений, и обратимость операций, и создание резервного архива (backup).

При формировании многих команд может применяться одна из двух моделей:

1. Сначала указать объект, а затем действие, которое необходимо совершить с этим объектом (модель «объект-действие»).

2. Сначала указать действие, а затем объект, к которому следует применить это действие (модель «действие-объект»).
Предпочтительной является первая модель — «объект-действие». Во-первых, она исключает многие модальные ошибки, поскольку переключение действия обычно сопровождается переключением режимов работы. Во-вторых, она проще для восприятия человеком, поскольку, как правило, локус внимания пользователя уже находится на объекте, когда возникает необходимость выполнить какое-то действие с этим объектом.
Использование второй модели — «действие-объект» — тоже допустимо, но только в тех случаях, когда ее применение достаточно аргументировано.

2.4. Монотонность

Привычки могут формироваться у человека лишь в том случае, если каждое действие можно выполнить всегда одним и тем же образом. Интерфейс можно назвать монотонным, когда каждое элементарное действие в нем можно выполнить ровно одним способом (т.е. жестом). Часто для одного и того же действия предусматривается несколько способов выполнения: через меню, сочетанием клавиш, щелчком мыши и т.п. Однако подобная практика затрудняет формирование привычек, поскольку пользователь должен каждый раз выбирать, каким способом выполнить действие. И лишь когда он станет выполнять действие всегда только одним способом, т.е. сам сведет немонотонный интерфейс к монотонному, у него появится возможность формировать привычку для выполнения этого действия. Если сразу спроектировать интерфейс так, чтобы он был монотонным, то это сократит время обучения пользователя. Исключение, вероятно, может составлять случай, когда проектируется интерфейс для пользователей с разными устройствами. Например, часть пользователей пользуется настольным ПК с клавиатурой и мышью, а часть — планшетным ПК с сенсорным экраном. Однако и в этом случае стоит подумать о других альтернативах, например, нахождении способа взаимодействия, который будет применим на разных устройствах, или разработке разных версий интерфейса для разных устройств. Иначе есть риск создать интерфейс, который не будет устраивать ни ту, ни другую группу пользователей.

2.5. Видимость

Интерфейс программы должен своевременно информировать пользователя о:
1) текущем состоянии системы и смене состояния в результате действий пользователя;
2) способах управления и воздействия на систему.

В случае отсутствия информации о состоянии системы возрастает количество ошибок, допускаемых при работе с программой. Информирование пользователя о состоянии системы включает в том числе и предоставление различного рода обратной связи: подсветку объекта, на который наведен указатель мыши, индикацию о том, что действие пользователя воспринято программой и находится в обработке и т.п.

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

Можно предположить, что именно по причине видимости графические интерфейсы стали гораздо популярнее консольных. Хотя последние могут быть вполне удобны для работы, но «порог вхождения» для них гораздо выше.

2.6. Состоятельность

Элемент управления является не только видимым, но и состоятельным, если по одному его виду пользователь может определить, как именно с ним взаимодействовать: кнопки — нажимать, полосы прокрутки — перемещать, и т.п. Таким образом, принцип состоятельности дополняет принцип видимости.

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

Источник

Иерархия погружения: один из самых простых и важных принципов дизайна

Команда Логомашины рассказывает о принципе, который поможет заметить и исправить распространённые ошибки в дизайне сайтов и рекламы, даже если вы не дизайнер.

Уже много лет по интернету ходят подобные картинки:

Действительно, большинство людей прочитают этот текст именно в таком порядке. Можно ли использовать эту магию вне Хогвартса и управлять вниманием клиента, который зашёл на ваш сайт или увидел рекламу, каталог, упаковку?

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

Грубо говоря, все мы очень хотим начать читать с верхнего левого угла, если что-то своим размером, цветом, формой, расположением или анимацией не перетягивает наше внимание. Это и происходит на «магической» картинке: мы замечаем, что в углу есть какая-то сущность, но самая крупная надпись перетягивает внимание на себя.

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

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

Прежде чем разобрать, как правильно использовать эти знания, рассмотрим антипример.

Представьте: умудрённый опытом владелец фабрики шпингалетов заказывает сайт у юного веб-дизайнера. На главной нужно написать про модельный ряд и выложить документацию. Дизайнер получает все ценные указания и через неделю выдаёт что-то подобное:

Иерархия погружения понятна: посетитель видит, что это сайт про шпингалеты. Если ему это интересно, он увидит разделы «Наши модели» и «Документация» и углубится в поиск.

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

После правок сайт будет выглядеть примерно так:

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

Прямо сейчас зайдите на свой сайт и попытайтесь оценить, насколько большая когнитивная нагрузка падает на посетителя. Сколько сущностей ему приходится видеть боковым зрением? Очевидны ли эти сущности? Понятно ли, в какой последовательности читать материал? Мы ещё вернемся к этим вопросам, а пока давайте разберем, что испортилось на сайте шпингалетов.

Дизайнер нарушил главное правило иерархии погружения:

Выделение размером, формой, расположением, цветом и анимацией однозначно обозначает иерархию элементов

Говоря простыми словами, на странице стало так много разных способов привлечения внимания, что непонятно, какой из них главный. Есть выделение цветом, формой (стрелочка, курсивные и жирные начертания), размером. Это ломает естественный F-паттерн и создаёт дополнительную когнитивную нагрузку.

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

Но если бы вы пришли именно за документацией, то погрузились бы глубже и заметили, что одна из моделей «хит». Так и работает иерархия погружения: мы аккуратно разделяем аудиторию и даём каждому важную информацию в нужный момент.

Во втором варианте дизайна волей-неволей обращаешь внимание на этот «хит», даже если пришёл не за документацией — на нём слишком много акцентов.

Заметьте — элементов в примере про шпингалеты не так много, на среднестатистическом сайте сущностей в разы больше: меню, формы, тексты. Конечно, пример утрированный, и в наше время таких сайтов не встретишь. Хотя, погодите, что это? Тут даже выделение анимацией есть!

В этом есть своя прелесть, но представьте, что вы зашли посмотреть список сильнейших теннисистов — как быстро вы сдадитесь?

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

Самый простой способ поддержания иерархии — это выделение размером, поэтому стоит поговорить о нём отдельно.

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

Чтобы поддерживать иерархию с помощью размера, нужно соблюдать правило:

Объекты воспринимаются разными, если их визуальная масса отличается минимум в полтора раза

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

Увеличим разницу в визуальной массе:

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

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

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

На сайте Альфа-Банка цветом выделяют смысловые блоки

Выделение цветом для создания иерархии важно для мобильных сайтов и приложений: маленький экран ограничивает возможность использовать другие принципы визуальной иерархии — размер и пространство.

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

А теперь представьте такой вариант: вы переступаете порог и видите полный порядок — посуда на кухне, книги в книжном шкафу. В кладовке стоит стеллаж с белыми «икеевскими» подписанными коробками: «игрушки», «документы», «лекарства». В коробке «лекарства» вы находите нужный пузырек без боли и слёз.

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

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

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

Композиция. Не изобретайте велосипед и используйте готовые схемы для построения композиции сайта: f-паттерн и z-паттерн, о которых мы уже рассказали выше. Так пользователю будет гораздо комфортнее воспринимать информацию.

Размеры. С помощью варьирования размерами можно повысить или понизить важность информации: логотипа, заголовка или инфографики. В типографике есть три уровня размера, каждый из которых должен быть больше предыдущего как минимум в полтора раза. Например, если основной текст мы возьмём за 100%, то для подзаголовка нужно выбрать кегль в полтора раза больше — 150%, а для заголовка — 250%.

Цвета. О поддержании иерархии цветом мы уже говорили выше. Проверьте, чтобы на вашем сайте было не больше двух-трёх цветов: основной и дополнительные. Дополнительными цветами можно выделить блоки информации или отдельные элементы — кнопки, списки, иконки.

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

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

Сфокусировать внимание на сайте можно с помощью четырёх простых дизайн-инструментов: композиции, размера, цвета и свободного пространства.

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

Спасибо, что дочитали статью до конца!

Ещё больше полезной информации в наших социальных сетях: ВКонтакте | Instagram | Facebook

Источник

Иерархия погружения: один из самых простых и важных принципов дизайна

Рассказываю о принципе, который поможет заметить и исправить распространённые ошибки в дизайне сайтов и рекламы, даже если вы не дизайнер.

Уже много лет по интернету ходят подобные картинки:

Действительно, большинство людей прочитают этот текст именно в таком порядке. Можно ли использовать эту магию вне Хогвартса и управлять вниманием клиента, который зашёл на ваш сайт или увидел рекламу, каталог, упаковку?

Паттерны и локус внимания

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

Важно: это не карта кликов, а анализ движения глаз

Грубо говоря, все мы очень хотим начать читать с верхнего левого угла, если что-то своим размером, цветом, формой, расположением или анимацией не перетягивает наше внимание. Это и происходит на «магической» картинке: мы замечаем, что в углу есть какая-то сущность, но самая крупная надпись перетягивает внимание на себя.

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

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

Примерно так вы сейчас видите эту статью. Вы замечаете и меню сайта и баннер, но только как сущности, а ваше внимание — на тексте

Прежде чем разобрать, как правильно использовать эти знания, рассмотрим антипример.

Почему на сайтах так часто нарушают принцип иерархии погружения

Представьте: умудрённый опытом владелец фабрики шпингалетов заказывает сайт у юного веб-дизайнера. На главной нужно написать про модельный ряд и выложить документацию. Дизайнер получает все ценные указания и через неделю выдаёт что-то подобное:

Первый вариант сайта

Иерархия погружения понятна: посетитель видит, что это сайт про шпингалеты. Если ему это интересно, он увидит разделы «Наши модели» и «Документация» и углубится в поиск.

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

После правок сайт будет выглядеть примерно так:

Второй вариант сайта

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

Прямо сейчас зайдите на свой сайт и попытайтесь оценить, насколько большая когнитивная нагрузка падает на посетителя. Сколько сущностей ему приходится видеть боковым зрением? Очевидны ли эти сущности? Понятно ли, в какой последовательности читать материал? Мы ещё вернемся к этим вопросам, а пока давайте разберем, что испортилось на сайте шпингалетов.

Дизайнер нарушил главное правило иерархии погружения:

Выделение размером, формой, расположением, цветом и анимацией однозначно обозначает иерархию элементов

Говоря простыми словами, на странице стало так много разных способов привлечения внимания, что непонятно, какой из них главный. Есть выделение цветом, формой (стрелочка, курсивные и жирные начертания), размером. Это ломает естественный F-паттерн и создаёт дополнительную когнитивную нагрузку.

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

Первый вариант сайта

Но если бы вы пришли именно за документацией, то погрузились бы глубже и заметили, что одна из моделей «хит». Так и работает иерархия погружения: мы аккуратно разделяем аудиторию и даём каждому важную информацию в нужный момент.

Во втором варианте дизайна волей-неволей обращаешь внимание на этот «хит», даже если пришёл не за документацией — на нём слишком много акцентов.

Заметьте — элементов в примере про шпингалеты не так много, на среднестатистическом сайте сущностей в разы больше: меню, формы, тексты. Конечно, пример утрированный, и в наше время таких сайтов не встретишь. Хотя, погодите, что это? Тут даже выделение анимацией есть!

Сайт одной из федераций настольного тенниса, насколько можно понять

В этом есть своя прелесть, но представьте, что вы зашли посмотреть список сильнейших теннисистов — как быстро вы сдадитесь?

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

Поддержание иерархии размером

Самый простой способ поддержания иерархии — это выделение размером, поэтому стоит поговорить о нём отдельно.

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

Чтобы поддерживать иерархию с помощью размера, нужно соблюдать правило:

Объекты воспринимаются разными, если их визуальная масса отличается минимум в полтора раза

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

Строчки разного размера, но разница между ними в пределах полутора раз

Увеличим разницу в визуальной массе:

Строчки начали выделяться за счет размера

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

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

Заголовок намного больше текста

Поддержание иерархии цветом

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

Выделение цветом для создания иерархии важно для мобильных сайтов и приложений: маленький экран ограничивает возможность использовать другие принципы визуальной иерархии — размер и пространство.

Практические советы по построению иерархии

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

На сайте Ленинградского зоопарка очень сложно ориентироваться: много деталей борются за внимание пользователя

А теперь представьте такой вариант: вы переступаете порог и видите полный порядок — посуда на кухне, книги в книжном шкафу. В кладовке стоит стеллаж с белыми «икеевскими» подписанными коробками: «игрушки», «документы», «лекарства». В коробке «лекарства» вы находите нужный пузырек без боли и слёз.

Сайт Московского зоопарка гораздо удобнее: взгляд скользит по Z-паттерну, и найти нужный раздел можно за секунды/

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

Совет 1. Сгруппируйте информацию

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

Совет 2. Подкрепите ранжирование информации визуально

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

Композиция. Не изобретайте велосипед и используйте готовые схемы для построения композиции сайта: f-паттерн и z-паттерн, о которых мы уже рассказали выше. Так пользователю будет гораздо комфортнее воспринимать информацию.

Размеры. С помощью варьирования размерами можно повысить или понизить важность информации: логотипа, заголовка или инфографики. В типографике есть три уровня размера, каждый из которых должен быть больше предыдущего как минимум в полтора раза. Например, если основной текст мы возьмём за 100%, то для подзаголовка нужно выбрать кегль в полтора раза больше — 150%, а для заголовка — 250%.

На сайте Алисы взгляд цепляется за заголовок: он выделяется размером

Цвета. О поддержании иерархии цветом мы уже говорили выше. Проверьте, чтобы на вашем сайте было не больше двух-трёх цветов: основной и дополнительные. Дополнительными цветами можно выделить блоки информации или отдельные элементы — кнопки, списки, иконки.

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

Резюмируя

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

Сфокусировать внимание на сайте можно с помощью четырёх простых дизайн-инструментов: композиции, размера, цвета и свободного пространства.

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

Роман Горбачёв

Основатель и директор дизайн-студии «Логомашина»

Источник