Помилки інтерфейсу інтернет-магазину: як перевірити й виправити шлях до покупки

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

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

1. Перевірте, чи покупець знаходить товар без підказки менеджера

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

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

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

Окремо перевірте мобільне меню. Категорія має відкриватися натисканням, а її підрозділи — залишатися доступними без наведення миші. Після закриття меню покупець повинен повернутися до того місця сторінки, де його відкрив.

2. Узгодьте варіант товару, залишок, ціну та строк відправлення

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

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

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

3. Покажіть повну вартість до остаточного підтвердження

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

Умовний приклад розрахунку: два товари по 480 грн коштують 960 грн. За доставки 80 грн і пакування 20 грн загальні витрати становлять 1 060 грн. Якщо 960 грн покупець сплачує магазину, а 100 грн — під час отримання, підсумок має показувати обидві суми та кому їх сплачують. Цифри наведено лише для демонстрації структури розрахунку.

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

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

4. Скоротіть мобільну форму й зробіть кожне поле зрозумілим

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

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

У матеріалі W3C про підписи полів рекомендовано позначати елементи форми та пов’язувати підпис із відповідним полем. Передайте розробнику вимогу залишити видимі назви «Телефон», «Електронна адреса», «Місто» після введення даних. Текст-підказка всередині порожнього поля зникає, тому покупець може втратити пояснення, що саме він заповнює.

• Тип поля. Для електронної адреси передбачте тип email, для телефону — tel. Телефон зберігайте як текстове значення, щоб знак «+» і формат номера не сприймалися як арифметичне число.
• Автозаповнення. Попросіть налаштувати атрибут autocomplete відповідно до призначення полів і перевірте підстановку імені, телефону та адреси на справжньому телефоні.
• Формат введення. Дозвольте вставляти телефон із пробілами або дужками та обробляйте допустимі варіанти на сайті. W3C у настановах із перевірки введення радить приймати різні способи запису даних, коли це можливо.
• Обов’язковість. Позначте потрібні поля словами або поясніть значення позначки перед формою. Необов’язкові дані також мають бути впізнаваними.

Для українського магазину склад полів пов’язаний і з вимогами українського законодавства. Частина 3 статті 6 Закону України «Про захист персональних даних» № 2297-VI вимагає, щоб склад і зміст даних були відповідними, адекватними та ненадмірними щодо мети обробки. Практично це означає: перевірте потребу в даті народження, статі та інших відомостях, які не потрібні для конкретного замовлення.

Пункт 3 частини 1 статті 11 цього Закону передбачає укладення та виконання правочину як одну з підстав обробки даних. Тому визначайте підставу для кожної мети окремо; згода не є єдиною можливою підставою для обробки замовлення. Біля форми дайте зрозуміле посилання на інформацію про володільця даних, мету обробки, одержувачів і спосіб звернення щодо даних з урахуванням прав, передбачених статтею 8. Якщо використовуєте згоду на рекламну розсилку, запропонуйте її окремо від оформлення покупки.

Перевірте клавіатуру, видимість фокусу й читабельність

Пройдіть оформлення без миші: клавішею Tab переходьте вперед, Shift+Tab — назад, активуйте кнопки й відкривайте списки з клавіатури. Фокус, тобто позначення поточного активного елемента, має бути видимим. Послідовність переходів повинна відповідати порядку читання, а відкрите меню чи вікно не повинно залишати людину без способу повернутися до покупки.

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

5. Пояснюйте помилки та зберігайте введені дані

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

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

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

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

6. Дайте перевірити замовлення та відновити оплату без дублювання

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

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

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

Перевірте подвійне натискання, оновлення сторінки підтвердження та повернення кнопкою браузера. Для кожної перевірки звірте кількість замовлень у системі, їхні номери та платіжні спроби. Видиме повідомлення «Успішно» має відповідати фактичному результату; W3C окремо наголошує на необхідності повідомляти користувачу як про помилки, так і про успішне завершення форми.

7. Зробіть умови доставки, повернення та контакти доступними до покупки

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

• Доставка. Укажіть доступні способи, територію обслуговування, порядок визначення вартості та строки обробки. Розрізняйте час, потрібний магазину для відправлення, і очікуваний строк перевезення.
• Повернення. Поясніть, куди звернутися, які відомості надати для пошуку замовлення, як погодити відправлення та отримати відповідь. Умови й винятки перевіряйте для свого асортименту; не переносьте обмеження одного виду товару на всі покупки.
• Контакти. Назвіть продавця, покажіть канали зв’язку та години відповіді. Перевірте, чи працюють посилання на телефон і електронну пошту з мобільного пристрою.
• Самовивіз. Якщо він доступний, укажіть адресу, графік і момент, коли можна приходити: одразу після оформлення чи після повідомлення про готовність.

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

Синхронізація Торгсофт з інтернет-магазином: перевірка залишків і цін

Якщо основний облік ведеться в Торгсофт, додаткова платна функція «Синхронізація з Інтернет-магазином» дає змогу передавати дані про товари, наявність, характеристики й описи та отримувати замовлення. За офіційним порівнянням ліцензій, для синхронізації потрібна ліцензія з повним функціоналом і відповідна платна опція. Підключення з боку власного сайту потребує участі його розробника, як зазначено в довідці Торгсофт.

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

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

8. Проведіть перевірку із покупцями та оцініть завершені замовлення

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

1. Знайти товар через категорію та окремо через пошук, вибрати потрібні характеристики й перевірити наявність.
2. Додати товар у кошик, змінити кількість, прибрати позицію та повернутися до каталогу.
3. Оформити покупку на телефоні без реєстрації, визначити всі витрати й змінити спосіб доставки.
4. Виправити навмисну помилку у формі та переконатися, що інші дані збереглися.
5. Пройти успішну й невдалу тестові оплати, повернутися до замовлення та перевірити його статус.
6. Знайти порядок повернення й контакт магазину, не втративши кошик.

Записуйте завдання, пристрій, місце зупинки, слова учасника та результат: завершив самостійно, завершив із допомогою або не завершив. У завданні розробнику описуйте дію, очікуваний результат і фактичну поведінку. Наприклад: «Після зміни міста форма залишає відділення з попереднього міста; потрібно очистити цей вибір і попросити обрати нове».

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

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