Если вы впервые заходите в торговый центр, скорее всего, вы не будете знать, куда идете, и вам придется заглянуть в каталог.
Этот каталог поможет вам перемещаться по зданию. Без него или с плохо сделанным вы, вероятно, заблудитесь.
Навигация вашего сайта аналогична каталогу. Вашим пользователям это нужно, чтобы добраться из точки А в точку Б на вашем сайте.
Если его структура слишком запутана и пользователи не могут понять, куда идти, им может быть сложно найти некоторые из наиболее важных страниц вашего сайта.
Чтобы создать наиболее эффективную навигацию для конверсии и лучше направлять пользователей, куда идти, вот 5 характеристик, которые вы можете реализовать прямо сейчас..
1. Оптимизируйте контент
Цель панели навигации - предоставить пользователям четкий и краткий выбор мест, которые они могут посетить. Имея это в виду, маркировка, которую вы выбираете для своей панели навигации, не должна быть излишне длинной или перегруженной.
Сохраняйте количество элементов навигации от четырех до семи. Большее количество будет выглядеть перегруженным и уменьшит вероятность того, что пользователи попадут на нужные вам страницы.
Большая сумма также может вызвать проблемы с макетом на разных размерах области просмотра, заставляя ваших разработчиков создавать ненужные обходные пути для экранов нечетного размера.
Само содержание также должно быть упрощено до ясного и краткого. Вы не хотите смущать своих пользователей длинными и сложными ярлыками, которые они могут не понять.
MindBody’s отлично справляется с этой задачей в своей навигации, которую можно увидеть ниже.
Вместо того, чтобы говорить «Познакомьтесь с туром» или «Посмотрите наши цены», они вырезают ненужные прилагательные и используют понятные метки, чтобы пользователи точно знали, куда они идут и что они получат, прежде чем идти туда. Это также упрощает и ускоряет восприятие ярлыков, поэтому им не нужно дважды думать о том, что делать.
2. Организуйте с точки зрения иерархии
Как бы ни был хорош алфавитный порядок, использовать его не следует.
Вы также не можете размещать кнопку «Купить сейчас» первой только потому, что вы хотите, чтобы пользователи перешли именно к ней. Вам необходимо правильно организовать элементы навигации, чтобы их порядок лучше соответствовал поведению пользователя.
Традиционно лучше всего сначала ставить «домашний» элемент.
Если вы решите удалить его и вместо этого использовать логотип как способ вернуться на главную страницу, попробуйте сначала разместить элемент «О нас», а затем несколько ссылок, связанных со страницами продукта.
Любые кнопки консультации, входа в систему или регистрации располагаются в последнюю очередь, но они также должны быть наиболее привлекательными, поскольку традиционно они являются наиболее важными страницами и местом, на котором вы хотите, чтобы пользователь в конечном итоге оказался.
Github отлично справляется со своей задачей, создавая хорошо организованную навигацию с кнопками, указывающими на то, где пользователи могут зарегистрироваться или войти в систему.
Если у вас более длинная навигация, вы также можете попробовать поместить элементы, требующие действий, на гораздо меньшую панель навигации над основной панелью навигации. Это позволит вам включать их, не беспокоясь о переполнении основной навигационной панели.
3. Поместите его в очевидное место
Когда пользователи заходят на ваш сайт, они ожидают, что панель навигации будет либо горизонтально выровнена по верхнему краю окна, либо вертикально выровнена по левому или правому краю. Не должно быть ничего, что имело бы приоритет над вашей навигацией и его нужно было бы переместить куда-то еще.
Сохраняйте стандартность и единообразие местоположения на своем веб-сайте. Таким образом, пользователи точно знают, куда идти, чтобы найти то, что им нужно дальше. Это автоматически будет поддерживать низкий показатель отказов и будет способствовать правильному потоку пользователей на вашем сайте.
Большинство веб-сайтов размещают навигацию в верхней части страницы, но, возможно, вы захотите быть немного смелее со своей. Если да, взгляните на веб-сайт Sprint, который решил использовать навигацию по левому краю и значки, чтобы привлечь к нему внимание.
4. Избегайте раскрывающихся меню
Я понял. На вашем веб-сайте много страниц, и вы хотите, чтобы люди просмотрели как можно больше из них, но помещать их в огромное раскрывающееся меню - это не выход.
При создании раскрывающихся меню есть пара проблем.
Во-первых, если раскрывающийся список активируется только при наведении курсора, люди на планшетах и мобильных устройствах не смогут перемещаться по ним, если вы не создадите какой-либо резервный вариант. Также было показано, что пользователи считают раскрывающиеся меню просто раздражающими, поскольку они требуют от пользователей больше времени, чтобы подумать, куда они хотят перейти.
Конечно, если у вас сайт электронной коммерции, выпадающее меню - ваш лучший друг. Так что, если вы относитесь к группе людей, которым оно отчаянно нужно, Sony - яркий пример лучшего способа компоновки раскрывающегося меню.
Sony разбивает свои продукты на различные категории, чтобы пользователи могли сразу выполнять поиск по типу продукта, вместо того, чтобы посещать интернет-магазин и затем выбирать, какой продукт им нужен. Они даже вставляют изображения продуктов в навигацию, чтобы вы получили представление о том, куда ссылается этот пункт меню, даже не взглянув на слова под ним.
5. Сделайте его адаптивным
Теперь, когда вы знаете, как макетировать и проектировать навигацию, пришло время подумать о том, как она будет работать адаптивно.
Очевидно, ваша горизонтальная панель навигации не будет работать на планшете или мобильном телефоне. Вместо этого вам нужно сжать его. К счастью, есть несколько эффективных способов компоновки мобильного меню в зависимости от того, как работает меню вашего рабочего стола.
Большинство всех используют значок «гамбургера», который расположен в той же области, где была навигация на рабочем столе. При нажатии функциональность вашего меню может варьироваться в зависимости от того, что лучше всего подходит для вашего сайта. Если у вас одноуровневая навигация, вы можете просто создать единственное раскрывающееся меню, похожее на то, что есть у Microsoft (без многоуровневой навигации).
Если вам не нравится этот пользовательский интерфейс, вы также можете сделать полноэкранную навигацию по слайдам/появлениям, как это делает Digital Telepathy.
Если у вас многоуровневая навигация, попробуйте обратиться к одному из наших клиентов, Accelerence, у которого есть выдвижная навигация, в которой все упорядочено так же, как и на рабочем столе.
Этот метод также можно использовать для веб-сайтов с одноуровневой навигацией, если вы предпочитаете, но удобство использования этого макета является наиболее оптимальным из трех для выпадающей навигации.
Если вы не уверены, какой метод подойдет вам лучше всего, помните, что A/B-тестирование - ваш лучший друг, и с его помощью можно выяснить, какой вариант лучше всего подходит вашим пользователям.