Краткое содержание: Слайдеры малоэффективны. Однако в некоторых случаях они бывают полезны, подробнее об этом в данной статье.
Начнём с определения:
Слайдер — динамический блок страницы. Чаще всего содержит фотографии, которые сменяют друг друга поочерёдно, автоматически или при нажатии на элементы навигации.
Открывая сайт по интересной нам теме, мы часто сталкиваемся со слайдером/каруселью/слайд-шоу на главной странице. Добавлять их в данную часть сайта — довольно распространённая практика для многих веб-дизайнеров. Есть несколько возможных причин, почему это так популярно:
- Это крайне простое и быстрое решение. Если дизайнер не знает, что добавить на сайт, то первой идеей обязательно будет слайдер.
- Часто клиенты настаивают на его добавлении.
- Во многих конструкторах сайтов есть функция добавления карусели.
- Выглядит красиво.
Основные плюсы и минусы использования слайдера
Плюсы:
- Представление информации в графическом виде. Большинство пользователей предпочитают видеть красивые и наглядные изображения вместо огромного полотна текста.
- Экономия места. На одном экране может поместиться сразу множество крупных изображений, постепенно сменяющих друг друга.
- Привлекательный вид. Карусель с тщательно подобранным контентом может быть красивым декоративным элементом.
- Стимуляция интереса к контенту, размещённому на сайте.
- Увеличение конверсии в некоторых случаях.
Минусы:
- Долгая загрузка. Из-за слайдера страница загружается значительно дольше, чем могла бы без него. Если страница грузится слишком долго, то пользователь может просто закрыть её и начать искать другую.
- Слайдеры не подходят для побуждения к действию. По большей части они предназначены для демонстрации контента. Большая часть пользователей хочет быстро и незамедлительно найти то, за чем они зашли на сайт. Карусель вынуждает использовать элементы управления или ждать, пока все слайды прокрутятся до конца самостоятельно. Это требует больше усилий и времени, чем прямой переход по ссылке в меню навигации, многим не нужна такая проблема.
- Вред SEO-продвижению. Слайдер не содержит текста, необходимого поисковым системам для лучшего ранжирования, а также, как упоминалось выше, сильно увеличивает время загрузки всей страницы.
- Автоматическая прокрутка раздражает. Если карусель становится слайд-шоу с автоматической прокруткой контента, то это раздражает пользователя, не даёт ему сконцентрироваться и почувствовать контроль над ситуацией. Вместо автоматической прокрутки лучше использовать кнопки навигации.
Исследования
Университет Нотр-Дам, 2013 г.
Эрик Раньон (технический директор по маркетинговым коммуникациям Университета Нотр-Дам) провёл исследование (с середины октября 2012 г. по 22 января 2013 г.) на тему взаимодействия пользователей с каруселями. В ходе исследования на сайте nd.edu был размещён слайдер. Больше всего кликов пришлось на первый элемент — 84%, остальные слайды получили всего 4% кликов, результаты были получены с помощью Google Analytics.
Автоматически перелистывающаяся карусель, 2013 г.
В исследовании также было проведено наблюдение над сайтом со слайдером, который перелистывался автоматически. В целом он получил самое большое количество кликов, однако проблема оставалась прежней — каждый последующий слайд получал значительно меньше кликов, чем предыдущий:
Йоркский университет, 2013 г.
Пол Келли (менеджер по цифровым платформам и разработкам в Йоркском университете) провёл схожее исследование (с 20 февраля по 27 марта 2013 года).
Как и в предыдущем исследовании мы можем заметить, что больше всего внимания уделяется первому слайду, остальные получают его кратно меньше.
Исследование Mobify, 2015 г.
Наконец, мы можем изучить исследование, в котором слайдеры были размещены не на главной странице, и это (спойлер) сильно улучшило их конверсию! Слайдеры были использованы на страницах сведений о продукте в качестве галереи изображений, то есть они показывали товар во всех деталях. Кроме того, автоматическая прокрутка не применялась, чтобы посмотреть следующий слайд пользователь должен был сделать свайп/касание самостоятельно.
Кайл Питт из Mobify 9 февраля 2015 года опубликовал следующие результаты своего исследования:
Эти данные демонстрируют, что по крайней мере 64% пользователей, которые взаимодействовали с первым слайдом, взаимодействовали и со вторым. Более того спад активности между первым и последующими слайдами был намного менее резким, чем во всех предыдущих опытах.
Под взаимодействием подразумевалось продвижение карусели. Кайл Питт не остановился на этом, он также провёл исследование относительно прямого взаимодействия (увеличения картинки) с каждым слайдом.
Данный график сильно напоминает данные, полученные Эриком Раньоном из университета Нотр-дам, однако отличие заключается в том, что интерес к последующим слайдам снижался более плавно. 45,9% всех прямых взаимодействий произошли после первого слайда, в то время, как слайдер Нотр-дама получал значительную часть отклика лишь на первом слайде.
Можно сказать, что в случае Mobify пользователь заинтересовался в слайдере, начал его изучать, посчитал его полезным, а в случае Нотр-дама пользователь увидел первый слайд карусели, может быть даже рассмотрел его, но после равнодушно прошёл мимо, не обратив внимания на все последующие слайды.
"Правильное" использование слайдера/карусели/слайд-шоу
Итак, после всех описанных мной исследований мы можем увидеть закономерность — неуместное использование слайдера приводит к равнодушию пользователя, никто не смотрит дальше 1-го слайда. Однако если разместить карусель "правильно" — это не только вызовет большее внимание, но и увеличит получаемую конверсию.
Я решила составить небольшую инструкцию по тому, как лучше размещать слайдеры, чтобы добиться необходимого результата.
Для чего лучше всего подходят слайдеры?
- Изображение товаров на коммерческих сайтах. Множество фотографий одной вещи с разных углов позволяет покупателю рассмотреть товар более детально, благодаря этому он с большей вероятностью приобретёт выбранный продукт.
- Фотографии работ для портфолио. Суть та же, что и в изображениях товара. Потенциальный заказчик хочет узнать, что может ожидать от специалиста и лучший способ это сделать — рассмотреть как можно больше его проектов.
- Выбор тарифного плана или подходящего предложения. Пользователь заинтересован в том, чтобы просмотреть каждый предложенный вариант.
- Изучение отзывов. Целью в данном случае будет увидеть как можно больше разных мнений о товаре/услуге.
- Предвкушение впечатлений от бронируемого места. Например, гостиницы, театра, ресторана.
Как "правильно" создавать слайдеры?
- Задумайтесь о предназначении. Если вы добавляете карусель без причины или только для красоты, то высока вероятность того, что от неё будет больше вреда, чем пользы.
- Поддерживайте единую тему. Каждый слайд должен соответствовать одной выбранной теме, например, 5 слайдов с одним товаром с разных ракурсов/4 слайда, посвящённые раскрытию одной проблемы/5 слайдов с событиями, запланированными на текущий месяц.
- Не перебарщивайте с эффектами. Анимация и оформление должны быть простыми. Вычурные вау-эффекты не играют на руку дизайну.
- Размещайте только один призыв к действию. Если вы всё-таки посчитали необходимым добавление призыва к действию (будь то форма, переход на другую страницу или что-либо иное) в ваш слайдер, то сделайте его единственным и отображаемым на каждом слайде. Не стоит вынуждать пользователя искать среди всех слайдов один подходящий.
Постскриптум
Конечно, каждый человек имеет право на своё мнение. Вы не обязаны следовать тем советам, что я описала выше, потому как это не закон, а лишь рекомендация, основанная на опыте многих специалистов, моё мнение субъективно.
К тому же для слайдеров может быть и множество других уместных применений, помимо тех, что нашла я. Если у вас появилась идея — пожалуйста, поделитесь ей в комментариях^^
Источники
*Макеты для примеров созданы мной, фотографии, использованные в макетах, доступны в открытом доступе.
- Исследование университета Нотр-дам: https://erikrunyon.com/2013/01/carousel-interaction-stats/
- Исследование Йоркского университета: http://yorkwebteam.blogspot.com/2013/03/are-homepage-carousels-effective-aka.html