Закон Фиттса объясняет, сколько времени человеку нужно, чтобы нажать на элемент: чем цель крупнее и чем она ближе к точке старта, тем быстрее происходит действие. Ошибки возникают, когда важные элементы ставят в неожиданные места, усложняют путь или требуют лишних шагов.
Даже если вы никогда не слышали о мистере Фиттсе и его законе, вы всё равно сталкиваетесь с его выводами каждый день. Мы нажимаем крупные кнопки на телефоне, быстро выбираем нужный пункт в интерфейсе ноутбука, не промахиваемся по элементам навигации — всё это как раз связано с его исследованиями. Если бы не его наблюдательность, пользоваться многими привычными вещами было бы намного сложнее. Хотя кто-то пренебрегает законом Фиттсе даже сейчас и очень зря — ведь пользователи нервничают в процессе поиска и уходят.
Именно Фиттс первым сформулировал мысль, что размер элемента влияет на скорость взаимодействия: чем больше объект, тем проще по нему попасть. В работе дизайнера этот принцип используется постоянно. Вообще, кажется, что профессия дизайнера полностью творческая, но огромное количество решений строится на законах, проверенных исследованиях, чёткой логике. На курсе «UX/UI-дизайнер» мы как раз учим соединять творческое мышление со всеми базовыми принципами, законами так, чтобы проекты были удобными в использовании, запоминающимися.
В этой статье мы разберём закон Фиттса: в чём его суть, почему он до сих пор актуален и как дизайнеры применяют его в интерфейсах.
В чём суть исследований
Фиттс одним из первых сформулировал правило: скорость, с которой человек попадает по объекту, зависит от двух вещей — расстояния до него и его размера. Чем ближе элемент и чем он крупнее, тем проще на него нажать. А если объект маленький и находится далеко, взаимодействие занимает больше времени.
Этот вывод он сделал ещё в 1954 году, задолго до того, как начали появляться современные приложения, веб-сайты. В общем, старался он явно не для веб-дизайнеров, но именно им сильно помог. Фиттс изучал моторные реакции человека и ставил серию экспериментов: участникам давали задание как можно быстрее касаться разных мишеней — то больших, то маленьких, то расположенных ближе или дальше. Он фиксировал время, которое тратит человек, и сравнивал результаты.
Из экспериментов стало видно: чем дальше находилась мишень и чем она была меньше, тем больше времени занимало действие и тем выше был риск промахнуться. Когда мишень делали крупнее или передвигали ближе, скорость попадания сразу росла.
Фиттс даже вывел формулу, которая связывает скорость движения с двумя параметрами — расстоянием до цели и её шириной.
формула закона Фиттса и расшифровка параметров. wikipedia.org
Формула подтверждала закон Фиттса в дизайне: мы действительно тратим больше времени, если цель маленькая или находится слишком далеко от точки, где мы начинаем.
По сути, любая кнопка в приложении — такая же «мишень», и человек взаимодействует с ней по тем же законам, что и участники тестов Фиттса. Посмотрите на тренды UX/UI-дизайна 2025: все они по-прежнему следуют закону Фиттса. Даже самые смелые визуальные решения всё равно помнят главное правило: пользователю должно быть удобно взаимодействовать с элементами.
wildberries.ru
На маркетплейсах закон Фиттса тоже работает. Возьмём карточки товаров на Wildberries: кликнуть можно куда угодно — по фото, по названию, по цене или по кнопке. Вся область карточки кликабельна, чтобы пользователь не промахивался и не тратил лишнее время на поиск «правильного» места.
Всегда ли больше значит лучше?
Часто после прочтения закона Фиттса дизайнеры думают: а сделаю-ка я всё максимально большим, чтобы путь пользователя был простым и не запутанным. И допускают ошибку. По формуле Фиттса, если увеличить совсем маленький элемент — разница ощущается сразу. Но если взять уже крупную кнопку и сделать её ещё больше, выигрыш почти исчезает.
Поэтому бессмысленно раздувать кнопки, надеясь, что так интерфейс станет удобнее. Вы просто добьётесь того, что элементы начнут перебивать контент, ломать иерархию. Правильный подход: увеличивать то, что реально сложно нажать, а не всё подряд. Вы всегда можете быстро проверить разные размеры с помощью нейросетей. Мы подробно разбирали, как ими пользоваться в статье «Нейросети для ux/ui-дизайна».
Ещё одно желание дизайнеров — показать на странице сразу всё. Пусть клиент видит, насколько мы разносторонние.
arngren.net
Формально элементов много и каждый из них «кликабелен», но закон Фиттса тут не работает — пользователю сложно выбрать цель, потому что нет чётких границ, разметки, визуального приоритета. Когда все объекты одинаково кричат о внимании, мозг тратит больше времени на поиск точки входа, даже если сами кликабельные зоны огромные.
Как применять закон Фиттса на практике в UX/UI-дизайне
Получается, что интерфейсы нужно делать так, чтобы путь к нужному действию был как можно короче и понятнее. Для этого нужно чётко понимать всю цепочку действий посетителей. В UX это называется interaction cost — стоимость взаимодействия.
И сюда входит не только время на нажатие самой важной кнопки. Это ещё и:
- поиск нужного элемента;
- перемещение курсора или пальца;
- переключение внимания;
- прокрутка;
- ввод текста;
- ожидание загрузки.
О чём тут важно помнить?
Размер и предсказуемость
Про то, что кнопки должны быть большими, мы уже писали. Но важнее не размер как таковой, а предсказуемость зоны нажатия. Крупная кнопка, которая стоит в неожиданном месте, хуже маленькой кнопки, которая находится там, где её логично искать.
Это отлично видно и по экспериментам Фиттса. Когда мишени ставили в нестандартное место, участники тратили больше времени: сначала мозг искал цель, затем корректировал движение руки.
Если кому-то нужно математическое подтверждение, то, по сути, меняются три вещи:
- траектория движения становится длиннее, значит, эффективное расстояние (D) увеличивается;
- зона попадания «сужается», потому что человек подходит к цели под неудобным углом — уменьшается эффективная ширина (W);
- появляется поисковая пауза — растёт базовое время реакции (a).
Если элемент поставить в непривычное место, пользователь тратит время не на само нажатие, а на «ориентацию» — и по формуле время взаимодействия автоматически растёт. Всё возможно звучит немного сложно, но на деле для дизайнера это означает лишь одно: будьте предсказуемы и размещайте элементы именно там, где пользователь ожидает их увидеть.
johnprocario.com
Когда товар есть, изображение есть, а кнопки «Купить» или «Заказать» нет, теряется интерес к сайту. Возможно, кнопка где-то внизу. Возможно, появится после прокрутки, но пользователь никогда об этом не узнает, потому что не будет тратить время на поиски.
Сокращайте количество шагов — это тоже закон Фиттса
Иногда сам интерфейс создаёт лишние «движения»:
- прокрутка вниз до кнопки, которая могла бы быть выше,
- длинные списки, которые нужно скроллить,
- слишком сложные формы,
- CTA, которые не видно без прокрутки.
Каждый такой шаг повышает цену взаимодействия.
Закон Фиттса же говорит: чем короче путь — тем выше вероятность, что пользователь завершит задачу. Поэтому долой длинные опросы, в которых вы пытаетесь выяснить всё про клиента. Просто, быстро и понятно доведите его до целевого действия.
Если для школы главное — получить контакты, то вокруг формы не нужно выстраивать ничего лишнего. Интерфейс должен подталкивать ровно к одному действию: оставить свои данные. Всё второстепенное только мешает и увеличивает стоимость взаимодействия. Если цель другая — например, донести ценность курса или рассказать о программе — тогда акценты могут смещаться.
Учитывайте «точку старта»
Когда человек открывает новую страницу, его курсор (или палец) оказывается в определённой зоне. Это и есть вероятный prime pixel — точка старта.
Она может отличаться в зависимости от сценария:
- в вебе это верхняя часть экрана, ближе к навигации;
- в мобильных интерфейсах — зона большого пальца (нижняя часть экрана);
- при работе с формами — место последнего активного поля.
Понимание точки старта помогает сократить путь до следующего действия.
Если пользователь перемещается по верхнему меню, логично, что следующий кликабельный элемент должен появляться в этой же зоне. В веб-интерфейсах самые быстрые зоны — это центр экрана и область, куда сразу падает взгляд пользователя. Углы и нижние края страницы работают медленнее: до них дальше тянуться, их сложнее быстро «схватить» курсором.
В мобильных интерфейсах всё устроено иначе. Здесь скорость определяется не взглядом, а большим пальцем. Поэтому самые быстрые зоны — нижняя часть экрана, где палец уже находится в точке старта. Именно поэтому меню, кнопки подтверждения и основные CTA размещают внизу: путь до цели короче, а действие выполняется быстрее.
Если вы хотите глубже разобраться, почему такие решения работают, посмотрите материал «Основы и принципы UX/UI-дизайна» — в нём разбирается логика поведения пользователей, базовые закономерности восприятия.
Хороший интерфейс всегда прозрачен: человек не задумывается, куда нажать и где продолжить действие. Понимание законов поведения, включая закон Фиттса, помогает проектировать предсказуемые, надёжные сценарии, в которых пользователи охотнее совершают нужные действия.
Если вы работаете с заказчиками, обязательно скачайте шаблон договора на оказание услуг дизайна. С ним не нужно составлять документ с нуля, переживать, что вы что-то упустили. Вся структура уже собрана — можно просто подставить данные проекта. Такой шаблон освобождает время и внимание для главного: проектировать интерфейсы, а не разбираться с бумагами.
- Научим создавать удобные, стильные и эффективные интерфейсы для сайтов и приложений
- Гарантируем трудоустройство и опыт работы во время обучения в проекте «Крутые студии»
- Поддержим на каждом этапе: безлимитное общение на платформе с куратором, есть чат дизайнеров-единомышленников
Краткое содержание
Почему большие кнопки не всегда делают интерфейс удобнее?
Если кнопка и так крупная, увеличение почти не ускорит взаимодействие, но нарушит иерархию и перегрузит макет.
Как избежать ошибок с «непредсказуемыми» зонами?
Размещайте элементы там, где пользователь ожидает их увидеть. Не смещайте важные действия в «неестественные» участки экрана.
Почему на маркетплейсах вся карточка товара — кликабельная?
Чтобы убрать неопределённость зоны нажатия. Пользователь не ищет «где нажать» — вся область работает как цель.
Как понять, что в интерфейсе слишком много действий?
Если человеку нужно прокручивать, искать, нажимать несколько раз или переходить между экранами — путь точно можно сократить.
А если дизайн нестандартный, закон Фиттса всё равно актуален?
Да. Можно делать смелые интерфейсы, но физику движений не отменить. Чем проще добраться до нужного элемента, тем выше конверсия.
- 6 практических заданий в Figma — с нуля
- Личная обратная связь от наставника
- Понимание профессии и формата работы дизайнера на практике
- Можно пройти в удобном темпе
