Создание интуитивной навигации UWP-приложений

В последних нескольких публикациях мы рассмотрели концепции дизайна пользовательского интерфейса (UI), такие как типографика, визуальные подсказки и проектировочное мышление. В сегодняшней публикации, мы посмотрим на тему, которая имеет гораздо меньше общего с решением проблем проектирования пользовательского интерфейса и много большего с решением проблем проектирования пользовательского опыта (UX), речь пойдёт о навигации.
Навигация включает в себя структурирование вашего приложения таким образом, чтобы способствовать легкости и эффективности, а не только эстетике внешнего вида. В отличие от других тем, рассмотренных до сих пор, которые полагаются частично на личный вкус, а также осознание меняющейся моды, навигация и UX вцелом имеет тенденцию во многом полагаться на исследования юзабилити — удобства и простоты использования.
В этой статье мы рассмотрим три ключевых принципа, для которых как исследования, так и опыт показали, что они лежат в основе дизайна хорошей навигации:
— Последовательность — соответствие ожиданиям пользователя
— Простота — не делать более, чем вам нужно
— Чистота взаимодействия — не вставать на пути взаимодействия с пользователем
Соблюдение этих принципов в дизайне поможет вам достичь идеальной навигационной структуры — то есть сделать так, чтобы пользователь никогда не обращал на неё внимание.

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

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

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

 

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

Простота
Еще одним важным фактором в дизайне навигации является Закон Хика-Хаймана, часто цитируемый в отношении элементов навигации. Этот закон побуждает нас добавлять меньше опций в меню (смотрите рисунок 3 ниже). Чем больше есть вариантов, тем будет медленнее взаимодействие пользователей с ними, в частности, когда пользователи изучают новое приложение. Тот же закон может быть применен к медиа-контенту. Вместо того, чтобы перегружать пользователя широким выбором вариантов медиа опций, рассмотрите вопрос о предоставлении небольших вкусных элементов для пользователей, чтобы исследовать что они выберут.

Рисунок 3. Обратите внимание, слева есть несколько опций для выбора пользователем, в то время как справа их множество. Закон Хикс-Хаймана указывает на то, что меню слева будет проще пользователям для понимания и использования.

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

Рисунок 4. Область взаимодействия мобильного устройства.

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

Рисунок 5. Зона взаимодействия на планшете

Эмпирические правила
Некоторые правила помогают разработчикам инкапсулировать согласованность, простоту и чистоту взаимодействия в их собственный дизайн навигации. Большинство из них пришли из мира веб-дизайна существуют в течение почти десяти лет. Эти правила хорошо работают для UWP приложений, но как и с любыми эмпирическими правилами, используйте их в качестве отправной точки и дорабатывайте по мере необходимости.
1) Избегайте глубоких навигационных иерархий. Сколько уровней навигации лучше всего подходят для ваших пользователей? Навигации верхнего уровня и одного уровня под ним, как правило, достаточно. Если выйти за пределы трёх уровней навигации, вы нарушите принцип простоты. Что еще хуже, вы рискуете запутать вашего пользователя в глубокой иерархии так, что он будет иметь трудности в обратном перемещении по меню.
2) Избегайте слишком много навигационных параметров. От трех до шести элементов навигации на одном уровне навигации — оптимально. Если ваша навигация нуждается в большем количестве, чем это, особенно на верхнем уровне иерархии, то задумайтесь над возможностью разделения вашего приложения на несколько приложений, так как вы, возможно, пытаетесь сделать слишком много в одном месте. Слишком много элементов навигации, как правило, приводят к противоречивым и не связанным между собой задачам в вашем приложении.
3) Избегайте итерационной навигации между несколькими уровнями туда-обратно. То есть, когда связанный контент требует от пользователя перейти на уровень навигации вверх и затем снова вниз. Такая навигация нарушает принцип чистого взаимодействия, требуя ненужные клики или взаимодействие для достижения очевидной цели, например возврат к содержанию при чтении серии статей. (Исключение из этого правила являются поиск и просмотр, где такая навигация может быть единственным способом обеспечить требуемые разнообразие и глубину конечных результатов).

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

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

Рисунок 7. Вы можете решить некоторые вопросы перемещений вверх-вниз в навигации с помощью иконки (обратите внимание на жест выделенный зеленым цветом).

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

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

Для получения дополнительной информации обратитесь к разделу Основы проектирования навигации для приложений UWP и Навигация в UWP приложениях.
И не забудьте следить за другими публикациями в серии!
Начало работы с дизайном приложения
Понимание типографики и дизайна UX
Визуальные коммуникации и визуальные подсказки
Мышление проектирования: поиск вашего вдохновения
Создание эскиза вашего дизайна приложения
Использование иконографики для улучшения дизайна UX
Взаимодействие с вашими пользователями

Перевод оригинальной публикации Designing for Intuitive Navigation
Автор: Michael Crump
Перевод: Сергей Урусов

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

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