Як виглядає інтернет-магазин в Україні та Великій Британії та ідеальна картка товару на сайті електроніки – дослідження

У колонці для AIN.UA керівник UX/UI відділу компанії «Турум-бурум» Денис Студенніков розповів, як дослідження ринків електроніки України та Великої Британії дало змогу створити прототип оптимальної сторінки товару для інтернет-магазину електроніки на основі поведінкових патернів покупців.

У статті ви знайдете методологію, пояснення та зможете завантажити прототипи товарних сторінок для інтернет-магазинів.

Методологія проведення дослідження

Для кого це дослідження?

Це дослідження та прототипи карток товарів, призначені для ритейлерів електроніки будь-яких розмірів, які прагнуть покращити юзабіліті, збільшити конверсію та планують виходити на ринок Європи. Тут ви знайдете найкращі тенденції юзабіліті та інтерфейсу, виявлені під час дослідження, а також готові UX/UI рішення для поліпшення користувацького досвіду. 

Навіщо це потрібно?

Маючи 13-річний досвід роботи в UX/UI та CRO, а також достатню експертизу на українському ринку eCommerce, компанія Turum-burum вирішила провести дослідження в сегменті електроніки, виявити певні поведінкові патерни та узагальнити наші спостереження, створивши прототип картки товару. Також наша команда вирішила дослідити та порівняти ринок Великої Британії, а також вивчити британських покупців, виявити відмінності між українськими та британськими споживачами.

Як ми це зробили?

Методологія для вивчення українського та британського ринків була однаковою. Кожне дослідження було розділене на кілька етапів:

1. На першому етапі дослідження був проведений аналіз ринку електроніки та вебсайтів різного масштабу. Ми вирішили шукати нішеві бренди, щоб їх дослідити, порівняти та взяти за основу.
2. На другому етапі ми обрали найбільших нішевих гравців та провели бенчмаркінг.

Обрали за наступними критеріями:

• Лідери ніші;
• Трафік;
• Впізнаваність бренду (на основі органічної видачі в пошуковій системі Google).

3. В результаті другого етапу було відібрано по п’ять інтернет-магазинів для кожного дослідження. Проаналізувавши дизайн карток товарів цих інтернет-магазинів і враховуючи особливості цільових аудиторій, ми:
   • Визначили порядок розташування блоків та їх пріоритетність;
   • Виявили найбільш популярні функції;
   • Визначили елементи, які там вже присутні, а які ні. 
4. На основі цього списку ми створили порівняльну таблицю, де для кожного сайту і блоку:
   • Залишили коментар-гіпотезу, чому цей блок присутній або відсутній і чи варто його використовувати;
   • Відзначили, які елементи відображаються на першому екрані, що залишається при скроллі, що фіксується та ін;
   • Визначили перелік параметрів тощо.
5. Наші фахівці протестували різні сценарії поведінки користувачів, щоб відтворити їхні шляхи на різних сайтах. 
6. Після цього ми чітко визначили пріоритетність і розмістили блоки на сторінці товару так, щоб вони максимально ефективно впливали на підвищення конверсії. 
7. На основі даних, отриманих в результаті аналізу карток товарів лідерів ніші, ми створили прототипи оптимальних карток товару для українського та європейського ринків для наочності та сприйняття інформації.
8. У результаті ви отримаєте не тільки детальні аналітичні викладки, практичні рекомендації та готові UX/UI рішення, а й безкоштовні прототипи сторінок товару для українського та європейського ринків, готові до використання на будь-якому сайті магазинів електроніки. 

Специфічні особливості та відмінності карток товарів у Великій Британії та Україні

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

• Відрізняється ринок;
• Відрізняється цільова аудиторія;
• Відрізняється сам принцип прийняття рішень.

Нижче ви знайдете головні відмінності карток товару для Великобританії та України.

UA

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

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

Для споживачів з України надають всю інформацію в деталях (максимально докладно):

• Відображають всі параметри;
• Є опис про доставку, оплату, повернення тощо;
• Консультація;
• Додаткові послуги та багато іншого.

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

UK

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

В інтернет-магазині Великої Британії картка товару є своєрідною вітриною. Ми помітили, що в цілому в картці товару надається тільки основна інформація, така як:

• Фото товару, збільшення, відеоогляд;
• Ціна;
• Додати в кошик;
• Стандартна інформація про доставку (за наявності);
• Основні характеристики товару;
• Додаткові послуги;
• Акція;
• Детальний опис товару;
• Детальні характеристики товару;
• Відгуки;
• Політика повернення;
• Інші користувачі також люблять;
• Супутні товари;
• Сертифікати;
• Контактні дані.

Деяка ж інформація взагалі відсутня. Так, наприклад, на відміну від української електронної комерції, спосіб оплати майже ніде не вказується, оскільки, скоріш за все, це буде PayPal, адже це одна з найпопулярніших платіжних систем у Великій Британії, і 80% користувачів надають перевагу саме цій розрахунковій системі.

Чому для UK користувачів не потрібно стільки подробиць про товар і послуги?

Тому що для них більше відіграє роль ціна. Вони частіше купують у великих магазинах і на Amazon, або в офлайні. Здебільшого інтернет-магазини розроблені на Shopify або на подібних платформах, використовуючи стандартні інструменти, через це сайти виглядають більш простими.

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

Прототип оптимальної картки товару для інтернет-магазину електроніки

На основі нашого досвіду та отриманих в ході дослідження даних, ми створили прототип. Цей прототип являє собою оптимальну картку товару для будь-якого українського інтернет-магазину електроніки.

Наведений прототип картки товару не деталізований, але може бути основою для подальшої кастомізації під конкретний проект:

• Змінювати пріоритети в залежності від УТП бренду;
• Змінювати кольорову гаму;
• Замінити блоки тощо.

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

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

Desktop

Навігація і кнопка «Купити»

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

Закріплена навігація прискорює пересування сторінкою шляхом переходів до необхідних блоків, а не скролу. Якщо на ній також закріплена кнопка «Купити», то за допомогою неї можна швидко додати товар у кошик незалежно від положення на сторінці.

Закріплена кнопка покупки та ціна дає можливість користувачеві почати оформляти покупку в будь-який момент.

Блок покупки та перший екран

• Блок покупки має розташовуватися на видному і звичному для користувача місці, щоб не довелося його шукати. У блоці купівлі переважно розташовані: ціна, кнопка «Купити», кнопка купівлі в кредит, кнопка швидкої купівлі, кнопка додавання до обраного і до порівняння.
• Перший екран здебільшого вміщує основну інформацію про товар та інформацію, яку користувач може побачити або на спеціальних сторінках, або в чекауті, отже, користувач має змогу одразу на першому екрані визначитися, чи підходить товар, і чи підходять йому способи доставки, оплати тощо.
• При натисканні на кнопку покупки в кредит відкривається поп-ап, що показує всі можливі варіанти кредитів і розстрочки.
• Відеоогляд розташовується в блоці з фото і позначається іконкою, щоб користувач міг помітити його наявність.
• Зображення товару займає половину ширини контейнера для того, щоб привертати увагу користувача і дати йому можливість добре роздивитися товар.
• Прокрутка з фіксованим блоком фото, що залишає зображення під час прокрутки та вміщує більше інформації на першому екрані, дає змогу користувачеві завжди бачити товар перед собою без необхідності скролити вгору, щоб переглянути товар ще раз – це прискорює процес прийняття рішення та скорочує шлях користувача.
• Товар може мати кілька варіацій і в кожної варіації буде своя сторінка. Для швидкого переходу між ними потрібен блок параметрів, що знаходитиметься перед ціною. Так користувач зможе переглянути всі наявні варіанти і швидше визначитися з вибором.

Блоки «Доставка», «Оплата» та «Обмін/Повернення»

Можливість подивитися наявність товару в офлайн магазинах допомагає користувачам швидше визначитися як вони можуть купити товар. При натисканні на кнопку відкривається поп-ап зі списком магазинів та їхніми адресами, щоб користувач міг обрати найбільш зручний варіант.

Блоки «Доставка», «Оплата» та «Обмін/Повернення» інформують користувачів стисло стосовно того, що вони можуть отримати або на спеціальних сторінках, або в чекауті. Таким чином користувач зможе визначитися з покупкою одразу під час потрапляння на сторінку.

Блок консультації

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

Основні характеристики

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

Додаткові послуги

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

Детальні характеристики

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

Із цим товаром також купують

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

Відгуки/Запитання

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

Схожі товари

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

Опис

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

Товари категорії, Аксесуари, Переглянуті товари

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

Mobile

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

Навігація і кнопка «Купити»

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

Закріплена кнопка покупки в Mobile робить швидшим проходження етапу вибору, оскільки користувачеві не потрібно буде підійматися на гору сторінки, щоб натиснути на неї.

Блок покупки

Фото розташоване на всю ширину екрана дає змогу користувачеві добре роздивитися всі деталі товару та визначитися з вибором. Після цього розташовується основна інформація про товар: ціна, кнопка «Купити» тощо.

Блоки «Доставка», «Оплата» та «Обмін/Повернення»

Щоб блоки «Доставки», «Оплати» та «Обміну/Повернення» не надто подовжували сторінку, користувач може їх приховати або розкрити, коли це йому необхідно.

Основні характеристики

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

Висновки 

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

Тому, якщо ви плануєте виходити на міжнародний ринок, то просто перекласти контент інтернет-магазину на необхідну мову не спрацює. Відтак ми надаємо вам не тільки прототип картки товару актуальну для українського ринку, а також і прототип розроблений для ринку Великої Британії.

Попри те, що прототип дуже абстрактний, він дає розуміння того, які елементи дизайну повинні бути на сторінці товару:

• Заголовок;
• Хлібні крихти;
• Заголовок;
• Шапка;
• Навігація;
• Великі та якісні фотографії товарів;
• Опції;
• Кнопка «Купити»;
• Коротка інформація про доставку, оплату;
• Блок консультації;
• Технічні характеристики;
• Деталі політики обміну та повернення;
• Додаткові послуги (для збільшення середнього чека);
• Загальні характеристики;
• Cross sale (перехресні продажі);
• Відгуки та рейтинги;
• Супутні товари;
• Детальний опис товару;
• Посилання на категорію товарів;
• Аксесуари;
• Блок раніше переглянутих товарів;
• Переваги.

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

Автор: Денис Студенніков, керівник UX/UI відділу компанії «Турум-бурум»