каким должно быть меню сайта
Основные блоки и элементы сайта — для чего нужны и как правильно оформить
Вы решили создать свой сайт. Прежде чем планировать его дизайн, стоит подумать о типе сайта и расположении функциональных блоков: меню, контактов, условий доставки и остальных.
Если вы еще сомневаетесь, какой именно сайт вам нужен — сайт-визитка, корпоративный или лендинг, то сперва загляните в статью «Как понять, какой сайт вам нужен» или посмотрите видео на эту тему на нашем канале в «Ютубе».
Узнать подробнее о структуре сайта можно в этой статье: от иерархии страниц зависит успешное SEO-продвижение, удобство для посетителей и продажи.
Для тех, кто уже определился с типом сайта и его структурой, в этой статье мы расскажем про функциональные блоки и элементы сайта: как их обычно используют и на что обратить внимание, когда будете собирать контент для них.
Создать полноценный сайт без знания кода можно с помощью « Конструктора сайтов RU-CENTER ». Конструктор поддерживает готовые шаблоны, темы и шрифты — останется только придумать текст и подобрать фотографии.
Первый экран
Главная страница — это первое, что видит посетитель сайта. За несколько секунд он решает: остаться или уйти. Задача этого блока — сделать так, чтобы клиент остался и посмотрел, что еще есть на сайте, или сразу же перешел к целевому действию.
Основные элементы
Заголовок. Часто это название того, что продается на сайте, слоган или вдохновляющая цитата.
Что продается — одежда, бренд — «О, май». Источник: ohmy.ru
Фоновое изображение: фотография, видео, иллюстрация, цвет или градиент. Картинка может иллюстрировать то, что человек в итоге получит, или задавать атмосферу. Если у вас нет собственных фотографий, можно прочитать нашу статью «Как законно использовать чужие изображения на вашем сайте».
Кнопка. Можно добавить целевое действие сразу на обложку: те, кто искал именно вас или уже заходил к вам, смогут сразу оформить заказ или перейти к новинкам и акциям.
На что обратить внимание
Не обязательно использовать все и сразу: фоновое изображение, заголовок и кнопку. Часто на главном экране — только картинка.
Пример первого экрана: меню (о нем дальше будет отдельный блок), изображение кольца из последней коллекции, слоган в виде закольцованной бегущей строки и кнопка. Источник: jewelry-in-august.com
Как выглядит сайт на разных устройствах. Во многих конструкторах сайтов можно посмотреть, что увидят посетители, если зайдут с ноутбука, смартфона или компьютера с большим экраном. Либо можно воспользоваться для этого расширением Window Resizer. Фрилансеры и дизайн-студии обычно проверяют этот момент, но лучше прописать его в ТЗ.
Меню и навигация
Понятные меню и навигация помогут посетителю сайта легко найти нужную информацию.
Основные элементы
Кликабельный логотип. Нажав на него, посетитель перейдет в начало главной страницы. Блок «Главная» можно удалить из меню.
Хедер (шапка сайта). Можно добавить меню, контакты, поле для поиска, выбора языка или города. Стоит выносить сюда то, что важно для вашего бизнеса: например, разделы «Доставка» и «Возврат».
«Не путайте пользователя»: 14 элементов и 10 правил для эффективной навигации по сайту
основатель креативной студии GetProgress
Грамотная навигация по сайту не просто позволяет пользователю переходить из одного раздела в другой, но и влияет на показатель отказов, время сессии, глубину просмотров сайта и, что самое важное, увеличение конверсии.
Анастасия Егорова, основатель креативной студии GetProgress, рассказывает, как при помощи навигации управлять пользовательским поведением, правильно подводить клиента к выполнению целевого действия и делать его пребывание на сайте максимально комфортным.
Идеальная навигация держится на трех китах. Это:
Дизайн необходимо продумать с учетом общепринятых элементов навигации. Даже если вы выбираете смелые решения, стоит использовать знакомые формы и обозначения иконок. Минимализм сегодня гораздо лучше воспринимается пользователями — навигационные элементы должны выделяться, но в то же время не диссонировать с общим визуальным решением.
Навигация должна быть интуитивно понятной. Перенасыщение меню ведет к дезориентации, рассеянному вниманию и уводит пользователя от основной повестки. На каждой странице должна быть своя навигация, позволяющая пользователю легко вернуться к предыдущему материалу или перейти на новый без потери логической связи.
Структура составляется так, чтобы пользователь смог оказаться в нужном разделе максимум за несколько кликов. Не следует перенасыщать сайт несколькими навигационными слоями — расположение разделов должно быть предсказуемым.
Основные элементы навигации сайта
1. Главное меню
Это ключевой пункт при разработке навигации. Лучше всего создать горизонтальное меню в шапке сайта — такой вариант привычнее для пользователя. Оптимальное число разделов в нем — не более 7. Для дополнительной информации можно использовать раскрывающееся меню с подразделами. Привлечь внимание к конкретным разделам и выделить активный раздел можно шрифтом или цветом.
Для обозначения меню можно использовать значок «гамбургер» — три горизонтальные черты. При нажатии на него пользователь видит пункты меню, которые до этого были скрыты.
Тест: узнай, сможешь ли ты грамотно выйти на рынок в другой стране
Главное меню горизонтального вида отлично выделяется благодаря правильно подобранной цветовой гамме и структуре
2. Боковое меню
В него помещают подразделы, рубрики и дополнительную навигационную информацию. Как правило, оно размещается в левой части страницы и не дублируется во всех разделах сайта. Не стоит перенасыщать боковое меню, оптимальное количество разделов в нем — не более 10.
Пример неперенасыщенного меню с подразрелами слева
3. Иконки
Для визуальной привлекательности вместо текстовых ссылок можно использовать иконки: значок корзины для списка покупок, значок сердца для избранных товаров и т.д. Крайне важно здесь избегать иконок, непривычных для пользователя и выбранной категории.
Работа студии. Удобное меню слева представлено иконками и при наведении дублируется текстом
4. Карта сайта
На главную страницу можно добавить карту сайта — она содержит гиперссылки на все разделы и помогает пользователю мгновенно переходить на нужную ему страницу.
Карта сайта на главной странице. Отличный пример удобного размещения разделов
5. Поиск
Для некоторых ресурсов будет актуален поиск по ключевым словам. Его лучше разместить в главном меню и сделать постоянным навигационным спутником пользователя.
Светлый поиск является продолжением главного меню
6. Фильтрация и сортировка
Для более удобного поиска используйте фильтры — они помогают пользователю отметить нужные характеристики и быстро найти подходящий товар, не путешествуя по ненужным ему страницам и разделам.
Расширенная сортировка и фильтрация облегчают пользователям поиск
7. Раздел «О компании»
Данный раздел необходим для повышения доверия пользователей к вашей компании, его можно разместить в главном меню или футере.
Работа студии. Раздел «О компании» размещен в футере
8. Текстовые ссылки
Такие ссылки используют для пояснения информации и удержания внимания пользователя на сайте. Они могут как вести на другие разделы, так и открывать всплывающие окна.
Работа студии. Текстовые ссылки органично смотрятся в тексте и не перегружают его
9. «Хлебные крошки»
Такое интересное название пришло к нам из известной сказки про Гензель и Гретель, в которой хлебные крошки указывали им путь. Это вспомогательные навигационные элементы в верхней части страницы — слева от того раздела, где сейчас находится пользователь. Они кликабельны и позволяют вернуться на один или несколько шагов обратно.
Ozon активно использует «хлебные крошки»
10. Призывы к действию
Для призыва к целевому действию можно использовать отдельную кнопку, ведущую в соответствующий раздел. Главное здесь — придерживаться логических взаимосвязей.
Работа студии. На сайте кнопки «Оставить заявку» расположены под каждым предложением компании
11. Кнопка возврата
На площадках с большим объемом информации (например, в интернет-магазинах) в шапке страницы можно разместить кнопку в виде стрелки, направленной вверх. Она поможет пользователям быстро вернуться на предыдущую страницу, не прокручивая большие массивы данных.
Кнопка возврата крупно показана справа
12. URL-адрес страницы
Очень важно вынести в адресную строку названия разделов, чтобы пользователь мог понять, в какой части сайта находится сейчас. URL должен отражать суть конкретной страницы.
13. Визуальные эффекты
Не забывайте о важности визуальных эффектов. На кликабельных кнопках значок мышки должен визуально изменяться. Если мы используем лендинг, дизайнер может заложить визуальную навигацию при переходе от одного блока к другому — стрелку или перечисление блоков. Важно выделять разделы, где находится пользователь, другими цветами или подчеркиванием.
Кнопки с дополнительной анимацией привлекают внимание и увеличивают кликабельность.
Работа студии. Кнопка «Записаться» меняет цвет при наведении курсора. На сайте реализованы различные анимационные эффекты
14. Футер
В этой области сайта дублируются разделы главного меню, располагаются контакты, документы, политика конфиденциальности и другая информация, диктуемая контекстом. Часто футер делают контрастным остальному сайту, но это отнюдь не обязательный прием. Здесь открывается большой простор для фантазии дизайнера.
Работа студии. Футер включает все необходимые разделы
Важные правила удобной навигации
1. Не утруждайте пользователя новыми вкладками
Страницы не должны открываться в новых окнах. Это неудобно для пользователя, так как увеличивает количество вкладок в браузере и усложняет ориентацию на сайте.
Удобно сделана странца параметров. Не нужно переходить в новые разделы — достаточно навести курсор на часть объекта
2. Располагайте контакты на видном месте
Не размещайте контактную информацию далеко от пользователя, привычное расположение — в шапке сайта или футере. А адрес лучше расположить в футере или на отдельной странице.
Работа студии. Удобное расположение контактной информации. Пользователь видит номер и может связаться сам или «Заказать звонок»
3. Не прячьте меню
Меню должно располагаться на видном месте, не стоит прятать его в «бургер». Желательно закрепить меню и сделать его неизменным при переходе на другие страницы, чтобы ничего не путало пользователя.
Яркая, чистая посадочная страница, но нет закрепленного меню. Оно вынесено в нетрадиционный бургер, что может вызвать затруднения у пользователя
4. Используйте подсказки
В случаях, когда структура меню сложная и перенасыщенная, можно использовать систему информационных подсказок, которые обычно закрепляются в главном меню справа. Они открываются во всплывающем окне и преследуют пользователя при переходе на любую страницу.
Подсказки закреплены в главном меню
5. Добавляйте стимулирующие разделы
Для увеличения времени, проведенного на сайте, часто вводят дополнительные навигационные категории — рекомендованные товары, недавно просмотренные страницы, полезные статьи и другие потенциально интересные пользователю разделы.
Работа студии. Возможность прочитать о компании в СМИ
6. Помните про информационные ссылки
Самое удачное место для размещения информационных ссылок — футер. В него обычно помещают то, что не поместилось в главном меню. Это могут быть документы, адреса, вакансии, доставка и другие второстепенные разделы.
Работа студии. Информативные ссылки для больших объемов информации
7. Не забывайте про правило логотипа
Ваш логотип должен вести на главную страницу — это не только удобство, но и привычка среднестатистического пользователя.
Работа студии. Пользователь всегда окажется на главной странице, нажав на логотип
8. Группируйте страницы
Чем правильнее сгруппирована информация, тем лаконичнее и понятнее будет навигация. Не дробите разделы, которые можно поместить в один. Если у вас группа компаний, не перечисляйте каждую в отдельном разделе — разместите всю информацию на одной странице «О группе компаний».
Работа студии. При такой группировке в один блок помещается больший объем информации
9. Расставляйте приоритеты
Продумайте первичные и вторичные элементы. Например, первичным будет главное меню, вторичным — боковое и «хлебные крошки». Не путайте пользователя и выносите в главное меню только основные разделы.
Работа студии. Правильно расставленные акценты на главной странице
10. Используйте дизайн
Не забывайте выделять анимацией, цветом или шрифтом разделы и элементы сайта. Например, ссылки лучше подчеркивать, а «хлебные крошки» — делать большим размером шрифта, нежели основной текст. Пробелы между блоками лендинга не стоит делать слишком большими, чтобы не утомить пользователя долгой прокруткой.
Курсор мыши и кнопки также должны участвовать в дизайн-концепции и подталкивать пользователя к целевому действию.
Правильная навигация сайта содержит в себе гораздо больше нюансов, чем можно описать в одной статье. Главное — помнить, что определяющим фактором при ее разработке является логика и пользовательский опыт.
Попробуйте поставить себя на место пользователя и определить, как ему будет удобнее передвигаться по вашему ресурсу.
Креативные дизайн-эксперименты — это замечательно, но перед их применением стоит учитывать привычные приемы, используемые пользователем в данном сегменте. Составьте список сайтов, на которых вы чувствовали себя наиболее комфортно, и используйте их опыт для вашего собственного ресурса.
Как достичь максимума
Фото на обложке: Shutterstock / William Potter
Поговорим о правильном меню
Поговорим о правильном меню
Какое оно, правильное меню? Каждый из вас отвечает на этот вопрос по-своему. Иногда лаконично, иногда в 2-3 строки с пунктами-предложениями. Было даже дело с 90 пунктами (если считать выпадающее меню).
Меню — основной элемент навигации. Оно не должно напрягать читателя. Пользователь должен добираться до нужной информации в минимальное число кликов с минимальными передвижениями по монитору (это в идеале). Для меню есть несколько простых принципов организации.
1. Названия пунктов меню должны быть короткими и как можно более точно описывать, что увидит пользователь, нажав на этот пункт.
2. Число пунктов основного меню
Ученый-психолог Дж. Миллер исследовал свойства кратковременной памяти человека и результат его работы активно применяются в построении интерфейсов, то бишь и внешнем виде сайтов. А принцип очень простой.
Кратковременная память человека способна запоминать в среднем девять двоичных чисел, восемь десятичных чисел, семь букв алфавита и пять односложных слов — то есть человек способен одновременно помнить 7 ± 2 элементов.
Таким образом, кратковременная память — «кошелёк», в который можно «положить» одновременно семь «монет». Причём память не пытается анализировать смысл информации, важны лишь внешние, физические характеристики, то есть не важно, какие «монеты» находятся в «кошельке» — доллар или цент, главное чтобы их было семь. Если количество элементов больше семи (в крайнем случае, девяти), то мозг разбивает элементы на группы таким образом, чтобы количество запоминаемых элементов было от 5 до 9. (Взято из википедии)
Так формируется еще один принцип правильного меню: в основном меню число пунктов должно быть не больше 9. В идеале 7.
Преимущества. Меню запоминается практически с первого взгляда и легко воспринимается. Значит, читатель легко определит, о чем сайт, какую информацию на нем можно найти и где найти нужную информацию.
Избыточные пункты можно спрятать в меню второго уровня (там правило семи пунктов также действует) или организовать навигацию по-другому, например, сделать второстепенное меню с помощью виджета произвольного меню.
Недостатки. При таком подходе придется вычищать из своего меню названия всех страниц и статей 🙂 Если хотите обратить на что-то внимание, выделите это по-другому.
Обратите внимание, что если меню двухуровневое, то чаще всего основной пункт меню остается незадейстованным, т.е. на него почти не нажимают.
3. Доступность меню
Меню должно быть доступно всегда, на всех страницах. Пользователи привыкли его искать в верхней и левой части страницы. В наших шаблонах в основном верхнее меню. Основная ошибка тут — громадная картинка в шапке, которая не несет полезной информации, но иногда очень сильно смещает меню вниз, так, что читателям приходится листать страницу, чтобы его увидеть.
Надеемся, эти простые рекомендации помогут вам усовершенствовать сайты и сделать их более доступными и удобными 🙂
Каким должно быть меню сайта
Цитатник веб-разработчиков В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.
Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:
Как построен курс
Общепринятая градация квалификации разработчиков в рамках курса обозначает что:
Начальные требования к подготовке
Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):
У нас часто спрашивают, сколько нужно заплатить
Ещё у нас есть Академия 1С-Битрикс, где можно обучиться на платной основе на курсах нашей компании либо наших партнёров.
Баллы опыта
уроке.
Тесты
После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.
Комментарии к статьям
Что дальше?
Одновременно с изучением курса Разработчик Bitrix Framework вам придётся обращаться к информации о других технологиях Bitrix Framework. Эта информация размещена в следующих курсах:
Для преподавания оффлайн
Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).
Если нет интернета
Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox
iPhone:
FBReader
CoolReader
iBook
Bookmate
Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome
iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса.
Меню сайта — что это такое простыми словами? А также что означает адаптивное меню для сайта: примеры
Если вы хотите сделать сайт комфортным для пользователей, то стоит подумать о меню сайта.
От его качества зависит удобство всех посетителей.
Если меню выполнено умно, то с любой страницы сайта человек может попасть туда, куда ему нужно.
Меню сайта — что это такое простыми словами?
Если говорить простым языком, то меню сайта – это лишь набор ссылок.
По ним пользователь может перейти.
Оно нужно для того, чтобы быстро перейти из одного раздела в другой.
Важно понимать, что темп жизни растёт, а это значит, что люди ищут возможности как можно быстрее получать всю необходимую информацию.
Поэтому качественное меню сайта сильно влияет на количество посетителей, активность и вовлечённость.
Не так важно его визуальное оформление, как создание умной структуры.
Поэтому при создании сайта стоит большое внимание уделить структуре.
Каждый раздел должен называться лаконично, но в то же время информативно.
Подразделы должны быть жёстко привязаны по смыслу к разделам.
Также есть несколько вариантов меню.
Например, есть главное.
Это большая строка, которая есть на каждой странице.
Обычно оно располагается вверху, но есть и Youtube (там главное меню находится справа).
Ещё есть второстепенное меню.
Оно бывает на конкретных страницах (например, в интернет-магазине при поиске товара) и располагается чаще сбоку.
Как сделать красивое меню для сайта? — смотреть видео
Что означает адаптивное меню для сайта?
Конечно же, сейчас люди заходят на сайты не только с компьютера, но ещё и с мобильных устройств.
Поэтому адаптивные сайты и адаптивные элементы продолжают набирать популярность.
Из-за того, что у телефона и компьютера разное расширение, нужно делать отдельную версию сайта для каждой из платформ.
И меню, как важный элемент графической составляющей тоже должно быть адаптивным.
Для этого нужно отдельно написать код для мобильных устройств.
И тут важно понимать некоторые различия между мобильными устройствами и компьютерами.
Из-за того, что на телефоне другое соотношение сторон, верхние плашки не кажутся удобными. Намного приятнее работать с боковой панелью.
Но, учитывая, что на экране мало место, желательно прятать меню, оставляя только кнопку перехода.
И не стоит забывать про второстепенное меню.
Опять же, на мобильных устройствах даже второстепенное меню может не поместиться.
Поэтому оно тоже должно открываться по кнопке.
Чтобы не грузить лишний раз телефон, стоит сделать так, чтобы второстепенное меню открывалось на той же вкладке.
Примеры адаптивного меню
Если вам нужны примеры адаптивного меню, то можете открывать любые популярные сайты и приложения.
Мы здесь разберём на примере Вконтакте и Ютуба.
Эти два сайта выбраны не случайно. Оба они выполнены в современном стиле.
Главное меню убрано вбок, а на Ютубе вообще скрыто.
Также на каждом из сайтов есть и второстепенное меню (правда, об этом мало кто знает).
Там главное меню находится сбоку.
Обычно, это неудобно, потому что при прокрутке вниз меню заканчивается. К тому же, это просто выглядит непривлекательно.
Вконтакте же решили эту проблему тем, что отделили область по бокам.
Также добавили кнопку для быстрого возвращения наверх.
В мобильной же версии главное меню всегда на экране.
Оно расположено значками на небольшой плашке внизу.
Одна из кнопок открывает полноценную версию меню.
Второстепенное меню открывается в обеих версиях по нажатию на кнопку.
Встретить его можно во время поиска друзей.
Мобильная версия Ютуба ничем не отличается от Вконтакте.
И главное меню, и второстепенное располагаются также.
А вот в версии для компьютера уже будут отличия.
Главное из них – спрятанное меню.
Оно открывается при нажатии на кнопку вверху.
При этом меню двигается вместе с пользователем, что намного удобнее, чем вариант для Вконтакте.
Все разделы интуитивно понятны.
Второстепенное меню вы встретите, если решите воспользоваться фильтрами.
Опять же, они открываются по нажатию на определённый значок.
При этом открывается не на отдельной вкладке, а прямо в поисковике и не занимает много места.
Но это уже просто особенности Ютуба.
Там не нужно добавлять много пунктов во второстепенное меню.
Заключение
Меню – это главная часть любого сайта.
Если оно качественное, то пользователи никогда не потеряются.
С его помощью можно быстро перейти в нужный раздел. При этом красивый дизайн пойдёт лишь в плюс.
Есть ещё и второстепенное меню.
Оно используется при поиске.
Чаще всего оно встречается в интернет-магазинах и социальных сетях.
Адаптивное меню – это меню, которое одинаково хорошо смотрится и на мобильных устройствах, и на компьютере.
Для этого на телефонах стоит ставить плашки внизу с основными элементами.
А на компьютере можно добавить меню вверху.
Также можно добавить меню сбоку, но важно понимать, что нужно будет либо отказаться от использования всей области, либо прятать меню (кстати, хороший вариант).
P.S. А еще мы предоставляем услуги по продвижению ваших аккаунтов и групп в социальных сетях. Ознакомиться с ними вы сможете на этой странице
P.S.S. Чтобы написать данную статью, было потрачено много сил и времени. И если она принесла пользу вам, то возможно она принесет пользу и вашим друзьям.
Для этого нажмите и поделитесь с друзьями в социальных сетях. А для нас это будет лучшей благодарностью и мотивацией на будущее!
А хотите первыми узнавать об обновлениях? Подписывайтесь на новости блога