Ольга Ломако
28 октября 2015
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Добрый день, Михаил.

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

В карточке нужно разместить следующую информацию о товаре:

  • изображение;
  • наименование (шкаф, стол, стул, диван и т. д.);
  • артикул;
  • размеры;
  • цвет (у товара может быть до 10 цветов), должна быть возможность выбрать цвет в карточке;
  • оценку;
  • старую цену;
  • новую цену со скидкой;
  • наличие на складе (в зависимости от цвета, товар может быть или не быть на складе);
  • количество приобретаемого товара;
  • «В корзину;
  • «В закладки»;
  • «К сравнению».

Хочется избавиться от графического и текстового шума в карточке товара и добиться максимальной информативности. Что бы вы посоветовали?


Ольга!

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

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

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

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

Хорошая вёрстка не решает задачу

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

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

Посмотрите, как делает Икея:

О текстовых блоках с иллюстрациями

Рабочие столы Икеи

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

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

P. P. S. Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Дима Кудинов
28 октября 2015

Ольга! Попробуйте сверстать карточку товара отдельно с помощью советов Артёма Горбунова по базовым элементам вёрстки. Общая картина каталога сразу станет гораздо более душевной.

Ну и в дополнение к совету Михаила — знаете, эпоха сферических товаров в вакууме потихоньку уходит в прошлое. Почему бы в карточке офисной мебели не использовать фотографии этой же мебели в естественной обстановке?

Оля Ломако
28 октября 2015

Михаил, спасибо большое за ваши комментарии и советы, они были очень полезны!

Специфика нашего мебельного интернет-магазина такова, что мебель, которая там продаётся, это некая система из модулей. Когда покупатель приобретает мебель (например, различные напольные и навесные шкафы на кухню, или столы, тумбы и шкафы в офис) он хочет, чтобы все эти модули подходили друг другу, были в едином стиле, в единых цветах и с одинаковой мебельной фурнитурой (ручки, ножки и прочее), для этого модули группируются в некие коллекции, например: коллекция мебели «А» состоит из 50 шкафов, 10 тумб и 20 столов различных форм и размеров, которые изготавливаются в 7 цветах и имеют определённую мебельную фурнитуру и технические характеристики, которые отличны от мебели из коллекций «В», «С» и так далее. Для примера, коллекции на сайте Икеи:

www.ikea.com/ru/ru/catalog/categories/departments/workspaces/series/
www.ikea.com/ru/ru/catalog/categories/departments/bedroom/series/
www.ikea.com/ru/ru/catalog/categories/departments/dining/series/


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

Если представить один товар разного цвета отдельными карточками, то это усложнит поиск и выбор покупателем необходимого ему товара: проще выбрать 1 кресло из 100 карточек разных моделей кресел, чем из 5000, где будет, например, по 50 карточек на одну и ту же модель кресла, которое производится в разных цветах и их оттенках.

На приведённом вами примере с сайта Икеи не совсем понятно, чем стол из коллекции Галант за 7599 руб. отличается от точно такого же стола из коллекции Галант, но за 8799 руб. Отличаются эти столы размерами, но какого они размера по фотографиям не понять, а ведь столы чаще всего выбирают именно по размерам. И здесь всего 2 стола Галант разных размеров, а если бы их было 20, то покупателю пришлось бы выбирать стол из 20 одинаковых фотографий, что опять усложнило бы поиск и выбор покупателем необходимого ему товара.

Дмитрий Кравчик
28 октября 2015

Сначала критика критики.

Артикулы очень часто бывают полезны, особенно в российских реалиях. И для меня (покупателя с большим опытом покупок в онлайне) их присутствие — несомненный плюс.

Размеры для мебели — это самая что ни есть первостепенная информация. Нередко даже важнее цены.
Наводить курсор на каждую карточку мне чрезвычайно лень, я хочу видеть сразу. И как сравнивать, ведь навести курсор на 2 карточки сразу нельзя? Выписывать на бумажку? Именно спрятанные размеры очень раздражают на сайте Икеи.

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

2. Икея это монобрендовый магазин, а у автора вопроса (как я подозреваю) мультибрендовый. Это существенно разные ситуации.

Однако карточка действительно перегружена, надо что-то убирать. Я бы посоветовал: 
— Артикул мельче и серым. 
— Название крупнее и жирнее. 
— Убрать плюсатор-минусатор количества. Вместо этого сделать как у книжного магазина Лабиринт — после первого нажатия кнопки «в корзину» она делится на две половины, «+1» и «оформить». Вряд ли кто-то покупает столы и шкафы такими огромными тиражами, чтобы страдать от невозможности ввести количество вручную.
— Цвет, наличие и «к сравнению» — в выпадайку или расширенную карточку, которая показывается при наведении.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть 1




Недавно всплыло

Как сделать плавный переход от общения с администратором к директору? 1 Это я неправ, что долго думал, или магазин, что допустил такую ситуацию? 3 Начальник считает, что перед встречей нужно обязательно разработать несколько вариантов предложений 6 Кто ты? 1