Страница продукта (карточка товара) на сайте интернет-магазина

Приглашаем на VI конференцию "Электронная торговля – 2010", крупнейшее мероприятие по интернет-продажам в России и странах СНГ.

По понятным причинам мы не можем поделиться подробным содержанием докладов, которые будут озвучены 14 и 15 октября 2010 года, в ходе проведения "ЭТ-2010". Чтобы вы могли составить представление о содержании конференции, мы публикуем на Oborot.ru избранные доклады с "Электронной торговли – 2008".

Готовы платить за то, чтобы стать лучшим? Регистрируйтесь сейчас, пока есть места! Ближайшая конференция по интернет-продажам пройдет в Москве 14-15 октября 2010 года.

Основное назначение интернет-магазина понятно – нужно продать товар. Но случаются разные истории. Иногда интернет-магазин, организовав очень большой трафик посетителей, удивляется, что никто нечего не покупает. При первом же взгляде на него вдруг понимаешь, что клиента на этой странице встречает не тот товар, ради которого он шел, а, нечто другое – например, треть верхней части экрана занимает полный перечень позиций в каталоге: МР3 плееры, телефоны и т.д. И тогда пользователь, во-первых, не видит своего товара. Во-вторых, у него возникает очень много дистрактеров, отвлекающих его от его прямого мотива.

Иногда я рассказываю об этом в формате анекдота. Представьте, я захотел купить себе дорогой мобильный телефон. Я долго выбирал, какой процессор у этого телефона должен быть, какого производителя. И вот, наконец-то, я провел некоторые маркетинговые исследования, выбрал в "Яндекс.Маркете" выбрал, у кого этот телефон дешевле и отправился туда по прямой ссылке. Меня должна встретить кнопка "Купить", потому что цену я уже выбрал. И поставщика выбрал, и товар мне известен, но меня встречает список: mp3 плееры, аудиомагнитолы и т.д. И вдруг во мне просыпается совесть. Я говорю: "Какая же я свинья! Я себе собираюсь купить за $1 тыс. такое дорогое устройство, а жене mp3 плеер так и не купил, а обещал". И тут думаю, что их надо вместе совместить – заодно и плеер куплю – обосную покупку, и жена как-то легче отнесется к моей, дорогой. Отправляюсь за плеером и обнаруживаю, что они разного цвета, формы. Я понимаю, что этим вопросом не занимался и не готов сейчас выбирать. В результате время, которое я себе отводил на эту "партизанщину", пытаясь купить втайне от жены мобильный телефон, вышло, и я не купил ни mp3 плеер, ни телефон.

В том кейсе (а я сейчас говорю о конкретном сайте) кнопка "Купить" находилась за 3 экрана от начала страницы, она была нежно салатового цвета, очень маленькая по размеру. Мне показалось, что в этом была какая-то эмоция – "неудобно покупать, не надо покупать наши продукты. Оставьте их нам. Они такие хорошие" – или что-то другое.

Давайте посмотрим, давайте начнем листать. Вот 3 страницы товара, все они продают GPS приемники. Вот эта пунктирная линия – вы видите всю раскрытую страницу (чтобы вы представляли, как она устроена – пунктирная линия показывает место разрыва, "изгиба", как говорят на нашем жаргоне). Это при разрешении 1024 на 768 точек.

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

У этой страницы другие проблемы. Вы видите, насколько перегружена "шапка". И эта "шапка" воспроизводится на всех страницах, независимо от их назначения, на первой и внутри. Она "отъедает" почти половину рабочей области видимой части экрана.

Здесь чуть-чуть лучше. Кнопка "Купить" находится на самой границе изгиба. Есть высокая вероятность, что ее могут заметить. Здесь вроде все нормально – то есть, пользователя встречает основная часть информации, "шапка" легкая (но правда, все равно перегружена). Но маленькую ссылочку "В корзину" довольно трудно заметить.

Давайте посмотрим еще несколько примеров. Некоторые страницы интернет-магазинов очень длинные. Вот Softkey.ru – он, в этом смысле, какой-то бесконечный. Здесь я добавил другой новый элемент, два элемента. Кроме добавления пунктирной линии, я выделил красной рамкой "эффективную область страницы" – то, что связано с описанием товара, а зеленой обводкой показал те области, где отображается цена и есть кнопка "Купить".

Посмотрим на эту конфигурацию. Здесь общая рабочая площадь товара от всей страницы где-то 50%, как вам кажется? Информация, ключевая для покупки, находится опять за 2 экрана.

В интернет-магазине издательства "Альпина Бизнес Букс" все не так плохо. Здесь мы видим книжку по тайм-менеджменту и кнопку "Купить", они есть прямо на первом экране. Но в целом страница большая. В чем здесь проблема? Когда пользователь вошел, метафорично, в "туннель продажи" – покрутился на главной странице сайта, воспользовался поиском или каталогом, и вышел уже на цель, с этого момента (начиная со страницы товара уж точно) вы должны себе сказать – вот сейчас он точно стоит на входе того "коридора", который его приведет к кассе. Лучше, чтобы этот "коридор" не имел никаких лишних "дверей". Это нужно и пользователю и бизнесу, потому что в том – выдуманном – примере про телефон и mp3 плеер меня как раз сбили с толку – я оказался ни с чем, свою потребность не удовлетворил, и бизнес не получил свои деньги. Добавляя лишние, отвлекающие элементы, мы снижаем (хотя бы чисто математическую) вероятность того, что пользователь пойдет правильно.

Андрей Удалов [доклад] уже упоминал о "точках выхода", когда человек дочитал до конца, но не увидел кнопки "Купить". Представим себе поведение пользователя, который еще не уверен в своей покупке, на этой странице: он увидел цену, она его удовлетворила, он начал читать, и не может остановиться. Текст интересный, увлекает его и увлекает. Время выходит, в любой момент его могут прервать (телефонный звонок, пора бежать на совещание, бежать на работу) – есть вероятность, что посетитель не дойдет до конца. Но когда он дошел и должен зафиксировать свое желание, ему нужно совершить какие то экстра действия – вспомнить, где находилась кнопка "Купить", отскроллить обратно и дойти до нее. Если мы держим в голове модель пользователя, как будто он сверхчеловек, который все помнит, все может и работает безошибочно – наверное, это не проблема. Но наши пользователи, основная масса тех целевых аудиторий, с которыми мы работаем, простые люди. Для них все должно быть элементарно.

Другой пример – Allsoft.ru. Кстати, некоторые вышеперечисленные интернет-магазины, участвующие в конференции "Электронная торговля", подали заявку на возможное обсуждение своих сайтов, в том числе Allsoft.

Вот страничка с сайта "Комус", который, в данном случае, продает плоский монитор. В сравнении со всеми представленными вариантами страничка выглядит самой оптимальной.

Давайте я попробую теперь некоторый интерактив с вами устроить. Что не так в этой странице, как вы думаете? Какова ключевая проблема в этой странице? Вот, продается навигатор GARMIN 200, автоматический расчет маршрутов, 320 на 240 точек.

Комментарий из зала: Сказано, "самая маленькая цена", а самой цены не видно.

Где цена? Давайте поищем цену. Вот, цена в рублях, 7150 рублей. Кто больше?

Комментарий из зала: "Купить" нет.

Да, не видно кнопки "Купить". Спасибо. Давайте на этом закончим обсуждение страницы.

Вот кнопка "Купить". Она очень красивая. Мне она нравится, но только она не похожа на кнопку "Купить", это больше похоже на шахтерскую вагонетку. Неважно, на что похоже – она настолько гармонично слита вот с этой плашкой, что выглядит как запонка или пуговица, но на нее никак не хочется кликать. То есть еще нужно сообразить, что это – кнопка "Купить". Какой простой выход?

Комментарий из зала: Вопрос по предыдущему слайду, где длинная страница. Стоит ли дублировать эти блоки, либо делать что-то еще? Кнопочку "Наверх"?

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

Комментарий из зала: Мы столкнулись с подобной проблемой. Разместили кнопку ниже, в пустом пространстве, сделали квадратной и оранжевого цвета, на белом фоне. Через полгода эксплуатации посетители заявили, что теперь эту кнопку не могут найти, и мы 2 раза увеличивали размер этой кнопки. Все равно претензии покупателей остались. Кнопка достигла невероятных размеров, почти как само изображение.

Я предполагаю – просто сталкивался с такими вещами – иногда разработчики, иногда сам бизнес это стимулирует, в попытках увеличить размер кнопки, чтобы невозможно было промахнуться, добиваются обратного эффекта. Кнопка перестает быть кнопкой, она становится похожей, например, на рекламный баннер, а мы знаем, что у пользователей есть "слепота" к баннерам. У них возникает "туннельное видение", то есть они входят в режим покупки, и теперь будут стараться вытеснять всю отвлекающую информацию: "Я же иду за покупкой, а вы мне что-то стороннее предлагаете".

Поэтому у кнопки может быть несколько дефектов. С одной стороны, превышен размер, ожидаемый пользователем. Кроме того, есть зависимость от оформления – кнопка может не выглядеть кликабельной, казаться "плоской", и не передавать ощущения, что с ней можно взаимодействовать.

Такую проблему решить очень просто – давайте напишем рядом "Купить" или вариант, который мне не нравится так же, как и Андрею Удалову, "Добавить в корзину". Давайте вещи называть своими именами.

Следующий слайд. Что здесь не так? Да, есть перегруженные страницы. Область, не имеющая отношения к товару, занимает от четверти до трети видимой части экрана. Вижу здесь такие проблемы: ключевая кнопка оформлена в стиле остальных элементов, не интерактивных элементов. И поэтому она воспринимается как нечто, относящееся к этому бэкграунду, а не к товару. Лучше было бы ее оторвать от этого края.

Вторая проблема – есть очень яркая рыжая кнопка или иконка, которая притягивает к себе внимание, и пользователь читает то, что на ней написано. А на ней написано "Тонкий намек". Есть у кого идеи, о чем этот тонкий намек? Это переход в wish list, "лист пожеланий" – вы можете кому-то намекнуть, что хотели бы иметь такой телевизор и, может быть, получите его от этого человека в подарок. Но посмотрите – кнопки очень сильно конкурируют между собой. Может быть, человек уже сидел с деньгами и был готов с ними расстаться, чтобы заполучить телевизор. Теперь мы поменяли ему сознание и говорим: "А может быть, не надо тратить деньги? Может, лучше найти спонсора на эту покупку и тонко намекнуть ему?".

Первое назначение магазина – продавать. Конечно, есть неотделимая от этого сопутствующая функция – консультация, каждый продавец работает в качестве консультанта. Но здесь очень важно соблюдать баланс между консультированием и, собственно, самой продажей, потому что иногда бывает так, даже в реальном магазине, когда клиент уже подает намеки, бумажник теребит, а продавец говорит: "Здесь еще такая функция есть, такая функция…" Человек перегружен, ему нужно осознать полученную информацию – он разворачивается и уходит. Каждый это видел в жизни хоть раз, правда? Наши интернет-магазины часто делают такие вещи.

Следующая страница. Еще один пример для обсуждения. Любимые мои GPS-приемники (себе до сих пор так и не купил, кстати). Кнопка "Добавить в корзину" оформлена так же, как и текст. Кнопка серенькая и вообще не выглядит интерактивной. Вероятность того, что пользователь как-то сообразит, что с этим можно взаимодействовать.

Хотел бы предостеречь вас от суждения, что "пользователь знает". Тех, кто активно пользуются Интернетом, мы, отчасти, "испортили" – в хорошем смысле для нас. Мы научили их, что навигация слева, что кнопка называется "В корзину". И таких примеров довольно много, но каждый день Интернет пополняется молодежью, которая в этом смысле еще не "испорчена".

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

Люди, которые знают назначение кнопки "Купить", естественно, продвинутые пользователи. Но, если представить аудиторию в виде некоторой пирамиды, то эти осведомленные пользователи занимают ее верхушку – их меньше, чем пользователей в основании пирамиды. Чем мы больше будем повышать ясность этих базовых функций, тем больше мы будем повышать наши продажи.

Здесь бы я добавил про дурацкую борьбу с конкурентами, когда картинки портят, чтобы их не воровали. В данном случае безобидно испортили, логотип приклеили. В некоторых интернет-магазинах их нарочно замусоривают. Идет погоня за какими то второстепенными вещами – чтобы вдруг эту картинку никто не забрал… Ну пусть заберут, Бог с ними, зато представим свой товар наилучшим образом, чтобы клиент захотел его купить. Зачем же его портить?

Некоторые итоги. Нужно ориентировать описание товара на того покупателя, которому вы продаете. Общаясь с интернет-магазинами, я часто слышу: "А мы не вольны выбирать описание товара. Нам его представляет производитель. Более того, в некоторых случаях производитель обязывает, чтобы это описание не менялось, а было представлено, как есть". Иногда оно написано очень сложно. Например, если мы продаем молодым женщинам какую-то технику, то зачем злоупотреблять техническими деталями? Я не девушка и не очень молодая. Я, например, до сих пор в мобильных телефонах не очень понимаю некоторые диапазоны. В чем их разница?

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

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

Говорить на языке пользователя – банальность, но на этих банальностях мы и ломаемся. Пример, немного выходящий за тему представления товара – форма регистрации/авторизации, как показывал сегодня Андрей Удалов [доклад].

Мы упорно называем некое поле словом "Логин". Вы знаете, что вводят туда девушки? Говорить не прилично. Мы знаем это из юзабилити-тестирования, это девушки делают прямо у нас на глазах. Они вводят свое имя. Они вводят "Лена", а какими буквами? Русскими. Что им отвечает на это сайт? А сайт отвечает: "В поле "Логин" есть запрещенные символы". Очень понятно? Ей 20 лет, она – Лена. И теперь она стала запрещенной. Ну, они же привыкают, что мы их так все время "бьем палкой по голове" и догадываются, что нужно что-то такое сделать, "пошаманить". Она набирает Lena, латинскими буквами. На что ей сайт отвечает: "Пользователь с таким именем уже существует". Ей имя поменять? Смотрится все это довольно дебильно, а при этом есть более простой аналог – спросить адрес e-mail. Здесь путаницы не будет. Могут быть другие проблемы – она не захочет вам его давать ("Мы еще с вами не знакомы, а я должна давать адрес"), но не нужно запугивать ее.

Другой пример (надеюсь, что в интернет-магазинах этого не будет): для того, чтобы определить какую то функциональность, сайт предлагает девушке установить плагин. Она говорит: "Что делать? Устанавливать?" Я спрашиваю: "Ты бы в жизни стала бы его ставить?". Она отвечает: "Нет. Я боюсь вирусов". И это нормально. Нам нужно было объяснить, что это безопасно, что установка плагина – это безопасно. Давайте пользоваться теми словами, которые не пугали бы наших пользователей, иначе мы поступаем себе во вред.

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

Отзывы, даже негативные, повышают доверие к товару, потому что пользователь начинает спорить с негативными отзывами: "Все, что вы говорите – ерунда. Мне, конечно же, нужен этот ноутбук! Я никогда не буду его использовать так, как вы его используете. Я буду использовать по-другому". А что мы сейчас встречаем в русских интернет-магазинах? Хочу купить новую камеру, а там ссылочка "Отзывы". Кликаю на нее, а там: "Ура! Вы первый человек, который захотел написать отзыв об этой страничке".

Сперва я пожал плечами и пошел на другой сайт. Там то же самое, и в 5 местах то же самое. Я начинаю понимать, что это какая-то камера плохая, заговоренная, про нее никто не хочет что-либо говорить. Здесь неправильно организовано взаимодействие с пользователем. Спрашивать мое мнение о камере, если я ее еще не купил, нелепо. А человек, который купил, с высокой вероятностью не вернется сюда никогда.

Поэтому нужно думать, как взаимодействовать с человеком, купившим у вас эту камеру и, например, спросить его через 2 недели, что он думает о ней. Может, объединить это с программой лояльности и пообещать скидку за то, что он напишет о камере какой-то отзыв – то есть, есть возможности выйти за пределы этой страницы и не пытаться добиться от нее всего.

Важная вещь. Поскольку пользователь не может посмотреть на товар вживую, когда покупает через Интернет, есть большие требования к изображению этого товара.

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

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

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

Как показать, из чего состоит товар, если он наборный? Мы иногда продаем комплекты чего-либо, и здесь у пользователей возникает недопонимание: "Все ли тут изображено, что входит в продукт?". Если мы сделаем фотографию коробки, с уже собранным комплектом, то посетитель не поймет ее содержания. Иногда коробку делают разборной, и пользователей не понимает, какая же из этих деталей будет принадлежать ему.

Цена и валюта должны быть представлены как в каталоге, так и на карточке товара. Нужно показывать все дополнительные расходы, которые пользователь понесет, покупая этот товар, иначе он будет раздражен, узнав о них на поздних этапах. Есть вероятность, что тогда клиент обидится на ваш интернет-магазин и больше никогда не вернется. Дополнительные расходы (например, стоимость доставки, если мы не знаем, где находится пользователь) не всегда можно рассчитать, но об этом нужно, по крайней мере, думать и давать клиенту усредненное значение (или обозначить, что оно усредненное). Очень важно обозначение того, когда пользователь получит свой товар. Многие интернет-магазины это делают – показывают, что товар может быть отгружен в течение 2-3 или 20 дней, или изготовлен на заказ за 2 месяца.

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

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

Последний слайд. Карточка товара, взятая с сайта интернет-магазина компании "Комус".

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

В момент, когда вы представляете товар и говорите ему, сколько тот стоит, у пользователя должны быть основания, чтобы обосновать себе потребительскую ценность предлагаемого вами товара. Конкретно на этой странице "Комуса", по товару "Термопот" (чайник) такая информация есть. Нет, рядом с ценой не указано ничего, в чем польза этого термопота – не ясно, текст идет ниже (он довольно мелкий и вы не сможете прочитать, но здесь есть хорошие слова по поводу использования термопота в офисе – о том, что не придется все время греть воду, она в термопоте постоянно горячая, и что его не надо будет отдраивать от накипи). Вот это – слова, важные для пользователя, но в этом случае они находятся на противоположенных концах страницы (и это не самый тяжелый случай). Здесь, как вы видите, между ценой и описанием товара расположены дополнительные аксессуары, которые стоит приобрести вместе с товаром. Таких аксессуаров может быть несколько десятков – тогда вероятность, что потребитель когда нибудь прочитает описание товара, достаточно мала.

Поэтому, если вы хотите продавать – а вы этого хотите, раз этим занимаетесь – показывайте цену, независимо от того, большая она или маленькая. Потратьте усилия на то, чтобы пользователь поверил в вашу цену. Если потребитель видит джинсы за $1 тыс. – он их не купит, но если он узнает, что это джинсы Элвиса Пресли – может быть, если он его фанат. Лишая посетителя информации о том, почему цена именно такая, мы теряем в продажах.

Доклад, с которым вы ознакомились, был представлен на IV конференции "Электронная торговля – 2008". Не хотите отставать от конкурентов на 2 года? Регистрируйтесь на ближайшую конференцию "Электронная торговля – 2010", которая пройдет 14-15 октября 2010 года в Москве. Вы можете не только отправить заявку на регистрацию, но также задать вопросы по участию в мероприятии или предложить свою тему доклада для будущих мероприятий Oborot.ru.

Конференция "Электронная торговля" – крупнейшее отраслевое мероприятие России и стран СНГ и, несомненно – главное событие года для специалистов по продажам через Интернет, объединяющее как крупных, так и небольших участников рынка.

Общая информация о конференции

Программа

Регистрация