Меню

Сайдбар для блога, новостного сайта и интернет магазина

Создание сайтов5129

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

Сайдбар для блога

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

  1. Сайдбар должен располагаться справа от области контента. Экспериментально было выявлено, что правое расположение сайдбара пользователем воспринимается лучше, чем левое, причём в несколько раз. Обусловлено это тем, что читаем мы с лева на право. Читать или просматривать сайт мы начинаем с основной части сайта – области контента, и после прочтения нашему взгляду удобнее сместится дальше вправо, чем вернутся назад влево;
  2. В самом верху сайдбара должно располагаться навигационное меню. Пользователь не должен искать меню по всему вашему сайдбару, который, к слову, может быть достаточно объёмным;
  3. В середине сайдбара должны располагаться элементы, которые могут быть полезны вашим пользователям. К таким элементам можно отнести ссылки на проводимые конкурсы или популярные статьи, ссылки на новые и самые комментируемые статьи, формы подписки на новости, ссылки на соцсети, различные информеры, графики и прочее. Если сайдбар получается довольно длинным, то не лишним продублировать навигационное меню в самом низу сайдбара;
  4. При наведении на любую ссылку из навигационного меню, должна появляться всплывающая подсказка (заполненный атрибут «alt»). 95% движков позволяют написать подробное описание к категории. Делается это для того, чтобы пользователь мог узнать подробнее о содержании категории, не переходя в неё.

Сайдбар для информационного (новостного) сайта

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

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

Сайдбар для интернет-магазина

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

  1. В самом верху правого сайдбара размещается корзина с «помещёнными» туда товарами и суммарной их стоимостью. Самое главное мы помещаем в самое удобное место;
  2. На втором месте - контакты и адреса магазина;
  3. Далее, в правом сайдбаре располагаем вещи, которые могут быть интересны нашему покупателю – популярные товары, похожие товары, новые товары, уценённые товары и т.п.;
  4. В левом сайдбаре можно размещать объявления о скидках, акциях и пр. Там же можно разместить ссылку на чат со службой поддержки и ссылку на группы в соцсетях;
  5. Футтер или нижний сайдбар мы тоже будем использовать. Тут должны быть ссылки на условия и сроки доставки, всевозможные способы оплаты, ссылка на отзывы клиентов, ссылка на контакты интернет-магазина и тому подобная информация;

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

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

На этом у меня всё. Как обычно – жду ваши вопросы и предложения в комментариях.

С вами был >Денис Скрипник. Всем до скорого!

Текущая оценка Общий бал: 3 Проголосовало Проголосовало: 2

help_share

Данная публикация была вам полезна?

Помоги автору сайта, расскажи друзьям...

Комментариев: 3
  •   | 11 декабря 2013 в 18:22:44
    img

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

  •  Денис Скрипник | 11 декабря 2013 в 19:03:57
    img

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

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

  •   | 12 декабря 2013 в 10:06:40

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

Буду благодарен за каждый оставленный вами комментарий

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

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Похожие публикации