логотип Taptop
Сайдбар: улучшаем юзабилити сайта
Навигация по статье:

    Сайдбар: улучшаем юзабилити сайта

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

    Почему не стоит отказываться от сайдбара?

    Sidebar визуально разграничен с основным контентом на странице портала, поэтому сразу привлекает внимание посетителя. Такая панель позволяет:

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

    Итак, зачем нужен sidebar мы определились. Осталось решить, с какой стороны размещать колонки — слева или справа?

    Выбираем место для колонки

    Расположение этого элемента интерфейса на странице во многом зависит от ее содержимого. Веб–дизайнеры разделяют сайдбары по:

    Местоположению

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

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

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

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

    Степени подвижности

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

    Что стоит добавить в сайдбар?

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

    Навигация и управление

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

    Виджеты социальных сетей

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

    Информация об авторе или компании

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

    Конверсионные элементы

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

    Реклама

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

    Рекомендации

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

    Оформление sidebar: общие правила

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

    • Ширина колонок в развернутом виде не должна превышать 30% от общей ширины страницы, а их высота — пересекать границы экрана.
    • Оставьте левый сайдбар для меню, а правый — для дополнительной информации. Большинству пользователей привычно именно такое положение блоков.
    • Выделяйте отдельные компоненты боковых панелей контрастными цветами, чтобы они не сливались с другими элементами сайта и были хорошо видны. Не забывайте, что оттенки, используемые в этой области, должны сочетаться с выбранной для портала цветовой палитрой.
    • Чтобы привлечь внимание пользователей, не отвлекая от просмотра основного контента, выбирайте для колонок шрифт на 20% больше.
    • Не забывайте об адаптивности: обязательно проверьте, насколько читаем текст в данной области с разных устройств и экранов. Не злоупотребляйте колонками, если ваш сайт просматривают в основном со смартфонов или гаджетов, или отдайте предпочтение скрытым сайдбарам.

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

    Может быть интересно
    все статьи
    Оставить заявку
    Имя
    Это поле обязательно для заполнения
    Телефон
    Это поле обязательно для заполнения
    Почта
    Это поле обязательно для заполнения
    Радио группа:
    Это поле обязательно для заполнения
    Комментарий
    Это поле обязательно для заполнения
    Нажимая на кнопку, вы принимаете условия
    политики конфиденциальности
    Спасибо!
    Форма отправлена
    Что-то не так.
    Попробуйте позже