Статья удалена

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

Вольный перевод этой статьи.

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

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

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

Навигационные шаблоны включают такие типы: top-top-top, top-left-left, top-top-left, top-left-top, left-left-left, left-top-top, left-left-top, and left-top-left. Уровни (дальше в тексте — уровни состоят из позиций [англ. items]) помечены по приоритету и иерархии (т.е. первый [первостепенный] — 1, второй [второстепенный] — 2, третий [третьестепенный] — 3). Критерии — время навигации, нерешительность пользователя, движение курсором, ошибки выбора и предпочтения пользователей.

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

Также оказалось, что навигация быстрее, когда первый уровень отделён от второго и третьего.

В общем, left-top-top и top-left-left были самыми быстрыми, а top-top-top и top-top-left — самыми медленными.

Нерешительность — когда пользователь не решается сдвинуть курсор от одного уровня меню к другому. У left-top-top был наименьший показатель нерешительности, а у top-left-left — наибольший.

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

Движение курсором — частота движений курсором к не той плоскости (в тексте под плоскостями подразумевается левое или верхнее положение меню).

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

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

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

Шаблоны Left-left-left и top-top-top имели наименьшее количество движений курсором, в то время как top-top-left и top-left-top — наибольшее. Этот эффект можно легко объяснить: когда все уровни в одной плоскости, то пользователю сложнее ошибиться, передвинув курсор не туда.

Ошибка выбора — количество избыточно-лишних кликов.

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

Значительное количество ошибок выбора происходили, когда первый и второй уровни находились сверху. Top-top-top и top-top-left — наихудшие варианты. Меньше ошибок выбора было, когда второй и третий уровни были не в плоскости первой.

Left-top-left и left-left-left — наилучшие.

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

Left-top-top и left-left-left были наиболее предпочтительные. Top-left-top и left-top-left — наименее предпочтительные, так как пользователям не нравится скакать туда-обратно между разными плоскостями.

Общая оценка шаблонам была дана на основе их эффективности по всем критериям. Наилучшей оказалась left-top-top, после нее — left-left-left. Наихудшие — top-top-left и top-left-top. Лучшие были быстрее худших примерно на 17 секунд.

Left-left-left медленнее left-top-top, так как когда все меню слева, приходится больше скроллить через списки позиций. И когда ты раскрываешь уровни, то тебе приходится листать ещё больше, при этом, ты теряешь видимость первостепенных позиций на экране. Как бы то ни было, преимущество left-left-left заключается в том, что пользователь может получать больше контента на экране. Им приходится тратить меньше времени на навигацию в контенте (при этом больше затрачивая на навигацию в меню).

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

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

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

Есть один способ для улучшения просмотра контента для шаблона left-top-top, при этом продолжая пожинать плоды замечательного решения по уменьшению скроллинга меню. Вы можете временно скрывать верхнюю панель навигации, когда пользователь скроллит контент. Таким образом он получит полное окно для его просмотра. Когда он проскроллит обратно (или нажмет на кнопку возвращения наверх), панель снова появится. Смысл в том, что когда пользователь скроллит, просматривая контент, он не пользуется навигационной панелью сверху.

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

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

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

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

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

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

Этот вывод имеет смысл: второй и третий уровни — оба дочерние относительно первого (это их в какой-то степени связывает). Располагая их в одной плоскости, навигация по ним становится интуитивнее и проще.

#ui #ux #дизайн #лонг