Покупка в інтернет-магазині: робота над помилками

Процес покупки в інтернеті затягує — один раз спробувавши купити товари онлайн, покупці усвідомлюють усі переваги віддаленої покупки. Адже так здорово мати магазин завжди під рукою: замовити їжу, квитки, вибрати побутову техніку та багато іншого, перебуваючи в будь-якому місці і в будь-який час. Приємні відчуття від комфортної покупки в поєднанні з відпрацьованої маркетинговою активністю інтернет-магазину змушують клієнта повертатися знову і знову. Це підтверджує статистика: російський ринок онлайн-покупок за 2014 рік виріс на 35% — до 560 млрд рублів, а кількість покупців зросла на 37%, до 25,4 млн осіб. Всього в інтернеті росіяни здійснили 195 млн покупок та витратили на них на 41% більше, ніж у 2013 році, — 645 млрд рублів. Середній чек з урахуванням вартості доставки склав 3 300 рублів.

Однак часто процес купівлі викликає негативні емоції, пов'язані, наприклад, з недружнім інтерфейсом всього ланцюжка дій, неможливістю вибрати бажаний спосіб оплати, відсутністю спецпропозицій…



В ході спільного дослідження MasterCard і UsabilityLab, присвяченого юзабіліті процесу покупки в інтернет-магазинах, були виявлені основні помилки, допущені на кожному з етапів. Будь-яка така помилка — ризик втратити покупця або відвернути його увагу на сторонні сторінки і сервіси. Ціна помилки очевидна — втрата прибутку. Варто зазначити, що усвідомлення похибок в оформленні та вдосконалення сторінок відбувається досить швидко. Дослідження стартувало в кінці 2013 року — за цей період деякі платіжні системи внесли в свої сторінки значні зміни і поліпшили юзабіліті. Це можна побачити, порівнявши приклади з цього поста і переглянувши сучасні рішення, пропоновані користувачам на великих сайтах.

Розіб'ємо результати по етапах покупки і розглянемо, що ж було зроблено не так і які ризики викликали ті чи інші некоректні параметри.

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

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



Ще одна поширена помилка — неочевидна зміна статусу кнопки додавання товару в корзину після натискання. В ході дослідження респонденти відмітили, що при додаванні в кошик кнопка додавання практично не змінюється таким чином, завершеність дії покупця неочевидна. Так, на сайті Foodpanda зворотний зв'язок про те, що товар доданий в корзину представлена у верхній правій частині сторінки, що може бути непомітно для користувача, так як на самій картці товару найменування кнопки не змінюється і немає зворотного зв'язку про те, що товар доданий в корзину. Це призводить до того, що користувач клацає на кнопку повторно і додає кілька товарів у кошик, не помічаючи цього.



Багато покупців додають товар у кошик замість того, щоб відкладати, і потім, вже переглядаючи кошик і переглядаючи докладні характеристики товару, що приймають рішення про покупку. Багато інтернет-магазини не розглядають таку модель поведінки і поміщають в кошик товар зі скупим описом або без нього зовсім. Так, в магазині РивГош судити про те, чи вірно користувач вибрав товар, він може тільки за ціною — фотографія некликабельна, ні характеристик, ні короткого опису, ні посилання на опис в кошику немає. У разі, якщо покупець не запам'ятав ціну, йому доведеться повертатися назад в каталог та з'ясовувати, чи правильний товар він поклав у кошик.



Нерідко трапляється, що товар відсутній, але при цьому зберігається активним до замовлення в каталозі. У магазині М. Відео покупець дізнається про відсутність товару пізно — в кінці оформлення замовлення, а в РивГош — після авторизації і вибору способу доставки. В результаті такого запізнілого інформування користувач може дратуватися і бути нелояльним інтернет-магазину.



Кнопка продовження оформлення замовлення на деяких сайтах непомітна, або зливається з дизайну (формою, розміром, кольором та шрифтом) з іншими кнопками. Так, у Ситилинка кнопка не виділена взагалі, а у Buket.ru і РивГош кнопки з різними діями не відрізняються одна від одної, без читання тексту на кнопці неможливо визначити, яку дію відбудеться після натискання. Крім того, на сайті РивГош є дві схожі кнопки, за назвою яких незрозуміло, чи здійснюють вони однакові дії або різні. Між тим, кнопка продовження оформлення замовлення повинна бути читабельною, помітною і однозначною.







При виборі деяких типів споживчих товарів (косметика, одяг, взуття та ін) вкрай важлива можливість повернення в каталог товарів. У деяких інтернет-магазинів відсутня або малопомітна кнопка (або посилання) повернення в каталог для вибору товару. Наприклад, у Lamoda подібна посилання розміщена в неочевидною нижньому рядку меню.

Краще, якщо ще в кошику покупець дізнається про умови оплати і доставки. Тим не менш, у Enter на сторінці кошика немає інформації, що доставка покупки може бути платною. Також немаловажно з обережністю ставитися до застосування в кошику промокода або знижки. З одного боку, користувач, який знає промокод, повинен знати, де вводити інформацію. Але з іншого боку, користувач не знає про знижку і побачив поле вводу промокода, зафіксує увагу на бонусі і може відправитися в пошуках купона на інші сайти, а це вкрай небажане поведінка. Також важливо, де розташовано поле вводу знижки — покупець, знає про знижку, але не зустрів поле її введення на протязі всього процесу оформлення покупки, може припинити купівлю. У Buket.ru поле введення знижки знаходиться на останньому кроці оформлення замовлення, магазини Качкодзьоб і Lamoda воно досить непомітно, у Enter полі помітно і привертає увагу. Ще одна помилка — неочевидне назва поля введення купона. Наприклад, у Foodpanda поле називається Voucher, що розходиться з звичними назвами видів знижок. До речі, ні на одному з протестованих сайтів не була надана інформація про те, як отримати знижку чи бонус.





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

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





Авторизація — знати покупця в обличчя
Дані користувачів, отримані при реєстрації формують клієнтську базу інтернет-магазину — цільову аудиторію подальших маркетингових активностей, таких як розсилки, промо-акції тощо… Проте в гонитві за даними покупців магазини забувають про забезпечення зручності придбання: запитують малозначущі для покупки дані, збільшують кількість полів, не розповідають про переваги авторизації та ін…

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





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





В обмін на надання контактних даних багато магазини готові давати певні бонуси і переваги. Саме тому нерідко опції для незареєстрованих користувачів навмисне обмежені з метою простимулювати клієнта залишити свої контактні дані. Невипадково респонденти відзначали, що думають, що таким чином сайт магазину навмисно примушує їх до реєстрації. Найчастіше обмеження поширюється на різні форми передоплати (банківською картою, електронними грошима). Наприклад, на сайті магазину Holodilnik оплата банківською картою і через електронні гаманці неможлива без реєстрації. Респонденти відзначали незручність такого рішення і поверталися на попередні кроки для реєстрації. На сайті магазину Citilink також обмежені способи оплати для незареєстрованих користувачів, і на етапі вибору способу авторизації інформації про обмеження немає. Такі обмеження впливають на лояльність покупця до інтернет-магазину і тому небажані реалізації для карти покупки.



Ще одна ситуація, пов'язана авторизацією — відсутність реалізації деяких можливостей. У струмом випадку користувач може припустити, що такі можливості (наприклад, варіанти авторизації) відсутні або не зрозуміти, як ними скористатися. На сайті сервісу Ticketland є можливість входу через соціальні мережі та реєстрації за адресою електронної пошти. На сторінці, яка з'являється після додавання квитків у кошик, опції реєстрації через соціальні мережі не представлені.

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



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



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

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

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



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



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



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





Вибір способу оплати — доступні можливості
Сучасна інтернет-торгівля передбачає безліч варіантів оплати, серед яких користувач повинен вибрати для себе найбільш зручний. Однак на цьому етапі інтернет-магазини роблять помилки, які здатні привести користувача в замішання і відволікти від основного процесу здійснення покупки.

Помилки починаються з назви способу оплати, яка іноді буває неоднозначним. Наприклад, у списку способів оплати при оформленні передплати на видання «Ведомости» є пункт «кредитна карта». Респондент дослідження був не впевнений, що може здійснити оплату з дебетовою карткою, незважаючи на те, що словосполучення «кредитна картка» стало усталеним найменуванням будь-якої пластикової банківської картки.

Ще одна помилка в юзабіліті — відсутність структури списку можливих способів оплати (передоплата, при отриманні товару у кредит), наприклад, біля магазину Зв'язковий. Відсутність такого поділу кілька збільшує час покупки за рахунок пошуку і вибору способу оплати.



До не самим серйозним, але дуже неприємним помилок дизайну етапу оплати можна віднести відсутність візуальних підказок у вигляді піктограм і логотипів платіжних сервісів. Наприклад, у додатку Ozon у списку способів оплати немає візуальних підказок. Читаючи список зверху вниз, користувачі можуть не помітити, що для карт MasterCard і карт Ощадбанку діють особливі умови. Крім того, небажаний дрібний текст в описі доступних варіантів сервісів.



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



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



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

Зайві поля при заповненні форми — один із неприємних недоліків у формі вибору доставки. Наприклад, у Zara потрібно ввести індекс — у респондентів склалося відчуття, що замовлення буде висланий вам на пошту.

Ще один недолік — ні географічної прив'язки і адреси пунктів видачі товарів. Не на всіх сайтах була можливість пошуку пункту самовивозу на карті. А в додатку магазину Ozon, наприклад, можливі пункти представлені звичайним списком з однаковими назвами. Відмінності між ними не зрозумілі, покупцеві доводиться кілька разів натискати на іконку «Інформація», щоб дізнатися, де знаходиться той чи інший пункт.



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



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



На сайті магазину М. Відео повідомлення про те, що ціна замовлення змінилася, з'являється тільки після вибору способу доставки. Під час дослідження жоден респондент не поскаржився на раптову зміну ціни, так як зміни були пов'язані тільки з її зниженням з-за знижки. Проте всі респонденти зазначили, що не можуть зрозуміти, чому це відбулося, і чому їм надана знижка. Таким чином, зміна ціни в більшу або меншу сторону не залишається непоміченим покупцем і важливо вчасно і доступно інформувати його про це.



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



Майже всі респонденти почали вводити в це поле інформацію зі своєї банківської картки, при цьому не розуміючи, звідки можна отримати інформацію про по батькові платника, а також чому не виходить продовжити оплату без введених даних.

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



Ще одна помилка — відсутність можливості редагування замовлення. Так, на сайті магазину Citilink на сторінці підтвердження немає можливості змінити параметри замовлення. Єдиний спосіб це зробити – перейти по ссылке в навігаційній ланцюжку вгорі екрана, що може бути не очевидно для користувачів.



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



Це вкрай незручне поведінка сторінки сайту, так як користувач іде з етапу, безпосередньо близької до оплати. Будь-який догляд користувача на попередню сторінку або в інший пункт меню викликає ризик того, що покупка залишиться незавершеною.

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

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



Не всі картки, якими можна здійснювати оплати в інтернеті, містять 16 цифр у номері. Деякі процесингові сервіси починають приймати до оплати картки Maestro®, але при цьому формат вводу і запису номера картки залишається 16-тизначным, що може бентежити користувачів, так як номер на карті не відповідає формату в полях введення на сайті. Наприклад, у книжкового сервісу Літрес 16-символьне поле для введення зберігається незалежно від обраного типу карти.



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



Ще одна помилка запроектованих форм введення даних — роздільні поля для введення імені та прізвища користувача карти. Користувачі звикли до одного поля для заповнення імені, і, починаючи вводити його в форму, зазвичай вказують одночасно ім'я і прізвище. Також користувачі зазвичай читають тільки найменування поточного поля, не переглядаючи і не звертаючи уваги на наступні поля. Тому, коли користувачі стикаються з тим, що ім'я і прізвище представлені в різних полях введення, їм доводиться видаляти або копіювати прізвище з поля «Ім'я» і вводити її заново в іншому полі.



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



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



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



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

Парадоксально, що при цьому для здійснення платежу необхідно заповнення всього трьох полів: номер картки, термін її дії та захисного коду. Так, наприклад, на сторінці ChronoPay з 12 представлених на сторінці полів для оплати необхідні всього 3. Всі респонденти на цій сторінці відзначили надмірна кількість полів форми і її погану структуру.





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



На більшості платіжних сторінок все ж використовується найменування CVV/CVC. Інформація про те, де його шукати і як він виглядає, присутній тільки вигляді підказки до найменування поля, а в додатках Steam і Zara немає ніякої підказки про те, де знаходиться захисний код картки.



Підказки щодо заповнення зазвичай розташовані поряд з полем вводу. Це не найкраща реалізація, однак найневдаліший варіант оформлення підказки до полям форми — виноски в підвал сторінки. По-перше, вони створюють відчуття того, що деякі поля форми є обов'язковими для заповнення, так як знак «астеріск» (зірочка) є звичним індикатором обов'язкового для заповнення поля. По-друге, виноска викликає відчуття прихованих умов у користувачів.



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

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



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



З дрібних, але тим не менш, значних недоліків — відсутність звичних для користувача атрибутів платіжної сторінки. На ivi.ru немає значка безпечного з'єднання (застібки) — і респонденти це помітили.

На сайтах багатьох магазинів, особливо продають електронні товари, відсутня додаткова аутентифікація по СМС, при цьому ніякої інформації на сайтах магазинів про те, що вводити додатковий код не буде потрібно не представлено. При цьому досвідчені користувачі, які орієнтувалися на логотипи платіжних систем і мітки (MasterCard Secure Code, Verified by Visa) були спантеличені тим, що при оплаті не був запитаний одноразовий пароль. На сайті Літрес представлена інформація про сертифікати платіжних систем, проте запит одноразового пароля не відбувається, що здивувало респондентів.


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

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



Якщо зворотний зв'язок про помилки надана неконкретно, неоднозначно або відсутня, користувачеві може бути складно вирішити проблему. Наприклад, у додатках Steam і Аероекспрес запропоновано можливі дії (звернутися підтримку Steam і повторити платіж пізніше), але вони марні в конкретному тестовому випадку, так як на карті немає грошей.



Повідомлення про те, що оплата не пройшла, не описує причин виниклих проблем.

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



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

Користувачі, особливо без досвіду оплати в Інтернеті, можуть не відразу зрозуміти, що відбувається на сторінці, до тих пір, поки не побачать СМС-повідомлення від банку. Наприклад, на сторінці введення одноразового паролю одного з банків немає інформації про те, що на телефон буде відправлений пароль для підтвердження операції. Інструкція про те, де саме шукати «код активації» прихована за посиланням «Що це?». Недосвідчені користувачі витрачають додатковий час на пошук інформації про подальші дії і не завжди впевнені, що розуміють все вірно. Така напруженість покупця в процесі оплати не йде на користь інтернет-магазину — покупець може закрити незрозуміле вікно і відмовитися від покупки.

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

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



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

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



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



Всі магазини, протестовані під час дослідження, після оформлення замовлення відправляли лист з підтвердженням. Однак у багатьох листах не була вказана важлива для покупця інформація про одержання товару. Наприклад, у листі, який приходить на пошту після покупки на сайті магазину " Спортмастер, не зазначена інформація про одержувача, адресу доставки та спосіб оплати. Також лист не адаптовано до вибраного користувачем способу отримання товару. У ньому представлена інформація про те, що буде відбуватися при виборі самовивозу, хоча користувач вибрав доставку.



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



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

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

Подивитися дослідження (PDF, 15МБ, 203 сторінки)

Спасибі за увагу, продовження слід

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.