UX дизайн: Закон Фиттса — для определения оптимальных размеров и расположения элементов на сайте

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

Американский психолог Пол Фиттс (Paul Morris Fitts) работавший в университете штата Огайо, в 1954 году провел эксперимент, описывающий движение человека при достижении цели в двумерном пространстве.

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

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

Отслеживая время касаний, Фиттс вывел зависимость: чем больше расстояние от одной цели до другой цели и чем меньше размер самой цели, тем больше времени требуется для её достижения. И соответственно наоборот, чем меньше расстояние от одной цели до другой цели и чем больше размер цели, тем меньше времени требуется для её достижения. Это и есть закон Фиттса (Fitts’s law).

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

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

Но чем больше увеличивается размер, тем незначительнее сокращается время достижения цели. Обратите внимание, что при увеличении размера с 8 до 10 время достижения уже почти не меняется (справа на изображении). Проще говоря, желательно делать важные объекты в интерфейсе крупнее и ближе, но не стоит делать их огромными, так как это не принесет значительного улучшения.

Математически закон записывается как:

Где:

Аналогично закон Фиттса применим и к дизайну сайтов или интерфейсов. Например: чем дальше кнопка (от последнего клика мыши) и чем меньше её размер, тем больше времени необходимо пользователю для клика по ней.

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

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

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

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

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

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

#ux