Иногда авантюрный дизайн может принести больше вреда, чем пользы. И чаще всего от разного рода экспериментов страдает навигация нового веб-ресурса. Чтобы улучшить взаимодействие с пользователем при навигации по веб-сайтам, воспользуйтесь нашими советами.
Почему важна веб-навигация?
Это правда, что меню может быть представлено по-разному. Регулярно анализируйте поведение посетителей на сайте. Если вы понимаете, что пользователи им не пользуются или у них плохой UX, возможно, стоит изменить внешний вид меню.
Отчет KoMarketing о веб-юзабилити показал, что около половины опрошенных в исследовании используют навигационное меню при изучении нового веб-ресурса. При этом 37% опрошенных заявили, что неудобная навигация по сайту является достаточной причиной для того, чтобы покинуть сайт и никогда больше на него не возвращаться.
Это не означает, что вы не можете попробовать новые методы, такие как выравнивание по левому краю или полностраничные меню, или те, которые появляются при прокрутке. Это просто означает, что вы должны организовать все таким образом, чтобы сделать процесс работы с ресурсом максимально удобным для посетителей, повысить качество их взаимодействия.
Помните, что пользовательский опыт должен стоять на первом месте в списке ваших приоритетов дизайна.
5 основных советов по улучшению UX
Дизайн навигации кажется простым, особенно если вы следуете основным правилам навигации, но вы никогда не сможете быть уверены, что будет лучше для вашей аудитории, пока не попробуете другие существующие варианты. Все эти альтернативы довольно легко проверить с помощью сплит-тестов.
Однако, прежде чем приступить к разработке собственного эксперимента, взгляните на экспертные улучшения UX. Они могут дать вам лучшее представление о том, какие гипотезы нужно проверить в первую очередь в ваших собственных тестах. Вот они.
1. Кристаллизовать структуру меню
Сам дизайн меню может быть слишком сложным для понимания, а структура может сбивать с толку. После определения целей, почему посетители должны использовать меню, определитесь с обновлениями UX в дизайне и структуре. Протестируйте его, а затем повторите, если это необходимо, то есть отказ от лишних или бесполезных элементов.
2. Продумайте заголовки
Названия меню должны быть лаконичными, но в то же время емкими. Это не то место, где можно дать волю своему воображению. Когда вы придумаете названия для каждого раздела меню, попробуйте ответить на такие вопросы, как:
- Какой контент должен отображаться в меню?
- Как она должна быть структурирована?
- Какие страницы должны быть приоритетными?
Как правило, страница, на которой вы запускаете меню навигации, должна быть хорошо видна и располагаться наиболее удобным способом, чтобы протянуть руку, щелкнуть и открыть. Заголовки меню должны быть хорошо продуманы, чтобы привлечь достаточно трафика и конверсий. Например, небольшое изменение с «Зачем использовать нас» на «Как это работает» может говорить о многом.
3. Помните о логике навигации
Для улучшения UX важна и логика меню. Отсутствие логики и простоты может вынудить разработчиков кардинально изменить не только меню, но и заголовки, так что придется начинать сначала. Это может упростить процесс поиска для посетителей, когда все будет готово.
Для создания улучшенной и более интуитивной мобильной системы навигации по сайту следует провести A/B-тестирование.
4. Осторожнее со скрытыми меню
Когда спорят о преимуществах скрытых меню по сравнению с видимыми, на самом деле речь идет о том, следует ли скрывать навигацию за значком (например, меню гамбургера) или нет.
Хотя скрытые меню действительно необходимы на мобильных сайтах, вопрос о том, следует ли использовать эти минималистичные навигационные решения на десктопных ресурсах, все еще остается открытым.
Nielsen Norman Group провела эксперимент, пытаясь выяснить, что именно произойдет, если использовать скрытое меню на десктопных и мобильных версиях сайтов. Вот их выводы:
Настольная версия:
- Посетители используют скрытые меню в 27% экспериментов.
- Видимое меню используется в 48% случаев.
- На сайтах со скрытым меню людям приходится тратить больше времени на то, чтобы понять, где искать и какую информацию; в частности, они на 39% медленнее, чем на сайтах с видимыми меню.
Мобильная версия:
- Пользователи нажимают на скрытые меню в 57% экспериментов.
- Когда меню частично видно (использование полностью видимого меню нецелесообразно в мобильных версиях), оно используется в 86% случаев.
- Скрытые меню замедляют работу пользователей на 15% (по сравнению с теми, кто работает на сайте с видимыми меню).
Кроме того, исследователи также обнаружили, что скрытые меню труднее обнаружить (что вполне очевидно). На сайтах без четких указателей вверху посетители тратили больше времени на поиск нужной им информации. Скрытые меню увеличивают сложность на 21% и снижают производительность задач на 20%. Так что имейте это в виду, придумывая навигационные решения.
5. Дважды подумайте о мобильной версии
Когда дело доходит до выяснения того, как создать скрытое меню для мобильного сайта, недостаточно полагаться на традиционный значок гамбургера. В этом случае вам может понадобиться сделать несколько тестов. Например, чтобы проверить, если
- слово «Меню», расположенное рядом со значком, никак не влияет на количество конверсий.
- слово «Меню» вместо значка.
- значок гамбургера и слово «Меню» размещены вместе и обведены.
- слово «Меню», обведенное чертой и т. д.
Чем больше у вас вариантов дизайна, тем больше тестов нужно провести, чтобы определить, какой элемент навигации привлекает больше трафика или больше конвертирует в мобильной версии.
Дополнительные улучшения UX для дизайна как у настоящего профессионала
При разработке красивого и функционального меню навигации также помните о следующих рекомендациях.
- Логотип компании всегда должен вести на главную страницу.
Пункт «Дом» перегружает меню. Пользователи давно узнали, что они могут перейти на главную страницу сайта, нажав на логотип компании.
Согласно исследованию KoMarketing, 36% людей склонны использовать логотип как способ вернуться к началу.
- Применить предварительный загрузчик
Веб-сайты дизайнеров всегда содержат портфолио с большим количеством фотографий, рисунков или другого контента. Некоторым из них может потребоваться некоторое время для загрузки. Во время загрузки экран посетителя будет пуст.
Чтобы пользователь не подумал, что сайт студии состоит из пустых страниц и ушел, нужно поставить индикатор загрузки — прелоадер . Это небольшая картинка в формате gif, которая без проблем загрузится на компьютер с самым медленным интернет-соединением.
Очень знакомы индикаторы с крутящимся колесом или цифрой, отражающей, сколько процентов загружено.
- Будь проще.
Чем больше страниц вы пытаетесь уместить в одно веб-пространство, тем больше вероятность того, что вы просто запутаете своих посетителей плохим UX. Упростите макет меню и постарайтесь использовать как можно меньше пунктов меню (5–7).
- Организуйте свое меню в соответствии с приоритетом.
Эффект «Последовательное расположение» означает, что страницы, расположенные ближе к началу или концу списка, автоматически будут доминировать в сознании пользователей.
- Настройте размеры меню для всех устройств.
Меню должно быть максимально большим для любого размера экрана: текст будет легче читать, а кнопки нажимать.
- Используйте цвета для улучшения UX
Используйте цвета или любой другой эффект наведения, чтобы через меню можно было сообщить посетителям, в какой области сайта они находятся в данный момент, и т. д.
- Применение липких меню
Часто лучше сделать меню навигации липким, то есть видимым на экране даже при прокрутке, чтобы оно всегда было в фокусе. Это относится к любому стилю навигации: мобильному или настольному, видимому и скрытому, горизонтальному или вертикальному.
- Другой
Если вам нужно применить креативную опцию навигации при входе на ваш сайт, не стесняйтесь делать это. Однако разместите главное меню там, где его ожидают пользователи.
Приступая к разработке меню для мобильной версии сайта, не забудьте сделать акцент на менее заметных элементах. Бордюры — лучший способ сделать это. Если вам нужны хорошие кейсы или примеры лучших практик из портфолио , мы здесь, чтобы помочь:
Заключение
Если вам нужны улучшения UX-навигации на вашем веб-сайте, необходимо проверить множество факторов. Вы можете начать с основ, но обязательно проверьте цветовую схему, расположение меню, логику, названия категорий и многое другое.
Сразу подумайте об элементах навигации. Вам нужно сделать все возможное, чтобы гостям было удобно пользоваться вашим порталом.
Проанализируйте с точки зрения нового посетителя, насколько удобно пользоваться меню. Возможно, сайт нуждается в доработке. А если вам нужен совет эксперта о том, как улучшить взаимодействие с пользователем или внести эффективные изменения в ваш продукт /услугу, наймите нас .