Чому так

Головна

30-40%

категорій верхнього рівня варто показати на головній

Категорії першим блоком

На телефоні під пошуком дві стрічки плиток категорій, на десктопі каталог відкритий ліворуч від банерів.

Чому

Baymard радить виводити на головну щонайменше третину розділів: покупець з конкретною метою одразу бачить свій розділ.

Ваші дані

Так зараз на justbuy.com.ua і в Comfy; на зустрічі 26.10 ви попросили повернути категорії нагору.

Ефект

Більше переходів з головної в категорію, менше виходів з першого екрана. GA4: частка сесій головна → категорія, кліки по плитках.

1Baymard InstituteG4G10

20%

часу видно акцію в каруселі у прикладі NN/g

Банери нижче, без автопрокрутки

Один великий і два малі банери стоять нерухомо під категоріями і товаром дня; кожна акція видна весь час.

Чому

NN/g: люди пропускають все, що схоже на рекламу (banner blindness), а слайди, що гортаються самі, дратують і показують кожну акцію лише частку часу.

Ваші дані

Кольори і стиль банерів ваші: фірмовий #E9414F і темне тло.

Ефект

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

2Nielsen Norman Group3Nielsen Norman GroupG2

Jakob's Law

люди чекають, що сайт працює як знайомі

Звичне лишаємо

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

Чому

NN/g: покупці проводять більшість часу на інших сайтах і переносять звідти очікування; знайоме не потребує навчання.

Ваші дані

Ваші постійні покупці впізнають сайт з першого дня.

Ефект

Редизайн без просідання повторних покупок. GA4: конверсія повторних відвідувачів до і після запуску.

4Nielsen Norman GroupG9K9P7

Каталог і адреси

№ 4

евристика NN/g: послідовність і стандарти

Один каталог скрізь

Кнопка «Каталог», нижня панель і сторінка /ua/catalog показують одне дерево в одному вигляді.

Чому

Однакові дії мають виглядати однаково, тоді покупець вчить меню один раз.

Ваші дані

Два різні каталоги ви помітили на зустрічі 26.10.

Ефект

Швидший шлях до категорії; розробник підтримує один компонент. GA4: глибина переходу меню → категорія; один компонент у коді.

5Nielsen Norman GroupM1C1

301

постійний редирект сервера рекомендує Google

Структура і адреси вашого сайту

Категорія, бренд, серія, модель як у вашому меню; адреси фільтрів /mfp/ збережено, решту переносить карта 301.

Чому

Google прямо радить постійні серверні редиректи зі старих адрес на нові за картою відповідностей.

Ваші дані

Карта 301: 8 687 правил готові, 1 616 на ручну звірку (файли в хабі).

Ефект

Органічний трафік і реклама переходять на новий сайт без втрат на 404. Search Console: покази, кліки і помилки 404 за 4 тижні до і після.

6Google Search Central7Google Search CentralM2K7

Видача і фільтри

61%

сайтів тримають фільтри лише в панелі, над видачею їх немає

Швидкі фільтри над видачею

Над товарами найчастіші значення категорії одним дотиком: 120 Гц, eSIM, NFC, 256 ГБ, до 10 000 ₴.

Чому

Baymard: винесені над видачею фільтри покупці використовують одразу, без відкриття панелі.

Ваші дані

Значення беремо з вашої матриці фільтрів після очищення.

Ефект

Швидше звуження видачі до кількох моделей, більше переходів у картку. GA4: частка сесій з фільтром, перехід видача → картка.

8Baymard InstituteK3

78%

мобільних сайтів мають посередні або гірші видачу і фільтри

«Фільтри» завжди під пальцем

На телефоні рядок «Фільтри» з сортуванням закріплюється під шапкою на будь-якій глибині прокрутки.

Чому

Baymard: кнопка «Фільтри і сортування» має лишатися видимою під час прокрутки.

Ваші дані

Видачу на телефоні перевірено на 390 px.

Ефект

Більше використання фільтрів на телефоні. GA4: відкриття панелі фільтрів на мобільних.

9Baymard Institute10Baymard InstituteK11

2/3

сайтів мають незрозумілі назви фільтрів

Чисті значення фільтрів

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

Чому

Baymard: різні назви одного значення збивають покупця і він втрачає довіру до фільтрів.

Ваші дані

Обхід 20.10: 1 644 групи фільтрів у 583 категоріях мають дублі значень.

Ефект

Покупець знаходить потрібне з першого вибору. GA4: вибір фільтра → порожня видача (частка має падати).

11Baymard InstituteK6

Картка товару

1

залита кнопка на картці, решта контурні

«Купити» з першого екрана

На телефоні кнопка «Купити» з ціною видна одразу і лишається внизу під час прокрутки; на десктопі вона на першому екрані поруч з ціною.

Чому

NN/g: головна кнопка має найбільшу вагу і веде до основної дії; ефект липкої панелі перевіримо A/B-тестом.

Ваші дані

Раніше кнопка стояла на 1 493 px від верху, тепер видна на першому екрані телефона 390×844.

Ефект

Більше додавань у кошик з мобільних. GA4: add_to_cart / view_item на мобільних, A/B 50 на 50.

12Nielsen Norman GroupP5

BNPL

варто показувати помітно біля рішення про покупку

Кредит рядком під ціною

Платіж на місяць рядком під ціною і контурна «Купити частинами» поруч із «Купити».

Чому

Baymard: помітна розстрочка допомагає ощадливим покупцям врахувати її в рішенні; одна залита кнопка тримає фокус на покупці.

Ваші дані

На зустрічі 26.10 ви сказали, що кредитний блок великий і сірий.

Ефект

Розстрочку бачать усі, картка коротша. GA4: кліки «Купити частинами», заявки на кредит.

13Baymard Institute12Nielsen Norman GroupP6

40%

кидають кошик через несподівані витрати

Повна ціна до кошика

Ціна за способом оплати видна під ціною, «До сплати» перераховується одразу після вибору.

Чому

Baymard: головна причина відмови від замовлення це додаткові витрати, ще 12% не бачать повної суми заздалегідь.

Ваші дані

На вашому сайті ціна залежить від способу оплати; варіант «одна ціна» чекає вашого рішення.

Ефект

Менше відмов на кроці оплати. GA4: begin_checkout → purchase за способом оплати.

14Baymard InstituteP5O4

64%

учасників тестів шукали доставку в картці

Доставка в картці

Картка відповідає «коли відправите» ще до кошика: «сьогодні», «сьогодні чи завтра», строк постачальника від менеджера.

Чому

Baymard: покупці шукають умови доставки ще до кошика, а 20% кидають замовлення через довгу доставку.

Ваші дані

Дату отримання ви гарантувати не можете (зустріч 26.10), тому обіцяємо лише відправку.

Ефект

Менше питань менеджеру і відмов через строки. GA4: add_to_cart з картки; дзвінки «коли буде».

15Baymard Institute14Baymard InstituteP8

58%

сайтів дають один вид підказок або змішують обидва в одному блоці

Аксесуари окремо за типом

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

Чому

Baymard: аксесуари і аналоги це різні задачі покупця, їх показують окремими блоками.

Ваші дані

Групування за типом як у застосунку Comfy; сумісність задається в адмінці.

Ефект

Вищий середній чек. GA4: add_to_cart аксесуара з картки, середній чек.

16Baymard InstituteP11

BreadcrumbList

розмітка крихт Google

Опис згорнутий, крихти короткі

Довгий опис згорнутий до «Читати повністю»; над назвою коротке «‹ Смартфони», повні крихти в розмітці для Google.

Чому

NN/g: на телефоні крихти радять скорочувати, згортання економить місце; Google читає повний шлях з розмітки.

Ваші дані

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

Ефект

Ціна і «Купити» ближче до верху, SEO-шлях зберігається. Search Console: крихти в сніпетах; GA4: прокрутка картки.

17Nielsen Norman Group18Nielsen Norman Group19Google Search CentralP10P1

Пошук

37%

сайтів ламають «Назад» у вікнах і шарах

«Назад» повертає на місце

«Скасувати» поруч з рядком пошуку і жест «Назад» телефона повертають на ту саму сторінку.

Чому

Baymard і NN/g: «Назад» має вести туди, що покупець вважає попереднім екраном, і закривати шари.

Ваші дані

Знахідка першої версії прототипу, виправлено 26.10.

Ефект

Менше втрачених сесій після пошуку. GA4: вихід зі сторінки пошуку без переходу.

20Baymard Institute21Nielsen Norman GroupS3

Оформлення і кабінет

18%

кидають замовлення, коли сайт вимагає акаунт

Замовлення без реєстрації

Достатньо телефону, імені і прізвища; кабінет створюється сам з першого замовлення, вхід кодом з SMS чи Viber.

Чому

Baymard: обовʼязкова реєстрація одна з головних причин відмови; 47% сайтів ховають гостьове оформлення.

Ваші дані

Кабінет додано в ТЗ (5.9) після зустрічі 26.10.

Ефект

Менше відмов на кроці контактів. GA4: begin_checkout → add_shipping_info.

14Baymard Institute22Baymard InstituteO1A1

8

полів досить для оформлення (середнє 11,3)

Одна сторінка, мало полів

Чотири пронумеровані розділи на одній сторінці, «Підтвердити» з сумою внизу, помилка біля поля.

Чому

Baymard 2024: на зручність впливає кількість полів, а помилки біля поля економлять час і запобігають повторам; 17% кидають довге оформлення.

Ваші дані

Оформлення однією сторінкою з нумерацією, як у Comfy.

Ефект

Вища частка завершених замовлень. GA4: begin_checkout → purchase, помилки полів.

23Baymard Institute24Baymard Institute25Nielsen Norman Group14Baymard InstituteO1

50%

покупців називають трекінг головною функцією

Статуси замовлення в кабінеті

Список замовлень зі статусами, окремий крок «Очікує від постачальника».

Чому

Baymard: відстеження замовлення найважливіша самостійна функція, а 67% сайтів показують його неповно.

Ваші дані

Строки постачальника ви обговорювали на зустрічі 26.10.

Ефект

Менше дзвінків «де моє замовлення», більше повторних покупок. CRM: звернення про статус; GA4: повторні покупки.

26Baymard InstituteA2A1

Швидкість і доступність

8,4%

більше конверсій ретейлу за 0,1 с швидше

Швидкість як вимога ТЗ

У ТЗ поріг Core Web Vitals: LCP головної і картки на телефоні до 2,5 с; перше фото з пріоритетом, решта ліниво.

Чому

Google і Deloitte 2020: 0,1 с прискорення на мобільних дало ретейлу +8,4% конверсій; за даними Google 2016-2017, 53% мобільних візитів обриваються після 3 с.

Ваші дані

Поріг закладено в критерії приймання пунктів G2 і P2.

Ефект

Більше дочитаних сторінок і покупок на мобільних. Search Console: звіт Core Web Vitals; PageSpeed Insights.

27web.dev28Think with Google29web.devG2P2

44

pt зона дотику за Apple

Зони дотику і контраст

Кнопки і посилання від 44 px, поле пошуку 16 px, текст з контрастом від 4,5:1.

Чому

Apple радить 44×44 pt, WCAG 2.2 ставить мінімум 24 px; контраст тексту від 4,5:1.

Ваші дані

Прототип проходить автоматичну перевірку контрасту і розмірів на 390 і 1280.

Ефект

Менше промахів на телефоні, текст читається на сонці. Приймання на 390 px; GA4: кліки по кнопках картки.

30Apple Human Interface Guidelines31W3C32W3CP5K9

Джерела

Цитати дослівно, мовою оригіналу; кожне посилання відкрите і звірене.

1. 1
   Baymard Institute. Mobile homepage usability"As a rule of thumb we've found that a minimum of 30-40% of the top-level categories should be represented via the homepage content"
2. 2
   Nielsen Norman Group. Banner Blindness Revisited"Banner blindness is a long-known web user behavior: it describes people's tendency to ignore page elements that they perceive (correctly or incorrectly) to be ads."
3. 3
   Nielsen Norman Group. Auto-forwarding carousels annoy users"the discount deal is visible only 20% of the time" "It's just plain annoying for users to lose control of the user interface when things move around of their own accord."
4. 4
   Nielsen Norman Group. Jakob's Law"Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know."
5. 5
   Nielsen Norman Group. 10 usability heuristics"4: Consistency and Standards. Users should not have to wonder whether different words, situations, or actions mean the same thing."
6. 6
   Google Search Central. Redirects and Google Search"we recommend that you use a permanent server-side redirect whenever possible. This is the best way to ensure that Google Search and people are directed to the correct page."
7. 7
   Google Search Central. Site moves with URL changes"We recommend server side permanent redirects from the old URLs to the new URLs as you indicated in your mapping."
8. 8
   Baymard Institute. Promoting product filters"Yet our e-commerce UX benchmark shows that 61% of sites don't promote filters in the product list."
9. 9
   Baymard Institute. E-commerce filter UI"Make the trigger button sticky. The "Filter & Sort" button should remain visible as the user scrolls through results, not disappear off the top of the page."
10. 10
    Baymard Institute. Current state of product list and filtering"For mobile, 78% have an overall "mediocre" or worse performance."
11. 11
    Baymard Institute. Visual filters and filter terminology"Given that two-thirds of sites use unclear filtering terminology, users undoubtedly are challenged to find suitable products."
12. 12
    Nielsen Norman Group. Button states"Primary buttons have the most visual emphasis to grab user attention and direct them to an important or common action such as compose, create, save, and check out."
13. 13
    Baymard Institute, дослідження меблів 2024. Furniture and home decor UX research"When buy now, pay later (BNPL) or other forms of financing are available, prominently displaying them can help cost-conscious users factor these options into their purchase decision"
14. 14
    Baymard Institute. Cart Abandonment Rate Statistics"40% Extra costs too high (shipping, tax, fees)" · "20% Delivery was too slow" · "18% The site wanted me to create an account" · "17% Too long / complicated checkout process" · "12% I couldn't see / calculate total order cost up-front"
15. 15
    Baymard Institute. Show shipping costs on product pages"64% of the test subjects looked for shipping costs on the product page, before deciding to add a product to the cart."
16. 16
    Baymard Institute. Product page suggestions"58% of all major e-commerce sites only offer one of these cross-sells, or show both in the same cross-sell element."
17. 17
    Nielsen Norman Group. Breadcrumbs"On mobile, breadcrumbs can take up too much space or can be hard to tap; consider shortening the breadcrumb trail if your users' tasks allow it."
18. 18
    Nielsen Norman Group. Accordions on mobile"Accordions conserve space on mobile but they can also cause disorientation and too much scrolling."
19. 19
    Google Search Central. BreadcrumbList markup"A breadcrumb trail on a page indicates the page's position in the site hierarchy"
20. 20
    Baymard Institute. Back button expectations"users expect the "Back" button to take them back to what they perceived to be their previous page." "Overlays & Lightboxes (37% of sites don't do this)"
21. 21
    Nielsen Norman Group. Accidental overlay dismissal"The Built-In Back Button Should Close the Overlay"
22. 22
    Baymard Institute. Make Guest Checkout prominent"47% of sites fail to make "Guest Checkout" the most prominent option." "it should always be presented prominently at the beginning of checkout."
23. 23
    Baymard Institute, 2024. Checkout flow: average form fields"The average checkout flow in 2024 is 5.1 steps long and contains 11.3 form fields" "most sites need only 8 form fields in total for a checkout flow" "what really matters to the overall UX of checkout is the number of form fields users must consider."
24. 24
    Baymard Institute. Inline form validation"Inline validation can save users time and effort and help them avoid errors"
25. 25
    Nielsen Norman Group. Errors in forms: design guidelines"With inline validation, error messages are naturally shown next to the field causing the error."
26. 26
    Baymard Institute. Integrate tracking info"order tracking ranked as the most important self-service feature (50%) in Baymard's quantitative study" "67% of test sites neglected to consistently provide all key order-tracking details"
27. 27
    web.dev, Google і Deloitte, 2020. Milliseconds make millions"A 0.1 second improvement of mobile site speed increases conversion rates by 8.4% for retail sites and 10.1% for travel sites."
28. 28
    Think with Google, дані 2016-2017. Mobile performance (Brainfood vol. 3)"53% of mobile site visits are abandoned if pages take longer than 3 seconds to load."
29. 29
    web.dev. Largest Contentful Paint"sites should strive to have Largest Contentful Paint of 2.5 seconds or less."
30. 30
    Apple Human Interface Guidelines. Buttons"As a general rule, a button needs a hit region of at least 44x44 pt"
31. 31
    W3C, WCAG 2.2. 2.5.8 Target Size (Minimum)"The size of the target for pointer inputs is at least 24 by 24 CSS pixels"
32. 32
    W3C, WCAG 2.2. 1.4.3 Contrast (Minimum)"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1"