Агентство комплексного интернет-маркетинга

Меню сайта

Актуальная информация об интернет-маркетинге и создании сайтов от специалистов Marketing Up
Здесь вы найдете подробные кейсы наших проектов, аналитику, результаты свежих исследований, разбор интересных фишек, приемов и тонкостей создания сайтов и т.д. - все, что важно для построения успешного бизнеса в Интернет.

Удобное меню на сайте — наши 9 принципов

Автор: Алексей Харитонов05.12.2020

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

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

1. Интуитивная понятность

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

Посмотрите, именно так это реализовано на разработанном нами сайте для элитного ресторана европейской кухни:

2. Хлебные крошки «в помощь»

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

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

3. Сообразность задачам SEO

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

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

Тут многое зависит от подхода веб-разработчика. В нашем агентстве семантическое проектирование используется повсеместно.

4. Достаточно крупный размер

Меню должно молниеносно считываться. Оно не должно быть слишком мелким, не должно сливаться с фоном. В меню следует использовать хорошо читаемые шрифты. Чего точно нельзя делать — так это уменьшать шрифт в пунктах меню, пытаясь уместить как можно больше пунктов. Для этого существует выпадающее меню, которые мы обсудим позже.

5. Статичность

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

6. Выпадающее меню для крупных проектов

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

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

Все структурированно и удобно. Кликнув, например, по лосьонам для волос, потребитель оказывается на странице с товарами из этой группы. Таким образом путь с главной страницы до конкретного лосьона займет всего 3 клика.

7. Выделенное окно поиска «по соседству»

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

Так мы и поступили при создании сайта для компании Labomet:

8. Логически оправданный порядок элементов

Есть некие психологические особенности восприятия информации. Мы наиболее восприимчивы к тому, что находится в начале и в конце информационного ряда. Поэтому следует обдумать логичность той или иной последовательности пунктов меню, особенно если их много. Тут также следует отметить: к окончательному, наиболее оправданному варианту вы можете прийти после тестирования. Например, делая редизайн для сайта одной медицинской компании, мы внесли изменения в меню и убрали поиск, которым никто не пользовался. Важно понимать, меню и поиск занимают такое «дорогое» место на сайте, что относиться к ним нужно как к золоту.

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

То есть при создании меню для сайта мы не просто озаглавливаем разделы сайта, придавая ему структуру. Прежде всего мы управляем вниманием пользователя.

9. Внимательное отношение к дизайну меню

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

При оформлении меню могут использоваться различные эффекты, такие как:

  • скошенное меню;
  • слайд-эффект;
  • CSS-эффекты при прокручивании и наведении и т. д

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

С точки зрения восприятия значимую роль играет цветовое оформление меню. Наши дизайнеры всегда стремятся достичь гармонии между красотой и простотой восприятия меню. Учитываются выявленные в исследованиях закономерности того, на каком фоне лучше воспринимается текст. Ниже мы приведем соответствующую таблицу:

1.  цветовая схема меню сайта, разработанного нами для производителя компьютеров;

2.  цветовая гамма меню веб-ресурса, созданного Marketing UP интернет-магазина мужской косметики.

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

Меню — начало цепочки взаимодействия

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

Когда при разработке сайта дилетантами используются купленные задешево или украденные шаблоны, меню часто создается хаотично. Скажем, были в изначальном английском варианте шаблона пункты Home, About. Их попросту дословно переводят. Подход поверхностный и неэффективный. Вполне возможно, что ваш индивидуальный случай требует выноса в меню каких-то особых пунктов. Вспомним приведенные в этой статье примеры. Для интернет-магазина косметики для мужчин оказалось логичным структурироваться по уходу за определенными частями тела (пункты «Уход за телом», «Уход за лицом»), а для производственной компании потребовалось разделение услуг, продукции и обучения.

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

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

13310