Дизайн приложения доставки еды: редизайн главного экрана, до и после

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

Весь экран, до и после

Черновик джуниора

Исправлено

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

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

Правка 1: скажите, куда, одним словом

До

После

Черновик показывает полный адрес, Baker Street, 221B, обрезанный посреди слова мелким шрифтом рядом с пином. Исправление показывает имя, которое человек дал этому адресу, «Дом», крупно, со стрелкой, намекающей, что его можно сменить.

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

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

Правка 2: одна форма, одно выбранное состояние

До

После

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

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

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

Правка 3: одно предложение, одно сообщение

До

После

Баннер в черновике нагромождает «МЕГА РАСПРОДАЖА!», предложение, код, минимальный заказ и «Действуют условия» крошечным шрифтом, а затем кнопку. Исправление оставляет 50% СКИДКИ и говорит три вещи: когда (Только сегодня), для кого (первый заказ от $20) и код в виде кнопки, которую можно скопировать.

Проблемой было не само предложение. 50% скидки это хороший повод заказать, и в исправлении оно того же размера.

Изменилось всё вокруг него. «МЕГА РАСПРОДАЖА!» и «50% СКИДКИ» говорили одно и то же дважды. Мелкий шрифт упаковывал четыре факта в одну строку по 9 px, разделённых чертами. Кнопке «Заказать» некуда было вести, ведь конкретного ресторана для заказа ещё нет.

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

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

Правка 4: один бейдж, два факта

До

После

До: на фото три бейджа (Бесплатная доставка, скидка 20%, Реклама), а ниже в тексте кухни, время доставки, стоимость, ценовой уровень, минимальный заказ и часы работы. После: один бейдж, название, рейтинг и два факта: как долго и сколько стоит.

Карточку ресторана в списке читают примерно секунду, и за эту секунду человек решает две вещи: хочу ли я эту еду и стоит ли она ожидания и платы за доставку. Исправленная карточка отвечает именно на это. Фото отвечает на первое. «25 to 35 min, доставка $2.99» отвечает на второе.

Всё остальное на старой карточке настоящая информация, просто не для первого взгляда. Список кухонь и так виден по фото. Минимальный заказ $15 и закрытие в 23:00 важны только после выбора, так что им место на странице самого ресторана.

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

Пять мелких правок

Четыре части выше самые крупные. Эти пять изменений не менее осознанны:

• Одно поле. В черновике было 12 px слева и 16 px справа, так что ничто ни с чем не совпадало. В исправлении 20 px с обеих сторон, и каждый край на экране лежит на этой линии.
• Типографическая система. В черновике текст от 9 до 30 px без ступеней между размерами. В исправлении текстовые стили iOS, от 11 до 22 pt, так что у каждого размера есть роль и ничто не слишком мелко для чтения.
• Более тихий поиск. В поиске черновика были микрофон и иконка фильтра, а подсказка настолько длинная, что обрезалась. В исправлении одна иконка и короткая подсказка: «Блюда, рестораны или кухни».
• Никаких точек карусели. Точки под баннером обещают ещё баннеры. Большинство их не листает, а точки добавляют ещё один объект для взгляда. Одному предложению точки не нужны.
• Четыре вкладки, не пять. «Избранное» ушло из панели вкладок. Сохранять по-прежнему можно сердечком на каждой карточке, а четырём вкладкам достаётся больше места и удобнее попадать пальцем.

Проверьте свой главный экран

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

Скачайте файл Figma

В бесплатном файле оба экрана как компоненты, каждая правка в виде пары «до и после», переменные цветов и текстовые стили iOS.

Бесплатный файл Figma

Главный экран доставки еды, до и после

Оба экрана и каждая исправленная часть как компоненты Figma. Бесплатно, только просмотр, продублируйте в свои черновики.

Открыть в Figma

FAQ

Что должен показывать главный экран приложения доставки еды в первую очередь?

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

Сколько бейджей должно быть на карточке ресторана?

Один. Три бейджа рядом гасят друг друга. Выберите тот, что важнее всего для клиента, например бесплатную доставку.

Нужно ли в приложении с едой использовать разный цвет для каждой категории?

Нет. Дайте всем категориям одну форму и нейтральную рамку, а фирменный цвет тратьте только на выбранную, чтобы цвет означал «вы здесь».

Как сделать промо-баннер, который конвертирует?

Скажите об одном предложении один раз: скидка, для кого она и код. Сделайте код действием, которое копируется касанием, а условия перенесите на оформление заказа.

Сколько вкладок должно быть в приложении доставки еды?

Четыре или пять максимум. Здесь четыре (Главная, Поиск, Заказы, Аккаунт) дали каждой вкладке больше места, а сохранение берёт на себя сердечко на каждой карточке.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Замеры в таблице взяты из файлов Figma.
• Фото еды с Unsplash: Fernando Andrade, sina piryae, Mahmoud Fawzy, Anna Pelzer, Alana Harris, Thimotius Timmy и Poul Hoang. Промо-бургер от Elements Interactive на Pexels, студийный фон заменён фирменным красным цветом через цветокоррекцию, без AI.
• Размеры текста iOS из Human Interface Guidelines, Typography от Apple.
• Впервые опубликовано как карусель в App Brainy.