Как оформить меню доставки на смартфоне: состав, добавки и цена без путаницы

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

Гость в зале видит предмет, запах и подачу, может задать вопрос официанту и сравнить позиции на развороте меню. При доставке часть этих подсказок исчезает. Человек листает экран, переключается между блюдами, выбирает размер, степень остроты, соус или гарнир и старается понять итоговую цену до оформления заказа. Если названия и параметры смешаны в длинном абзаце, посетителю приходится перечитывать текст и возвращаться к предыдущим экранам.

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

Работайте с реальными названиями и правилами кухни, а не с абстрактными заполнителями. «Булочка с корицей» и «булочка с корицей, 110 г» отвечают на разные ожидания; «соус на выбор» не говорит, входит ли он в цену. Согласуйте формулировки с сотрудником, который собирает заказ: он знает, где гости чаще всего уточняют детали.

Перед вёрсткой выпишите все поля одной позиции. Удобно разложить их на три группы:

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

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

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

Заголовок карточки делает главную работу: человек должен понять, что это за блюдо, пока листает меню. Не заставляйте его читать рекламный эпитет до самого названия. Лучше «Суп-пюре из шампиньонов» и ниже «со сливками и гренками», чем «Нежное настроение в каждой ложке». Образное имя можно оставить, если оно узнаваемо для постоянных гостей, но добавьте ясное пояснение.

Цена должна стоять рядом с конкретной версией блюда. Если размер меняет стоимость, показывайте варианты вместе: «300 мл — 290 ₽; 450 мл — 390 ₽». Такая строка читается быстрее, чем цена на карточке, а объём — далеко в описании. Для наборов назовите, что включено в базовую сумму, и отделите платные замены. Не пишите «от 390 ₽», если посетитель не может понять, какой вариант имеет эту цену.

Модификаторы лучше показывать сразу после описания и до кнопки добавления в корзину. Внутри группы сохраняйте постоянный порядок: сначала обязательный выбор, затем дополнительные опции. Если списки длинные, группируйте их по смыслу — «Соус», «Гарнир», «Добавки» — вместо единого перечня из десятков строк. Не ставьте все опции в один уровень: человек должен отличать выбор, без которого нельзя продолжить, от предложения увеличить заказ.

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

Проверьте кириллицу, цифры и знаки в тех сочетаниях, которые действительно встретятся: «Борщ с говядиной», «350 г», «1,5 л», «+ 40 ₽». У цифр особенно важны различимость и устойчивое выравнивание цен. Шрифт, в котором похожи «З» и «3» или неразборчиво выглядят «0» и «О», может затруднить быстрое сравнение.

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

Цена, объём и доплата должны визуально принадлежать одной опции. На узком экране полезно выровнять цены одним краем или разместить сумму непосредственно в строке варианта. Не заставляйте посетителя мысленно сопоставлять число справа с вариантом слева через несколько строк.

Макет — это не только статичная карточка. После выбора размера, добавки или замены меняется сумма в корзине, а иногда и состав заказа. Подпишите действие рядом с контролом: «Добавить сыр + 50 ₽» понятнее, чем одинокий плюс. После нажатия должно быть ясно, что опция выбрана, а цена обновилась. Если выбор снимается, состояние снова должно быть очевидным.

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

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

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

Для короткой проверки дайте человеку конкретные задания: найти суп без острого соуса; выбрать большой кофе; понять, входит ли гарнир; сравнить доплату за замену; удалить добавку. Наблюдайте, где он останавливается и что переспросит. Такая проверка полезнее вопроса «Всё ли понятно?», потому что показывает реальное действие, а не общее впечатление.

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

Ставить рядом несколько цен без подписи. Цифры «290 / 390 / 490» не объясняют, какая порция сколько стоит. Назовите объёмы или размеры у каждой суммы.

Прятать состав в длинном рекламном тексте. Гость может пропустить важную деталь. Вынесите ключевые ингредиенты в короткое описание и держите тон привлекательным, но конкретным.

Писать «на выбор» без списка. Это не говорит, где сделать выбор и какие варианты доступны. Назовите сами варианты или ведите к группе с понятной подписью.

Считать мелкий текст способом вместить всё. Если карточка не помещается, пересмотрите поля и слова. Уменьшение кегля ухудшает чтение и не решает проблему неясной структуры.

Предполагать, что фото объясняет размер. Ракурс и посуда искажают впечатление. Укажите объём или массу текстом и используйте фотографию как поддержку.

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

### Нужно ли указывать состав каждого блюда?

Дайте достаточно сведений, чтобы человек отличал позиции и понимал основные ингредиенты. Объём зависит от меню и процесса заведения. Важные свойства, которые влияют на выбор, нельзя заменять общим рекламным описанием; сведения для особых ограничений уточняйте у ответственных за меню.

### Где лучше разместить массу или объём?

Рядом с названием или конкретным вариантом, к которому параметр относится. Для нескольких размеров соберите вариант, объём и цену в одной строке или компактной группе. Так посетителю не придётся искать связь между описанием вверху и цифрой внизу.

### Как показывать набор, если его можно изменить?

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

### Сколько шрифтов использовать в меню доставки?

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

### Стоит ли добавлять эмодзи к названиям?

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

### Как часто пересматривать карточки?

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

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