СЛАЙДЕР НА ГЛАВНОЙ СТРАНИЦЕ
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
103
ГАЙДЛАЙНА
Что мы чаще всего встречаем первым делом, зайдя на сайт интернет-магазина? Это слайдер с баннерами на главной странице. Как сделать его цепляющим, удобным? Что в нем стоит разместить? Разберем 103 гайдлайна с примерами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. БАЗОВЫЕ ТРЕБОВАНИЯ
В рамках первого экрана
Разместите слайдер в рамках первого экрана главной страницы, чтобы познакомить клиента с ключевыми предложениями без каких-либо действий с его стороны.
Не занимает 100% по высоте
Слайдер не должен занимать 100% высоты экрана (или превышать ее). Иначе есть риск, что клиент не заметит, что под слайдером есть еще контент, а страница прокручивается.
Занимает всю ширину экрана
Сделайте так, чтобы весь фокус внимания в первые моменты нахождения на сайте был именно на слайдере, не снабжайте его какими-либо прочими объектами по бокам.
Слайдов не слишком много
В стремлении познакомить клиента со всем разнообразием своих предложений и скидок, позаботьтесь о том, чтобы он не состарился, докрутив до конца слайдера.
Слайдов не слишком мало
Но и всего пара слайдов может смотреться куце, создавая впечатление, что у вас слишком мало предложений. Стандарта по числу слайдов нет – ищем во всем золотую середину.
Порядок слайдов
Шансы, что клиент увидит каждый последующий баннер в слайдере, ниже, чем предыдущий. Поэтому в начале размещайте наиболее важный и релевантный контент.
2. БАННЕРЫ В СЛАЙДЕРЕ
Контент релевантен
Контент слайдера должен быть релевантным для клиента. Вот хороший анти-пример: какая ценность для москвича от того, что у вас в Брянске открылся новый магазин?
Привязка к географии
Если у вас есть важные новости для локальной аудитории, можно связать отображение баннера с городом, который выбрал клиент.
Привязка ко времени суток
Баннеры можно обновлять в зависимости от времени суток. В примере баннер «Что на обед?» не меняется, но было бы круто, если бы вечером он менялся на «Что на ужин?»
Привязка к customer journey
Баннеры можно сделать более релевантными, если учитывать тип клиента: например, показывать баннер со скидкой на первый заказ только новым клиентам.
Контент привлекает внимание
Суть слайдера на главной – привлечь внимание и импульсивно заинтересовать клиента. Не стоит смазывать первое впечатление, размещая в нем что-то вторичное и постное.
Контент легко считывается
Клиент должен считать ключевой посыл моментально. Если вы заставите его вчитываться в массу текста, есть риск, что он не станет заморачиваться и просто пропустит баннер.
В хорошем качестве
При встрече большого пикселящего баннера прямо на первом экране главной страницы не у каждого клиент возникнет желание продолжить совершать покупки на сайте.
Скорость загрузки
При этом важно также соблюсти баланс между качеством и размером изображения. Клиент вряд ли будет ждать его загрузки несколько секунд после перехода на сайт.
Содержит кнопку СТА
Добавив в изображение кнопку с призывом к действию, можно дополнительно побудить клиента ознакомиться с тем, что вы предлагаете.
Интерактивные кнопки СТА
Вместо статичных изображений кнопок на баннерах можно разместить реальные кнопки, реагирующие на наведение и клик. Это повысит уровень интерактивности интерфейса.
Внедрение товаров в баннеры
Баннеры можно сделать еще более интерактивными, реализовав функцию отметок конкретных товаров на изображениях.
Таймеры акций
Если в рамках слайдера вы делитесь с клиентом информацией об акции, ограниченной во времени, ее можно снабдить таймером, чтобы дополнительно привлечь внимание клиента.
Контент не обрезается
Подготавливая контент для баннера, учитывайте его размеры. Если ключевой контент будет обрезаться, можно смазать впечатление о сайте с первой же страницы.
Единообразие дизайна элементов
Здесь я не говорю о том, что баннеры должны делаться по единому шаблону, но хотя бы кнопки СТА стоит выполнить в схожем дизайне. Вот от такого лучше воздержаться:
GIF-анимация?
Если в вашем слайдере и так уже есть анимация переключения, из-за GIF-ок в баннерах уровень анимации может зашкалить. Или не согласны? Напишите в комментариях.
Текст различим на фоне
Базовый момент: размещая текст в баннере, убедитесь, что он будет легко читаться на фоне изображения, поверх которого он накладывается.
Текст не мельчит
Сделайте размер текста на основном слайдере достаточно большим. Клиент не должен испытать затруднений с его считыванием в самом начале своего пути на сайте.
Текст адаптирован под мобильные
Хорошей практикой также будет сделать адаптированные версии баннеров для мобильных устройств, текст на которых будет достаточно крупным и будет легко читаться.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. ИДЕИ КОНТЕНТА БАННЕРОВ
В этом блоке собраны темы, которые покрывают, наверное, 95% всего контента, с которым я встретился, просматривая баннеры магазинов из рейтинга Data Insight Top-100.
Акции и спец.предложения
Подавляющее большинство интернет-магазинов использует слайдер на главной для того, чтобы ознакомить клиента с текущими акциями и спец.предложениями.
Распродажи
Если у вас скоро стартуют или уже проводятся распродажи, грех не рассказать клиенту об этом в рамках самого заметного элемента главной страницы.
Новинки
Часть магазинов размещают в слайдере новинки товарного предложения, чтобы повысить осведомленность клиентов о их появлении.
Highlight брендов
В слайдере можно разместить ключевые или новые бренды, чтобы повысить их видимость для клиента и создать дополнительную точку контакта.
Highlight товаров
В рамках слайдера можно подсвечивать и конкретные товары. Например, хиты продаж в той или иной категории.
Сезонные коллекции
Контент слайдера можно сделать более релевантным, добавив в него баннеры с актуальными на данный момент коллекциями товаров.
Тематические подборки
В слайдере также можно разместить тематические подборки, объединяя товары по какому-либо принципу.
Подарочные карты
Если вы продаете подарочные карты, рассказав об этом в баннере, вы можете упростить жизнь клиентам, находящимся в поиске подарка.
Дополнительные услуги
Помимо товарного предложения, с помощью слайдера можно также подсвечивать и дополнительные услуги, которые предоставляет ваша компания.
Информация о доставке
Если у вас есть экспресс-доставка или действуют какие-либо выгодные условия доставки, информация об этом на главной странице может стать дополнительным плюсом.
Активация первой покупки
Потенциальных клиентов можно побудить к совершению первой покупки, разместив в слайдере соответствующее выгодное предложение.
Скачивание приложения
Слайдер также можно использовать для того, чтобы подсветить возможность заказа через приложение, особенно если оно у вас действительно удобное и user-friendly.
Приглашение на мероприятия
Проводите мероприятия, вебинары, прямые эфиры? Информация об этом может стать гармоничным дополнением к акциям и товарным предложениям.
Программа лояльности
У вас есть интересная и выгодная программа лояльности? Расскажите о ней в слайдере – это может стать еще одним фактором при принятии решения о покупке.
Конкурсы и розыгрыши
Если вы проводите конкурсы и розыгрыши, баннер на главной странице может стать отличным местом, чтобы донести информацию об этом до клиентов.
Новые способы оплаты
Если у вас появились новые, более удобные и эффективные способы оплаты, об этом можно сказать не только в момент оформления заказа, но и на главной странице.
Подписка
Если у вашей компании есть предложение подписки, о нем также можно рассказать клиенту на одном из баннеров в слайдере.
Рассрочка и кредит
Выгодные условия рассрочки и кредита, подсвеченные на ранних стадиях customer journey, могут повысить вероятность совершения покупок.
Оставить отзыв по товару?
Цель слайдера – побудить клиента к совершению покупок. А отзывы более уместно запрашивать уже после того, как товар куплен. Согласны? Напишите в комментариях.
Pet Shop
Обратная связь по сайту?
Лучше внедрять ненавязчивый запрос на фидбэк о сайте в более поздние стадии customer journey, чем спрашивать клиента об этом в самом начале посещения сайта.
4. МЕХАНИКА ПРОКРУТКИ
Предусмотрена
Вместо статичного баннера лучше использовать слайдер. Это даст клиенту возможность ознакомиться с более широким спектром ваших предложений.
Прокрутка кнопками
Базовый момент: для прокрутки слайдера вручную предусмотрите в нем специальные кнопки, позволяющие менять слайды в 1 клик.
Прокрутка через page control
Сделайте элемент page control кликабельным, чтобы клиент мог прокрутить слайдер к любому нужному баннеру.
Прокрутка клавишами
В некоторых случаях также встречается поддержка прокрутки баннера с помощью клавиш «влево» и «вправо» – достаточно удобно.
Прокрутка свайпом на мобильных
При просмотре сайта со смартфона реализуйте поддержку прокрутки слайдера с помощью стандартного жеста смахивания (swipe) вправо или влево.
Прокрутка свайпом на ПК
Прокрутку свайпом также можно перенести и на версию сайта для ПК. Пока что не очень распространенная практика, но достаточно удобная.
Прокрутка перетаскиванием?
На ПК также встречается прокрутка через перетаскивание. Как считаете, насколько это удобно по сравнению, например, со свайпом? Напишите в комментариях.
Длина перетаскивания
Если клиент пытается перетянуть слайд для прокрутки, его намерение понятно уже после первых пикселей. Не заставляйте его тянуть слайд через половину экрана.
Авто-прокрутка
Авто-прокрутка баннеров не только позволяет клиенту ознакомиться с предложениями, не совершая лишних действий, но и подсвечивает, что первый баннер – не единственный.
Смена слайдов не слишком быстрая
Дайте клиенту достаточно времени, чтобы воспринять контент, размещенный на баннерах, не меняйте их слишком быстро. Делайте смену слайдов не чаще 1 раза в 5-7 секунд.
Смена слайдов не медленная
При этом не стоит и отображать каждый слайд слишком долго. Иначе есть риск, что клиент просто воспримет слайдер, как статичный баннер, и не ознакомится с контентом.
Скорость переключения высокая
Однако скорость смены слайдов можно сделать высокой: в том, что переход между слайдами происходит со скоростью улитки, ценности для клиента нет никакой.
Слайды меняются корректно
Базовый момент: если в слайдере есть несколько слайдов, при его прокрутке они должны обновляться. А от такого исполнения лучше воздержаться:
Таймер прокрутки
Чтобы лучше управлять ожиданиями клиента по смене баннеров, можно снабдить слайдер соответствующим визуальным индикатором. Да и смотреться это может симпатично.
Смена слайдов анимирована
Реализуйте смену слайдов с помощью анимации: замещения, наложения или выцветания. Такой переход будет более приятен глазу, чем резкая мгновенная смена баннера.
Направление смены слайдов
В случае с направленной анимацией ее вектор должен быть противоположным действию клиента (если он жмет на кнопку «вправо», смена слайдов идет справа налево).
Прокрутка закольцована
Если клиент решил вернуться к первому слайду, находясь на последнем, у него должна быть возможность сделать это в 1 касание.
Анимация возврата
При переходе от последнего слайда к первому реализуйте анимацию обратной прокрутки, чтобы в явной форме дать клиенту понять, что он начинает смотреть повторно.
Без прокрутки при наведении
Если клиент наводит курсор на баннер, высока вероятность, что он изучает информацию в нем. Авто-прокрутку в этот момент лучше остановить.
Слайдер не виден? Без прокрутки
Авто-прокрутка также должна замирать, если слайдер не виден на экране. Нет смысла прокручивать слайды, когда на них никто не смотрит.
Без play/pause control
Баннер на главной – точно не тот объект, в котором ожидаешь увидеть кнопки play/pause. Но некоторые с этим не согласны. Напишите в комментариях: хорошая фича или trash?
Ранняя загрузка изображений
Подгружайте изображения в слайдере заранее, чтобы клиент не сталкивался с еще не загруженными баннерами при переходе к следующему слайду.
Видимость следующего баннера
Сделав следующий баннер в слайдере частично видимым, можно подсветить, что текущий баннер – не единственный, и побудить клиента к прокрутке.
Несколько баннеров сразу
Вместо одного большого изображения можно разместить сразу несколько более мелких, но при этом читаемых. Так клиент сможет заметить большее количество акций.
Без чрезмерной прокрутки блоков
Если на экране сразу же прокручивается множество элементов, это может привести к потере фокуса и рассеиванию внимания клиента.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
5. КНОПКИ ПЕРЕКЛЮЧЕНИЯ СЛАЙДОВ
Доступны
Дайте клиенту возможность быстро прокрутить слайдер и ознакомиться с предложениями без необходимости ждать их автоматической смены.
Расположение фиксировано
Если кнопки прокрутки будут «скакать» от слайда к слайду, клиенту будет сложнее переключаться между баннерами. Поэтому их расположение лучше фиксировать.
Расположены рядом?
Если кнопки размещены рядом друг с другом, можно переключаться вперед и назад без необходимости вести курсор через весь баннер. Что думаете по этому поводу?
Хорошо заметны
Если кнопки прокрутки плохо заметны на фоне изображения, шансы на то, что клиент ими воспользуется, сильно снижаются.
Одна пара кнопок
Не располагайте рядом слайдеры с одинаковыми кнопками прокрутки, иначе есть риск, что клиент ошибочно начнет прокручивать не тот слайдер.
Появляются при наведении
Чтобы кнопки прокрутки не перекрывали контент баннеров по умолчанию, можно настроить их появление лишь при наведении курсора. Более лаконично, но при этом функционально.
Визуализация привычна
Выполните кнопки прокрутки слайдов в максимально привычном для большинства формате. Например, в виде стрелок «влево» и «вправо».
В хорошем качестве
Для стрелок в кнопках прокрутки используйте изображения в достаточном качестве, чтобы они заметно не размывались и не пикселили (лучше использовать изображения в векторе).
Минималистичны
Кнопки прокрутки – это важные, но все же вторичные по сравнению с баннером элементы в слайдере. Поэтому хорошо, если вы выполните их «не кричащими», в духе минимализма.
Реакция на наведение
Сделайте стрелки прокрутки интерактивными, чтобы они реагировали на наведение курсора и дополнительно давали клиенту понять, что они кликабельны.
Без авто-прокрутки при наведении
Часть клиентов листают слайдер и знакомятся с контентом, не отводя курсор от кнопки прокрутки. Автоматическая смена слайда без клика станет для них сюрпризом.
Реакция на нажатие
Добавив ненавязчивую, но заметную реакцию кнопок на нажатие, вы повысите их интерактивность и сделаете интерфейс в целом более отзывчивым.
Расширение области клика
Область клика кнопок можно расширить, включив в нее боковые части слайдера. Так клиент с меньшей вероятностью «промажет» в попытке переключить его.
Область клика понятна
Если вы расширяете область клика, убедитесь, что она как-то выделяется, и клиенту понятно, где он перейдет на целевую страницу, а где – прокрутит слайдер.
6. PAGE CONTROL
Добавлен в слайдер
Размещение page control в слайдере позволяет клиенту сразу же понять, что текущий баннер – не единственный, и упрощает навигацию между баннерами.
Расположен привычно
Разместите page control там, где он расположен в слайдерах на большинстве сайтов и где его ожидает увидеть большинство клиентов – в центральной нижней части.
Выглядит привычно
Клиент не должен гадать, что за элемент у него перед глазами и какова его функция. Если page control выполнен слишком нестандартно, есть риск, что клиент им не воспользуется.
Видны все точки
Делая видимыми лишь часть точек, можно задать неправильные ожидания клиента относительно объема контента в слайдере.
Точки хорошо заметны
Убедитесь, что точки в page control заметны на любом фоне. В противном случае, если точки сливаются с фоном, их функциональность стремится к нулю.
Точки вне баннера
В качестве альтернативы можно вынести точки page control за рамки баннера, чтобы снизить риски того, что они будут плохо читаться на различных фонах.
Точки не пикселят
Уж что-что, а сделать пикселящими точки в рамках page control – это надо потрудиться. В идеале, как всегда, лучше выполнять такие элементы в векторе.
Текущая точка выделяется
Хорошо выделите точку текущего слайда на фоне остальных, чтобы различие было легко заметить. Это упростит навигацию в рамках page control.
Реакция точек на наведение
Сделайте точки в page control интерактивными, чтобы они реагировали на наведение курсора и давали понять, что на них можно нажать.
Курсор при наведении
При наведении курсора на элементы page control делайте его кликабельным. Это позволит дополнительно подсветить факт того, что на них можно нажать.
Элемент функционален
Вместо того, чтобы использовать page control лишь как индикатор прокрутки, сделайте его функциональным и позвольте клиенту с его помощью переключаться между слайдами.
На точки легко нажать
Сделайте так, чтобы на точки было легко нажать: даже если сами точки маленькие, можно сделать область вокруг них также кликабельной, чтобы упростить переключение.
Текстовое оглавление
В некоторых случаях вместо page control используется текстовое оглавление. С помощью него клиент сразу же видит названия акций. Как вам? Напишите в комментариях.
Формат миниатюр
Встречаются и более креативные альтернативы: миниатюры, которые позволяют ознакомиться с предложениями не только в текстовой, но и в визуальной форме.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
7. ПЕРЕХОД НА ЦЕЛЕВЫЕ СТРАНИЦЫ
Слайды – не единственный путь
Размещайте ссылки на свои спец.предложения не только в слайдере. Иначе есть риск, что клиент с ними не столкнется, если не прокрутит его.
Баннеры кликабельны
Убедитесь, что баннеры в слайдере кликабельны и ведут на листинги, страницы с деталями акций или выполняют какую-либо функцию (например, копирование промо-кода).
Кликабельна вся область баннера
Несмотря на наличие интерактивных элементов, баннер остается баннером. Поэтому лучше, если вся его область будет кликабельной. Это повысит вероятность перехода.
Целевые страницы понятны
При ознакомлении с баннером у клиента не должно возникать вопросов о том, на какую страницу он перейдет при клике. Все должно быть максимально понятно.
Соответствие страницы баннеру
Корректно управляйте ожиданиями клиента при переходе: целевая страница должна соответствовать заявленному в баннере контенту.
Страницы не пустые
Чем больше в компании различных акций, тем легче не уследить и сослаться с главной на страницу, на которой попросту нет контента. За примером далеко ходить не надо:
TO BE CONTINUED...
Итак, в этой статье мы разобрали взаимодействие со слайдером на главной странице. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce