Карусель со слайдами на главной странице

В дизайне коммерческих сайтов всё реже используются карусели, они же слайдеры, особенно для главных страниц. Как выявило исследование Baymard Institute “234 лучших сайта электронной коммерции, ранжированные по эффективности пользовательского опыта”*, лишь 28% ведущих коммерческих веб-ресурсов в США и Европе сохраняют карусели. Для сравнения, в 2016 году таких было 32%, а в 2013 году – 52%.

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

Согласно собранной статистике, лишь на 41% сайтов карусели не имеют проблем в плане пользовательского опыта.

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

Результаты исследования юзабилити каруселей

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

В частности, вы получите ответы на следующие вопросы:

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

А еще вы найдете в этой статье:

• 3 UX-требования к карусели как на десктопных, так и на мобильных версиях
• 3 дополнительных UX-требования к автопрокрутке слайдов на десктопной версии
• 3 дополнительных UX-требования к слайдерам на мобильной версии

Как решить, нужна ли вам карусель на главной странице сайта?

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

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

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

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

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

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

Если вы всё же хотите использовать на главной странице слайдер, переходите к следующей части этой статьи. В ней будет рассказано о 9 главных UX-требованиях к правильной работе карусели, выявленных Baymard Institute* в результате тестирования юзабилити десктопных и мобильных версий сайтов.

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

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

Но на мобильной версии всё иначе. Ведь здесь нельзя навести на слайд курсор мыши.

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

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

Исследование Baymard Institute* показало, что многих пользователей раздражает смена слайдов до того, как они успели их дочитать. Но что еще хуже, когда некоторые посетители сайтов касались заинтересовавшего их слайда, он вдруг сменялся на следующий, из-за чего они попадали на другую целевую страницу. Большинство сразу возвращались назад, получая «просто» моментное разочарование, но небольшая группа пользователей вообще не понимала, что произошло, а контент оказывался нерелевантным тому слайду, на который они нажали.

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

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

Использование блоков статического контента на главной странице вместо карусели — это эффективная и более простая в реализации альтернатива (см Williams-Sonoma). Но придется тщательно подбирать контент для главной страницы.

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

3 UX-требования к карусели как на десктопных, так и на мобильных версиях

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

1) Необходимо максимально внимательно подбирать слайды

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

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

Это демонстрирует, насколько важна последовательность слайдов в карусели.

2) Слайды карусели не должны быть единственным способом попасть в определенные разделы с товаром или на информационные страницы

Повторим: есть вероятность, что часть пользователей вообще не просмотрят ни одного слайда, кроме первого.

А некоторые посетители не увидят и первый слайд в карусели. Ведь, как показало исследование Baymard Institute*, многие начинают искать нужный им продукт (через меню или строку поиска) еще до того, как главная страница полностью загрузится.

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

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

Одна из наиболее серьезных ошибок – размещение в карусели блока с поиском. У него должно быть свое место в меню или в «шапке» сайта.

3) Ручное управление карусели должно быть полностью понятно пользователям

На сайте Newegg практически не видны стрелки для пролистывания слайдов – они сливаются с фоном.

Если элементы управления карусели (точки и стрелки) плохо различимы или имеют слишком маленькую зону действия, это равносильно их отсутствию.

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

Кроме того, можно добавить на слайдер стрелки «влево-вправо». Они более понятны неопытным пользователям.

3 дополнительных UX-требования к автопрокрутке слайдов на десктопной версии

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

При слишком быстрой прокрутке пользователи не успевают оценить слайд и информацию на нем.

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

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

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

Оптимальное время показа слайдов зависит от того, сколько на них текста. Для одного заголовка и пары тегов/меток достаточно 5-7 секунд. Если информации больше – до 10 секунд.

2)Авторотация должна останавливаться при наведении курсора

Эта важная функция отсутствовала на 18% протестированных сайтов с каруселью на главной странице.

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

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

3) Авторотацию следует останавливать после любого активного взаимодействия пользователя с каруселью.

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

Учесть все нюансы при реализации карусели с автопрокруткой довольно сложно. На сайте Best Buy слайды меняются через 7 секунд, автопрокрутка останавливается, если пользователь начинает сам их листать. К тому же есть дополнительные значки «Воспроизвести» и «Пауза». При этом отсутствует приостановка при наведении курсора.

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

3 дополнительных UX-требования к слайдерам на мобильной версии

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

1) Должны поддерживаться мобильные жесты

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

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

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

2) Текст слайда должен легко читаться

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

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

С этим не будет проблем, если для каждого слайда в обязательном порядке проверять, останется ли текст разборчивым даже на самом маленьком мобильном экране в портретном режиме. Но в идеале любой текст на слайдере должен представлять собой HTML-текст, а не быть встроенным в изображение (так будет лучше в том числе с точки зрения доступности и SEO).

3) Контент карусели должен быстро загружаться

Пользователей раздражает медленная загрузка (более 1 секунды) – и особенно на мобильных устройствах.

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

Вот что говорил один из пользователей, ожидая загрузки страницы: «Ну почему так медленно? [Постукивает пальцами.] Я не знаю, в чем проблема: в Интернет-соединении, в моем телефоне или в этом веб-сайте. Кого мне винить? Обычно у меня с этим всё нормально. И в таких случаях я обычно просто закрываю сайт и ищу другой. Сайт должен работать быстрее… Лично для меня это критично, потому что мне не хватает терпения… Если сайт грузится слишком долго, я просто ухожу».

Убедитесь, что ваши карусели соответствуют всем требованиям по реализации – или отдайте предпочтение блокам со статическим контентом

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

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

• Необходимо максимально внимательно подбирать слайды
• Слайды карусели не должны быть единственным способом попасть в определенные разделы с товаром или на информационные страницы
• Ручное управление карусели должно быть полностью понятно пользователям

На десктопных версиях карусели с авторотацией должны соответствовать 3 дополнительным требованиям:

• Слайды не должны меняться слишком быстро или слишком медленно
• Авторотация должна останавливаться при наведении курсора
• Авторотацию следует останавливать после любого активного взаимодействия пользователя с каруселью

На мобильных версиях карусели должны иметь ручную прокрутку и соответствовать 3 дополнительным требованиям:

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

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

Если выполнение всех этих 9 пунктов реализации карусели на сайте оказывается слишком сложным и требует много ресурсов, авторы исследования Baymard Institute* рекомендуют использовать блоки статического контента – особенно для мобильных устройств.

*Оригинал статьи: 9 UX Requirements for a User-Friendly Homepage Carousel Design (If You Need One) Jamie Holst. 30.04.2019