Поділитися чек-листом:
0/70
Інструменти й гайди Plerdy на тему: Аналіз теплових карт у мобільній версії Юзабіліті чек-лист тестування сайту Як провести UX-аудит сайту? Юзабіліті Аудит Сайту: Покрокова Інструкція

👆 Зона великого пальця й сенсорні цілі

  • Розміщуйте основні CTA в природній зоні великого пальця
    Тримайте головну дію — «Додати в кошик», «Купити», «Продовжити» — унизу по центру екрана, де великий палець природно лежить на великому телефоні. Не ховайте критичні кнопки у верхніх кутах, до яких доводиться тягнутися двома руками. Перш ніж запускати, пройдіть весь сценарій однією рукою на пристрої з екраном від 6 дюймів.
  • Робіть кожну сенсорну ціль щонайменше 44×44 px
    Кнопки, посилання й іконки мають бути щонайменше 44×44 CSS px (48 dp на Android), щоб покупці по них не промахувалися. Замалі цілі — одна з головних причин промахів, «лютих» натискань і покинутого оформлення. Якщо видима іконка мала, збільшіть її клікабельні відступи до мінімуму.
  • Залишайте достатньо простору між клікабельними елементами
    Залишайте щонайменше 8px між сусідніми кнопками, посиланнями й чипами фільтрів, щоб палець не зачепив два елементи одразу. Тісні меню й щільні списки варіантів спричиняють випадкові натискання й роздратування, через які мобільні користувачі йдуть, не дійшовши до покупки.
  • Тримайте кнопку оформлення закріпленою й досяжною
    Використовуйте липку нижню панель для основного CTA на довгих сторінках товару й кошика, щоб користувачам ніколи не доводилося скролити в її пошуках. Перевірте, що вона не ховається за панеллю мобільного браузера, екранною клавіатурою чи індикатором «додому» на пристроях із вирізом.
  • Не ставте деструктивні дії поруч з основними
    Ніколи не розміщуйте «Видалити» чи «Очистити кошик» просто біля «Оформити замовлення». Випадкове натискання, що видаляє товар — чи весь кошик, — одним рухом знищує і довіру, і продаж. Рознесіть ці кнопки й додайте можливість скасувати дію замість остаточного видалення.
  • Зробіть кнопки закриття й «назад» правильного розміру
    Кнопки закриття модальних вікон (×), стрілки «назад» і перемикачі меню мають бути великими й чітко відокремленими від сусіднього контенту, щоб користувачі могли вийти без промахів. Крихітний × у кутку — типова пастка, через яку покупці застрягають у попапі.
  • Зробіть так, щоб кнопки справді виглядали клікабельними
    Для ключових дій використовуйте явний стиль кнопок — суцільна заливка, сильний контраст, щедрі відступи, — а не звичайні текстові посилання. На сенсорних екранах немає наведення, яке підказує, що клікабельне, тож користувач має впізнати кнопку з першого погляду, інакше він вагається.
  • Тестуйте реальним пальцем, а не мишею
    Досяжність, точність і зручність на телефоні зовсім інші, ніж із мишею на десктопі. Перед запуском пройдіть увесь шлях від перегляду до покупки однією рукою на реальному iPhone і реальному Android — емулятори приховують ергономічні проблеми.
  • Знаходьте промахи за допомогою теплової карти й карти кліків
    Порівняйте, куди мобільні користувачі реально натискають, із тим, куди ви очікуєте. Кліки по неклікабельних елементах і скупчення «мертвих» натискань показують проблеми із зоною пальця й розміром цілей, яких не видно на око. Теплова карта сайту Plerdy

🧭 Мобільна навігація й меню

  • Тримайте іконку меню очевидною й стандартною
    Використовуйте впізнаваний «гамбургер» або підписану кнопку «Меню» в передбачуваному місці. Приховані, нестандартні чи двозначні іконки навігації збільшують відмови, бо користувачі не можуть зорієнтуватися. Якщо сумніваєтеся, додайте слово «Меню» поруч з іконкою.
  • Показуйте липкий хедер із логотипом, пошуком і кошиком
    Тримайте основну навігацію постійно доступною, щоб користувачі завжди могли шукати, повернутися на головну чи відкрити кошик, не скролячи нагору. Компактний липкий хедер прибирає бар’єри з кожного кроку шляху.
  • Обмежте основну навігацію найважливішими пунктами
    Забагато пунктів верхнього рівня перевантажують маленький екран. Групуйте вибір за метою клієнта, виводьте хіти продажів і топові категорії першими, а рідко використовувані посилання переносіть у другорядне меню чи футер.
  • Додайте «хлібні крихти» на сторінки категорій і товарів
    «Хлібні крихти» допомагають покупцям зрозуміти, де вони, і повернутися на рівень вище, не виходячи з сайту. На мобільному вони замінюють широку горизонтальну навігацію десктопу й зменшують залежність від кнопки «назад» у браузері.
  • Зробіть дію «назад» передбачуваною
    Не перехоплюйте й не ламайте кнопку «назад» у браузері. Коли користувач натискає «назад» на сторінці товару, він має повернутися до результатів пошуку чи категорії — а не опинитися на головній і не втратити фільтри. Зламана поведінка «назад» — тихий вбивця конверсії.
  • Показуйте постійний індикатор кошика
    Завжди показуйте іконку кошика з актуальною кількістю товарів і швидким доступом з будь-якої сторінки. Покупці, які можуть переглянути кошик і дійти до оформлення звідусіль, купують більше за тих, кому доводиться шукати свій кошик.
  • Подумайте про нижню панель навігації для ключових розділів
    Для магазинів, схожих на застосунок, нижня панель вкладок (Головна, Пошук, Кошик, Акаунт) тримає найважливіші завдання в зоні досяжності пальця й повторює патерни, які користувачі вже знають із нативних застосунків, — і скорочує зусилля на навігацію.
  • Уникайте нав’язливих міжсторінкових вікон при вході
    Повноекранні попапи, агресивні банери встановлення застосунку й cookie-стіни, що блокують контент одразу при вході, дратують мобільних користувачів і можуть бути пессимізовані Google. Відкладайте необов’язкові запити, робіть їх такими, що закриваються, і ніколи не дозволяйте їм перекривати основну дію.

📝 Форми й автозаповнення

  • Увімкніть автозаповнення браузера й ОС (атрибути autocomplete)
    Додайте правильні значення autocomplete (name, email, tel, street-address, postal-code, cc-number, cc-exp), щоб телефони автоматично заповнювали поля зі збережених профілів. Це найбільша економія часу на оформленні — хвилини набору тексту перетворюються на пару дотиків.
  • Використовуйте правильний тип поля для мобільної клавіатури
    Встановіть type="email", type="tel" і inputmode="numeric", щоб потрібна клавіатура з’являлася автоматично — цифрова для номера картки й телефону, з клавішею @ для email. Змушувати користувачів вручну перемикати клавіатуру — це зайві бар’єри й помилки.
  • Мінімізуйте кількість полів форми
    Питайте лише те, що справді потрібно для виконання замовлення. Кожне зайве поле знижує кількість завершених оформлень на мобільному. Об’єднуйте ім’я та прізвище, де можливо, прибирайте необов’язкові поля й підтягуйте область та відділення за містом, а не питайте окремо.
  • Підтримуйте автозаповнення адреси
    Дайте поле пошуку адреси чи відділення, щоб користувачі обирали повну адресу за пару дотиків, а не заповнювали п’ять окремих полів. Це різко скорочує одруківки, невдалі доставки й найбільший окремий блок набору тексту на мобільному оформленні.
  • Вимикайте автоматичні великі літери й автовиправлення там, де вони шкодять
    Вимкніть автоматичну поведінку для email, промокодів і полів картки (autocapitalize="off", autocorrect="off", spellcheck="false"). Інакше телефон «допомагає» — ставить велику літеру в email і переписує коди, спричиняючи помилки валідації, яких користувачі не можуть пояснити.
  • Показуйте вбудовану валідацію в реальному часі
    Перевіряйте кожне поле, коли користувач із нього виходить, і показуйте зрозуміле повідомлення поруч. Не чекайте відправлення, щоб вивалити стіну помилок — на маленькому екрані користувачеві доведеться скролити, шукаючи кожне некоректне поле.
  • Тримайте підписи видимими під час введення
    Використовуйте підписи над полем або «плаваючі» підписи, а не лише плейсхолдери, які зникають, щойно користувач торкнувся поля. На мобільному люди постійно забувають, яке поле яке, коли підказка зникає, — видимі підписи запобігають неправильному введенню.
  • Робіть повідомлення про помилки конкретними й доброзичливими
    «Введіть номер телефону (10 цифр)» краще за «Некоректне значення». Вказуйте точне виправлення, зберігайте все, що користувач уже ввів, і розміщуйте повідомлення там, де його видно без скролу. Розмиті помилки, що стирають дані, — одна з головних причин, чому люди здаються.
  • Дозвольте оформлення без реєстрації
    Не змушуйте створювати акаунт, перш ніж людина зможе купити. Пропонуйте оформлення без реєстрації одразу, а створити акаунт запрошуйте після покупки (з даними із замовлення). Обов’язкова реєстрація — одна з найчастіше згадуваних причин покинутих кошиків на мобільних.
  • Автоматично визначайте й форматуйте номер картки
    Визначайте Visa/Mastercard/Amex під час введення, автоматично ставте пробіли, перевіряйте довжину й показуйте іконку відповідної картки. Це заспокоює користувачів, що поле працює, і скорочує помилки оплати на найвідповідальнішому кроці.

🛒 Мобільний кошик і сторінки товарів

  • Показуйте ціну чітко й контрастно
    Показуйте ціну, валюту й будь-яку знижку помітно у верхній частині сторінки товару. Прихована, малоконтрастна чи незрозуміла ціна гальмує рішення й повертає мобільних покупців у пошук порівнювати ціни деінде — на Rozetka чи Hotline.
  • Зробіть «Додати в кошик» миттєво помітною
    Одна основна контрастна кнопка — липка, якщо сторінка довга. Підтверджуйте додавання помітним, але не блокувальним сповіщенням чи мінікошиком, щоб користувач знав, що все спрацювало, і міг продовжити покупки чи перейти до оформлення одним дотиком.
  • Оптимізуйте фото товарів для мобільних
    Віддавайте швидкі галереї, які гортаються свайпом і підтримують масштабування двома пальцями. На мобільному саме фото товару закриває продаж — уникайте крихітних мініатюр як основного перегляду й подбайте, щоб перше зображення вантажилося чітким і швидко.
  • Робіть вибір кількості й варіантів зручним для пальця
    Використовуйте великі кнопки «+/−» для кількості й чітко підписані чипи розміру чи кольору замість крихітних нативних випадних списків, у які складно точно влучити. Попередньо обирайте найпопулярніший варіант, щоб багато користувачів могли купити, взагалі не торкаючись вибору.
  • Показуйте вартість і дату доставки заздалегідь
    Несподівана вартість доставки на останньому кроці — причина номер один покинутих кошиків. Розраховуйте вартість і дату доставки на сторінці товару й у кошику, щоб у момент оплати не було неприємних сюрпризів.
  • Зробіть кошик легким для редагування
    Дайте змогу змінити кількість чи видалити товар одним дотиком, не виходячи з кошика, і миттєво оновлюйте суму. Негнучкий кошик, що вимагає перезавантаження чи повернення на сторінку товару, змушує людей здатися, а не щось змінити.
  • Зберігайте кошик між сесіями
    Зберігайте кошик, щоб мобільні користувачі, які повертаються, не втрачали товари, і синхронізуйте його між пристроєм і акаунтом після входу. Мобільні сесії часто перериваються — кошик, що переживе перерву, повертає продажі, які ви інакше втратили б.
  • Додайте зрозумілий шлях «Продовжити покупки»
    Не замикайте користувачів у кошику. Дайте зрозумілий шлях назад до перегляду товарів, що зберігає кошик і місце, де людина була, — тоді додати другий товар легко, і середній чек зростає.

💳 Процес оформлення замовлення й бар’єри

  • Пропонуйте коротке оформлення на одній сторінці або експрес-оформлення
    Скоротіть кількість кроків. Оформлення на одній сторінці зі скролом чи кілька чітко пронумерованих коротких кроків конвертують на мобільному краще за довгий багатоекранний сценарій. Менше екранів і дотиків — менше шансів піти.
  • Показуйте індикатор прогресу
    Показуйте, скільки кроків лишилося (наприклад, Доставка → Оплата → Підтвердження). Невизначеність щодо тривалості оформлення спричиняє відтік; простий чесний індикатор прогресу тримає людей у русі до фінішу.
  • Ніколи не вимагайте реєстрації для покупки
    Дайте спершу оплатити, а зареєструватися — потім. Обов’язкова реєстрація між кошиком і оплатою — чистий бар’єр на мобільному; пропонуйте оформлення без реєстрації, а якщо акаунт потрібен, створюйте його непомітно з уже введених даних.
  • Показуйте всі витрати до фінального натискання
    Чітко показуйте суму товарів, доставку, комісії й знижки на кроці підтвердження, щоб фінальна сума ніколи не шокувала. Несподівані платежі в останню секунду — найшвидший спосіб втратити покупця, якому лишався один дотик до покупки.
  • Підтримуйте способи оплати, яких очікує ваша аудиторія
    Пропонуйте картки, цифрові гаманці, оплату частинами, накладений платіж і місцеві способи, популярні на ваших ринках. Відсутність улюбленого, перевіреного способу оплати клієнта коштує продажу, навіть якщо все інше в сценарії ідеальне.
  • Зробіть кнопку «Підтвердити замовлення» безпомилково помітною
    Використовуйте одну основну контрастну кнопку на всю ширину й вказуйте на ній фінальну суму («Оплатити 1 249 грн»). Не повинно бути жодних сумнівів, яка кнопка завершує покупку і скільки з користувача спишуть.
  • Тримайте користувачів на сайті — уникайте зайвих редиректів
    Платіжні сценарії з численними редиректами втрачають людей, особливо на нестабільному мобільному інтернеті. Надавайте перевагу вбудованій токенізованій оплаті, щоб користувачі лишалися в одному довіреному контексті від кошика до підтвердження.
  • Автоматично застосовуйте промокоди й зрозуміло їх обробляйте
    Тримайте поле промокоду згорнутим і необов’язковим та застосовуйте коди автоматично, де можна. Помітне порожнє поле «промокод» спокушає користувачів піти шукати код, якого в них немає, — і багато хто не повертається.
  • Запобігайте випадковому повторному відправленню
    Вимикайте кнопку оплати після натискання й показуйте індикатор завантаження, щоб стривожений користувач на повільному інтернеті не натиснув двічі й не заплатив двічі. Подвійні списання — це повернення коштів, чарджбеки й втрачена довіра.
  • Давайте чітке підтвердження замовлення
    Показуйте екран підтвердження й надсилайте email чи SMS із номером замовлення та наступними кроками. Невизначеність одразу після оплати породжує звернення «а воно пройшло?», дубльовані замовлення й зайві запити на повернення коштів.

⚡ Експрес-оплата — Apple Pay, Google Pay і гаманці

  • Пропонуйте Apple Pay в iOS Safari
    Дайте власникам iPhone оплачувати через Face ID чи Touch ID за секунди — без набору тексту й введення картки. Для величезної частки мобільного трафіку це найпростіший шлях до покупки з усіх можливих, і він одразу піднімає конверсію.
  • Пропонуйте Google Pay на Android і в Chrome
    Увімкніть Google Pay, щоб користувачі Android платили одним дотиком зі збереженою карткою й адресою. Разом з Apple Pay це охоплює більшість мобільних покупців, які радше підтвердять оплату біометрією, ніж вводитимуть дані картки.
  • Розміщуйте кнопки експрес-оплати вгорі оформлення
    Показуйте кнопки гаманців над формою картки, щоб готові платити користувачі повністю пропускали ручне введення. Якщо сховати експрес-оплату під довгою формою, більшість людей почне вводити дані ще до того, як побачить швидший варіант.
  • Додайте експрес-оплату на сторінки товару й кошика
    Кнопка «Купити з Apple Pay / Google Pay» просто на сторінці товару чи кошика дає постійним користувачам справжню покупку в один дотик — уся воронка стискається до одного біометричного підтвердження.
  • Використовуйте офіційний стиль кнопок гаманців
    Дотримуйтеся брендбуків Apple і Google для їхніх платіжних кнопок, щоб їх миттєво впізнавали й довіряли. Кастомна чи «неофіційна» кнопка гаманця виглядає підозріло й отримує менше натискань.
  • Беріть дані доставки й контакти з платіжного вікна гаманця
    Дайте гаманцю передати ім’я, email, адресу доставки й спосіб доставки, щоб користувач ніколи їх не вводив. Запит цих даних через нативне платіжне вікно — вся суть експрес-оплати, тож не питайте їх вдруге після цього.
  • Перевіряйте доступність гаманця й залишайте запасний варіант
    Визначайте підтримку пристроєм і браузером і показуйте кнопку гаманця, лише коли вона справді спрацює — непрацююча кнопка Apple Pay на Android руйнує довіру. Завжди тримайте помітним варіант оплати карткою як запасний для всіх інших.

🔍 Мобільний пошук і фільтри

  • Зробіть пошук на сайті легким для знаходження й використання
    Тримайте постійну іконку чи поле пошуку з великою, зручною для натискання областю введення. На мобільному пошук часто найшвидший шлях до товару — ховаючи його глибоко в меню, ви втрачаєте покупців із високим наміром.
  • Додайте автодоповнення й підказки
    Показуйте підказки товарів, категорій і популярних запитів під час введення. Автодоповнення скорочує набір тексту на маленькій клавіатурі й веде покупців одразу до результатів, які конвертують.
  • Обробляйте одруківки, синоніми й розкладку клавіатури
    Повертайте релевантні результати для помилок, альтернативних назв, запитів іншою мовою чи в неправильній розкладці, щоб користувачі не впиралися в порожню сторінку «нічого не знайдено». Набір пальцем дає більше помилок — поблажливий пошук тримає таких покупців у воронці.
  • Робіть фільтри й сортування зручними для пальця
    Використовуйте нижню висувну панель фільтрів із великими елементами керування, показуйте, які фільтри застосовано, і дайте очевидну кнопку «скинути все». Фільтрування великого каталогу на телефоні має бути легким, інакше користувачі покидають категорію.
  • Показуйте корисний стан «Нічого не знайдено»
    Коли пошук чи фільтр нічого не повертає, пропонуйте підказки, популярні товари чи можливість одним дотиком розширити запит замість глухого кута. Порожня сторінка — втрачений відвідувач; корисний порожній стан рятує візит.

💨 Мобільна швидкість і продуктивність

  • Досягніть хороших Core Web Vitals на мобільних
    Ціль — хороші LCP (до 2,5 с), INP (до 200 мс) і CLS (до 0,1) за реальними мобільними польовими даними. Повільні сторінки, що смикаються, напряму знижують мобільну конверсію й шкодять позиціям — вимірюйте, а не вгадуйте.
  • Оптимізуйте зображення й завантажуйте їх ліниво
    Віддавайте адаптивні зображення в сучасних форматах (WebP/AVIF) під розмір пристрою й ліниво завантажуйте все, що нижче першого екрана. Зображення зазвичай найважча частина мобільної сторінки — навести в них лад означає найшвидший виграш у швидкості.
  • Усуньте зсуви макета
    Резервуйте місце для зображень, банерів і реклами, щоб контент не стрибав під час завантаження. На мобільному зсуви макета змушують користувачів натискати не те — зокрема випадково «купити» чи «видалити» під час завантаження.
  • Зменшіть кількість сторонніх скриптів
    Проаналізуйте віджети чатів, трекери й інструменти тестування — кожен додає вагу й затримку в мобільних мережах. Завантажуйте некритичні скрипти async чи defer і прибирайте все, що не відпрацьовує своє місце.
  • Пріоритезуйте контент першого екрана
    Спочатку рендерте ключовий контент і основний CTA, а решту відкладайте. Мобільні користувачі вирішують швидко — якщо важлива частина з’являється швидко й на неї можна натиснути, вони діють ще до того, як завантажиться вся сторінка.
  • Тестуйте на реальних пристроях середнього класу й через 4G
    Не оцінюйте швидкість на флагмані через офісний Wi-Fi. Багато ваших клієнтів користуються смартфонами середнього класу й повільнішими мережами (а під час відключень світла — ще й перевантаженим мобільним інтернетом) — тестуйте в цих умовах, щоб побачити досвід, який вони реально отримують, перш ніж піти.
  • Тримайте оформлення замовлення легким і швидким
    Приберіть необов’язкові скрипти й важкі ресурси саме зі сторінок оформлення замовлення. Тут кожна секунда затримки коштує найдорожче — покупець уже вирішив купити, і повільний крок оплати, що підвисає, — саме те місце, де ви його втрачаєте.

✅ Довіра, читабельність і доступність

  • Використовуйте розбірливий розмір шрифту
    Встановіть основний текст щонайменше 16px, щоб користувачам ніколи не доводилося збільшувати екран, аби прочитати ціни, варіанти чи умови. Дрібний текст на мобільному погіршує розуміння, сповільнює рішення й тихо підточує довіру в момент покупки.
  • Забезпечте достатній контраст кольорів
    Дотримуйтеся контрасту рівня WCAG AA (щонайменше 4,5:1 для тексту). Малоконтрастні кнопки й підписи важко читати надворі на сонці й багатьом користувачам із неідеальним зором — це коштує вам натискань, яких ви навіть не побачите.
  • Показуйте сигнали довіри біля оплати
    Розміщуйте бейджі безпеки, іконки прийнятих карток і коротке запевнення («Безпечна оплата») просто біля кнопки оплати. На мобільному, де екран показує небагато за раз, видимі сигнали довіри у вирішальний момент зменшують вагання.
  • Робіть відгук на натискання миттєвим
    Давайте миттєвий візуальний відгук на кожне натискання — стан натиснутої кнопки, індикатор завантаження, неактивну кнопку. Без цього користувачі на повільному інтернеті вважають, що нічого не сталося, і натискають знову, спричиняючи помилки й подвійні дії.
  • Уникайте дрібних попапів, які важко закрити
    Переконайтеся, що попапи cookie, згоди й акцій мають великі досяжні кнопки закриття й ніколи не перекривають шлях до оформлення замовлення. Попап, який на телефоні непросто закрити, — прямий вихід із сайту, а іноді й назавжди втрачений клієнт.
  • Переглядайте реальні мобільні сесії, щоб знайти бар’єри
    Використовуйте записи сесій, щоб побачити, де мобільні користувачі вагаються, «люто» натискають, повторно заповнюють поля чи покидають оформлення, — а потім виправляйте саме той крок, що не працює. Реальні записи перетворюють «конверсія низька» на конкретну проблему, яку можна виправити. Записи сесій Plerdy