Дизайн — статьи о сайтах
Макет магазина автозапчастей часто утверждают по главной странице и одной аккуратной карточке товара. Потом выясняется, что у реальной позиции три номера, пять аналогов, список из сорока подходящих моделей и непонятный срок поставки. Блоки не помещаются, и начинаются переделки. Ниже порядок согласования, который помогает найти такие проблемы до вёрстки.
Почему в автозапчастях макеты переделывают чаще
Данные в каталоге запчастей неоднородны. У одной позиции есть фото, оригинальный номер и подробная применимость, у другой только артикул производителя и название из прайса поставщика. Если дизайнер рисует «идеальный» товар, вы соглашаетесь с картинкой, которую каталог не сможет воспроизвести. Поэтому согласовывать нужно не только внешний вид, но и то, откуда берётся каждый элемент страницы.
Что утвердить ещё до отрисовки
- Список типов страниц: главная, раздел, список товаров с фильтрами, карточка, корзина, оформление заказа, подбор по автомобилю, доставка и оплата, контакты.
- Главный сценарий покупателя: поиск по номеру детали, по автомобилю (марка, модель, год, двигатель или VIN) или по названию. От этого зависит, что окажется на первом экране.
- Источник данных для каждого поля: выгрузка из учётной системы, прайс поставщика или ручное заполнение. Если поля нет в источнике, его не должно быть в макете или оно должно быть необязательным.
Пример: карточка передних тормозных колодок
Это условный фрагмент, а не описание реального проекта. Сверху название и артикул производителя, рядом оригинальные номера (OEM) и номера аналогов. Под ними блок «Подходит к вашему автомобилю». Если покупатель выбрал машину, там написано «подходит» или «не подходит». Если не выбрал, там предложение выбрать. Далее цена, статус «в наличии» или «под заказ» со сроком, кнопка «В корзину». Ниже характеристики (ось установки, толщина, наличие датчика износа), таблица применимости и аналоги.
Попросите дизайнера нарисовать такую карточку в трёх вариантах: полностью заполненную, с минимумом данных (без фото и применимости) и с очень длинной применимостью. Если все три читаются и не разваливаются, шаблон выдержит реальный каталог.
Состояния, которых нет на красивой картинке
Именно они чаще всего вызывают правки после того, как макет «уже согласован». Запросите их отдельными экранами:
- товара нет в наличии: что видит покупатель вместо кнопки (аналоги, «сообщить о поступлении», звонок);
- автомобиль не выбран или не найден в базе;
- поиск по номеру без результата: подсказка про пробелы, дефисы и другой формат записи номера;
- очень длинное название и номера: переносятся, обрезаются или сворачиваются;
- нет фото: понятная заглушка, а не пустой квадрат;
- таблица применимости и фильтры на экране телефона.
Как уложиться в два-три круга согласования
Первый круг: схема страниц без цвета и оформления, но с 5–10 реальными позициями из вашего каталога. Берите разные: ходовую деталь с десятками аналогов, редкую позицию под заказ, расходник без фото. Второй круг: дизайн ключевых экранов вместе с состояниями из списка выше. Третий круг: проверка на телефоне в кликабельном прототипе или готовой вёрстке.
Правки собирайте одним списком от одного ответственного. Различайте «не соответствует согласованному» и «появилось новое пожелание»: второе лучше оценивать отдельно по срокам. К первому кругу подключите менеджеров по продажам и склад: они знают, какие вопросы покупатели задают по телефону, и эти ответы должны быть на странице.
Проверочный список перед подписанием макета
- Понятно, откуда берётся каждое поле карточки и что будет, если оно пустое.
- Показана карточка с полными данными, с минимумом данных и с длинной применимостью.
- Есть экраны «нет в наличии», «авто не выбрано», «ничего не найдено».
- Выбор автомобиля доступен с главной, из списка товаров и из карточки.
- Оригинальные номера и аналоги различимы, их можно скопировать.
- Срок поставки и наличие указаны рядом с ценой.
- Мобильные версии нарисованы для фильтров, таблицы применимости и корзины.
- Все правки по итогам круга зафиксированы письменно и подтверждены.
