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

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

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

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

Исправлено

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

Скидка остаётся на обоих экранах. Пилея стоит $24.99, а $31.00 зачёркнуто, пальма parlor стоит $28.00, а $35.00 зачёркнуто. Магазин, цены и отзывы выдуманы для упражнения, а растения настоящие.

Правка 1: логотип, поиск и корзина, и ничего больше

До

После

Меню, логотип и три маленькие иконки против того же логотипа и двух крупных круглых кнопок.

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

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

Бейдж из красного стал фирменным зелёным. Красная точка сообщает, что что-то не так или срочно. Количество товаров не то и не другое.

Правка 2: фильтры на виду, а не выпадающие списки

До

После

Категория, цена и размер в виде закрытых выпадающих списков плюс ссылка сортировки против чипов «Комнатные», «Уличные», «Суккуленты» и «Безопасные для питомцев», где выбраны «Комнатные».

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

Чипы показывают выбор открыто. Комнатные, уличные, суккуленты и безопасные для питомцев это вопросы, которые на самом деле возникают у покупателя растений, поэтому одно нажатие отвечает на один из них, а выбранный зелёный чип показывает текущее состояние. Четыре чипа помещаются в строку шириной 350 px с запасом 6 px, так что ни один не обрезан и прокрутка не нужна.

Правка 3: карточка, которая показывает растение целиком

До

После

Фото, бейдж, сердце, два названия, цена, звёзды, число отзывов и кнопка на всю ширину против фото, короткого названия, цены и одной круглой кнопки.

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

Исправление оставляет две строки и одну кнопку. Название короткое («Pilea», «Calathea»), под ним цена, а при скидке старая цена зачёркнута. Круглая кнопка с плюсом заменяет широкую плашку «В корзину», потому что плюс на карточке товара это паттерн, который покупатели уже знают.

Фото тоже изменились. В черновике кадрирование обрезает растения, а горшки не выровнены. В исправленной версии каждое фото обрезано так, что целое растение занимает около 70% высоты кадра, по центру, а каждый горшок стоит на одной линии. Тогда ряд карточек читается как ряд, а не как четыре разные картинки.

Правка 4: советы по уходу в виде трёх фактов

До

После

Три предложения советов в зелёном блоке против трёх иконок с подписью и одним словом каждая.

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

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

Мелкие правки

• Четыре вкладки, а не пять. Главная, Магазин, Избранное и Профиль. Список желаний стал «Избранным», а корзина переехала из панели вкладок в шапку.
• Один отступ. В черновике было 14 px слева и 12 px справа. В исправлении 20 px с обеих сторон и от 12 до 14 px между блоками.
• Никаких бейджей на фото. Красный -20%, синий NEW и сердце на каждом фото убраны. Скидка по-прежнему видна, потому что зачёркнутая цена осталась.
• Один акцентный цвет. К зелёному в черновике добавились красный и синий бейджи. В исправлении один фирменный зелёный, #1F7A4D, для всего, что можно нажать.
• Настоящая шкала шрифтов. Текст из диапазона от 8 до 20 px перешёл на размеры iOS от 11 до 20 pt.
• Короче заголовок раздела. «Популярные растения» стали «Популярное», потому что экран и так про растения.

Проведите аудит своего приложения магазина

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

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

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

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

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

Открыть в Figma

FAQ

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

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

Какими должны быть фильтры в приложении магазина: выпадающими списками или чипами?

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

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

Фото товара целиком, название, цену и одну кнопку добавления. Детали вроде рейтингов и длинного названия могут жить на странице товара.

Как показать инструкции по уходу в приложении?

Несколькими короткими фактами с иконками, по одному слову на каждый, например «Полив: еженедельно». Длинные предложения можно убрать на одно нажатие глубже.

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

Четыре или пять. Сведите дубли в места, где люди уже ищут, например корзину в шапку, а список желаний во вкладку «Избранное».

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Магазин, его цены и отзывы выдуманы, а названия растений настоящие.
• Фото с Pexels: Kulbir, Gül Işık и Kaboompics.
• Apple Human Interface Guidelines: Typography, для размеров текста iOS, использованных в исправленном экране.
• Впервые опубликовано как карусель в App Brainy.