Любой пользователь, взаимодействующий с меню, ожидает от этого опыта только одного, а именно – возможности как можно быстрее попасть в нужный раздел или на необходимую страницу. Дизайнеры, работающие над навигацией по сайту, часто стремятся создать максимально комфортный и интуитивный опыт, стараясь в тоже время внедрять в дизайн свежие и новаторские решения.
Однако между новаторством и интуитивностью существует конфликт – в пользовательском опыте есть множество моментов, связанных с устоявшимися представлениями о взаимодействии с различными навигационными элементами.
Внедряя нечто новое (пускай и эффективное), мы всегда рискуем сделать пользовательский опыт менее предсказуемым. Чтобы этого не случилось, давайте рассмотрим четыре важных момента, которыми следует руководствоваться при разработке меню.
Символы
Посещая какой-либо сайт и пытаясь разобраться с принципами работы меню, пользователи в первую очередь обращают внимание на различные символы, которые, как ожидается, должны сообщать о функциональном назначении того или иного элемента. Особенно такие визуальные подсказки важны в тех случаях, когда сайт оснащен выпадающим меню.
Треугольник
Из всех способов обозначения выпадающего меню, треугольник является одним из наиболее узнаваемых и интуитивных символов – мы встречаем его буквально повсюду и давно привыкли к тому, что он обозначает выпадающие элементы. Необходимо учитывать важную особенность значка треугольника – пользователь всегда ожидает, что этот символ указывает то направление, в котором открывается меню.
+ (Плюс)
Пожалуй, на втором месте по распространенности после значка треугольника находится символ «+». В отличие от треугольника, он не имеет настолько же однозначной трактовки, так как нередко используется для обозначения таких функции как «добавить». Тем не менее, в определенном контексте он может указывать на раскрывающееся меню.
В ряде случаев можно вполне эффективно сочетать разные символы в рамках одного интерфейса. На сайте Nike они не противоречат друг другу, а скорее дополняют и разграничивают основное и динамическое меню. Уместность использования двух символов зависит от многих факторов, однако, в случае, если на сайте присутствует функция добавления контента, обозначенная традиционным «+», то следует избегать дублирования этого символа для какой-либо другой функции.
Гамбургер
Несмотря на то, что в дизайне интерфейсов этот символ используется не настолько давно (в отличие от треугольника), он становится все более узнаваемым. Тем не менее, у некоторых пользователей теоретически могут быть трудности с его идентификацией, поэтому во многих случаях целесообразно сопровождать его соответствующей надписью «Меню».
Кроме того, «гамбургер» подразумевает, что меню будет раскрываться вертикально – этот момент также необходимо учитывать. В этом отношении треугольник или «+» являются более гибкими символами.
Последовательность в использовании символов
Важен не только выбор символов как таковых, но и их использование в контексте дизайна конкретного сайта. Различные символы, используемые вместе, должны обеспечивать последовательный и непротиворечивый опыт. Давайте разберем пример страницы, которая не обеспечивает последовательного UX в использовании символов:
На этой странице мы можем видеть одновременное использование иконки-гамбургера, треугольника и символа «+». Если иконка-гамбургер в правом верхнем углу сама по себе является стандартным и приемлемым решением, то ниже мы видим дублирование этого символа для ссылок «Показать фото» и «Показать информацию о питании». Эта непоследовательность усугубляется использованием треугольника в поле выбора страны, а также значков «+» для разделов «Напитки» и «Еда».
Также важно избегать использования треугольника или стрелки в качестве обозначения какой-либо другой функции, кроме выпадающего меню. Этот символ устойчиво ассоциируется у пользователей с раскрывающимися элементами навигации, и они ожидают предсказуемого отклика на свои действия со стороны сайта. Будьте особенно внимательны при использовании нескольких подобных символов в контексте одного сайта.
Целевые области
Целевая область представляет собой ту часть интерфейса навигации по сайту, в которой сосредоточены кликабельные ссылки на различные разделы и страницы. Здесь особенно важно обеспечить качественный и последовательный пользовательский опыт, делая ссылки крупными, читаемыми и расположенными предсказуемым образом.
Читаемость текста
Текст ссылки в целевой области должен быть хорошо различимым, заметным и легким для визуального восприятия. Его не стоит делать мелким – это совсем нерационально и приводит к низкой эффективности меню в целом. Кроме того, учитывая сегодняшние реалии и невероятную популярность различных мобильных гаджетов, не лишним будет проверка читаемости кликабельных ссылок при плохом освещении – они должны легко и быстро восприниматься в любых условиях и на любом устройстве.
Размер
Кроме эффективного во всех отношениях текста, не менее важную роль играет размер целевой области. Примечательно, что в наше время большая, яркая и заметная целевая область свидетельствует о том, что компания уделяет много внимания созданию максимально комфортного пользовательского опыта. Кликабельная область должна быть тщательно проработанной для того, чтобы пользователь без лишних усилий и раздумий кликал по интересующей его ссылке.
Однако не следует забывать, что целевая область большого размера может занимать слишком много пространства на экране, нарушая визуальный баланс. Кроме того, после увеличения целевых областей (равно как и других элементов) до определенного значения, удобство их использования перестает напрямую зависеть от размера, и дальнейшее увеличение элементов становится бессмысленным.
Последовательное расположение
Навигация по сайту — важно, чтобы навигационные элементы были расположены последовательным образом. Один из примеров не самого удачного расположения целевых областей – это вложенное меню подобного типа:
Если вам необходимо создать навигацию со множеством разделов и подразделов, то лучше обратить внимание на такие способы реализации как раскрывающиеся меню. При этом также важно помнить, что кнопка вызова и скрытия меню всегда должна находиться в одном и том же месте, чтобы у пользователей не возникало никаких проблем с выходом из меню. Кроме того, меню обязательно должно закрываться в том случае, если пользователь кликает по любой области страницы, находящейся за пределами меню.
Взаимодействие пользователя с интерфейсом меню
Взаимодействие пользователя с интерфейсом состоит из нескольких действий, которые включают в себя перемещение курсора, клики и скроллинг. Рассмотрим особенности и нюансы каждого из этих способов взаимодействия.
Курсор
Перемещение курсора и наведение его на целевые области – один из самых распространенных и часто используемых способов взаимодействия пользователя и меню. С ним, кроме всего прочего, связаны известные недостатки. К примеру, когда курсор покидает целевую область, меню закрывается. Очень часто это связано с неосторожным движением мышью. Эта проблема решается по-разному, и один из способов ее решения – установка определенной задержки, благодаря которой меню закрывается не мгновенно (сразу после того, как курсор покинул целевую область), а спустя какое-то время, когда становится понятно, что пользователь целенаправленно покинул целевую область меню.
При этом не существует какого-либо оптимального значения подобной задержки, все зависит сугубо от индивидуальной реакции конкретного пользователя, а так же от степени его усталости и/или уровня знакомства с интерфейсом данного сайта.
На некоторых сайтах проблема случайного закрытия меню при неточном наведении курсора решается с помощью создания скрытых целевых зон, которые позволяют пользователю перейти к одному из подразделов без риска случайно открыть соседний пункт меню. Такой метод используется, в частности, на сайте Amazon.
Еще один способ облегчить взаимодействие пользователя с интерфейсом посредством курсора – это создание всплывающих подсказок, которые сообщают пользователю о том, что его ждет в конкретном разделе. Тем не менее, в случае меню такой метод может ухудшить пользовательский опыт, так как он связан с довольно очевидными недостатками:
- Пользователь не знает о том, что для его удобства на сайте есть подсказки. Он видит их только после наведения курсора.
- Почти всегда всплывающие подсказки в той или иной степени закрывают соседние элементы, которые пользователь мог хотеть видеть.
- Необходимо точно подбирать время демонстрации подсказки. Как и в случае с курсором, покидающим целевую область, мы сталкиваемся с дилеммой – если подсказка быстро исчезает, то пользователь может не успеть ознакомиться с ней, а если подсказка демонстрируется слишком долго, то пользователю придется потратить массу времени на то, чтобы изучить каждый элемент меню.
- Затрудняется сравнение различных пунктов меню.
- Этот метод бессмыслен, если пользователь просматривает сайт с помощью сенсорного устройства.
- Всплывающие подсказки на сайте Mini.
Клики
Клик, пожалуй, является наиболее предпочтительным способом взаимодействия пользователя с навигационным меню. В отличие от наведения и перемещения курсора, клик как таковой обеспечивает быстрое и точное взаимодействие с минимумом ошибок, легкое переключение между разделами, а также беспроблемное управление меню в случае использования сенсорного экрана. В последнее время навигационное меню, взаимодействие с которым осуществляется с помощью кликов, стало трендом.
Скроллинг
В зависимости от контекста, скроллинг может быть довольно удобным методом просмотра меню. Как правило, он применим в тех случаях, когда меню представлено на отдельной странице сайта, как это бывает, например, в случае с сайтами, чьим основным контентом являются сериалы и разнообразные шоу:
К сожалению, недостатком подобной реализации меню является то, что пользователь вынужден просмотреть массу ненужных ему категорий в процессе поиска нужного раздела. В случае сайтов, наполненных различным мультимедийным контентом, предпочтительнее размещать меню в верхней части страницы:
Уровни
Количество уровней навигационного меню при разработке навигации по сайту и способы их размещения – это один из самых сложных вопросов в деле обеспечения последовательного и комфортного пользовательского опыта.
Общая тенденция последнего времени – сокращение уровней в навигационных меню. Во многом, это происходит из-за роста популярности мобильных устройств, на которых комфортное взаимодействие с меню возможно только при ограниченном количестве уровней. Тем не менее, ограничение количества уровней меню неизбежно приводит к тому, что раскрывающийся список с подразделами становится слишком длинным, как в случае с мобильной версии сайта Microsoft:
Однако наличие множества вложенных подразделов позволило сделать меню, ориентированные на мобильные устройства, в целом более лаконичными и компактными:
Еще один способ реализации навигационного меню для мобильных устройств – это демонстрация пользователю отдельного экрана при нажатии по определенному пункту меню, с возможностью вернуться назад к другим пунктам:
Мега-меню
Многие UX-дизайнеры и оптимизаторы решают проблему размещения множества уровней, используя концепцию так называемого мега-меню. Однако следует учитывать, что злоупотреблять возможностями мега-меню, перегружая каждый пункт сразу несколькими категориями – не стоит. Пользователь, как правило, сосредоточен на поисках вполне конкретной, одной категории, поэтому их множество негативно сказывается на UX.
В этом отношении более предпочтительно «прятать» категории в отдельные вкладки – в таком случае мега-меню становится гораздо более удобным и удачным с точки зрения UX:
Динамические фильтры
Фильтры играют важную роль на сайтах онлайн-магазинов, которые, как правило, включают в себя большое разнообразие всевозможных товаров. Фильтры помогают ориентироваться в этом разнообразии, облегчая поиск интересующего товара по заданным параметрам.
Существуют два варианта реализации блока динамических фильтров. Первый по принципу своей работы напоминает обычное вложенное меню, с присущим ему характерным недостатком, а именно – сдвигом пунктов вниз при разворачивании пункта, расположенного выше. Таким образом, пользователю приходится проматывать страницу для того, чтобы воспользоваться всеми интересующими его параметрами:
Второй вариант может показаться более предпочтительным – это выпадающее меню, которое эффективно использует пространство страницы и не вынуждает пользователя прокручивать ее. Конечно, пользователю придется открывать его всякий раз, когда он захочет изменить параметры, однако большая компактность такого способа размещения фильтров нивелирует прочие недостатки.
При таком размещении динамических фильтров следует также уделять внимание их расположению на странице. В примере выше они расположены в верхней части страницы, что приемлемо в случае, если сайт просматривается в вертикально-ориентированном положении. Если же мы имеем дело с широким экраном, то такое горизонтально размещение будет «съедать» слишком большое пространство страницы, равно как и сильно отвлекать от товаров, расположенных ниже. В таком случае предпочтительно будет вертикальное размещение в левой части страницы:
Размещение фильтров на мобильных версиях сайтов
Так как мобильные сайты обладают своей спецификой, то следует обдумать, какой из способов размещения динамических фильтров будет наиболее рациональным. В обычном случае динамические фильтры вынесены на отдельную страницу и пользователю приходится каждый раз переключаться между страницей с фильтрами и страницей со списком товаров:
Некоторые UX-дизайнеры предпочитают использовать для демонстрации фильтров поп-апы, которые позволяют пользователю оставаться на одной и той же странице:
Этот метод может быть удобным и предпочтительным в том случае, если список фильтров не слишком длинный и пользователю не нужно скроллить страницу вниз для того, чтобы воспользоваться всеми опциями.
Мега-сайты и их особенности
Навигация по сайту — в контексте обсуждения навигации было бы ошибкой не упомянуть о таком явлении, как мега-сайты. Как правило, мы сталкиваемся с ними, когда посещаем ресурсы крупных корпораций и учреждений. Такие сайты отличаются тем, что они располагают не просто разными категориями и подразделами, но фактически целыми отдельными мини-сайтами, каждый из которых посвящен какому-то одному подразделению компании или дочернему бренду.
В определенной степени, это независимые сайты, объединенные в рамках одного портала, но, тем не менее, качественный UX предполагает последовательность и цельность в навигационном отношении. В следующем примере вы можете увидеть хороший и продуманный баланс между индивидуальностью каждого из мини-сайтов и общей UX-концепцией мега-сайта:
Одним словом, при всей визуальной оригинальности, пользовательский опыт на каждом мини-сайте должен быть последовательным и соответствовать стандартам главного сайта. К сожалению, зачастую мини-сайты отличаются не только визуально, но и имеют совершенно разный UX-дизайн, функционируя по принципам, которые никак не пересекаются между собой:
Источник: rusability.ru
