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

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

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

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

Рис. 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. Полностью останавливайте автоматическую ротацию после того, как пользователь кликнул на элементы управления каруселью.

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

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

9. Сенсорные устройства: поддерживайте жесты перелистывания в дополнение к другим элементам управления.

10. Мобильные устройства: убедитесь в том, что текст на слайдах остается читаемым, если вы уменьшаете макет рабочего экрана.

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

4. «Преимущества» и модуль «О компании»

Модуль «Преимущества» на сайте

Следующими модулями после «шапки» сайта, как правило, идут преимущества фирмы и модуль «О компании» («О нас, «О центре»).

На сайтах интернет-магазинов, минуя модуль «Наши преимущества», сразу же идет витрина товаров.

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

Правила создания модуля «Наши преимущества»:

1. Желательно ограничиться 3-5 преимуществами.

2. Если преимуществ больше, чем пять, то желательно расположить их в два ряда.

3. Снабдите каждое преимущество иконкой.

4. Создайте заголовок преимущества и краткое описание.

5. Можно добавить в преимущества не иконку, а фотографию по теме.

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

Неправильно: «большой опыт».

Правильно: «20 лет опыта».

Неправильно: «много учеников».

Правильно: «1000 учеников в год».

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

Рис. 67. Модуль на сайте «Преимущества компании»

Как правильно составить текст модуля «Преимущества»:

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

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

Модуль «О компании»

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

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

Рис.68. Модуль «О компании»

Модуль о компании включает в себя:

– Заголовок текста.

– Текст о компании (краткий, 2-3 абзаца).

– Кнопка «Подробнее о компании».

– Фото руководителя, фото