I am ready for a long road flight for work with a week- or months-long projects.
СЛАЙДЕР НА ГЛАВНОЙ СТРАНИЦЕ
ЛУЧШИЕ ПРАКТИКИ 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) вправо или влево.