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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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