Как улучшить навигацию и подготовиться к эре мобильного интернета?
Как улучшить навигацию и подготовиться к эре мобильного интернета?
22 июня 2016

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

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

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

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

Поиск

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

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

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

Главная страница

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

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

Иконки шаринга

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

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

Релевантные категории

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

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

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

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

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

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

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Как создать визуальные эффекты, призывающие к действию
Как создать визуальные эффекты, призывающие к действию

Как сделать ваши Call-to-Action элементы более эффективными.

27.06 0
5 UX трендов, которые вы увидите в 2016 году
5 UX трендов, которые вы увидите в 2016 году

Какие тренды только зарождаются в UX? Читайте об этом и о будущем UX в данном материале.

27.06 0
8 худших UX ошибок и как их не делать - Комментарии экспертов
8 худших UX ошибок и как их не делать - Комментарии экспертов

Специалисты в UX делятся своим взглядом на то, какие самые большие ошибки все ещё допускают в дизайне интерфейсов.

28.05 0
Как выглядит простота в UX?
Как выглядит простота в UX?

В этой статье речь пойдёт о простоте, её природе и влиянии на UX. Немного мыслей на предмет того, что определяет качественный пользовательский опыт от плохого.

28.05 0
Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.