Проверить

Распечатано из Asana
дизайн — раздел "Карточка"
Юрий: Проверить дизайн — раздел "Карточка"
С прототипу карточки нужно подробнее разобраться — одна из самых важных страниц на
сайте. Хотелось бы тоже взять реальный продукт и на его примере показать, как будет
выглядеть прототип с учетом максимальной детализации. Сейчас, к сожалению,
информации о продукте в прототипе не вполне достаточно.
1. Характеристики товара:
— (*) Название продукта (про длину названия было здесь Проверить дизайн — раздел
"Бренд" в п.6)
— (*) Короткая характеристика продукта (оно же используется при отображении
карточек товаров в разделе "Бренд"). Например: "Эффективно увлажняет и
тонизирует кожу", "Надежная защита от ультрафиолета для нежной, восприимчивой
кожи губ", "Интенсивное увлажнение и восстановление защитного барьера кожи",
"Надежная защита от вымывания цвета, уход за поврежденными волосами",
"Экстренная реабилитация, устранение морщин и пигментных неровностей" и пр.
— (*) Объем-Вес (штука, миллилитр или граммы) / Цвета — и к ним привязаны
Картинки / Артикул — это важные особенности косметических товаров. Все эти
параметры нужны в карточке товара и они зависят друг от друга. Различные товары
имеют различные характеристики (какой-то товар измеряется в штуках и имеет одну
картинку и артикул, а другой товар имеет 2 варианта объема и первый вариант
объема имеет 2 цвета, а второй 4 цвета — и для каждого такого сочетания или
варианта нужен свой артикул и свой набор картинок). Товар может иметь от 0 до 3
возможных объемов (напр. https://skinguru.ru/product=system4-bio-botanical-shampoo).
Несколько возможных вариантов цвета, причем нужно отображать их название (напр.
https://skinguru.ru/product=colorescience-loose-powder-foundation-brush-jar-spf20 или
https://skinguru.ru/product=microbeauty-ultrasonic-humidifier), возможно их сочетание
(напр. https://skinguru.ru/product=innovative-skincare-eclipse-spf-50). К каждому
сочетанию должны быть привязаны свои артикулы и свои картинки продуктов (их
может быть несколько). Так, продукт может не иметь ни цвета ни объема (напр.
https://skinguru.ru/brands/tizo/product=tizo-skin-recovery-kit), но при этом к нему
привязаны несколько фоток. А если есть объемы-цвета, то тут к каждому сочетанию
мы можем привязать картинки как выглядит флакон + как выглядит сам продукт.
Кроме того, каждое сочетание объем-цвет имеет свой артикул и цену продукта,
которые тоже нужно менять и показывать пользователю, если он выберет другой цвет
или объем. В нашем интернет-магазине все это выглядит так себе, потому что
понимание, что именно нужно приходило со временем и доделывалось уже на
коленке. А здесь можно изначально хорошо спроектировать. Что-то в этом пункте
много повторений получилось, но убирать не буду, надеюсь понятно объяснил.
— (*) Бренд-производитель
 — Оригинальное название. Оригинальное наименование необходимо для облегчения
поиска товара покупателями, которые не знают локализованное наименование.
— (*) Информация о наличии товара: В наличии (и тогда есть кнопка "Купить"), Нет в
наличии (и тогда нужно дать возможность подписаться на уведомление о появлении
товара), Нет в наличии (и тогда нужно показать рекомендованные замены, как здесь
напр. https://skinguru.ru/brands/system4/product=sistem-4-young-face-mask — это для
товаров, которые сняты с производства).
(*) Обязательные характеристики помечены звездочкой.
2. Сам текст с описанием товара тоже имеет следующие установленные разделы. Не все
продукты имею все эти разделы, но для бестселлеров мы стараемся максимально
подробно расписывать.
— Короткое описание средства на 2-3 абзаца. Там кратко описаны основное действие
продукта и его преимущества. Картинок и прочих медиаматериалов здесь нет.
— Как это работает? — Подробное описание на несколько абзацев о преимуществах
продукта.
— Что говорят? — Отзывы бьюти-блогеров и журналистов.
— Как применять? — Контент с особенностями применения продукта. Что именно и в
какой последовательности наносить.
— Что содержит? — Это более формализованный раздел, хорошо бы его как-то
графически отделить от текста карточки. Содержание: Картинка ингредиента +
описание ингредиента. Обычно ингредиентов от 3 до 7
— С чем сочетается? — Здесь нужно рассказать о линейках в которые этот продукт
входит и показать товары, которые можно приобрести в дополнение к нему. Ниже про
косметические линейки отдельно написал.
(*) Разделы с контентом, кроме самого текста могут содержать картинки / видеоролики
(мы с Vimeo их вставляем) / списки. Еще важный момент — это отзывы и цитаты блогеров/
врачей. Хорошо бы сделать их стандартными, а не пихать каждый раз в текст карточки, как
придется (вот, например https://skinguru.ru/product=rejudicare-aquaprime - их там много и
как-нибудь бы их скроллить или скрывать). Там в принципе, нужна картинка врача или
блогера, подпись, текст отзыва, ссылка на отзыв, если есть. Вот здесь, например,
https://petrovka-beauty.ru/procedures/botox что-то похожее есть от "Раткевич Марина
Владимировна" там где "Результат проявляется у всех по-разному...". И ниже еще есть
цитаты "Миладинова Екатерина Владимировна" и др. Но можно как-то лучше это блок
нарисовать, наверное. Вот еще есть вариант: "009.png" — похожий блок можно
использовать в разделе Проверить дизайн — раздел "Бренд" — чтобы собрать отзывы
врачей / пользователей о конкретном бренде. Еще вот такой хороший вариант "011.png" —
там отзывы собраны в карусель, чтобы не загромождать страницу и при этом могут
раскрываться вниз для отображение длинного текста.
Про косметические линейки. Линейка — это заголовок + короткое описание + сами
продукты, которые в нее входят. Обычно линейки имеют несколько шагов для каждого из
которых есть свой продукт (или один из продуктов на выбор). Смысл использования этих
линеек в том, что люди которые любят и знают один продукт с более высокой
вероятностью купят другие продукты, которые входят в линейку по их проблеме.
Вот пример линейки: Омоложение при первых признаках старения — Краткое
описание: Борьба с возрастными изменениями на первых этапах их появления:
разглаживание, увлажнение и питание — Подробное описание: Средства,
созданные специалистами RejudiCare, доказали свою эффективность, подарив
миллионам женщин ощущение собственной силы и красоты. Чтобы сделать
ежедневный уход за кожей максимально качественным, эксперты объединили ряд
своих разработок в универсальную серию под названием «Early Stage Anti-aging
Program» (легкое омоложение), обеспечивающую полноценную заботу.
Программа включает дополняющие друг друга продукты для кожи, подвергшейся
начальным возрастным изменениям. Комплексное использование средств серии
поможет устранить первые проявления старения: дряблость, мелкие морщины,
пигментные неровности и незначительное раздражение. Результатом
применения продуктов линейки станет восстановленная, гладкая и защищенная
кожа! — ... и далее в эту линейку входит уже конкретный набор продуктов. Один
и тот же продукт может входить в несколько разных линеек. Вот, как эта линейка
может выглядеть: https://skinguru.ru/line=134
Хотелось бы, чтобы люди при просмотре карточки товара видели косметические
линейки, в которые входит этот товар, с их кратким описанием. Кликнув по
линейке могли бы перейти к подробному описанию линейки. И хорошо бы уметь
ссылаться на эту линейку, т.к в карточке товара было бы полезно сказать, что вот
эта банка входит в эту линейку. И человек кликнув попадал бы в описание
линейки и с некоторой вероятностью мог бы приобрести другие средства,
которые эту линейку составляют.
Вот примеры линеек в карточке бренда (нижняя часть страницы): 
— https://skinguru.ru/brands/phyto-c
— https://skinguru.ru/brands/system4
— https://skinguru.ru/brands/rejudicare
Вот эти же линейки в виде отдельных страниц, чтобы можно было ссылаться на
них + для SEO-продвижения:
— https://skinguru.ru/line=28
— https://skinguru.ru/line=129
 Ну и в карточках товаров, собственно, чтобы стимулировать покупку
дополнительных товаров из линейки:
— https://skinguru.ru/product=system4-climbazole-shampoo-2
— https://skinguru.ru/product=rejudicare-pore-solution
— https://skinguru.ru/product=rejudicare-2-crm-sal
(*. ) см. дополнительно п.3 в Проверить дизайн — раздел "Бренд"
Скрыть старые комментарии
is isaevra@gmail.com создал(а) эту задачу. 15 сен
isaevra@gmail.com добавил(а) в «Разработка Beautix.ru». 15 сен

isaevra@gmail.com добавил(а) описание. Показать разницу 20 сен

isaevra@gmail.com mentioned this task in another task: Проверить дизайн — раздел "Бренд".
20 сен
isaevra@gmail.com изменил(а) описание. Показать разницу 22 сен
isaevra@gmail.com изменил(а) описание. Показать разницу 23 сен
isaevra@gmail.com изменил(а) описание. Показать разницу 26 сен
is isaevra@gmail.com добавил(а) вложение 26 сен

011.png · Загрузить

isaevra@gmail.com mentioned this task in another task: Проверить дизайн — раздел

"Сотрудничество". 4 окт
isaevra@gmail.com назначила задачу пользователю Юрий. 4 окт

Юр Юрий 3 нояб
 Здесь можете все смотреть

is isaevra@gmail.com 11 нояб
Спасибо, тут все хорошо вроде по структуре!
isaevra@gmail.com переместил(а) эту задачу из столбца «1 — Обсуждение» в столбец «2 —
Выполнение» проекта «Разработка Beautix.ru». 11 нояб
Юр Юрий 14 нояб
Отметьте, пожалуйста, тогда принятое.

isaevra@gmail.com переместил(а) эту задачу из столбца «2 — Выполнение» в столбец «4 —

Принято» проекта «Разработка Beautix.ru». 22 нояб

isaevra@gmail.com переместил(а) эту задачу из столбца «4 — Принято» в столбец «3 —

Проверка» проекта «Разработка Beautix.ru». 27 дней назад
isaevra@gmail.com изменил(а) название на «"Проверить дизайн — раздел "Карточка""». Показать
оригинал 27 дней назад
isaevra@gmail.com переместил(а) эту задачу из столбца «3 — Проверка» в столбец «2 —
Выполнение» проекта «Разработка Beautix.ru». 27 дней назад

is isaevra@gmail.com 13 дней назад

Спасибо за дизайн! На мой взгляд, это очень хорошо для прототипа, но для дизайна
карточка продукта должна быть гораздо более живой и детализированной. В таком
виде ее использовать не получится, это скорее заготовка. Карточка должна
визуально визуально подчеркивать и выделять различные разделы, чтобы ее было
интересно читать.
С учетом того, что чуть позже хотелось бы доработать этот сайт до нормальных
интернет-продаж, то карточка продукта является супер-важной.
Про верхнюю часть карточки:
1. Сможем ли мы использовать видеоролики наряду с картинками самого продукта?
Сейчас, часто используются всякие видеобзоры и видеотзывы и у нас тоже есть на
ряд продуктов. Т.е. хотелось бы их вместе с иллюстрациями самой банки листать и
запускать.
2. Еще вопрос по иллюстрациям продукта. У нас есть такие характеристики, как цвет
и объем. При их изменении пользователем, иллюстрации продукта тоже должны
меняться. Просто чтобы не забыть это пишу. Т.е. картинка может быть привязана к
следующим вариантам: "любой цвет и любой объем" (напр. видеообзор продукта мы
хотим показывать всегда, независимо от того по каким цветам и объемам клиент
щелкает), "определенный цвет и любые объемы" (напр. крупный план структуры
розовой пудры, а объемы у нее могут быть разные), "любой цвет и определенный
объем" (все продукты, которые имеют разные объемы, но не зависят от цвета),
"определенный цвет и определенный объем" (может быть и такая специфика). И
хорошо бы назначать картинкам признак "главная", чтобы мы могли контролировать,
что именно увидит пользователь в виде большой картинки, когда он кликнет на
другой цвет или объем. Артикул тоже меняется при изменения цвета / объема.
3. В описании выше в п.1 про "Объем-вес" написано "... несколько возможных
вариантов цвета, причем нужно отображать их название", т.е. в некоторых случаях
важно именно оригинальное название цвета и оттенка, но не везде. Если у цвета есть
имя, то нужно его где-то показывать, т.к. люди по нему ищут (пример:
https://skinguru.ru/product=colorescience-loose-powder-foundation-brush-jar-spf20)
4. Есть кнопка "Купить", но не предусмотрено отображение цены. Не на все продукты
мы хотим и будем показывать цены, некоторые будут без цен и без возможности
покупки на сайте (профессиональные продукты). Но некоторые мы бы хотели
продавать и предусмотреть в дизайне, отображение цены и скидки на цену очень
важно.
5. Нужно указать количество комментариев, если они есть. И по ссылке переходить в
нижнюю часть карточки, где они публикуются. Если комментариев нет, то показывать
информацию об этом и не нужно.
6. В исходном описании выше есть задача про "Оригинальное название". В
некоторых случаях, как, например, с этой пудрой:
https://skinguru.ru/brands/colorescience/product=colorescience-sunforgettable-loose-
mineral-eyescreen-spf-30 ее локализованное название "Пудра микронизированная
SPF 30", а оригинальное название "Sunforgettable Loose Mineral Eyescreen SPF 30" и
многие люди знают и ищут ее под этим названием. Поэтому мы и попросили
предусмотреть его отображение. В некоторых случаях, оно не требуется, но в
некоторых случаях сильно необходимо. В описании у этого поля нет звездочки
"обязательное", но это я написал в том смысле, что одни продукты могут его иметь, а
другие могут не иметь.
7. Можно ли "В наличии" сделать как-то более заметным и привлекающим внимание?
Или их как-то объединить в левом блоке с кнопкой стоимость доставки? А то сейчас
эти важные элементы раскиданы по разным сторонам и не особенно заметны, а и то
и то важная информация, которая людям интересна. И еще, если товара нет в
наличии, то нужна ссылка "Сообщить о появлении". Вот "Артикул" — не очень важная
и интересная информация, его можно так в правом углу и оставить без особого
отвлечения внимания.
Про блоки внутри карточки:
8. Кроме того, по некоторым продуктам у нас есть хорошие ролики, которые мы бы
хотели вставлять прямо в карточку, а не в верхний раздел, там где иллюстрации, а
где-то в средину карточки, между блоками. Вот, пример продукта у которого есть
неплохие ролики и которое мы бы хотели отображать в карточке:
https://skinguru.ru/brands/rejudicare/product=rejudicare-2-crm-sal
9. Раздел "Характеристики товара" в нашем случае лучше переименовать на "Что
содержит?", там мы указываем активные ингредиенты и даём их описание. Пример,
можно посмотреть почти на всех карточках, например, вот на этой:
https://skinguru.ru/product=rejudicare-aquaprime (в нижней части есть раздел "Что
содержит?"). Хотелось бы и здесь добавить к каждой строке красивые графические
элементы и возможность подробнее прочитать про входящий в состав продукта
активный ингредиент. У каждого ингредиента есть свое уникальное описание. Это
важные детали, т.к. потребители смотрят, что входит в продукт и что не входит в
продукт и это сильно влияет на их желание купить.
10. Раздел "Что говорят?" хотелось бы совсем иначе оформить. У нас далеко не у
всех продуктов есть видео-отзывы, а делать одну общую картинку-обложку на все
продукты это не очень хорошо. Тут как раз бы хорошо подошла горизонтальная
карусель с отзывами, чтобы можно было их скроллить влево и вправо и читать
отзывы всяких селебрити о продукте. И для такого селебрити-отзыва важна
фотография автора, его титул, напр. "Главный редактор журнала Vogue", ссылка на
ресурс или отзыв, если возможно. Хорошо бы это тоже на своем месте было в блоке,
а не в текст отзыва вписывать. Кстати, я про это в исходном описании выше
подробно писал, абзац, который начинается с "(*) Разделы с контентом" и даже
скриншоты прикладывал.
11. Раздел "Как применять?" У нас это почти всегда список и зачастую тут имеет
смысл сделать его нумерованным. Можно его как-то оригинально оформить? Может
буллеты-иконки сделать или вертикальную иерархию, как здесь:
https://shottr.cc/s/RR3r/SCR-20221216-p8jp.png - сейчас выглядит тоскливо.
12. Раздел "С чем сочетается" — это список других продуктов с которыми текущий
продукт хорошо сочетается, по какой-то причине. Было бы здорово, если бы здесь
был красивый список, где были бы небольшие фотки продктов + названиями
продуктов (это все можно подгрузить из наших карточек) + рядом текстово
описание, почему они хорошо сочетаются с текущим продуктом + какая-то кнопка
или может ссылка для понятного перехода в карточку этого "сочетающегося" товара.
 13. Раздел "Что пишут?" это как правило про социальное доказательство: какие-то
скриншоты-фото-пруфы с различный сайтов и формумов/блогов + URL-пруф. Т.е. там
текст не нужен, там важна картинке + ссылка и таких материалов может быть много,
хорошо бы и их скроллить и при нажатии увеличивать, т.к. может потребоваться
прочитать, что там собственно написано.
14. Раздел "Линии". Я в исходно описании очень постарался расписать подробно, но
получилось в итоге не совсем то. Каждая линия состоит из этапов, т.е.
последовательное применение продуктов для достижения цены. Нужно показать
краткое + краткое описание линии (как она решает проблему) и какую-то ссылку или
кнопку для перехода на страницу самой линии (мы про эту страницу забыли, я в
исходном описании выше в описании в разделе "Про косметические линейки" про
это писал и что это важно для SEO-продвижения). Где-то на блоках или рядом с
блоками составляющими линию, нужно как-то показать номера этих этапов ("1 этап",
"2 этап", ...). Может затемнением поверх картинки продукта написать? Или над ними
сверху, чтобы было красиво? Сама карточка — это картинка-фотка продукта + его
наименование. Опять же, длинное наименование не поместится под такие маленькие
блоки, видимо их нужно сделать чуть крупнее, этапов обычно от 2 до 6. Далее
некоторые карточки-этапы состоят из нескольких продуктов на выбор, чтобы не
усложнять, можно где-то под карточкой писать "+ ещё 3 продукта". Вот тут можно
посмотреть на эти линии и этапы наглядно: https://skinguru.ru/product=rejudicare-
aquaprime И тут же видна проблема, которую мы в свое время не предусмотрели.
Один продукт может входить во множество линий и это выглядит плохо. Хотелось бы
показывать пару линий, а остальные линии скрывать за кнопкой "Показать все
линии".
15. Блок "Комментарии" по оформлению очень похож на блок "Как это работает".
Можно тут как-то более детально прорисовать? Дата гигантским шрифтом,
графические элементы бы какие-то, кнопки загрузки комментариев. У нас же на
других страничках тоже есть комментарии и это наверно должно быть
унифицировано и нормально отрисовано. А здесь где-то в заголовке карточки важно
показывать общее количество комментариев отзывов (если их больше 0). Если
отзывов нет, информацию о количестве отзывов показывать не нужно.
isaevra@gmail.com переместил(а) эту задачу из столбца «2 — Выполнение» в столбец «3 —
Проверка» проекта «Разработка Beautix.ru». 13 дней назад
Юр Юрий 10 дней назад
Передал дизайнеру