Легкая навигация на сайте


Оглавление (нажмите, чтобы открыть):

Требования к навигации сайта

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

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

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

Каждая страница должна содержать:

  • логотип с ссылкой на главную страницу (исключая саму главную страницу);
  • системные иконки в виде пиктограмм: «домик» (ссылка на главную страницу), «лупа» (ссылка на поиск и карту сайта), «почтовый конверт» (ссылка на контактную информацию). Цвет иконки меняется в зависимости от того, является ли текущий раздел активным;
  • возможность выбора языка (украинский, русский, английский).

С любой страницы сайта перейти на главную можно будет несколькими способами:

  • кликнуть на логотип
  • на иконку домика или ссылку в дублирующей навигации.

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

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

Требования к навигации сайта

  1. Логична по структуре и оформлению.
  2. Наличие удобной основной и вспомогательной навигации с одинаковым позиционированием на всех страницах.
  3. Навигация сайта должна в любой момент предоставлять посетителю возможность быстро и безошибочно определить свое местонахождение на сайте и однозначно отвечать на три вопроса: «Где я нахожусь?», «Где я уже был?», «Куда я могу пойти?».

Требования к гиперссылкам

  1. Все ссылки выделяются классически: цветом и подчеркиванием.
  2. Текущий пункт меню не должен быть кликабельным, а раздел, в котором он находится наооброт — кликабельным (ссылка с подчеркиванием).
  3. Цвет ссылок должен меняться: цвет неактивной, активной и посещенной ссылок (менее насыщенный цвет чем у активных ссылок, или цвет, более близкий к цвету основного текста и даже фона страницы) должен отличаться друг от друга.
  4. Наведение мышки на ссылку должно вызывать эффект подсветки (цвет должен быть светлее).
  5. Реакция при наведении — меняется цвет; допускается убирать подчеркивание.
  6. Адрес страницы (URL) должен быть по возможности коротким и понятным.
  7. Страницы должны именоваться так, чтобы было легко определить точное содержание этой страницы, без необходимости постоянно проверять, что же действительно содержится на страницах.
  8. Текстовые гиперссылки должны хорошо выделяться на фоне остального текста.
  9. Ссылки — относительные (за исключением внешних): от корневого каталога сайта до текущего документа (например: /ua/about/contacts/ ).
  10. Гиперссылки вызывающие неожиданные для пользователя действия должны об этом предупреждать, например: ссылки на файлы, ссылки, открывающие или закрывающие окна.
  11. Внешние ссылки, ведущие на другие ресурсы, должны отличаться наличием какого-либо графического значка и открывать новый сайт в новом окне.
  12. Ссылка на всплывающее окно должна сопровождаться соответствующим значком.
  13. Ссылки на различные документы должны четко различаться.
  14. Если ссылка ведет на файл для скачивания, необходимо обязательно указывать его размер.
  15. Ссылки, расположенные в тексте, не должны совпадать с ним по оформлению.
  16. Недопустимо использование циклических ссылок (ссылки, ведущей на ту же страницу, на которой эта ссылка установлена).

Навигация с помощью главного меню

Главное меню имеет многоуровневую иерархическую (вложенную) структуру, которая позволяет пользователю двигаться, как «от общего к частному», так и «от частного к общему».

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

Вспомогательная навигация

Вспомогательня навигация представляет собой путь по сайту от его «корня» до текущей страницы и располагается в верхней части страницы. Имеет следующий вид:

Главная страница → Раздел → Подраздел → Текущая страница

Все элементы строки, кроме последнего, должны быть ссылками на соответствующие страницы. Такая навигация обязательно должна присутствовать на сайтах с многоуровневой структурой. Чтобы создать вспомогательную навигацию («хлебные крошки» для блога на WordPress, есть специальный плагин.

Навигация с помощью гиперссылок

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

Навигация с помощью прямого уникального адреса страницы (URL)

Каждая страница должна иметь постоянный URL, доступный, для индексации поисковыми системами. Динамические ссылки вида www.fortress-design.com/post.php?post=9658 должны быть преобразованы в статические.

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

Навигация по сайту и ее виды

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

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

Что представляет собой дружественная к пользователю система навигации?

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

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


  1. На какой сейчас странице находится посетитель?
  2. Какие страницы он уже посетил?
  3. Какие еще страницы ему доступны?

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

Многих интересует вопрос: а сколько же ссылок должно быть на сайте? Здесь однозначно ответить нельзя, так как это во многом зависит от количества страниц сайта. А нужное количество определяется лишь опытным путем. Главное правило: их должно быть столько, сколько будет удобно для пользователя. В то же время система навигации не должна занимать слишком много пространства сайта. В среднем ее площадь это 5-15% всего пространства ресурса.

Разработка системы навигации и ее структуры

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

О видах навигации

Виды навигации можно выделять исходя из двух критериев: функционального и визуального.

По своим функциям система навигации делится на следующие виды:

  • Языковая – навигация, отвечающая за языковой интерфейс и отображение контента на выбранном пользователем языке.
  • Основная – это наиболее важные разделы сайта, как правило меню.
  • Глобальная – это те ссылки, которые должны быть видны с любой страницы сайта, например ссылка на главную.
  • Рекламная – ссылки для привлечения посетителей на рекламные страницы сайта с расположением товаров и услуг.
  • Тематическая – навигация по страницам сайта одной определенной тематики (рубрики).
  • Текстовая – гиперссылки из текста на странице. С точки зрения юзабилити, они нужны для направления пользователя к упомянутому в тексте материалу. С точки зрения оптимизации – это грамотная перелинковка сайта.
  • Указательная – по-другому, справочная. Гиперссылка указывает, в какой области сайта сейчас находится посетитель.
  • Географическая – используется на сайтах, где имеются разделы, посвященные разным странам.

По визуальному оформлению выделяют следующие виды навигации:

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

Удобная навигация достаточно сложная вещь и организовать ее с первого раза не всегда удается. Разрабатывается она еще на этапе дизайна. При заказе разработки сайта в нашей веб-студии вы получите эффективный сайт приводящий целевых посетителей.

Как сделать удобную навигацию по сайту: юзабилити для «чайников»

Дата публикации: 2020-01-18

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

Что значит «юзабилити»?

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Для чего нужна эффективная навигация?

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

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

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

Какие виды навигации выбрать?

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

Основная. Сюда относятся разделы ресурса и все ссылки, ведущие на основную страницу;

языковая — позволяет пользователю выбрать нужный язык и уже на нем просматривать веб-ресурс;

рекламная. К ней относятся все, размещенные на сайте, рекламные гиперссылки;

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

тематическая — помогает в перемещении по заметкам и статьям одной тематики, от раздела к разделу;

передвижение в контенте. Это ссылки, участвующие во внутренней перелинковке;

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

выпадающая — ресурс имеет выпадающие элементы, такие как форма заказа или анкета.

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

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

Удобное меню — залог успеха!

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

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

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

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

для фона и текста кнопок используйте контрастные цвета;

активный пункт меню должен подсвечиваться. Сделайте так, чтобы пользователь мог в любой момент сориентироваться, где он пребывает. Тут вам в помощь «хлебные крошки» или подсветка (можете использовать и то и другое);

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

на крупных ресурсах используйте многоуровневое меню с превью, чтобы при наведении курсора менюшки раскрывались;

группируйте схожие элементы. Размещайте по соседству похожие категории или товары;

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

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


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

До новых встреч! Подписывайтесь на наш блог и делитесь ссылочкой с друзьями!

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Эффективная навигация по сайту

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

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

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

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

Символы

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

Треугольник

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

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

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

На сайте Nike используются сразу два навигационных символа – значок треугольника и «+». При этом треугольник указывает направление раскрытия для основного меню, в то время как «+» используется сугубо в динамическом меню.

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

Гамбургер

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

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

Последовательность в использовании символов

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

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

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

Мастер Йода рекомендует:  Пример использования в PHP библиотеки Curl для создания запросов GetPost PHP

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

Целевые области

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

Читаемость текста

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

При хорошей читаемости и высоком контрасте надписей, расположенных в центре страницы («Laptops», «Desktops» и другие), ссылки в меню не отличаются столь же хорошей читаемостью. Это можно считать существенным недостатком, снижающим эффективность всей навигации сайта.

Размер

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

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

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

Если вы попробуете увеличить небольшую целевую область на 10%, то сможете существенно повысить эффективность этого элемента. Но в случае, если вы начнете увеличивать элемент, который уже является крупным, то, скорее всего, ничего не изменится (по крайне мере, в лучшую сторону).

Последовательное расположение

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

Рассогласование целевых областей при использовании вложенного меню

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

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

Взаимодействие пользователя с интерфейсом меню

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

Курсор

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

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

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

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

Скрытая зона на сайте Amazon

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

  1. Пользователь не знает о том, что для его удобства на сайте есть подсказки. Он видит их только после наведения курсора.
  2. Почти всегда всплывающие подсказки в той или иной степени закрывают соседние элементы, которые пользователь мог хотеть видеть.
  3. Необходимо точно подбирать время демонстрации подсказки. Как и в случае с курсором, покидающим целевую область, мы сталкиваемся с дилеммой – если подсказка быстро исчезает, то пользователь может не успеть ознакомиться с ней, а если подсказка демонстрируется слишком долго, то пользователю придется потратить массу времени на то, чтобы изучить каждый элемент меню.
  4. Затрудняется сравнение различных пунктов меню.
  5. Этот метод бессмыслен, если пользователь просматривает сайт с помощью сенсорного устройства.
  6. Всплывающие подсказки на сайтеMini.

Клики

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

Скроллинг

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


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

Уровни

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

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

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

Однако наличие множества вложенных подразделов позволило сделать меню, ориентированные на мобильные устройства, в целом более лаконичными и компактными:

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

На сайте Sony Pictures при нажатии по каждому из пунктов демонстрируется отдельный экран с соответствующим контентом.

Мега-меню

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

Пример мега-меню, перегруженного категориями.

В этом отношении более предпочтительно «прятать» категории в отдельные вкладки – в таком случае мега-меню становится гораздо более удобным и удачным с точки зрения UX:

Динамические фильтры

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

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

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

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

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

Размещение фильтров на мобильных версиях сайтов

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

Некоторые UX-дизайнеры предпочитают использовать для демонстрации фильтров поп-апы, которые позволяют пользователю оставаться на одной и той же странице:

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

Мега-сайты и их особенности

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

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

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

10 сайтов с нестандартной навигацией

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

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

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

Портфолио дизайнера Яфии Олсон – это забавный мультик. Анимированные элементы движутся при прокрутке страницы, что довольно интересно. Все элементы навигации также нарисованы от руки. Единственный недостаток – сайт долго грузится.

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

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

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

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

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

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

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

5 типичных ошибок навигации сайта

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

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

Ошибка №1: нестандартный стиль

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

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

Ошибка №2: универсальные надписи пунктов меню

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

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

Согласитесь, что ваши клиенты не ищут абстрактные «Товары» или «Услуги», и навигация с такими значками не повлияет на продвижение сайта в результатах поисковой выдачи. Узнали себя? Значит, пора исправляться! Меню сайта и его структура в целом должны быть оптимизированы для поисковых систем и говорить на понятном для целевой аудитории языке. Дочитав нашу статью до конца, вы увидите, как подобную задачу решают многие компании.

Ошибка №3: выпадающее меню

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

Многим из вас наверняка приходилось буквально ловить выпадающее меню. Одно неловкое движение – и оно убегает от вас! И вот вы, собравшись с силами, вновь ищете, кликаете, а там – сюрприз! – еще один список вариантов действий. Подобные догонялки жутко раздражают! Задумайтесь, может быть не стоит лишний раз трепать нервы своим потенциальным клиентам?

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

Ошибка №4: большое количество пунктов меню

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


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

Ошибка №5: неуместное расположение пункта меню для оформления заказа

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

Концентрация внимания значительно выше в начале списка (эффект первичности) и в конце (эффект новизны). Вот почему правильно расставлять самые важные пункты в начале навигации, второстепенные – в центре. Пункт меню «Контакт» следует разместить в конце TOP навигации в крайнем правом углу.

Бонусная подсказка: ссылки – forever, кнопки – никогда!

В случае, если вы отстали от тенденций веб-дизайна лет на 8 и до сих пор используете графические навигационные кнопки вместо текстовых ссылок, тогда для вас мы приводим 5 причин пересмотреть свои привычки:

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

А теперь, как мы и обещали: 5 примеров навигации сайта без ошибок.

1. Smith Brothers – информативная и лаконичная навигация сайта.

Только 4 пункта, где на первом, наиболее важном месте стоят ссылки на услуги. Заканчивает список ссылка «Контакт».

2. Independent Publishers Group – информативная, структурированная навигация сайта.

Здесь с помощью контраста цветов разделены первичные и вторичные пункты меню вверху страницы. Каждое с 5 (или меньшим) количеством элементов. Общий термин «Услуги» разбит на два пункта меню «Цифровые услуги» и «Дистрибуция услуг».

3. Sweat Vac – информативная, лаконичная навигация с короткими названиями значков.

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

4. Kiefer Swimwear – информативная, упорядоченная навигация.

Огромный каталог фирмы «Kiefer» содержит категории, доступные на главной навигации, расположенной по всему сайту. В первую очередь видны наиболее важные пункты для посетителей сайта (купальники и купальные принадлежности). Завершает список пункт «Распродажа».

Мастер Йода рекомендует:  Создание заглавных букв с помощью CSS

5. EuroFurniture – упорядоченная навигация с большим выпадающим меню.

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

Заключение для тех, кому было лень читать 😉

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

Топ-10 вариантов дизайна веб-навигации

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

Навигация ничем не регламентирована: ее можно сделать прозрачной и интуитивной или многоуровневой и нестандартной.

Как сделать навигацию на сайте максимально эффективной и какой дизайн подойдет именно вам?

У компании веб-разработки Umbrella IT есть ответы на все ваши вопросы.

Но обо всем по порядку.

ЧТО ТАКОЕ НАВИГАЦИЯ?

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

ПЛАНИРОВАНИЕ НАВИГАЦИИ

Максимально эффективная веб-навигация держится на 3 китах:

  • Структура: навигация начинается с детальной проработки информационной архитектуры (ИА), которая позволяет создать оптимальный доступ к сайту и структурировать контент с точки зрения пользователя. В идеале, ИА сайта состоит из минимума навигационных слоев и предоставляет пользователю доступ к нужному разделу всего за несколько кликов. При этом само деление разделов — четкое, логичное и предсказуемое.
  • Лаконичность: практичная веб-навигация всегда проста и интуитивно-понятна. Включайте в меню сайта только те элементы, которые необходимы для эффективной коммуникации. Ключ к успеху – меню, состоящее из минимального количества равноценных разделов, которые не оставляют ошибке никаких шансов.
  • Дизайн: при выборе дизайна делайте упор на читабельность, органичность и единообразие. Отдайте предпочтение общепринятым элементам навигации. Запутанная система нестандартных иконок, кнопок и ярлыков – плохая идея, которая может негативно отразиться на удобстве и практичности вашего сайта. Чем меньше лишних активных элементов – тем больше довольных пользователей.

ТРЕНДЫ В ДИЗАЙНЕ ВЕБ-НАВИГАЦИИ

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

1. ГОРИЗОНТАЛЬНАЯ НАВИГАЦИЯ

Горизонтальная навигация – классический дизайн, соединивший удобство с функциональностью.

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

2. ВЕРТИКАЛЬНАЯ НАВИГАЦИЯ

Вертикальная навигация — прямая альтернатива горизонтальной навигации – меню, расположенное в левой колонке страницы.

  • Простота редактирования и неограниченная возможность расширения меню — отличный вариант для сложных мультифункциональных сервисов и электронной коммерции;
  • Оптимально для разных устройств.
  • В развернутом виде может перекрывать контент;
  • Нижние навигационные элементы малозаметны.

3. ВЫЕЗЖАЮЩЕЕ МЕНЮ

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

  • Максимально компактный способ организации сайта;
  • Дизайн может быть адаптивным, что в сочетании с гамбургером-иконкой представляет отличный вариант для интерфейса мобильной версии сайта;
  • Скрытое меню позволяет сделать сильный акцент на контенте;
  • Удобный доступ к меню из любой точки сайта.


  • Скрытая навигация затрудняет доступ к меню;
  • В развернутом виде меню перекрывает контент.

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

  • Листать быстрее, чем кликать – подходящий вариант для новостных сервисов, онлайн-магазинов и сайтов, обновляющих контент в режиме реального времени;
  • Бесконечная прокрутка удерживает внимание пользователя;
  • Позволяет размещать большой объем визуальной информации;
  • Удобный интерфейс для мобильных платформ.
  • Ограниченная свобода пользователя: невозможно контролировать порядок информации и способ представления контента;
  • Невозможно использовать футер;
  • Увеличивает нагрузку на серверы;
  • Снижает показатели SEO.

5. ФИКСИРОВАННОЕ МЕНЮ

Фиксированная или “липкая” навигация статично закрепляет панель меню в конкретной части страницы, предоставляя пользователю постоянный доступ к опциям меню.

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

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

  • Гамбургер-иконка доступна из любой точки сайта одним кликом или касанием;
  • Позволяет разместить неограниченное количество опций;
  • Максимально экономит пространство и идеально отображается на мобильных устройствах;
  • Помогает компактно разместить вторичные опции (например, историю и настройки), не перегружая ни экран, ни пользователя.
  • Несмотря на свою распространенность, пользователи не всегда легко находят скрытое меню;
  • Гамбургер – негласное стандартное меню на платформе Android, и его использование на iOs приводит к нарушению единообразия базовых навигационных элементов и перегрузке навигационной панели.

7. АДАПТИВНАЯ НАВИГАЦИЯ

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

  • Кроссплатформенность: сайт изначально спроектирован для качественного отображения как на компьютерах, так и на мобильных устройствах;
  • Единый URL: при адаптивной навигации не нужно создавать мобильную версию сайта, а отсутствие редиректов повышает поисковую оптимизацию.
  • Типичные для десктопных версий сайтов активные элементы (встроенные карты, видео, анимация) замедляют загрузку сайта на мобильных устройствах;
  • Мобильная версия дизайна может оказаться нечитабельной и перегруженной в виду того, что пользователи мобильных устройств, как правило, пользуются более узким функционалом сайта;
  • Отсутствие альтернативы: в случае с самостоятельной мобильной версией всегда есть возможность вернуться к полной версии сайта. Адаптивный дизайн этого не позволяет: если адаптированная верстка неудобна или скрывает важный элемент навигации, единственный вариант – искать ноутбук или обращаться к сайту конкурентов.

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

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

9. РАСШИРЕННЫЙ ФУТЕР

Футер или “подвал” сайта – это нижняя часть страницы. В стандартном футере, как правило, размещается дополнительная информация: контакты, ссылки, уведомление об авторских правах и кнопки социальных сетей. В расширенном футере помимо этих данных содержится полноценное навигационное меню, которое может использоваться как основная или альтернативная система навигации. Расширенный футер — простой способ выйти за границы стандартного дизайна и повысить функциональность Вашего сайта.

  • Предоставляет альтернативное или дополнительное меню для тех, кто не нашел нужный контент в главном;
  • Позволяет разместить важный, но не вписывающийся в содержание основных страниц контент;
  • Дополнительные опции в классическом футере (содержащим только контактную информацию) позволяют расширить клиентскую базу;
  • Акцентирует внимание на определенной информации.
  • Рядовой пользователь часто не дочитывает до футера.

10. ПОЛНОЭКРАННАЯ НАВИГАЦИЯ

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

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

И традиционный бонус от компании Umbrella IT, которая всегда готова предложить Вам больше — 11 вариант — АНИМИРОВАННЫЕ ЭЛЕМЕНТЫ НАВИГАЦИИ .

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

  • Привлекают внимание пользователей;
  • Структурируют меню;
  • Улучшают юзабилити сайта и ориентируют пользователя.
  • Чрезмерная визуальная перегруженность затрудняет навигацию по сайту;
  • Могут замедлить скорость загрузки сайта.

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

Представленные примеры – лишь малая часть того, что позволяет реализовать современный веб-дизайн. Остались вопросы? Свяжитесь с Umbrella IT , и мы поможем воплотить Ваши самые смелые проекты в реальность .

50 сайтов c необычной навигацией

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

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

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

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


We Are Eli — компания, занимающаяся обработкой изображений и основанная в Дании. Их изображения демонстрируются на главной странице, и путем прокрутки вы можете изменить место отображения навигации.

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

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

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

Высокая мода всегда выделяется, и навигация на этой странице компании Diesel, безусловно, необычная. Текстовые фреймы – лица моделей.

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

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

«ИНГ Банк» и «ЮНИСЕФ» объединились вместе для создания сайта. Когда внимание на целевой странице сосредоточено на видео, панель навигации находится в нижней части экрана, чтобы не отвлекать внимание от основного содержания.

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

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

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

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

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

Этот сайт-портфолио создает впечатление, что он создан в 3D, и по мере того как вы передвигаетесь по странице, появляются новые очень интересные эффекты. По-настоящему творческий дизайн Стивена Уиттенса.

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

В веб-дизайне навигация часто является небольшой частью дизайна. Но сайт-портфолио этого дизайнера выдвигает данный аспект на передний план, создавая 3D-эффект.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Милый сайт был создан веб-дизайнером, чтобы отпраздновать рождение сына, Ральфа. Одностраничный дизайн, навигация размещена хаотично.

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

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

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

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

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

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

Навигация огибает основной текст на этой странице. При наведении курсора на одну из областей текст меняет свой цвет на желтый, выделяя его.

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

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

Другой уникальный подход к портфолио представленного дизайнера. Daniele использует только гиперссылки, позволяя посетителям перемещаться по ее сайту.

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

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

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

Массивная стрелка помогает посетителям передвигаться по сайту! При использовании одностраничного дизайна единственный возможный путь – вниз.

Сайт о моде Feyt содержит изображения многих своих товаров на видном месте главной страницы страницы. Это привлекает внимание посетителей к продукции сразу и позволяет легко передвигаться по сайту.

Сайт дает возможность заглянуть, как течет жизнь в этом агентстве. Sagmeisterwatch располагает навигацию на «полу» своего офиса.

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

автор: Claire Roper

We Are Eli — компания, занимающаяся обработкой изображений и основанная в Дании. Их изображения демонстрируются на главной странице, и путем прокрутки вы можете изменить место отображения навигации.

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

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


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

Высокая мода всегда выделяется, и навигация на этой странице компании Diesel, безусловно, необычная. Текстовые фреймы – лица моделей.

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

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

«ИНГ Банк» и «ЮНИСЕФ» объединились вместе для создания сайта. Когда внимание на целевой странице сосредоточено на видео, панель навигации находится в нижней части экрана, чтобы не отвлекать внимание от основного содержания.

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

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

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

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

Этот сайт-портфолио создает впечатление, что он создан в 3D, и по мере того как вы передвигаетесь по странице, появляются новые очень интересные эффекты. По-настоящему творческий дизайн Стивена Уиттенса.

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

В веб-дизайне навигация часто является небольшой частью дизайна. Но сайт-портфолио этого дизайнера выдвигает данный аспект на передний план, создавая 3D-эффект.

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

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

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

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

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

Мастер Йода рекомендует:  Напишите программу, проверяющую число на четность, используя только битовые операции

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

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

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

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

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

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

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

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

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

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

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

Милый сайт был создан веб-дизайнером, чтобы отпраздновать рождение сына, Ральфа. Одностраничный дизайн, навигация размещена хаотично.

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

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

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

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

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

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

Навигация огибает основной текст на этой странице. При наведении курсора на одну из областей текст меняет свой цвет на желтый, выделяя его.

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

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

Другой уникальный подход к портфолио представленного дизайнера. Daniele использует только гиперссылки, позволяя посетителям перемещаться по ее сайту.

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

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

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

Массивная стрелка помогает посетителям передвигаться по сайту! При использовании одностраничного дизайна единственный возможный путь – вниз.

Сайт о моде Feyt содержит изображения многих своих товаров на видном месте главной страницы страницы. Это привлекает внимание посетителей к продукции сразу и позволяет легко передвигаться по сайту.

Сайт дает возможность заглянуть, как течет жизнь в этом агентстве. Sagmeisterwatch располагает навигацию на «полу» своего офиса.

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

Юзабилити для чайников. Часть 3: какой должна быть навигация

Время чтения: 7 минут Нет времени читать? Нет времени?

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

Соблюдайте порядок основных и второстепенных страниц

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

Кнопка «Мои новости» ведет на второстепенную страницу, которая доступна только после регистрации или авторизации. Кнопка «Топ новости» ведет на основную страницу, поэтому она должна предшествовать кнопке «Мои новости».

Меню навигации: вертикальное или горизонтальное?

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

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


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

Уберите вертикальные полосы из горизонтального меню

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

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

Меню-аккордеон: простой способ пагинации

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

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

Как сделать бесконечную прокрутку удобной для пользователей

Следующие рекомендации помогут вам повысить эффективность страниц с бесконечным скроллингом:

  • При бесконечной прокрутке верхнее меню навигации должно быть доступно пользователю. Эта рекомендация реализована в «Фейсбуке».
  • Показывайте пользователю, что контент загружается.
  • Сообщайте посетителю, сколько контента осталось.
  • Позвольте возвращаться к исходной точке одним нажатием кнопки.

Где должна находиться кнопка «Контактная информация»

Все элементы меню объединяются в две категории: информационные и акционные. Действие следует после изучения информации. Поэтому первыми должны стоять информационные элементы: «о компании», «продукты», «блог» и т.п. Акционные элементы, например, «подписаться» или «связаться», должны завершать меню.

Карусели, ротаторы, слайдеры: избегайте типичных ошибок

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

  • Продолжение ротации контента, когда пользователь просматривает один из анонсов

При наведении курсора на карусель движение должно переключаться в ручной режим.

  • Ротация одного элемента карусели

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

При ручной прокрутке карусели должен меняться весь ряд.

  • Отсутствие указателей прогресса

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

  • Бесконечная прокрутка

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

Как вместить все необходимое в шапку сайта

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

  • Используйте эластичное поле поиска
  • Объедините кнопки регистрации и авторизации
  • Поместите логотип на панель навигации
  • Радикальный способ: спрячьте кнопки навигации

  • Используйте эффект рыбьего глаза

Как сделать вертикальное меню удобным

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

Чтобы решить эту проблему, оставьте в вертикальном меню только ссылки первого порядка. Ссылки второго порядка должны отображаться по клику.

Внешние ссылки должны открываться в новой вкладке браузера

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

Объединяйте выпадающее меню

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

Карусель должна иметь удобную навигацию

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

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

Автоматический режим — главный критерий качества навигации

Если пользователи не задумываются, как найти необходимый раздел сайта, значит, вы сделали хорошее меню. Чтобы помочь посетителям путешествовать по ресурсу, выбирайте верный порядок главных и второстепенных элементов. Подумайте, какое меню подходит вашему ресурсу: вертикальное или горизонтальное. Сделайте шапку сайта небольшой и удобной. Используйте объединенное выпадающее меню, отображайте второстепенные элементы вертикального меню по клику.

Навигация в как помочь покупателю найти «свой» товар

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

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

Соблюдайте баланс в количестве товаров и категорий

Чем шире ассортимент магазина, тем выше риск, что посетители уйдут без покупки. Да, выбор — это хорошо, но слишком большое разнообразие пугает. Это подтверждается исследованием, в котором клиентов супермаркета разделили на две группы: одним предложили выбирать из 24 категорий товаров, другим из шести. Люди из первой группы купили лишь на 10% больше товаров.

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

То же самое касается количества категорий, поэтому старайтесь соблюдать баланс в структуре и оформлении каталога товаров:

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

Не забывайте про подкатегории. Например, большую категорию «Платья» можно поделить на «Длинные», «Короткие», «С рукавом», «Без рукава» и так далее. Тогда, придя в магазин, покупатель не впадёт в ступор, увидев всё это разнообразие. Он просто пойдет в раздел «Платья», и там уже выберет то, что надо. Это решение для магазинов с большим количеством товаров.

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

    Восемь категорий товаров помещаются на одной странице, а в категориях есть подкатегории

    Если у вас есть один или несколько самых ходовых товаров, на которые хочется обратить внимание, создайте отдельную категорию «Самые популярные товары» и поставьте её в начале. Либо презентуйте эти товары на витрине, чтобы покупатели увидели их сразу. Например, добавьте блок «Рекомендуемые товары», как в KILN:

    Товары, которые хотите продать поскорее, разместите на главной странице каталога магазина

    Сделайте многоуровневое меню для большого каталога

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

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

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

    Пример неудачно организованного меню: слишком много подкатегорий, мелкий нечитаемый шрифт

    А вот хороший пример выпадающего меню на сайте «Презенвиль»:

    Категорий не слишком много, названия хорошо видны

    В магазине на Эквиде многоуровневое меню можно сделать с помощью приложения menu. Оно помогает создать удобное выпадающее меню с картинками и описаниями, которым будет удобно пользоваться и с десктопов, и с мобильников.

    • Выбрать подходящий для вашего сайта шаблон меню из нескольких вариантов.
    • Настроить выпадающие списк.
    • Менять шрифта и цвета.
    • Показывать в меню только те категории, которые вам нужно (например, чтобы быстрее продать товары из этих категорий).
    • Добавить к категориям описания и изображения, как на примере:

    Вид меню в со включенным приложением menu

    Ускорьте процесс покупки и сделайте магазин удобнее для покупателей. Протестируйте работу приложения в .

    Продумайте сортировку

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

    1. Привлечь покупателей низкой ценой. Показывайте в начале товары с самой низкой ценой — покупатели обязательно обратят внимание на выгодное предложение.
    2. Создать «ценовой якорь» и продать дорогие товары. Установите по умолчанию сортировку по цене от большей к меньшей. Первая цена воспринимается как базовая. Все товары, следующие за «якорем» покажутся выгодным предложением. Например, если вы продаёте футболки и сначала показываете клиенту товар за тысячи рублей, майка за 1500 рублей будет для покупателя потрясающим предложением.
    3. Получить доверие покупателей за счёт отзывов. Начинайте с товаров с большим количеством положительных отзывов. В сортировке внутри категорий сначала показывайте товары, которые понравились покупателям.

    Посетителям нравится менять параметры сортировки. Добавьте стандартные критерии, такие как сортировка по возрастанию или убыванию цены, новые поступления.

    В магазине на Эквиде вы можете включить по умолчанию один из этих способов сортировки или выбрать собственный порядок показа товаров — то, как вы расставили товары при заполнении каталога. Для этого выберите опцию «Задана владельцем магазина» в панели управления на странице Настройки → Корзина.

    Способы сортировки в

    Если у вас богатый ассортимент, добавьте возможность сортировки и в результаты поиска по сайту. В магазине на Эквиде это можно сделать с помощью функции «Товарные фильтры». О них и о поиске расскажем дальше.

    Подключите фильтры

    Фильтры помогают найти нужный товар, выбрав подходящие параметры. Это могут быть:

    • цена
    • размер
    • скидка
    • цвет
    • состав изделия
    • ингредиенты (если речь о доставке еды)

    И всё, что угодно. Лучше создавать простые фильтры из нескольких пунктов. Покупатели любят быстро настраивать параметры, длинные списки с критериями вызовут чувство дискомфорта.

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

    Идеи критериев для фильтров берите из Яндекс.Маркета

    Если у вас магазин на Эквиде, самим придумывать критерии не придется. Эквид автоматически настраивает фильтры по параметрам товаров, которые уже указаны в магазине. А вы можете выбрать из предложенных фильтров те, которые считаете нужными (если фильтра не окажется, его легко добавить самостоятельно).

    Фильтры в магазине на Эквиде

    Упростите поиск для покупателей

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

    Лучшее место для строки поиска — верхняя часть сайта, слева или справа, прямо перед глазами клиента, как на сайте магазина «Гранат»:

    Строка поиска там, где пользователь ожидает её увидеть

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

    Значок поиска всегда на экране, следует за пользователем

    Поиск товара можно сделать еще удобнее. Например, добавить подсказки — во время набора запроса пользователю будут показываться возможные варианты. В Эквиде для этого есть приложения Cloudsearch для Кроме подсказок клиенту сможет просматривать фото и описание товара прямо в поиске.

    Пользователь набирает название товара и сразу видит подходящие товары

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

    Так выглядят фильтры в поиске в магазине на Эквиде

    Используйте дополнительные инструменты навигации

    Некоторые незаметные на первый взгляд детали делают навигацию в лёгкой и понятной. Вот несколько полезных инструментов:

    Цепочка навигации

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

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

    Цепочка навигации в

    Блок «Просмотренные товары»

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

    Блок «Просмотренные товары» особенно актуален для магазинов с большим каталогом

    Меню внизу страницы

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

    Меню внизу страницы пригодится тем, кто ищет товары в большом каталоге

    Быстрый вход в личный кабинет

    В личном кабинете покупатель всегда может:

    • просматривать прошлые покупки;
    • добавлять товары в «Избранное» и возвращаться к ним позже.

    Это дополнительный якорь, который привязывает клиента к магазину. А если вы будете периодически отправлять покупателям письма с напоминаниями о товарах из списка «Избранное», то он скорее вернется в магазин за покупкой.

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

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

    Войти в личный кабинет можно по специальной ссылке без ввода логина и пароля

    Добавляя элементы навигации в магазин, помните о мобильных пользователях. Около 30% покупок в совершаются со смартфонов и планшетов. Ещё чаще пользователи ищут товары со смартфона, чтобы потом сделать заказ со стационарного компьютера или в

    Чтобы не потерять этих потенциальных клиентов, проверьте, удобно ли им пользоваться вашим магазином. Проверьте навигацию с мобильного по нескольким критериям, ответив на вопросы:

    1. Панель поиска или иконка. Они заметны на смартфоне? Открываются с одного нажатия?
    2. Меню. Его легко найти? Придётся непрерывно листать для поиска категории?
    3. Товары. Изображения товаров отображаются на экране мобильного устройства достаточно крупно?
    4. Читабельность. Текст достаточно крупный для чтения? Изображения не накладываются на текст и не мешают читать?

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

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

    Добавить комментарий