Чекаут: як зробити оформлення замовлення, яке доводять до кінця

Чекаут — найдорожче місце вашого сайту. Не головна сторінка, не каталог, не картка товару. Саме сюди доходять люди, які вже пройшли весь шлях: побачили рекламу, зайшли, вибрали, порівняли, поклали в кошик і натиснули «Оформити». Ви вже заплатили за цього клієнта повну ціну — рекламою, контентом, часом. І якщо він відвалиться зараз, ви втратите не «відвідувача», а фактично оплаченого покупця за крок до каси.

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

Покупка без реєстрації — не опція, а база

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

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

Гостьовий чекаут — оформлення без реєстрації — має бути основним сценарієм, а не захованою внизу посилкою «продовжити як гість». Магазину реєстрація потрібна для власної зручності (історія замовлень, повторні продажі), клієнту в момент покупки — ні. І це не означає відмовитись від акаунтів. Це означає поміняти порядок:

1. Людина оформлює замовлення як гість — швидко, без пароля.
2. Оплачує.
3. І вже на екрані подяки бачить: «Зберегти дані, щоб наступного разу оформити в один клік — придумайте пароль».

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

Кожне зайве поле — це втрачені замовлення

Друге за дорожнечею — довга форма. Кожне поле вимагає рішення: прочитати, зрозуміти, згадати, надрукувати, сумніватись, чи правильно. На мобільному, однією рукою, у транспорті — тим паче.

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

• Імʼя (і прізвище, якщо перевізник вимагає для отримання).
• Телефон — головний контакт, за яким підтвердять замовлення.
• Спосіб доставки й місто + відділення перевізника.
• Спосіб оплати.
• Одне необовʼязкове поле «Коментар до замовлення» — куди людина сама покладе те, що вважає важливим.

Усе. Далі беріть кожне додаткове поле й ставте йому одне питання: що ми зробимо з цією відповіддю? По батькові — навіщо? Дата народження — ви справді надішлете привітання чи це просто поле «бо у всіх є»? «Звідки ви про нас дізналися» — хто читає ці відповіді й що змінює? Email часто потрібен для чека й статусу замовлення — це чесна причина, тож лишається; а от «повторіть email» — ні.

Окремо про пошту: якщо ви збираєте email тільки щоб потім слати розсилку — це не привід робити поле обовʼязковим на чекауті. Просіть його там, де воно потрібне процесу, а згоду на розсилку пропонуйте окремою галочкою (невідміченою).

Ще одна дрібниця, яка ріже конверсію: не робіть обовʼязковими поля, які людина фізично може не знати — індекс, код відділення, повну адресу складу. Це ваша робота — підставити їх із довідника перевізника.

Кроки, прогрес і відсутність сюрпризів

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

Що справді важливо:

• Видимий прогрес. Людина має бачити, де вона і скільки лишилось: «Крок 2 з 3». Форма без горизонту здається нескінченною — навіть якщо вона коротка.
• Можливість повернутись назад без втрат. Натиснув «назад» — введене на місці, а не порожня форма. Це елементарно ламає довіру, коли не працює.
• Кошик перед очима. Що саме купую, скільки штук, за скільки — коротким списком поруч або згорнутим блоком угорі.
• Ніяких сюрпризів наприкінці. Це найголовніше.

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

Тому вся вартість має бути видима якомога раніше: доставка, комісія за спосіб оплати, мінімальне замовлення, оплата частинами з переплатою. Якщо точну вартість доставки порахувати неможливо до вибору відділення — так і напишіть заздалегідь: «доставка за тарифами перевізника, орієнтовно 70–100 грн». Чесна оцінка наперед коштує дешевше за точну цифру-сюрприз у кінці. Як влаштувати саму доставку й вибір відділення, ми розбирали в матеріалі про доставку в інтернет-магазині, а варіанти оплати — в матеріалах про інтеграцію онлайн-оплати й оплату частинами.

Підказки й автозаповнення: хай форма працює за клієнта

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

• Пошук відділення перевізника, а не ручне введення. Людина друкує «Вінн» — випадає «Вінниця». Друкує «Соборна» — випадають відділення на цій вулиці з номерами. Ручне введення адреси складу — це і довго, і помилки, і потім менеджер передзвонює уточнювати. Довідники перевізників підтягуються автоматично, це стандартна інтеграція.
• Автоформат телефону. Людина вводить цифри як звикла — форма сама приводить їх до вигляду +38 (0XX) XXX-XX-XX. Не змушуйте вгадувати формат і тим паче не сваріть за дужки.
• Автозаповнення браузера. Полям треба проставити правильні технічні атрибути (autocomplete), щоб браузер сам підставив імʼя, телефон, пошту. Це кілька рядків коду й хвилина економії клієнту.
• Валідація по ходу, а не після сабмита. Помилку в телефоні показуйте одразу біля поля, коли людина з нього пішла, — а не після натискання «Оформити», коли вона вже думала, що все.
• Розумні замовчування. Найпопулярніший спосіб доставки й оплати можна поставити обраним за замовчуванням — більшості просто не доведеться нічого чіпати.

Помилки, які не бісять

Момент помилки — це момент, коли людина найближче до того, щоб піти. Погана обробка помилок звучить так: «Помилка. Перевірте правильність заповнення полів» — червоним угорі, поле не підсвічене, а частина введеного зникла. Це гарантована втрата.

Правило просте: скажіть, що не так, де саме, і як виправити.

• Помилка — біля свого поля, а не однією фразою вгорі сторінки.
• Формулювання конкретне: не «невірний формат», а «Схоже, у номері не вистачає цифри — потрібно 10 цифр після +38».
• Не сваріть за формат, який можна виправити самим. Ввели телефон із пробілами? Приберіть пробіли за людину, а не показуйте помилку.
• Ніколи не скидайте заповнене. Помилка в одному полі не має обнуляти решту форми — це найшвидший спосіб перетворити дрібну помилку на закриту вкладку.
• Не ховайте помилку. Якщо після натискання «Оформити» проблема нагорі, а екран не прокрутився — людина бачить, що кнопка «не працює», і йде.
• Кнопка не має мовчати. Натиснув «Оплатити» — одразу видима реакція: кнопка блокується й показує «Обробляємо…». Інакше людина натисне ще тричі й отримає три замовлення.

Мобільний чекаут і швидкість

Більшість покупок в українському e-commerce робиться з телефона — і чекаут, зручний на 27-дюймовому моніторі розробника, на екрані в 6 дюймів може бути катастрофою. Що критично:

• Великі поля й великі кнопки. Палець — не курсор. Дрібні поля впритул одне до одного дають промахи, а промах на чекауті — це роздратування в найгіршу мить.
• Правильні клавіатури. Поле телефону має відкривати цифрову клавіатуру, поле пошти — клавіатуру з «@». Це задається типом поля. Коли людина мусить сама перемикатись на цифри, щоб ввести телефон, — це помилка розробника, а не клієнта.
• Нічого дрібного. Ні тексту 11 пікселів, ні галочок згоди розміром із зернину, ні умов, які треба збільшувати пальцями.
• Ніякого горизонтального скролу й полів, що ховаються під клавіатурою.
• Швидкість. Чекаут, який думає 5 секунд після кожного кроку, втрачає людей навіть за ідеальної форми. Це та сама швидкість сайту, про яку ми писали в матеріалі як пришвидшити сайт, тільки в найдорожчому місці.

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

Довіра на останньому кроці й що після замовлення

Перед кнопкою оплати в голові покупця вмикаються останні сумніви: а якщо не підійде? а коли привезуть? а хто це взагалі? Відповіді мають бути прямо тут, а не в розділі «Інформація» в підвалі. Кілька коротких рядків поруч із кнопкою:

• Що буде далі й коли. «Менеджер зателефонує протягом години в робочий час, щоб підтвердити замовлення». Людина має розуміти, чого чекати.
• Умови повернення одним рядком: «14 днів на повернення». Це знімає найбільший страх покупки наосліп — детальніше в матеріалі про повернення й обмін товару.
• Контакти живих людей. Телефон і месенджер, у які реально відповідають.
• Ясність із оплатою. Хто списує гроші, чи безпечно, чи можна оплатити при отриманні.

І після натискання — зрозуміле підтвердження. Не «Дякуємо» на порожній сторінці, а номер замовлення, склад замовлення, сума, спосіб доставки й чіткий наступний крок: «Ми надішлемо ТТН у SMS, щойно передамо посилку». Плюс той самий делікатний офер зберегти дані в акаунт. Порожнеча після оплати породжує тривожні дзвінки в підтримку — а це вже ваші витрати.

Чек-лист чекауту

Пройдіться своїм оформленням із цим списком у руках:

• Можна оформити без реєстрації, і це основний, не захований сценарій
• Акаунт пропонується після покупки, однією кнопкою
• У формі лише поля, які ви реально використовуєте
• Немає обовʼязкових полів, яких клієнт може не знати (індекс, код відділення)
• Видно прогрес: на якому кроці людина й скільки лишилось
• Склад і сума замовлення видимі під час заповнення
• Уся вартість (доставка, комісії) відома до останнього кроку — без сюрпризів
• Відділення перевізника обирається пошуком, а не вводиться руками
• Телефон автоформатується, працює автозаповнення браузера
• Валідація — по ходу, а не після натискання «Оформити»
• Помилки — біля поля, конкретні, нічого не скидають
• Кнопка після натискання блокується й показує стан
• На мобільному: великі поля, цифрова клавіатура для телефону, нічого дрібного
• Кроки чекауту не гальмують
• Поруч із кнопкою — гарантії, повернення, контакти, хто й коли зателефонує
• Після оплати — номер замовлення й чіткий наступний крок
• Ви самі оформили тестове замовлення з телефона однією рукою

Головне

Чекаут — це місце, де сайт втрачає найдорожчих людей: тих, хто вже вирішив купити. Тут не потрібні креатив і вигадки, потрібне прибирання: гостьова покупка без реєстрації (акаунт — після, однією кнопкою), лише ті поля, які ви реально використовуєте, видимий прогрес замість невідомості, підказки замість ручного введення, помилки, які пояснюють і нічого не скидають, повна сума без сюрпризів у кінці, зручна форма на телефоні й короткі гарантії поруч із кнопкою оплати. Жоден із цих пунктів не вимагає окремого бюджету — вони вимагають рішення прибрати зайве. І майже завжди чекаут — найшвидша точка зростання, бо трафік у вас уже є: як він перетворюється на гроші, ми розбирали ширше в матеріалі про конверсію інтернет-магазину, а до чекауту людину доводить опис товару.

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