Товар

Товар
Товар является последним уровнем иерархии каталога.
Страница товара решает следующие задачи:
- предоставляет стандартную информацию о товаре, его полном наименовании, фотографиях,
видеоматериалах, характеристиках, артикуле и др.
- рассказывает о возможной выгоде при покупке товара — различные маркеры, представление
сниженной цены, скидке при наличии у покупателя дисконтной карты
- предлагает различные способы покупки товара: за деньги покупателя или в кредит
- предоставляет стандартные дополнительные возможности работы с товаром: добавление
товара к сравнению, распечатка ключевой информации о товаре, публикация ссылки на
страницу товара в социальных сетях
- представляет возможность подробного изучения отобранных товаров с помощью специального
интерфейса «Посмотрите поближе»
- отвечает на часто задаваемые вопросы о покупке и владении товаром: срок гарантии,
возможность возврата в течение 2 недель (по законодательству), доступность услуги
«moneyback», стоимость доставки и др.
- дает понимание об объёме и широте ассортимента магазина, предоставляет информацию о
наличие других цветовых решений товара и аксессуаров, подходящих для этого товара
- предоставляет информацию о наличие товара в магазинах города
- предоставляет информацию о списке доступных услуг для этого товара, пакетных предложениях
на услуги и их стоимость
- подкрепляет профессиональность компании наличием обзоров и статей, в которых есть
упоминание об этом товаре
- показывает уверенность компании в товаре, предоставляя покупателям возможность
публикации публичных отзывов о товаре
Благодаря богатству информации о товаре и дополнительных возможностях страница товара
проводит ассоциативную связь со стойкой консультанта в магазине, на которой покупатель
рассматривает, примеряет и оценивает снятые с витрины товары. Страница товара помогает найти
похожие товары, показывает разницу между отобранными, рассказывает об опыте использования
товара его владельцами, помогает подобрать необходимые аксессуары и многом другом.
Страницу товара можно разделить на 2 условных блока: блок заголовка и блок вкладок.
Блок заголовка
Верхний блок страницы товара имеет следующее представление.
Представление и поведение хлебных крошек идентично экрану подкатегории, за исключением
того, что название подкатегории является ссылкой на экран подкатегории, нажатие на которую
осуществляет переход без применения каких-либо фильтров характеристик.
Название товара занимает не более двух строк (удовлетворяет названиям всех товаров каталога на
момент написания спецификации). Под названием товара размещается вспомогательная
информация: артикул и все имеющиеся у товара маркеры (в строку). При наведении указателя
78
мыши на маркер появляется всплывающий блок с текстовой подписью к маркеру — аналогично
поведению вспомогательного меню на главной странице.
В правой части блока находится блок «Посмотрите поближе», имеющий следующую логику
представления:
- под заголовком «Посмотрите поближе» выводится текстовое пояснение следующего
содержания «{Название подкатегории в родительном падеже}, которые вы отобрали»
- в блоке показано 5 товаров, отобранных покупателем на экране подкатегории
- главное изображение товара, на странице которого находится покупатель, соответствуют
центральному (большего размера) изображению в блоке
- порядок изображений в блоке соответствует порядку отобранных на экране подкатегории
товаров (в зависимости от установленной покупателем сортировки). Порядок сортировки —
слева направо.
- полученная покупателем на экране подкатегории выборка товаров представляется в цикле,
таким образом, чтобы главное изображение просматриваемого товара всегда находилось в
центре блока
- изображения товаров не являются ссылками, переход на экран «Посмотрите поближе»
осуществляется нажатием на любую точку площади блока
Исключения из стандартного поведения:
- если покупатель на экране подкатегории отобрал менее 5 товаров, то в блоке показано столько
изображений, сколько товаров он отобрал, при этом правило представления просматриваемого
товара в виде крупного изображения по центру сохраняется.
- если покупатель отобрал два товара, то второй товар показывается справа от изображения
просматриваемого
- если покупатель перешел по прямой ссылке на страницу товара или результатом выборки на
экране подкатегории является только один товар, блок получает заголовок «Похожие товары»,
текстовое пояснение под заголовком не выводится. В этом случае товары, с которыми будет
происходить сравнение, подбираются автоматически, исходя из связей, установленных
администратором сайта. Количество таких товаров также определяется администратором.
Правило представления просматриваемого товара в виде крупного изображения по центру
сохраняется. В данном случае не допускается сравнение товаров из разных подкатегорий.
Представление блока «Похожие товары» показано на странице принтера.
Для товара, связи которого не определены, блок не выводится.
Блок вкладок
Блок вкладок переключает представление основной части страницы товара. Принцип
переключения вкладок идентичен принципу переключению вкладок на главной странице с
эффектом пролистывания.
Вкладкой, выбранной по умолчанию, является «Описание». Эта вкладка содержит главную
информацию о товаре, тогда как остальные вкладки: «Характеристики», «Обзоры и статьи»,
«Отзывы» и «Аксессуары для этого {тип товара}» несут вспомогательную информацию.
79
Вкладка «Описание»
Вкладку «Описание» можно условно разделить на 3 блока: блок информации о товаре, блок услуг,
которые могут быть необходимы покупателю товара (отсутствует у ряда товаров), и блок наличия
товара в магазинах.
В блоке информации о товаре слева показана вся ключевая информация о самом товаре
(фотографии, ключевые характеристики, краткое описание), тогда как справа показана
информация, необходимая для его покупки, а также элементы взаимодействия с ним (помещение
товара в корзину, оформление кредита на товар, добавление и удаление товара из сравнения,
ссылка на версию страницы для печати и т.д). Правый блок прокручивается вместе с контентом
страницы, не наезжая на закладки «Умный поиск» и «Спросить сейчас».
Блок информации о товаре и блок услуг имеют следующее представление:
Фотографии и видеоролик товара
По умолчанию выбрано первое (слева) изображение товара — главное изображение. В качестве
главного изображения рекомендуется использовать наиболее выгодное с точки зрения маркетинга
изображения общего вида товара. Запрещается размещение дополнительных надписей, иконок и
прочих элементов на изображениях товара.
Переключение изображений товара осуществляется без перезагрузки страницы нажатием на
превью изображений товара, находящихся под главным изображением. Выбранное изображение
80
отображается на месте главного. В одном ряду предполагается размещение 4-х превью, однако
если изображений товара больше, их превью размещаются в несколько строк.
Видео и размещается в правой части первого ряда превью изображений и имеет особое
представление. Просмотр видео осуществляется на месте выбранного изображения и может быть
развернуто на полный экран (рекомендуется использовать видеоролики, размещенные на
YouTube).
Просмотр увеличенного изображения товара осуществляется нажатием на выбранное
изображение (действие по повторному нажатию на превью изображения не предусматривается)
Просмотр увеличенного изображения имеет следующее представление:
- изображение товара и ленты превью изображений вместе занимают 100% высоты видимой
области окна браузера
- показанное изображение выровнено по центру блока просмотра увеличенного изображения и
занимает 100% его высоты (за вычетом высоты ленты), если размер исходного файла
81
изображения это позволяет. В противном случае изображение показано в 100% своего
размера.
- переключение между изображениями товара осуществляется с помощью элементов листания,
расположенных по бокам показанного изображения, нажатием на ленту превью изображений,
расположенную под показанным изображением, либо нажатием на площадь показанной
фотографии в соотношение 40 к 60 (40% левой части фотографии — выбор предыдущего
превью товара, 60% — следующего превью). Смена изображения осуществляется с элементом
пролистывания. При просмотре первого и последнего изображения товара левые и правый
элементы листания соответственно отсутствуют.
- закрытие режима просмотра увеличенного изображения осуществляется нажатием на элемент
закрытия, расположенный в правом верхнем углу видимой области окна браузера или
нажатием клавиши «Esc» на клавиатуре
В блоке «Есть и другие варианты» показаны другие цвета просматриваемого товара. Нажатие на
цвет осуществит переход на страницу такого же товара в выбранном цвете (переход на другую
страницу обусловлен принципом хранения товаров в базе, когда два одинаковых товара разных
цветов имеют разные артикулы). Цвет просматриваемого товара в блоке не выводится.
В случае, если у товара отсутствуют другие цветовые решения, блок «Есть и другие варианты» не
выводится.
Краткие технические характеристики товара
- ключевые характеристики объединены по типам, значения разделены запятыми
- под ключевыми характеристиками выводятся 2 особенности товара. Рекомендованный объем
каждый особенности — не более 300 символов. Нажатие на ссылку «Все характеристики»
осуществит переключение на вкладку «Характеристики»
- под блоком ключевых характеристик выводится первые 300 символов описания товара. Обрыв
осуществляется без разрыва слов с добавлением троеточия. Нажатие на ссылку «Полное
описание развернет полный текст описания товара без смены вкладки. Блок получит
следующее представление:
Рекомендуемый объем полного описания товара — не более 1000 символов.
82
Сообщение об ошибке
Нажатие на ссылку «Сообщить об ошибке» покажет всплывающий блок, имеющий следующее
представление.
После ввода текста сообщения и нажатия кнопки «Отправить» выводится стандартное системное
уведомление (текст уведомления и письма представлены в разделе «Уведомления»), сообщение
отправляется на модерацию ответственному лицу.
Блок цены и дополнительных инструментов
Блок является плавающим, т.е. закрепляется при прокрутке страницы, не заезжая на уже
закрепленные элементы «Спросить сейчас» и «Умный поиск».
В следующих состояниях блок имеет отличия в представлении и сценариях использования:
- товар в наличие в городе нахождения покупателя (состояние по умолчанию)
- товар со специальным (ценовым) предложением
- товар отсутствует в городе нахождения покупателя, но может быть заказан
- товар закончился
- предзаказ товара
- товар поставляется под заказ
Товар в наличие в городе нахождения покупателя ?состояние по умолчаниюA
Для большинства товаров каталога блок цены и дополнительных инструментов имеет следующее
представление.
83
Скидка
Нажатие на значок вопросика у цены со скидкой показывает стандартную подсказку с
информацией о способе получения этой скидки.
Наличие
Нажатие не ссылку «Есть в {кол-во магазинов} магазинах» (значение подставляется программно)
прокручивает страницу до блока наличия товаров в магазинах города.
Доставка
Нажатие на ссылку «Бесплатная доставка» показывает всплывающий блок с информацией о
доставке следующего представления.
Закрытие блока идентично закрытию стандартной подсказки.
Для товара, не удовлетворяющего условиям бесплатной доставки, блок имеет следующее
представление.
Нажатие на ссылку «Доставка от 500 руб.» (значение рассчитывается программно) покажет
всплывающий блок идентичный показанному на предыдущем экране с подробной информацией
о доставке.
Добавление в корзину
Нажатие кнопки «Купить» осуществляет фоновое добавление товара в корзину покупателя, при
этом label кнопки «Купить» меняется на «Купить ещё», а под кнопкой выводится текст «Этот товар (1
шт.) у вас в корзине», где слово «корзина» является ссылкой на страницу корзины.
84
Нажатие кнопки «Купить ещё» осуществит добавление в корзину ещё одного товара и смену текста
на «Этот товар (2 шт.) у вас в корзине». Максимальное количество добавлений одного товара (с
одним артикулом) в корзину — 99 шт. Добавление товара в корзину осуществляется без
перезагрузки.
Оформление заявки на кредит
Нажатие кнопки «Кредит» осуществит открытие всплывающего блока оформления заявки на
кредит следующего представления.
В блоке заявки на кредит все поля являются обязательными для заполнения.
Кроме заполнения полей необходимо из раскрывающегося списка выбрать магазин (в городе
нахождения покупателя), в который в случае одобрения заявки будет необходимо предоставить
85
документы (подставляется автоматически, если на странице настроек выбран магазин для
самовывоза).
Далее необходимо выбрать один или несколько банков (не выводятся пока не выбран магазин в
списке выше), в которые покупатель хочет подать заявку, установить флаг согласия на обработку
персональных данных и нажать кнопку «Отправить заявку».
В случае успешного оформления заявки выводится стандартное системное уведомление, блок
получает состояние по умолчанию.
Добавление к сравнению
Любой товар каталога может быть добавлен к сравнению нажатием на ссылку «Добавить к
сравнению». Блок товара, добавленного к сравнению имеет следующее представление.
Нажатие на ссылку «Сравнить» ({количество товаров в сравнении}) осуществит переход на
страницу сравнения товаров. Нажатие на ссылку «Убрать из сравнения» удалит товар из
сравнения, блок получит состояние по умолчанию.
Распечатка страницы
Нажатие на ссылку «Распечатать» откроет стандартную форму вывода страницы на печать.
Представление страницы товара для печати показана в разделе «Версии для печати».
Товар со скидкой
Для товаров со специальным предложением блок цены и дополнительных инструментов имеет
следующее представление.
86
Под ценой выводится дата, до которой действует это предложение.
Товар отсутствует в городе нахождения покупателя, но может быть заказан
Если в регионе покупателя товар отсутствует, но есть в Санкт-Петербурге или на центральном
складе, то блок цены и дополнительных инструментов имеет следующее представление.
Такой товар может быть куплен и оплачен точно также, как и товар, имеющийся в наличие в
регионе покупателя. На него также может быть оформлен кредит.
На странице товара, отсутствующего в городе нахождения покупателя, блок «Этот товар в наших
магазинах» отсутствует.
Товар закончился
Для товаров, временно отсутствующих в наличие, но не выведенных из ассортимента магазина
блок цены и дополнительных инструментов имеет следующее представление.
Для оформления заказа на покупку закончившего товара покупателю необходимо указать свое
имя (не обязательное поле) и телефон или электронную почту (обязательное поле). Количество
товара при оформлении заказа не указывается.
После успешного оформления заказа выводится стандартное контекстное уведомление. Блок
получает следующее представление.
87
На странице отсутствующего товара, блок «Этот товар в наших магазинах» отсутствует.
Предзаказ товара
Для товаров, доступных для приобретения по предзаказу, блок цены и дополнительных
инструментов имеет следующее представление.
Над формой оформления предзаказа выводится информация о дате начала продаж и оставшемся
количестве этого товара (может отличаться в разных регионах).
Для оформления предзаказа покупателю необходимо указать свою электронную почту и телефон
(оба поля являются обязательными для заполнения). Количество товара при оформлении
предзаказа не указывается.
После успешного оформления предзаказа выводится стандартное контекстное уведомление. Блок
получает следующее представление.
88
На странице товара, доступного по предзаказу, блок «Этот товар в наших магазинах» отсутствует.
Товар поставляется под заказ
Для товаров, поставляемых под заказ, блок цены и дополнительных инструментов имеет
следующее представление.
Для оформления заказа на покупку товара, поставляемого под заказ покупателю необходимо
указать свое имя (не обязательное поле) и телефон или электронную почту (обязательное поле).
Количество товара при оформлении заказа не указывается.
После успешного оформления заказа выводится стандартное контекстное уведомление. Блок
получает следующее представление.
89
На странице товара, поставляемого под заказ, блок «Этот товар в наших магазинах» отсутствует.
90
Блок услуг
Страницы товаров, которым оказываются услуги, (подкатегории таких товаров определены в
разделе «Данные») во вкладке «Описание» под блоком информации о товаре имеют блок услуг.
Заголовок блока формируется по следующей формуле: «Услуги по обслуживанию {подкатегория в
родительном падеже}. На стадии реализации необходимо определить родительный падеж всех
подкатегорий, товарам которых могут быть оказаны услуги.
В зависимости от наличия или отсутствия пакетных предложений услуг для товара блок может
иметь разные представления.
Если у товара есть пакетные предложения услуг (помимо услуг, оказываемых отдельно), то блок
имеет следующее представление.
В состоянии по умолчанию выводятся только пакетные предложения услуг.
Нажатие на кнопку «Заказать» осуществит добавление пакета услуг в корзину, label кнопки
поменяется на «Заказать ещё» (стандартное поведение кнопок «Купить» / «Заказать»).
При наведении на площадь блока пакетного предложения (вне зависимости развернут блок услуг
или нет) появляется всплывающий блок пакета услуг, в котором в виде текста перечислены все
входящие в него услуги. Ссылка «Описание входящих услуг» осуществит переход на страницу
«Услуги» с последующей прокруткой страницы до выбранного пакета.
Нажатие на кнопку «Показать все услуги» развернет полный список услуг, доступных данном
товару.
91
В отличие от представления страницы «Услуги» на странице товара все услуги, входящие в пакеты,
но доступные для заказа отдельно, показаны в списке под пакетами.
Обратное сворачивание блока в состояние по умолчанию не предусматривается.
При наведении на услугу в списке (вне зависимости развернут блок услуг или нет) появляется
всплывающий блок услуги, имеющий следующее представление.
92
Если у товара нет пакетных предложений услуг, то в свернутом состоянии блок имеет следующее
представление.
Нажатие на кнопку «Показать все услуги» развернет полный список услуг, доступных данном
товару.
93
Блок «Этот товар в наших магазинах»
Блок наличия состоит из карты и связанных с ней списками магазинов. По умолчанию на карте
показан выбранный город покупателя таким образом, чтобы все магазины были видны без
изменения масштаба карты.
В зависимости от списка, в котором находится магазин, он имеет ту или иную метку. Нажатие на
метку магазина на карте (при наведении метка увеличивается) осуществляет выбор магазина в
списке с прокруткой страницы. При выборе магазина в списке прокрутка к карте не
осуществляется.
В верхнем списке у каждого магазина показан его режим работы в день просмотра страницы
покупателем. При наведении указателя на магазин в обоих списках выводится полная информация
о режиме работы магазина.
94
Выбор магазина в верхнем списке откроет форму бронирования товара.
В выбранном состоянии выводится полная информация о режиме работы магазина.
Для бронирования товара необходимо заполнить «Телефон» (обязательное поле), указать
необходимое количество товара (по умолчанию «1») и нажать кнопку «Забронировать». Поле «Как
вас зовут» не является обязательным для заполнения.
После успешного бронирования товара в магазине выводится стандартное контекстное
уведомление, блок получает следующее представление.
В блоке уведомления об успешном бронировании товара выводится следующая информация:
- заголовок «Забронировано. Бронь № {номер брони}»
- информация о том, что в ближайшее время с покупателем свяжется менеджер
- полная информация о магазине, в котором забронирован товар, включая адрес, телефон и
полный режим работы
- ссылка на страницу магазина
- информация на чьё имя оформлена бронь, контакнтый телефон покупателя и общая стоимость
заказа
- дата, до которой товар забронирован
- ссылка для страницу для печати заявки
95
Выбор магазина в нижнем списке откроет форму заявки привоза товара в другой магазин города
покупателя. бесплатно
Оформление заявки на привоз товара в выбранный магазин идентично бронированию товара в
верхнем списке.
После успешного оформления заявки на привоз товара в выбранный магазин выводится
стандартное контекстное уведомление, блок получает следующее представление.
Информация в уведомлении об успешно оформленной заявке привоза товара в другой магазин
идентична информации в уведомлении об успешно забронированном товаре в верхнем списке.
Исключением является только отсутствие даты, до которой товар забронирован.
Блок SEO-текста
Под всеми блоками может располагаться SEO-текст о товаре (не более 500 символов).
Использование ссылок, изображений и логического форматирования в SEO-тексте категорически
запрещено.
96
Вкладка «Характеристики»
Вкладка характеристик товара имеет следующее представление.
В левой части блока располагаются полные характеристики товара, сгруппированные по типам
характеристик. В отличие от представления на вкладке «Описание» значения характеристик не
объединены, каждому значение соответствует одна характеристика. В правой части блока
располагаются особенности товара.
В случае отсутствия у товара особенностей характеристики выводятся в 2 столбца.
97
98
Вкладка «Обзоры и статьи»
В правом верхнем углу названия вкладки показано количество статей и обзоров в ней. Во вкладке
показаны все обзоры, имеющие связь с товаром, без какой либо группировки. Связь обзора с
товаром устанавливается администратором. Обзоры отсортированы по дате публикации —
последний слева.
Во вкладке к стандартному представлению обзора добавляется его краткое описание в текстовом
виде. Объем описания не должен превышать 200 символов. Изображение и название обзора
является переходом на страницу обзора. При наведении на изображение обзора его название
окрашивается в розовый цвет.
Страница обзора или статьи является информационной. Правила оформления информационных
страниц описаны в разделе «Стандартные элементы интерфейса и поведения».
Для товаров, имеющих больший объем описания (как правило предоставляемый производителем
устройства), в котором также могут быть использована специальная верстка с заголовками,
изображениями, вставленными видео и другими элементами расширенного описания
предусматривается специальное представление вкладки «Обзоры и статьи», объединяющей
расширенный формат описания товара со стандартными обзорами и статьями.
99
Расширенное описания товара оформляется в соответствии с правилами оформления
информационных страниц, описаными в разделе «Стандартные элементы интерфейса и
поведения».
Справа в столбик выводятся обзоры и статьи, связанные с просматриваемым товаром.
Представление и правила сортировки идентичны стандартному представлению вкладки.
100
Вкладка «Отзывы»
В правом верхнем углу названия вкладки показано количество всех отзывов о товаре.
Вкладку «Отзывы» можно разделить на два условных блока: блок опубликованных отзывов и блок
публикации отзыва.
Блок опубликованных отзывов имеет следующее представление.
Над всеми отзывами показано среднее значение отзывов о товаре (рассчитывается как среднее
арифметическое между значениями всех оставленных отзывов).
По умолчанию во вкладке показано 5 последних отзывов о товаре. Имя автора отзыва не является
ссылкой ни на какую страницу, представление имени не зависит от состояния авторизации
покупателя, оставившего отзыв.
Нажатие на кнопку «Показать ещё отзывы» покажет 10 следующих отзывов о товаре.
Ссылка «Напишите отзыв» осуществляет прокрутку страницы до блока публикации отзыва,
размещенного под всеми показанными отзывами, и имеющего следующее представление.
101
Для публикации отзыва необходимо заполнить хотя бы одно из полей «Достоинства»,
«Недостатки» или «Комментарий». Заполнение поля имени и установка рейтинга являются
обязательными условиями для публикации отзыва. Если покупатель авторизован и в его профиле
указано имя, оно автоматически подставляется в поле «Как вас зовут». Никаких дополнительных
ограничений не предполагается.
После нажатия кнопки «Отправить отзыв» вместо блока публикации отзыва выводится стандартное
контекстное уведомление следующего содержания: «Спасибо. После проверки ваш отзыв будет
добавлен.», сам отзыв отправляется на модерацию и появляется на сайте только после проверки.
Для публикации отзыва авторизация не требуется, то есть любой посетитель сайта может оставить
отзыв о товаре. Может быть предусмотрен механизм временной блокировки на публикацию
повторного отзыва об одном товаре по IP пользователя.
102
Вкладка «Аксессуары для этого ноутбука»
Вкладка имеет значок, являющийся маленьким изображением товара, взятого из всех аксессуаров
этого товара случайным образом. Значок обновляется при каждой новой загрузке страницы
товара. Действия со значком не предусматривается.
Заголовок вкладки формируется по следующей формуле: «Аксессуры для этого {подкатегория в
родительном падеже}. На стадии реализации необходимо определить родительный падеж всех
подкатегорий каталога.
103
Аксессуары представлены в виде подкатегорий высокого визуального ранга (см. экран отдела). У
ряда подкатегорий за ненадобностью могут отсутствовать смарт-фильтры (например фильтр сумок
для ноутбуков по диагонали). Остальное поведение идентично подобному интерфейсу на экране
отдела.
Во вкладке могут размещаться баннеры, имеющие отношение к аксессуарам для этого товара. В
отличие от подобных баннеров на экране отдела, во вкладке не рекомендуется размещать более
одного баннера, при этом размер баннера не должен превышать одну ячейку. Баннер может
осуществлять переход, как к страницу акции, связанной с аксессуарами этого товара, так и к
определенной выборке аксессуаров для этого товара. Размещение баннеров, осуществляющих
переход к информации, не связанной с аксессуарами для этого товара, запрещено.
104