Как стать автором
Обновить

Концептуальный подход к подаче информации в интернет-магазинах. Часть 1

Время на прочтение 7 мин
Количество просмотров 8.6K
Приветствую вас, хабра-сообщество. Итак, о чем пойдет речь в посте. Многие из вас могут ошибочно сделать вывод, что речь в посте пойдет о дизайне, юзабилити и подобном. Но! Речь в посте пойдет именно о том, как и какую информацию подавать потенциальным покупателям. О концептуальном подходе к интернет-магазинам.

Пост вышел совсем не маленький! Много текста, требует осмысления, и, возможно(как всегда у меня выходит), сложного для восприятия. Но разбивать весь пост на 2-3-4 части я не хочу. Лучше потратить время и прочитать все сразу, тогда будет понятнее. Тем более, что, все же, тема планировалась на 3 поста. Это 1-й и все 3 будут большими.

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

Предисловие


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

Итак, какие, собственно, идеи я преследую? Подача информации: 1) способы вывода товаров; 2) отчетливое и понятное состояние товара(склад, акция, ...); 3) простота сортировки; 4) настраиваемое пользователем отображение групп товаров; 5) использование элементов инфографики(для упрощения восприятия информации: схемы, диаграмки, иконки и т.д.); 6) группировка однотипных товаров; 7) механизм отображения корзины. И, конечно же, основная идея: каждой группе товара своя подача информации! И частично UserInterfaceControl (может, неверно выражаюсь, но где-то я уже это видел). Суть в том, что бы пользователь смог сам определять, что он хочет видеть.

Вводные данные


И так. Есть магазин.
  • Ноутбуки
    ассортимент: Ноутбуки, Аксессуары

На примере 1-го я покажу основную идею, на примере 2-го я покажу лишь тот момент, что под разный товар свои нюансы подачи информации

Ноутбуки


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

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



Есть блок, у него есть три основных зоны: навигация, контент, листинг (пейджинг). Давайте их разберем.



1 — Навигационная панель. Ее можно сразу разделить на 3 части: группа товаров, сортировка, метод вывода/показа.

Группа товаров: пользователь может сам определить что ему необходимо. К примеру, он хочет, чтобы в этом блоке отображались только ноутбуки, или ноутбуки и батареи или еще что-нибудь.



Группа товаров: на данном скрине видно, что выбрана группа «Ноутбуки», а рядом еле видная иконка (ну, мне ничего в голову не пришло, кроме как поставить именно эту иконку :)) Для чего она нужна? Чтобы выбрать группу товара, отображаемую в этом блоке.



Сортировка. Опять же, пользователь имеет возможность выбора, и достаточно удобного. Ну, а ссылки «Склад» и «Акция», думаю, и так понятно, и без попапов… хотя «Акции» тоже можно делить по типу… Но это уже реально не нужно.

Более того, если на сайте есть рекламные блоки наподобие той же розетки



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

2 — Контент в блоке. Как видно, есть 3 вида отображения, 1-й и 2-й — одно и то же по сути дела, они отличаются только размером итемов (товаров) для удобства. Давайте рассмотрим их.

Вывод кубиками (не знаю даже, как верно назвать):



Маленькие иконки на товаре, указывающие на дополнительные опции — то ли это акция, то ли это отсутствие на складе. Или то, что это лидеры продаж, или еще что-нибудь. На самом деле, это львиная доля работы для грамотного дизайнера. + Уместен раздел «Помощь» на страницах интернет магазина. Можно делать их не маленькими, какими угодно.

При нажатии на товар мы видим следующее: важные подробности товара и, опять же, иконки… иконки… иконки…



Кстати, не могу не съязвить, блин, отвратительно выглядит, когда на сайте цена выделена _красным_ (отпугивающим) цветом!

4 серых иконки предполагают быстрый доступ к просмотру той или иной информации о товаре. К примеру, там, где шестеренка — тех. описание, фото-иконка — соответственно, фото. Видео… Странно, но я до сих пор не понимаю, почему на сайтах нет видео? В наше время «самое то» пользоваться видео контентом! Что бы ты не продавал! Хороший пример подачи информации у Дорохова, а именно тут! Видео достаточно хорошо подстегивает к покупке. К тому же видео дает нехилое представление о пропорциях и частично вытесняет необходимость в тактильных ощущениях, а каждый, кто продавал когда-либо что-либо, знает, как это важно!

Но вернемся к нашему магазину. Третий вывод товаров — это табличный вывод. Я использовал ту же компоновку, что и при нажатии на товар в предыдущем варианте.



3 — Также важный момент то, что я думал над концептом дизайна и-магазина, который не имеет скроллов браузера. То есть, тупо в окне браузера. Но потом отбросил эту идею, но один из элементов остался, и вы скорее всего заметили его, но не поняли, зачем он нужен. Это листинг (пейджинг) страниц с товарами. Он нужен по одной простой причине. Товаров много, и листать их нужно, но сколько я уже ни интересовался, у каждого знакомого спрашивал, у многих покупателей в интернет-магазинах, наблюдал за своими знакомыми… Вертикальный список — люди невольно не обращают внимание на нижние позиции. Все-таки лучше, чтобы список товаров умещался в поле зрения. Но опять же, это не проверено на 100%, просто наблюдения, и слишком мало людей (количества наблюдения их поведения) для нормальный статистики.

А пейджинг все-таки нужен, потому как на главной странице сайта можно разместить не 1, а 2, или 3-4 блока.



Вот так я это вижу. :) Но и в этом есть хитрый замысел, который я раскрою позже, когда подойдем к разбору главной страницы и корзины. А сейчас — просмотр единицы товара.

Вид отдельной единицы — это очень интересная штука. Дело в том, что если это вид мелочной вещички, к примеру, переходника HDMI to VGA, то, конечно же, ничего абсолютно изобретать не нужно. Галерея фоток? Зачем? То есть, все просто: вывод одной фотки, описание и цена. Даже иллюстрировать нечего толком… А вот вывод, к примеру, единицы ноутбука… То тут уже крути-не крути, а хочется подумать, как и что.



На самом деле все достаточно прозаично и все решается на уровне дизайнера. Все просто. Есть фотка товара, есть небольшое (!) маркетинговое описание, а под ними уже минипанелька. Цена, «в корзину» и иконки: их можно заменить табами, да чем угодно. Все, что нужно человеку, есть сразу. Хочется копнуть глубже? Пожалуйста, есть иконки/табы, изучайте. Но… Есть еще один момент.

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



Но была у меня мысль выразить акцию по-другому. Добавить сумку без цены или с ценой в 0 гривен, как совсем подарок к товару.



Ну вот, теперь можно рассмотреть макет главной страницы или еще немного об интерфейсе магазина.



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

А теперь немного о корзине. Дело в том, что я ни как не могу взять в толк, зачем же в корзинах интернет-магазинов, причем поголовно, применяется простая конструкция пересчета?



Вот сами подумайте, зачем? Учитывая специфику товара, к примеру, возьмем фотоаппараты профессиональные или ноутбуки. Это достаточно дорогостоящая техника. Ну вот кому, зайдя в корзину оформлять заказ, придет в голову вдруг заказать 5-10 лэптопов? Да никому! Уверен на все 100, так как поработал в продажах. И корпоративный сектор всегда ведет переговоры в живую, если речь идет о большом количестве. Но! Кто-то обязательно да и возразит, мол, пусть даже и не пользуются, но возможность должна быть! И я с этим соглашусь, но, опять же… Никто не будет покупать 10 лэптопов, или 5 дорогущих про-фотоаппаратов! Понимаете, о чем я?

Что я предлагаю в противовес этому? Все просто… "+" — да-да, обычный плюсик. Далее я проиллюстрирую это при рассмотрении корзины.

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



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



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

А суть-то вообщем-то вот в чем. Повторюсь: каждому виду товаров свои нюансы вывода. Заметьте, я выбрал магазин ноутбуков.

И что мы видим на этой иллюстрации?



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



Согласитесь, это сразу бросится в глаза и это реально нужно покупателю ноутбука. Это одна из самых важных деталей при выборе ноутбука — батарея.

Послесловие


Уже слышал от СЕОшников, что много Аякса и т.д. вредно, слышал кучу скептического по поводу того, что подобное мегазатратно в разработке и т.д. Но! Во-первых, это не так. А во-вторых, прошу еще раз учесть, что это пока что только мои мысли, но частично они все были уже реализованы в работе. И там, где я замечал повышение конверсии, я стал задумываться об этом концепте вообще.

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

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

Анонс


Страница сравнения товаров
Страница товара — ноутбук
Страница товара — Фотоаппарат

Если конечно это вам интересно!
Теги:
Хабы:
+47
Комментарии 81
Комментарии Комментарии 81

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн