Закон Фиттса гласит: “время, которое затрачивают на то, чтобы дотянуться до чего-нибудь и нажать на него, прямо пропорционально тому, насколько далеко это расположено и какого оно размера”. Другими словами, чем ближе и больше цель (ссылка), тем чаще по ней будут кликать. Это очень легко понять, не слишком сложно реализовать и, казалось бы, бессмысленно оспаривать. Однако, прежде чем начать применять закон Фиттса на каждом свободном пикселе, давайте рассмотрим несколько проблем, которые могут возникнуть у вас, как у дизайнера сайтов при подобном подходе.

Правило Фиттса №1: Создавайте большие ссылки

Вероятно, основной тезис из закона Фиттса в том, что чем больше цели, тем быстрее на них кликнут.

Преимущества

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

Общение с пользователями через интерфейс. (Пример: LibreOffice)

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

Риски

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

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

Правило Фиттса №2: минимизируем движения мышью

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

Преимущества

Если вы разместите все ссылки и кнопки, которые постоянно будут нужны пользователю, рядом друг с другом, а не по всему экрану, то увеличите количество кликов, так как количество пикселей между ссылками уменьшится, и пользователю потребуется меньше движений мышью. Рассмотрим, например, интерфейс Ubuntu Unity. Тут пользователю доступны источники и два различных фильтра для результатов поиска: текстовый и фильтр по типу файла. Однако, обратите внимание на фото ниже, как далеко друг от друга находятся эти два фильтра. В то время как текстовый фильтр находится в самой верхней части экрана, фильтр по типу файла находится в самом низу.

Фиттс не согласен: к фильтрам поиска часто обращаются последовательно, поэтому они должны быть расположены близко друг к другу.(Пример: Ubuntu Unity, Скриншот: Webupd8.org)

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

Риски

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

Еще один принцип, который нарушается при следовании закону Фиттса — принцип обеспечения чистоты и аккуратности интерфейса. Для того, чтобы не перегружать интерфейс, многие сайты используют выпадающее меню. И, хотя многие веб-дизайнеры против их использования (данная тема выходит за рамки данной статьи), они всё же признают, что раскрывающиеся списки — лучший способ разгрузить интерфейс и грамотно организовать его содержание. Выпадающее меню может помочь вам структурировать содержание и разгрузить интерфейс. (Пример: Blurb.com)

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

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

Имейте в виду, однако, что последствия ошибок являются менее серьёзными, если элементы выполняют навигационные, а не информационные функции. Если я открою неправильную ссылку, то смогу просто воспользоваться кнопкой “назад”, чтобы отменить это действие. Поэтому, если речь идёт о ссылке в заголовке или на боковой панели, то нет никакого серьёзного вреда от экономии пространства.

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

А уж если неправильная кнопка была использована во время редактирования текстового файла, например “Отправить” вместо “Печать”, или “Удалить” вместо “Загрузить”, или “Закрыть” вместо “Соединить”, то последствия могут быть гораздо более серьёзными, нежели в первых двух случаях. Такую ошибку будет достаточно сложно исправить.

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

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

Приведём пример для последнего пункта в списке: если я случайно нажму на “Прочитать письмо” вместо “Отправить письмо”, то ошибка не будет критичной, но вот ставить рядом кнопки “Отправить письмо” и “Удалить” всё же не стоит.

Ещё один метод ввода информации, нацеленный на предотвращение ошибок, называется двуступенчатым. Он также не соответствует правилу Фиттса, ведь два действия предполагают гораздо больше движений мышью, нежели одно. Основная идея в том, что одно действие можно совершить случайно (по ошибке), а вот два подряд — вряд ли. Рассмотрим функцию “Удалить”.

Первая кнопка — стереть, вторая — удалить. Хотя каждое действие само по себе может быть достаточно критичным, поставленные в связку они защищают пользователя от совершения ошибки. (Пример: Timelogger App)

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

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

Правило Фиттса №3: физические усилия пользователя должны быть минимизированы

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

Преимущества

Преимущества легкого способа ввода наиболее очевидны при работе с громоздкими устройствами. Наиболее ярким примером является ве� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров