Закон Фиттса в UI/UX — как сделать удобный интерфейс?

Чтобы понять и создать интуитивный интерфейс, нужно учитывать, как люди взаимодействуют с объектами на экране. Именно об этом и рассказывает нам закон Фиттса, давай разберём, как с его помощью сделать удобный интерфейс и научимся применять закон на практике.

Кто создатель и как появился закон?

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

Эксперимент Фиттса

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

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

Закон Фиттса в знакомых интерфейсах

Давай рассмотрим, как большие компании используют закон Фиттса в своих продуктах.

Главная страница Google

Хороший пример реализации закона Фиттса — главная страница Google. Поле поиска и кнопки максимально увеличены и находятся в центре экрана, что делает их удобными для быстрого взаимодействия. Ну и, конечно, в совокупности с минимализмом и бритвой Оккама это даёт потрясающий результат.

Главная страница поисковика Google

Создание поста в Instagram

Как бы я ни недолюбливал Instagram за их кривоту и «феноменальную» работу на Android, с законом Фиттса у них всё в порядке. А именно — кнопка «+», которая позволяет создать новый пост, находится в самом доступном для пользователя месте: внизу экрана и по центру. Это позволяет пользователям быстро создавать посты, и они активнее это делают.

Кнокпа добавления публикации в Instagram

Превью Netflix

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

Большие и интерактивные превью в приложении Netflix

Как применять закон Фиттса в UX/UI дизайне?

С самим законом разобрались и поняли, что даже большие ребята, типа Google, активно ему следуют. Давай теперь рассмотрим, как нам использовать закон Фиттса в своих интерфейсах.

Увеличь размер интерактивных элементов

Кнопки, ссылки и другие элементы должны быть достаточно большими, чтобы пользователям не приходилось «прицеливаться». Например, Apple рекомендует делать сенсорные цели не менее 44×44 пикселей — в соответствии с Human Interface Guidelines, с которыми мы на курсе «Дизайн-системы» плотно работаем.

Таблица рекомендуемых размеров элементов управления от Apple

Размещай важные элементы ближе

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

Элементы управления в приложении Any Distance находяться в удобном месте

Используй края и углы экрана

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

В Windows элементы работы с окном находяться в углу экрана

Согласись, закон Фиттса — простой, но невероятно эффективный принцип проектирования интерфейсов. Его понимание и правильное применение помогают создавать удобные, приятные и по-настоящему интуитивные продукты.

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