№1 по увеличению конверсии в России

Статьи о UX дизайне: Закон Фиттса в дизайне

Дата публикации: февраль 2019г. | Обновлено: декабрь 2020г. | Время прочтения: ~ 4 мин.
Американский психолог Пол Фиттс (Paul Morris Fitts) работавший в университете штата Огайо, в 1954 году провел эксперимент, описывающий движение человека при достижении цели в двумерном пространстве. Суть эксперимента была в следующем: на доске размещены две чувствительных полоски — мишени (изображение ниже). При касании специальным пером одной из этих полосок фиксируется «попадание в цель». Задача испытуемого: как можно быстрее поочерёдно касаться пером то одной, то второй полоски. При этом, расстояние между полосками и ширина каждой из них периодически изменялись. Отслеживая время касаний, Фиттс вывел зависимость: чем больше расстояние до цели и чем меньше размер самой цели, тем больше времени требуется для ее достижения. И соответственно наоборот, чем меньше расстояние до цели и чем больше размер цели, тем меньше времени требуется для её достижения. Это и есть закон Фиттса (Fitts's law).
Слева: эксперимент Фиттса. Справа: закон Фиттса (математическое описание). yorku.ca
Аналогично закон Фиттса применим и к дизайну сайтов или интерфейсов. Например: чем дальше кнопка и чем меньше её размер, тем больше времени необходимо пользователю для клика по ней. Также закон Фиттса можно использовать для намеренного осложнения пути пользователя, например сделав меньше кнопку «Удалить» пользователи реже будут кликать по ней случайно. Вместо кнопки может быть любой другой объект или цель на странице.
Слева: кнопка меньшего размера и клик по ней занимает больше времени у пользователя
Справа: кнопка большего размера и клик по ней занимает меньше времени у пользователя, struto.co.uk
В ряде случаев желание увеличить элемент вступает в противоречие с требованием занять им как можно меньше места на экране. В таких случаях достаточно увеличить не сам объект, а лишь область нажатия. Так, например, на сайте М.Видео (изображение ниже) зона нажатия (изображена красным пунктирным квадратом) намного больше иконки.
Область нажатия больше самого объекта, mvideo.ru
Другой пример того, как увеличена область нажатия, а не сам объект это пункты меню на сайте Ozon. Здесь зона нажатия больше, чем текстовое название самого раздела каталога.
Кликабельная зона больше чем текстовое название раздела, ozon.ru
Важно учесть, что до определенного момента даже небольшое увеличение размера дает существенное сокращение времени. Но после определенного этапа увеличение цели практически не отражается на скорости ее достижения. Объясняются эти выводы логарифмической зависимостью между переменными. Проясним для наглядности, вот график функции, который описывает зависимость между размером цели и временем ее достижения при неизменной дистанции. Например, при увеличении размера с 0,5 до 1 время сокращается с 0,45 до 0,3, т.е. примерно на 30%. Но чем больше увеличивается размер, тем незначительнее сокращается время достижения цели. Обратите внимание, при увеличении размера с 8 до 10 время достижения уже почти не меняется. Проще говоря, желательно делать важные объекты на сайте крупнее, но не стоит делать их огромными, так как это не принесет значительного улучшения.
Слева: Пол Фиттс, автор закона. Справа: график функции зависимости размера цели и её достижения. askusers.ru
Точка роста конверсии: используйте закон Фиттса для определения оптимальных размеров кнопок и других элементов на сайте, это ускорит и упростит взаимодействие с сайтом
В данной статье рассмотрена лишь одна точка роста конверсии. Узнать ещё 100+ точек роста конверсии и UX-исследований можно в электронном учебнике Conversant.

Другие статьи о UX дизайне в блоге Conversant:


Архитектура выбора: Используйте теории подталкивания и неприятия потери нобелевских лауреатов в области поведенческой экономики

Уделяйте внимание визальной части, но не забывайте о функциональности и удобстве

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

Используйте закон Пола Фиттса (Paul Morris Fitts): делайте важные объекты на сайте крупнее и ближе

Укажите ссылки на социальные сети и сделайте их менее заметными

Укажите ссылки на мессенджеры на сайте и сделайте их заметными (WhatsApp, Telegram, Viber, Skype)

Почему номер телефона на сайте желательно указывать в 2020

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

Постарайтесь не использовать слайдер из нескольких баннеров. Но если использовать слайдер всё же необходимо, то исключите ошибки при оформлении.

Используйте хлебные крошки и избегайте ошибок при их оформлении

Почему меню желательно использовать на всех страницах сайта

Descriptor - описывающий. Краткое описание сайта, его основной смысл или направления деятельности.

Как расположение логотипа влияет на узнаваемость компаний


UX-исследования и UX тесты, точки роста конверсии, продающий контент в электронной коммерции