Как сделать сайт визуально дороже: аудит карточки товара
Как привести фото, типографику, отступы и состояния карточки к единому виду. Пример изменений и проверка читаемости без обещаний роста продаж.
Визуально более дорогой сайт обычно воспринимается как собранный и аккуратный: товар хорошо виден, текст имеет понятную иерархию, элементы выровнены, состояния интерфейса последовательны. Это впечатление субъективно. Его нельзя гарантировать покупкой шрифта, чёрным фоном или увеличением пустых полей.
Начните с одной типовой карточки, где встречаются фото, цена, варианты, доставка и действие покупки. Если её оформление согласовано, те же правила проще перенести на каталог. Общую приоритизацию задач разбирает улучшение магазина без редизайна; здесь задача — именно визуальная последовательность.
Зафиксируйте исходный вид
Сохраните изображения карточки на широком экране и телефоне, включая выбранный вариант, ошибку и отсутствие товара. Возьмите не только самую красивую позицию, но и товар с длинным названием или несколькими ценами. Иначе оформление будет работать лишь на демонстрационном примере.
Попросите человека найти модель, цену, выбранный размер, условия получения и кнопку покупки. Запишите, что он пропустил и где сомневался. Это исходные наблюдения для проверки; они не измеряют «премиальность» и не предсказывают продажи.
Текст: иерархия вместо множества акцентов
Выделите роли: название, цена, пояснение и вторичная информация. Назначьте им согласованные стили и повторяйте их на разных товарах. Когда скидка, цена, доставка и случайный бейдж одинаково крупные, взгляд не понимает, что читать первым.
Сдержанное оформление не означает мелкий бледный текст. В качестве критерия доступности уровня AA WCAG 2.2 задаёт контраст обычного текста не ниже 4,5:1, крупного — 3:1; определение крупного текста тоже берите из стандарта. Проверяйте реальные цвета и размеры, а не только образец палитры. Подробности цветовых ролей есть в выборе цветов магазина.
Сетка, фотографии и состояния
Выравнивайте связанные блоки по общим направляющим: название, цену, выбор варианта и кнопку. Отступ должен помогать видеть группы — например, цена ближе к условиям покупки, чем к случайной рекомендации. Универсального правильного числа пикселей для всех магазинов нет: проверяйте длинные тексты, переносы и узкий экран.
В галерее согласуйте фон, масштаб и кадрирование там, где это позволяет честно показать товар. Не растягивайте маленький предмет до размера крупного и не обрезайте важную часть изделия ради одинаковых карточек. Детали материала и комплектация могут требовать другого ракурса. Съёмка товара начинается с полезного изображения, а не декоративного фона.
Последовательность должна сохраняться при нажатии, фокусе, ошибке и ожидании. Если кнопка в одном состоянии округлая, а в другом меняет размер и сдвигает цену, аккуратность исчезает. Не скрывайте контур клавиатурного фокуса ради чистоты дизайна.
Учебное исправление одной карточки
В условной карточке вазы используются три декоративных шрифта, пять размеров вторичного текста, два масштаба фото и разные отступы у вариантов. Серое пояснение о доставке почти не читается. Цена и скидочный бейдж спорят за внимание.
| Изменение | Причина | Как проверить |
|---|---|---|
| Оставить согласованные роли текста | Упростить чтение иерархии | Название, цена и пояснения различимы |
| Согласовать масштаб предметных фото | Снизить случайные различия галереи | Форма и размер товара не искажены |
| Выровнять блок вариантов и покупки | Связать выбор с действием | Длинная подпись не ломает сетку |
| Усилить контраст пояснений | Сохранить читаемость | Контраст проверен на реальных стилях |
Это проект изменений, а не измеренный результат реального магазина. Если новая фотография выглядит эффектнее, но скрывает фактуру, верните информативный кадр. Если дополнительное свободное пространство уводит цену слишком далеко, уменьшите его: впечатление не должно мешать выбору.
Проверка после правок
Повторите исходное задание на той же карточке и ещё двух сложных товарах. Проверьте ширину телефона, увеличение текста, фокус с клавиатуры и выбранные варианты. Сравните конкретные затруднения до и после; улучшение впечатления не даёт оснований объявить рост конверсии без отдельного исследования продаж.