Ширина меню и элементов прокрутки на экране: закон Аккота — Чжая, который задаёт их точное значение

Пейдж Лаубхаймер из Nielsen Norman Group объясняет работу закона и даёт рекомендации по качественному применению его на практике.

Ширина меню и элементов прокрутки на экране: закон Аккота — Чжая, который задаёт их точное значение

Закон навигации Аккота — Чжая открыт исследователями человеко-компьютерного взаимодействия Джонни Аккотом и Шумином Чжаем. Этот закон — следствие закона Фиттса, который связывает время движения, его точность и длину перемещения.

Уравнение Аккота — Чжая же описывает частные задачи, связанные с управлением курсором: когда пользователь передвигает указатель по траектории, ограниченной по бокам, или туннелю. С помощью уравнения можно вычислить время, необходимое для проведения курсора (или пальца) через туннель.

​Уравнение Аккота — Чжая: T — общее время движения указателя, a и b — константы, A — длина туннеля, W — ширина туннеля
​Уравнение Аккота — Чжая: T — общее время движения указателя, a и b — константы, A — длина туннеля, W — ширина туннеля

Главный вывод — навигация по длинным и узким туннелям занимает больше времени, чем по коротким и широким.

Типичные элементы с туннельным взаимодействием:

  • Выпадающие меню (особенно иерархические меню с подменю, которые появляются при наведении на них указателя).
  • Ползунки для управления параметрами.
  • Полосы прокрутки и воспроизведения видео.
  • Элементы видеоигр, требующие перетащить что-то по прямой линии.
Ползунок воспроизведения видео на YouTube — пример туннеля, который подчиняется закону Аккота — Чжая
Ползунок воспроизведения видео на YouTube — пример туннеля, который подчиняется закону Аккота — Чжая

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

Перемещение курсора по иерархическому меню в macOS
Перемещение курсора по иерархическому меню в macOS

В macOS перемещение курсора мыши по иерархическому меню — путь по прямой с поворотами на 90°. Подменю открываются в основном меню при наведении на них курсора мыши.

Второй шаг в L-образной последовательности выше (переход от пункта Find к его подменю) содержит самый узкий туннель, по которому двигать указатель нужно медленно и внимательно, чтобы не ошибиться.

Многие пользователи попытаются переместить указатель по диагонали от пункта Find
Многие пользователи попытаются переместить указатель по диагонали от пункта Find

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

В более ранних версиях macOS меню занимался директор Nielsen Norman Group Брюс Тогнаццини. Оно работало на основе векторно-треугольного буфера, позволявшего пользователям перемещать указатель по диагонали, а не по L-образной траектории. Но Apple отказалась от этого элемента взаимодействия.

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

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

Чем дольше движение, тем больше вероятность ошибиться. Кроме того, у многих пользователей (особенно пожилых людей и инвалидов) слабые руки. У любого они могут задрожать, и курсор съедет с туннеля.

Сделать удобнее

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

Делайте выпадающие меню как можно короче

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

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

Их сложно сделать хорошо из-за ограничений, создаваемых законом навигации.

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

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

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

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

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

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

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

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

Что делать с ползунками, полосами прокрутки и ползунками воспроизведения видео

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

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

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

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

Будьте щедрыми

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

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

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

#ui #меню #пользовательскийопыт

2222
12 комментариев

Некоторые пытаются переместить курсор по диагонали, но тогда они задевают мышкой пункт Spelling and Grammar.

19
Ответить

Вот и я говорю, что все эти законы – херь.

1
Ответить

Да в макоси все так неудобно)

2
Ответить

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

5
Ответить

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

2
Ответить

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

архаизм или не архаизм, а смотреть на это надо исходя из конкретной задачи.

Ответить

Как и в большинстве случаев этот "закон" не имеет никакого применения в UX без конкретного контекста. Вопросы для размышления:

- В каких случаях юзера вообще должно волновать время навигации и почему?

- Какие еще есть метрики кроме времени? Как эти метрики соотносятся?

- Как именно эти метрики собирать?

- Как понять что выполнение именно выбранных метрик приводит нас к бизнес-целям нашего конкретного UI?

В общем хочу ответы на эти вопросы, а потом можно уже и по "законам" проходиться (если желание останется).

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

1
Ответить