Вы купили бы товар в интернет-магазине, не посмотрев на цену? В большинстве случаев, наверное, нет. И то, как она оформлена, оказывает влияние на клиента при принятии решения о покупке.
В этой статье – чек-лист по результатам анализа 150 интернет-магазинов. Как всегда, разберем все в деталях и с примерами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей здесь и в Telegram, делитесь этим материалом с коллегами.
Структура статьи
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
1. Цена товара
Хорошо выделена
Так как цена в большинстве случаев – один из ключевых элементов страницы товара, выделяйте её за счет размера шрифта, жирности и цвета.
![](https://habrastorage.org/getpro/habr/upload_files/1e7/0a5/03b/1e70a503b21ac9d534432f00d078c3d7.png)
В рамках первого экрана
Чаще всего цена – один из ключевых факторов принятия решения. Поэтому ее лучше отображать в рамках первого экрана, без необходимости прокрутки.
![](https://habrastorage.org/getpro/habr/upload_files/6cc/4b9/42e/6cc4b942e168af0fd60e535e13d9d754.png)
Привычно расположена
Разместите цену там, где клиенты ожидают ее увидеть в интернет-магазине: в правой части страницы (чаще – в правой верхней).
![](https://habrastorage.org/getpro/habr/upload_files/31d/31f/3a6/31d31f3a66acd74b76966382446fdae5.png)
![](https://habrastorage.org/getpro/habr/upload_files/335/f35/9cd/335f359cdb80dc97aba3479900f99968.png)
Видна всегда
Цена вместе с кнопкой покупки должна быть видна в любой момент прокрутки страницы. Так, чтобы клиент мог быстро ее уточнить и добавить товар в корзину.
![](https://habrastorage.org/getpro/habr/upload_files/695/526/199/69552619934f16335f4c182c3f94a738.png)
Отступы между порядками
Если отступов между тысячами и миллионами нет, цена будет хуже считываться – особенно если стоимость товара достаточно крупная.
![](https://habrastorage.org/getpro/habr/upload_files/c70/8fb/f8c/c708fbf8c1991f9bb20f5d649d1b5984.png)
Валюта указана символом
Чтобы разгрузить интерфейс страницы, можно заменить аббревиатуру валюты в цене на привычный символ. Большинство уже успело к нему привыкнуть.
![](https://habrastorage.org/getpro/habr/upload_files/8c5/d13/330/8c5d13330b91393cc8f19520394fbcaa.png)
![](https://habrastorage.org/getpro/habr/upload_files/c57/e45/a36/c57e45a36383467c99e39c632a8d9d6c.png)
Валюта визуально вторична
Валюта вторична (особенно на внутреннем рынке) и не должна оттягивать на себя внимание. Это можно отразить визуально:
![](https://habrastorage.org/getpro/habr/upload_files/347/0ce/93a/3470ce93a5ddba81b061a1f5f0ab80da.png)
![](https://habrastorage.org/getpro/habr/upload_files/be8/e28/52c/be8e2852c5361147e07e76c32a7663a3.png)
Валюта не мельчит
Хоть цена и вторична, но везде стоит знать меру. Символ валюты должен быть хорошо различимым и не должен слишком сильно мельчить.
![](https://habrastorage.org/getpro/habr/upload_files/56a/885/d49/56a885d49a1a5fc2e48c3c5fb3ee602f.png)
Без копеек, если товар недешевый
Если вы продаете товары, сумма которых исчисляется в тысячах, воздержитесь от указания копеек: это визуально утяжеляет цену и делает ее более громоздкой.
![](https://habrastorage.org/getpro/habr/upload_files/c0e/acb/bec/c0eacbbec60b8cd046a170645fdee29f.png)
Понятно, что это за цена
Особенно в случае с весовыми продуктами, которые могут идти в упаковке, поясняйте, за что указана цена: 1кг, 100г, упаковку. Иначе у клиента могут возникнуть вопросы.
![](https://habrastorage.org/getpro/habr/upload_files/eb9/f66/375/eb9f66375ea0f57c5caf437cdb8ca5a0.png)
Без чрезмерных пояснений
Однако там, где и так понятно, что цена указана за отображаемый товар, в явной форме это можно и не прописывать.
![](https://habrastorage.org/getpro/habr/upload_files/057/4bd/59f/0574bd59faea01d811171a5836cc7fbd.png)
Выделение цены обосновано
Если цена товара выделяется по сравнению с ценами на других страницах, поясняйте причину, чтобы у клиента не сложилось впечатление, что она выделена просто так.
![](https://habrastorage.org/getpro/habr/upload_files/d19/ed4/4c8/d19ed44c861b4ce097337faa1b6be9ee.png)
Без лишних параметров
Если мы хотим указать какие-либо дополнительные параметры, цена – не лучшее место для этого. Параметры можно указать отдельно вторичным текстом.
![](https://habrastorage.org/getpro/habr/upload_files/d9e/c1b/684/d9ec1b6841d7aa68f5d6884d3da831ed.png)
Корректная иерархия цен
Некоторые в порыве подсветить выгоду входят в раж и добавляют несколько новых цен. Если вы так делаете, привлекайте внимание к финальной, а не промежуточной цене.
![](https://habrastorage.org/getpro/habr/upload_files/8f9/a83/9c2/8f9a839c2a65f73761b29adae73b9840.png)
Цена за комплект
Если стандартно ваши товары продаются в комплекте, будет полезно, если рядом с ценой за единицу клиент также увидит и общую цену комплекта.
![](https://habrastorage.org/getpro/habr/upload_files/5de/f4b/27c/5def4b27cf471024fe48e1c632a81be4.png)
Цена vs. фото
Иногда для привлечения внимания компании размещают цену по акции прямо на фото товара. Акция может пройти, а фото поменять кто-то забывает:
![](https://habrastorage.org/getpro/habr/upload_files/ac4/7c7/f7f/ac47c7f7f3bf1aeed9231cbe48c503e7.png)
Без дублирования
По весовым товарам отображение стоимости за кг. или 100г. рядом с ценой оправдано и дает больше информации. Но зачем делать так для штучных товаров, не понятно.
![](https://habrastorage.org/getpro/habr/upload_files/9fe/34a/dfb/9fe34adfbcb610780a563e9f4bfd0225.png)
Не вводит видом в заблуждение
Не форматируйте цену, как кнопку, если при клике по ней ничего не происходит. Либо отображайте ее как текст, либо включайте ее в кнопку покупки.
![](https://habrastorage.org/getpro/habr/upload_files/9c6/920/c08/9c6920c08385b87567c26a2f760390aa.png)
Цена для членов клуба
Если по карте лояльности у вас отображаются другие цены, указывайте обе цены и снабжайте их ссылкой на регистрацию в программе лояльности.
![](https://habrastorage.org/getpro/habr/upload_files/637/6bc/075/6376bc075e64569d3c8a17490f2bc16b.png)
Без ложной персонализации
Не стоит говорить клиенту, это цена именно для него, если он первый раз заходит на сайт и не авторизован. Такой посыл будет звучать не совсем корректно.
![](https://habrastorage.org/getpro/habr/upload_files/d51/a15/a6a/d51a15a6adf0c691a42d8558e10eefe0.png)
Цен не слишком много
Пытаясь разместить все цены на одной странице товара – и новую, и старую, и цены каждого из возможных вариантов – вы лишь рассеиваете внимание клиента.
![](https://habrastorage.org/getpro/habr/upload_files/11d/b58/949/11db589493f6c42737951458eb7bc341.png)
Понятно, какова цена со скидкой
Если вы размещаете несколько скидок в блоке с ценой, убедитесь, что клиенту будет понятно, какова в итоге финальная цена. Вот здесь могут возникнуть вопросы:
![](https://habrastorage.org/getpro/habr/upload_files/e62/d80/0b6/e62d800b628052238ff486089c40fa14.png)
Без стартовой цены
На странице товара, где целевое действие – добавление в корзину, указывайте финальную цену. Какую сумму я добавлю в корзину, если ценник – «ОТ 8,549 р.»?
![](https://habrastorage.org/getpro/habr/upload_files/113/875/b3b/113875b3bdc721e70e24e2142f16ec82.png)
2. Старая цена
Применяется в случае скидок
Если при указании скидки вы не добавляете старую цену, может быть не совсем понятно, применена скидка к отображаемой цене или нет.
![](https://habrastorage.org/getpro/habr/upload_files/e74/1d2/f08/e741d2f08adaf727675520f096f6d89d.png)
Рядом с актуальной ценой
Разместите старую цену рядом с новой и выровняйте их по одной из осей, чтобы связь между ними легче считывалась.
![](https://habrastorage.org/getpro/habr/upload_files/bad/23b/d92/bad23bd92aa3b1956fdf56894d88043d.png)
Не прилипает к цене
При этом не стоит размещать старую цену слишком близко – так, что она начинает прилипать к актуальной цене.
![](https://habrastorage.org/getpro/habr/upload_files/dde/023/0e7/dde0230e79ed51967c01adde83cc7df9.png)
Визуально вторична
Сделайте старую цену визуально вторичной, чтобы клиенту легче было понять, какая цена старая, а какая – новая. За счет выцветания, размера и более тонкого шрифта.
![](https://habrastorage.org/getpro/habr/upload_files/401/83f/1f1/40183f1f145ad3bb61447895d50631f4.png)
Вторична по всем параметрам
В попытке создать разницу между ценами некоторые размер текста уменьшают, а цвет старой цены, наоборот, выбирают ярче. Лучше так не делать:
![](https://habrastorage.org/getpro/habr/upload_files/b03/f02/b69/b03f02b697273cff9ef1cd3effccd130.png)
Перечеркнута
Добавьте акцент тому, чтобы старая цена воспринималась, как уже не актуальная – перечеркните ее чертой.
![](https://habrastorage.org/getpro/habr/upload_files/b2b/453/8ae/b2b4538aec5534fc149c83156c0f614c.png)
Угол перечеркивания
Пусть это и звучит слишком детально, но обратите внимание, как сумма перечеркнута: если линия идёт под углом, старая сумма будет легче читаться. Вот 2 примера:
![](https://habrastorage.org/getpro/habr/upload_files/413/61c/233/41361c2337048e08119b040caad8a837.png)
![](https://habrastorage.org/getpro/habr/upload_files/b0f/552/2ca/b0f5522cae59a723d19493f7e03cb371.png)
Заметна
При этом слишком мелкой или блеклой старую цену делать не стоит. Клиент должен различить обе суммы, чтобы понять объем выгоды.
![](https://habrastorage.org/getpro/habr/upload_files/ce2/46a/c70/ce246ac7019ce91d5b03e098cdc6c6de.png)
Содержит символ валюты
Если мы добавляем символ валюты в новую цену, почему нам воздерживаться от того, чтобы не добавлять его в старую?
![](https://habrastorage.org/getpro/habr/upload_files/0b4/2cc/e08/0b42cce0856814edff9a8852b0764503.png)
В том же формате, что и новая
Еще один базовый момент: как форматируете новую цену, так же форматируйте и старую. У клиента не должно возникать никакого когнитивного диссонанса при их сравнении.
![](https://habrastorage.org/getpro/habr/upload_files/ccc/de8/fd4/cccde8fd4ed67d9f726c6b19f1c53fb4.png)
Без доп.подписей
Если старая цена визуально вторична и перечеркнута, она и так будет понятна. Поэтому добавлять к ней текст «Старая цена» излишне.
![](https://habrastorage.org/getpro/habr/upload_files/9e7/c7d/295/9e7c7d295937fae0943e9dd83febde86.png)
3. Скидка
Отображается
Если мы указываем лишь старую и новую цены, клиенту будет труднее понять, каков объем скидки. Не заставляйте клиента рассчитывать его самостоятельно.
![](https://habrastorage.org/getpro/habr/upload_files/3df/e21/cb7/3dfe21cb7166a6b457ebe20776bd5bf7.png)
![](https://habrastorage.org/getpro/habr/upload_files/902/828/938/902828938daabe499d15de86a4253ad4.png)
Не применяется в premium-сегменте
Там, где цена не так важна, не стоит аппелировать к механике скидок. Лучше донести до клиента ценность бренда, эстетику продукта и историю, стоящую за ним.
![](https://habrastorage.org/getpro/habr/upload_files/6a0/3c5/ace/6a03c5ace98a3d8d0e0171771fb8d387.png)
Рядом с ценами
Разместите скидку рядом со старой и новой ценами так, чтобы клиент получал ответ на вопрос «Какова разница цен?» ровно в тот момент, как обратил на них внимание.
![](https://habrastorage.org/getpro/habr/upload_files/843/950/ca7/843950ca7d2a389382fe56622cd210cf.png)
В виде маркера
Сделайте скидку в более визуальном формате маркера или купона, чтобы она лучше привлекала фокус внимания клиента.
![](https://habrastorage.org/getpro/habr/upload_files/bc1/758/137/bc175813740053a0e0a9979b198e7025.png)
Маркер легко читается
Убедитесь, что маркеры легко заметны, а текст внутри них хорошо читается. Если маркер слишком мелкий, это может затруднить его восприятие.
![](https://habrastorage.org/getpro/habr/upload_files/2d9/bc9/03f/2d9bc903fc73328d778b90a2cf2c5698.png)
Не в формате plain text
И наоборот, не отображайте скидку просто текстом так, что она вообще перестает выделяться на фоне. Вот так делать не стоит:
![](https://habrastorage.org/getpro/habr/upload_files/dd5/fb2/1b0/dd5fb21b0a51ce2c9d9a9a714cc4fd12.png)
Процентная скидка
Стандартно вы можете отобразить скидку в формате процента относительно базовой стоимости. Это будет легко воспринято и не вызовет никаких вопросов.
![](https://habrastorage.org/getpro/habr/upload_files/70e/05d/e89/70e05de895f1c474ffdb924566e66272.png)
Абсолютная скидка
Однако если сумма скидки достаточно крупная, еще при этом и круглая, можно в качестве альтернативы подсветить ее и в абсолютном формате.
![](https://habrastorage.org/getpro/habr/upload_files/cd4/585/336/cd458533600e1c145d74f8d33734db52.png)
Highlight оптовой выгоды
Если вы продаете товары в пачках разного объема и отображаете их как варианты на странице, выгоду можно подсвечивать отдельно по каждому объему.
![](https://habrastorage.org/getpro/habr/upload_files/69b/f8d/818/69bf8d818bf8d14d728195cfb82d0995.png)
В покупке оптом есть смысл
Но, возвращаясь к предыдущему примеру, вероятно, не стоит подсвечивать, что при покупке штучных товаров я получу скидку больше, чем при покупке целой упаковки.
![](https://habrastorage.org/getpro/habr/upload_files/175/d05/60a/175d0560a25c6af4f64cb425f65e77a8.png)
Скидка за комплект
Если вы используете комплекты, как элемент допродажи, разместите маркер скидки за комплект на первом экране страницы, чтобы привлечь внимание клиента.
![](https://habrastorage.org/getpro/habr/upload_files/aed/39b/4ac/aed39b4acb7435ecb599e72ab5ddd70d.png)
Есть повод – маркеры кликабельны
Если на странице товара есть блок, посвященный скидке (например, тот же комплект), при клике по маркеру заинтересованный клиент должен переходить к этому блоку.
![](https://habrastorage.org/getpro/habr/upload_files/bc4/6dd/ccf/bc46ddccfc7ee14dded774027c3907e9.png)
Без маркировки отсутствия скидок
Если скидок на товар нет, эту информацию можно донести, просто не размещая маркеры скидок и старые цены. Зачем отдельно писать, что скидок нет?
![](https://habrastorage.org/getpro/habr/upload_files/d0c/17f/1c9/d0c17f1c90c4c97f6cd015978e1854fa.png)
Без лишнего текста
Не снабжайте размер скидки чрезмерно большим текстом. Он может сыграть роль визуального шума и ухудшить восприятие самой скидки.
![](https://habrastorage.org/getpro/habr/upload_files/272/8ae/6bb/2728ae6bb9372a204abcb45130f00a50.png)
Без промо-кодов
Не утруждайте клиента запоминать промокод на странице товара и вводить его при оформлении заказа, чтобы получить скидку. Учитывать ее автоматически.
![](https://habrastorage.org/getpro/habr/upload_files/97f/832/65f/97f83265f8a4bf534cbc00ceacb7df21.png)
4. Элемент срочности
Крайняя дата
Повысить привлекательность предложения можно за счет создания эффекта срочности. Первый (ненавязчивый) вариант – снабдить маркер скидки датой окончания акции.
![](https://habrastorage.org/getpro/habr/upload_files/4d1/f35/3c4/4d1f353c4ab45f6e6dd0de72fba77044.png)
Информация при наведении
Дедлайн можно также отображать лишь при наведении на маркер скидки. Но важно понимать, что значительная часть клиентов в таком случае его просто не заметит.
![](https://habrastorage.org/getpro/habr/upload_files/d8f/9e4/6da/d8f9e46da59328dee3bf778f6bb58da9.png)
Всплывающее окно
Хорошо позволяет подсветить срочность. Главное, чтобы оно было небольшим, не перекрывало собой важные элементы и визуально вписывалось в интерфейс.
![](https://habrastorage.org/getpro/habr/upload_files/f34/637/803/f3463780348b4ff3cb84376b36e92b4e.png)
Таймер
В качестве аналога дедлайну можно использовать таймер. Он будет привлекать больше внимания за счет своей динамичности.
![](https://habrastorage.org/getpro/habr/upload_files/1b8/77c/05a/1b877c05a16cca03862edf2af3d2a003.png)
Выделяется не слишком сильно
При этом элемент не должен визуально «кричать» и чрезмерно выделяться. Иначе кроме отторжения такая навязчивость ничего не вызовет.
![](https://habrastorage.org/getpro/habr/upload_files/cd3/b52/adb/cd3b52adbe13b4fb2883c8e55cd17d88.png)
Легко воспринимается
Сформулируйте текст так, чтобы он нативно вписывался в интерфейс страницы, легко воспринимался и не вызывал вопросов у клиента.
![](https://habrastorage.org/getpro/habr/upload_files/a3f/f8c/46d/a3ff8c46d3d4aab949e005b09137576c.png)
Тайминг соответствует реальности
Используйте элемент срочности честно: если клиент заметит, что отсчет последних 12 часов акции продолжается каждый день, это будет воспринято, как обман.
To be continued...
Итак, в этой статье мы разобрали цену и скидки на странице товара. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Не забудьте подписаться на канал в Telegram и поделиться этим материалом с друзьями и коллегами по цеху. Будем на связи.
Комментарии (6)
vahmurka
16.11.2022 10:46Без дублирования
… Но зачем делать так для штучных товаров, не понятно…есть похожие товары, тот же чай или кетчуп (что угодно), может быть в разных упаковках (450мл/550г…) потому сайт пересчитывает до вменяемых минимальных величин, чтобы юзеру было удобнее сравнивать цену с другими похожими товарами… ну + небольшая психология, типа "чо вам жалко 1р за 1 салфетку?!"
Без стартовой цены
…Какую сумму я добавлю в корзину, если ценник – «ОТ 8,549 р.»?обычно такое только на товарах, где цена зависит от доп параметров (размер/вес и т.п.)… при выборе нужного юзеру параметра товара - ему отобразится его окончательная цена…
hardclient Автор
16.11.2022 11:21Привет, спасибо за комментарий!
По первому моменту соглашусь, что в некоторых случаях приведение к общему знаменателю сильно упрощает выбор и повышает удобство. Но пункт именно о том, что там, где отображение цены за единицу не несет дополнительной смысловой нагрузки (как на скриншоте), этот элемент можно скрывать.
По второму моменту да, вы правы: в данном случае у магазина к разным размерам товара применяются различные скидки
Но, как вижу, магазин от практики стартовой цены отказался – теперь просто пишет минимальную цену:)
catsmeatman
16.11.2022 13:10Добавить бы в обзор iHerb
hardclient Автор
16.11.2022 13:31Хорошая идея, спасибо, в следующих статьях буду включать + дополню эту статью, если найду моменты, которые не вписываются в текущую модель оценки.
mozhetbytpolozovsergey
это нейросеть какая то посты генерит?)
hardclient Автор
Нет)) Контент собирал последние несколько лет. С конца апреля этого года решил начать оформлять его его в виде статей у себя сайте. Узнал в отделе работы с пользователями Habr, можно ли разместить здесь – вот потихоньку делюсь. Надеюсь, читателям будет полезно.