Приветствую вас хабро-сообщество. Итак о чем пойдет речь в посте. Многие из вас могут ошибочно сделать вывод что речь в посте пойдет о дизайне, юзабилити и подобном. Но! Речь в посте пойдет именно о том как и какую информацию подавать потенциальным покупателям. О концептуальном подходе к интернет-магазинам.
Пост вышел совсем не маленький! Много текста, требует осмысления, и возможно(как всегда у меня выходит) сложного для восприятия. Но разбивать весь пост на 2-3-4 частей я не хочу. Лучше потратить время и прочитать все сразу, тогда будет понятнее. Тем более что все же тема планировалась на 3 поста. Это 1-й и все 3 будут большими.
Сноска: прошу прощения за сложный стиль изложения, и возможно орфографические ошибки!!! Нужно понимать что все вымышленно и все является лишь идеей, но основано но моем личном опыте работы в электронной коммерции. Возможно это взгляд в будущее, возможно нет. Это концепт, и я прошу комментирующих это осознавать. Так же заметьте что я совершенно не старался с тички зрения доводки дизайна(особенно иконок) к сожаление нет на это времени.
в мае месяце этого года я начал практиковать консалтинговые услуги, по развитию электронной коммерции. Я находил людей, которые были хоть как-то заинтересованы и консультировал их. Разрабатывал схемы для дизайна интернет-магазинов, модели электронной коммерции(рекламную кампанию, развитие, дополнительные сервисы etc..) За это время я пришел к некоторым интересным выводам, и получил колоссальный опыт в боевых условиях. На основе всего этого я сделал некоторые выводы, и в голове появилось несколько идей, которыми я и хочу поделиться. Дело в том что эти идеи я частично реализовывал для своих клиентов. Но не в полной мере, и об этом будет уже совершенно другой пост и попозже.
И так какие собственно идеи я преследую? Подача информации: Способы вывод товаров; Отчетливое и понятное состояние товара(склад, акция..); простота сортировки; настраиваемое пользователем отображение групп товаров; использование элементов инфографики(для упрощения восприятия информации, схемы, диаграмки, иконки и т.д.); группировка однотипных товаров; механизм отображения корзины. И конечно же основная идея, каждой группе товара своя подача информации! И частично UserInterfaceControl(может не верно выражаюсь но где-то я уже это видел) суть в том что бы пользователь смог сам определять что он хочет видеть.
Самый простой казалось бы на первый взгляд тип интернет-магазинов. Согласен, их пруд пруди. Но именно на его примере проще всего показать что я имею ввиду. Хотя остальные магазины не менее актуальны.
Есть блок у него есть три основных зоны. Навигация, контент, листинг(пейджинг). Давайте их разберем.
Группа товаров, пользователь может сам определить что ему необходимо. К примеру он хочет что бы в этом блоке отображались только Ноутбуки, или Ноутбуки и батареи или еще что ни будь.
Группа товаров на данном скрине видно что выбрана группа «Ноутбуки», а рядом еле видная иконка(ну мне ничего в голову не пришло кроме как поставить именно эту иконку :)) для чего она нужна? Выбрать группу товара отображаемую в этом блоке.
Сортировка, опять же… пользователь имеет возможность выбора, и достаточно удобного. Ну а ссылки Склад и Акция, думаю и так понятно и без попапов… хотя Акции тоже можно делить по типу… но это уже реально не нужно.
То почему бы не дать пользователю возможность выбирать тематику рекламных блоков? скажем один блок оставить не контролируемый второй с возможностью изменения тематики. Как раз большой блок(где много картинок по очереди, я бы отдал на выбор юзера.
2 — Контент в блоке. Как видно есть 3 вида отображения, 1-й и 2-й одно и тоже по сути дела они отличаются только размером итемов(товаров) для удобства. Давайте рассмотрим их.
Маленькие иконки на товаре указывающие на дополнительные опции, то ли это акция, то ли это отсутствие на складе. Толи то что это лидеры продаж, или еще что ни будь. На самом деле, это львиная доля работы для грамотного дизайнера + уместен раздел «Помощь» на страницах интернет магазина. Можно делать их не маленькими, какими угодно.
Кстати не могу не съязвить, блин отвратительно выглядит когда на сайте цена выделена Красным(отпугивающим) цветом!
4 серых иконки предполагают быстрый доступ к просмотру той или иной информации о товаре. К примеру там где шестеренка, тех описание, фото-иконка — соответственно. Видео… странно но я до сих пор не понимаю почему на сайтах нет видео? В наше время «самое то» пользоваться видео контентом! Что бы ты не продавал! Хороший пример подачи информации у Дорохова а именно тут ! Видео достаточно хорошо подстегивает к покупке. К тому же видео дает не хилое представление о пропорциях, и частично вытесняет необходимость в тактильных ощущениях, а каждый кто продавал когда либо что ли бо, знает как это важно!
Но вернемся к нашему магазину. Третий вывод товаров, это табличный вывод. Я использовал ту же компоновку что и при нажатии на товар в предыдущем варианте.
3 — Так же важный момент, что я думал над концептом дизайна и-магазина который не имеет скроллов браузера. То есть тупо в окне браузера, но потом отбросил эту идею, но один из элементов остался, и вы скорее всего заметили его но не поняли зачем он нужен. Это листинг(пейджинг) страниц с товарами. Он нужен по одной простой причине. Товаров много и листать их нужно, но сколько я уже не интересовался, у каждого знакомого спрашивал, у многих покупателей в интернет-магазинах, наблюдал за своими знакомыми… вертикальный список… люди невольно не обращают внимание на нижние позиции. Все таки лучше что бы список товаров умещался в поле зрения. Но опять же это не проверенно на 100% просто наблюдения, и слишком мало людей(количества наблюдения их поведения) для нормальный статистики.
А пейджинг все таки нужен потому как на главной странице сайта, можно разместить не 1 а 2 или 3, 4 блока.
вот так я это вижу. 🙂 Но и в этом есть хитрый замысел. Который я раскрою позже когда подойдем к разбору главной страницы и корзины. А сейчас просмотр единицы товара.
Вид отдельной единицы это очень интересная штука. Дело в том что если это вид мелочной вещички к примеру переходника HDMI to VGA то конечно же ничего абсолютно изобретать не нужно. Галерея фоток? Зачем? То есть все просто вывод одной фотки описание и цена. Даже иллюстрировать нечего толком… А вот вывод к примеру единицы — ноутбук… то тут уже крути не крути а хочется подумать как и что.
На самом деле все достаточно прозаично и все решается на уровне дизайнера. Все просто. Есть фотка товара, есть не большое (!)маркетинговое описание, а под ними уже мини панелька. Цена, «в корзину», и иконки, их можно заменить табами, да чем угодно… все что нужно человеку есть сразу, хочется капнуть глубже? пожалуйста есть икноки/табы изучайте. Но… есть еще один момент.
Акционная информация, достаточно важная вещь, так как она является дополнительным стимулом к продажам. И ее достаточно грамотно в данном случае было бы поместить вверх, выше всего остального.
Как вы видите на верхней панели, справа есть возможность добавлять ветрины, блоки с контентом. Вот именно поэтому мне в этом концепте понадобился пейджинг, хотя опять же все относительно. Потому как пользователям это может быть не нужно, а может быть просто напросто не так важно… В любом случае есть возможность их добавлять.
А теперь немного о корзине. Дело в том что я ни как не могу взять в толк зачем же в корзинах интернет магазинов, причем поголовно, применяется простая конструкция пересчета?
Вот сами подумайте зачем? Учитывая специфику товара, к примеру, Фотоаппараты профессиональные или Ноутбуки. Это достаточно дорогостоящая техника. Ну вот кому зайдя в корзину оформлять заказ придет в голову вдруг заказать 5-10 лэптопов? Да никому! Уверен на все 100 так как поработал в продажах, и корпоративный сектор всегда ведет переговоры в живую, если речь идет о большом количестве. Но! Кто-то обязательно да и возразит, мол пусть даже и не пользуются но возможность должна быть! И я с этим соглашусь но опять же… Никто не будет покупать 10 лэптопов, или 5 дорогущих про фотоаппаратов! Понимаете о чем я?
Что я предлагаю в противовес этому? Все просто… «+» — да да обычный плюсик, но на это если габаритная единица(в цене) а если человек положил в крозину что нибудь на подобии зарядного для мобильника за 5$ почему бы не взять сразу 3-4? на всякий случай так сказать. Далее я проиллюстрирую это, при рассмотрении корзины.
Корзина, я искренне не понимаю зачем делать отдельную страницу для корзины. Комбинированный вариант я бы понял, если товаров в корзине больше, к примеру, 10 — то переход на отдельную страницу. Но опять же редко я такое встречал работаю в интернет-магазинах и с интернет-магазинами.
Как видно все достаточно просто, «+» добавить тот же самый товар, «-» удалит. и пользователь может добавлять сколько угодно таких товаров. Просто возле товара появиться небольшое обозначение количества.
А суть то вообщем-то вот в чем. Повторюсь — каждому виду товаров свои нюансы вывода. Заметьте я выбрал магазин ноутбуков.
как по мне мы видим достаточно грубую маркетинговую ошибку. Почему? Опять же нюансы специфики товара. Это магазин ноутбуков. Что важно знать покупателю, даже если он сам в это не сильно заинтересован, но что его может зацепить? По опыту скажу, что серьезно цепляет живучесть батареи. И в блоке на иллюстрации выше, есть данные о процессоре, о памяти, жестком диске и коннекторах. Да на это тоже обращают внимание, но батарея и размер экрана все равно чемпионы как критерии выбора. Как не крути. По этому более приемлемый вид был бы таков.
Согласитесь это сразу бросится в глаза и это реально нужно покупателю ноутбука. Это одна из самых важных деталей при выборе ноутбука — батарея.
Уже слышал от СЕОшников что много Аякса и т.д. вредно, слышал кучу скептического по поводу того что подобное мега затратно в разработке и т.д. Но! Во первых это не так. А во вторых прошу еще раз учесть что это пока что только мои мысли, но частично они все были уже реализованы в работе. И там где я замечал повышение конвверсии я стал задумываться об этом концепте вообще.
Как вы наверное заметили я уделил мало внимания отдельной странице, вывода единицы. Но это не так. В следующем посте на примере страницы Ноутбука, Фотоаппарата я расскажу как можно оформить вывод информации более удобным и так же на этих примерах расскажу как можно использовать инфографику, и почему я вообще рекомендую ее использовать.
Так же в следующем посте речь пойдет о еще важном для интернет-магазинов моменте, страницы сравнения товаров. Потому как я еще не встречал нормального механизма сравнения товаров, и хотел бы поделиться своими идеями по этому поводу.
