Кращі рішення юзабіліті інтернет-покупок: робимо клієнту приємно

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


У попередньому пості ми розглянули основні помилки при розробці сторінок покупки інтернет-магазинів, зараз же зосередимо увагу на вдалі знахідки і кращих практиках, які зазначали респонденти – учасники тестування, проведеного MasterCard і UsabilityLab.

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



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

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

  • спливаюче вікно з інформацією про те, що товар у кошику – для середньої і невеликої кількості товарів до покупки
  • автоматичним переходом на сторінку кошика – також для невеликої кількості позицій
  • зміною кнопки додавання товару або лічильником в картці товару – особливо актуально для великої кількості позицій (продукти, страви на замовлення).
Іншими словами – при додаванні товару обов'язково має бути зворотній зв'язок, що вказує на те, що товар успішно доданий. Етап додавання товару повинен містити мінімальну кількість необхідних кроків.
Також необхідно звести до мінімуму ймовірність повторного додавання товару. Наприклад, на сайті магазину Enter при натисканні на кнопку «У кошик» назва кнопки відразу змінюється, і кнопка стає неактивною після першого натискання. Ймовірність повторного додавання зведена до мінімуму.



На сайті магазину Ozon при додаванні товару в кошик назва кнопки змінюється на «У кошику», повторне натискання на кнопку переводить покупця в кошик.



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



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



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



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



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



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



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



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



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

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



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

Для додаткового спонукання до реєстрації коштує в чіткій і наочній формі розповісти про її переваги – хороший приклад сайт магазину Зв'язковий:



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



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



Подібна реалізація є і на сайті Wikimart. Реєстрація здійснюється після оформлення замовлення не виділена в окремий етап.



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



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

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

Коли варіанти оплати розбиті на групи, легше скласти уявлення про способи оплати і зробити вибір. Наприклад, на сайті магазину Enter варіанти розбиті на групи «при отриманні замовлення» і «прямо зараз». Таке рішення дозволяє приділити увагу саме тим методам, які необхідні, а не переглядати всі варіанти в довгому списку.



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



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

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



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



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



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



Сучасні інтернет-користувачі активно користуються віртуальними картами міста: сервіси пробок, навігатори, пошук організацій… Тому ще більш зручне рішення – перегляд місцезнаходження офлайнового магазину на карті. На сайті магазину Зв'язковий магазини представлені як на карті, так і списком. У письмовій формі також є поле для пошуку, яке може бути корисним, якщо пунктів самовивозу біля магазину багато. Додатково реалізована можливість сортування списку пунктів по необхідному користувачеві параметру.



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



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



Часто при виборі магазину поряд з його назвою є індикація того, коли саме можна забрати товар. На сайтах магазинів Ulmart і Зв'язковий поруч з назвою магазину у списку зазначена інформація про час, коли замовлення можна забрати.




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

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



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

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



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



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



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



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

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

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



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



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



На сторінці форми оплати повинні бути присутніми логотипи платіжних систем або піктограми сервісу 3DSecure (наприклад, MasterCard SecureCode).Не зайвим буде і збереження символу «замочок» в рядку адреси URL. Незважаючи на те, що більшість користувачів не розуміють технічного сенсу піктограм на сторінці оплати, такі піктограми є додатковим чинником, що підвищує суб'єктивне відчуття безпеки платежу.



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



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



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

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



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

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



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



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



Незайвим буде продумати форму з параметрами замовлення для друку.

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

У коментарях до першого посту в блозі MasterCard користувач seleko написав: «Мастеркард, зверніть увагу на відсоток магазинів взагалі дозволяють оплачувати покупки онлайн. Не впевнений, що зайвий клік настільки критичний, в порівнянні з неможливістю сплатити онлайн :)» Абсолютно вірно, як і раніше, залишається безліч магазинів, не приймають платежі за покупки онлайн, а дозволяють лише замовити обраний товар. Є й ті, хто використовує сайт тільки як вітрину, а весь процес покупки відводить або в торгові точки, або на замовлення по телефону. Однак сфера інтернет-торгівлі росте бурхливими темпами і з'являються нові і нові інтернет-магазини і сторінки покупок на сайтах. На етапі створення кожного з них важливо приділити особливу увагу юзабіліті всіх етапів покупки. Пам'ятайте про важливі правила при створенні прототипу і дизайну сторінок покупки на вашому сайті.



На основі якісної експертизи і передового досвіду буде простіше створити продає інтернет-магазин, а відповідно, − стати ближчими до своєї аудиторії. Що неодмінно позначиться на лояльності клієнтів, а в кінцевому підсумку – і на прибутку.

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

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

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

0 коментарів

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