Карусель (або слайдер) — це популярний елемент UI-дизайну, що дозволяє компактно представити кілька блоків контенту, зокрема зображення, текст або відео. Найчастіше каруселі використовуються на сайтах електронної комерції для презентації товарів, акцій та спеціальних пропозицій.

Що варто знати:

  • Каруселі на головних сторінках e-commerce сайтів часто не виконують своєї функції належним чином.
  • Через проблеми з UX користувачі можуть просто не помітити важливий контент.
  • Дотримання 10 основних принципів проєктування каруселей (або заміна їх на статичні зображення) допомагає забезпечити зручність взаємодії й зробити потрібну інформацію легко доступною.

Статистика:

  • 33% топових e-commerce сайтів у США та Європі використовують карусель на головній сторінці.
  • Із них 46% мають серйозні UX-проблеми у реалізації.

Дослідження від Baymard Institute, що охоплює масштабне тестування e-commerce платформ, виявило: користувачам часто важко взаємодіяти з каруселями, оскільки ті не відповідають базовим вимогам зручності використання.

У статті ми детально розберемо:

  • 3 основні вимоги до дизайну каруселей для десктопу та мобайлу;
  • 3 додаткові UX-вимоги для десктопних каруселей з автопрокруткою;
  • 4 додаткові вимоги для мобільних версій.

3 обов’язкові вимоги до дизайну каруселей для десктопу та мобільних пристроїв

Наші дослідження показали, що каруселі на головних сторінках можуть бути корисними, але на практиці близько 50% з них не працюють ефективно. Хороша новина — більшість проблем можна легко виправити.

1. Ставте на перший слайд усе найважливіше

👎🏻 У мобільній версії сайту GAP ані зображення, ані текст на першому слайді каруселі не дають уявлення про те, що чекає на користувачів далі. Якщо перший слайд їх не зацікавить, вони навряд чи залишаться чекати появи наступного — навіть якщо той міг би виявитися для них більш релевантним. 👍🏻 Натомість перший слайд на сайті Overstock з великим написом «Sale» та яскравими червоними акцентами одразу привертає увагу й, скоріш за все, зацікавить користувачів, які шукають знижки

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

Особливо це актуально для автокаруселей. А якщо вона взагалі не крутиться сама, то перший слайд — єдиний, який користувач точно побачить. Саме тому перший слайд повинен показувати найціннішу для бізнесу і водночас цікаву для користувача інформацію: знижки, новинки, сезонні пропозиції тощо.

2. Не робіть карусель єдиним шляхом до важливого контенту

Не можна розраховувати, що всі користувачі обов’язково побачать карусель. Під час тестування багато хто взагалі її ігнорував — одразу використовували пошук або меню, ще до того, як сторінка повністю завантажилась.

👎🏻 AT&T: Хоча більшість користувачів побачать пропозицію на першому слайді каруселі (перше зображення), чимало з них можуть не переглянути другий слайд — і, відповідно, пропустити іншу вигідну пропозицію (друге зображення).
👍🏻 Amazon: Посилання "Prime Early Access Sale" у каруселі — не єдиний помітний шлях до цього розділу. Один із пунктів навігації — "Prime Early Access Deals" — також веде туди. Така альтернатива дозволяє користувачам, які не побачили відповідний слайд, все ж отримати доступ до потрібного контенту.

Також, є ще проблема банерної сліпоти: якщо карусель виглядає як реклама, її просто пролистають. Тому не варто ховати критично важливі функції чи контент лише у каруселі — обов’язково дублюйте їх в основній навігації чи окремих блоках сторінки.

3. Робіть елементи керування очевидними і зручними

Банально, але факт: якщо користувач не бачить стрілки, крапки чи кнопки — він просто не буде взаємодіяти з каруселлю. А якщо ці елементи ще й дрібні або погано натискаються на мобілці — UX летить у прірву.

Тому:

  • Елементи керування мають бути помітними.
  • Контраст — обов’язковий: стрілки повинні вирізнятись на фоні слайдів.
  • Клікабельні зони мають бути достатньо великими, особливо на мобільних.
👎🏻 Елементи управління каруселлю на сайті Newegg надто малопомітні, через що деякі користувачі не зможуть зупинити зміну слайдів і, відповідно, повноцінно ознайомитися з цікавим для них контентом. 👎🏻 Схожа ситуація на сайті Ulta Beauty: елементи керування каруселлю маленькі й розташовані так, що їх легко не помітити. У результаті користувачі можуть просто проігнорувати карусель — а отже, й пропустити релевантний для себе контент.
👍🏻 Добре помітні елементи управління каруселлю на сайті Sears дозволяють користувачам легко перемикати слайди та знаходити контент, який їх цікавить.

3 додаткові UX-вимоги для десктопних каруселей з автоматичним прокручуванням

Автоматичне прокручування добре працює на десктопі (але не в мобільних інтерфейсах), оскільки підвищує видимість слайдів і дає зрозуміти, що перед нами саме карусель, а не статичний банер.

Є три деталі, які необхідно враховувати для реалізації ефективного автопрокручування:

1. Розумний інтервал між слайдами

0:00
/0:09

👎🏻 «У цих хлопців є кілька пішохідних екскурсій різними районами Лондона». О! Як швидко змінився слайд — це було дивно. Я навіть не встиг(ла) дочитати, що написано на плашках від TripAdvisor». Коли слайди перемикаються надто швидко, як у випадку з Fun London Tours, карусель втрачає ефективність і, швидше за все, залишає негативне враження на користувачів.

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

Утім, якщо слайди змінюються занадто повільно, а видимий слайд при цьому не викликає інтересу, це також може викликати роздратування.

Середній час перемикання слайдів, що містять лише заголовок і кілька тегів, — 5–7 секунд. У випадку зі слайдами, які містять більше тексту, допустимий статичний час може сягати до 10 секунд.

2. Зупиняйте автоматичне прокручування при наведенні

0:00
/0:14

👍🏻 Зупинка автопрокручування при наведенні на карусель на головній сторінці Home Depot дозволяє користувачам ефективніше взаємодіяти з контентом.

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

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

Очевидно, що подібний досвід важко назвати позитивним. У деяких випадках це може мати й негативні наслідки — наприклад, якщо користувач не зрозуміє, що сталося, і продовжить перегляд вже неактуальної сторінки.

3. Зупиняйте автопрокручування після активної взаємодії

0:00
/0:15

👍🏻 На сайті Amazon автопрокручування зупиняється, щойно користувач натискає на стрілку вперед або назад. Це дає змогу контролювати перегляд і зосередитись на слайді, який їх зацікавив.

Зазвичай після призупинення автоматична прокрутка запускається знову, однак є виняток.

4 додаткові UX-вимоги для мобільних каруселей

Масштабне тестування показало: щоб карусель у мобільному інтерфейсі працювала ефективно, варто дотримуватись чотирьох ключових правил:

1. Відмовтесь від автоматичного прокручування

👎🏻 У застосунку Kroger відсутні помітні елементи керування для зупинки або перемикання слайдів. Тому, якщо користувач намагається натиснути на слайд під час його зміни, він може потрапити не на ту сторінку. Крім того, дрібний шрифт ускладнює читання тексту для деяких людей. 👎🏻 У мобільній версії сайту Sears елементи керування автоматичною каруселлю погано помітні, тож користувачі можуть не зрозуміти, як призупинити слайд, і не встигнути дочитати його зміст.

Головна відмінність між десктопом і мобайлом — це відсутність стану наведення на останньому. На десктопі, коли користувач наводить курсор на слайд, ми можемо припустити, що він зацікавлений у контенті — і відповідно зупинити автопрокрутку. У мобільному ж інтерфейсі відстежити це просто неможливо.

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

Хтось одразу помічав, що сталося, але інші — ні, і їх це збивало з пантелику.

І оскільки технічних рішень, які б дозволили це виправити, наразі не існує — краще взагалі уникати автопрокручування у мобільних версіях. Його мінуси перекривають потенційні плюси на кшталт збільшеної видимості контенту.

2. Додайте підтримку звичних жестів

👎🏻 У застосунку Staples користувачі не могли гортати слайди свайпом, а три непомітні крапки були єдиним способом перемикання. Через це вони могли пропустити акцію або товар, який їм підходить.

Користувачі звикли свайпати. Так-так, можна додати кнопки «вперед» / «назад» і навіть індикатори слайдів, але без жестів усе це буде виглядати застаріло. Тестування підтвердило: ці елементи працюють краще як доповнення, а не як основна механіка навігації.

3. Переконайтесь, що текст добре читається

👍🏻 Текст у каруселі на сайті Home Depot легко читається, навіть попри досить дрібний шрифт.

Часто розробники просто переносять десктопну карусель на мобільний сайт без змін — і все. В результаті — дрібний, важкочитабельний текст і жодної адаптації під маленький екран.

Не робіть так. Увесь текст на слайдах має бути справжнім HTML, а не частиною зображення — це не лише зручніше для читання, а й краще для SEO.

4. Піклуйтесь про швидкість завантаження

Користувачі на мобайлі менш терплячі. Якщо слайд вантажиться довше секунди — людина просто зникає. Тому обираючи, що саме показати в каруселі, враховуйте ваґу зображень і кількість анімацій — це реально впливає на досвід користувача.

Що обрати: карусель чи статичне зображення?

👍🏻 Альтернативою каруселі є статичне відображення контенту на головній сторінці — як, наприклад, на сайті Living Spaces. Користувачі можуть вільно переглядати спеціальні пропозиції та переходити до потрібних розділів. 👍🏻 Аналогічно, H&M показує товари одразу на головній сторінці, що дозволяє користувачам швидко зорієнтуватися в асортименті та дізнатися про актуальні акції.

Іноді найкраща карусель — це… її відсутність.

Статичний контент — простіший, зрозуміліший, менш проблемний варіант. Замість того, щоб змушувати користувача чекати чи свайпати, ви просто даєте йому контент одразу, у зручному форматі.

Це ідеальний компроміс для більшості e-commerce сайтів: замість витрачати купу часу на налаштування каруселі, краще зробити акцент на юзабіліті. А вже якщо дійсно є сенс у каруселі — використовуйте 10 перевірених практик, які ми розібрали в цій статті.

🖤
Сподобався цей матеріал? Приєднуйся до дизайн спільноти Pleex і разом ми зробимо нашу дизайн-культуру кращою.
Поділитись публікацією