Главная » Блог » Как заказать пиццу и не сломать себе мозг: практические советы по улучшению юзабилити сайтов доставки еды

Как заказать пиццу и не сломать себе мозг: практические советы по улучшению юзабилити сайтов доставки еды

15.04.2020


По своей воле или не совсем, но мир стремительно диджитализируется. Теперь человек, плавно превратившийся в пользователя, ищет любую нужную ему услугу или товар в интернете. Понимая это, компании также стремятся перейти в онлайн (кстати, как это сделать за три дня, можно узнать здесь).

Например, сегодня мы охотно заказываем через сайт пиццу с доставкой на дом и, конечно, хотим, чтобы этот процесс был быстрым и неутомительным. Но понимают ли это сайты доставки еды? Руководитель отдела CRO и юзабилити Webpromo Влад Сиднев разобрался, на каком из них можно заказать пиццу и при этом не сломать себе мозг. А также дал практические советы по улучшению юзабилити таких сайтов.

Содержание:

Посадочная страница

Телефоны

Меню

Фотографии

Корзина

Выводы

Заходя на сайт доставки пиццы, пользователь попадает в т. нз. тоннель продажи, состоящий из страниц, которые он должен пройти в процессе оформления заказа. Но этого может и не произойти, если по каким-то причинам тоннель окажется «неудобным».

Для того чтобы понять, в чем может заключаться это неудобство, давайте вместе пройдем по нему с самого начала и до конца, начиная с посадочной страницы и заканчивая чекаутом. В качестве примера возьмем сайты сервисов доставки пиццы, которые оказались в топ поисковой выдачи Google по запросу «доставка пиццы Киев». Это DominosIl MolinoMamamiaPizza King«Папа Джон»Pizza33.

При этом мы будем тестировать удобство их мобильных версий, так как по нашим и данным множества других исследований, доля мобильного трафика в 3 раза превышает долю трафика с ПК.

Для этого открываем сайт, нажимаем F12 или выбираем команду «Просмотреть код» из меню под правой кнопкой мышки. В окне с кодом нажимаем иконку перехода в режим просмотра мобильной версии и тестируем в 3-х самых распространенных разрешениях. В окне просмотра кода они условно обозначены как Iphone 5/SE (ширина экрана 320px), Iphone 6/7/8 (ширина 375px) и Iphone 6/7/8 Plus (ширина 414px). На самом деле эти разрешения присущи и другим брендам смартфонов.

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

Посадочная страница

Посадочная страница – это самое главное для сайта доставки еды. Это точка входа, куда попадает пользователь с рекламы или органической выдачи. В большинстве случаев ею является главная страница, но может оказаться и внутренняя, если компания также готовит другие виды блюд. В любом случае посадочная страница сразу должна давать ответы на ряд пользовательских вопросов. Это:

  • Туда ли я попал?
  • Есть ли здесь то, что мне нужно?
  • Почему я должен здесь задержаться?

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

На некоторых из выбранных нами сайтов эти условия не выполнены. Например, на «Папа Джон» баннер слишком маленький для того, чтобы можно было прочитать надпись. Это распространенная ошибка. Так происходит, когда баннеры для десктоп-версии просто переносят в мобильную. Правильно будет создавать отдельные.

Рис. 1. Баннер на посадочной странице мобильной версии сайта «Папа Джон».

Рис. 1. Баннер на посадочной странице мобильной версии сайта «Папа Джон».

У Pizza33 из-за низкого контраста на баннерах нечитабельные надписи. На Il Molino вместо прописных использовали заглавные буквы, что тоже неправильно. Есть немало исследований, которые говорят о том, что текст, написанный заглавными, читается медленнее того же текста, написанного прописными буквами.

К чему приводят перечисленные ошибки? Попадая на сайт, люди просматривают его бегло и поэтому не станут вчитываться в нечитабельный контент. В итоге не увидят информации об акциях и прочих специальных предложениях. Это может быть одной из причин, почему ваши маркетинговые программы плохо работают.

Логотип

О нем следует сказать отдельно. Практически на всех сайтах из выборки он размещен неправильно. Так, Dominos вместо лого оставили только брендовую символику, надеясь на ее узнаваемость. Однако было бы намного лучше, если бы пользователь видел логотип полностью (как в десктоп-версии) и таким образом понимал, что это именно тот сайт, который ему нужен.

Рис. 2. Брендовая символика на посадочной станице мобильной версии сайта Dominos.

Рис. 2. Брендовая символика на посадочной станице мобильной версии сайта Dominos.

В начале статьи мы писали, что будем разбирать только «работу» сайта, не принимая во внимание узнаваемость бренда. Однако отметим, что в процессе прохождения тоннеля очень важно, чтобы бренд запомнился, поэтому он должен присутствовать буквально на каждой странице сайта, кроме чекаута, но об этом позже. В идеале, кроме логотипа, на страницах должен быть и слоган компании.

Например, на сайте Mamamia слогана очень не хватает.

Телефоны

В шапке сайта доставки пиццы должны быть кликабельные номера телефонов, по которым можно оформить заказ, а на самом сайте – установлен динамический коллтрекинг. Понятно, что в некоторых случаях это может расходиться с бизнес-целями компании. Однако если мы говорим о реалиях украинского рынка доставки еды, то клиентам, как правило, удобнее делать заказ по телефону. Поэтому лучше, чтобы они были на сайте и их можно было легко найти.

Если мы посмотрим на отобранные сайты, то почти на каждом из них этот функционал реализован по-своему. Самое оптимальное решение, на наш взгляд, у Il Molino. Здесь номера «спрятаны» под иконкой телефона в хедере. При нажатии на нее открывается окно с номерами и формой обратной связи. То есть человек может либо позвонить сам, либо заказать звонок.

Рис. 3. Номера телефонов в мобильной версии сайта Il Molino.

Рис. 3. Номера телефонов в мобильной версии сайта Il Molino.

А вот у Dominos телефонов вообще нет. Есть только один в футере, по которому можно оставить отзыв.

Отметим, что важно не только наличие телефонов, но и их оформление на сайте. Например, лучше, чтобы пользователь видел и мог выбрать номер, по которому он будет звонить. А не начинал звонить сразу после нажатия на соответствующую иконку, как это сделали на «Папа Джон».

Pizza33 решили не скрывать телефоны, а зафиксировать их внизу экрана. Неплохо, но так «съедается» часть полезного пространства.

Рис. 4. Номера телефонов в футере мобильной версии сайта Pizza33.

Рис. 4. Номера телефонов в футере мобильной версии сайта Pizza33.

Меню

Меню сайта в мобильной версии обычно реализовывают двумя способами: в виде иконок, а также в виде гамбургер-меню. И тут, как мы замечаем в своей работе, часто возникают ошибки. Их суть заключается в том, что пользователь не понимает назначения этих графических элементов. Но это легко исправить: достаточно добавить подписи, используя читабельный размер шрифта (12-13px). С задачей почти справилась Pizza33, однако шрифт все еще мелкий.

Рис. 5. Иконки меню в мобильной версии сайта  Pizza33.

Рис. 5. Иконки меню в мобильной версии сайта  Pizza33.

Гамбургер-меню

Кроме иконок, которыми принято обозначать некоторые разделы сайта, как то личный кабинет, телефоны и корзина, есть гамбургер-меню, куда обычно «прячут» все остальные разделы. И вот его тоже нужно подписывать.

Как показывает ряд исследований, из-за этих «трех палочек» снижается процент переходов на внутренние страницы. До сих пор не все пользователи понимают, что это такое без слова «меню».

Ни Dominos, ни Mamamia, ни Pizza King не подписали иконки гамбургер-меню. Но они решили использовать другой прием и вынести самые важные разделы в меню второго уровня. У Dominos, например, в нем дублируются все разделы из гамбургер-меню в виде слайдера.

Рис. 6. Подменю-слайдер в мобильной версии сайта Dominos.

Рис. 6. Подменю-слайдер в мобильной версии сайта Dominos.

Pizza King решили добавить дропдаун-меню под хедером. Его минус – в визуальном оформлении. Не сразу понятно, что это кликабельный элемент.

Рис. 7. Дропдаун-меню в мобильной версии сайта Pizza King.

Рис. 7. Дропдаун-меню в мобильной версии сайта Pizza King.

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

Почему так происходит? В десктоп-версии сайта в хедере видно все разделы, которые еще и фиксированы. А вот на телефоне все скрыто в гамбургер-меню, которое так незаметно. Процент скроллинга на мобильной версии всегда большой, до 100%, поэтому популярные разделы лучше вынести в подменю и продублировать в подвале. Например, как сделали в Dominos. Это хорошее решение.

Расположение иконок

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

Рис. 8. Иконки меню в мобильной версии сайта Il Molino.

Рис. 8. Иконки меню в мобильной версии сайта Il Molino.

Кроме того, важно проверять отображение элементов сайта для всех разрешений экрана. Случается, что интерфейс мобильной версии тестируют только под самое большое разрешение, забывая о том, что при 320px отдельные элементы могут перекрывать друг друга.

Состояние элементов меню

Active-состояние всех элементов меню должно меняться в зависимости от того, в каком разделе находится пользователь. Этот прием используют не для «красоты», а для навигации по сайту. Для мобильной версии это крайне важно, так как в ней, в отличие от десктоп, некоторые визуальные маркеры либо нельзя использовать (hover-эффект), либо они будут перегружать интерфейс (хлебные крошки). Как мы видим, у Mamamia с последним получилось не очень хорошо. Однако у раздела есть едва заметное active-состояние.

Рис. 9. Хлебные крошки и active-состояние раздела в мобильной версии сайта Mamamia.

Рис. 9. Хлебные крошки и active-состояние раздела в мобильной версии сайта Mamamia.

У Dominos та же история: active-состояние раздела невыразительное. У Pizza King как active-состояние, так и хлебные крошки визуально реализованы лучше.

Быстрые фильтры

Обратите внимание, ни на одном из сайтов доставки пиццы нет строки поиска. Это, скажем так, особенность данной ниши. Вместо нее часто делают фильтры и сортировки, которые группируют пиццы по начинкам и помогают пользователю быстрее найти ту, которая придется ему по вкусу. Они также сужают количество позиций, из которых нужно что-то выбрать. Это решение обусловлено сразу двумя законами юзабилити: имени Миллера и Хика. Первый гласит, что людям сложно удерживать в кратковременной памяти сразу много элементов, второй – что чем меньше элементов в меню, тем меньше времени занимает выбор одного из них. А как мы помним, пользователь зашел на сайт, чтобы заказать пиццу быстро. Фильтры действительно влияют на скорость принятия решения.

Также из-за того, что людям труднее выбрать из большого количества, они склонны откладывать выбор на потом. К фильтрам можно добавить «Хиты продаж» с самыми популярными товарными позициями. Для чего это нужно? Пользователю проще опираться на социальные доказательства и выбирать те товары, которые выбирает большинство.

Но почему тогда не на всех сайтах из нашей выборки предусмотрены фильтры? Так, их нет на Il Molino и Pizza King.

Фотографии

Фотографии – это без преувеличения основной продающий элемент интерфейса. Чтобы вызвать у пользователя желание заказать пиццу, они должны быть яркими и аппетитными, как бы призывая «съесть кусочек».

Очень важно, чтобы фотографии:

  • вызывали аппетит;
  • выдержаны в едином стиле;
  • немного весили;
  • имели высокое разрешение с двойной плотностью пикселей;
  • заполненность как фотографии продуктом, так и экрана фотографией была максимальной.

Все эти требования учтены на сайте Dominos. Посмотрите, как аппетитно на фотографиях «подана» пицца: ее кусочек отрезан и повернут к пользователю так, что его как бы можно взять рукой. Единственное, что и для десктоп, и для всех разрешений мобильной версии загрузили одинаковые по размеру фотографии. Скорее всего, для наилучшего просмотра на экранах с шириной 414px. Однако это в итоге увеличило вес самого сайта.

Рис. 10. Фотография пиццы в мобильной версии сайта Dominos.

Рис. 10. Фотография пиццы в мобильной версии сайта Dominos.

Чтобы сайт у пользователя при загрузке не подвисал, лучше использовать Lazy loading, а также оптимизировать размер изображений без потери их качества с помощью специализированных сервисов (напр., squoosh.app).

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

Рис. 11. Фотография пиццы в мобильной версии сайта Mamamia.

Рис. 11. Фотография пиццы в мобильной версии сайта Mamamia.

У Pizza33 на всех фото стандартный декор, яркие элементы которого частично перетягивают внимание на себя. К тому же это влечет за собой нецелевое использование полезного пространства изображений. Без этого пиццы на картинках могли быть больше и четче.

Рис. 12. Фотография пиццы в мобильной версии сайта Pizza33.

Рис. 12. Фотография пиццы в мобильной версии сайта Pizza33.

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

CTA-кнопки

Также важно, чтоб на сайте был графический баланс, а кнопки с призывом к действию были самыми заметными и удобными. На Dominos это хорошо реализовано, а на Mamamia хуже, потому что для экономии места они вместо кнопок добавили дропдаун-меню. А это не очень удобно в мобильной версии. На других сайтах с CTA-кнопками еще хуже, начиная с того, что они перекрывают друг друга, выполнены не как кнопки (Pizza33) или незаметные из-за того, что нет контрастных подложек (Il Molino).

Корзина

Если пользователь зашел на сайт и выбрал пиццу, он может добавить ее в корзину. Обычно соответствующую иконку размещают в хедере. Но например, на Dominos она появляется и фиксируется на странице после того, как пользователь добавит хотя бы одну товарную позицию, нажав на CTA-кнопку «В корзину». Для постоянных клиентов это хорошо, для новых – не совсем, так как это не соответствует привычному поведенческому сценарию.

Рис. 13. Корзина в мобильной версии сайта Dominos.

Рис. 13. Корзина в мобильной версии сайта Dominos.

На сайте Il Molino мы видим еще одно интересное решение. Вместо «корзины» пользователь добавляет пиццы в «коробку». Эта иконка анимирована и меняется в зависимости от того, есть там пицца или нет. Но для некоторых пользователей это может оказаться слишком креативным решением, потому что идет вразрез с устоявшимся паттерном.

Рис. 14. Корзина в мобильной версии сайта Il Molino.

Рис. 14. Корзина в мобильной версии сайта Il Molino.

На Pizza33 в корзине много графического «мусора». Он может отвлекать от оформления заказа.

Чекаут

Итак, мы плавно перешли к чекауту, то есть процессу оформления заказа. Как показывает статистика, именно в этот момент пользователь нередко отказывается совершать покупку. Есть много причин, почему это может произойти, но в основном – из-за большого количества «раздражителей» на странице.

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

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

Рис. 15. Оформление заказа в мобильной версии сайта «Папа Джон».

Рис. 15. Оформление заказа в мобильной версии сайта «Папа Джон».

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

Минус чекаута Dominos в том, что есть очень много полей для заполнения и нет автоматического перехода на незаполненную строку, без которой нельзя оформить заказ. Ее приходится искать самостоятельно. Тогда как у Mamamia все намного проще: вводишь телефон и оформляешь заказ. И можно указать точные дату и время доставки.

Когда пользователь ввел нужные данные и выбрал оплатить заказ банковской картой, не уводите его на сторонний ресурс. Лучше сделать фрейм и вмонтировать форму Liqpay прямо на сайт.

Авторизация

Авторизация – еще один важный момент. Чем она проще, тем лучше. На Mamamia она происходит по номеру телефона, а на Dominos нужно вводить нужно логин и пароль.Это слишком сложно. Лучше обойтись только телефоном. Также при авторизации нужно добавить опцию «Запомнить меня».

Выводы

Сайт доставки пиццы должен вызывать эмоциональное желание оформить заказ. Самое главное – это сочная аппетитная фотография. Также важная для принятия решения информация (описание и кнопка заказа) должна быть хорошо заметна, а иконка корзины – закреплена в хедере, где ее можно легко найти. Чекаут должен быть максимально лаконичным, без лишних данных и полей. Также делайте понятной информацию, как авторизоваться и попасть в личный кабинет.

Подытоживая, скажем, что наиболее хорошими качествами обладает сайт Dominos, неплохой в плане юзабилити – у Mamamia. У Pizza King и Il Molino много хороших решений, но есть проблемы, которые влияют на удобство. У Pizza33 и «Папа Джон» есть существенные проблемы в интерфейсе, которые можно было бы исправить.

Статья подготовлена на основе материала лекции руководителя отдела CRO и юзабилити Webpromo Влада Сиднева

Последние материалы рубрики

Facebook запускает бесплатный сервис Shops, чтобы помочь малому бизнесу продавать онлайн

Facebook запускает бесплатный сервис Shops, чтобы помочь малому...

Facebook запускает бесплатный сервис Shops, который поможет аудитории получать доступ к онлайн-магазинам в Facebook и Instagram.

Google анонсировал новую премиум-программу для рекламодателей - YouTube Select

Google запускает новую премиум-программу для рекламодателей...

Google анонсировал новую премиум-программу для рекламодателей - YouTube Select - объединение ранее существующих программ Google Preferred и Prime Pack.

Найти, догнать, конвертировать в клиента: как ремаркетинг увеличивает ваши продажи

Найти, догнать, конвертировать в клиента: как ремаркетинг...

О ремаркетинге сказано уже не мало. На блогах ведущих компаний можно найти не один кейс, где рассказывают о том, что этот инструмент...

Обновление основного алгоритма Google May 2020 Core Update (полная версия)

Обновление основного алгоритма Google May 2020 Core Update (полная...

4 мая Google начал запуск очередного обновления основного алгоритма, так называемый May 2020 Core Update.

Остались вопросы?
Наши эксперты готовы ответить на них

Свяжитесь по указанному ниже телефону с нашим менеджером или воспользуйтесь услугой «Перезвонить мне». Мы свяжемся с вами в ближайшее время.

Каждый участник — мастер своего дела
Ценю Webpromo за гибкость
Команда Webpromo, как продолжение нашего отдела маркетинга
Спокоен за продвижение своих проектов в интернете