Когнитивные особенности проектирования интерфейсов

Смотрите в каталоге
SEO (управление и аналитика)

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

Эксперты сервиса AskUsers разобрались, что это значит, как работает и каким образом скомпоновать элементы интерфейса так, чтобы они соответствовали принципам теории.

Психологические основы теории близости

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

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

Мы сразу видим дерево, а не отдельно ствол, ветки, листья и почки. Все признаки мы автоматически объединяем одним понятием — дерево. А уже потом начинаем разбираться, листья у него или иголки, шишки или почки. Мозг автоматически группирует признаки и выдает общий результат.

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

А теперь пример по интереснее.

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

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

Как это работает в интерфейсе

С интерфейсами то же самое: пользователь сразу группирует находящиеся рядом элементы, и дальше мозг оперирует уже категориями групп, а не отдельных элементов.

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

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

А теперь немного когнитивной магии: даже если вы обратили внимание на Телевизоры в неподходящей категории, вы подумали о них, как о связанном объекте: «Какое отношение телевизоры имеют к программам для успеха? К антивирусам, Ворду и 1С?»

Мы уже писали о том, как группировать элементы интернет-магазина.Обратите внимание, принципы теории близости заложены во все базовые схемы группировки. Потому что это работает.

А теперь несколько антипримеров.

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

Принципы теории близости нарушены. Из-за этого пользователь на ровном месте сталкивается с трудностями. Хотя идея разнести Схему работы, Стоимость и Калькулятор на разные вкладки изначально очень хорошая.

Сразу кажется, что Hi-Fi акустика и Интернет-телевидение Persik относятся к одной категории Аудио. Потому что этот подзаголовок находится рядом и с первым, и со вторым столбцом меню.

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

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

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

Как проверить, соответствует ли интерфейс принципам теории

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

  1. Сгруппировать элементы на странице по расположению, дать название каждой группе (например: Контакты, Верхнее меню). Были ли элементы, которые не вписались по своему расположению в группы? Если были, то какие? Какие сложности возникли в процессе группировки?
  2. Найти на странице определенную информацию. Помогали или мешали элементы интерфейса это сделать? Какие элементы помогали? Какие мешали?
  3. Совершить целевое действие (позвонить, оформить заказ, написать). С какими трудностями вы столкнулись при совершении действия? Что в интерфейсе нужно улучшить, чтобы действие стало проще?

В ходе исследования выявляются проблемы с навигацией: 

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

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

Выводы и рекомендации

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

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

Компании и сервисы: AskUsers
Автор: Анна

Подписаться на новости

Читайте также

27 ноября 2017 / Комментарии

Как Customer Experience изменил бизнес-процессы маркетплейса Goods

В результате нескольких месяцев проектирования «М.Видео» пришлось скорректировать бизнес-процессы под Customer Experience, другими словами, чтобы платформа стала удобнее для покупателя. Попробуем разобраться почему.

далее →

16 ноября 2017 / Комментарии

И еще 11 мифов юзабилити

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

далее →

19 октября 2017 / Комментарии

4 вопроса о поиске в интернет-магазине, ответы на которые меняют всё

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

далее →

12 июля 2017 / Комментарии

Пять объединяющих особенностей тысячи самых успешных посадочных страниц современности

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

далее →

17 мая 2017 / Комментарии

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook