Принципы UX дизайна в элементах навигации

Принципы UX дизайна в элементах навигации

От автора: вы оцениваете качество цифрового продукта и не знаете с чего начать? Чтобы уметь создавать сильный UX с помощью меню, может быть, вам нужно руководство? В этой статье мы рассмотрим три принципа UX дизайна в меню, которые я сам использую каждый день в своей работе, как консультант по UX.

К этим принципам относятся:

Информационная архитектура (ИА), которая должна совпадать с мысленной моделью (т.е. ожидаемая пользователями структура контента и функционала).

Легкость обнаружения и постоянство средств навигации по данной структуре.

Разумное количество вариантов навигации.

Можете смело брать эти советы себе на вооружение и пользоваться ими в UX разработке!

Что такое «навигация» в цифровых продуктах?

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

«Указатели» являются также важной составляющей навигации. С их помощью и при помощи дополнительных индикаторов люди могут понять, где они находятся. Пользователь может просмотреть каждую страницу сайта или приложения всего один раз, а значит, нужно учитывать цели пользователей.

Принцип 1

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

Определение структуры

Прежде чем проектировать навигацию, крайне важно определить ИА. Чтобы разбить страницы по разным категориям, можно произвести сортировку. Можно сортировать группу пользователей – связаться с нужными пользователями и попросить их сменить название группы или использовать специальный дизайн. Есть множество инструментов, с помощью которых можно создать структуру сайта или приложения.

Элементы CTA действительно оправдывают ожидания пользователей?

CTA – Call To Action – элементы сайта, призывающие к действию: яркие кнопки, изображения, ссылки. Доверие и авторитет вашего сайта зависят как от мелких деталей, так и от вещей наподобие выравнивания кнопок и ссылок, а также от того, куда эти ссылки и кнопки ведут.

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

«I’m feeling lucky» — пример неявного призыва к действию

Меню расположено в знакомом месте?

Всмотритесь в контекст того, что разрабатываете. Люди привыкли видеть элементы навигации, такие как меню в определенных местах. К примеру, в смартфонах iOS меню расположено внизу экрана, а в Android – в иконке гамбургера. На сайте pttrns.com вы сможете найти различные шаблоны меню под определенные платформы.

Принцип 2

Легкость обнаружения и постоянство средств навигации по данной структуре.

Все находится на своих местах? Ваша структура понятна и последовательна?

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

К навигации сайта могут относиться разные компоненты: логотип и бренд, изменения в навигации, изменения визуального дизайна, контекстуальные индикаторы, помощники/пошаговые инструкции, хлебные крошки, URL’ы, заголовки и даже название страницы!

На сайте The Economist местоположение определяется с помощью

Логотипа и бренда

Взаимодействия с панелью навигации

Заголовок страницы

Заголовок статьи

Контекстуальные индикаторы

Принцип 3

Разумное количество вариантов навигации (т.е. не более 5-7 пунктов за раз)

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

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

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

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

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

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

Заключение

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

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

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

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

Автор: Joel Diaz

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree