Горизонтальний скрол: як ми змінили 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, кількість зусиль за горизонтального скролу, необхідних користувачеві для виконання дії, є більшою. Якщо користувачам мобільних пристроїв, щоб відкрити вміст, достатньо провести пальцем убік, то це це неможливо для тих, хто сидить за ПК зі стандартною мишею. Ці користувачі повинні або скористатись клавішами зі стрілками, або натиснути та перетягнути смугу прокрутки.

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




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

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

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

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

Висновки

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

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

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

👍ПодобаєтьсяСподобалось5
До обраногоВ обраному1
LinkedIn

Найкращі коментарі пропустити

Зайшов на ваш сайт. Вибачте, але горизонтальний скрол — це якийсь жах.
1. Це не зручно фізіологічно: свайпати вертикально набагато краще
2. Через (1) не вдається «запустити» інерційний скрол ефективно
3. Через те що воно працює не так, як очікуєш відчувається когнітивне навантаження на мозок, це дуже неприємно
4. Відсутні мінімальні зручності як-от закриття детального опису свайпом. Замість цього треба тягнутися у правий верхній кут екрану щоб натиснути хрестик.

В жодного із лідерів ринку немає горизонтального скролу товарів як первинного елементу навігації, мабуть це якась змова?
— Amazon
— Glovo
— Rozetka
— E-buy
— AliExpress
— Uber Eats
— Deliveroo
— Just Eat
— IKEA
— Ocado
— Apple Store
— App Store
— Play Store

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

Це не складно, якщо зробите — буде топ

Виникає враження, наче була спроба влучити в найбільшу кількість антипаттернів ui/ux:
1) Відсутні відступи хеадеру
2) Бургер меню в десктопній версії сайту
3) Сама ідея горизонтального скролу тільки ради «щоб не як у всіх», доводить до противного головокружіння
4) Дуже-дуже багато зайвої анімації (наприклад при наведенні на товар, анімація появи кнопки корзини і сердечка), при чому сама іконка корзини виглядає не дуже гарно і закриває вагу товару
5) Не працює ідея пагінації (тобто, коли я скроню до упора вправо, я очікую що прогрузиться наступна сторінка, замість цього я маю руками клацати на кнопку наступної сторінки (яка ще й розташована не посередині, а в правій стороні))
6) Майже на будь-яку дію виникає непотрібна анімація та/або якийсь спінер, хотілося б щоб відгук сторінки був швидшим

Це тільки те, що відразу кинулося в очі.

Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

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

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

По юзабіліті не відчуваю жодної різниці з вертикальним скролом, хіба що це «дивно».

Якщо на десктопі скрол миші не скролить горизонтально — це однозначно мінус такому дизайну.

Йдемо далі. Ок, ти прийняв горизонтальну концепцію сайту, най буде. Заходим в товар, «Детальніше» — фото, зрозуміло, а далі що це? Блок «Про товар» знаходиться під фото, а не справа! Тобто ви тут же зраджуєте своїй же оголошеній концепції!

Додавання в кошик — це жах! По нажаттю «в кошик» вилазить карта з вимогою вказати місцезнаходження! Нафіга мені це зараз якщо я просто хочу накидати товарів в корзину!? І нова контрінтуітивна поведінка — якщо закрить цю довбану карту, товар НЕ ДОДАСТЬСЯ в корзину! Хоча я просто закрив назойливе інфо-віконце з очікуванням що товар все одно полетить в корзину! Може ви ще номер карти будете вимагати одразу при вході на сайт? ) Цей UX — це просто діч.

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

Загалом норм.
Але оці речі адово дивні чи фруструють.

Щодо карти з вимогою місцезнаходження — кнопка вибору на iPhone взагалі не відображається, тобто нереально щось-небудь замовити

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

Це досить стандартний патерн для доставки продуктів і готової їжі.

Чесно, горизонтальний скрол не зайшов. Перевіряв на Android, iPhone, та на звичайному ноуті.

На скрол скаржитись не буду — мені цілком норм. Не такий зручний інтерфейс як на zakaz.ua, але точно кращий за додаток Сільпо.
Дякую що нарешті зробили функцію «дозамовлення» товарів, але погано, що в ній працює лише пошук, а не фільтри. Зробіть як у заказа — повноцінний досвід при дозамовленні!

Олесю, дякую за фідбек. Обовя’язково доповними функціонал редагування!

Ще зробіть, щоб на певних товарах була стара ціна але при оплаті, ціна була вища(актуальна), як в офлайн магазині, коли «ціни не встигли змінити»

Також потрібно закривати доступ до сайту з 23 по 8 годину.

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

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

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

Сходив на ваш сайт і тестово походив по категоріям. Це не жахіття як спочатку очікував, але загалом досить незручно. По-перше бездарно витрачається 30% екрану і там де могло б бути 18 позицій на екрані, зараз максимум 12 (з однаковим розміром тайлів). По-друге незручно порівнювати ціни без колонок. По-третє горизонтальній скролл все ж незручний сам по собі, бо суперечить усім очікуванням користувача.

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

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

Win10, 14″, 1920×1080, 150% scaling, taskbar on the left.

а взагалі цікавий підхід — написати статтю і отримати безкоштовне тестування ))

Alex, нам цікава думка читачів dou ) Вікгуки наших клієнтів також опрацьовуємо та враховуємо по можливості.

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

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

Мушу зізнатись...
Я тут заради коментарів :D

замість того, щоб показувати рекламні банери, які займають більше половини екрану, можна було б показати ще 18 товарів
якійсь жах!

Дякую за статтю і за те, що ділитеся досвідом!
Як на мене в цьому випадку горизонтальний скрол працює тут вдало. Не таблицями єдиними:)
Проте поки бродила по сайту, зловила себе на думці, чисто з цікавості.
Коли при виборі товару з’являється модалка, блокування скролу зроблено так розумію намірено для фіксації уваги?

Ну ні разу не замовлений коментар LOL

Максиме, який сенс замовляти коментарі, якщо нам цікавий фідбек читачів. Це ж не PR стаття. Ми довго вагались чи ділитись цим кейсом з IT спільнотою. Буду дуже вдячна за ваш фідбек ;)

Ви ще в італійську зону цієї спільноти не ходили :D

Просто lol

Зашел на сайт (с десктопа), может я, еще не настолько преисполнился в познании, но на нем физически сложно находится, поскролил «мясо», начало укачивать.
А главная с водкой, это пушка-огонь 😁

Денисе, чудово, що протестували та поділились враженням. Якщо і сервіс протестуєте, буду дуже вдячна

Виникає враження, наче була спроба влучити в найбільшу кількість антипаттернів ui/ux:
1) Відсутні відступи хеадеру
2) Бургер меню в десктопній версії сайту
3) Сама ідея горизонтального скролу тільки ради «щоб не як у всіх», доводить до противного головокружіння
4) Дуже-дуже багато зайвої анімації (наприклад при наведенні на товар, анімація появи кнопки корзини і сердечка), при чому сама іконка корзини виглядає не дуже гарно і закриває вагу товару
5) Не працює ідея пагінації (тобто, коли я скроню до упора вправо, я очікую що прогрузиться наступна сторінка, замість цього я маю руками клацати на кнопку наступної сторінки (яка ще й розташована не посередині, а в правій стороні))
6) Майже на будь-яку дію виникає непотрібна анімація та/або якийсь спінер, хотілося б щоб відгук сторінки був швидшим

Це тільки те, що відразу кинулося в очі.

Максиме, дякую, що стільки підмітили моментів. Команді було цікаво почути думки ІТ спільноти. Будемо покращувати ) Якщо будуть ще коменти чи ідеї, будь ласка пишіть

3) Чому ж. Вони подають це як для того, щоб досвід online був максимально подібний на offline. Але нахіба — мені не зрозуміло.

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

Ой зараз добре було! Регочу. Точно!

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

Хз чим ви керуєте та що досліджували, але те як рендериться головна сторінка в 3440×1440 це просто провал х_х.
У вас нічого не влізло навіть в гіганський монітор, де 7 товарів водки + 1 стрілочка дригаються по горизонталі.
Загалом відчувається наче зайшов на якийсь нормальний сайт і викрутив 250% масштабу що все попердолило.

Олеже, перевіримо на 3440×1440. Можливо, щось пішло не так як мало. Дякую дуже, що написали!

Зайшов на ваш сайт. Вибачте, але горизонтальний скрол — це якийсь жах.
1. Це не зручно фізіологічно: свайпати вертикально набагато краще
2. Через (1) не вдається «запустити» інерційний скрол ефективно
3. Через те що воно працює не так, як очікуєш відчувається когнітивне навантаження на мозок, це дуже неприємно
4. Відсутні мінімальні зручності як-от закриття детального опису свайпом. Замість цього треба тягнутися у правий верхній кут екрану щоб натиснути хрестик.

В жодного із лідерів ринку немає горизонтального скролу товарів як первинного елементу навігації, мабуть це якась змова?
— Amazon
— Glovo
— Rozetka
— E-buy
— AliExpress
— Uber Eats
— Deliveroo
— Just Eat
— IKEA
— Ocado
— Apple Store
— App Store
— Play Store

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

Це не складно, якщо зробите — буде топ

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

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

Головне щоб юзабіліті було як в surgery simulator

«щоб покупець відчував себе так само, ніби він реально в супермаркеті»

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

Владиславе, дуже дякую за розгорнутий фідбек. 100% погоджуюсь з п 4. Будемо над цим працювати. Стосовно списку з ТОП екомами прокоментую: ми лиш вирішили піддати сумніву «а що як». Так як великі мега екоми не сильно турбуються про UX. Так як вони уже великі і в них інші важливі приорітети (не про Apple :) Коли ти на старті, то можеш піти двома шляхами: перевикористати, що є, чи спробувати щось нове. І так, може статись, що спроба не вдала. Ми ще глибоко аналізуємо цей кейс. Тому і вирішили ним тут поділитись. Вдячна ще раз за коментар!

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

Наприклад, коли я шукаю «water filter coffee machine» він мені показує фільтри які сумісні із саме моєю кавоваркою (бо я вже купував таке саме), а ще пропонує мені здійснити транзакцію лише у 2 кліки — і я розумію що фільтри у такому разі до мене доїдуть десь наступного тиждня. Зайвий клік, як я розумію, потрібен на випадок, якщо я змінив кавоварку і насправді шукаю трошки інші фільтри, або якщо я насправді хочу отримати фільтри наступного дня, а не наступного тиждня (тобто, налаштувати заказ більш детально).

А нельзя было просто сделать человеческий интерфейс без горизонтального скролла? Но нет, у вас там не просто горизонтальный скролл, а горизонтальный скролл с пагинацией. Это *****ц.

Aaron, так, пагінація зараз так собі. Є певні вимоги від seo по пагінації. Будемо шукати оптимальне рішення. Дякую за фідбек

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

А заходиш на мобільну версію сайту з мобілки або з планшету іііі тадам при горизонтальній прокрутці від краю скріна активуєтьс свайп назад. Сюрпрайз %;%р. І згадуєш теплим словом тих хто це придумав.

А як ви самі оцінюєте якість горизонтальної прокрутки на novus.online?

Коли почали малювати адаптив під смартфон, виявили...

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

mobile-first

...придумали якісь збоченці, які люблять пялитись в 5″ замість 27-34″.
Розпедалити оту витягнуту мобільну версію в двадцять скрінів на десктоп — це просто ад.
Десктоп в мобілу — тупо перебивкою display: flex/grid -> block і все стало стовпчиком (якщо не юзати всякі xl-4 xs-12 приблуди)

Пора окуляри купувати...

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

Щось я цей tailwind на жодному проекті не бачив: bootstrap, material, ant — все що завгодно крім того

якісь збоченці, які люблять пялитись в 5″

Справді збоченці. Це стандарт розміру дисплею десятирічної давності, коли в телефонів були величезні рамки зверху і знизу. Я вже купу років юзаю 6.7″, а маленьким телефоном вважається розмір близько 6.1″. Спробуйте сучасний смартфон, тоді не буде хибного враження про маленькі дисплеї)

Спробуйте сучасний смартфон

Рік тому купив S22 — достатньо сучасний? :)
Спеціально покупав не лопату, бо мені його в одній руці тримати, а не город копати.

Не описати словами на скільки зручніше копати банківську веб-версію клавіатурою/мишою на 34″, ніж робити мастурбацію пальцями монобанк додатка на 5″ телефоні (навіть 6-7″ нічого б не змінили). В гонці впихнути невпіхуєме вони похоронили усі принципи юзабіліті, аксесебіліті на інші -біліті. Мабуть теж начитались маячні «mobile-first».

Спеціально покупав не лопату, бо мені його в одній руці тримати, а не город копати.

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

ніж робити мастурбацію пальцями монобанк додатка

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

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

В монобанку прекрасне юзабіліті

В серіалі «гра в кальмара» треба було замість печеньок видати гравцям мобіли з монобанком та сказати «пробуйте за 5 хвилин активувати картку не скануючи її камерою». Дез-рейт був би значно вищий.

онлайн-покупки

Дуже цікаво подивитись, наприклад профільтрувати пару тисяч холодильників по фільтрам та порівняти 3-4 обраних по параметрам (на тому ж хотлайні чи ще десь). А потім наприклад відкрити штук 5 сайтів щоб почитати відгуки. Ну і в результаті ще відкрити штук 10 магазинів, бо крім ціни (яку хотлайн порівнює) є різні приколи з доставкою та гарантією.

Тому якщо здається, що мобайл незручний

Доречі є прикол в... фейсбуці: спробуйте написати комусь в маркетплейсі щодо якогось айтема, а потім спробувати перейти з чату на сторінку айтема. Якщо не зберегли спочатку собі лінк в to-do/notepad — вам триндець.

«пробуйте за 5 хвилин активувати картку не скануючи її камерою»

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

Дуже цікаво подивитись, наприклад профільтрувати пару тисяч холодильників по фільтрам та порівняти 3-4 обраних по параметрам

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

Доречі є прикол в... фейсбуці

Фейсбук — це лютий антипатерн в плані юзабіліті на будь-якій платформі)

Абсолютно штучний кейс, оскільки в моно є сканер.
«пробуйте за 5 хвилин активувати картку не скануючи її камерою»

Не скануючи = без сканера. Загалом який вбіса сканер, якщо я вже вибрав картку і треба просто переставити boolean isActive false -> true?
Але фіг з тим вводом чи сканером — дійти до нього нереально бо весь функціонал сховали так глибоко, де навіть DEA не додумається шукати.

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

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

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

Точно, вже не виправити комент.
Все одно між 6″ та 34″ — прірва

Все одно між 6″ та 34″ — прірва

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

Я пройшов довгий шлях з моніками:
— 15″ круглий
— 17″ + 17″
— 23″ + 23″
— 27″ + 27″
— 27″ + 34″ + 27″
— 27″ + 34″ (зараз)

Загалом більшості сайтів пофіг 1920/2560/3440 по ширині — плюс-мінус рендериться однаково. Навіть коли виставляю сайт в половину великого моніка (3440/2=1720) то все одно виглядає схожим на фулскрін.

dou.ua наприклад на 1400 ширину захардкодили. Доречі цікаво глянути як мобайл-фьорс юзери читають теми по 5000+ комментів.

— 27″ + 34″ (зараз)

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

Доречі цікаво глянути як мобайл-фьорс юзери читають теми по 5000+ комментів

Доводиться довго скролити, дуже довго) І доу на мобайлі не відображає відповіді у вигляді дерева, тому не завжди зрозуміло, з якого комента все почалося. Але то проблема лише для дуже великих топіків.

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

Вони ідентичні по висоті, але різні по формі.
34″ дугою стоїть по центру для всього основного
27″ рівний стоїть збоку для вторичного
27″ стояв з іншого боку, було дофіга чого верстати

Конфіг кастом столів 2 по 148×80см, аккуратно від стіни до стіни спальні орендованої квартир, тобто майже 3 метра довжиною. В своїй квартирі по дизайну стіл Г-подібний довжиною 270см :)

Той самий момент, коли синьйорний фронтенд, не розуміє для чого мобайл фірст. Гудж джаб!

Ги, ги.

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

а пакетики все одно рвуться. може почати з пакетиків?

ще й гроші за них просять конські

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

Жодного разу не користувався онлайн-сервісами з доставки їжі. Я хочу самостійно вибрати в магазині те, що мені треба, а не довіритися непойми кому.
Доречі NOVUS найгірший супермаркет з тих, що є навколо будинку. Звісно це не до Вас претензія), так, до слова. Найменший асортимент при найбільших цінах, постійні черги, навіть на касах самообслуговування.

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

І замість гарних помідорів з картинки доставляє такі трохи втомлені

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

Олексію, якщо так сталось, приношу особисті вибачення. Команда повинна додавати товари в мінімальним 50% до термнів придатності. Напишіть мені будь ласка деталі замовлення, щоб змогла все вияснити. дякую!

Замовляю продукти в Метро/Сільпо. Якщо термін придатності менший чим 30%-50% (в залежності відк категорії) , людина яка комплектує телефонує і цікавиться , чи мені це ок, якщо ні — запропонує інший товар. За 3 роки жодних проблем не було.

Сергію, рада, що маєте гарний досвід доставки. Буду вдячна за фідбек по сервісу і від доставки Novus

Стасе, буду вдячна за зворотний зв’язок по зручності сайту )

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

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

Чудова стаття, гарний ритм викладення і цікава якісна графіка. Таке приємно читати!

Крута стаття, дякую що поділилися аналітикою )

Немає там ніякої аналітики. Бо якщо б була, то не було б знущання над користувачем. Ці зображення із conversion rate, то є як то кажуть smoke and mirrors.

Аналітика повинна враховувати багато факторів починаючи із гомогенної вибірки і закінчуючи достатньою кількістю вимірювань. Гуглити: T-Test, Group Sequential Testing, Statistical Significance, Type I and type II errors, Bonferroni correction, etc.

Або користуватись аналітикою яка оце все вміє враховувати. І про всяк випадок робити А/А тести.

Той момент коли коментар цікавіше за статтю :-)

Підписатись на коментарі