Оформити покупку чи закрити сайт? 5 помилок інтерфейсу, які змушують клієнтів іти геть

В ефективному інтерфейсі все працює на користувача. Все до останнього пікселя.

Й іноді достатньо змінити колір кнопки, переставити блоки чи прибрати один крок, щоб збільшити конверсію.

Та головне — знати, що саме змінювати.

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

 

5 поширених UX-помилок, що знижують конверсію і як це виправити

Далі приклади того, як точні, влучні зміни UX/UI здатні перетворити юзабіліті помилки на точки росту.

1. Десктопна версія сайту, яка погано вміщується в мобайл

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

Адаптив — це ще не mobile UX.

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

Наприклад, дизайн сайту Robinzon, офіційного дистриб'ютора Samsonite в Україні, створювався не як зменшена копія десктопу, а за принципом mobile-first. Це коли мобільна версія має власну логіку, структуру й враховує патерни поведінки саме мобайл користувача:

• Зменшену та фіксовану шапку або таку, що з'являється під час зворотного скролу;

• Знайомі іконки меню, кошика, пошуку тощо, які розташовані у звичних для нього місцях;

• Достатній простір між елементами та кнопками, щоб зменшити вірогідність випадкових натискань.

Дизайн інтернет-магазину Robinzon 

 

Ретельно опрацьована мобільна версія — це не «приємний бонус», а пряма інвестиція в бізнес-показники. Вона допомагає не лише зберегти мобільний трафік, а й краще його конвертувати, знижуючи відмови та полегшуючи шлях користувача до покупки.
 

2. Заплутана навігація, яка ускладнює пошук потрібного товару

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

Якщо меню важко знайти, в каталозі й Шерлок Холмс не розбереться, а фільтри не працюють, то пошук товару перетворюється на квест і це вбиває бажання щось купувати.

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

Це особливо критично для великих онлайн-магазинів, як-от VARUS — сервіс із тисячами найменувань, категорій, підкатегорій і різних форматів доставки. Для створення зручної навігації та каталогу у цьому онлайн проєкті були:

• Проаналізовані теплові карти, вебвізор, типові сценарії взаємодії користувачів із каталогом (які запити роблять, де і що шукають тощо);

• Проведено бенчмаркінг навігації серед 10 основних конкурентів.

На основі отриманих даних, структуру каталогу повністю переосмилили та перебудували: оптимізували категоризацію, змінили назви категорій, порядок та глибину вкладеності.

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

Розробка структури каталогу для VARUS

 

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

 

Вигляд каталогу інтернет-магазину VARUS у мобільній версії до та після редизайну

 

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

3. Сторінка товару без… важливої інформації про товар

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

Усе це про структуру сторінки. 

Наприклад, для інтернет-магазину професійної косметики Lamour вдалося підвищити ефективність сторінки товару та збільшити середній чек збільшився в 1,7 рази шляхом зміни layout-у та впорядкування інформації за пріоритетністю:

• Винесли ключові елементи (велике фото з каруселлю, назва, ціна, кнопка, оплата, доставка) на перший екран;

• Спростили опис й зробили структурованим: з підзаголовками, списками, окремими блоками;

• Додали соціальний доказ і бренд-переваги у вигляді окремого блоку (пояснили, що означає незвична кнопка «Тільки Pro»).

 

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

Сторінка товару інтернет-магазину Lamour

 

4. Cross-sell і up-sell без логіки = втрачені можливості для зростання AOV

Важлива не наявність рекомендації, а її доречність. Тож, якщо у блоці «З цим товаром купують» такі ж самі або відсутні в наявності товари, а у блоці «Вам може сподобатись» пропонують не релевантні товари, то це не працює і користі від того нуль. 

А от правильно налаштований cross-sell і up-sell — це не тільки плюс до середнього чека, а покращення досвіду користувача. 

Адже cross-sell не просто показує щось «схоже», а підказує що доповнить покупку прямо зараз, а upsell пропонує альтернативу, може й трохи дорожчу, зате ту, що ще краще підходить під запит клієнта.

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

Приклад реалізації блоку cross-sell у кошику інтернет-магазину YouShouldBeHair
 

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

5. Складний та довгий процес оформлення = незавершена купівля

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

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

Гарний приклад клієнтоорієнтованого інтерфейсу – сторінка оформлення замовлення на сайті інтернет-магазина ORNER:

• Простий процес в один екран;

• Зрозумілі кроки для прозорості та ясності;

• Компактний блок доставки з можливості згорнути інформацію, щоб бачити більше;

• Інформація про товари в замовленні з усіма важливими деталями та можливістю редагування;

• У мобільній версії закріплена кнопка «Оформити замовлення» внизу, щоб вона була завжди під рукою.

Сторінка чекауту на сайті ORNER: 1) Коротка, покрокова форма для заповнення необхідних даних для здійснення покупки; 2) Дані про замовлення з можливістю редагування

 

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

Гарний інтерфейс не завжди продає, а зручний — завжди

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

Та головне — кожен проєкт унікальний і універсальних рішень не існує. Що працює в одному випадку, може не спрацювати в іншому.

Тому покращення UX починається не з естетики, а з аналітики. Розуміння користувача та його потреб, болей, задач. Ефективний інтерфейс — це не красиві пікселі. Це продумана логіка, зрозуміла структура й вчасні підказки.