Ширина меню и элементов прокрутки на экране: закон Аккота — Чжая, который задаёт их точное значение
Пейдж Лаубхаймер из Nielsen Norman Group объясняет работу закона и даёт рекомендации по качественному применению его на практике.
Закон навигации Аккота — Чжая открыт исследователями человеко-компьютерного взаимодействия Джонни Аккотом и Шумином Чжаем. Этот закон — следствие закона Фиттса, который связывает время движения, его точность и длину перемещения.
Уравнение Аккота — Чжая же описывает частные задачи, связанные с управлением курсором: когда пользователь передвигает указатель по траектории, ограниченной по бокам, или туннелю. С помощью уравнения можно вычислить время, необходимое для проведения курсора (или пальца) через туннель.
Главный вывод — навигация по длинным и узким туннелям занимает больше времени, чем по коротким и широким.
Типичные элементы с туннельным взаимодействием:
- Выпадающие меню (особенно иерархические меню с подменю, которые появляются при наведении на них указателя).
- Ползунки для управления параметрами.
- Полосы прокрутки и воспроизведения видео.
- Элементы видеоигр, требующие перетащить что-то по прямой линии.
В большинстве случаев перемещение указателя за границы туннеля прерывает действие пользователя: если курсор выходит за пределы иерархического выпадающего меню, оно исчезает (хотя курсор мог сместиться случайно) или компьютер перестаёт обращать внимание на клики. Поэтому важна ширина туннеля.
В macOS перемещение курсора мыши по иерархическому меню — путь по прямой с поворотами на 90°. Подменю открываются в основном меню при наведении на них курсора мыши.
Второй шаг в L-образной последовательности выше (переход от пункта Find к его подменю) содержит самый узкий туннель, по которому двигать указатель нужно медленно и внимательно, чтобы не ошибиться.
Некоторые пытаются переместить курсор по диагонали, но тогда они задевают мышкой пункт Spelling and Grammar. Нужное подменю исчезнет, и вместо этого откроется Spelling and Grammar.
В более ранних версиях macOS меню занимался директор Nielsen Norman Group Брюс Тогнаццини. Оно работало на основе векторно-треугольного буфера, позволявшего пользователям перемещать указатель по диагонали, а не по L-образной траектории. Но Apple отказалась от этого элемента взаимодействия.
Трудности, которые пользователи испытывают при перемещении курсора по прямой, связаны с физиологией: локоть и запястье, обеспечивающие движение руки, описывают дугу, а не линию.
Попробуйте сами: вытяните руку прямо перед собой и двигайте ей слева направо. Даже если вы пытаетесь двигать её по прямой, рука всегда будет двигаться немного по дуге. Передвигать курсор по длинной прямой линии — физически трудно.
Чем дольше движение, тем больше вероятность ошибиться. Кроме того, у многих пользователей (особенно пожилых людей и инвалидов) слабые руки. У любого они могут задрожать, и курсор съедет с туннеля.
Сделать удобнее
Меню наиболее подвержены влиянию закона управления. Несколько рекомендаций по их проектированию.
Делайте выпадающие меню как можно короче
Если в меню немного пунктов, пользователь быстрее и легче пройдёт по узкому туннелю к нужному варианту, а также легче отыщет его глазами среди остальных.
Избегайте иерархических меню, где больше двух подуровней
Их сложно сделать хорошо из-за ограничений, создаваемых законом навигации.
При создании двух туннелей иерархического меню: вертикального, ведущего к пункту главного меню, и горизонтального, ведущего к подкатегории, — нужно идти на компромисс:
- Вертикальный туннель сделать коротким, но это значит, что каждый из пунктов меню будет узким. Следовательно, будут узкими горизонтальные туннели.
- Вертикальный туннель также должен быть широким, но это приведёт к более длинным горизонтальным туннелям.
На сайте Costco дизайнерский компромисс достигнут за счёт изменения размеров вертикального (слева) и горизонтального (справа) туннелей. Широкое меню делает прохождение вертикального туннеля проще, особенно если у меню много пунктов.
Если же сделать меню широким, длина горизонтального туннеля увеличится и вероятность выбрать неверное подменю будет выше.
Обычно меню не настроены под закон управления: дизайнеры просто делают их широкими ровно настолько, чтобы уместить самое длинное название пункта меню.
Когда без иерархического меню не обойтись, установите небольшую задержку между наведением мыши на пункт меню и открытием подменю.
Есть и другой вариант: используйте векторно-треугольную систему, чтобы пользователь мог перемещать указатель по диагонали. Также включите как можно больше отступов над и под каждым пунктом меню, чтобы увеличить ширину туннеля для движения по горизонтали.
Для навигационных меню подумайте о мегаменю в качестве альтернативы выпадающим. Поскольку мегаменю позволяют свободно перемещаться в широком 2D-пространстве, закон управления на них не распространяется (хотя закон Фиттса всё еще действует, поэтому убедитесь, что элементы меню достаточно большие).
Что делать с ползунками, полосами прокрутки и ползунками воспроизведения видео
При дизайне этих элементов помните: пользователям трудно точно управлять ими. Дополните эти элементы интерфейса вторичными блоками управления, с помощью которых первыми можно управлять точнее.
Ползунок для регулировки параметров можно задействовать как элемент приблизительного управления (чтобы переместиться в приблизительно желаемую область), а для более точного — оформить поле числового ввода с кнопками для увеличения или уменьшения чисел.
Разрешите пользователям щёлкать на любое место полоски, чтобы переместить ползунок, а не требуйте нажимать и перетаскивать его. Тогда пользователь сможет свободно перемещаться в 2D-пространстве без необходимости проводить указателем через туннель.
Для сенсорных экранов: убедитесь, что кнопка на ползунке не меньше сантиметра по сторонам и палец пользователя не заслоняет ползунок или любые надписи рядом с ним.
Будьте щедрыми
Добавьте в туннель внутренние отступы, сделав его действительную ширину больше той, которая визуально представлена на экране. Отступы позволят пользователю двигать указателем в стороны на какое-то расстояние и при этом не выйти за пределы туннеля из-за его неясных визуальных границ.
Согласно закону Аккота — Чжая, по узким и длинным туннелям перемещаться труднее, чем по коротким и широким. Выпадающие, иерархические меню, ползунки и другие элементы интерфейса, по которым нужно водить указателем, должны быть разработаны так, чтобы туннели были максимально широкими и короткими.
Такие элементы управления трудно использовать для выполнения задач, требующих точности. Рассмотрите альтернативные варианты вроде мегаменю вместо выпадающих или вторичные элементы управления для ползунков.