Ирина Никулина – Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов (страница 21)
Стандартный слайдер для сайта представляет собой смену кадров: 2-5 картинок, которые сменяют друг друга через определенный временной интервал или при ручном нажатии на переключатели.
В целом можно выделить следующие составные
– Экран с фото или видео.
– Средства навигации (стрелочки, кнопочки).
– Маркеры с общим количеством слайдом и текущим состоянием.
Требования к слайдеру
Большинство посетителей сайта не успевают просмотреть все слайды, потому что не находятся в шапке сайта достаточно долго, особенно, если представленные слайдеры необходимо пролистывать вручную.
Это означает, что в карусели важна последовательность, потому что первый слайд получит гораздо больше внимания, чем последующие. В автоматически вращающейся карусели нередко первый слайд получает более 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 учеников в год».
Сформулируйте заголовки лаконично, используя цифры и конкретику.
Прежде чем писать текст о преимуществах товара или услуги, проведите анализ конкурентов и клиентов. Определите, что отличает товар или услуги вашего заказчика от подобных на рынке. Что ваш сайт может предложить, чего нет у конкурентов.
Модуль «О компании»
Этот модуль повышает лояльность целевой аудитории, уровень доверия посетителей сайта за счет подробного рассказа о компании, фотографий руководителя, цифр из истории компании и т.д.
Считается, что этот модуль посетители сайта часто проматывают, а если и читают, – то в основном первый абзац. Так бывает при первом просмотре сайта, но посетители сайта частенько возвращаются к этому модулю, чтобы убедиться в правильности сделанного выбора (например, в принятии решения заказать услуги именно этой компании).
– Заголовок текста.
– Текст о компании (краткий, 2-3 абзаца).
– Кнопка «Подробнее о компании».
– Фото руководителя, фото коллектива, фото офиса или производства, фото продукции.
– О компании в цифрах: иконки и краткое описание.
– повысить доверие к фирме,
– запомниться, усилить бренд,
– донести ценности компании,
– сформировать имидж,
– привлечь подходящих клиентов и отсечь нецелевых,
– ответить на часто возникающие вопросы,
– показать все преимущества компании,