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

Дата публикации: февраль 2019г. | Обновлено: декабрь 2020г. | Время прочтения: ~ 4 мин.

Американский психолог Пол Фиттс (Paul Morris Fitts) работавший в университете штата Огайо, в 1954 году провел эксперимент, описывающий движение человека при достижении цели в двумерном пространстве. Суть эксперимента была в следующем: на доске размещены две чувствительных полоски — мишени (изображение ниже). При касании специальным пером одной из этих полосок фиксируется «попадание в цель». Задача испытуемого: как можно быстрее поочерёдно касаться пером то одной, то второй полоски. При этом, расстояние между полосками и ширина каждой из них периодически изменялись. Отслеживая время касаний, Фиттс вывел зависимость: чем больше расстояние до цели и чем меньше размер самой цели, тем больше времени требуется для ее достижения. И соответственно наоборот, чем меньше расстояние до цели и чем больше размер цели, тем меньше времени требуется для её достижения. Это и есть закон Фиттса (Fitts's law).

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

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

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

Важно учесть, что до определенного момента даже небольшое увеличение размера дает существенное сокращение времени. Но после определенного этапа увеличение цели практически не отражается на скорости ее достижения. Объясняются эти выводы логарифмической зависимостью между переменными. Проясним для наглядности, вот график функции, который описывает зависимость между размером цели и временем ее достижения при неизменной дистанции. Например, при увеличении размера с 0,5 до 1 время сокращается с 0,45 до 0,3, т.е. примерно на 30%. Но чем больше увеличивается размер, тем незначительнее сокращается время достижения цели. Обратите внимание, при увеличении размера с 8 до 10 время достижения уже почти не меняется. Проще говоря, желательно делать важные объекты на сайте крупнее, но не стоит делать их огромными, так как это не принесет значительного улучшения.