Дизайн приложения доставки еды начинается не с красивых экранов, а со сценария заказа: что человек выбирает, что меняет цену и сколько касаний отделяет меню от двери. Так мы работали над приложением КручуВерчу, сети шавермы из Санкт-Петербурга: 30+ экранов и четыре шага от меню до адреса.
Коротко
Сеть хотела своё приложение, в котором уличная еда заказывается так же чисто и быстро, как кофе в лучших сетях.
Обычная витрина-список с этим не справляется: шаверму собирают под себя, а добавки, размер и соусы меняют итог. Если показывать только список блюд, гость не увидит, как его выбор влияет на цену.
Подробности проекта — на странице кейса КручуВерчу. Мы отвечали за дизайн: бренд, интерфейс и логику каждого экрана.
Задачу описали тремя требованиями, и каждое проверяется на экране.
| Задача | Что сделали | Что видит гость |
|---|---|---|
| Заказ в несколько касаний | Путь из четырёх шагов: меню, карточка, корзина, адрес | Короткий путь без лишних разделов |
| Шаверма, собранная под себя | Конфигуратор: ингредиенты, добавки и соусы на одном экране | Фото ингредиента, цену добавки и итог, который пересчитывается сразу |
| Бренд, который узнают на экране | Жёлтый цвет, перевёрнутое «ВЕРЧУ» и вращение в интерфейсе | Бренд в каждом жесте, а не только в логотипе |
Ни одну строку не закрыть красивым макетом. Их проверяют по тому, сколько касаний и экранов остаётся между голодным человеком и заказом, и по тому, видит ли он цену своего выбора сразу.
В карточке готового блюда выбирать нечего, а в блюде под себя выбор и есть основная часть заказа.
| Критерий | Готовое блюдо | Блюдо под себя |
|---|---|---|
| Что решает гость | Брать или не брать | Из чего собрать и сколько доплатить |
| Что меняет цену | Ничего, цена одна | Добавки, размер и соусы |
| Что нужно показать | Фото и название | Фото каждого ингредиента и цену каждой добавки |
| Где проще ошибиться | В описании блюда | В итоге: гость не понимает, из чего он сложился |
Отсюда вывод для дизайна: блюду под себя нужен отдельный экран-конфигуратор с живым итогом. Без него преимущество «собери сам» превращается в догадки о цене.
Путь заказа спроектирован как одно движение: меню, карточка, корзина, адрес.
Apple в рекомендациях по дизайну для iOS советует ограничивать число элементов управления на экране, а второстепенные действия делать доступными при минимальном взаимодействии. Короткий путь из четырёх шагов применяет тот же принцип к заказу: каждый лишний раздел — лишняя причина отказаться.
Как строятся такие сценарии и какие ошибки встречаются в мобильных интерфейсах чаще всего, мы описали в материале про UX/UI-дизайн мобильного приложения.
Конфигуратор нужен там, где товар собирают под клиента, а не выбирают из готового списка. В КручуВерчу он показывает фото каждого ингредиента и честную цену добавки, а итог пересчитывается на лету, без лишних экранов.
Ингредиенты, добавки и соусы гость выбирает на одном экране. Цена добавки видна сразу, поэтому человек не узнаёт о доплате на последнем шаге, а решает, когда делает выбор.
Фото ингредиента отвечает на вопрос «что я получу», а цена рядом — на вопрос «сколько это стоит». Когда оба ответа на одном экране, выбор не требует переходов вперёд и назад.
Пример Конфигуратор сработает не только для шавермы. У пиццерии основу, начинки и размер тоже выбирают по отдельности, и итог так же зависит от выбора. Логика заказа строится по одному принципу и подходит везде, где товар собирают под клиента.
Имя КручуВерчу крутится вокруг вертела, и интерфейс тоже: от сборки шавермы до кольца статуса заказа.
Бренду поставили задачу читаться в каждом жесте, а не только в логотипе. Для этого есть три признака: жёлтый цвет, перевёрнутое «ВЕРЧУ» и вращение. Палитра, шрифты и иконки собраны в одной дизайн-системе, поэтому все экраны выглядят как части одного приложения.
Как выбирают название и почему из него может вырасти вся подача, мы разбирали в статье про нейминг.
Совет Задайте бренду движение, а не только цвет. Цвет и шрифт можно просто повторить, а связка «имя — движение — интерфейс» держится на смысле. Если у названия есть образ, проверьте, можно ли показать его в анимации и в статусе заказа, а не только на упаковке.
Все экраны КручуВерчу собраны в одной дизайн-системе, и в работе можно выделить четыре блока.
Единая система нужна не ради порядка в файлах. Когда приложение будут разрабатывать и дополнять, новый экран соберут из готовых компонентов, а не станут рисовать заново и согласовывать с остальными.
Заказчик планировал публикацию в App Store, поэтому дизайн-систему и все экраны спроектировали именно под iOS.
Выбор платформы определяет решения в дизайне: у iOS свои жесты, свои системные компоненты и свои правила размещения элементов. Apple, например, напоминает, что до элементов управления удобнее дотягиваться в середине и в нижней части экрана, и это стоит учитывать, когда вы решаете, где будет главная кнопка.
Если позже понадобится Android, потребуется отдельная проработка под правила той платформы, и эту работу лучше заложить в план заранее.
Если приложение нужно сразу для двух платформ, начните со статьи про разработку мобильного приложения для iOS и Android. А о том, что проверяют перед выходом в магазин, написано в материале про публикацию в App Store и Google Play.
Заказчику переданы 30+ экранов, дизайн-система и логика заказа: от витрины до трекинга курьера. Это продукт, готовый к разработке, а не готовое приложение, потому что код в проект не входил.
В эти 30+ экранов входят витрина, каталог, карточки блюд, конфигуратор, корзина и трекинг. Для разработчика это ориентир: приложение собирают по готовым экранам и логике заказа, а не по описанию словами.
Цифр по заказам, выручке или скорости в кейсе нет, и мы их не придумываем: результат проекта — готовый к разработке продукт.
Эти вопросы подходят любому сервису, где клиент собирает заказ сам: от кофейни до пиццерии. Задайте их до того, как начнёте рисовать экраны.
Ошибка Показывать цену добавки только в корзине. Человек собирает блюдо, не зная цены, а итог видит уже в конце, когда решение сложнее изменить. Конфигуратор честен, когда цена пересчитывается там же, где делается выбор.
Проверить результат можно на телефоне: пройдите путь от меню до адреса и посчитайте касания, затем соберите самое сложное блюдо и убедитесь, что после каждого выбора ясно, сколько оно стоит. Если приходится гадать, дизайн ещё не закончен.
Мы начинаем со сценария заказа и с того, что в нём меняет цену, а не с оформления. Сначала путь от меню до адреса, потом конфигуратор, затем бренд, иконки и компоненты в одной дизайн-системе. Так экраны согласованы между собой, а разработчику передают описанную логику, а не набор картинок.
Мы отвечаем за дизайн: бренд, интерфейс и логику экранов. Разработку сайта или платформы можно заказать отдельно, форматы и цены собраны на странице разработки сайтов и платформ. Задачу и состав работ мы уточняем после короткого разговора.
Обсудим вашу задачу
Расскажите, что нужно сделать, — оценим сроки и стоимость и предложим решение.
Только дизайн: бренд, интерфейс и логику каждого экрана. Результат — 30+ экранов и дизайн-система, готовые к разработке, а не готовое приложение.
Подойдёт везде, где товар собирают под клиента, а не выбирают из готового списка: логика заказа строится по тому же принципу. Например, у пиццерии это основа, начинки и размер, у шавермы — ингредиенты, добавки и соусы.
Добавки, размер и соусы меняют итог, поэтому конфигуратор показывает фото ингредиента и его цену сразу и пересчитывает сумму на лету, без лишних экранов.
Заказчик планировал публикацию в App Store, поэтому дизайн-систему и все экраны спроектировали именно под iOS.
Четыре: меню, карточка, корзина, адрес. Путь спроектирован как одно движение, без лишних разделов.
30+ экранов, дизайн-систему и логику заказа: от витрины до трекинга курьера. Это продукт, готовый к разработке.
