Закон Фиттса: размер и расстояние до цели

До большой близкой кнопки попасть легко. До крошечной в углу — мучительно. Это измеримо.

«Время наведения на цель зависит от расстояния до неё и её размера». — закон Фиттса

Закон Фиттса (Fitts's Law) описывает связь между размером цели, расстоянием до неё и временем попадания. Чем цель крупнее и ближе к текущему положению курсора или пальца, тем быстрее по ней кликнуть. Маленькая кнопка далеко — это и медленно, и раздражающе, особенно на телефоне.

Следствия для дизайна

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

  ЗОНЫ БОЛЬШОГО ПАЛЬЦА (телефон в одной руке)

  +---------------------+
  |  тяжело   тяжело    |  <- верхние углы неудобны
  |                     |
  |       ОК            |
  |                     |
  |  легко    ЛЕГЧЕ ВСЕГО|  <- низ под главные действия
  +---------------------+
        \____ палец ____/

Размер касания

Минимальная цель для пальца — примерно 44×44 точки (рекомендация Apple) или 48×48 dp (Google). Меньше — люди мажут. Между кликабельными элементами нужны отступы, иначе человек попадает не туда.

Как делают ПЛОХО

Крестик «закрыть» — крошечный, 16 пикселей, в самом верхнем углу. Кнопки «Да/Нет» прижаты вплотную. На телефоне человек регулярно жмёт не то и совершает действие, которого не хотел.

Как делают ХОРОШО

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

Чек-лист

• Кликабельные цели не меньше 44×44 точек.
• Главные действия на мобильном — в нижней зоне.
• Между кнопками есть отступы.
• Я использую углы/края экрана для важного на десктопе.

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

На десктопе работают «магические углы»: строка меню macOS прижата к самому верху, а кнопка «Пуск» в Windows — в углу. Угол экрана — бесконечно большая цель: курсор упирается в край и не проскакивает, поэтому туда удобно целиться вслепую. Это прямое следствие закона Фиттса, а не просто привычка.

Обратная сторона — крошечные крестики закрытия, в которые приходится целиться по нескольку раз; отсюда ярость и rage-клики. И важнейшее правило безопасности: разносите опасные действия подальше от частых. Если «Удалить всё» стоит вплотную к «Сохранить», рано или поздно палец промахнётся. Частое делайте крупным и близким, разрушительное — мелким и в стороне.

Чтобы проверить экран на закон Фиттса, мысленно представьте, как им пользуются одной рукой в движении — в транспорте, на ходу, с сумкой во второй руке. Дотягивается ли палец до главной кнопки без перехвата телефона? Не слишком ли мелки и близки опасные действия? Достаточно ли воздуха между целями, чтобы не промахнуться? Этот воображаемый стресс-тест ловит проблемы, незаметные на спокойном макете за столом. Хороший интерфейс выдерживает именно неидеальные условия — а они и есть норма для мобильного пользователя.

Итог

Закон Фиттса превращает «удобно/неудобно» в измеримое: крупнее и ближе — быстрее. Особенно это критично на телефонах, где работает один палец.

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