Горизонтальний скрол: як ми змінили UX інтернет-магазину так, щоб закупка продуктами стала простішою

Усім привіт! Мене звати Анна Мацюк, я керівниця електронної комерції NOVUS.

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

У фізичному магазині все простіше: знайшли бажаний товар на полиці — поклали до кошика — йдете на касу. І тут у нас виникла ідея прибрати розбіжності між покупкою онлайн та «вживу». Щоб, клікаючи на товари онлайн, покупець відчував себе так само, ніби він реально в супермаркеті, а не за екраном смартфону чи комп’ютера.

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

Чому я вирішила написати цю статтю та кому вона буде корисною

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

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

Що таке горизонтальний скрол

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

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

1. Контент не вміщується у видимій області екрану, і потрібно забезпечити зручний його перегляд (наприклад, таблиць, довгих списків, переліків).
2. Доцільно скоротити висоту сторінок і контролювати обсяг інформації, що отримується юзером (розвантажити вміст).
3. На сайті не вистачає інтерактивних елементів.
4. Потрібно компактно розмістити однотипну інформацію в межах певного блоку.

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

Горизонтальний скрол і специфіка онлайн-покупки e-Grocery

Дослідивши ринок і співставивши його з власним досвідом, ми прийшли до висновку, що значна відмінність в покупці, скажімо, електроніки і e-Grocery — це фільтрація товарів. У першому випадку клієнт шукає щось конкретне практично завжди. Наприклад, iPhone 15. Він точно знає, чого хоче. Порівнює бажаний пристрій зі схожими моделями інших виробників, моніторить динаміку цін, шукає, де замовити дешевше, швидше, безпечніше.

А коли вам потрібно купити продукти харчування, то зазвичай половину кошика становлять товари базові, які ви купуєте «за замовчуванням». Молоко яготинське 2.6% жирності в пляшці, Засіб для миття посуду Frosch (лимон) 1л, Крабові палички Vici охолоджені в/у, 500г... А решту товарів ви купуєте, так би мовити, для душі. Плитку темного шоколаду, улюблене червоне вино, гілочку помідорів чері, хрусткі французькі багети... І часто не знаєте, чого самі хочете.

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

Початок історії. Як ми дійшли до рішення впровадити горизонтальний скрол на сайті

Отже, як усе було. Весною 2021 ми почали розробляти UX інтернет-магазину. І компанія-розробник Vintage Web Production запропонувала нам неординарне рішення — дослідити справжню поведінку людей під час вибору продуктів харчування. Бо, погодьтеся, скупитися в продуктовому E-com — це не те ж саме, що придбати телефон чи кавоварку. У продуктовій мережі людина має зробити покупку на 15-20 позицій — це середня кількість позицій в чеку (є чеки і на 50-60 товарів). Потрібно було знайти та дослідити всі ці поведінкові кейси.

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

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

Варіанти рішень

Що ми отримали в результаті дослідження? Розробники нашого онлайн-сервісу запропонували три варіанти:

• Класичний E-com — тобто, реалізуємо все звичним чином: каталоги товарів з перелистуванням товарів зверху вниз, звичайне меню з якорями;
• Електронна комерція з горизонтальним скролом — вітрини з продуктами рухаються зліва направо, і навпаки;
• E-com з горизонтальним скролом та з масштабуванням зображень товарів, тобто, з розширеним юзабіліті. Що мається на увазі? Коли стоять дві банки з помідорами — 500 мл і 1000 мл, то в офлайні ви відразу бачите, де більше. А от в онлайні це незрозуміло, потрібно читати назву або опис товарів. Ідея полягає в тому, щоб показати клієнтам асортимент, зберігаючи цей принцип більших і менших товарів.

Ще один простий приклад. Покупець шукає молоко, хоче купити онлайн. У магазині є 40-50 товарів, що відповідають його потребі. Щоб ознайомитись зі всією пропозицією за вертикального скролу, клієнту потрібно декілька разів проскролити вниз. Бо юзер бачить тільки 3-4 товари. А ми помістили 16 товарів на екран в одну прокрутку. І поки він спуститься до останнього товару, то вже забуває, що було на початку. А в фізичному магазині, на полиці, покупець бачить багато товарів одночасно.

Із самого початку третій варіант нам здався найбільш привабливим. Ми подумали, що коли людина шукає щось конкретне в інтернет-магазині, їй треба фільтри і пошук, а коли заходить в супермаркет, то доля спонтанних покупок досягає 50% кошика. За допомогою горизонтальної викладки, ми вирішили дати клієнту змогу гортати 100-200-300 товарів за одну хвилину — так само, як за одну хвилину він проходить в реальному магазині таку ж кількість товарів. Головна мета Upsell кошика — емоційні покупки. Саме над цією задачею ми працювали, і так виникло рішення з інтеграцією горизонтального скролу.

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

Виклики, з якими зіштовхнулись

Перед тим, як інтегрувати горизонтальну прокрутку на сайті, ми провели внутрішнє та зовнішнє опитування. Розробник створив нам клікабельний чорнобілий прототип, і ми на фокус-групі тестували. Сподобалось рішення понад 60% респондентів, але був і хейт. Щоправда, ми і не чекали, що всі скажуть «Вау». Нам було важливо отримати обʼєктивний аналіз, і лише після всіх цих досліджень ми вирішили йти далі, пробувати. І тут почалося.

1. Виникла купа питань, коли малювали UX. Зокрема, з розміром картки товару. У випадку з вертикальним скролом, вона в принципі може бути будьяких розмірів. З горизонтальною прокруткою не так: є чітке обмеження у висоті сторінки. А ще ж треба в картку товару додати і гарну картинку, і лейбочки, і акційну ціну та ціну до акції. Підходів, як це реалізувати, в нас було певно десятки.
2. Інша проблема стосувалась відображення на різних девайсах. Початково у нас було три стандартні варіанти (розміри). Якщо, наприклад, на iMac все виглядало добре, то на супер великих екранах, чи малих — відверто так собі. А ми не хотіли втрачати клієнтів лише тому, що перегляд товарів на екрані для них є незручним. Пометикували та зробили прикольно для десктопів. І тут — нова проблема.
3. Коли почали малювати адаптив під смартфон, виявили, що екран завузький, і не зрозуміло, як, власне, скролити. Ще одним викликом стала велика кількість розмірів мобільних екранів. Тут довелось багато чого перевірити. А далі була верстка... Справжній жах для QA, бо роботи було ще більше.

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

Реакція клієнтів зміни UX інтернет-магазину — статистика конверсії, відгуки

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

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

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

А як вам така реакція? Клієнт Дмитро не зміг відшукати потрібний товар, бо не зрозумів, що на сайті є горизонтальний скрол. Він його просто не очікував, відповідно, проігнорував релевантний контент. І такі випадки непоодинокі.

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

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

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

Висновки

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

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

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