Навигация по утилитам Как она влияет на дизайн пользовательского интерфейса

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

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

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

Как Utility Navigation влияет на UX

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

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

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

4 главных пункта меню предназначены для 4 основных персон, которые обычно посещают сайт AirBnB: людей, которые хотят стать хозяином (“Стать хозяином”), люди, которые хотят решить проблему, возникшую во время использования сервиса (“Помогите”), новые и возвращающиеся пользователи (“Подписаться” а также “Авторизоваться”). На домашней странице AirBnB, посвященной утилитам, также есть панель быстрого поиска, которая является важным инструментом на веб-сайте аренды жилья..

во-вторых, пользователям не нужны лишние утилиты, так как слишком много беспорядка отвлекает внимание и снижает фокус. Какие инструменты необходимы в нашей утилите навигации, а какие не зависят от характера нашего сайта. Например, может быть полезно включить представление «Печать» в блоге или новостном сайте, но эта же функция может отвлекать внимание на форуме или в социальной сети..

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

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

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

Если вы посмотрите на скриншот ниже, то увидите, что The New York Times информирует пользователей о наличии 3 разных выпусков: американский, Международный, а также китайский язык, а также позволяет им быстро переключаться между тремя. Этот великолепный пример интеллектуальной утилиты навигации показывает пользователям менее очевидные варианты, которые они, вероятно, не найдут самостоятельно, в ненавязчивом и элегантном виде..

Найти лучшее место

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

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

Как вы можете видеть ниже, Reuters разместил большинство своих утилит в этих двух типичных областях: в верхнем правом углу сайта и в нижней части нижнего колонтитула под навигацией на основе контента. Уникальным решением здесь является фиксированный дополнительный нижний колонтитул с двумя вспомогательными элементами, которые дизайнеры посчитали наиболее важными: “Войдите или зарегистрируйтесь” а также “Последние из моего провода”.

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

Построить логическую структуру

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

Они не только разместили служебную навигацию в верхнем правом углу, где пользователи ожидают ее найти, но и разделили ее на 3 основные группы: (1) панель поиска, (2) информация о пользователе (под панелью поиска) ) и (3) действия, которые пользователи могут выполнять на сайте.

Это разумно, потому что благодаря визуальным подсказкам, таким как корзина покупок или значок поиска, клиенты могут мгновенно решить, какую группу они хотят использовать, и с тех пор они могут игнорировать две другие. Там только одна группа (“Ваш счет”, “Попробуйте Prime”, “корзины”, а также “Список желаний”) имеет подменю, которые также логически структурированы, и различные группы подменю разделены между собой незаметными, но видимыми разделителями, которые помогают пользователям быстро найти то, что они хотят.

Создать эффективный визуальный дизайн

Визуальный дизайн эффективной служебной навигации должен следовать известному принципу KISS (Keep It Simple, Stupid). Рекомендуется снабдить значки текстовыми метками, сделать элементы управления похожими на элементы управления и визуально подчеркнуть наиболее важные действия. Также может быть хорошей идеей различать полезность и контентную навигацию, используя немного другой дизайн.

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

Оба сайта подчеркнуть наиболее важные действия пользователя с различными элементами визуального дизайна, Walmart использует желтый для кнопок «Поиск» и «Вход», в то время как Etsy выделяет синюю рамку для кнопки «Вход» и включает серый значок корзины над меню «Корзина»..

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