От автора: вы оцениваете качество цифрового продукта и не знаете с чего начать? Чтобы уметь создавать сильный 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
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
