Що має бути на головній сторінці інтернет-магазину в мобільній версії – дослідження Baymard

Дослідницька компанія Baymard Institute взимку 2016 роки провела юзабіліті-дослідження головних сторінок ecommerce-сайтів, серед яких були найбільші бренди США на кшталт Amazon і Walmart. Результати тестування співзасновник Baymard Institute Крістіан Холст виклав в статті, в якій показав приклади ефективних та неефективних головних сторінок і дав поради дизайнерам.

В ході юзабіліті-дослідження Baymard демонстрували респондентам головні сторінки мобільних eсommerce-cайтів. Вони помітили, що 70% користувачів при вході на головну сторінку сайту активно скролять її та швидко переглядають контент. Фахівці Baymard зробили висновок, що користувачі намагаються оцінити асортимент сайту по контенту головної сторінки. Така поведінка спостерігалася як в тих, хто вперше прийшов на сайт, так і в тих, хто вже був з ним трохи знайомий.

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

Користувачі намагаються визначити зміст сайту по контенту головної сторінки

Потрапляючи на головну сторінку нового сайту, користувачі намагаються визначити по ній вміст всього сайту. Це не дивно, якщо користувач нічого не знає про бренд. Але навіть на сайтах відомих брендів (Best Buy, Amazon і Macy’s) в 70% випадків респонденти активно скролять головну сторінку, щоб зрозуміти, «що тут є».

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

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

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

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

Основні категорії потрібно показувати на головній сторінці

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

У більшості випадків на головній сторінці потрібно представити як мінімум 30-40% категорій верхнього рівня.

На сайті Williams-Sonoma поєднуються банери для ключових категорій товарів і список категорій для всієї структури сайту.

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

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

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

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

На деяких головних сторінках, які брали участь в тестуванні, виводиться вся структура верхнього рівня довгим списком (як, наприклад, на Build). На інших – банери категорій і повна структура посиланнями (Williams-Sonoma). На третє – банери продуктів і тільки частина категорій верхнього рівня посиланнями (Amazon). Всі три підходи працюють, тільки якщо дотримується умова різноманітності представлених категорій.

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

Вузькі місця при реалізації

За результатами тестування, для подання різноманіття продукції сайту потрібно розмістити на головній хоча б 30-40% структури верхнього рівня (картинками або текстом). Чим ближче ви підходите до цього ліміту, тим важливіше, щоб ці 30-40% категорій були максимально різноманітними.

Наприклад, на сайті REI замість розміщення двох категорій, пов’язаних з туризмом, було б краще показати один туристичний товар і який-небудь інший тип товару (скажімо, велосипед або килимок для йоги) – щоб продемонструвати, що на цьому сайті торгують не лише туристичним спорядженням.

При відображенні списку категорій верхнього рівня не згортайте його на заслання «Відділи» або «Категорії», як зроблено на сайті Northern Tool. Це не допоможе визначити асортимент сайту при побіжному перегляді головної сторінки. Такий елемент буде корисний тільки повторним відвідувачам для швидкого переходу до потрібного розділу.

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

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

Перехід по одному з блоків на головній сторінці Walmart призведе вас не на сторінку категорії, а на розпродаж товарів з цієї категорії. Тема «Велика економія в кожному відділі» (Save big in every department) натякає нам на це – але, як показало тестування, користувачі ігнорують заголовок і очікують, що після кліка по зображенню вони потраплять саме до повного списку товарів.

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

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

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

На мобільних все серйозніше

Дослідження Baymard показало, що на мобільних пристроях користувачі набагато частіше, ніж на робочому столі, намагаються визначити асортимент сайту по головній сторінці. При вході на головну мобільного сайту 70% користувачів насамперед скролять сторінку туди-сюди, а на декстопов – тільки 25%.

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

На мобільних тенденція до скролінгу пов’язана з двома факторами:

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

Через приховану навігацію користувачі мобільних пристроїв більше потребують списку категорій на головній сторінці. Однак більшість мобільних головних сторінок сильно спрощені в порівнянні з десктопними версіями. Що стосується робочого столу, то «всього лише» 28% з топ-50 американських ecommerce-сайтів не дають користувачам точно визначити асортимент сайту, тоді як для мобільних цей показник становить 42%.

За матеріалами сайту: https://vc.ru/

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Anti-spam: complete the taskWordPress CAPTCHA