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

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

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

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

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

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

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

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

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

Подробнее: Предвкушающий дизайн – когда выбор исключается из процесса принятия решений

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

Если вы посмотрите на скриншот ниже, вы можете увидеть, что Нью-Йорк Таймс информирует пользователей о наличии 3 разных изданий: американский, Международный, а также Китайский, а также позволяет им быстро переключаться между тремя. Этот замечательный пример интеллектуальной утилиты навигации показывает пользователям менее очевидные варианты, которые они, вероятно, не найдут самостоятельно, в ненавязчивом и элегантном виде.
Найти лучшее место
Существуют типичные места для навигации по утилитам, в которых пользователи интуитивно ищут эти инструменты, к чему они привыкли на большинстве веб-сайтов. Нарушая соглашения веб-дизайна считается плохой практикой работы с пользователем, и это особенно верно для служебной навигации, которая в большинстве случаев больше связана с удобством использования, чем с творчеством.

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

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

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

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

Это разумно, потому что благодаря визуальным подсказкам, таким как корзина или значок поиска, клиенты могут мгновенно решить, какую группу они хотят использовать, и с этого момента они могут игнорировать две другие. Есть только одна группа («Ваша учетная запись», «Попробуй премьер», «Корзина» и «Список пожеланий»), у которой есть подменю, которые также логически структурированы, а различные группы подменю разделены между собой незаметными, но видимыми разделителями, которые помогают пользователям быстро найти то, что они хотят.
Создать эффективный визуальный дизайн
Визуальный дизайн эффективной служебной навигации должен следовать известной ПОЦЕЛУЙ принцип (Keep It Simple, глупый). Это рекомендуемые чтобы обеспечить значки с текстовыми метками, сделать элементы управления похожими на элементы управления и визуально подчеркнуть наиболее важные действия. Также может быть хорошей идеей различать полезность и контентную навигацию, используя немного другой дизайн.

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

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

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