Основы дизайна меню веб-сайта

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

Чтобы получить максимальную отдачу от этого, при создании нового меню навигации по сайту не забывайте про SEO! Правильно сделанное меню навигации веб-сайта может улучшить ваше SEO и упростить обеспечение ТОП10 Google и Яндекс.

Информационная архитектура – абсолютные основы

С самого начала необходимо дать краткое объяснение информационной архитектуры. Однако в контексте дизайна веб-сайтов это объясняется по-разному концепция, определяемая как метод разработки веб-сайтов таким образом, чтобы контент был структурирован в удобной для пользователя форме, чтобы каждый посетитель мог быстро найти то, что ему нужно. Информационная архитектура сайта включает:

• четкая организация контента;
• правильное наименование (метки);
• четкая навигация;
• удобная поисковая система и последнее, но не менее важное – хорошо продуманное меню веб-сайта.

IA могущественен. Если информационная архитектура работает хорошо, сайт конвертируется – просто. IA не только дает реакцию поведения пользователя, но и позволяет вам ее создавать. По сути, именно поэтому создание веб-сайтов на основе удобства использования и дизайна является правильным с точки зрения бизнеса. Слова Стива Джобса из Apple: «Люди не знают, чего они хотят, пока вы им это не покажете».

Google также рассматривает информационную архитектуру как фактор ранжирования. Штаб-квартира поисковика действительно подтвердила, что часть востребованного «торта» ТОП-10 достается веб-сайтам, наполненным уникальным качественным контентом, который хорошо организован и обслуживается именно так, как нравится пользователям. Это еще один пример влияния UX на SEO.

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

Контрольный список дизайна меню веб-сайта

При запуске процесса разработки меню веб-сайта обязательно соблюдайте следующие пункты:

Прежде всего: проясните цель вашего сайта. Что вам нужно – огромный интернет-магазин, похожий на Amazon, или, может быть, онлайн-визитка с несколькими страницами? Выбор основной цели определяет в основном весь остальной процесс проектирования навигации по сайту. Возьмите личный блог – главное меню будет относительно простым, со ссылкой на страницу «Обо мне», «Контактная информация» и т.д. Более того, если вам нужно боковое меню (отображающее ваши последние или самые популярные записи), оно может быть, например, календарь или список, в котором записи упорядочены по месяцам, но не забывайте об инструментах организации, таких как теги или категории. Однако создание навигации для крупной электронной коммерции немного сложнее. Для сайта этого типа хорошая навигация должна включать разбивку по всем основным категориям, за которыми следуют подкатегории и т.д.;

Ясность важна – важно, как быстро клиент находит то, что ему нужно. Во-вторых: установите структуру меню страницы. Правильно спроектированное древовидное представление (позволяющее легко и интуитивно переходить между категориями, а также быстро находить отдельные элементы) имеет решающее значение для успеха всего веб-сайта. В-третьих: подумайте о своем наименовании / маркировке / тегировании. Преимущество простоты – как правило, лучше иметь вкладку «Блог», которая четко сообщает всем, что она связана с бизнес-блогом, чем пытаться придумать «креативные» названия, например «вдохновение», «идеи» или «секрет производства». В-четвертых: помните о пользователе. Всегда. Для успеха вашего сайта весь дизайн должен быть ориентирован на пользователя – ясность и интуитивность являются наиболее важными.

Основные типы меню сайта – плюсы и минусы

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

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

Такое решение, хотя и встречается довольно часто, имеет как достоинства, так и недостатки. Ясность – определенно положительный момент: так это то, что такое меню отлично видно сразу после входа на сайт. Кроме того, оно не занимает слишком много места, выделенного для контента. Оно тоже выглядит довольно естественно. Что касается минусов: это требует точного планирования до запуска сайта из-за ограниченного количества слотов – сложно расширить его новыми кнопками, особенно когда срабатывают разные устройства отображения. Обычно слотов около 6-8. Кроме того, любой текст ссылки в таком меню должен быть коротким – желательно из одного слова. Горизонтальные меню могут использоваться либо как единственный инструмент навигации, либо в сочетании, например, с боковым меню (т.е. для подкатегорий).

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

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

3. Боковое меню – список, обычно в котором одна категория располагается ниже другой. Иногда список подкатегорий расширяется в сторону (не идеальное решение, кстати, требует почти идеальной точности курсора, чтобы щелкнуть правильную ссылку, особенно с многоуровневыми меню). Боковые меню часто встречаются, особенно в электронной коммерции с широким ассортиментом продукции. Оно может поддерживать верхнее меню или быть отдельным элементом. Обычно оно располагается с левой стороны (поскольку люди в большинстве стран мира читают слева направо). Если вы не хотите, чтобы пользователь сначала прочитал контент, а только потом посмотрел на меню, то выровняйте его по правому краю.

Как видите, дизайн, ориентированный на пользователя, должен учитывать культурные особенности: всегда узнавайте своего целевого пользователя – в то время как большинство языков являются синистродекстральными – читайте слева направо, другие – декстрозинистральными – наоборот. Даже движение глаз при сканировании веб-сайта является культурно относительным – для некоторых пользователей сначала важен внешний вид, а лишь позже они переходят к выбору категорий – здесь факторами являются привычки, потребительское отношение и т. д.).

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

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

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

4. Гамбургерное меню – иконка для разворачивания, по умолчанию скрытое меню. Используется в основном в мобильных приложениях, веб-сайтах и порталах: прославилось в 2010 году Facebook, который теперь отказался от этого решения.

Однако сама икона восходит к 80-м годам и является разработкой Норма Кокса (соучредителя Cox & Hall, ведущей дизайнерской компании) для Xerox.

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

Заключительные слова

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

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