AFINA agency
идеальное навигационное меню

Пример: идеальное навигационное меню [126 веб-сайтов SaaS]

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

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

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

В этом тематическом исследовании о навигационных меню (начала в длинной серии странно специфических статей) я рассмотрел 126 SaaS-компаний, которые в прошлом году продемонстрировали высокий рост.

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

Зачем оптимизировать меню навигации?

На мой взгляд, навигационное меню имеет 3 основных назначения:

  1. Чтобы помочь посетителям найти и добраться до контента, который они ищут.
  2. Для улучшения пользовательского опыта и облегчения навигации по вашему сайту.
  3. Помогите Google понять структуру вашего сайта и легко проиндексировать ваши страницы.
Основным приоритетом является ориентация на поиск. Органический трафик и пользовательский опыт бесполезны, если люди не могут найти информацию, которую они ищут. И эта зависимость только углубляется, когда речь заходит о мобильных телефонах.
Структура ссылок большинства SaaS-сайтов.
Структура ссылок большинства SaaS-сайтов.
Создание меню навигации может показаться тривиальной задачей, но в этом есть большая глубина. Речь идет о создании умной внутренней структуры ссылок.

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

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

Сколько разделов вы должны рассмотреть?

Когда дело доходит до выбора того, что должно быть в меню навигации, лучше подумать о количестве разделов, которые вы хотите иметь. Кажется, что большинство SaaS-сайтов имеют 5 разделов в своем меню.
Сколько разделов вы должны рассмотреть?
Из приведенного выше графика видно, что ~ 80% меню содержат 4-6 разделов .
Кажется, что такое количество разделов позволяет вам разделить наиболее важные зоны вашего сайта, оставляя место для других элементов, таких как кнопки или телефонные номера.
BirdEye имеет превосходное сочетание секций и кнопок CTA.
BirdEye имеет превосходное сочетание секций и кнопок CTA.
Этот тип макета хорошо переносится с рабочего стола на мобильный.

Самые популярные разделы меню

В нашем случае самые популярные разделы меню не обязательно означают самые важные.

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

Люди находят утешение в вещах, которые кажутся знакомыми, и это может увеличить навигацию и CTR.
Возьмем, к примеру, «Ресурсы», которые использовались в 69 навигационных меню. Люди, ищущие вебинары, электронные книги или статьи в блогах, знают, что это первое место, на которое можно нажать.

То же самое касается продукта / продуктов / функций / платформы. Именно здесь компании объясняют продукт подробно и выделяют его особенности.

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

Высокий рост означает не только увеличение количества клиентов или ARR, но также и достаточный план привлечения талантов.

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

С 48 из 126 веб-сайтов, используют его, добрый «ALL CAPS». Хотя многие дизайнеры считают его безвкусным, оно кажется более плодотворным, когда дело доходит до пунктов меню навигации.

Нужно ли размещать больше меню поверх нашего меню?

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

Остальные 21,43% веб-сайтов, которые считают необходимым предложить дополнительное меню поверх основного, казалось, ссылались на справочную страницу, информацию о карьере, вход в систему и международные страницы.

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

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

Heap Analytics избегает перечисления всех функций из их главного меню. Они создают изолированное меню внутри подкаталога Product.

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

Сильный случай для липких меню

Есть определенные особенности, которыми обладает большинство проанализированных веб-сайтов SaaS.

Первым впечатляющим фактором будет тот факт, что 84,13% из них имеют «липкую полосу» в версии для настольных компьютеров.

Я не думаю, что залипание меню является обязательным в любой ситуации, но именно такой пользовательский опыт позволяет пользователям ориентироваться и подталкивать их к выполнению действия. Особенно, когда они просматривают веб-сайт, а на страницах нет четких кнопок CTA в контенте.

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

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

Некоторые становятся более агрессивными и удаляют любую навигационную ссылку в липком меню, оставляя вам только один выбор - ПОДПИСАТЬСЯ.
Я действительно думаю, что их сердце находится в нужном месте, но я думаю, что это повредит вашей конверсии в долгосрочной перспективе.

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

Стоит отметить, что меню и липкое меню должны иметь согласованную тему на всех страницах.

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

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

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

Самая интересная находка заключается в том, что только 61,90% веб-сайтов SaaS имеют «липкую планку» в мобильной версии.
Для меня это одна большая загадка, так как липкая навигация дает больше контроля мобильному посетителю, чем настольному.

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

Выпадающий или нет?

Это было довольно просто, но все равно гораздо меньше, чем я ожидал. 78,57% сайтов имеют выпадающее меню.
Преимущество выпадающего меню состоит в том, что вы можете предложить своим посетителям способ, которым они могут сегментировать и квалифицировать себя в зависимости от своего выбора. Это может быть либо по преимуществам / вариантам использования, либо по вертикали.

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

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

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

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

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

Улучшение классического выпадающего меню

90% веб-сайтов удовлетворены тем, что создают только выпадающий список того, что они предлагают, без объяснения того, что находится внутри или почему пользователи должны нажимать на них.

Помните, мы говорим о SaaS-компаниях с высокими темпами роста.

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

Но, как вы видели в приведенном выше примере, такие компании, как Intercom, выходят за рамки того, что считается хорошей практикой.

Существуют веб-сайты, которые создают интуитивно понятный и полезный пользовательский интерфейс, убирая лишние ссылки и добавляя пояснения и наглядные пособия в выпадающее меню.
Два прекрасных примера от Instapage и PandaDoc обогащенных выпадающих меню.

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

Больше вариантов не всегда лучше

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

Но на самом деле вы создаете идеальную среду для «перегрузки выбора», предложенную Элвином Тоффлером в 1970 году.

Стоит провести параллель между навигационными меню и известным экспериментом с джемом.

Эксперимент проверил предложение 24 джемов гурмана против выбора только 6 джемов. И вывод заключался в том, что, хотя большой дисплей джемов предлагал больше видимости, это на самом деле смущало покупателей. Меньший дисплей привел к увеличению покупок в 10 раз.
Легко определить, по какому выпадающему меню легче ориентироваться.

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

Кнопки, кнопки, кнопки

Хорошо расположенная кнопка CTA в навигационном меню рядом с сайтом - это не что иное, как интересное для специалиста по оптимизации.

80,16% веб-сайтов имеют по крайней мере одну кнопку CTA в своем меню навигации.

Я действительно считаю, что наличие кнопки CTA в заголовке - очень хорошая отправная точка для вашей оптимизации, если у вас ее нет.

Мало того, что посетители, которые просматривают ваш веб-сайт, имеют возможность принять меры, когда они чувствуют себя готовыми, но это усиливает призыв к действию из заголовка.
66,67% навигационных меню имеют одну кнопку в заголовке. Это следует из теории отношения внимания 1: 1. Поскольку целевая страница имеет одну цель, призыв к действию должен работать для достижения этой цели.
Calendly делает его простым и легким с помощью кнопок CTA.

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

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

В меню навигации они пытаются выделить кнопку «СВЯЗАТЬСЯ С НАМИ», придав ей другой цвет. Но на странице основной кнопкой CTA является «СКАЧАТЬ СЕЙЧАС».

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

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

78,10% веб-сайтов имеют кнопку CTA в меню, отличную от кнопки на целевой странице.
Хотя обе кнопки CTA ведут на одну и ту же целевую страницу, разница между «СМОТРЕТЬ ДЕМО» и «ЗАПРОСИТЬ ДЕМО» огромна.

Формулировка на кнопках была очень разнообразной, но наиболее часто используемые CTA были:
Принимая во внимание тот факт, что большинство этих веб-сайтов не имеют стратегии freemium или пробной версии, мы можем видеть эти результаты только нормально.

Руководство по цвету кнопок

Я не верю, что кнопка CTA в навигации должна быть выключена, но она должна соответствовать цвету основного сайта CTA.

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

1. Зеленая кнопка - 22,58%

Самый популярный цвет для B2B SaaS-сайтов.
Duo и Bpm'online предлагают бесплатную пробную версию и имеют зеленую кнопку CTA.
Хотя первые два примера положительны, я хотел привести пример раскраски кнопок, который может создать путаницу.
Вы можете видеть, что кнопка CTA в раскрывающемся меню имеет тот же цвет, что и кнопка «Войти».
Опять же, если вы не хотите создавать разочарование, попробуйте различить кнопки. У вас есть мир цветов и оттенков, которые ждут своего открытия.

2. Полая кнопка / кнопка без цвета - 18,28%

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

Если есть какая-то причина, которая мне не нравится, пожалуйста, сообщите мне об этом в разделе комментариев

3. Оранжевая кнопка - 16,13%

Мне понравился пример Гонга, потому что им удалось попробовать что-то другое и поместить целую демонстрационную форму запроса в меню навигации. (это имитирует тот из домашней страницы).
Прекрасный пример наличия двух кнопок в меню навигации, предоставляемых CoSchedule. Им удалось не только создать полезное выпадающее меню, но и стилизовать кнопки CTA в зависимости от важности.

4. Синий - 15,05%

Birdeye соответствует их кнопке CTA в меню навигации и на целевых страницах.
Exponea делает замечательную работу по созданию понятного и полезного навигационного меню, выделяя при этом наиболее важные действия, которые необходимо выполнить посетителям - запросить демонстрацию.
К сожалению, Nearpod предоставил нам негативный пример кнопки CTA в этой категории. Это сильно сбивает с толку и неясно, почему они будут выделять кнопку «Войти» в шапке.
Вы также можете ясно видеть, что это сильно отличается от CTA на домашней странице.

5. Красный - 13,98%

Twilio был первым примером, который пришёл мне в голову, когда я искал пример красной кнопки CTA. Это встроено в их целую тему бренда.
Конга, я знаю, что на твоей тарелке много всего, но я чувствую, что тебе следует распределить часть этого внимания на разных целевых страницах вместо того, чтобы иметь 4 разные кнопки в верхней части страницы.
Photograph: lee Scott / Unsplash

Телефонные звонки больше не популярны?

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

Процент веб-сайтов, у которых нет номера телефона на рабочем столе, составляет 81,30% .

На мобильном телефоне только 18 из 126 веб-сайтов имели телефонный номер в меню навигации. (и меньше, чем есть действительный номер телефона).

Price Intelligently знает о более высокой цене входа и предлагает действующий номер телефона как для настольных компьютеров, так и для мобильных устройств.
У подиума есть интересный пример действенного номера телефона. Это двухэтапный процесс, в котором вы можете выбрать между звонком или отправкой SMS.
Хотя у них есть два телефонных номера, видимых на их веб-сайте, Wordstream разочаровывает нас, не делая их действенными. Опять же, я не понимаю, почему это не работает. Если вы столкнулись с проблемой предоставления прямых линий связи между вами и вашими потенциальными клиентами, убедитесь, что они настроены правильно.
Вид разочарован, учитывая, что они сторонники персонализации и оптимизации целевой страницы. Они могли бы сделать лучшую работу в этом.

Как все это перевести на мобильный?

Если вы работаете в B2B SaaS-компании, вы знаете, насколько важна версия для ПК. Большинство бизнес делается на настольной версии.

Но предоставление хорошего мобильного опыта важно для обнаружения и создания соединения.

Поэтому неудивительно, что 125 из 126 проанализированных сайтов имели адаптивный сайт.

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

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

Как и в случае с другими элементами меню навигации, вы должны быть последовательны при переходе вашего сайта с рабочего стола на мобильный.
Photograph: lee Scott / Unsplash
То же самое можно сказать и о вашем сайте. Не предлагайте своим посетителям мобильную версию Mario, если ваш рабочий стол отсутствует.

Выводы

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

Если вы не предоставляете им достаточный выбор, вы рискуете не захватить их интерес или иметь плохую долю удержания (поскольку они не полностью понимают преимущества / функции). То же самое касается предложения выбора изобилия. Вы собираетесь их спутать.

Я не большой поклонник TL; DR, и я думаю, что если вы заинтересованы или в настоящее время планируете работать над вашим навигационным меню, вся информация актуальна.

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

Я не мог идти слишком глубоко или конкретно с объяснениями. Если вы не нашли информацию, которую искали, или у вас возникли вопросы, сообщите мне об этом по электронной почте или в комментариях.
Made on
Tilda