Что мы чаще всего встречаем первым делом, зайдя на сайт интернет-магазина? Это слайдер с баннерами на главной странице. Как сделать его цепляющим, удобным? Что в нем стоит разместить? Разберем 103 гайдлайна с примерами. Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей здесь и в Telegram, делитесь этим материалом с коллегами. Это один из 20+ чек-листов по UX/UI в e-commerce. К середине декабря 2022г все они будут доступны в моем профиле на Habr. Статья без спойлеров, с примерами, открытыми по умолчанию, доступна по этой ссылке. Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист. Базовые требования Баннеры в слайдере Идеи контента баннеров Механика прокрутки Кнопки переключения слайдов Page control Переход на целевые страницы Разместите слайдер в рамках первого экрана главной страницы, чтобы познакомить клиента с ключевыми предложениями без каких-либо действий с его стороны.  Слайдер не должен занимать 100% высоты экрана (или превышать ее). Иначе есть риск, что клиент не заметит, что под слайдером есть еще контент, а страница прокручивается.  Сделайте так, чтобы весь фокус внимания в первые моменты нахождения на сайте был именно на слайдере, не снабжайте его какими-либо прочими объектами по бокам.  В стремлении познакомить клиента со всем разнообразием своих предложений и скидок, позаботьтесь о том, чтобы он не состарился, докрутив до конца слайдера.  Но и всего пара слайдов может смотреться куце, создавая впечатление, что у вас слишком мало предложений. Стандарта по числу слайдов нет – ищем во всем золотую середину.  Шансы, что клиент увидит каждый последующий баннер в слайдере, ниже, чем предыдущий. Поэтому в начале размещайте наиболее важный и релевантный контент.  Контент слайдера должен быть релевантным для клиента. Вот хороший анти-пример: какая ценность для москвича от того, что у вас в Брянске открылся новый магазин?  Если у вас есть важные новости для локальной аудитории, можно связать отображение баннера с городом, который выбрал клиент.  Баннеры можно обновлять в зависимости от времени суток. В примере баннер «Что на обед?» не меняется, но было бы круто, если бы вечером он менялся на «Что на ужин?»  Баннеры можно сделать более релевантными, если учитывать тип клиента: например, показывать баннер со скидкой на первый заказ только новым клиентам.  Суть слайдера на главной – привлечь внимание и импульсивно заинтересовать клиента. Не стоит смазывать первое впечатление, размещая в нем что-то вторичное и постное.  Клиент должен считать ключевой посыл моментально. Если вы заставите его вчитываться в массу текста, есть риск, что он не станет заморачиваться и просто пропустит баннер.  При встрече большого пикселящего баннера прямо на первом экране главной страницы не у каждого клиент возникнет желание продолжить совершать покупки на сайте.  При этом важно также соблюсти баланс между качеством и размером изображения. Клиент вряд ли будет ждать его загрузки несколько секунд после перехода на сайт. Добавив в изображение кнопку с призывом к действию, можно дополнительно побудить клиента ознакомиться с тем, что вы предлагаете.  Вместо статичных изображений кнопок на баннерах можно разместить реальные кнопки, реагирующие на наведение и клик. Это повысит уровень интерактивности интерфейса.  Баннеры можно сделать еще более интерактивными, реализовав функцию отметок конкретных товаров на изображениях.  Если в рамках слайдера вы делитесь с клиентом информацией об акции, ограниченной во времени, ее можно снабдить таймером, чтобы дополнительно привлечь внимание клиента.  Подготавливая контент для баннера, учитывайте его размеры. Если ключевой контент будет обрезаться, можно смазать впечатление о сайте с первой же страницы.  Здесь я не говорю о том, что баннеры должны делаться по единому шаблону, но хотя бы кнопки СТА стоит выполнить в схожем дизайне. Вот от такого лучше воздержаться:  Если в вашем слайдере и так уже есть анимация переключения, из-за GIF-ок в баннерах уровень анимации может зашкалить. Или не согласны? Напишите в комментариях.  Базовый момент: размещая текст в баннере, убедитесь, что он будет легко читаться на фоне изображения, поверх которого он накладывается.  Сделайте размер текста на основном слайдере достаточно большим. Клиент не должен испытать затруднений с его считыванием в самом начале своего пути на сайте.  Хорошей практикой также будет сделать адаптированные версии баннеров для мобильных устройств, текст на которых будет достаточно крупным и будет легко читаться.  В этом блоке собраны темы, которые покрывают, наверное, 95% всего контента, с которым я встретился, просматривая баннеры магазинов из рейтинга Data Insight Top-100. Подавляющее большинство интернет-магазинов использует слайдер на главной для того, чтобы ознакомить клиента с текущими акциями и спец.предложениями.  Если у вас скоро стартуют или уже проводятся распродажи, грех не рассказать клиенту об этом в рамках самого заметного элемента главной страницы.  Часть магазинов размещают в слайдере новинки товарного предложения, чтобы повысить осведомленность клиентов о их появлении.  В слайдере можно разместить ключевые или новые бренды, чтобы повысить их видимость для клиента и создать дополнительную точку контакта.  В рамках слайдера можно подсвечивать и конкретные товары. Например, хиты продаж в той или иной категории.  Контент слайдера можно сделать более релевантным, добавив в него баннеры с актуальными на данный момент коллекциями товаров.  В слайдере также можно разместить тематические подборки, объединяя товары по какому-либо принципу.  Если вы продаете подарочные карты, рассказав об этом в баннере, вы можете упростить жизнь клиентам, находящимся в поиске подарка.  Помимо товарного предложения, с помощью слайдера можно также подсвечивать и дополнительные услуги, которые предоставляет ваша компания.  Если у вас есть экспресс-доставка или действуют какие-либо выгодные условия доставки, информация об этом на главной странице может стать дополнительным плюсом.  Потенциальных клиентов можно побудить к совершению первой покупки, разместив в слайдере соответствующее выгодное предложение.  Слайдер также можно использовать для того, чтобы подсветить возможность заказа через приложение, особенно если оно у вас действительно удобное и user-friendly.  Проводите мероприятия, вебинары, прямые эфиры? Информация об этом может стать гармоничным дополнением к акциям и товарным предложениям.  У вас есть интересная и выгодная программа лояльности? Расскажите о ней в слайдере – это может стать еще одним фактором при принятии решения о покупке.  Если вы проводите конкурсы и розыгрыши, баннер на главной странице может стать отличным местом, чтобы донести информацию об этом до клиентов.  Если у вас появились новые, более удобные и эффективные способы оплаты, об этом можно сказать не только в момент оформления заказа, но и на главной странице.  Если у вашей компании есть предложение подписки, о нем также можно рассказать клиенту на одном из баннеров в слайдере.  Выгодные условия рассрочки и кредита, подсвеченные на ранних стадиях customer journey, могут повысить вероятность совершения покупок.  Цель слайдера – побудить клиента к совершению покупок. А отзывы более уместно запрашивать уже после того, как товар куплен. Согласны? Напишите в комментариях.  Лучше внедрять ненавязчивый запрос на фидбэк о сайте в более поздние стадии customer journey, чем спрашивать клиента об этом в самом начале посещения сайта.  Вместо статичного баннера лучше использовать слайдер. Это даст клиенту возможность ознакомиться с более широким спектром ваших предложений.  Базовый момент: для прокрутки слайдера вручную предусмотрите в нем специальные кнопки, позволяющие менять слайды в 1 клик.  Сделайте элемент page control кликабельным, чтобы клиент мог прокрутить слайдер к любому нужному баннеру.  В некоторых случаях также встречается поддержка прокрутки баннера с помощью клавиш «влево» и «вправо» – достаточно удобно.  При просмотре сайта со смартфона реализуйте поддержку прокрутки слайдера с помощью стандартного жеста смахивания (swipe) вправо или влево. Прокрутку свайпом также можно перенести и на версию сайта для ПК. Пока что не очень распространенная практика, но достаточно удобная.  На ПК также встречается прокрутка через перетаскивание. Как считаете, насколько это удобно по сравнению, например, со свайпом? Напишите в комментариях.  Если клиент пытается перетянуть слайд для прокрутки, его намерение понятно уже после первых пикселей. Не заставляйте его тянуть слайд через половину экрана.  Авто-прокрутка баннеров не только позволяет клиенту ознакомиться с предложениями, не совершая лишних действий, но и подсвечивает, что первый баннер – не единственный.  Дайте клиенту достаточно времени, чтобы воспринять контент, размещенный на баннерах, не меняйте их слишком быстро. Делайте смену слайдов не чаще 1 раза в 5-7 секунд.  При этом не стоит и отображать каждый слайд слишком долго. Иначе есть риск, что клиент просто воспримет слайдер, как статичный баннер, и не ознакомится с контентом. Однако скорость смены слайдов можно сделать высокой: в том, что переход между слайдами происходит со скоростью улитки, ценности для клиента нет никакой.  Базовый момент: если в слайдере есть несколько слайдов, при его прокрутке они должны обновляться. А от такого исполнения лучше воздержаться:  Чтобы лучше управлять ожиданиями клиента по смене баннеров, можно снабдить слайдер соответствующим визуальным индикатором. Да и смотреться это может симпатично.  Реализуйте смену слайдов с помощью анимации: замещения, наложения или выцветания. Такой переход будет более приятен глазу, чем резкая мгновенная смена баннера.  В случае с направленной анимацией ее вектор должен быть противоположным действию клиента (если он жмет на кнопку «вправо», смена слайдов идет справа налево). Если клиент решил вернуться к первому слайду, находясь на последнем, у него должна быть возможность сделать это в 1 касание.  При переходе от последнего слайда к первому реализуйте анимацию обратной прокрутки, чтобы в явной форме дать клиенту понять, что он начинает смотреть повторно.  Если клиент наводит курсор на баннер, высока вероятность, что он изучает информацию в нем. Авто-прокрутку в этот момент лучше остановить.  Авто-прокрутка также должна замирать, если слайдер не виден на экране. Нет смысла прокручивать слайды, когда на них никто не смотрит.  Баннер на главной – точно не тот объект, в котором ожидаешь увидеть кнопки play/pause. Но некоторые с этим не согласны. Напишите в комментариях: хорошая фича или trash?  Подгружайте изображения в слайдере заранее, чтобы клиент не сталкивался с еще не загруженными баннерами при переходе к следующему слайду.  Сделав следующий баннер в слайдере частично видимым, можно подсветить, что текущий баннер – не единственный, и побудить клиента к прокрутке.  Вместо одного большого изображения можно разместить сразу несколько более мелких, но при этом читаемых. Так клиент сможет заметить большее количество акций.  Если на экране сразу же прокручивается множество элементов, это может привести к потере фокуса и рассеиванию внимания клиента.  Дайте клиенту возможность быстро прокрутить слайдер и ознакомиться с предложениями без необходимости ждать их автоматической смены.  Если кнопки прокрутки будут «скакать» от слайда к слайду, клиенту будет сложнее переключаться между баннерами. Поэтому их расположение лучше фиксировать.  Если кнопки размещены рядом друг с другом, можно переключаться вперед и назад без необходимости вести курсор через весь баннер. Что думаете этому поводу?  Если кнопки прокрутки плохо заметны на фоне изображения, шансы на то, что клиент ими воспользуется, сильно снижаются.  Не располагайте рядом слайдеры с одинаковыми кнопками прокрутки, иначе есть риск, что клиент ошибочно начнет прокручивать не тот слайдер.  Чтобы кнопки прокрутки не перекрывали контент баннеров по умолчанию, можно настроить их появление лишь при наведении курсора. Более лаконично, но при этом функционально.  Выполните кнопки прокрутки слайдов в максимально привычном для большинства формате. Например, в виде стрелок «влево» и «вправо».  Для стрелок в кнопках прокрутки используйте изображения в достаточном качестве, чтобы они заметно не размывались и не пикселили (лучше использовать изображения в векторе).  Кнопки прокрутки – это важные, но все же вторичные по сравнению с баннером элементы в слайдере. Поэтому хорошо, если вы выполните их «не кричащими», в духе минимализма.  Сделайте стрелки прокрутки интерактивными, чтобы они реагировали на наведение курсора и дополнительно давали клиенту понять, что они кликабельны.  Часть клиентов листают слайдер и знакомятся с контентом, не отводя курсор от кнопки прокрутки. Автоматическая смена слайда без клика станет для них сюрпризом.  Добавив ненавязчивую, но заметную реакцию кнопок на нажатие, вы повысите их интерактивность и сделаете интерфейс в целом более отзывчивым.  Область клика кнопок можно расширить, включив в нее боковые части слайдера. Так клиент с меньшей вероятностью «промажет» в попытке переключить его.  Если вы расширяете область клика, убедитесь, что она как-то выделяется, и клиенту понятно, где он перейдет на целевую страницу, а где – прокрутит слайдер.  Размещение page control в слайдере позволяет клиенту сразу же понять, что текущий баннер – не единственный, и упрощает навигацию между баннерами.  Разместите page control там, где он расположен в слайдерах на большинстве сайтов и где его ожидает увидеть большинство клиентов – в центральной нижней части.  Клиент не должен гадать, что за элемент у него перед глазами и какова его функция. Если page control выполнен слишком нестандартно, есть риск, что клиент им не воспользуется.  Делая видимыми лишь часть точек, можно задать неправильные ожидания клиента относительно объема контента в слайдере.  Убедитесь, что точки в page control заметны на любом фоне. В противном случае, если точки сливаются с фоном, их функциональность стремится к нулю.  В качестве альтернативы можно вынести точки page control за рамки баннера, чтобы снизить риски того, что они будут плохо читаться на различных фонах.  Уж что-что, а сделать пикселящими точки в рамках page control – это надо потрудиться. В идеале, как всегда, лучше выполнять такие элементы в векторе.  Хорошо выделите точку текущего слайда на фоне остальных, чтобы различие было легко заметить. Это упростит навигацию в рамках page control.  Сделайте точки в page control интерактивными, чтобы они реагировали на наведение курсора и давали понять, что на них можно нажать.  При наведении курсора на элементы page control делайте его кликабельным. Это позволит дополнительно подсветить факт того, что на них можно нажать.  Вместо того, чтобы использовать page control лишь как индикатор прокрутки, сделайте его функциональным и позвольте клиенту с его помощью переключаться между слайдами.  Сделайте так, чтобы на точки было легко нажать: даже если сами точки маленькие, можно сделать область вокруг них также кликабельной, чтобы упростить переключение. В некоторых случаях вместо page control используется текстовое оглавление. С помощью него клиент сразу же видит названия акций. Как вам? Напишите в комментариях.  Встречаются и более креативные альтернативы: миниатюры, которые позволяют ознакомиться с предложениями не только в текстовой, но и в визуальной форме.  Размещайте ссылки на свои спец.предложения не только в слайдере. Иначе есть риск, что клиент с ними не столкнется, если не прокрутит его.  Убедитесь, что баннеры в слайдере кликабельны и ведут на листинги, страницы с деталями акций или выполняют какую-либо функцию (например, копирование промо-кода).  Несмотря на наличие интерактивных элементов, баннер остается баннером. Поэтому лучше, если вся его область будет кликабельной. Это повысит вероятность перехода.  При ознакомлении с баннером у клиента не должно возникать вопросов о том, на какую страницу он перейдет при клике. Все должно быть максимально понятно.  Корректно управляйте ожиданиями клиента при переходе: целевая страница должна соответствовать заявленному в баннере контенту.  Чем больше в компании различных акций, тем легче не уследить и сослаться с главной на страницу, на которой попросту нет контента. За примером далеко ходить не надо:  Итак, в этой статье мы разобрали взаимодействие со слайдером на главной странице. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях. Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce. Не забудьте подписаться на канал в Telegram и поделиться этим материалом с коллегами. Будем на связи.  Customer Experience Management