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

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

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

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

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

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

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

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

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

Где:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

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

#UX

0
24 комментария
Написать комментарий...
Василий Степанов

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

Ответить
Развернуть ветку
S.Z

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

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

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

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

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

Ответить
Развернуть ветку
Krotchy Doll

"Ководство" автор Артемий Лебедев.

Этот тот Артемий Лебедев, владелец студии, которая сделала архиговняный логотип для белорусской бургерной за $1700, а потом оправдывались, мол "клиенты в конечном счете едят не логотип, а бургеры".

Вы серьезно его рекомендуете?)

Ответить
Развернуть ветку
Алексей Надеждин

Именно. Тот самый логотип, который вы сразу вспомнили)

Ответить
Развернуть ветку
Pablo the Elephant

Лично я, вспоминая Лебедева, вспоминаю "Якиторию", отличный логотип и знак (как позже выяснилось, плагиат)
А "Джон и Федор" все вспоминают из за невообразимой шумихи вокруг этого "шедевра" и только.

Ответить
Развернуть ветку
Андрей Крамарь

Ну да, в студии Лебедева бывают и толковые сотрудники, которые могут. Это логично.
Есть ли тут заслуга татьяныча - другой вопрос. Он все больше про тупые посты в инстаграме и в жж.

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Шумиха, которая продолжается по сей день, даже в комментариях под этим постом :) А чтобы закрыть тему, то если кому-то неприятен Лебедев, то замените "Ководство" в моём списке на книгу "Дизайн привычных вещей" от Дональда Нормана. И будет всем счастье

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Да, этот Артемий Лебедев. И я абсолютно серьезно его рекомендую. Лебедев стал уже классиком, которого можно либо любить, либо ненавидеть. Но Ководство это не совсем про дизайн, а скорее про здравый подход через призму дизайна. На мой взгляд, UX-дизайнеру очень важен здоровый взгляд на мир и на вещи в нём. Но у вас может быть другой взгляд и это делает мир прекраснее :)

Ответить
Развернуть ветку
Василий Степанов

Ну "Ководство" это дичь. Там большая часть содержания и статей
вообще не по делу или бесконечно устарела.

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Вам виднее.

Ответить
Развернуть ветку
S.Z

.

Ответить
Развернуть ветку
Mark Quincy

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

Ответить
Развернуть ветку
Василий Степанов

Там точно внутри про интерфейс?

Ответить
Развернуть ветку
Yury S

Внутри ИЕЕ НРЙ ТФС или AUA BTC OFE — есть основания считать, что книга о дизайне с такой обложкой противопоказана начинающим (и вообще) дизайнерам. 

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Интересное наблюдение, тоже об этом подумал. Но мне кажется, что читается всё же легко, потому что между крупными буквами названия "ИНТ ЕРФ ЕЙС" расположены небольшие буквы подзаголовка: "Основы проектирования взаимодействия". Таким образом подзаголовок разделяет название на строки, а не столбцы и подсказывает направление чтения горизонтально, а не вертикально. 

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

P.S. Вспомнил мем с недовольным котом :) 

Ответить
Развернуть ветку
Aleks B

вопрос с подъебом? 🤔

Ответить
Развернуть ветку
max smirnoff

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

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Ну зачем вы так грубо, все когда-то начинали :)

Ответить
Развернуть ветку
Никита Сила

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

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

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

Ответить
Развернуть ветку
Никита Сила

Вы слишком нетоксичны для виси) просто обратил внимание на то, что последние две статьи, попавшие мне в рекомендации было однотипны, а исследования очевидны

Ответить
Развернуть ветку
Илья Никитенко

Коллега, а вы только про e-commerce пишите в учебнике? Судя по разделам

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Мы специализируемся на e-commerce, но эта сфера на столько объемна, что включает в себя многие другие. На примере данной статьи, закон применим к футеру интернет-магазинов и банков. В электронном учебнике, в одном из разделов подробно разбирается контент, что применимо как к электронной коммерции, так и к лендингам. В другом разделе эл. учебника разбираются сервисные страницы, которые применимы как к коммерческим сайтам, так и простым сайтам о компании (сайтам-визиткам).

Ответить
Развернуть ветку
21 комментарий
Раскрывать всегда