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

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

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

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

Исправлено

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

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

Исправление 1: пусть поиск говорит, что он находит

До

После

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

Подсказка в черновике: «Search for recipes, ingredients, cuisines, ch...», и она обрывается посреди четвёртого слова. Подсказка в поиске это единственная фраза, которую строка может произнести, поэтому она должна говорить, что строка делает, и должна помещаться. Список из черновика не помещается, а оборванная подсказка выглядит как ошибка.

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

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

Исправление 2: один стиль для всех категорий

До

После

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

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

В исправлении каждый чип белый и простой, а выбранный, «Все», закрашен фирменным терракотовым. Теперь цвет несёт один факт: что включено.

Чипы ещё и крупнее, так что по ним проще попасть, а ряд затухает у правого края, где он прокручивается. В черновике ряд просто обрезан по краю экрана, а «Vegan» разрезан пополам. Затухание говорит: «там есть ещё, листай». Резкий срез не говорит ничего.

Исправление 3: факты уходят под фото

До

После

Название и пять фактов капсом на светлой тарелке против названия и трёх фактов с иконками на карточке под фото.

В черновике название набрано 15 px, а под ним строка белого капса 9 px на светлой тарелке и светлом столе. Тарелка это весь смысл фото, а текст лежит прямо на ней, в единственном цвете, который на ней исчезает. Эта строка несёт факты, по которым повар решает: время, сложность и порции. И это самая трудночитаемая часть фото.

Исправление переносит текст вниз, на карточку под фото, тёмным шрифтом. Три факта, которые решают, готовить ли сегодня вечером, остаются на месте, каждый с иконкой: часы для 30 мин, столбики для «Легко» и двое людей для 4 порций. Иконки человек выучивает один раз, а потом читает ряд одним взглядом. Из исправленной карточки убраны калории и рейтинг, они могут жить на странице рецепта.

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

Исправление 4: строка это рецепт, время и уровень

До

После

Четыре строки с подписью шефа и тремя иконками в каждой против трёх строк со временем, уровнем и двумя тихими иконками.

Каждая строка черновика несёт миниатюру, название, строку с временем, сложностью и «by Chef Anna», и три иконки: сердечко, закладку и «поделиться». Сердечко и закладка это два способа сказать «мне нравится», и список из четырёх строк печатает этот выбор двенадцать раз.

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

Исправленный список показывает три рецепта вместо четырёх, поэтому над панелью вкладок у карточки есть воздух.

Мелкие исправления

• Четыре вкладки, а не пять. Главная, Поиск, Сохранённое и Профиль вместо Главной, Поиска, Сохранённого, Планировщика и Профиля.
• Один отступ. В черновике 14 px слева и 12 px справа. В исправлении 20 px с обеих сторон и 14 px между блоками.
• Приветствие короче. «Hi Maya! What would you like to cook today?» превратилось в «What's cooking, Maya?».
• Один фирменный цвет. Терракотовый, #C8553D, отмечает выбранный чип, сохранённую закладку, активную вкладку и маленькие подписи. Больше ничего не окрашено.
• Настоящая шкала шрифтов. Текст перешёл с 8–18 px на размеры iOS от 11 до 22 pt.

Проверьте своё приложение с рецептами

Получите файл Figma

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

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

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

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

Открыть в Figma

FAQ

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

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

Что должна говорить строка поиска рецептов?

Говорить, что она находит, как можно меньшим числом слов: «Search recipes or ingredients». Длинный список всего, что она могла бы найти, обрезается, а лишнее место в фильтре.

Как должны выглядеть чипы категорий в приложении с рецептами?

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

Где должны быть время и сложность рецепта?

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

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

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

Источники

• Оба экрана наши, они спроектированы и измерены в Figma. Пользователь, шефы и список рецептов выдуманы для этого упражнения.
• Фото с Pexels: Tamra Creatives Agency, Willians Huerta, Kei Scampa, Ana Palade, adrian vieriu и Surendra Shrestha.
• Apple Human Interface Guidelines: Typography, размеры текста iOS, использованные в исправленном экране.
• W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), про текст на изображениях и фонах.
• Впервые опубликовано как карусель в App Brainy.