Дизайн кофейного приложения: редизайн главного экрана заказа, до и после
Главный экран заказа кофе: строка кофейни на 54 символа, крикливый баннер с баллами, восемь вкладок за краем экрана и кнопка ADD под каждым фото. И тот же экран после исправлений. Каждое изменение рядом, причина каждого и бесплатный файл Figma.
Человек открывает кофейное приложение ради одного: заказать напиток и забрать его. В первом черновике ниже есть всё нужное, но сказано всё сразу: длинная строка кофейни, баннер, который кричит про баллы, восемь вкладок и кнопка ADD под каждым фото. Исправленная версия сохраняет кофейню, баллы и меню, но даёт каждому из них одно спокойное место.
Весь экран, до и после
Черновик джуниора
Исправлено
Слева человек видит приветствие, строку кофейни, баннер с баллами, полосу вкладок и сетку кнопок, и всё это одинаково громко. Справа в каждом блоке одно, что нужно прочитать, и одно действие на строку.
| Черновик джуниора | Исправлено | |
|---|---|---|
| Кофейня | Строка из 54 символов в рамке | Одна карточка самовывоза со ссылкой Change |
| Баллы | Баннер с тремя восклицательными знаками | Карточка прогресса: 250 баллов до бесплатного напитка |
| Вкладки категорий | 8, уходят за край | 4 чипа, один выбран |
| Позиции | Сетка карточек 2 на 3 | Строки с фото 60 px |
| Кнопки добавления | Широкая жёлтая ADD под каждым фото | Одна круглая кнопка на строку |
| Вкладки в панели | 5 | 4 |
| Боковой отступ | 14 px слева, 12 px справа | 20 px, по 16 px между блоками |
| Размеры текста | от 9 до 18 px | от 11 до 28 pt |
Правка 1: скажи, где, один раз
До
После
Строка кофейни, упакованная в рамку, против карточки самовывоза.
Черновик упаковывает кофейню в одну строку: «Downtown Store - 123 Main St (0.3 mi) - Open until 9PM», 54 символа мелким шрифтом в рамке со шевроном на конце. Название, улица, расстояние и часы весят одинаково, так что глазу приходится читать всю строку, чтобы найти единственный нужный факт.
Исправление превращает строку в карточку самовывоза. «Pickup at Downtown» стоит заголовком, «0.3 mi · Open until 9 pm» это одна серая строка под ним, а «Change» справа фирменным синим как настоящее действие. Адреса улицы на главном экране нет. Приветствие выросло до крупного «Good morning, Leo», восклицательные знаки исчезли.
Правило на вынос: разбей длинную строку на заголовок, одну деталь и одно действие. Рамка со шевроном говорит «нажми меня» менее внятно, чем слово «Change».
Правка 2: баллы как прогресс
До
После
Кричащий баннер против полосы прогресса.
Баннер в черновике перетекает из синего в сливочно-жёлтый, и белый текст оказывается на жёлтом конце, где читается хуже всего. Он говорит «You have 1,250 points! Redeem now for FREE drinks!!!», а кнопка Redeem Now под ним белая с бледно-жёлтым текстом. Там сказано, что баллы есть, но не сказано, насколько они близки к награде.
Исправление это одна глубокая синяя карточка. Сверху «Rewards» и «1,250 points», а крупная строка гласит «250 points to a free drink». Сливочная полоса прогресса ниже заполнена на 83%, то есть 1 250 из 1 500, а мелкая строка говорит, где ждёт бесплатный напиток. Человек видит расстояние, и это самое интересное число.
Правило на вынос: баланс баллов это число, а прогресс это история. Покажи историю, а число пусть стоит сбоку.
Правка 3: четыре чипа, один выбран
До
После
Восемь вкладок за краем экрана против четырёх чипов.
В черновике восемь категорий: Coffee, Tea, Cold Drinks, Seasonal, Bakery, Breakfast, Merch и Gift Cards. Они уходят за правый край, так что «Merch» обрезано до «Mer», и человеку приходится листать вбок, чтобы узнать, что есть ещё. Выбранная отмечена тонким подчёркиванием.
Исправление показывает четыре чипа: All, Coffee, Cold drinks и Bakery. All залита синим цветом кофейни, остальные белые, так что выбранный виден с первого взгляда. Других категорий на этом экране нет; настоящее приложение держало бы их во вкладке Menu, в одном касании.
Правило на вынос: ряд фильтров должен помещаться на экране. Если ему нужна прокрутка вбок, чтобы показать собственный список, покажи меньше.
Правка 4: одна строка на позицию
До
После
Сетка карточек с сливочной кнопкой под каждой против трёх строк.
Черновик показывает позиции сеткой карточек: крупное фото, название, цена и сливочная кнопка «ADD +» заглавными. Две с половиной строки карточек занимают экран под вкладками, сливочный цвет кнопок повторяется под каждым фото, а ссылка «View Menu» бледно-жёлтая на белом.
Исправление делает каждую позицию строкой с фото 60 px, названием, одной серой строкой и ценой, и одним круглым синим «+» справа. В карточку помещаются три строки там, где сетка показывала две с половиной карточки, и единственная кнопка в каждой строке это кнопка добавления. «Full menu» набрана фирменным синим.
Правило на вынос: когда у каждой позиции одно и то же действие, оно должно быть маленьким и выровненным, чтобы глаз читал названия и цены вдоль одного края.
Мелкие правки
- Один левый край. Поля в черновике были 14 px слева и 12 px справа. В исправлении по 20 px с обеих сторон и по 16 px между блоками.
- Настоящая типографская шкала. Текст перешёл от 9–18 px к размерам iOS от 11 до 28 pt.
- Четыре вкладки, а не пять. Home, Menu, Order, Rewards и Account стали Home, Menu, Rewards и Account. Вкладка Order покинула панель.
- Палитра из четырёх цветов. Кобальт кофейни #2342A8, глубокий синий #15276B, сливочный #F3C77A и кремовый #F5EFE4 заменяют градиент и серый фон.
Проведи аудит своего экрана заказа
| Вопрос | Почему это важно |
|---|---|
| Можно ли прочитать кофейню для самовывоза с первого взгляда? | От этого зависит, сможет ли человек вообще заказать |
| Показывают ли бонусы прогресс или только баланс? | Расстояние это самое интересное число |
| Помещается ли ряд категорий без прокрутки вбок? | Обрезанная вкладка скрывает, что есть ещё |
| Повторяется ли на каждой позиции широкая кнопка? | Одной маленькой кнопки добавления на строку достаточно |
FAQ
Что должен показывать первым главный экран приложения для заказа кофе?
Кофейню для самовывоза на одной карточке со ссылкой Change, затем прогресс бонусов, затем категории и популярные позиции. Человек должен увидеть, где он заказывает, раньше чем что.
Как оформить раздел с баллами лояльности?
Покажи расстояние до следующей награды полосой прогресса и простой строкой вроде «250 points to a free drink», а баланс вынеси в сторону.
Сколько вкладок категорий должно быть в меню?
Столько, сколько помещается на экране без прокрутки вбок, обычно четыре. Остальные убери во вкладку Menu, в одно касание.
Что выбрать для меню: сетку или список?
Для заказа лучше работает список строк: названия и цены выстраиваются вдоль одного края, и каждой строке нужна одна маленькая кнопка добавления. Сетка подходит для просмотра фото.
Какого размера должна быть кнопка добавления?
Не меньше 44 на 44 пункта для касания, даже если видимый круг меньше. На исправленном экране одна круглая синяя кнопка на строку.
Источники
- Оба экрана наши собственные, спроектированы и измерены в Figma. Кофейня, её адрес, цены и баллы выдуманы.
- Фото меню с Pexels: Duc Nguyen, Melissa Jansen van Rensburg, Marcelo Verfe, Juan Pablo Serrano, Skyler Ewing и Vinícius Vieira ft.
- Apple Human Interface Guidelines: Typography, для размеров текста iOS на исправленном экране.
- Apple Human Interface Guidelines: Accessibility, для размера области касания 44 pt.
- Kivetz, Urminsky and Zheng, The Goal-Gradient Hypothesis Resurrected, Journal of Marketing Research, 2006, о том, что клиенты покупают чаще, пока заполняется карта лояльности.
- Впервые опубликовано как карусель в App Brainy.
Want this for your own app? Our team redesigns ordering apps like this one, from the first audit to the finished components.
Get Started
