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

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

Первое следствие закона Фиттса: крупные цели

Самое очевидное следствие закона Фиттса таково: чем больше цель, тем легче до неё добраться.

Преимущества подхода

Крупные цели облегчают взаимодействие с интерфейсом и помогают заполнить пространство.

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

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

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

Недостатки

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

Таким образом, если увеличить маленькую кнопку на 10%, попасть по ней будет намного легче. Но если увеличить на 10% и без того крупную цель, с точки зрения юзабилити это почти ничего не даст.

Второе следствие закона Фиттса: сократите расстояние, на которое перемещается курсор

Второе следствие закона Фиттса: чем ближе цель, тем быстрее можно до неё добраться.

Преимущества подхода

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

Рассмотрим интерфейс Ubuntu Unity. Он позволяет искать различные ресурсы, используя два фильтра результатов: «Текст» и «Формат файла» Обратите внимание, как далеко друг от друга расположены обозначения фильтров: «Текст» находится в самом верху страницы, «Формат файла» — в самом низу.

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

Недостатки

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

Обратите внимание на иллюстрацию внизу: разные инструменты разделены на маленькие, но логически выстроенные группы. В данном случае инструменты для работы с таблицами размещаются слева, инструменты для вставки — справа.

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

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

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

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

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

Помните, что последствия ошибок при работе с навигацией не так страшны, как при работе с инструментами редактирования и управления доступом к контенту других людей.

Если я открою не ту страницу, я могу просто нажать «Назад». Поэтому отсутствие свободного пространства между ссылками в верхнем меню или боковой панели не может нанести серьёзного ущерба.

Ошибки, возникающие при потреблении информации, могут вызывать раздражение. Если при прослушивании аудио-файла, просмотре видео или чтении текста пользователь случайно нажмёт на кнопку «Стоп», «Сбросить», «Следующий» или «Очистить плейлист», возвращение к нужному месту потребует от него больших усилий.

Когда нужно что-то отредактировать или открыть/закрыть доступ к информации, ошибки могутнанести серьёзный вред. Случайное нажатие на кнопку «Отправить», «Печать», «Удалить», «Скачать», «Загрузить на сайт», «Уничтожить», «Закрыть», «Соединить», «Разъединить», «Принять» или «Отклонить» может иметь печальные последствия, которые будет не так-то просто исправить.

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

• Предложите простой способ отмены действия (один из вариантов — временные кнопки отмены).
• Постарайтесь оставлять между кнопками по несколько пикселей.
• Сделайте границы между элементами предельно чёткими.
• Подсветите выделенные элементы.
• Для предотвращения ошибок делите кнопки на группы.

Приведу пример работы последнего способа. Если по ошибке вместо «Отправить письмо» я нажму кнопку «Открыть письмо», результат не покажется мне ужасным. А вот кнопки «Ответить» и «Удалить» рядом размещать не стоит.

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

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

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

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

Третье следствие закона Фиттса: избегайте мышечного напряжения

Коэффициент производительности Фиттса (Fitts’s index of performance, PDF) характеризует объём информации, доступный сенсорно-моторной системе человека. Другими словами, с его помощью оценивают удобство способа ввода по количеству физических усилий, необходимых для выполнения отдельной команды.

Преимущества подхода

Достоинства простых способов ввода становятся очевидны при работе с крупными устройствами. Самый яркий пример — вертикальные сенсорные экраны, используемые в профессиональной среде для создания контента, визуализации данных или управления большими объёмами информации.

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

Недостатки

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

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

Слайдеры и другие элементы управления, рассчитанные на точные движения, обеспечивают самый безопасный, и вместе с тем самый утомительный способ ввода. Желая сохранить баланс между безопасностью и удобством, их обычно оставляют для редко используемых «опасных» команд, например, разблокировки экрана, выключения устройства, смены настроек системы, для задач администрирования или снижения громкости будильника. Для часто или регулярно используемых «опасных» команд, например, редактирования, удаления или перемещения элементов, лучше использовать кнопки, окруженные достаточным количеством свободного пространства, или двухступенчатый способ ввода. Хотя они не так безопасны, их можно считать достаточно надёжными, притом намного более простыми, способами ввода.

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

Посмотрим, например, как управляется коллекция изображений на deviantART. Для добавления элемента в «Избранное» не нужно нажимать на кнопку. Как только вы начинаете перетаскивать картинку, появляется панель, куда её можно поместить.

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

Четвёртое следствие закона Фиттса: используйте лучшие места

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

Преимущества подхода

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

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

Удобство расположения элементов по краям и углам объясняется тем, что рамка экрана ограничивает движение курсора, корректируя и уточняя движения пользователя.

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

Недостатки

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

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

Один из недостатков состоит в том, что при увеличении числа пунктов, цели становятся маленькими. Решить проблему можно, убрав лишние элементы (закон Хика). Например, если функции в меню применимы не только к выбранному элементу, но и к остальному контенту, или они доступны через другие элементы интерфейса, их можно не включать в контекстное меню («Вырезать», «Копировать» и «Вставить» закрепляются в панели инструментов, так как они всегда относятся исключительно к выделенному фрагменту, в отличие от «Отменить», «Повторить», «Новый», «Сохранить», «Печать», "Увеличить"/"Уменьшить").

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

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

Подведём итог. Вам стоит отказаться от радиального меню в пользу линейного, если:

• в меню много функций,
• вы работаете с меню нижних уровней,
• вы собираетесь группировать элементы и выстраивать их по степени важности,
• вы не располагаете большим пространством экрана.

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

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

Выводы

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

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

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

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

Дополнительные материалы

Интересные ресурсы по теме:

• Закон Фиттса: моделируем время движения в человеко-компьютерном взаимодействии
  Краткий обзор применения закона Фиттса

• Объём информации, воспринимаемой сенсорно-моторной системой человека, в управлении амплитудой движения (The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement) (PDF)
  Оригинальная статья Пола Фиттса (Paul Fitts) в журнале The Journal of Experimental Psychology, 1954.

• Визуализация закона Фиттса
  Схемы, визуализирующие основные положения закона Фиттса

• Закон Фиттса как инструмент исследования и проектирования человеко-компьютерного взаимодействия (PDF)
  Сравнительный анализ эффективности различных способов ввода на конкретных примерах.

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

• Опрос по закону Фиттса
  Небольшой опрос, позволяющий проверить знание закона Фиттса.

Оригинал: http://uxdesign.smashingmagazine.com/2012/12/04/fittss-law-and-user-experience/