Як замовити піцу і не зламати собі мозок: практичні поради щодо поліпшення юзабіліті сайтів доставки їжі
15.04.2020
Стаття підготовлена на основі лекції керівника відділу CRO і юзабіліті Webpromo Влада Сіднева
Сьогодні ми охоче замовляємо піцу онлайн і хочемо, щоб цей процес був швидким і безболісним. Але чи розуміють це сервіси доставки їжі? Керівник відділу CRO і юзабіліті Webpromo Влад Сідней розібрався, на якому з українських сайтів доставки можна замовити піцу і при цьому не зламати собі мозок. А також дав практичні поради щодо поліпшення юзабіліті таких сайтів.
Зміст:
Заходячи на сайт доставки піци, користувач потрапляє в так званий тунель продажу, що складається зі сторінок, які він повинен пройти в процесі оформлення замовлення. Але цього може і не статися, якщо з якихось причин тунель виявиться «незручним».
Для того щоб зрозуміти, в чому може полягати ця незручність, давайте разом пройдемо по ньому з самого початку і до кінця, починаючи з посадкової сторінки і закінчуючи чекаутом. Як приклад візьмемо сайти сервісів доставки піци, які опинилися в топ пошукової видачі Google за запитом «доставка піци Київ». Це Dominos, Il Molino, Mamamia, Pizza King, «Папа Джон», Pizza33.
При цьому ми будемо тестувати зручність їх мобільних версій, так як за нашими і даними безлічі інших досліджень, частка мобільного трафіку в 3 рази перевищує частку трафіку з ПК.
Мало хто знає, але на комп’ютері в браузері Chrome можна емулювати перегляд сайту з мобільного пристрою. Це дозволяє набагато швидше протестувати ваш адаптивний дизайн і роботу ключових сторінок сайту на смартфоні.
Для цього відкриваємо сайт в Google Chrome, натискаємо F12 або вибираємо команду «Переглянути код» з меню під правою кнопкою мишки. У вікні з кодом натискаємо іконку переходу в режим перегляду мобільної версії, і тестуємо в 3-х найпоширеніших дозволах. У вікні перегляду коду вони умовно позначені як Iphone 5 / SE (ширина екрану 320px), Iphone 6/7/8 (ширина 375px) і Iphone 6/7/8 Plus (ширина 414px). Насправді ці дозволи притаманні і іншим брендам смартфонів.
Додамо, що наш аудит буде грунтуватися виключно на зручність ресурсу і поведінкових патернах користувачів без оглядки на впізнаваність бренду. Простіше кажучи, ми розберемося, чи здатний тільки сайт завоювати лояльність нового клієнта, який просто шукає, де замовити піцу.
Посадочна сторінка
Посадкова сторінка – це точка входу, куди потрапляє користувач з реклами або органічної видачі. У більшості випадків нею є головна сторінка, але може виявитися і внутрішня, якщо компанія також готує інші види страв, крім піци. У будь-якому випадку, посадкова сторінка повинна з першого екрану давати відповіді на ряд питань, важливих більшості нових відвідувачів:
- Туди я потрапив?
- Чи є тут те, що мені потрібно?
- Чи можу я довіряти тому, що бачу?
- Чому я повинен тут затриматися?
- Що я повинен зробити, щоб просунутися у своїй меті?
На всі ці питання повинен давати відповідь контент на першій сторінці мобільної версії. За це відповідає логотип, банер, фраза «доставка піци» і вказівку населеного пункту, де відбувається доставка, заголовок і підзаголовок з описом (якщо воно є). Всі елементи повинні візуально сприйматися користувачем, тобто бути читабельними, чіткими і відповідати законам композиції.
На деяких з обраних нами сайтів ці умови не виконані. Наприклад, на «Папа Джон» банер занадто маленький для того, щоб можна було прочитати напис. Це поширена помилка. Так відбувається, коли банери для десктоп-версії просто переносять в мобільну без будь-якої адаптації під маленькі екрани смартфонів. Правильно буде створювати 2 версії банерів – звичайні прямокутні, витягнуті по ширині для ПК і більш квадратні для смартфонів.
Рис. 1. Банер на посадкової сторінці мобільної версії сайту «Папа Джон».
У Pizza33 через низький контрасту на банерах нечитабельні написи. На Il Molino замість прописних використовували великі літери, що теж неправильно. Є чимало досліджень, які говорять про те, що текст, написаний великими, читається повільніше того ж тексту, написаного великими літерами.
До чого призводять перераховані помилки? Потрапляючи на сайт, люди переглядають його побіжно і тому не стануть вчитуватися в нечитабельним контент. В результаті не побачать інформації про акції і інших спеціальних пропозиціях. Це може бути однією з причин, чому ваші маркетингові програми погано працюють.
Логотип
Про нього слід сказати окремо. Практично на всіх сайтах з вибірки він розміщений неправильно. Так, Dominos замість лого залишили тільки брендовий символіку, сподіваючись на її впізнаваність. Однак було б набагато краще, якби користувач бачив логотип повністю (як в десктоп-версії) і таким чином розумів, що це саме той сайт, який йому потрібен.
Рис. 2. Брендовий символіка на посадочній станиці мобільної версії сайту Dominos.
На початку статті ми писали, що будемо розбирати тільки «роботу» сайту, не беручи до уваги впізнаваність бренду. Однак зазначимо, що в процесі проходження тунелю дуже важливо, щоб бренд запам’ятався, тому він повинен бути присутнім буквально на кожній сторінці сайту, окрім чекаута, але про це пізніше. В ідеалі, крім логотипу, на сторінках повинен бути і слоган компанії.
Наприклад, на сайті Mamamia слогана дуже не вистачає.
Телефони
У шапці сайту доставки піци повинні бути клікабельні номера телефонів, за якими можна оформити замовлення, а на самому сайті – встановлений динамічний коллтрекінг. Зрозуміло, що в деяких випадках наявність телефонів на першому екрані може розходитися з бізнес-цілями компанії. Однак якщо ми говоримо про реалії українського ринку доставки їжі, то клієнтам, як правило, зручніше робити замовлення по телефону. Тому краще, щоб вони були на сайті і їх можна було легко знайти.
Якщо ми подивимося на відібрані сайти, то майже на кожному з них цей функціонал реалізований по-своєму. Найоптимальніше рішення, на наш погляд, у Il Molino. Тут номера «заховані» під іконкою телефону в хедері. При натисканні на неї відкривається вікно з номерами і формою зворотного зв’язку. Тобто людина може або зателефонувати сам, або замовити дзвінок.
Рис. 3. Номери телефонів в мобільній версії сайту Il Molino.
А ось у Dominos ні на першому екрані, ні в меню телефонів немає. Є тільки один – він розташований в футере і виконаний в дуже непримітному стилі. Причому в ПК версії телефон присутній на першому екрані в лівому верхньому кутку.
Відзначимо, що важливо не тільки наявність телефонів, але і їх оформлення на сайті. Наприклад, краще, щоб користувач бачив і міг вибрати номер, за яким він буде дзвонити. А не розпочинав дзвонити відразу після натискання на відповідну іконку, як це зробили на «Папа Джон».
Pizza33 вирішили не приховувати телефони, а зафіксувати їх внизу екрану. Непогано, але так «з’їдається» вагома частина корисного простору на екрані користувача.
Рис. 4. Номери телефонів в футере мобільної версії сайту Pizza33.
Меню
Меню сайту в мобільній версії зазвичай реалізовують двома способами: у вигляді іконок, а також у вигляді гамбургер-меню. І тут, як ми помічаємо в своїй роботі, часто виникають помилки. Їх суть полягає в тому, що при використанні іконок користувач не розуміє призначення цих графічних елементів. Але це легко виправити: досить додати підписи, використовуючи читабельний розмір шрифту (12-14 px). Із завданням майже впоралася Pizza33, розмір шрифту слова «Меню» нижче комфортного для читання на 2-3 пікселя.
Рис. 5. Іконки меню в мобільній версії сайту Pizza33.
Гамбургер-меню
Крім іконок, якими прийнято позначати деякі розділи сайту, як то особистий кабінет, телефони і корзина, є гамбургер-меню, куди зазвичай «ховають» всі інші розділи. І ось його теж потрібно підписувати.
Як показує ряд досліджень, через цих «трьох паличок» знижується відсоток переходів на внутрішні сторінки. До сих пір не всі користувачі розуміють, що це таке без слова «меню», або ж просто не звертають увагу на нього. Проте, при наявності тільки однієї іконки – з цим елементом взаємодіють вкрай рідко.
Ні Dominos, ні Mamamia, ні Pizza King не підписали іконки гамбургер-меню. Але вони вирішили використовувати інший прийом і винести найважливіші розділи в розкрите меню другого рівня – це відмінне рішення, яке ми також регулярно використовуємо. У Dominos, наприклад, в такому розкритому меню дублюються всі розділи з гамбургер-меню у вигляді слайдера.
Рис. 6. Підменю-слайдер в мобільній версії сайту Dominos.
Pizza King вирішили додати дропдаун-меню під хедером. Його мінус – у візуальному оформленні. Не відразу зрозуміло, що це клікабельним елемент.
Рис. 7. Дропдаун-меню в мобільній версії сайту Pizza King.
Крім того, важливі розділи меню можна продублювати і в футере. У мобільній версії він має додаткову функціональність. Згідно з нашим дослідженням, користувачі часто користуються футером як додаткової навігацією. На тих сайтах, де ми це робили, відсоток переходів на внутрішні сторінки завжди збільшувався.
Чому так відбувається? У десктоп-версії сайту в хедері видно всі розділи, які в деяких випадках ще й фіксовані у верхній частині екрану. А ось на телефоні все приховано в гамбургер-меню, яке так непомітно. Це призводить до того, що користувачі шукають відповідь по всій сторінці і починають її активно скролить майже до кінця. Це підтверджується завжди високим середнім відсотком скролінгу.
Тому популярні розділи краще винести в розкрите меню другого рівня і продублювати в підвалі. Наприклад, як зробили в Dominos. Це дуже хороше рішення.
Разміщення іконок
Друге, на що варто звернути увагу при використанні іконок для позначення розділів меню, – це їх фактичне розташування на екрані. Якщо вони будуть знаходитися дуже близько один до одного, це призведе до великої кількості помилкових кліків по ним. При вивченні карти кліків сайту ми бачимо, що користувачі часто ненавмисно «промахуються», натискаючи на сусідні іконки.
Наприклад, у Il Molino іконки розташовані дуже близько, і людині з великими пальцями або маленьким екраном буде важко перейти на потрібний розділ з першого кліка.
Рис. 8. Іконки меню в мобільній версії сайту Il Molino.
Крім того, важливо перевіряти відображення елементів сайту для всіх дозволів екрану. Трапляється, що інтерфейс мобільної версії тестують тільки під найбільше дозвіл, забуваючи про те, що при 320px окремі елементи можуть перекривати один одного.
Швидкі фільтри
Зверніть увагу, ні на одному з сайтів доставки піци немає рядка пошуку. Це, скажімо так, особливість цієї ніші. Замість неї часто роблять фільтри і сортування, які групують піци по начинкам і допомагають користувачеві швидше знайти ту, яка припаде йому до смаку. Вони також звужують кількість позицій, з яких потрібно щось вибрати. Це рішення відмінно відповідає одному з двох фундаментальних законів юзабіліті – закону Хіка. Два ключових слідства даного закону полягають в тому, що людям складно утримувати в короткочасної пам’яті відразу багато елементів, і що, чим менше елементів в меню, тим менше часу займає вибір одного з них. А як ми пам’ятаємо, користувач зайшов на сайт, щоб замовити піцу швидко. Поетмоу фільтри дійсно спрощують відвідувачеві вибір і прискорюють час досягнення фінальної мети.
Також через те, що людям важче вибрати з великої кількості варіантів піц, вони схильні відкладати вибір або ж зовсім ніяк не визначиться, залишають сайт йдучи на сайт конкурентів. Для спрощення процесу вибору, до фільтрів можна додати «Хіти продажу» з найпопулярнішими товарними позиціями. Людям простіше спиратися на соціальні докази і вибирати ті товари, які вибирає більшість.
Але чому тоді не на всіх сайтах з нашої вибірки передбачені фільтри? Так, їх немає на Il Molino і Pizza King. Можливо, компанії навіть не підозрюють, що такі, на перший погляд, дрібниці призводять до заниженим коефіцієнтом конверсії і втрати частини продажів.
Фотографії
Фотографії – це без перебільшення основний продає елемент інтерфейсу. Щоб викликати у користувача бажання замовити піцу, вони повинні бути яскравими і апетитними, як би закликаючи користувача сайту «з’їсти шматочок».
Дуже важливо, щоб фотографії:
- викликали апетит;
- були витримані в єдиному стилі;
- мало важили в кілобайтах;
- мали високий дозвіл з подвійною щільністю пікселів;
- займали максимум місця по ширині екрану телефону
- на 90% або більше містили саме піцу, а не зайві елементи композиції (наприклад, стіл, дошку, тарілку, розкладені навколо овочі і т.п.).
Всі ці вимоги враховані на сайті Dominos. Подивіться, як апетитно на фотографіях «подана» піца: її шматочок відрізаний і повернуть до користувача так, що його як би можна взяти рукою. Єдине, що і для десктоп, і для всіх дозволів мобільної версії завантажили однакові за розміром фотографії. Швидше за все, це зроблено для створення більш соковитою фото при перегляді на екранах телефонів з шириною 414 px. Однак це в підсумку збільшило вагу сайту для всіх інших пристроїв з меншою діагоналлю, а також на ПК, де в домінуючому більшості випадків біля екранів одинарна щільність пікселів (виключення складають тільки Retina екрани).
Рис. 10. Фотографія піци в мобільній версії сайту Dominos.
Щоб сайт у користувача при завантаженні не підвисає, краще використовувати Lazy loading, а також оптимізувати розмір зображень без втрати їх якості за допомогою спеціалізованих сервісів.
Інші сайти додали менш привабливі і «смачні» фотографії. Наприклад, на Mamamia теж вирішили використовувати відрізаний шматочок піци, але розгорнули його від користувача так, що його некомфортно було б взяти правою рукою, будь він також розташований в реальності. Психологічно це сприймається як «незручність» і не відбувається емоційної «синхронізації» відвідувача зі смачною і апетитною піцою.
Рис. 11. Фотографія піци в мобільній версії сайту Mamamia.
У Pizza33 на всіх фото стандартний декор, яскраві елементи якого частково перетягують увагу на себе. До того ж це тягне за собою нецільове використання корисного простору зображень. Без цього піци на картинках могли бути більше і чіткіше.
Рис. 12. Фотографія піци в мобільній версії сайту Pizza33.
Наша порада: за хорошими продають фотографіями слід звернутися до професійного фуд-фотографу, який розбирається в законах композиції та створення потрібної атмосфери на зображеннях з їжею. Але обов’язково врахуйте всі поради і рекомендації до фотографій, які ми згадували вище.
CTA-кнопки
Також важливо, щоб на сайті був графічний баланс, а кнопки із закликом до дії були найпомітнішими і зручними. На Dominos це добре реалізовано, а на Mamamia гірше, тому що для економії місця розробники замість кнопок додали дропдаун-меню. А це не дуже зручно в мобільній версії. На інших сайтах з CTA-кнопками ще гірше, починаючи з того, що вони перекривають один одного, виконані не як кнопки (Pizza33) або непомітні через те, що немає контрастних підкладок (Il Molino).
Кошик
Якщо користувач зайшов на сайт і вибрав піцу, він може додати її в кошик. Зазвичай відповідну іконку розміщують в хедері. Але наприклад, на Dominos вона з’являється і фіксується на сторінці зліва внизу відразу, як користувач додасть хоча б одну товарну позицію, натиснувши на CTA-кнопку «В кошик». Для постійних клієнтів це добре, для нових – не зовсім, так як це не відповідає звичному для користувача досвіду.
Рис. 13. Кошик в мобільній версії сайту Dominos.
На сайті Il Molino ми бачимо ще одне цікаве рішення. Замість «кошика» користувач додає піци в «коробку». Ця ікона анімована і змінюється в залежності від того, є там піца чи ні. Але для деяких користувачів це може виявитися не стільки креативним, скільки незрозумілим і заплутаним рішенням, тому що йде врозріз з усталеним патерном.
Рис. 14. Кошик в мобільній версії сайту Il Molino.
На Pizza33 в кошику багато графічного «сміття». Він може відволікати від оформлення замовлення.
Чекаут
Отже, ми плавно перейшли до чекауту, тобто процесу оформлення замовлення. Як показує статистика, саме в цей момент користувач нерідко відмовляється здійснювати покупку. Є багато причин, чому це може статися, але в основному – через велику кількість «подразників» на сторінці.
Під час оформлення замовлення користувач і без того відчуває певний стрес: йому потрібно правильно ввести особисті дані, перевірити, замовляє він саме ту піцу, яку хотів, визначитися зі способом доставки. І все це він робить ні з ПК, а зі смартфона. І замість того, щоб полегшити цей процес, компанії часто грішать тим, що намагаються отримати від користувача максимум корисної для них інформації і відразу ж «умовити» його стати постійним клієнтам.
Наприклад, «Папа Джон» в чекауте пропонує встановити свій додаток, а додавання товару в корзину можливо тільки після того, як користувач вкаже адресу доставки, що взагалі ламає логіку оформлення замовлення і навряд чи сприятиме лояльності до бренду.
Рис. 15. Оформлення замовлення в мобільній версії сайту «Папа Джон».
Насправді чекаут повинен бути максимально простим і інтуїтивно зрозумілим користувачеві. В ідеалі в ньому має бути всього пару обов’язковий для заповнення полів, як то ім’я і телефон. Ще краще, якщо форма для оформлення замовлення буде інтегрована з формою для авторизації.
Мінус чекаута Dominos в тому, що є дуже багато обов’язкових для заповнення полів. І якщо спробувати відправити замовлення пропустивши якесь із обов’язкових полів – не відбувається автоматичного переходу на пропущене поле. Його доводиться шукати самостійно. Тоді як у Mamamia все дуже легко, доступно і просто: вводиш телефон і оформляти замовлення. Також відразу можна вказати точні дату і час доставки.
Коли користувач ввів потрібні дані і вибрав оплатити замовлення банківською картою, що не виводьте його на сторонній ресурс. Краще зробити фрейм і вмонтувати форму Liqpay прямо на сайт.
Авторизація
Авторизація – ще один важливий момент. Чим вона простіше, тим краще. На Mamamia вона відбувається за номером телефону, а на Dominos потрібно вводити потрібно логін і пароль. Це дуже складно. Краще обійтися тільки телефоном. Також при авторизації потрібно додати опцію «Запам’ятати мене».
Висновки
Сайт доставки піци повинен викликати емоційне бажання оформити замовлення. Найголовніше – це соковита апетитна фотографія.
Також важлива для прийняття рішення інформація (опис і кнопка замовлення) повинна бути добре помітна, а іконка кошика – закріплена в хедері, де її можна легко знайти.
Чекаут повинен бути максимально лаконічним, без зайвих даних і полів. Також робіть зрозумілою інформацію, як авторизуватися і потрапити в особистий кабінет.
Підсумовуючи, скажемо, що найзручніший з точки зору юзабіліті сайт Dominos. Також цікавим і зручним сайтом можна вважати і сайт Mamamia. У Pizza King і Il Molino багато хороших рішень, але є проблеми, які знижують зручність при використанні сайту. У Pizza33 і «Папа Джон» є критичні проблеми в інтерфейсі, які слід обов’язково виправити.
