Як оптимізувати процес оформлення замовлення на вашому сайті
Процес оформлення замовлення — найважливіша складова досвіду користувача, оскільки саме на цій стадії відбувається грошова транзакція.
відвідувачі, Що Випадково зайшли на сайт, навіть не почнуть оформляти замовлення, в той час як зацікавлені покупці напевно закінчать його. Оптимізація цієї стадії має безпосередній вплив на ваш дохід, навіть найменші зміни на сторінці оплати можуть принести великий прибуток.
Розглянемо, як люди проходять через процес оформлення замовлення та які фактори впливають на його успішне завершення.
Модель поведінки Фогга
Суть моделі можна висловити так: "Поведінка = Мотивація х Складність х Тригер".
На ілюстрації можна побачити, що чим складніша дія чи нижча мотивація. тим не менш можливе вчинення необхідної вам дії, і навпаки:

Ваше завдання - виявитися якомога ближче до верхньої правої частини графіка (висока мотивація, легка складність, тригер, що спрацьовує). Якщо мотивація покупця буде висока, а здатність до дії низька (висока складність), він відчуватиме роздратування. Інакше — нудьгу.
Підхід Amazon
Листи з акціями від Amazon одночасно і піднімають мотивацію, і створюють тригер. Переходячи за посиланням у повідомленні, користувачі потрапляють на продуктову сторінку, вивчають інформацію, розглядають зображення, читають відгуки, тим самим підвищуючи мотивацію. Кнопка "додати в кошик" є тригером для початку процесу оформлення замовлення.
Що щодо складності? І тут Amazon б'є «у десятку»: покупцеві достатньо ввести пароль і зробити пару кліків:

Процес покупки в мобільному додатку Amazon: клік за посиланням в email,додати до кошика, логін, «Оформити замовлення», Оплата
Все дуже просто.
Товар у кошику — що далі?
Що має відбуватися, коли люди додають товар у кошик? Відповідь очевидна — підтвердження додавання. Однак на багатьох сайтах ця інформація або не відображається, або показана надто малим текстом, щоб його помітити.
Існує 2 основних підходи:
1. Показати підтвердження про додавання до кошика та залишитися на тій самій сторінці. Плюси: людина не просила переміщати її на іншу сторінку, тому процес залишається в рамках її очікувань. Можливо, клієнт хоче додати ще кілька товарів у кошик перед оформленням замовлення. Мінуси: перед очима клієнта у кошику знаходиться продукт, який він і хотів купити. Було б корисніше, якби перед ним опинилися інші речі, які він міг би побажати придбати.
2. Перевести користувача на сторінку кошика. Перевага цього підходу в тому, що людина стає на один крок ближче до здійснення покупки. Тут можна також зробити додаткові пропозиції. Недолік цього в тому, що, можливо, людина купить не так багато товарів, як міг би.
На сайті Bonprix ви нізащо не пропустіть кнопку «Додати в кошик». Ось їхня продуктова сторінка:

А ось, що ви побачите після натискання «Додати до кошика»:

Спливне вікно наочно повідомляє користувачеві, що товар доданий до кошика, і пропонує вибір - продовжити покупки або розпочати оформлення замовлення. Крім того, у піктограмі кошика у верхньому правому куті сторінки з'являється індикатор. Це хороший метод, оскільки щоб закрити поп-ап, покупцеві потрібно вжити, і не помітити зміни неможливо.
Чітке відображення вмісту корзини
Головні вимогидо дизайну вмісту кошика – ясність та контроль. Ясність передбачає, що користувач повинен мати можливість легко зрозуміти, що знаходиться в кошику, і якою є фінальна ціна, включаючи податки та доставку. Контроль означає, що у кошику легко можна зробити будь-які зміни (наприклад, видалити товар або змінити його параметри).
Головний елемент візуальної ієрархії кошика – кнопка «Оформити замовлення». У вас має бути їх дві: одна нагорі кошика та інша внизу, під списком товарів. Яскравий приклад такого розташування:

Дизайн кошика Bonprix відповідає загальній стилістиці сайту, наприклад, кнопка «Оформити замовлення» вирізняється тим же яскраво-червоним кольором, що й «Додати до кошика».
Що зроблено правильно:
1. Фотографія товару 2. Назва товару та ціна 3. Можливість видалити продукт, зберегти на майбутнє, змінити його деталі (на зразок розміру) 4. Чіткий заклик до дії.
Що можна було б додати:
1. Можливість змінити кількість 2. Демонстрація доступних типів оплати 3. Можливість вибрати тип доставки до початку оформлення
Перетворення хоча б одного елемента в процесі оформлення замовлення може призвести до більших покращень. Потрібно підштовхувати відвідувачів вашого сайту до покупки на кожному кроці.
Не робіть поля для введення купонів знижок занадто помітними
Коли люди бачать яскраве поле «Введіть код акції тут», вони думають: «Які акції?» та вирушають на пошуки знижки. В результаті, багато хто з них ніколи не повертається. Це досить поширена причина відмови від покупки.
Достатньо написати: «У вас є купон?» або щось схоже, як на скріншоті вище. Текстові посилання не повинні бути надто помітними — менше людей зверне на них увагу. Клієнти, уяких вже є код, самі знайдуть потрібне поле, якщо ви не сховаєте його занадто добре.
Нагадуйте про плюси вашого магазину: доставка, повернення та безпека
Коли буде доставлено товар? Чи безкоштовна доставка? Чи надійна транзакція? Нагадуйте про ці речі людям.
Asos демонструє ці три ключові повідомлення під кнопкою «Оформити замовлення»:

Зберігайте товари з кошика на майбутнє
Безліч сайтів, що продають, просять користувачів зареєструватися ще перед покупкою. Деякі навіть змушують їх робити це, не дозволяючи додати товар у кошик, що значно зменшує конверсію.
За статистикою 1 із 4 відмов від купівлі відбуваються через вимушену реєстрацію. Це симптом «синдрому жадібного маркетолога». Легко зрозуміти, чому маркетологи роблять це — вони думають, що користувачі після реєстрації «піймані», і тепер їм доведеться здійснити покупку в магазині.
Ось одна дуже хороша історія про вимушену реєстрацію, розказана гуру юзабіліті Джередом Спулом (Jared Spool):
Загвоздка була не так у самому вигляді форми, як у її розташуванні. Користувачі стикалися з нею після того, як вони наповнювали свій кошик товарами та приступали до оформлення замовлення. Це відбувалося ще до того, як вони вводили необхідну інформацію для покупки.
Дизайнери сайту вирішили, що форма дозволить користувачам купувати товари швидше. Вони думали, що клієнти, які вперше зайшли на сайт, не відмовляться від реєстрації, адже вони обов'язково повернуться і оцінять доцільність реєстрації. Виграють усі, чи не так?
Ми провели тести юзабіліті з людьми, яким потрібно було купити щось на сайті. Ми попросили їх скласти готовий список потрібних речей і дали їм гроші. Їмпотрібно було лише завершити покупку.
Ми помилилися щодо наших перших покупців. Вони не хотіли реєструватись. Вони обурювалися, коли їм доводилося це робити. Як сказав один покупець, «Я тут не для того, щоб вступати з магазином у відносини. Я лише хочу купити дещо».
Відмовою від обов'язкової реєстрації магазину вдалося збільшити продаж на $300 000 000 на рік.
Які альтернативи?
Слід завжди пропонувати гостьовий вхід.
Ось 2 ефективні підходи:
1. Навіть не згадувати слово "реєстрація". Використовуйте поєднання "новий клієнт" або схожу термінологію.
Отже, поганий варіант:
Будь-який тип вимушеної реєстрації, де користувач не може робити покупки без неї.
Краще, але все ще погано:

Хороший варіант №1:
Надати вибір між новими та клієнтами, що повернулися:

Asos не завжди використовували цей підхід. Ось їх стара сторінка входу з трьома варіантами:

Перехід від цього варіанта до цього зменшив кількість відмов від покупки на 50%!
Коли ви натискаєте на «Новий користувач», що відбувається? Ви переходите на цей екран:

Так, це вимушена реєстрація, але виглядає вона зовсім інакше! Єдина проблема юзабіліті тут – поле пароля. Адже решта – це стандартна інформація для оформлення замовлення.
Хороший варіант №2:
Відмова від покупки при оформленні замовлення є серйозною проблемою. Сайт Bonobos наперед запитує ваш email, завдяки чому він може легко розпочати процес відновлення процесу замовлення. До того ж, тут лише 2 варіанти – ніякого навантаження.


Хороший варіант №3:
Хороший варіант №4:

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

2. Форма оплати, яка виглядає як кредитна картка
Хороший дизайн форми оплати може приємно урізноманітнити процес у візуальному плані:

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

Елементи, що вселяють довіру:
1. Відмінний фон. 2. Логотип SSL. 3. Напис про захист грошового переказу нагорі. 4. Роз'яснення для захисного коду та дати закінчення терміну дії картки.
Не варто забувати, що якщо ваша аудиторія не надто підкована технічно, люди можуть не знати, що таке SSL та HTTPS, тому краще пояснювати речі простою мовою.
4. Зберігайте дані кредитних карток у вашій системі
Звичайно, завжди є ризик злому, проте ви значно спростите оформлення замовлення. Коли людям не потрібно повторно вводити платіжну інформацію, процес придбання зводиться до одного кліку.