Карусели изображений на сайте: Bootstrap — Carousel (карусель) — ИТ Шеф

16.08.2023 alexxlab

Содержание

Настройка AMP-карусели | Support eSputnik

Один из самых простых и популярных элементов интерактивности в письмах – карусель изображений.

Добавить её в редакторе eSputnik достаточно просто как с помощью встроенных блоков, так и с помощью сторонних сервисов.

Чтобы при отправке рассылки AMP-карусель отображалась у получателей — подайте заявку на подтверждение отправителя.

Создание AMP HTML-карусели

Для создания AMP-карусели зайдите в редактирование любого письма:

Откройте раздел “Блоки” на панели слева;

Перетяните блок “Карусель” в HTML-шаблон, с которым вы работаете;

Этот блок в письме по умолчанию имеет значок ⚡HTML, так как карусель будет отображаться только в AMP-письмах, в почтовиках, которые поддерживают эту технологию (Gmail, Mail. ru). В остальных почтовых клиентах блок будет скрыт, позже в статье мы расскажем, как создать альтернативную версию для них.

Задайте параметры самой AMP HTML-карусели. Для этого:

Система предложит создать первый слайд. Для этого загрузите картинку также, как вы делаете с блоком “Изображение»: выберите файл с компьютера либо вставьте через ссылку.

Т. к. это блок карусели, он подразумевает более одного изображения. Нажмите на кнопку “Добавить слайд” и загрузите еще одну картинку.

Чтобы создать остальные слайды карусели, нажмите “Добавить слайд” и повторите все те же действия с загрузкой других картинок.

Количество используемых слайдов неограниченно, но каждый добавленный слайд увеличивает вес сообщения. Следите за тем, чтобы он не превышал 80-100 Кб, иначе Gmail обрежет письмо.

Важно

Используйте картинки одинаковых размеров, чтобы во время переключения слайды менялись плавно.

Если же загруженные картинки разного размера, вы можете задать им нужные параметры с помощью встроенного фоторедактора. Для этого нажмите на значок волшебной палочки и в открывшемся окне выберите пункт меню “Обрезка”, где можно выставить необходимые размеры картинки.

После того как загрузите и отредактируете изображения, перейдите к доступным настройкам форматирования карусели:

Показывать превью.

Переключите этот бегунок, чтобы в письме отображались миниатюры всех изображений. Они служат для навигации, например, чтобы в один клик перейти от первого слайда к третьему, чего нельзя сделать через последовательное перемещение кнопкой-стрелочкой. Картинки для превью загружать отдельно не нужно, они будут автоматически масштабированы из изображений в слайдах.

Цвет превью настраивается в области под загрузкой слайда:

Результат выглядит так:

Для подстановки картинки на превью выберите Тип превью “Картинка” и загрузите нужное изображение в область под редактированием картинки слайда:

Это также нужно для быстрой навигации. Например, когда в карусели показывается инструкция из этапов и вы добавляете пользовательские превью с номерами шагов, либо когда размещаете упрощенные миниатюры категорий и получатель может быстро переместиться к нужному, щелкнув по превью.

Создание HTML-блока для других получателей

Создайте запасной HTML-блок, который отобразится у тех пользователей, чей почтовик не поддерживает AMP HTML.

Интерактивная карусель с помощью FreshInbox

FreshInbox – англоязычный сервис с полезными статьями и инструментами для емейлов вроде ролловера и промотабов.

Созданная здесь карусель поддерживается только в iOS Mail, Samsung Mail, Apple Mail, Yahoo Mail, AOL и Outlook 2003.

Перенос блока в eSputnik

Чтобы проверить, как работают оба блока, нажмите на предпросмотр:

И переключайтесь между версиями.

Важно

После того как вы нажмете “Включать в HTML”, выбранный элемент будет отображаться во всех почтовиках, которые поддерживают только традиционный протокол HTML MIME и не поддерживают AMP.
Опция “Включать в ⚡HTML” позволяет показывать элемент в почтовых клиентах, которые поддерживают MIME-тип AMPHTML (text/x-amp-html).
Если же для элемента ничего не выбрано, то он будет отображаться на всех устройствах и во всех почтовиках. А если почтовый клиент не поддерживает выбранный вами вид интерактивности, получатель увидит только первое изображение.

Поэтому вместо интерактивной HTML-карусели можно добавить, например, обычную карточку товара и для нее активировать опцию “Включать HTML”. Это статический блок в письме для подстраховки. Благодаря этому ваша карточка товаров будет отображаться только в тех почтовиках и на тех устройствах, которые не поддерживают AMP.

Проверка AMP-письма на ошибки

В редакторе eSputnik уже есть встроенная валидация кода. Если в шаблоне что-то неправильно, то вы увидите сообщение прямо на панели управления. Чтобы посмотреть ошибки в AMP-контенте, достаточно открыть редактор кода:

А затем кликнуть по красному предупреждению, чтобы получить детализацию.

Либо нажмите на иконку “Предпросмотр письма”:

В открывшемся окне вы можете кликнуть курсором по предупреждению, чтобы увидеть описание ошибок. Их можно исправить прямо в редакторе либо скопировать код письма для валидации в Google Playground.

В интерфейсе предпросмотра выведены эти 3 опции:

Исправить в редакторе,
Копировать AMP HTML в буфер обмена,
Открыть AMP Playground.

Читайте также «Как подать заявку для добавление в белый список отправителей AMP»

Лучшие практики для каруселей в web разработке • Full-Arts

Содержание статьи

Карусель – это UX-компонент, который отображает контент в виде слайд-шоу. Карусели могут запускаться автоматически или перемещаться по ним вручную. Хотя карусели можно использовать и в других местах, они чаще всего используются для отображения изображений, продуктов и рекламных акций на домашних страницах.

Оптимизируйте карусели для повышения производительности и удобства использования. В этом разделе обсуждается влияние каруселей на производительность и передовые практики создания эффективных каруселей.

Воздействие

Хорошо реализованная карусель сама по себе не должна иметь минимального влияния на производительность. Однако карусели часто содержат большие медиаресурсы. Большие активы могут влиять на производительность независимо от того, отображаются ли они в карусели или где-то еще.

LCP (Самая большая содержательная краска)Большие карусели вверху сгиба часто содержат элемент LCP страницы и поэтому могут оказывать значительное влияние на LCP. В этих сценариях оптимизация карусели может значительно улучшить LCP.
Подробное объяснение того, как работает измерение LCP на страницах, содержащих карусели, можно найти в разделе « Измерение LCP для каруселей ».
FID (задержка первого входа)Карусели имеют минимальные требования к JavaScript и поэтому не должны влиять на интерактивность страницы. Если вы обнаружите, что в карусели вашего сайта есть долго работающие скрипты, вам следует подумать о замене инструментов карусели.
CLS (совокупное изменение макета)Удивительное количество каруселей использует резкие, несоставные анимации, которые могут способствовать CLS. На страницах с автоматическим воспроизведением каруселей это может вызвать бесконечное количество CLS. Этот тип CLS обычно не очевиден для человеческого глаза, поэтому проблему легко не заметить. Чтобы избежать этой проблемы, избегайте использования несоставной анимации в карусели (например, во время переходов между слайдами).

Лучшие практики

Оптимизация производительности карусели включает оптимизацию как ее технической архитектуры, так и ее содержимого.

Загрузите содержимое карусели с помощью HTML

Содержимое карусели следует загружать через разметку HTML страницы, чтобы браузер мог его обнаружить на ранней стадии процесса загрузки страницы. Использование JavaScript для запуска загрузки содержимого карусели, вероятно, является самой большой ошибкой производительности, которую следует избегать при использовании карусели. Это задерживает загрузку изображения и может отрицательно повлиять на LCP.

Для расширенной оптимизации карусели рассмотрите возможность статической загрузки первого слайда, а затем постепенного улучшения его, чтобы включить элементы управления навигацией и дополнительный контент. Этот метод наиболее применим в средах, в которых пользователь постоянно уделяет внимание – это дает дополнительное время для загрузки контента. В таких средах, как домашние страницы, где пользователи могут задерживаться только на секунду или две, загрузка только одного изображения может быть столь же эффективной.

Используйте современные технологии

Многие сайты используют сторонние библиотеки JavaScript для реализации каруселей. Если вы в настоящее время используете старые инструменты карусели, возможно, вы сможете повысить производительность, переключившись на новые инструменты. Новые инструменты, как правило, используют более эффективные API-интерфейсы и реже требуют дополнительных зависимостей, таких как jQuery.

Однако вам может вообще не понадобиться JavaScript. Новый Scroll Snap API позволяет создавать полнофункциональные, нативные карусели, используя только HTML и CSS, JavaScript не требуется.

Оптимизировать контент карусели

Карусели часто содержат одни из самых больших изображений сайта, поэтому стоит потратить время и убедиться, что эти изображения полностью оптимизированы. Выбор правильного формата изображения и уровня сжатия, использование CDN изображений и использование srcset для обслуживания нескольких версий изображений – все это методы, которые могут уменьшить размер передаваемых изображений.

Измерение производительности

В этом разделе обсуждается измерение LCP применительно к каруселям. Хотя во время расчета LCP карусели обрабатываются не иначе, чем любой другой UX-элемент, механизм расчета LCP для автоматического воспроизведения каруселей часто вызывает путаницу.

Измерение LCP для каруселей

Это ключевые моменты для понимания того, как расчет LCP работает для каруселей:

LCP рассматривает элементы страницы, когда они нарисованы до фрейма. Новые кандидаты в элемент LCP больше не рассматриваются после взаимодействия пользователя (касания, прокрутки или нажатия клавиш) со страницей. Таким образом, любой слайд в карусели с автоматическим воспроизведением потенциально может стать последним элементом LCP, тогда как в статической карусели только первый слайд может быть потенциальным кандидатом LCP.
Если визуализируются два изображения одинакового размера, первое изображение будет считаться элементом LCP. Элемент LCP обновляется только тогда, когда кандидат LCP больше, чем текущий элемент LCP. Таким образом, если все элементы карусели имеют одинаковый размер, элемент LCP должен быть первым отображаемым изображением.
При оценке кандидатов LCP LCP учитывает « видимый размер или внутренний размер, в зависимости от того, что меньше ». Таким образом, если карусель с автоматическим воспроизведением отображает изображения одинакового размера, но содержит изображения различных внутренних размеров , которые меньше размера отображения, элемент LCP может изменяться по мере отображения новых слайдов. В этом случае, если все изображения отображаются с одинаковым размером, изображение с наибольшим внутренним размером будет считаться элементом LCP. Чтобы сохранить низкий уровень LCP, вы должны убедиться, что все элементы в карусели с автоматическим воспроизведением имеют одинаковый внутренний размер.

Изменения в расчете LCP для каруселей в Chrome 88

Начиная с Chrome 88 , изображения, которые позже удаляются из DOM, считаются потенциально наиболее содержательными красками. До Chrome 88 эти изображения не рассматривались. Для сайтов, которые используют карусели с автоматическим воспроизведением, это изменение определения окажет нейтральное или положительное влияние на оценки LCP.

Это изменение было внесено в ответ на наблюдение, что многие сайты реализуют карусельные переходы путем удаления ранее отображаемого изображения из дерева DOM. До Chrome 88 каждый раз, когда представлялся новый слайд, удаление предыдущего элемента запускало обновление LCP. Это изменение влияет только на автоматическое воспроизведение каруселей – по определению потенциально самые насыщенные раскраски могут возникать только до того, как пользователь впервые взаимодействует со страницей.

Другие соображения

В этом разделе обсуждаются лучшие практики UX и продукта, которые следует учитывать при реализации каруселей. Карусели должны способствовать достижению ваших бизнес-целей и представлять контент в удобной для навигации и чтения форме.

Лучшие практики навигации

Обеспечьте заметные элементы управления навигацией

Элементы навигации карусели должны быть удобными и хорошо заметными. Это то, что редко удается сделать хорошо – большинство каруселей имеют элементы управления навигацией, которые одновременно маленькие и тонкие. Имейте в виду, что один цвет или стиль управления навигацией редко работают во всех ситуациях. Например, стрелку, которая хорошо видна на темном фоне, может быть трудно увидеть на светлом фоне.

Укажите ход навигации

Элементы управления карусельной навигацией должны предоставлять контекст об общем количестве слайдов и ходе пользователя по ним. Эта информация облегчает пользователю переход к определенному слайду и понимание того, какой контент уже был просмотрен. В некоторых ситуациях предварительный просмотр предстоящего контента – будь то отрывок из следующего слайда или список миниатюр – также может быть полезным и повысить заинтересованность.

Поддержка мобильных жестов

На мобильных устройствах жесты смахивания должны поддерживаться в дополнение к традиционным элементам управления навигацией (например, экранным кнопкам).

Предоставьте альтернативные пути навигации

Поскольку маловероятно, что большинство пользователей будут взаимодействовать со всем контентом карусели, контент, на который ссылаются слайды карусели, должен быть доступен из других путей навигации.

Лучшие практики продукта

Карусели хорошо работают в ситуациях, когда использование дополнительного вертикального пространства для отображения дополнительного содержимого недопустимо. Карусели на страницах продуктов часто являются хорошим примером этого варианта использования.

Однако карусели не всегда используются эффективно.

Карусели, особенно если они содержат рекламные акции или автоматически продвигаются, пользователи легко принимают за рекламу. Пользователи склонны игнорировать рекламу – явление, известное как баннерная слепота .
Карусели часто используются, чтобы успокоить несколько отделов и избежать принятия решений о приоритетах бизнеса. В результате карусели легко могут превратиться в свалку неэффективного контента.

Проверьте свои предположения

Влияние каруселей на бизнес, особенно на домашних страницах, должно быть оценено и протестировано. Показатели CTR карусели могут помочь вам определить, эффективны ли карусель и ее содержание.

Будьте актуальны

Карусели работают лучше всего, когда они содержат интересный и актуальный контент, представленный в четком контексте. Если контент не привлекает пользователя за пределами карусели, размещение его в карусели не улучшит его производительность. Если вам необходимо использовать карусель, расставьте приоритеты для контента и убедитесь, что каждый слайд достаточно релевантен, чтобы пользователь захотел перейти к следующему слайду.

Оригинал статьи – тут

Список цен на услуги

111 просмотров

Отказ от ответственности: Вся размещенная информация была взята из открытых источников и представлена исключительно в ознакомительных целях а также не несет призыва к действию. Создано лишь в образовательных и развлекательных целях. | Так же, если вы являетесь правообладателем размещенного на страницах портала материала, просьба написать нам через контактную форму жалобу на удаление определенной страницы, а также ознакомиться с инструкцией для правообладателей материалов. Спасибо за понимание.

Если вам понравились материалы сайта, вы можете поддержать проект финансово, переведя некоторую сумму с банковской карты, счёта мобильного телефона или из кошелька ЮMoney.

Как правильно использовать карусели изображений [2023]?

О, надоедливые карусели!

Я уже потерял счет, сколько раз я пытался заполучить бегущие слайды на веб-сайте.

Просто так раздражает попытка наспех прочитать то, что было написано, прежде чем следующий слайд займет место. Теперь я даже не пытаюсь сканировать дальше первого слайда карусели изображений.

Я думал, что я один терпеть не могу эти автоматические ползунки. Но слава богу, есть и такие, как я!

Эти вращающиеся слайды либо игнорируются пользователем, либо еще больше запутывают их, тем самым влияя на общий пользовательский опыт и конверсии на веб-сайте.

Исследование юзабилити, проведенное группой Nielsen Norman, подтвердило, что автоматические карусели раздражают пользователей и снижают видимость.

Исследование выделяет несколько причин, по которым эти считающиеся «крутыми» элементы дизайна на самом деле не способствуют удобству использования или конверсиям вашего сайта:

Автоматическое чередование приводит к тому, что пользователь теряет контроль над своим взаимодействием с сайтом. Это особенно раздражает пользователей с нарушением двигательных навыков или диспраксией.
Они создают баннерную слепоту и часто легко игнорируются пользователями. Пример отслеживания взгляда ниже из другого источника также подтверждает это. Вы можете видеть, что слайдер изображения (черная область на картинке) практически не привлекает внимания посетителей сайта.

Источник изображения: Instapage

3. Малограмотные пользователи и иностранные пользователи (чей родной язык отличается от языка на вашем сайте) часто читают медленно. Пользователь явно выражает свое недовольство исследованием, когда говорит: « У меня не было времени читать. Он продолжает мигать слишком быстро. »

Кроме того, слайдеры плохо работают на мобильных устройствах. Интересно, если эти ползунки так сбивают с толку и раздражают многих других пользователей, почему они почти везде? Как оказалось, карусели изображений или вращающиеся баннеры часто рассматриваются как простое решение для обеспечения лучшей навигации по всему важному контенту/предложениям на сайте.

Хотя данные говорят об обратном.

Университет Нотр-Дам протестировал свою карусель. На диаграмме ниже показаны результаты, которые они нашли. Только 1% от общего числа посетителей перешли с карусели, и большинство этих посетителей (84%) взаимодействовали только с первым слайдом карусели.

Источник изображения: Университет Нотр-Дам

Хорошо, я понял! Каждый отдел хочет иметь свое специальное предложение на главной странице.

Но, честно говоря, 1% рейтинга кликов от элемента, занимающего большую часть главной страницы, — это явное напрасное усилие. Вы все еще считаете слайдеры изображений хорошей идеей?

Помимо создания проблемы с удобством использования, карусели собирают несколько предложений в одном месте, что является большим убийцей конверсии. Как подсказывает проверенная мудрость конверсии, в идеале у вас должно быть только одно предложение или призыв к действию на странице. И карусели определенно являются нарушителями здесь.

Слишком много предложений вместе просто говорят: «Мы не знаем, что должно быть нашим главным приоритетом, поэтому мы собираем их все вместе и смотрим, какое из них работает лучше всего». Возьмите на себя ответственность, люди!

Прежде чем продолжить, определите приоритет ваших предложений.

Готово?

Хорошо, теперь, если вы готовы отказаться от этой «стандартной практики», вот несколько альтернатив карусели изображений, которые вы можете попробовать:

Слишком много предложений вместе, просто скажите: «Мы не знаем, каким наивысший приоритет, поэтому мы собираем их все вместе и смотрим, какой из них работает лучше всего». Мужайтесь и берите на себя ответственность, люди! Прежде чем продолжить, определите приоритет ваших предложений.

1. Сосредоточьте главную страницу на своем основном предложении

Сделайте все возможное. Пусть ваше самое актуальное предложение привлечет внимание ваших посетителей. И добавьте несколько предложений, которые стабильно работают для вас в течение всего года. Вы можете увидеть, как Ben Sherman реализует это на своей домашней странице:

Источник изображения: Ben Sherman

На изображении выше посетители могут видеть только предложение блейзера в верхней части страницы.

Не делайте свой сайт рекламным щитом. Вам не нужно держаться за каждое предложение, которое вы продвигали ранее.

2. Превратите каждое слайд-изображение в целевую домашнюю страницу для определенных сегментов посетителей

Допустим, у вас есть глобальный интернет-магазин одежды. Сейчас в странах часто бывают разные тенденции в одежде. Таким образом, вы можете сегментировать своих посетителей на основе их географического положения с помощью программного обеспечения для A/B-тестирования.

Покажите им домашнюю страницу с предложением о самом популярном тренде в одежде в их стране. Это отличная замена универсальному слайдеру изображений, который показывает 4 слайда, из которых 3 больше подходят для тенденций в США (поскольку 80% вашего трафика поступает из США), и 1 слайд для Великобритании.

Но знаете что? Вероятно, вы отдаете предпочтение приезжим из других стран. Таким образом, даже если вы приложили усилия, чтобы отправить все в эти страны, ваши конверсии для них все равно будут низкими.

Вместо того, чтобы показывать вашим посетителям постоянно вращающийся слайдер изображений, в котором перечислены, возможно, даже по одному предложению на слайде для 5 основных стран, из которых вы получаете большую часть своего трафика, почему бы просто не избавиться от слайдера и заменить его местоположением конкретное предложение? Вы можете легко использовать предустановленные сегменты в VWO, чтобы настроить это всего за несколько кликов.

Как правильно процитировал Depesh Mandalia, эксперт по электронной коммерции и цифровым технологиям, в этой статье eConsultancy:

Одно целевое баннерное сообщение приведет к более высокому CTR, чем несколько нецелевых баннеров. Обслуживать 100% ваших посетителей практически невозможно, не зная о них что-то, но, похоже, контент-менеджеры убеждают себя, что чем больше выбор, тем лучше = больше кликов = больше продаж. Это не так.

3. Используйте ручные ползунки вместо автоповорота

См. изображение ниже с домашней страницы Sephora:

Источник изображения: Sephora

Теперь это бесспорно, одно из лучших исполнений слайдеров изображений, которые я видел в Интернете. Некоторые из причин, почему это так здорово:

Они ограничивают свою карусель только двумя слайдами
Время загрузки очень быстрое
Ползунок ручной, без автоматического вращения
Четкие кнопки навигации по бокам, аккуратно размещенные над белыми накладками, чтобы их было хорошо видно
Два предложения, показанные в слайд-шоу, относятся ко всему целевому рынку, а не только к конкретному посетителю (например, девочкам-подросткам или женщинам старше 40 лет)

Если вы думаете, что сможете сделать это, как Sephora, то обязательно попробуйте.

Хотя все эксперты по конверсии, включая Пипа Ладжа, Тима Эйша и Криса Говарда, строго рекомендуют вам избавиться от ползунков изображений. Тем не менее, я думаю, что слайдеры изображений, которые рассказывают историю, безусловно, радуют глаз посетителей.

Прекрасным примером является приведенный ниже слайдер от Mercedes Benz:

Источник изображения: Mercedes Benz

4. Используйте главное изображение и главные видео

Apple использует основное изображение вместо слайдера изображения, выделяя свои последние продукты. Клики по таким высококачественным ярким изображениям могут помочь вам отслеживать вовлеченность и оптимизировать целевую страницу для повышения конверсии.
Точно так же вместо статического основного изображения можно использовать главное видео. Использование главного видео имеет ограничения по размеру, поэтому убедитесь, что размер видео не влияет на качество, когда оно находится в главном разделе вашего веб-сайта.

Основные выводы

Главные изображения и главные видео становятся все более популярными, поскольку позволяют владельцам веб-сайтов легко отслеживать конверсии и находить возможности оптимизации для повышения эффективности. Итак, если вам действительно нужно использовать слайдер изображений и карусели, вот краткий обзор того, что вы должны иметь в виду:

Убедитесь, что они быстро загружаются
Снизьте частоту слайдов
Разрешить пользователям управлять показом (предоставить кнопки паузы и воспроизведения или оставить поворот изображения вручную, а не автоматически)
Параметры навигации по слайдам должны быть очень заметными и очевидными (хорошо работают огромные стрелки с обеих сторон, расположенные поверх белого наложения. Маленькие точки, спрятанные в углах ползунков изображения, не подходят)
Предложения на слайдах должны быть актуальны для всей вашей целевой аудитории (а не только для конкретного посетителя)
Чем меньше слайдов, тем лучше
Предпочтение ползункам с ручным управлением, а не с автоматическим вращением

Независимо от того, какой из этих вариантов слайдера изображений вы выберете, не забудьте провести A/B-тестирование. Даже если вы на 100 % уверены, что ваша лечебная страница повысит конверсию, протестируйте ее, чтобы увидеть, на сколько процентов она означает улучшение по сравнению с контрольной страницей.

Передовой опыт и примеры создания каруселей веб-сайтов

Карусели веб-сайтов всегда были известны как проверенный способ улучшить веб-дизайн и увеличить прибыль. При разумном внедрении они могут стать мощным инструментом для повышения вовлеченности пользователей и снижения показателя отказов любого веб-сайта в различных отраслях.

Сегодня веб-карусели широко используются крупнейшими мировыми корпорациями из различных секторов, такими как Toyota, Netflix, Spotify, Amazon, а также миллионами малых и средних предприятий в Интернете. В целом, они часто используются для улучшения веб-дизайна и взаимодействия с пользователем, привлечения внимания пользователей, продвижения продуктов или услуг, поддержки основного контента и так далее.

В этом посте мы обсудим основы реализации каруселей на веб-сайтах, включая их типы, примеры и передовые методы, чтобы максимизировать эффективность контента для вашего бизнеса независимо от отрасли. Начнем!

Что такое карусель сайта?
В чем разница между каруселями и слайдерами?
Что можно и чего нельзя делать для каруселей на веб-сайтах
Типы и примеры дизайна каруселей на веб-сайтах
Рекомендации по созданию каруселей на веб-сайтах
Как добавить карусели на сайт, созданный с помощью SendPulse
Заключение

Что такое карусель сайта?

Карусели веб-сайтов, также известные как слайдеры-карусели, относятся к слайд-шоу фото- или видеоконтента на веб-сайте. Динамические карусели отображают различный контент одного типа или темы с определенным движением, скоростью и временем, в то время как статические карусели перемещаются вручную с помощью боковых кнопок или стрелок.

Веб-дизайнеры обычно используют карусельные ползунки как компактный и привлекательный вариант для представления контента с более высокой степенью интерактивности. Кроме того, они отлично работают, чтобы заинтересовать посетителей содержимым страницы и побудить их изучить тему или узнать больше о продуктах.

В чем разница между каруселями и слайдерами?

Оба термина имеют одно и то же значение в контексте, поскольку они отображают изображения, видео или другой контент в виде слайд-шоу в автоматическом или ручном режиме. Однако ползунки могут отображать по одному слайду за раз, тогда как карусели позволяют пользователям просматривать несколько слайдов одновременно.

Используя ползунки, вы можете видеть только один слайд, но с помощью каруселей вы можете показывать больше слайдов рядом друг с другом; источник: Youcanwp

Хотя оба варианта немного отличаются по дизайну, они могут обеспечить максимальную эффективность работы вашего веб-сайта при правильной реализации. Давайте рассмотрим основные правила и запреты использования каруселей веб-сайтов.

Что можно и чего нельзя делать с каруселями веб-сайтов

Прежде чем мы познакомимся с основными типами каруселей и проанализируем несколько отличных примеров каруселей веб-сайтов, давайте обсудим передовые методы создания и добавления привлекательной, функциональной и эффективной карусели на ваш веб-сайт.

Хотите продвигать свой продукт или услугу?

С помощью SendPulse вы можете охватить свою целевую аудиторию, отправляя различные типы сообщений через предпочитаемый ими канал связи — кампании по электронной почте, веб-push-уведомления, SMS и чат-боты для WhatsApp, Instagram, Facebook Messenger или Telegram.

Неправильный способ использования каруселей на вашем веб-сайте

Карусели на веб-сайте могут значительно улучшить взаимодействие с пользователем, функциональность страницы и эффективность контента. Однако есть некоторые общие аспекты, когда карусель на веб-сайте может быть не лучшим решением.

Вот несколько случаев, когда лучше не использовать карусели на сайте:

В статьях и на страницах блога . Когда страница ориентирована на контент, карусели веб-сайта могут отвлекать, а не повышать ценность ее производительности.
Когда это для бизнеса, а не для пользователей . Внедряйте карусели, думая о конечных пользователях, а не только для улучшения внутренних показателей.
Когда он добавлен повсюду на веб-сайте . Из-за их очень привлекательного характера карусели следует использовать очень осторожно, чтобы обеспечить максимальную отдачу и привлечь больше кликов от посетителей. В противном случае его содержание в лучшем случае никто не помнит; в некоторых случаях раздраженные клиенты могут просто уйти.

Это те случаи, когда лучше избегать каруселей на сайте. Тем не менее, на вашем сайте есть много возможностей для карусели.

Правильный способ использования каруселей на вашем веб-сайте

Карусели позволяют нескольким фрагментам контента занимать одно желанное пространство, и это одно из их главных преимуществ. Не стесняйтесь использовать карусели на своем сайте в следующих случаях:

Когда пользователи этого ожидают . Другими словами, если представление контента в виде слайд-шоу, галерей, временных шкал или презентаций приносит пользу его восприятию, вовлечению и пользовательскому опыту.
Когда это экономит время и клики . Карусели на веб-сайте также расширяют функциональность страницы, помогая пользователям быстрее получать нужную им информацию и экономить время, перемещаясь по сайту.
Когда вам нужно выделить ключевые сообщения или элементы . Карусели могут помочь вам выделить определенный тип контента, чтобы повысить его видимость и вовлеченность.
Когда контент визуален и его легче отображать . Карусели могут стать подходящей альтернативой «текстовой стене», помогая сделать ваш контент более привлекательным и съедобным.
Когда вам нужно сделать сравнение . Карусели могут помочь пользователям сравнивать различные товары и их характеристики во время покупок. Это популярная тактика электронной коммерции.
Когда это экономит место на вашей странице . Вместо того, чтобы говорить сотни слов, объясните свое сообщение информативными и увлекательными каруселями. Это будет более привлекательным и сэкономит много места для обеспечения такой же или даже более высокой ценности для посетителей вашего сайта.

Независимо от вашей отрасли и специфики аудитории веб-карусели могут стать настоящим спасением для вашего бизнеса. Однако среди различных дизайнов, применяемых сегодня, становится несколько сложно определить наиболее эффективный для вашего бизнеса. Чтобы помочь вам сделать правильный выбор, давайте рассмотрим самые популярные типы веб-каруселей на реальных примерах из разных отраслей.

Откройте для себя наш блог с полезными советами по оптимизации воронки конверсии вашего веб-сайта для увеличения числа потенциальных клиентов.

Открыв для себя функциональность веб-карусели, давайте теперь рассмотрим, какие типы дизайна в настоящее время находятся в тренде. Это поможет вам определить наиболее эффективный и привлекательный вариант, который лучше подходит для вашего веб-сайта и идеально работает, в частности, для вашей аудитории.

Галерея-карусель

Этот тип веб-сайта представляет собой карусельную галерею для нескольких изображений или видео. Для лучшего вовлечения пользователей видео часто имеют автовоспроизведение, подобное статическим изображениям, которые автоматически меняются через определенный интервал.

Пример: Портфолио Томека Михальски

Минималистичный, но привлекательный пример карусели галереи профессионально интегрирован в дизайн сайта. Эта карусель на главной странице знакомит с самыми последними проектами, представленными в привлекательной и эстетичной форме.

Галерея-карусель Томека Михальски

Полноэкранная карусель

Этот тип подразумевает использование всей страницы в качестве полноэкранной карусели, которая переключается между разделами. Изображения плавно появляются в поле зрения, создавая незабываемый пользовательский опыт. Поскольку в каждом разделе представлены разные пакеты контента, это также очень эффективно с точки зрения маркетинга.

Пример : Dreamworks

Dreamworks использует интерактивную полноэкранную карусель на своей целевой странице для продвижения выпущенных и будущих фильмов.

Полноэкранная карусель от Dreamworks.

Слайдеры изображений Hero. В основном, он привлекает внимание людей за счет простоты структуры: карусель сайта в данном случае — это качественные изображения товаров-героев, четкие заголовки и лаконичные описания.

Удобные боковые кнопки направляют зрителей к информации о дополнительных продуктах, а в некоторых случаях микроанимация используется для выделения ключевых элементов целевой страницы, таких как CTA или заголовки.

Пример : Mercedes Benz

Простые, современные и эффективные слайдеры изображений на веб-сайте Mercedes используются для демонстрации своих автомобилей. Кроме того, визуальный макет этой карусели сравнительно легко реализовать на различных веб-сайтах, что делает ее универсальным вариантом для дизайна любой страницы.

Слайдеры изображений Hero от Mercedes Benz

Несколько горизонтальных каруселей

Горизонтальная карусель упрощает и ускоряет навигацию по содержимому веб-сайта. С точки зрения разработчика, такой карусельный дизайн веб-сайта позволяет отображать больше информации на одной странице, что повышает уровень вовлеченности, приносит больше качественных лидов и конверсий.

Пример : Netflix

С помощью нескольких горизонтальных каруселей разработчикам Netflix удалось сэкономить место, но при этом позволить посетителям просматривать разнообразные персонализированные рекомендации фильмов на одной странице.

Несколько горизонтальных каруселей от Netflix

Учебные слайдеры

Карусель веб-сайта также может быть представлена как пошаговое руководство. Обычно этот тип карусели имеет простую и интересную структуру контента, которая побуждает пользователей щелкать по нему, чтобы узнать новые рекомендации, узнать о функциях продукта и многое другое.

Пример : Приложение Tea Round

На веб-сайте Tea Round представлены функции своего приложения со ползунком обучающей программы на главной странице. В сочетании со стильными элементами дизайна, такими как рукописные заметки, художественные изображения и удобная навигация, карусель может легко привлечь внимание пользователей и продемонстрировать ценность продвигаемого продукта.

Учебные слайдеры от Tea Round

Теперь пришло время открыть для себя ключевые моменты и рекомендации, которые следует учитывать при внедрении карусели на вашем веб-сайте.

Отключить автовоспроизведение

Обычно карусели автоматически пролистывают контент, но главный недостаток этого подхода заключается в том, что он влияет на вовлеченность пользователей и заставляет их отскакивать.

Причем, вне зависимости от статической или динамической модели карусели, первый слайд всегда доминирует, получая 40% всех кликов. Это означает, что вы должны дать конечным пользователям лучший контроль над скоростью и темпом карусели для более удобного взаимодействия с пользователем.

Включите от трех до пяти слайдов

Чем больше слайдеров у вас есть, тем меньше вероятность того, что пользователи будут просматривать весь контент карусели. По сути, первые три слайда получают наибольшее количество кликов, а это означает, что создание пяти и более слайдов будет просто пустой тратой времени и ресурсов.

Используйте контент с высоким разрешением

Какой бы контент вы ни хотели отображать, поддерживайте его наилучшее качество, чтобы привлекать, а не отвлекать посетителей. В противном случае он может легко превратить первоклассный профессиональный веб-сайт в низкокачественный.

Оптимизация для SEO

Как и любой другой контент, текст, который вы используете для карусели вашего сайта, также отображается в HTML-коде страницы. Таким образом, использование передовых методов SEO для заголовков, альтернативного текста изображения и других строк кода вашей карусели может улучшить позицию вашей страницы в поисковой выдаче.

Ознакомьтесь с нашей публикацией о тенденциях SEO, которые вы можете использовать для повышения рейтинга SEPR.

Текст должен быть коротким и простым

Чтобы сделать карусель действительно интересной, не превращайте ее содержимое в статью в блоге. Вместо этого сделайте его съедобным, легким для восприятия и с четким сообщением для максимальной эффективности.

Создайте мощный CTA

CTA — ключевой компонент любого веб-сайта, который позволяет пользователям четко понимать, что делать после того, как они изучат содержание страницы. Таким образом, каждый слайд в вашей карусели должен содержать правильное намерение пользователя и нацеливаться на конкретную цель для достижения максимальной эффективности. Примеры призывов к действию: «Получите свой (продукт) сегодня», «Узнайте больше о (услуге)» или «Запросите консультацию».

Оптимизация для разных устройств

Сегодня люди просматривают веб-сайты с разных устройств: ноутбуков, планшетов, носимых устройств и смартфонов. Эта тенденция сделала оптимизацию устройств одним из основных приоритетов в веб-дизайне. Настройка каруселей веб-сайтов не будет здесь исключением, поскольку она помогает повысить их вовлеченность и функциональность.

Включая кнопки управления

Боковые кнопки и кнопки регулировки громкости, а также индикаторы навигации могут дать пользователям лучший контроль над просматриваемым контентом, что необходимо для предоставления первоклассного UX.

Не злоупотребляйте функцией карусели

В зависимости от типа и функциональности рекомендуется использовать только одну или две карусели на странице. В противном случае он не принесет желаемых результатов и окажется бесполезным для посетителей и владельцев веб-сайтов.

Прочтите наш пост о том, как провести исследование дизайна UX/UI, чтобы оптимизировать ваш веб-сайт для получения максимальной конверсии.

Это всего лишь несколько распространенных приемов дизайна карусели веб-сайта, но будьте уверены, что все они могут значительно повысить производительность вашей страницы.

Как добавить карусели на сайт, созданный с помощью SendPulse

С помощью нашего конструктора сайтов вы можете добавить галерею для отображения нескольких изображений в виде карусели, сетки или коллажа.

Сначала добавьте виджет «Галерея» в нужную часть вашего сайта.

Добавление виджета «Галерея»

Затем выберите тип галереи, который вы хотите создать — карусель, сетка или коллаж — и загрузите изображения, которые вы хотите использовать для карусели вашего веб-сайта.

Выбор типа используемой галереи

Теперь перейдите к настройке вашего виджета. Выберите, сколько изображений вы хотите добавить в строку, и настройте ее внешний вид, укажите расстояние между изображениями, скруглите углы изображений и выберите цвет кнопок ползунка.

Настройка карусели сайта в SendPulse

Вы также можете включить или отключить открытие изображения по клику и автоматизировать переход между слайдами.

Заключительные мысли

Использование визуальных элементов на веб-сайте — один из самых эффективных способов повысить вовлеченность и снизить показатель отказов. При организации большого количества медиаконтента на странице нет ничего лучше, чем добавить карусельный слайдер.