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

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

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

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

Исправлено

Слева покупатель видит семь мелких меток на фото еще до названия товара. Справа сначала идет фото, потом название и цена, а единственная темная кнопка это та, что покупает.

Правка 1: фото, на котором ничего нет

До

После

Четыре иконки и три бейджа на фото против кнопок «назад» и «сохранить».

Черновик вешает на товар весь магазин. Вверху идут «назад», «поделиться», «сохранить» и корзина с красной «3». Внизу слева, поверх носка кроссовка, громоздятся «Новинка», «-19%» и «Бесплатная доставка».

Исправленная версия оставляет на фото две круглые кнопки по 40 px: «назад» и «сохранить». Остальное переехало туда, где ему место. Скидка стоит рядом с ценой, строка про доставку под итогом в нижней панели, а точки, считающие фото, под самим фото.

Правило на будущее: фото товара это и есть товар. Все, что не помогает оценить кроссовок, должно жить в другом месте.

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

До

После

Цена в ряду чисел против цены на отдельной строке.

Черновик набирает бренд серыми капителями в 9 px, название товара переносится на две строки, а затем идет один ряд: «$129.00 | 4.8 (2 341 отзыв) | 1,2 тыс. продано». Пять чисел делят строку в одном размере, и цену приходится искать среди них.

В исправленной версии название получает отдельную строку крупным шрифтом. У цены тоже своя строка: «$129» крупно, рядом зачеркнутые «$159» и маленький чип «скидка 19%». Рейтинг, отзывы и продажи уходят ниже, в более тихую строку, потому что они поддерживают решение, а цена его принимает. На обоих экранах одни и те же числа: 129 разделить на 159 дает 0,81, так что скидка 19% честная.

Правило на будущее: когда в строке несколько чисел, нужное покупателю только одно. Дайте ему отдельную строку и размер.

Правило цены, которое стоит проверить

У зачеркнутой цены в некоторых странах есть юридическая сторона.

Правка 3: размеры, по которым видно, что выбрано

До

После

Восемь мелких блоков против сетки чипов с видимыми состояниями.

Блоки размеров в черновике 41 на 32 px в один ряд. У выбранного размера 8,5 рамка на 1 px темнее, а распроданный 9,5 выглядит как размеры в наличии. У трех цветных точек нет названий.

В исправленной версии каждый размер это чип 44 px в два ряда по четыре. Выбранный залит #111111 с белым текстом. Распроданный зачеркнут на сером, поэтому он читается как недоступный еще до нажатия. Цвета получают названия под образцами: Crimson, Black и Lime, выбранный обведен кольцом.

Высота 44 px важна. Руководство Apple требует область нажатия не меньше 44 на 44 пункта, а блок 32 px в ряду из восьми легко промахнуться.

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

Правка 4: одна панель, которая покупает

До

После

Две кнопки капсом и ссылка против цены и одной кнопки.

Черновик заканчивается счетчиком количества, кнопкой с обводкой «В КОРЗИНУ», черной «КУПИТЬ СЕЙЧАС» и маленькой ссылкой «В список желаний». Две кнопки почти одного веса заставляют выбирать способ покупки, и к тому же они уезжают вместе со страницей.

Исправленная версия заканчивается одной панелью, которая остается внизу: «$129», под ней «Бесплатная доставка» и одна черная кнопка «В корзину». Список желаний это кнопка «сохранить» на фото. Таб-бар тоже ушел, ведь пять вкладок под панелью покупки с ней конкурируют.

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

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

• Один левый край. В черновике отступы были 14 px слева и 12 px справа. В исправленной версии по 20 px с обеих сторон.
• Настоящая типографская шкала. Текст вырос с 9 до 14 px до размеров iOS от 12 до 22 pt.
• Обычный регистр. «В КОРЗИНУ» и «КУПИТЬ СЕЙЧАС» капсом превратились в «В корзину».
• Более тихая ссылка. «Таблица размеров» синим стала «Гидом по размерам» серым, ведь она помогает выбору, а не является им.

Проверьте свою страницу товара

FAQ

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

Фото, на котором нет ничего, кроме «назад» и «сохранить». Затем название, затем цену на отдельной строке.

Как спроектировать выбор размера для обуви?

Сделайте каждый размер чипом не меньше 44 px, залейте выбранный темным цветом и зачеркните распроданные размеры. Тонкая рамка вокруг выбранного слишком слаба, чтобы ее прочитать.

Как показывать цену со скидкой на странице товара?

Показывайте текущую цену крупно, рядом зачеркнутую старую и процент скидки в маленьком чипе. На обоих экранах здесь $129, $159 и скидка 19%. Проверьте местные правила о том, какую старую цену можно показывать.

Нужны ли на странице товара обе кнопки, «В корзину» и «Купить сейчас»?

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

Нужен ли на странице товара таб-бар?

На этом экране нет. У страницы одна задача, а таб-бар под панелью покупки с ней конкурирует.

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Название товара, бренд, цены и отзывы выдуманы.
• Фото товара с Pexels, автор Ahimsa - OM.
• Apple Human Interface Guidelines: Typography, для размеров текста iOS на исправленном экране.
• Apple Human Interface Guidelines: Accessibility, для размера области касания 44 pt.
• Уведомление Европейской комиссии о толковании статьи 6a Директивы 98/6/EC, для правила предыдущей цены.
• Впервые опубликовано как карусель в App Brainy.