Апгрейд сторінки оформлення замовлення, чек-лист
Люди приходять в інтернет-магазин різними шляхами: одні потрапляють прямо на картку товару з результатів пошуку, інші переходять на список товарів з реклами, треті набирають адреса магазину безпосередньо в адресному рядку і т. д. Точок входу багато. Щоб точка входу не стала відразу ж і точкою виходу, потрібно постійно працювати над сайтом: як над його контентом, так і над його зручністю (юзабіліті). Оглядова стаття по основним пунктам юзабіліті сайту є тут. Вона про фактори, які можна застосувати до всього сайту в цілому.
Сьогодні ж поговоримо не про початковій точці знайомства з інтернет-магазином, а про тій точці, яка, по ідеї, повинна стати фінальною – про сторінці оформлення замовлення.
Оптимізація сторінки оформлення замовлення
Особливих складнощів тут немає – чим сторінка замовлення зрозуміліше і зручніше, тим більше ймовірність того, що користувач оформить замовлення. Зрозуміло, що в деяких випадках людина пробереться і через 10-ти сторінковий квест заради відправки замовлення (наприклад, якщо у вас вигідну пропозицію за ціною, або потрібний товар є тільки у вас), але і в такому випадку може наступити межа терпінню.
Якщо ж ви хочете, щоб оформлений замовлення був до того ж і не останнім, слід поважати користувача на кожному кроці взаємодії з них – в тому числі, і на кроці оформлення замовлення. Повага компанії до клієнта (нехай навіть потенційного) завжди конвертується в лояльність клієнта до компанії.
Переходимо до справи і починаємо перевіряти, чи все необхідне є на сторінці оформлення замовлення нашого магазину.
Для прикладу візьмемо ось таку сторінку:
1. Аналітика сторінки
Цей пункт – не для відвідувачів вашого сайту. Цей пункт – для вас, для власників, і він дуже і дуже важливий (тому і стоїть першим у списку). Якщо ви не аналізуєте поведінку користувачів на сторінці замовлення, значить, ви не зможете зрозуміти, чи є на ній проблеми, які вони, і стало краще після внесених змін.
Що можна відстежувати:
- Стандартні поведінкові: відсоток відмов, час перегляду сторінки.
- Аналітика форм: скільки людей взаємодіяли з формою і скільки в підсумку відправили дані. Наприклад, Яндекс.Метрика дає таку картинку (аналізуються дані за останні 2 тижні):
Тут добре бачимо, скільки людей навіть не стали заповнювати форму (137), а скільки спробували, але кинули (91). Наша мета – підвищувати підсумкову конверсію форми (яка внизу праворуч – відношення числа людей, які відправили дані, до загального числа людей, що зайшли на сторінку з формою).
- Вебвізор (в Метриці). Власне, беремо ті 228 людей, які не впоралися із заповненням форми, і отсматриваем 7-15 відвідувань з них – що викликало труднощі, після якого поля або блоку людина здувся здався.
Отримані дані фіксуємо, висуваємо гіпотезу (що можна виправити), вносимо правки і знову збираємо дані. Потім порівнюємо нові дані з колишніми і робимо висновок – спрацювала наша гіпотеза чи ні, і починаємо спочатку.
2. На сторінці замовлення є список товарів і його можна редагувати
Показати список обраних товарів на сторінці замовлення необхідно, щоб людина не забувала, заради чого він змушений напружуватися і заповнити форму замовлення.
А якщо в процесі замовлення він вирішить замовити не 2, а 4 ось цих футболки, то навіщо йому перешкоджати в цьому і змушувати повертатися на сторінку Кошика – хай змінить кількість відразу на сторінку Замовлення.
Все частіше магазини об’єднують сторінку Кошика і Замовлення в одну.
3. У списку товарів показуються знижки
Люди не люблять втрачати вигоду – тому і на сторінці замовлення продовжуйте показувати, що товар продається зі знижкою (якщо знижка є).
4. У списку товарів є картинки і короткі описи
Зазвичай у списку товарів при оформленні замовлення показують тільки назва. Ніби як на картинки і опис користувач вже надивився в картці товару. Але згадайте, адже людина ще не оформив замовлення, і можливо, він ще сумнівається, чи варто купувати. Тому можна коротко нагадати йому, який хороший товар лежить у нього в кошику.
Це справедливо для товарів з високою і середньою ціною. Для недорогих товарів можна не показувати опису. Також і при великому числі товарів у кошику краще приховати опису, щоб заощадити місце на сторінці.
5. На сторінці замовлення є поле для промокода
Якщо ви видаєте промокоди на знижки або бонуси, не забудьте додати в форму замовлення поле, де можна ввести промокод. Бо немає нічого неприємніше, ніж отримати промокод, радісно побігти робити замовлення і не знайти, як використовувати цей промокод.
Щоб поле не занадто сильно відволікало тих, кому промокода не дісталося, можна зробити його розгортається по кліку.
6. Оформлення замовлення відбувається 1 крок
Якщо відвідувач відразу бачить, яку інформацію йому треба заповнити для замовлення – то він може візуально оцінити, скільки часу буде потрібно на це. Якщо ж заповнення замовлення розбито на кроки, то таку оцінку зробити неможливо, і підсвідомо очікується, що на кожному кроці доведеться витратити стільки ж часу, скільки і на першому.
Щоб зробити форму візуально простий, можна приховувати частину непотрібних у даний момент інформації. Наприклад, додаткові поля для доставки показуємо тільки для вибраного способу, а не всіх одразу:
7. Розумне кількість полів у формі
Просіть від користувача лише ту інформацію, яка вам дійсно необхідна від нього зараз. У більшості випадків – це номер телефону та адресу доставки.
Можна залишити необов’язковими:
- Поле для імені: до нього звикли і знають, що менеджер буде звертатися з цього імені
- Поле для коментаря до замовлення
- Поле для email: так, необов’язкове. Що вам важливіше – щоб юзер зареєстрував аккаунт, але нічого не оплатив (т. к. поки реєстрував аккаунт, передумав платити), або щоб оплатив, хоч і без реєстрації облікового запису?
І навіть якщо користувач не вказав адресу доставки (а вибрав, наприклад, доставку кур’єром) – можна прийняти таке замовлення. Адже номер телефону у вас є, так що ніщо не заважає зателефонувати і уточнити адресу.
8. Можна оформити замовлення в 1 клік
Для тих користувачів, які в принципі не люблять клавіатуру і розбиратися в способах доставки, а люблять поговорити.
Людина тисне «Купити в 1 клік» і відправляє номер свого телефону. Менеджер отримує склад замовлення, зв’язується з клієнтом і заповнює інші параметри замовлення за нього.
9. Для способів оплати є іконки і зазначена комісія (якщо є)
Якщо способів оплати більше 3, то з іконками орієнтуватися в них простіше – достатньо побіжного погляду, щоб помітити потрібний спосіб оплати (наприклад, оплату через Ощадбанк.Онлайн).
Якщо при певному способі оплати береться комісія – обов’язково напишіть про це. Краще людина відразу вибере інший спосіб, ніж натрапить на неприємний «сюрприз» в процесі оплати.
10. Для способів доставки вказана вартість
Фіксована або у форматі «від …» – але вартість доставки повинна бути вказана, щоб людина могла зорієнтуватися, що його чекає при виборі того чи іншого способу доставки. Коли обирає конкретний спосіб і вказує район/місто, то вартість доставки повинна порахуватися точно.
11. Вказані умови для безкоштовної доставки
Якщо доставка у вас безкоштовна при замовленні від якоїсь суми, вкажіть це – цілком імовірно, що людина дозакажет ще товар, якщо йому трохи не вистачає до безкоштовної доставки.
12. Для доставки кур’єром можна вибрати зручний час
Для кур’єрської доставки це найважливіше питання – чи доведеться мені сидіти вдома весь день і чекати кур’єра? Якщо я зможу вибрати якийсь один проміжок часу (наприклад, з 9 до 14 годин), мені буде зручніше спланувати свій день.
Якщо людина вибрала час, на яке всі доставки вже розписані – не страшно, достатньо зв’язатися з ним по телефону і домовитися на інший час. Якщо зробити це ввічливо, негативу не буде.
13. Для самовивозу адреси точок можна подивитись на карті
Обов’язково вкажіть адреси точок для самовивозу (і їх режим роботи). Покажіть ці точки на карті Яндекса або Гугла – так користувач швидше знайде найбільш зручну для себе точку.
14. У списках оплати і доставки за умовчанням вибрані популярні варіанти
Щоб при спробі відправити замовлення не викликати помилок «Не вибрано спосіб оплати» або «Не вибрано спосіб доставки», позначте в них значення за замовчуванням. Для цього подивіться за статистикою своїх замовлень, які способи люди вибирають найчастіше. Наприклад, можна вибрати «Готівка» для способів оплати і Доставки по місту» для способів доставки.
15. Одні дані – в одне поле
Замість полів «Вулиця», «Будинок», «Під’їзд» поставте одне поле «Адреса доставки» – коли людина дійсно хоче отримати своє замовлення, він здатний вказати там свою адресу в повному і зрозумілому вигляді. Вибір міста або району виносять у окреме поле, як правило, тільки для того, щоб автоматично розраховувати вартість доставки.
Те ж стосується і полів для ПІБ. Замість трьох полів «Прізвище», «Ім’я», «по Батькові» цілком достатньо одного поля «Ім’я та прізвище» або просто «Ваше ім’я».
І ніколи, чуєте, ніколи не просіть вказати поштовий індекс – зараз його пам’ятають одиниці. Якщо вам потрібно відправити замовлення по пошті, ви завжди можете знайти індекс за вказаною клієнтом адресою.
16. Використовуються «помічники» для заповнення полів
Наприклад, маска вводу номера телефону:
Випадаючий календар (datepicker) для дати:
Поле пошуку для великих випадаючих списків:
Всі ці інструменти допомагають швидше заповнити необхідні поля.
17. Є пояснення до полів
Короткі пояснення корисні там, де у відвідувача може виникнути питання: «А навіщо їм потрібні ці дані?».
Наприклад, пояснення до поля з телефоном – «Для підтвердження замовлення», по-перше, знімає заперечення «Навіщо їм знадобився мій телефон», по-друге, стимулює вказати правильний номер.
Пояснення до email – «На нього продублюємо замовлення та надішлемо чек про оплату» – дає користувачеві можливість самому вирішити, чи залишати email або немає. Як правило, якщо людині нагадати, що на email він отримає корисну інформацію (адже там буде номер замовлення та контакти магазину), а не спам, то відсоток заповнення поля зростає. І немає негативу з-за примусу залишати свій email.
До пропозиції створити Особистий кабінет підійдуть пояснення: «Щоб зберігати історію замовлень», «Щоб отримувати знижки за суму замовлень», «Щоб збирати бонусні бали».
Думаю, принцип ви зрозуміли – вкажіть вигоду, яку отримає клієнт, і поле буде заповнено.
18. Повідомлення про помилки у формі зрозумілі
Говоримо дружне «Ні» перерахуванню помилок в самому початку форми – і потім шукай їх по всіх полях. Форма взагалі повинна перевірятися без перезавантаження сторінки. Не заповнив телефон і натиснув кнопку «Оформити замовлення»? Обводимо полі «Телефон» червоним, пишемо, що треба її заповнити, і прокручуємо сторінку саме до цього поля. Поле з помилкою повинно знаходитися прямо перед очима користувача.
19. Розумна перевірка введених даних
Іноді номер телефону хочуть записати так:
8(945)123-45-67 доб.444,
або навіть ось так:
777-44-22 дзвонити після 15:00
Якщо у вас в формі є сувора перевірка на номер телефону і там можна тільки цифри, скобки і тире, то обидві ці записи не пройдуть. А адже це два реальних клієнта, просто першому треба дзвонити через додатковий код, а другого тільки після трьох годин (і якщо, припустимо, в адресі доставки він вказав СПб, то і відсутність коду міста в цьому номері нам не перешкода).
Тому не варто ставити строгих обмежень на ті дані, які не вимагають строгості.
Інший приклад – про email. Якщо ми хочемо реєструвати особистий кабінет на адресу пошти, то його треба перевірити. І якщо введений вами адресу не підходить під формат email – слід вказати на помилку, інакше користувач не зможе отримати пароль від аккаунта і подивитися історію замовлень. Тобто в цьому випадку ми вберігаємо користувача від помилки – а це вже не причіпка, а прояв турботи.
20. Важливі поля на початку, інші – у кінці форми
Ми вже домовилися, що полів у формі буде небагато. Але і їх ми можемо розділити за пріоритетами. На перше місце ставимо вибір способів оплати і доставки. Потім контакти і коментар до замовлення, і тільки потім показуємо інші поля. Таким чином, навіть якщо ближче до кінця форми користувач вже «втомиться», він зможе пропустити останні необов’язкові поля та оформити замовлення.
Сюди ж, в кінець форми (або на кордон уваги, але не в центр) ставимо пропозиції щодо створення особистого кабінету, за передплатою та ін. – це другорядні дії, тоді як головна мета – оформити поточний замовлення.
Ось так піде погляд користувача:
Якщо людина не залишив свою пошту, а ви так хотіли слати йому розсилки – просто вкладіть у оплачений ним замовлення промокод для отримання знижки на наступні замовлення. Звичайно, у цього промокода буде одна умова – отримати знижку можна тільки після реєстрації особистого кабінету. Ось і все, email у вас в кишені. Адже залишити пошту того магазину, з яким вже було успішне взаємодія, набагато простіше, ніж при першому замовленні.
21. Для передплати вказана частота листів
В принципі, всі ми любимо розпродажі та знижки. І отримувати інформацію про них дійсно зручно (для товарів з частим споживанням – одяг, побутова хімія, корму для тварин, якісь витратні матеріали і т. д. – тобто те, що купуємо постійно). Ось тільки не хочеться, щоб пошту завалювало спамом. Тому варто вказати, наскільки часто ви будете надсилати листи (тільки чесно, плз) і нагадати про те, що можна завжди відписатися від розсилки (аналог фрази «ви нічим не ризикуєте»).
22. Можна оформити замовлення без реєстрації
Інтернет-магазинів багато, і ні за що не пригадаєш всіх логінів/паролів для них. Тому перше, що шукають очі на формі замовлення – це чарівну кнопку «Оформити замовлення без реєстрації».
Коли людина робить свій перший замовлення, то особистий кабінет йому не потрібен, адже він ще не знає, чи можна вам довіряти. Після успішного першого досвіду довіри буде більше, тому при другому замовленні клієнт може вже абсолютно добровільно зареєструватися.
І навіть якщо всі свої замовлення користувач буде робити у вас без особистого кабінету, це не настільки важливо. Головне, щоб він робив їх саме у вас.
23. Можна авторизуватися тут же без переходу на іншу сторінку
Це відноситься до тим користувачам, які раніше створили особистий кабінет.
Коли я роблю черговий замовлення на Озоні, мені доводиться в середині процесу оформлення замовлення йти по посиланню «Особистий кабінет», вказувати свої логін/пароль і потім знову відкривати кошик. І якщо з’явиться інтернет-магазин, в усьому аналогічний Озону, але в якому я зможу увійти в свій особистий кабінет прямо на сторінці замовлення, не залишаючи її – Озон буде забутий за такий, здавалося б, дрібниці.
24. Для авторизованого користувача дані заповнюються автоматично
Якщо користувач зайшов у свій особистий кабінет, то давайте допоможемо йому в оформленні замовлення:
- Відзначимо ті способи оплати і доставки, які він використовував при останньому замовленні – швидше за все, і зараз він використовує їх же.
- Заповнимо ім’я, телефон та адресу доставки з попереднього замовлення. Якщо щось змінилося, користувач просто замінить дані.
- Приховаємо зовсім блок про особистий кабінет і підписки – авторизованому користувачеві він не потрібен.
В ідеалі, авторизований користувач повинен лише окинути поглядом форму та натиснути «Оформити замовлення».
25. Є поле «Коментар до замовлення»
Не треба робити його великим, зазвичай туди пишеться одне-два речення, щось на кшталт «Велике прохання зателефонувати за годину до доставки», «Мені потрібен такий же, але з перламутровими гудзиками» і т. п.
26. Виводиться підсумкова сума замовлення
Обов’язково покажіть вартість обраних товарів, вартість доставки і підсумкову суму, щоб покупцеві не довелося складати самостійно.
27. Під кнопкою є коротке пояснення наступних подій
Це знімає питання «А що буде після того, як я натисну на цю кнопку?». Запитували – відповідаємо:
28. Після оформлення замовлення видається інформативне повідомлення
Повідомляємо користувачу, що його замовлення прийнято (не забуваємо подякувати). Обов’язково вказуємо час наступного контакту та номер замовлення. Корисно продублювати інформацію про замовлення (сума, вибрані способи оплати і доставки, адреси), деякі люди хочуть переконатися, що все правильно вказали.
29. Після оформлення замовлення йде листа на email
Якщо користувач залишив свій email – надішліть лист з підтвердженням замовлення. Інформація та ж, що і в попередньому пункті, плюс додаємо склад замовлення. І обов’язково вказуємо контактні дані магазину (телефон менеджера), щоб користувач зміг оперативно зв’язатися з вами, якщо виникнуть питання.
30. Є повідомлення для порожньої кошика
Якщо товарів у кошику ще немає, а користувач перейшов на сторінку оформлення замовлення – помилково або з історії браузера – не будемо лякати його порожньою сторінкою. Покажемо, що так, це кошик, і так, вона порожня. А ось і розділи товарів – вибирайте, що душа забажає:
Підсумок
Пам’ятайте про основні правила для сторінки замовлення в інтернет-магазині:
- Простота і в той же час повнота інформації (все коротко і по справі, нічого зайвого)
- Мінімум полів для введення
- М’які обмеження (не заганяйте користувачів у кут суворими вимогами)
- Взаємодія з користувачем (розрахунок вартості доставки, вибір найближчого пункту самовивозу тощо)
- Аналітика даних (а куди без неї)
Вважаєте, що оформлення замовлення у вашому магазині проходить ідеально? Запропонуйте оформити замовлення людині, яка з комп’ютером на «ви» (у кого-то це мама, старша сестра або літня сусідка) – і ви побачите, як люди «спотикаються» про моменти, які вам здаються очевидними.
