Закон Фиттса в UX/UI-дизайне

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

Закон Фиттса связывает время движения с расстоянием перемещения с точностью попадания в цель.

Этот принцип назван в честь американского психолога Пола Фиттса, который его сформулировал.

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

В ходе исследований была выведена математическая формула:

T — среднее время, затрачиваемое на совершение действия,

a и b — константы, которые меняются в зависимости от типа указателя (например, мышь, палец и т.д.),

D — расстояние от точки старта до центра цели,

W — ширина цели, измеренная вдоль оси движения.

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

Закон Фиттса связан с тремя переменными: размер, движение и расстояние. Формулировка закона, представленная выше, достаточна проста, но есть нюансы:

Размер элемента


Из текста закона понятно, что чем больше размер элемента и чем он ближе, тем удобнее это для пользователя. Например, если маленький элемент сделать больше в несколько раз, то нажимать на него на экране будет удобнее. Однако если большой элемент увеличить, ничего особо не изменится: взаимодействовать с ним будет также удобно, но в интерфейсе объект может занимать необоснованно много места.

В данном случае помним о соразмерности элементов дизайна и уместности определенных размеров объектов (кнопок, иконок, текста).

Ориентация на движение

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

Изначальная точка и целевой элемент

Третья переменная, с которой связан рассматриваемый закон, — расстояние между изначальной точкой и целевым элементом. Целевой элемент — это объект, на который должно быть направлено действие (кнопка, ссылка).

Изначальная точка или первичный пиксель — это положение инструмента ввода (курсор, палец) на экране при переходе на новую страницу. Именно из этой точки курсор начинает свое движение к целевому элементу.

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

Располагать важные элементы ближе к первичному пикселю

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

Оптимальный размер элементов

Формулировка закона ясна: чем больше объект, тем меньше времени потребуется, чтобы его достигнуть. Избегайте обилия мелких кликабельных элементов интерфейса, чтобы снизить риск перехода не на ту страницу и уменьшить процент ошибок. Ориентируйтесь на привычный минимальный размер. Например, гайдлайны Google и iOS определяют минимальный размер элементов дизайна:

Не забывайте про ограничения: не создавайте чересчур больших объектов. Размер элементов не должен нарушать визуальную иерархию страницы.

Иконки с текстом и СТА-кнопки

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

Кликабельные иконки и СТА-кнопки должны занимать достаточную поверхность не только для нажатия курсором, но и для тапа пальцем на смартфонах. Размещайте их как можно ближе к изначальному пикселю, чтобы уменьшить расстояние и время на достижение этих элементов.

Одна из распространенных ошибок с СТА-кнопками — сделать кликабельным только текст на элементе. Это может ухудшить пользовательский опыт, поскольку нажать на небольшую полоску текста труднее, чем на всю выделенную область кнопки.

Расположение элементов

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

Отступы и увеличенная область клика

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

Оптимизация меню

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

В линейном меню и при расположении иконки с текстом в верхней части наиболее эффективно поместить важные элементы в начале списка. При размещении текстовой метки «меню» по центру удобнее будет взаимодействие с близкими кнопками — в центре.

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

Группировка элементов, связанных одним сценарием

Элементы дизайна, с которыми пользователи будут взаимодействовать вместе или в конкретной последовательности, лучше располагать на небольшом расстоянии друг от друга, объединяя их в группу. Так расстояние и время достижения цели будет минимальным. Например, в интернет-магазинах кнопки сортировки и фильтры расположены рядом с полем поиска для удобства взаимодействия: покупатель набирает наименование товара, затем сужает круг поисков.

Кнопка «Отправить» в Gmail находится рядом с кнопкой «Прикрепить», т. к. часто файлы к письму добавляют после написания текста и перед отправкой.

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

При проектировании дизайна для телефонов размещайте целевые объекты в зоне, выделенной зеленым цветом.

Youtube. Размещение кнопки «Воспроизведение» в центре области демонстрации видео побуждает зрителей взаимодействовать с ней без усилий. Область клика увеличена: пользователь может нажать на экран воспроизведения, и от одного тапа меняется состояние (стоп, продолжить). Также кнопки «Нравится»/«Не нравится» находятся рядом с кнопкой «Поделиться», чтобы была возможность легко отправить понравившийся ролик друзьям.

Google. Строка поиска основного экрана Google соответствует закону Фиттса: размещение поискового поля в центре, расположение рядом иконок экранной клавиатуры, ввода голосом и поиска по картинке дает возможность пользователю выбрать наиболее удобный вариант. Строка поиска заметна, большая по размеру. Многим будет удобно с ней взаимодействовать.

Ozon и Wildberries. Известные маркетплейсы используют закон Фиттса для удобства покупателей: кнопка «В корзину» выделена контрастным ярким цветом, расположена в центре внизу экрана мобильного устройства, чтобы пользователь без усилий мог на нее нажать и достичь цели — купить товар.

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