Дизайн карточек услуг и товаров: анатомия удачного блока

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

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

Разберём, из чего состоит удачная карточка, какие решения принимаются при проектировании, чем отличается карточка услуги от карточки товара и какие ошибки встречаются чаще всего.

Анатомия карточки: основные элементы

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

1. Изображение или значок. Первое, что считывает взгляд. Передаёт суть: вид товара, характер услуги, атмосферу.
2. Заголовок. Название услуги или товара. Должно быть понятным без пояснений.
3. Короткое описание. Одна-две строки, раскрывающие выгоду или главное отличие.
4. Ключевые параметры. Два-три факта, по которым выбирают: срок, размер, материал, формат.
5. Цена или её ориентир. Для товаров обязательна, для услуг желательна в виде «от».
6. Метки и статусы. «Новинка», «Скидка», «Хит», «Нет в наличии».
7. Призыв к действию. Кнопка или ссылка: «В корзину», «Подробнее», «Заказать расчёт».
8. Дополнительные действия. Избранное, сравнение, быстрый просмотр.

Главный вопрос — что можно убрать. Каждый дополнительный элемент отвлекает от главного. Многие карточки перегружены, потому что в них попытались вместить всё, что есть в базе данных. Лучше показать минимум для выбора и вынести остальное на страницу подробностей.

Изображение: половина успеха

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

• Единое соотношение сторон. Если фотографии разной формы, сетка выглядит неряшливо. Выбирайте одно соотношение (например, квадрат или три к четырём) и обрезайте все снимки по нему.
• Одинаковый стиль съёмки. Одинаковый фон, ракурс, освещение. Для каталога товаров лучше всего работает единый подход к фотографии, а не набор снимков от разных поставщиков.
• Различимость на малом размере. Мелкие детали в миниатюре теряются. Покажите главное крупно.
• Оптимизация. Десятки карточек на странице при тяжёлых картинках уничтожают скорость. Используйте современные форматы, адаптивные размеры и отложенную загрузку. Подробности — в статье про оптимизацию изображений.
• Вторая картинка при наведении. Для товаров, у которых важен вид с другой стороны, это быстрый способ дать больше информации.

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

Заголовок и описание

Заголовок должен отвечать на вопрос «что это». Не «Премиум-решение», а «Корпоративный сайт под ключ». Не «Модель Альфа», а «Диван угловой Альфа, ткань велюр». Креативные названия хороши на этапе знакомства с брендом, но в каталоге, где человек сравнивает варианты, нужна ясность.

Правила для текстов в карточках:

• заголовок умещается в две строки, длиннее — обрезается аккуратно, без потери смысла;
• описание содержит выгоду, а не повторяет название;
• числа и факты лучше эпитетов: «Запуск за четыре недели» убедительнее, чем «Быстрое решение»;
• тон соответствует остальному сайту, о чём мы писали в материале про тон коммуникации бренда.

Выравнивание высоты

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

Цена: показывать или нет

Для интернет-магазина вопроса нет: цена нужна. Она выделяется шрифтом, при скидке старая цена показывается зачёркнутой, а новая крупнее и ярче. Для услуг ситуация сложнее.

• Цена «от». Оптимальна для типовых услуг с понятным диапазоном. Она отсекает неподходящих клиентов и задаёт верхнюю планку ожиданий.
• Фиксированная цена за пакет. Подходит для стандартизированных предложений. Как оформлять такие пакеты, подробно рассказано в статье про блок с ценами и тарифами.
• Без цены. Допустимо для сложных индивидуальных проектов, но тогда нужны другие ориентиры: срок, состав, примеры работ. Посетитель, не увидевший никаких цифр, часто идёт к конкуренту, у которого они есть.

Более широко вопрос стоимости разбирается в статье из чего складывается стоимость разработки сайта, а на странице тарифов мы показываем, как мы сами решаем эту задачу.

Призыв к действию в карточке

Кнопка в карточке должна быть понятной и соразмерной. Для магазина это «В корзину» или «Купить», для услуги — «Подробнее» или «Рассчитать стоимость». Если кнопок в каждой карточке много, они перестают выделяться, и список превращается в «шум». Хорошее решение — одна основная кнопка и одно второстепенное действие в виде значка.

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

Карточка услуги и карточка товара: в чём разница

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

Состояния и метки

У карточки несколько состояний, и их нужно проработать заранее.

• Покой. Базовый внешний вид.
• Наведение. Лёгкий подъём, изменение тени или появление дополнительных действий. Помогает понять, что карточка кликабельна.
• Фокус. Заметная рамка при навигации с клавиатуры. Без неё пользователи, которые не используют мышь, теряются.
• Нажатие. Мгновенная реакция на касание.
• Загрузка. Скелетон вместо пустых мест.
• Нет в наличии. Приглушённый вид и вариант «Сообщить о поступлении».

Метки вроде «Хит» или «Скидка» привлекают внимание, но их количество ограничивают. Если «хитом» помечены половина товаров, метка перестаёт работать. Размещайте их в одном и том же месте, чтобы взгляд привык. Подробнее об анимации состояний — в статье про микроанимации.

Сетка, плотность и адаптивность

Карточки обычно раскладываются в сетку. На широком экране это три-четыре колонки, на планшете две, на смартфоне одна или две (в магазинах нередко две для компактности). Основные моменты:

• Одинаковые отступы. Зазоры между карточками по горизонтали и вертикали должны совпадать. Правила расчёта — в статье про сетку в веб-дизайне.
• Баланс плотности. Слишком тесно — взгляду не за что зацепиться. Слишком просторно — приходится много прокручивать. Подробнее — в статье о пустом пространстве.
• Приоритет контента при уменьшении. На мобильном экране в карточке остаются изображение, название, цена и кнопка. Дополнительные детали переносятся на страницу подробностей.
• Вариативность размеров. Для главной страницы допустимы крупные «героические» карточки рядом с мелкими, чтобы подчеркнуть приоритеты. Однако в каталоге однородность предпочтительнее.

Про особенности проектирования для смартфонов читайте в статьях про mobile first и про мобильную версию магазина.

Стиль оформления: рамка, тень, фон

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

• Рамка. Чёткая, строгая и хорошо видна на светлом фоне. Подходит для делового оформления.
• Тень. Создаёт ощущение объёма, но при избытке выглядит устаревшей и тяжёлой.
• Фон. Карточки на цветной подложке читаются мягко и нередко используются в современных интерфейсах.
• Без границ. В минималистичном оформлении карточки группируются только отступами. Требует безупречной сетки и качества фотографий. Об этом подходе — в статье про минимализм.

Единообразие скруглений, теней и отступов закрепляется в дизайн-системе, чтобы карточки на разных страницах выглядели одинаково. Об этом — в материале про дизайн-систему.

Типичные ошибки

• Перегруженность. Рейтинг, шесть характеристик, три кнопки, пять меток и значки в одной карточке. Выбирайте главное.
• Разные изображения. Снимки разных размеров, фонов и стилей разрушают ритм.
• Неясные заголовки. Фирменное название без пояснения, когда непонятно, что это такое.
• Невыровненные кнопки. Кнопки на разной высоте в одном ряду выглядят неаккуратно.
• Слишком мелкая область нажатия. Особенно на смартфоне.
• Нет цены, нет сроков, нет ориентиров. Человек вынужден заходить в каждую карточку, чтобы получить базовую информацию.
• Одинаковые акценты. Когда всё выделено, ничего не выделено.
• Отсутствие состояния «нет в наличии» или «временно недоступно». Посетители нажимают и разочаровываются.
• Забытая доступность. Недостаточный контраст текста на изображении, отсутствие подписей к значкам.

Как проверить, что карточка работает

Опираться на вкус при оценке карточек нельзя. Нужны данные.

1. Доля кликов по карточкам. Отношение переходов к показам каждой карточки в списке. Это покажет, какие позиции привлекают внимание.
2. Глубина прокрутки каталога. Если посетители уходят после нескольких первых карточек, возможно, первые элементы не подходят.
3. Тепловые карты. Видно, куда нажимают: на картинку, заголовок, кнопку или рядом.
4. A/B-тест. Сравнение двух вариантов карточки: с рейтингом и без, с ценой и без, с кнопкой и без. Принципы теста описаны в руководстве по A/B-тестированию.
5. Тест с пользователями. Попросите несколько человек выбрать нужное по карточкам и озвучить рассуждение.

Метрики, которые стоит отслеживать, подробнее описаны в статье про веб-аналитику.

Практический пример

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

Для сайтов услуг логика другая: в карточке важно показать результат и срок. Для логистической компании «Транзит Групп» мы выделили в карточках направление перевозки, типичный срок и «от какой суммы», что сократило количество пустых обращений.

Итог

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

Если вы хотите пересобрать карточки на своём сайте или спроектировать каталог с нуля, посмотрите, как у нас устроена работа над интернет-магазинами, изучите этапы разработки и напишите нам через страницу контактов.