Как хорошие сервисы доставки еды лажают в приложениях26.04.2018 19:21

Директор по развитию компании-разработчика мобильных приложений MobileUp Виктор Черногоров — о том, каких ошибок можно избежать при разработке приложения для доставки еды.

«У нас как у всех: каталог, корзина и оформление заказа. Сколько будет стоить типовое решение?».

Есть много приложений доставок: «Додо Пицца», «Якитория», ZakaZaka и другие. У всех каталог, корзина и оформление заказа, но к решению одной и той же задачи можно подойти по-разному. Даже известные сервисы иногда косячат.

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

Перед вами 8 главных экранов приложений доставок. И они абсолютно разные.

Дисклеймер: чтобы не было вопросов, Yami Yami — разрабатывали мы.

1. Покажите еду

«Ммм… выглядит вкусно! Пожалуй, закажу», — так должен подумать пользователь вашего приложения. Очевидно, что в приложении доставки должны быть фотографии еды. Но почему-то не все понимают, что они должны быть качественными, большими, яркими и вызывать аппетит. Некоторые сервисы не придают этому значения, а зря.

У «Якитории» хорошие фото, но в каталоге маленькие, их не разглядеть. У «СушиВёсла» фотографии очень неестественные, как будто в фотошопе рыбу поменяли. У «Суши-Сити» одинаковые фотографии для разных суши.

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

Несколько советов:

Инвестируйте в качественные снимки продукта. Наймите фуд-фотографа.
Фотографии должны вызвать аппетит.
Разместите большие фотографии еды, чтобы пользователь мог разглядел начинку.

2. Узнайте, куда доставлять

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

Приложения «СушиВёсла» и «Суши Wok» уточняют город. В обоих случаях можно сразу спросить куда доставлять. В приложении «Додо Пицца» вопрос про адрес доставки появляется только при оформлении заказа. Узнать, входит ли адрес в зону доставки, можно только во вкладке «Контакты» в разделе «Пиццерии на карте». Это неочевидно.

С помощью этого экрана пользователь сразу узнает, входит ли его адрес в зону доставки и как долго будут везти заказ. Вы сэкономите людям время, если сразу сообщите о том, что не работаете в каких-то районах.

Приложение Yami Yami на первом экране показывает карту, спрашивает, куда везти и информирует о времени доставки. ZakaZaka показывает последние адреса доставок и предлагает ввести свой текстом. Мы пофантазировали, как закрыть все потребности пользователя на экране «Куда доставить». Адрес обозначен пином на карте или вписывается вручную. Есть кнопки последних адресов, отображаются рестораны для самовывоза, время доставки и стоимость.

Спрашивать адрес доставки на старте или нет, решать вам. Если спрашивать, то вот несколько советов:

Добавить кнопку «Пропустить». Хочешь перейти к еде? Пожалуйста. Введешь адрес потом.
Пользователь указал адрес, скажите время доставки. Пользователь не будет злиться, если придётся долго ждать. Он знал, на что идёт.
Добавить на карте блок с последними адресами. Большинство пользователей заказывает на одни и те же адреса.
Если у вас есть самовывоз, покажите рестораны на карте. Может быть, быстрее забрать самому.

3. Упростите навигацию

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

Большинство приложений используют один из двух вариантов построения навигации: Tab bar (иконки внизу экрана) и Drawer (боковое меню). У обоих есть свои преимущества и недостатки.

Tab bar одобряет Google и Apple, он используется во многих приложениях. Основных разделов мало, но они всегда под рукой, можно перейти в один клик. По гайдлайнам максимальное количество кнопок в Tab bar — 5 штук. Некоторые разделы могут быть вложены друг в друга, как в примере с зоной доставки «Додо Пицца».

«Доминос», «Додо Пицца» и Yami Yami используют Tab bar. Главный раздел у всех — каталог (меню). Он всегда под рукой. «Доминос» и Yami Yami выносят корзину в отдельный блок в правом верхнем углу. «Додо Пицца» оставляет её в Tab bar. Так проще нажать на кнопку (она ближе), но когда корзина пустая, кнопка бесполезна. У Yami Yami и «Доминос» все кнопки в Tab bar полезные, но до корзины придется тянуться.

Drawer (боковое меню) Android рекомендует как один из вариантов построения навигации. В iOS это считается «ненативным» элементом (неродным), но всё равно часто используется. Недостаток бокового меню — много элементов, большинство из которых не нужны пользователю. Редко используемые разделы могут отвлекать от важных. Чтобы избежать этого, продумайте порядок и группируйте близкие по смыслу пункты в блоки. Например, текстовые разделы «Доставка», «Оплата», «О компании» — можно вынести в один блок. Так пользователь быстрее найдёт нужный ему раздел.

Dostaeвский, Ollis Club, PizzaSushiWok и «СушиВёсла» используют боковое меню. У всех разное количество и порядок пунктов.

Некоторые приложения экспериментируют и не всегда из этого получается дружественный интерфейс.

Боковое меню в приложении «Тануки» содержит элементы навигации и каталог. Но даже на большом экране видно только 2 категории блюд. Дальше надо листать.

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

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

Пара советов по навигации:

Расположение разделов должно быть логичным. Главный раздел лучше поставить первым, в случае с Tab bar его можно поставить по центру, чтобы акцентировать внимание.
Иконки в Tab bar должны быть очевидными. Если есть сомнения — используйте подписи.
В Drawer группируйте близкие по смыслу пункты, чтобы пользователь быстрее ориентировался в них.
Выпишите все возможности приложения и расставьте по приоритетам. Если функций немного или они легко группируются в 4–5 разделов, можно сделать Tab bar. Если задача не решается, попробуйте Drawer.

Протестируйте дизайн. Перед тем как отдавать дизайн в разработку, загрузите его в InVision и дайте попробовать своим друзьям. Посмотрите, как быстро они проходят разные сценарии. Если навигация вызывает вопросы, доработайте её, пока не начали программировать.
Подумайте о будущем. Переделывать навигацию в готовом приложении — сложно. Если вы собираетесь добавлять дополнительные разделы, заранее обдумайте, куда их ставить. В боковое меню проще добавлять новые пункты, чем в Tab bar.

4. Расскажите больше о продукте

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

В карточках приложений «Нияма», «Тануки», Yami Yami, «Якитория» — яркие и сочные фотографии блюд. «Нияма» и «Якитория» предлагают рекомендации к блюду, это очень кстати. «Якитория» отказались от концепции «количество роллов на фото = количество роллов в доставке». Вместо этого показывает два детализированных ролла, а в карточке пишет, сколько штук в наборе. Круто! Можно рассмотреть еду в мельчайших деталях и узнать точно, сколько роллов получишь. Тренд на здоровое питание подсказывает, что хорошо писать БЖУ. Так делают «Тануки» и Yami Yami.

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

Отдельная история в приложениях доставок — описание наборов и сетов. «Йонака» ролл, «Окинава» ролл, ролл «Якушо» — я не знаю, что это за роллы и из чего состоят. Чтобы узнать состав роллов в наборе, мне нужно вернуться в меню, найти каждый из них, прочитать состав, потом вернуться в наборы и заказать — много действий. Для экономии времени пользователя в описании набора можно сделать кликабельные названия роллов, чтобы при нажатии открывался pop-up с составом каждого.

«Тануки»,»2 Берега», «Dostaeвский». Простите, но я не знаю, что такое «Сякэ темпура», «Наоми макси» и ролл «Якушо», может там есть что-то что я не ем.

Если человек зашел в карточку, значит он уже заинтересовался блюдом. Дайте ему то, за чем он пришёл.

Пара советов:

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

5. Не грузите авторизацией

Лучшая авторизация — её отсутствие. Она нужна не пользователю, а бизнесу. Пользователь хочет заказать еды. Обычно в приложениях используется три вида авторизации: по телефону, по логину и паролю, через соцсети. В каждом из них есть свои плюсы и минусы.

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

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

В приложение «Папа Джонс» полей мало, но непонятно, зачем нужен и email, и телефон. Пароль вводится без поля «повторить» и без возможности посмотреть, что написал. В приложении Pizza Hut много полей. Вам действительно нужно знать пол?

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

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

В приложении »2 Берега» авторизоваться можно через соцсети, по логину и паролю, и по номеру телефона.

Пользователь может авторизироваться на одном устройстве по телефону, а на другом — через соцсеть. Чтобы не возникало путанницы, нужно склеивать дублирующиеся аккаунты по общему критерию: номеру телефона или почте.

История из моего опыта. Когда сервис »2 Берега» только появился, я активно им пользовался и заработал хорошие скидки. Заказывал на сайте, зарегистрирован был по номеру телефона. Потом вышло приложение, я авторизовался через ВКонтакте и ввёл номер телефона. Так у меня оказалось два аккаунта с одинаковыми номерами, и пропали все накопленные годами бонусы. Пришлось звонить в поддержку и просить склеить мои аккаунты.

Советы:

Чем меньше действий, тем лучше. Если вам нужна дополнительная информация, ищите другие способы её получить. Спросите при оформлении заказа или пусть оператор уточнит.
Используйте кнопку «Показать пароль», вместо двойного ввода. Никому не хочется два раза вводить сложную комбинацию букв и цифр в разном регистре.
Покажите, как правильно писать: 8, +7 или (9хх). Пользователь должен сразу понимать, что вводить и не думать об этом.
Будьте готовы склеивать аккаунты, если пользователи могут авторизироваться разными способами.

6. Не грузите долго

Не важно, что вы доставляете: цветы, посылки или еду — для любой доставки важна скорость. Даже сервисы с самыми вкусными блюдами и быстрыми курьерами теряют клиентов, если сайт или приложение тормозят. Кто-то посчитает, что я придираюсь, но 5 секунд ожидания, когда включится приложение — это много.

Приложения «СушиВёсла» и Pizza Hut долго показывают экран загрузки при каждом запуске. Скорее всего, они заново грузят каталог. Это «ест» трафик пользователя, отнимает время и раздражает. Этого можно избежать, если грузить с сервера только изменения в каталоге.

Одна из причин, почему пользователь выбирает приложение, а не мобильную версию сайта — скорость. Будьте быстрыми!

Советы:

Кэшируйте меню, если оно обновляется нечасто.
Если меню обновляется часто, подгружайте его во время работы приложения.

7. Избавьтесь от неочевидного

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

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

В приложении «Якитория» в правом верхнем углу находится иконка корзины. Когда мы переходим в корзину, она превращается в кнопку «Оформить». Я опросил коллег и знакомых, и почти все сказали, что искали кнопку оформления в другом месте. Если поставить её внизу, пользователь сразу найдёт.

Советы:

Избегайте неочевидных сценариев.
Если без них никак, обучайте пользователя.

8. Оптимизируйте под форматы экранов

Я купил iPhone X, чтобы наслаждаться приложениями на большом экране. Apple представила эту модель в сентябре, а сейчас уже апрель. Прошло больше полугода, а многие приложения не оптимизированы под флагман Apple. Не надо так.

«СушиВёсла», «Суши-сити» — до сих пор не оптимизированы под iPhone X. Приложение «Dostaeвский» оптимизировано некачественно: поисковая строка наезжает на фильтр. Пока писал эту статью, «СушиВёсла» обновили приложение и оптимизировали его.

Совет один: следите за новыми устройствами и новыми версиями ОС.

9. Думайте о пользе, а не о фичах

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

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

Приложение «Суши-Сити» периодически показывает баннер с подсказками по блюдам. Интересное решение, забавные тексты. Но как часто приложение угадывает то, что нужно пользователю? Ведь отмена — это лишний клик на пути к заказу. Эта фича может отвлекать и раздражать. Польза сомнительная.

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

Советы:

Главное — заказ. Остальное — потом.
Не делайте фичи ради фич. Пусть каждый элемент несёт ценность для пользователя

10. Просто помогите заказать еду

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