Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов

В меню часто бывают ссылки на разделы каталога, новинки, акции (в случае интернет-магазина). Если в хедер не поместились ссылки «О компании», «Контакты» и «Доставка и оплата», – добавьте их в основное (ТОП) меню.

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

Баннер в шапке

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

На баннере (слайдере) могут располагаться следующие элементы сайта:

– Оффер (заголовок сайта).

– Кнопка «Перейти в каталог», «Узнать подробнее» и т.д. Это кнопки CTA (призыв к действию).

– Краткие преимущества фирмы.

– Перечень основных продуктов или услуг.

– Стрелки или иконки смены кадров.

– Свежие акции, спецпредложения для интернет-магазинов.

– Форма заявки или обратной связи.

– Слоган компании.

– Фоновая картинка или видео, привлекающие внимание посетителей и соответствующие теме сайта.

Рис. 65. Пример баннера с формой обратной связи и преимуществами

Слайдер

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

Популярность слайдеры приобрели с распространением javascript-фреймворков. Именно с помощью них создаются различного рода эффекты анимации на слайдерах. Сейчас существует достаточно много готовых решений, не требующих программирования, например RoyalSlider, SlideDeck, NivoSlider, Supersized и другие. Для популярных систем управления сайтом разработаны различные плагины с реализацией слайдеров с множеством эффектов. К примеру, для WordPress это плагин Con Slider, Slideshow Gallery, Content Slide. В большинстве случаев слайдеры создаются на основе ресурсов библиотеки JQuery, однако собственный слайдер можно разработать и средствами HTML5 и CSS3 практически без использования скриптов!

На конструкторах сайтов существуют готовые модули слайдеров, в которые можно вставить фоном фотографию или видео.

Устройство слайдера сайта

Стандартный слайдер для сайта представляет собой смену кадров: 2-5 картинок, которые сменяют друг друга через определенный временной интервал или при ручном нажатии на переключатели.

В целом можно выделить следующие составные элементы любого слайдера:

– Экран с фото или видео.

– Средства навигации (стрелочки, кнопочки).

– Маркеры с общим количеством слайдом и текущим состоянием.

Рис. 66. Слайдер сайта со сменой картинок

Требования к слайдеру

Последовательность слайдов

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

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

Время между слайдами должно быть 5-6 секунд.

Логика авторотации на десктопах

Авторотация (режим вращения) увеличивает воздействие контента через слайды и показывает пользователям, что этот элемент интерактивен. На самом деле, в то время как у «ручных» каруселей ничтожный показатель кликов – от 1 до 2%, автоматически вращающиеся слайдеры могут иметь достойную кликабельность – от 8 до 10%.

10 требований к слайдерам

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

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

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

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

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

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

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