15 мая 2015, 10:36

Когда вы не должны использовать закон Фиттса

Как звучит закон Фиттса? Чем больше и ближе цель, тем быстрее мы кликнем по ней. Это легко понять, несложно реализовать и, кажется, этому не имеет смысла противоречить.

Однако прежде чем вы начнете применять закон Фиттса к каждому пикселю на экране, учтите несколько проблем, которые могут возникнуть!

Правило 1: Создавайте цели больших размеров

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

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

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

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

На левой кнопке несколько пикселей тратится впустую. А правая, используя каждый пиксель, имеющийся в распоряжении, обеспечивает более быстрое нажатие. (Слева: Firefox, справа: Apple)

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

Абсолютный и относительный размер элементов расставляет акценты в интерфейсе (пример: LibreOffice)

Несмотря на то, что существует гораздо больше аспектов, которые следует учесть при создании CTA-кнопки, закон Фиттса является наиболее значимым.

Возможные проблемы:

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

Используйте пиксели грамотно: юзабилити и размер цели имеют нелинейное отношение

Правило 2: Сведите к минимуму передвижение курсора

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

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

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

Для примера можно рассмотреть интерфейс Ubuntu Unity. Он позволяет вам использовать два фильтра контента: текстовый и по типу файла. Однако заметьте, насколько далеко друг от друга они находятся. Текстовый фильтр находится на самом верху экрана, а фильтр по типу файла — в самом низу.

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

Возможные проблемы:

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

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

Сортировка элементов интерфейса в смысловые группы обеспечивает вашему интерфейсу понятную и последовательную структуру. (Пример: Numbers)

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

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

Выпадающие меню помогут структурировать содержание и разгрузить интерфейс. (Пример: Blurb.com)

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

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

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

Позиция элементов интерфейса может как вызвать, так и предотвратить ошибки. (Пример: Codebeamer.com)

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

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

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

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

Чтобы минимизировать ошибки необходимо принимать следующие меры предосторожности:

  • Предлагать простой способ отмены выполненного действия
  • Оставлять пространство между кнопками
  • Подсвечивать элементы при наведении или выделении
  • Не группировать кнопки с абсолютно разными функциями

На последний пункт списка можно привести такой пример: если вы нажмете кнопку «Все письма» вместо «Написать письмо», то не случится ничего страшного, как если бы рядом были расположены кнопки «Ответить» и «Удалить».

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

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

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

Правило 3. Сведите к минимуму мышечное напряжение

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

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

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

Закон Фиттса может облегчить и продлить взаимодействие с вертикальными сенсорными экранами. (Пример: Perceptive Pixel)

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

Возможные проблемы:

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

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

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

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

Вторая причина, по которой здесь можно пренебречь законом Фиттса, — возможность использовать пространство более эффективно.

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

Перетаскивание элементов обеспечивает функциональность без необходимости в видимых элементах. (Пример: deviantART)

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

Правило 4: Используйте «магические» пиксели

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

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

Контекстное меню появляется на том самом пикселе, по которому вы кликнули. То есть путь до целевого элемента всегда равен нулю. Есть два вида контекстных меню: линейные и круговые (или радиальные).

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

Исходя из закона Фиттса, радиальные меню предпочтительнее, чем линейные. (Слева: OneNote 2013, справа: Firefox)

Преимущество размещения элементов на границах экрана в том, что курсор автоматически останавливается на них.

Углы и края экрана имеют наибольшую скорость доступа. (Схемы: Particletree)

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

Возможные проблемы:

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

На самом деле, несмотря на лучшее соответствие закону Фиттса, радиальное меню имеет ряд недостатков.

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

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

Группировка пунктов гораздо проще в линейном меню. (Пример: Word 2013)

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

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

  • Необходимо предоставить много вариантов
  • Будут использованы меню второго уровня
  • Важна группировка и ранжирование пунктов меню
  • Пространство на экране имеет очень важную роль

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

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

Выводы

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

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

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

Первое, что вы должны сделать, — это учесть антропологию пользователей. И только после этого по максимуму использовать формулы, такие как закон Фиттса. Это действительно улучшит пользовательский опыт.

Оригинал материала: When You Shouldn’t Use Fitts’s Law To Measure User Experience

Поделиться
Запинить