5 рекомендаций по карусели веб-сайтов, которые действительно улучшают взаимодействие с пользователем
На первый взгляд ползунки карусели на веб-сайте кажутся отличным способом представить контент с помощью серии изображений и текста. Если подумать, карусели на веб-сайтах также могут стать бельмом на глазу и отвлекать посетителей. Ребекка Хинтон, специалист по CRO-стратегии и копирайтер сайта Hubspot, делится, что, хотя карусели могут и не быть идеальными, они могут быть отличным способом персонализировать контент для разных типов клиентов.
Хорошо продуманная карусель не только показывает ваш основной контент, но также может заинтересовать ваших посетителей и улучшить общий пользовательский опыт (UX). Ваша карусель должна заинтриговать посетителей, узнать больше о том, что вы предлагаете, и вызвать у них интерес.
Теперь давайте рассмотрим некоторые передовые практики карусели на веб-сайтах, которые помогут вам в этом.
Рекомендации по карусели веб-сайтов
1 Откажитесь от автовоспроизведения.
Карусели часто пролистывают контент автоматически, при этом новое изображение появляется каждые пару секунд. Однако по разным причинам может быть лучше отказаться от автовоспроизведения.
Ползунки карусели предназначены для привлечения и дальнейшего информирования зрителя. При использовании автоматических каруселей у читателей может не быть времени, необходимого для полного понимания слайда, прежде чем они будут представлены к следующему. Это может сбить с толку посетителя или отвлечь его от вашего сообщения, что потенциально может сбить его с пути к покупке.
С технической точки зрения карусели с автовоспроизведением также могут влиять на производительность веб-страницы, увеличивая время загрузки и вызывая задержку. Эти проблемы могут расстраивать пользователя и уводить его с вашего сайта.
Позволяя пользователям решать, когда они хотят продвигаться по карусели, они будут оставаться вовлеченными и узнавать концепции в своем собственном темпе, в конечном итоге предоставляя больше возможностей вашим клиентам.
Говоря о мощности, еще один способ предоставить пользователям вашего сайта полный контроль над слайдерами карусели – это инструменты навигации. Инструменты навигации в карусели должны быть простыми и понятными и обычно отображаются в виде стрелок или точек.
Стрелки влево и вправо – это легко узнаваемые способы для тех, кто взаимодействует с ползунками, двигаться вперед или назад, когда они готовы. Стрелки, указывающие вправо, помогут пользователю перейти к следующему слайду, а стрелки, указывающие влево, покажут предыдущие слайды.
Система навигации на основе точек будет показывать ряд точек в строке в зависимости от количества кадров в карусели. Точки будут либо сплошными, либо пустыми, в зависимости от того, на каком слайде находится зритель. Отображаемая точка слайда должна быть заполнена, а остальные – пустотелыми.
Независимо от того, какой тип навигации вы используете в своей карусели, пользователь всегда должен видеть свой прогресс в последовательности. Точечная система – отличный способ показать, как далеко они продвинулись. Что касается системы стрелок, может быть полезно включить знак, показывающий, на каком слайде находится пользователь из общего числа, например «2/3».
3 Адаптировать ко всем устройствам.
По данным Statista, с 2017 года мировой мобильный веб-трафик постоянно колеблется на уровне около 50%. В настоящее время существует множество устройств, от мобильных, планшетов до ноутбуков, поэтому важно соответствующим образом адаптировать свой веб-сайт.
Это означает, что карусели веб-сайтов должны иметь адаптивный дизайн. Еще раз убедитесь, что все изображения и текст, связанные с вашей каруселью, четкие и правильно отображаются на странице. Помните, что мобильные пользователи также могут касаться, зажимать и пролистывать, поэтому убедитесь, что эти жесты работают и на ваших веб-каруселях.
На мобильных устройствах карусель должна быть пропорциональна остальной части страницы, чтобы она не занимала слишком много места на экране. Повышенное внимание к карусели может привести к риску того, что пользователь пропустит другой ваш контент, или, что еще хуже, отвлечет и рассердит читателя.
4 Оптимизируйте для SEO.
Создавая слайдеры карусели, вы захотите настроить себя на успех, льстив Google, чтобы повысить свой рейтинг в поисковых системах. И нет, комплименты не принесут вам очков. Ключевые области, на которые следует обратить внимание поисковым системам, – это заголовки и замещающий текст изображения.
Чаще всего люди используют заголовки H1 для своих кадров карусели, которые снаружи могут показаться безобидными. Однако чрезмерное использование заголовков H1 сбивает с толку Google и другие поисковые системы, поскольку каждый заголовок H1 по сути представляет собой заголовок страницы. При наличии нескольких тегов / заголовков H1 поисковым системам сложно понять информацию на странице, что негативно повлияет на ваш рейтинг.
Альтернативный текст изображения также играет важную роль в рейтинге SEO. Альтернативный текст – это письменное описание изображения, которое отображается, когда изображения не загружаются. Они также могут помочь читателям с ослабленным зрением лучше понять содержание. Будьте описательными, конкретными и релевантными в замещающем тексте изображения, чтобы Google мог просканировать и извлечь необходимую информацию для поисковика. Хорошо написанный замещающий текст повысит ваш рейтинг при поиске по страницам и изображениям.
5 Целенаправленно создавайте последовательность карусели.
Есть пословица: «Лучшее оставь напоследок». Поэтому, естественно, мы поступим наоборот.
Карусели предназначены для того, чтобы привлечь внимание читателя, поэтому постарайтесь сделать все возможное, чтобы начать серию. Вы также должны предполагать, что ваши посетители имеют ограниченное внимание и не будут работать на протяжении всей вашей последовательности. Было бы напрасной тратой усилий дать вашим читателям последнее ура, если большинство из них не доживут до конца. Если они действительно заинтересованы, эта тактика побудит зрителя больше узнать о том, чем вы хотите поделиться.
Создавая последовательность, думайте о каждом слайде как о последнем впечатлении читателя о вашей компании или продукте. Что бы вы хотели, чтобы они запомнили? Подчеркните этот момент и убедитесь, что каждый кадр касается только одной точки. Иначе это может сбить с толку, если вы пытаетесь втиснуть несколько историй в одну картинку.
К тебе
Карусели веб-сайтов могут организовать контент на вашем веб-сайте визуально интересным образом, а также привлечь вашу аудиторию, чтобы помочь вам повысить конверсию. Обязательно помните о приведенных выше передовых методах при добавлении каруселей на свой веб-сайт, чтобы обеспечить эффективность ваших.
Источник записи: https://blog.hubspot.com