UX-дизайн: Закон Хика — как ускорить принятие решений пользователями

Статья для начинающих UX/UI дизайнеров, исследователей и аналитиков. Этот закон помогает определить оптимальное количество вариантов на сайте для упрощения и ускорения взаимодействия пользователей с ними.

Британский психолог Уильям Хик (William Hick) и американский профессор психологии Рэй Хайман (Ray Hyman) в 1952 году провели эксперимент, описывающий, сколько времени пользователи систем тратят на выбор.

Для этого, перед испытуемыми установили 10 ламп, а под лампами были расположены клавиши (каждая клавиша соответствовала лампе). Клавиши располагались под пальцами испытуемых, чтобы исключить время на перемещение пальцев к клавишам. Лампы зажигались случайным образом каждые пять секунд в диапазоне от 2 до 10 ламп.

Слева: Уильям Хик и его инструмент замера времени реакции. Справа: эксперимент Хика. wikipedia.org
Слева: Уильям Хик и его инструмент замера времени реакции. Справа: эксперимент Хика. wikipedia.org

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

Зависимость времени реакции от количества доступных вариантов. График askusers.ru (с нашей доработкой)
Зависимость времени реакции от количества доступных вариантов. График askusers.ru (с нашей доработкой)

Проще говоря: чем больше объектов перед пользователем, тем больше времени нужно на выбор. Это и есть закон Хика-Хаймана, который чаще называют закон Хика (Hick’s law). Математически закон записывается как:

Математическое описание закона Хика wikipedia.org
Математическое описание закона Хика wikipedia.org

Где:

  • T — среднее время реакции.
  • b — константа, которая описывает индивидуальные особенности восприятия, такие как задержка перед выполнением задания и индивидуальный коэффициент скорости принятия решения.
  • b — константа, которая описывает индивидуальные особенности восприятия, такие как задержка перед выполнением задания и индивидуальный коэффициент скорости принятия решения.

Интересная деталь: позже (в 1964 году), немецкий профессор психологии Эрвин Рот (Erwin Roth) дополнил закон Хика, продемонстрировав корреляцию между уровнем интеллекта (IQ) и скоростью реакции. Оказалось, что чем ниже уровень интеллекта человека, тем дольше скорость реакции.

Слева Эрвин Рот. Справа результаты эксперимента Эрвина Рота wikipedia.org
Слева Эрвин Рот. Справа результаты эксперимента Эрвина Рота wikipedia.org

Применение закона Хика в дизайне сайтов

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

Поэтому в данном случае, можно сузить круг поисков расставив города в алфавитном порядке. Тогда пользователь может отсечь ненужные города по первым буквам алфавита и сузить диапазон поиска (по аналогии с сокращением диапазона ламп в эксперименте Хика).

Выбор города на сайте интернет-магазина Ситилинк citilink.ru
Выбор города на сайте интернет-магазина Ситилинк citilink.ru

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

Это позволит ещё больше упростить и ускорить выбор города. А пользователи из других городов смогут найти свой город в строке поиска. Очень часто, неравномерно большое количество покупателей приходится на Москву и Санкт-Петербург, поэтому эти города можно поднять вверх списка, чтобы ещё больше ускорить поиск. Вот как это реализовано на сайте М.Видео (изображение ниже).

Выбор сужен до 10 городов на сайте интернет-магазина М.Видео mvideo.ru
Выбор сужен до 10 городов на сайте интернет-магазина М.Видео mvideo.ru

При этом, в М.Видео аналогично Ситилинку больше 1000 офлайн магазинов в различных городах, а посещаемость на обоих сайтах ~30млн посетиетелй в месяц (данные SimilarWeb, ноябрь 2020г.)

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

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

Так, например, реализовано на сайте банка Тинькофф. Здесь все услуги банка разбиты на 6 колонок, каждая из которых группирует направления бизнеса:

  • Банк – продукты и услуги для физических лиц;
  • Бизнес — продукты и услуги для юридических лиц;
  • Инвестиции – инвестиционные продукты;
  • Страхование – страховые продукты;
  • Путешествия – туристические продукты;
  • Развлечения – развлекательные продукты.
Футер (подвал) на сайте банка Тинькофф разбит на столбцы по направлениям tinkoff.ru
Футер (подвал) на сайте банка Тинькофф разбит на столбцы по направлениям tinkoff.ru

То есть пользователь выбирает необходимый столбец и диапазон поиска сужается с 43 пунктов до 8. А для усиления эффекта, пункты в каждом столбце можно отсортировать не по алфавиту, а по популярности, где наиболее популярные разделы находятся сверху, а наименее снизу, по ходу движения взгляда пользователя сверху-вниз.

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

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

Футер на сайте Банка Казани не разбит на столбцы и не отсорирован по алфавиту bankofkazan.ru
Футер на сайте Банка Казани не разбит на столбцы и не отсорирован по алфавиту bankofkazan.ru

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

Поэтому пользователю приходится перечитывать все пункты, чтобы найти необходимый. А учитывая, что в футере есть понятные не всем пункты (например, «Информация 622-П») то выбор будет занимать ещё больше времени, по аналогии с экспериментом Эривна Рота (влияние IQ на скорость реакции).

Вывод

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

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

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

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

3434
24 комментария

Пользуясь случаем спрошу, про лучшую книгу по UX для начинающего

1
Ответить

Пользовательский интерфейс" Илья Бирман.

https://bureau.ru/projects/book-ui/

10
Ответить

Для начинающего:
1. "Не заставляйте меня думать" автор Стив Круг.
2. "Ководство" автор Артемий Лебедев.
3. "Психбольница в руках пациентов" автор Алан Купер.

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

7
Ответить

Все что можете найти от Алана Купера. Есть большая книга, которая так и называется Интерфейс

2
Ответить

"UX для чайников"

1
Ответить

Однотипные статьи, формула одна и та же, и постоянный пиар мвидео

2
Ответить

1) Статьи про инженерную психологию и применение в UX-дизайне в подсайте "Дизайн". А что вы ожидали здесь увидеть? Статьи про закрытие Дома-2 и выздоровление Тинькова? Тогда вам лучше пройти в другие подсайты. И потом, в начале каждой статьи я публикую лид - абзац с кратким описанием того о чем данная статья. Если вы всё знаете и данная тема вам не интересна - пропустите и не тратье своё время после первого же абзаца. А если судить по тому, что обе статьи попали в разделы "Популярное" на VC, то это говорит о том, что данная тема интересна другим читателям. Значит не зря :)
2) Формула не одна и та же, но они схожие. Потому что в обоих статьях речь о вычислении логарифма. Есть множество схожих формул, которые описывают разные законы и явления. И что же в этом плохого? Суть статьи не в формулах.
3) Мы работали над сайтом М.Видео, поэтому я упомянул его. Всего два упоминания М.Видео и ещё 5 других компаний приведены исключительно для наглядности, без похвалы и рекламы (товаров, распродаж и тд) но вы увидели здесь теорию заговора. Окей, ваше право.
Вывод: если тема вам так хорошо знакома, то вместо негатива, возможно лучше направить свою энергию и время на дополнение этой статьи своими размышлениями и богатым опытом? От этого всем станет только лучше (автору, комментатору, читателям). Хорошего дня.

1
Ответить