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

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

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

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

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

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

Слева: Пол Фиттс. Справа: эксперимент Фиттса. wikipedia.org, yorku.ca
Слева: Пол Фиттс. Справа: эксперимент Фиттса. wikipedia.org, yorku.ca

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

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

Слева: небольшое увеличение размера дает существенное сокращение времени. Справа: увеличение цели практически не отражается на скорости ее достижения. График askusers.ru (с нашей доработкой)
Слева: небольшое увеличение размера дает существенное сокращение времени. Справа: увеличение цели практически не отражается на скорости ее достижения. График askusers.ru (с нашей доработкой)

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

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

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

Где:

  • T — среднее время, затрачиваемое на совершение действия.
  • a — среднее время запуска/остановки движения.
  • b — величина, зависящая от типичной скорости движения.
  • D — дистанция от точки старта до центра цели.
  • W — ширина цели, измеренная вдоль оси движения.

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

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

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

Слева: кнопка меньшего размера и клик по ней занимает больше времени у пользователя. Справа: кнопка большего размера и клик по ней занимает меньше времени у пользователя struto.co.uk
Слева: кнопка меньшего размера и клик по ней занимает больше времени у пользователя. Справа: кнопка большего размера и клик по ней занимает меньше времени у пользователя struto.co.uk

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

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

Область нажатия в 2 раза больше иконки "Войти" mvideo.ru
Область нажатия в 2 раза больше иконки "Войти" mvideo.ru

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

Область нажатия в 2 раза больше текстового заголовка "Красота и здоровье" ozon.ru
Область нажатия в 2 раза больше текстового заголовка "Красота и здоровье" ozon.ru

Вывод

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

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

9191
46 комментариев

А потом пришел заказчик и сказал — "Так не хочу. Вот так хочу" 😄
Если серьезно — интересный и познавательный материал, спасибо! 👍

15
Ответить

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

Материал хороший)

6
Ответить

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

3
Ответить

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

4
Ответить

Просто Фитс был быстрее чем капитан)

Ответить

Как-то статья ни о чем. "Делайте кликабельные зоны нормального размера" и всё. 

2
Ответить

С таким подходом можно обобщить и обесценить что угодно. Даже великое произведение Льва Толстого «Война и мир» состоящее из двух томов можно свести к:

«Как-то роман ни о чем, всю дорогу про любовь, а в конце наши победили» и всё.

Критиковать всегда проще, чем создавать. Но если почитать повнимательнее, то в статье можно найти ответы на ряд актуальных вопросов:
1. Почему стоит делать важные объекты крупнее.
2. На сколько крупнее делать объекты (как высчитать).
3. Почему не стоит делать слишком крупные объекты.
4. Почему стоит располагать объекты ближе.
5. Где уместно намеренно уменьшать размеры объектов.
6. Как применять данный подход в веб-дизайне.
7. Как добиться увеличения объекта без ущерба визуальной части (компромисс UX и UI).

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

5
Ответить