Что такое закон Фиттса? Как повысить свою квалификацию дизайнера

Привет!

Слышали ли вы о законе Фиттса или нет, вы определённо видели его примеры в реальной жизни. От педалей в автомобиле до кнопок в iOS — вы наверняка взаимодействовали с объектами, на которые повлияли принципы Фиттса.

Закон Фиттса — это предсказательная модель человеческого поведения, и она повсюду вокруг нас: от веб-сайтов и мобильных приложений до физических приборных панелей и практически любого материального продукта, с которым мы ежедневно взаимодействуем.

Как только вы начнёте замечать эти, казалось бы, очевидные концепции, вы уже не сможете перестать обращать на них внимание.

Что такое закон Фиттса?

В 1954 году психолог Пол Фиттс создал прогностическую модель, описывающую, как быстро люди могут выбрать цель. Целью может быть кнопка, которую нужно нажать, или поле формы, на которое нужно кликнуть. Сегодня эта модель широко применяется в сфере human-computer interaction.

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

Что такое стоимость взаимодействия?

Nielsen Norman Group определяет стоимость взаимодействия как «сумму усилий — умственных и физических, — которые пользователи должны затратить на взаимодействие с сайтом, чтобы достичь своих целей».

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

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

Уравнение закона Фиттса

Закон Фиттса утверждает, что время, необходимое для захвата цели, зависит от её размера и расстояния до неё.

Вот уравнение:

MT = a + b * log₂ (2D/W)

Разберём переменные:

• MT — время, необходимое для выбора цели;
• a + b — константы, определяемые типом устройства;
• D — расстояние от начальной точки до цели;
• W — ширина цели вдоль оси движения.

Типичные применения закона Фиттса

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

1. Кнопка завершения действия расположена рядом с активными элементами;
2. Важные элементы увеличены для удобного нажатия;
3. Интерактивные списки максимально компактны;
4. Кратчайший путь к целевому CTA;
5. Меню размещаются в верхних углах экрана на десктопе и в нижней части на мобильных устройствах.

Как закон Фиттса применяется в UI-дизайне

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

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

Если вы хотите освоить UI-дизайн, обратите внимание на курс «Профессия UX/UI-дизайнер» от Skillbox. На программе вы научитесь проектировать интерфейсы, проводить UX-исследования, работать в Figma, улучшать пользовательский опыт и анализировать продуктовые метрики.

Ключевые концепции закона Фиттса в UI-дизайне

Размер: крупные цели удобнее. Используйте большие элементы с чёткими границами и полностью кликабельной областью.

Расстояние: минимизируйте движения. Размещайте важные действия в зонах «прайм-пикселя» и большого пальца, сокращайте расстояние между связанными элементами.

Усилия: делайте интерактивные элементы лёгкими для нажатия и поиска.

Что такое прайм-пиксель?

Прайм-пиксель — это точка, где находится курсор пользователя в момент открытия сайта или приложения. Именно отсюда начинаются все последующие действия. На мобильных устройствах эту роль играет зона большого пальца, поэтому меню в iOS обычно располагается внизу экрана.

Полностью предсказать прайм-пиксель невозможно — начальная позиция пользователя меняется. Однако можно определить наиболее вероятное расположение на основе типичных сценариев использования.

Что такое волшебные пиксели?

Волшебные пиксели — это четыре угла экрана, а также верхний и нижний края. Курсор не может выйти за их пределы, поэтому они всегда находятся на максимальном удалении от прайм-пикселя. Именно здесь размещают стандартные элементы управления: кнопки закрытия, сворачивания, входа и полноэкранного режима.

Как изучать UI-дизайн

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

Заключительные мысли

Закон Фиттса — отличная отправная точка для создания удобных интерфейсов, но он не всегда работает идеально. Реальные данные и пользовательское тестирование дают больше информации, чем теория. Используйте принцип как рекомендацию, а не как жёсткое правило: анализируйте расположение кнопок, снижайте стоимость взаимодействия и размещайте CTA там, где их действительно удобно нажимать.

До новых встреч!