Обзор интернет-магазинов наших подписчиков. Часть 1. Карточка товара | Блог Конгру
Наш блог

Обзор интернет-магазинов наших подписчиков. Часть 1. Карточка товара

detailsВы согласны с утверждением, что карточки товаров являются самыми популярными страницами интернет-магазина? Проверьте сами — если это возможно, сгруппируйте посещения всех товарных страниц и сравните итоговое значение с числом посещений страницы, возглавляющей список самых посещаемых страниц.

Так или иначе, процесс убеждения начинается именно на карточке товара. Не на главной странице — там пользователь пытается разобраться, что здесь можно найти в принципе. Не в каталогах — там происходят процессы выбора и первичного сравнения. Именно на товарных страницах потенциальный покупатель знакомится с фотографиями товара, описаниями, условиями доставки и оплаты, рецензиями и отзывами и т.д. и принимает решение о первой микроконверсии — “Добавить в корзину” или нет.

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

Снимок экрана 2013-06-04 в 16.25.20

Так выглядит основной экран карточки товара интернет-магазина ДОМОСТИ.

Первое, за что цепляется взгляд — это фотография. И это отлично! В дистанционной торговле изображения почти всегда важнее текста. Плохо, что фотография всего одна и ее нельзя рассмотреть более близко (по клику открывается лайтбокс, в котором загружается та же фотография и кнопка “Купить”).

На каждой фотографии интернет-магазина присусутвует ярлык “Быстрая доставка”, однако совершенно непонятно, что это значит (по клику ничего не происходит).

Самые яркие элементы на странице — цена и кнопка “Купить”. Это правильно, так как они дополняют друг друга. Но вот строчка “Доступно со скидкой: 1 шт.”, расположенная сразу под ценой, непонятна — с какой скидкой? почему только 1 шт.? От этого приема так и веет манипуляцией.

Подробная информация о сроках доставки в правой части блока — отлично. Жаль, не обозначена ее стоимость. Ярлык с наименованием бренда находится слишком близко и воспринимается как часть блока доставки, но по клику уводит на другую страницу.

То, что ссылки “Самовывоз” и “Еще по России” открываются тут же — хорошо. Но ярлыки платежных систем лучше не прятать за ссылкой “Онлайн-платежи”, а показать сразу.

Достаточно ненавязчиво, но в тоже время убедительно реализован функционал UPSELL. Во-первых, в конце страницы есть блоки “Товары этой серии” и “С этим товаром просматривают”. Во-вторых, по клику на кнопку “Купить” в лайтбоксе рядом с уведомлением о только что добавленном товаре появляется блок “С этим товаром покупают”. В-третьих, блок “Разрешите предложить” на странице корзины. И хотя решение использования апселла на странице с корзиной является довольно спорным, дизайнерам удалось вписать его довольно органично (ссылка “Добавить в корзину” позволяет пополнить заказ не покидая корзины).

Снимок экрана 2013-06-11 в 11.37.31

Перед вами довольно лаконичная карточка товара интернет-магазина одежды Berkline.

Что здесь хорошо? Три конкурентных преимущества вынесены на свое видное место: бесплатная доставка, бесплатная примерка. “Гарантию качества”, конечно, следовало бы раскрыть получше, потому что в такая формулировка большинством потребителей воспринимается как пустой звук.

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

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

Чего этой карточке явно не хватает? Фотографий в контексте использования. Использовании модели в предлагаемой модели одежды (простите за каламбур) с дополнительным аксессуаром ответило бы сразу на несколько вопросов: на какую возрастную группу расчитано это платье, с чем его можно сочетать (из того, что можно купить в магазине). Справедливости ради отмечу, что часть товаров из ассортимента магазина представлена именно таким образом.

Отдельно в этой статье хотелось бы упомянуть такой сегмент “вкусных” интернет-магазинов как доставка еды. Карточки товара им даже не всегда нужны.

Снимок экрана 2013-06-11 в 12.25.45

На сайте ижевской компании Mama Pizza карточка товара технически есть, но, как нам кажется, ее мало кто находит — просто потому, что в ней нет особой потребности. Добавить пиццу в заказ можно тремя способами: 1) нажать кнопку “Заказать”; 2) перетащить понравившуюся пиццу в окошко “Ваш заказ” (метод drag&drop); 3) кликнуть по изображению пиццы, провалиться в лайтбокс с карточкой товара, изучить аппетитные увеличенные фотографии, выбрать добавочные опции и уже там нажать кнопку “Добавить в заказ”.

В блоке “Ваш заказ”, пока он пуст, показываются рекомендации новинок. Там же сообщается, что к оплате принимаются банковские карты. Жаль только, что информация о бесплатной доставке при заказе от 1000 рублей присутствует только в слайдере на верху страницы, строчка в блоке “Ваш заказ” была бы кстати.

Снимок экрана 2013-06-11 в 12.36.52

На сайте красноярской компании “Оригами”, специализирующейся на доставке японской еды, карточки товара нет в принципе. По клику на изображение блюда появляется увеличивается, а кнопка “Заказать” очень показательно пересчитывает сумму заказа.

Хотите больше примеров хороших карточек товара? Держите!

Хотите сделать процесс оформления заказа в своем интернет-магазине удобней и легче для посетителя и зарабатывать больше? Обратите внимание на новый видеокурс «Процесс оформления заказа в интернет-магазине от А до Я», созданный на базе четырехлетнего опыта Конгру.





  • Ivan

    Спасибо за разбор карточек!
    В Домости «доступно со скидкой» появляется при показе акционной цены (вместе со старой). Сейчас это баг, с обычной ценой не должно быть надписи.
    Ярлык бренда оторвался от названия — типа баг верстки :)

    Цену доставки не включал, потому что слишком много цифр и происходит перегруз. Возможно, нужно было скрывать по ссылке.

    • Светлана

      Иван, а вы специалист по юзабилити в Домости?

      • Ivan

        Первоначальный дизайн и юзабилити делала отдельная компания 2 года назад.
        Та карточка и upsell, которые сейчас видите — моя работа.

        • Светлана

          Судя по ссылке в футере, дизайн делали Турумбурум? У них в портфолио карточка товара выглядит более функционально и лаконично.
          У вас прекрасно получилось трансформировать хороший дизайн в посредственный. Показатели конверсии выросли хоть? :)

          • Ivan

            Старая карточка была с меньшим количеством информации и не влезала в 70% разрешения пользователей (обрезалась и фото и доставка).
            Не хоть, а выросла :)

          • Светлана

            А как вы измеряли факторы, влияющие на рост конверсии и зачем вам для этого требовалось разрешение пользователей?

            Если вы имеете в виду разрешение экрана, то можно было бы использовать якоря или адаптивную верстку (на данный момент сайт, судя по всему не адаптирован под мобильные устройства и планшеты), поскольку сейчас карточка по прежнему не влазит на экран 1024х768.

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

          • Ivan

            Я по тону комментария понял, что Вам больше нравится прошлая карточка, распинаться больше не надо :)

          • Зиенко

            а я тем временем проипал несколько лямов баксов)

    • Игорь

      Мне очень нравится магазин Домости, слышал о нем только хорошие отзывы. )

    • http://www.kongru.ru Петр Петипак

      Вот из-за обилия таких багов и складывается ощущение неопрятности. Особо привередливая часть посетителей перенесет это ощущение на всю компанию.

  • roman

    HomeMe.ru

    НИКОГДА больше НИ ЗА ЧТО не буду заказывать и никому не советую.

    Привезли ШКАФ вместо 19 часов в 15 (ультимативно, грозились уехать),

    пришлось бросать дела.

    Инструкция по сборке оказалась от ДРУГОГО шкафа, совсем не походящего на доставленный.

    Двери поцарапаны.

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

  • Александр

    А как вам вот такая карточка с конструктором блюда, от доставки китайской еды http://openkims.ru/
    Есть мысли как упростить такую карточку? Или что изменить, чтобы интерактивность состава блюда была доступнее?