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

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

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

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

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

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

Статические разделы (например, на сайте Mango) — эффективная альтернатива карусели на главной странице, которую технически выполнить намного проще, чем «хорошо реализованный» слайдер.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1) Слайды не должны меняться слишком быстро или слишком медленно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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