Материалы о дизайне

Как организовать параметры, преимущества и инструкцию на странице товара

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

Тематическая иллюстрация

На странице товара параметры, преимущества и инструкция по использованию часто оказываются на одном экране, и пользователь не понимает, на чём сосредоточиться. У этих трёх блоков разные задачи: параметры отвечают на вопрос «какие у него характеристики», преимущества — «почему стоит выбрать его», инструкция — «как им пользоваться после покупки». Порядок и вёрстка должны опираться на последовательность вопросов пользователя при просмотре страницы, а не на очерёдность получения материалов.

Сначала определите место каждого из трёх блоков

Можно рассматривать эти три блока как три разных уровня:

  • Преимущества: размещаются ближе к началу страницы и выполняют задачу «заставить пользователя захотеть читать дальше». Их не должно быть много — обычно три–пять, и каждое соответствует конкретному отличию, а не набору прилагательных.
  • Параметры: идут после преимуществ и перед инструкцией. Заинтересовавшись преимуществами, пользователь начинает сверять, соответствуют ли характеристики его потребностям, и таблица параметров оказывается как раз к месту.
  • Инструкция по использованию: размещается ближе к концу страницы или подаётся в свёрнутом виде, отдельными блоками. Её задача — снизить порог использования и уменьшить количество обращений в поддержку, а не продвигать товар.

Если сам продукт сложен по характеристикам (например, требует подбора или имеет несколько моделей), параметры можно вынести вперёд, даже перед преимуществами, дав сначала краткий обзор характеристик, чтобы пользователь убедился: «это то, что мне нужно». Насколько далеко вперёд — зависит от того, что пользователь смотрит раньше: характеристики или сценарии использования.

Как расположить таблицу параметров, чтобы её читали

Параметры проще всего превратить в плотную таблицу. Проблема обычно не в объёме информации, а в группировке и иерархии.

Можно разбить параметры на несколько групп: базовые характеристики, эксплуатационные показатели, материал и размеры, комплектация и упаковка, совместимость или область применения. Каждой группе — подзаголовок, внутри группы — порядок по значимости для пользователя, а не по порядку полей от производителя. Те пункты, которые чаще всего используются для фильтрации (размер, объём, мощность, подходящие модели и т. п.), ставьте в начало или выделяйте отдельно.

Единицы измерения в таблице должны быть единообразными: не пишите в одном месте миллиметры, а в другом сантиметры. Диапазоны значений, допуски, условия испытаний, если они есть в материалах производителя, указывайте как есть; если нет — не добавляйте от себя. Ограничители вроде «около», «максимум», «типичное значение» должны соответствовать данным, не превращайте диапазон в фиксированное значение ради красоты.

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

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

Формулировки вроде «высокое качество», «более долговечный», «новое обновление» не дают пользователю никакой информации. Преимущества лучше описывать как «какую конкретную проблему решает» или «в чём отличие от альтернатив».

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

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

Инструкция не должна превращаться в дисклеймер

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

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

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

Что подготовить перед заказом дизайна

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

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

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

Что проверять при приёмке

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

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

03 /

От знаний к практике

Планирование контента
01

Планирование контента

Адаптивные страницы
02

Адаптивные страницы

Развитие сайта
03

Развитие сайта