Приветствую вас, хабра-сообщество. Итак, о чем пойдет речь в посте. Многие из вас могут ошибочно сделать вывод, что речь в посте пойдет о дизайне, юзабилити и подобном. Но! Речь в посте пойдет именно о том, как и какую информацию подавать потенциальным покупателям. О концептуальном подходе к интернет-магазинам.
Пост вышел совсем не маленький! Много текста, требует осмысления, и, возможно(как всегда у меня выходит), сложного для восприятия. Но разбивать весь пост на 2-3-4 части я не хочу. Лучше потратить время и прочитать все сразу, тогда будет понятнее. Тем более, что, все же, тема планировалась на 3 поста. Это 1-й и все 3 будут большими.
Сноска: прошу прощения за сложный стиль изложения, и возможно орфографические ошибки!!! Нужно понимать что все вымышленно и все является лишь идеей, но основано но моем личном опыте работы в электронной коммерции. Возможно это взгляд в будущее, возможно нет. Это концепт, и я прошу комментирующих это осознавать. Так же заметьте что я совершенно не старался с тички зрения доводки дизайна(особенно иконок) к сожаление нет на это времени.
В мае месяце этого года я начал практиковать консалтинговые услуги по развитию электронной коммерции. Я находил людей, которые были хоть как-то заинтересованы, и консультировал их. Разрабатывал схемы для дизайна интернет-магазинов, модели электронной коммерции (рекламную кампанию, развитие, дополнительные сервисы, etc..) За это время я пришел к некоторым интересным выводам и получил колоссальный опыт в боевых условиях. На основе всего этого я сделал некоторые выводы, и в голове появилось несколько идей, которыми я и хочу поделиться. Дело в том, что эти идеи я частично реализовывал для своих клиентов. Но не в полной мере, и об этом будет уже совершенно другой пост и попозже.
Итак, какие, собственно, идеи я преследую? Подача информации: 1) способы вывода товаров; 2) отчетливое и понятное состояние товара(склад, акция, ...); 3) простота сортировки; 4) настраиваемое пользователем отображение групп товаров; 5) использование элементов инфографики(для упрощения восприятия информации: схемы, диаграмки, иконки и т.д.); 6) группировка однотипных товаров; 7) механизм отображения корзины. И, конечно же, основная идея: каждой группе товара своя подача информации! И частично UserInterfaceControl (может, неверно выражаюсь, но где-то я уже это видел). Суть в том, что бы пользователь смог сам определять, что он хочет видеть.
И так. Есть магазин.
На примере 1-го я покажу основную идею, на примере 2-го я покажу лишь тот момент, что под разный товар свои нюансы подачи информации
Самый простой, казалось бы на первый взгляд, тип интернет-магазинов. Согласен, их пруд пруди. Но именно на его примере проще всего показать, что я имею ввиду. Хотя остальные магазины не менее актуальны.
Итак, главная страница вывода товаров. Что важно — возможность простой и понятной сортировки и отображения товаров. Также возможность выбрать, что именно интересует (группу товаров).
![](https://habrastorage.org/r/w780q1/storage/8df0be36/4db26d0e/ec839b8f/006dbd04.jpg)
Есть блок, у него есть три основных зоны: навигация, контент, листинг (пейджинг). Давайте их разберем.
![](https://habrastorage.org/r/w780q1/storage/9b212be7/2a00b8d3/d926c377/a2b733f8.jpg)
1 — Навигационная панель. Ее можно сразу разделить на 3 части: группа товаров, сортировка, метод вывода/показа.
Группа товаров: пользователь может сам определить что ему необходимо. К примеру, он хочет, чтобы в этом блоке отображались только ноутбуки, или ноутбуки и батареи или еще что-нибудь.
![](https://habrastorage.org/r/w780q1/storage/ad31a573/4e6066a3/36b8afd2/30d891f8.jpg)
Группа товаров: на данном скрине видно, что выбрана группа «Ноутбуки», а рядом еле видная иконка (ну, мне ничего в голову не пришло, кроме как поставить именно эту иконку :)) Для чего она нужна? Чтобы выбрать группу товара, отображаемую в этом блоке.
![](https://habrastorage.org/r/w780q1/storage/99fb5f75/a16a3269/3e968131/c82feb69.jpg)
Сортировка. Опять же, пользователь имеет возможность выбора, и достаточно удобного. Ну, а ссылки «Склад» и «Акция», думаю, и так понятно, и без попапов… хотя «Акции» тоже можно делить по типу… Но это уже реально не нужно.
Более того, если на сайте есть рекламные блоки наподобие той же розетки…
![](https://habrastorage.org/r/w780q1/storage/9cacc1b7/60377646/603c33a9/4eb41270.jpg)
… то почему бы не дать пользователю возможность выбирать тематику рекламных блоков? Скажем, один блок оставить не контролируемый, второй с возможностью изменения тематики. Как раз большой блок (где много картинок по очереди) я бы отдал на выбор юзера.
2 — Контент в блоке. Как видно, есть 3 вида отображения, 1-й и 2-й — одно и то же по сути дела, они отличаются только размером итемов (товаров) для удобства. Давайте рассмотрим их.
Вывод кубиками (не знаю даже, как верно назвать):
![](https://habrastorage.org/r/w780q1/storage/1b346edb/9863c663/66c3a244/110b4928.jpg)
Маленькие иконки на товаре, указывающие на дополнительные опции — то ли это акция, то ли это отсутствие на складе. Или то, что это лидеры продаж, или еще что-нибудь. На самом деле, это львиная доля работы для грамотного дизайнера. + Уместен раздел «Помощь» на страницах интернет магазина. Можно делать их не маленькими, какими угодно.
При нажатии на товар мы видим следующее: важные подробности товара и, опять же, иконки… иконки… иконки…
![](https://habrastorage.org/r/w780q1/storage/079e9928/9d2b339f/842ed606/1900a688.jpg)
Кстати, не могу не съязвить, блин, отвратительно выглядит, когда на сайте цена выделена _красным_ (отпугивающим) цветом!
4 серых иконки предполагают быстрый доступ к просмотру той или иной информации о товаре. К примеру, там, где шестеренка — тех. описание, фото-иконка — соответственно, фото. Видео… Странно, но я до сих пор не понимаю, почему на сайтах нет видео? В наше время «самое то» пользоваться видео контентом! Что бы ты не продавал! Хороший пример подачи информации у Дорохова, а именно тут! Видео достаточно хорошо подстегивает к покупке. К тому же видео дает нехилое представление о пропорциях и частично вытесняет необходимость в тактильных ощущениях, а каждый, кто продавал когда-либо что-либо, знает, как это важно!
Но вернемся к нашему магазину. Третий вывод товаров — это табличный вывод. Я использовал ту же компоновку, что и при нажатии на товар в предыдущем варианте.
![](https://habrastorage.org/r/w780q1/storage/a761b6ab/b6f925f6/a16a0f87/23c4169a.jpg)
3 — Также важный момент то, что я думал над концептом дизайна и-магазина, который не имеет скроллов браузера. То есть, тупо в окне браузера. Но потом отбросил эту идею, но один из элементов остался, и вы скорее всего заметили его, но не поняли, зачем он нужен. Это листинг (пейджинг) страниц с товарами. Он нужен по одной простой причине. Товаров много, и листать их нужно, но сколько я уже ни интересовался, у каждого знакомого спрашивал, у многих покупателей в интернет-магазинах, наблюдал за своими знакомыми… Вертикальный список — люди невольно не обращают внимание на нижние позиции. Все-таки лучше, чтобы список товаров умещался в поле зрения. Но опять же, это не проверено на 100%, просто наблюдения, и слишком мало людей (количества наблюдения их поведения) для нормальный статистики.
А пейджинг все-таки нужен, потому как на главной странице сайта можно разместить не 1, а 2, или 3-4 блока.
![](https://habrastorage.org/r/w780q1/storage/778b825f/9f0c7e93/06fb2e44/99c7264f.jpg)
Вот так я это вижу. :) Но и в этом есть хитрый замысел, который я раскрою позже, когда подойдем к разбору главной страницы и корзины. А сейчас — просмотр единицы товара.
Вид отдельной единицы — это очень интересная штука. Дело в том, что если это вид мелочной вещички, к примеру, переходника HDMI to VGA, то, конечно же, ничего абсолютно изобретать не нужно. Галерея фоток? Зачем? То есть, все просто: вывод одной фотки, описание и цена. Даже иллюстрировать нечего толком… А вот вывод, к примеру, единицы ноутбука… То тут уже крути-не крути, а хочется подумать, как и что.
![](https://habrastorage.org/r/w780q1/storage/7d862aca/48cc42b9/de38f94d/e48a3cdc.jpg)
На самом деле все достаточно прозаично и все решается на уровне дизайнера. Все просто. Есть фотка товара, есть небольшое (!) маркетинговое описание, а под ними уже минипанелька. Цена, «в корзину» и иконки: их можно заменить табами, да чем угодно. Все, что нужно человеку, есть сразу. Хочется копнуть глубже? Пожалуйста, есть иконки/табы, изучайте. Но… Есть еще один момент.
Акционная информация — достаточно важная вещь, так как она является дополнительным стимулом к продажам. И ее достаточно грамотно в данном случае было бы поместить вверх, выше всего остального.
![](https://habrastorage.org/r/w780q1/storage/747bacaf/f3cf5f0f/c585f217/dd3bd4ee.jpg)
Но была у меня мысль выразить акцию по-другому. Добавить сумку без цены или с ценой в 0 гривен, как совсем подарок к товару.
![](https://habrastorage.org/r/w780q1/storage/6cb7200c/9fba92ca/17458eee/fca1d41b.jpg)
Ну вот, теперь можно рассмотреть макет главной страницы или еще немного об интерфейсе магазина.
![](https://habrastorage.org/r/w780q1/storage/55056315/9a61387c/dd5912a1/e7a284c1.jpg)
Как вы видите, на верхней панели справа есть возможность добавлять витрины, блоки с контентом. Вот именно поэтому мне в этом концепте понадобился пейджинг, хотя, опять же, все относительно. Потому как пользователям это может быть не нужно, а может быть просто-напросто не так важно… В любом случае, есть возможность их добавлять.
А теперь немного о корзине. Дело в том, что я ни как не могу взять в толк, зачем же в корзинах интернет-магазинов, причем поголовно, применяется простая конструкция пересчета?
![](https://habrastorage.org/r/w780q1/storage/2acf8195/e0be43d5/2afd154d/1f2dcfb7.jpg)
Вот сами подумайте, зачем? Учитывая специфику товара, к примеру, возьмем фотоаппараты профессиональные или ноутбуки. Это достаточно дорогостоящая техника. Ну вот кому, зайдя в корзину оформлять заказ, придет в голову вдруг заказать 5-10 лэптопов? Да никому! Уверен на все 100, так как поработал в продажах. И корпоративный сектор всегда ведет переговоры в живую, если речь идет о большом количестве. Но! Кто-то обязательно да и возразит, мол, пусть даже и не пользуются, но возможность должна быть! И я с этим соглашусь, но, опять же… Никто не будет покупать 10 лэптопов, или 5 дорогущих про-фотоаппаратов! Понимаете, о чем я?
Что я предлагаю в противовес этому? Все просто… "+" — да-да, обычный плюсик. Далее я проиллюстрирую это при рассмотрении корзины.
Корзина. Я искренне не понимаю, зачем делать отдельную страницу для корзины. Комбинированный вариант: я бы понял, если товаров в корзине больше, к примеру, 10 — то переход на отдельную страницу. Но, опять же, редко я такое встречал, работаю в интернет-магазинах и с интернет-магазинами.
![](https://habrastorage.org/r/w780q1/storage/23528ccd/45ee5369/58fc1998/0d60fa56.jpg)
Как видно, все достаточно просто, "+" — добавить тот же самый товар, "-" удалить. И пользователь может добавлять сколько угодно таких товаров. Просто возле товара появиться небольшое обозначение количества.
![](https://habrastorage.org/r/w780q1/storage/2e28d84f/ed2878d5/bf6ab08f/60971c14.jpg)
Вот так как бы достаточно просто, и в то же время все необходимое есть. Но я заведомо умолчал об одной детали… В начале поста я говорил о способе подаче информации, что каждому товару свои нюансы вывода. Вот мне интересно, возник ли у кого-нибудь вопрос по поводу вывода товаров кубиками, при нажатии, и таблично? :)
А суть-то вообщем-то вот в чем. Повторюсь: каждому виду товаров свои нюансы вывода. Заметьте, я выбрал магазин ноутбуков.
И что мы видим на этой иллюстрации?
![](https://habrastorage.org/r/w780q1/storage/079e9928/9d2b339f/842ed606/1900a688.jpg)
Как по мне, мы видим достаточно грубую маркетинговую ошибку. Почему? Опять же, нюансы специфики товара. Это магазин ноутбуков. Что важно знать покупателю, даже если он сам в этом не сильно заинтересован, но что его может зацепить? По опыту скажу, что серьезно цепляет живучесть батареи. И в блоке на иллюстрации выше есть данные о процессоре, о памяти, жестком диске и коннекторах. Да, на это тоже обращают внимание, но батарея и размер экрана все равно чемпионы как критерии выбора. Как ни крути. Поэтому более приемлемый вид был бы таков:
![](https://habrastorage.org/r/w780q1/storage/8f40bff9/90e8b545/2fc20201/17d27dab.jpg)
Согласитесь, это сразу бросится в глаза и это реально нужно покупателю ноутбука. Это одна из самых важных деталей при выборе ноутбука — батарея.
Уже слышал от СЕОшников, что много Аякса и т.д. вредно, слышал кучу скептического по поводу того, что подобное мегазатратно в разработке и т.д. Но! Во-первых, это не так. А во-вторых, прошу еще раз учесть, что это пока что только мои мысли, но частично они все были уже реализованы в работе. И там, где я замечал повышение конверсии, я стал задумываться об этом концепте вообще.
Как вы наверное заметили, я уделил мало внимания отдельной странице вывода единицы. Но это не так. В следующем посте на примере страницы ноутбука, страницы фотоаппарата я расскажу, как можно оформить вывод информации более удобным способом, и также на этих примерах расскажу, как можно использовать инфографику и почему я вообще рекомендую ее использовать.
Так же в следующем посте речь пойдет о еще одном важном для интернет-магазинов моменте: страницы сравнения товаров. Потому как я еще не встречал нормального механизма сравнения товаров и хотел бы поделиться своими идеями по этому поводу.
Страница сравнения товаров
Страница товара — ноутбук
Страница товара — Фотоаппарат
Если конечно это вам интересно!
Пост вышел совсем не маленький! Много текста, требует осмысления, и, возможно(как всегда у меня выходит), сложного для восприятия. Но разбивать весь пост на 2-3-4 части я не хочу. Лучше потратить время и прочитать все сразу, тогда будет понятнее. Тем более, что, все же, тема планировалась на 3 поста. Это 1-й и все 3 будут большими.
Сноска: прошу прощения за сложный стиль изложения, и возможно орфографические ошибки!!! Нужно понимать что все вымышленно и все является лишь идеей, но основано но моем личном опыте работы в электронной коммерции. Возможно это взгляд в будущее, возможно нет. Это концепт, и я прошу комментирующих это осознавать. Так же заметьте что я совершенно не старался с тички зрения доводки дизайна(особенно иконок) к сожаление нет на это времени.
Предисловие
В мае месяце этого года я начал практиковать консалтинговые услуги по развитию электронной коммерции. Я находил людей, которые были хоть как-то заинтересованы, и консультировал их. Разрабатывал схемы для дизайна интернет-магазинов, модели электронной коммерции (рекламную кампанию, развитие, дополнительные сервисы, etc..) За это время я пришел к некоторым интересным выводам и получил колоссальный опыт в боевых условиях. На основе всего этого я сделал некоторые выводы, и в голове появилось несколько идей, которыми я и хочу поделиться. Дело в том, что эти идеи я частично реализовывал для своих клиентов. Но не в полной мере, и об этом будет уже совершенно другой пост и попозже.
Итак, какие, собственно, идеи я преследую? Подача информации: 1) способы вывода товаров; 2) отчетливое и понятное состояние товара(склад, акция, ...); 3) простота сортировки; 4) настраиваемое пользователем отображение групп товаров; 5) использование элементов инфографики(для упрощения восприятия информации: схемы, диаграмки, иконки и т.д.); 6) группировка однотипных товаров; 7) механизм отображения корзины. И, конечно же, основная идея: каждой группе товара своя подача информации! И частично UserInterfaceControl (может, неверно выражаюсь, но где-то я уже это видел). Суть в том, что бы пользователь смог сам определять, что он хочет видеть.
Вводные данные
И так. Есть магазин.
- Ноутбуки
ассортимент:Ноутбуки, Аксессуары
На примере 1-го я покажу основную идею, на примере 2-го я покажу лишь тот момент, что под разный товар свои нюансы подачи информации
Ноутбуки
Самый простой, казалось бы на первый взгляд, тип интернет-магазинов. Согласен, их пруд пруди. Но именно на его примере проще всего показать, что я имею ввиду. Хотя остальные магазины не менее актуальны.
Итак, главная страница вывода товаров. Что важно — возможность простой и понятной сортировки и отображения товаров. Также возможность выбрать, что именно интересует (группу товаров).
![](https://habrastorage.org/storage/8df0be36/4db26d0e/ec839b8f/006dbd04.jpg)
Есть блок, у него есть три основных зоны: навигация, контент, листинг (пейджинг). Давайте их разберем.
![](https://habrastorage.org/storage/9b212be7/2a00b8d3/d926c377/a2b733f8.jpg)
1 — Навигационная панель. Ее можно сразу разделить на 3 части: группа товаров, сортировка, метод вывода/показа.
Группа товаров: пользователь может сам определить что ему необходимо. К примеру, он хочет, чтобы в этом блоке отображались только ноутбуки, или ноутбуки и батареи или еще что-нибудь.
![](https://habrastorage.org/storage/ad31a573/4e6066a3/36b8afd2/30d891f8.jpg)
Группа товаров: на данном скрине видно, что выбрана группа «Ноутбуки», а рядом еле видная иконка (ну, мне ничего в голову не пришло, кроме как поставить именно эту иконку :)) Для чего она нужна? Чтобы выбрать группу товара, отображаемую в этом блоке.
![](https://habrastorage.org/storage/99fb5f75/a16a3269/3e968131/c82feb69.jpg)
Сортировка. Опять же, пользователь имеет возможность выбора, и достаточно удобного. Ну, а ссылки «Склад» и «Акция», думаю, и так понятно, и без попапов… хотя «Акции» тоже можно делить по типу… Но это уже реально не нужно.
Более того, если на сайте есть рекламные блоки наподобие той же розетки…
![](https://habrastorage.org/storage/9cacc1b7/60377646/603c33a9/4eb41270.jpg)
… то почему бы не дать пользователю возможность выбирать тематику рекламных блоков? Скажем, один блок оставить не контролируемый, второй с возможностью изменения тематики. Как раз большой блок (где много картинок по очереди) я бы отдал на выбор юзера.
2 — Контент в блоке. Как видно, есть 3 вида отображения, 1-й и 2-й — одно и то же по сути дела, они отличаются только размером итемов (товаров) для удобства. Давайте рассмотрим их.
Вывод кубиками (не знаю даже, как верно назвать):
![](https://habrastorage.org/storage/1b346edb/9863c663/66c3a244/110b4928.jpg)
Маленькие иконки на товаре, указывающие на дополнительные опции — то ли это акция, то ли это отсутствие на складе. Или то, что это лидеры продаж, или еще что-нибудь. На самом деле, это львиная доля работы для грамотного дизайнера. + Уместен раздел «Помощь» на страницах интернет магазина. Можно делать их не маленькими, какими угодно.
При нажатии на товар мы видим следующее: важные подробности товара и, опять же, иконки… иконки… иконки…
![](https://habrastorage.org/storage/079e9928/9d2b339f/842ed606/1900a688.jpg)
Кстати, не могу не съязвить, блин, отвратительно выглядит, когда на сайте цена выделена _красным_ (отпугивающим) цветом!
4 серых иконки предполагают быстрый доступ к просмотру той или иной информации о товаре. К примеру, там, где шестеренка — тех. описание, фото-иконка — соответственно, фото. Видео… Странно, но я до сих пор не понимаю, почему на сайтах нет видео? В наше время «самое то» пользоваться видео контентом! Что бы ты не продавал! Хороший пример подачи информации у Дорохова, а именно тут! Видео достаточно хорошо подстегивает к покупке. К тому же видео дает нехилое представление о пропорциях и частично вытесняет необходимость в тактильных ощущениях, а каждый, кто продавал когда-либо что-либо, знает, как это важно!
Но вернемся к нашему магазину. Третий вывод товаров — это табличный вывод. Я использовал ту же компоновку, что и при нажатии на товар в предыдущем варианте.
![](https://habrastorage.org/storage/a761b6ab/b6f925f6/a16a0f87/23c4169a.jpg)
3 — Также важный момент то, что я думал над концептом дизайна и-магазина, который не имеет скроллов браузера. То есть, тупо в окне браузера. Но потом отбросил эту идею, но один из элементов остался, и вы скорее всего заметили его, но не поняли, зачем он нужен. Это листинг (пейджинг) страниц с товарами. Он нужен по одной простой причине. Товаров много, и листать их нужно, но сколько я уже ни интересовался, у каждого знакомого спрашивал, у многих покупателей в интернет-магазинах, наблюдал за своими знакомыми… Вертикальный список — люди невольно не обращают внимание на нижние позиции. Все-таки лучше, чтобы список товаров умещался в поле зрения. Но опять же, это не проверено на 100%, просто наблюдения, и слишком мало людей (количества наблюдения их поведения) для нормальный статистики.
А пейджинг все-таки нужен, потому как на главной странице сайта можно разместить не 1, а 2, или 3-4 блока.
![](https://habrastorage.org/storage/778b825f/9f0c7e93/06fb2e44/99c7264f.jpg)
Вот так я это вижу. :) Но и в этом есть хитрый замысел, который я раскрою позже, когда подойдем к разбору главной страницы и корзины. А сейчас — просмотр единицы товара.
Вид отдельной единицы — это очень интересная штука. Дело в том, что если это вид мелочной вещички, к примеру, переходника HDMI to VGA, то, конечно же, ничего абсолютно изобретать не нужно. Галерея фоток? Зачем? То есть, все просто: вывод одной фотки, описание и цена. Даже иллюстрировать нечего толком… А вот вывод, к примеру, единицы ноутбука… То тут уже крути-не крути, а хочется подумать, как и что.
![](https://habrastorage.org/storage/7d862aca/48cc42b9/de38f94d/e48a3cdc.jpg)
На самом деле все достаточно прозаично и все решается на уровне дизайнера. Все просто. Есть фотка товара, есть небольшое (!) маркетинговое описание, а под ними уже минипанелька. Цена, «в корзину» и иконки: их можно заменить табами, да чем угодно. Все, что нужно человеку, есть сразу. Хочется копнуть глубже? Пожалуйста, есть иконки/табы, изучайте. Но… Есть еще один момент.
Акционная информация — достаточно важная вещь, так как она является дополнительным стимулом к продажам. И ее достаточно грамотно в данном случае было бы поместить вверх, выше всего остального.
![](https://habrastorage.org/storage/747bacaf/f3cf5f0f/c585f217/dd3bd4ee.jpg)
Но была у меня мысль выразить акцию по-другому. Добавить сумку без цены или с ценой в 0 гривен, как совсем подарок к товару.
![](https://habrastorage.org/storage/6cb7200c/9fba92ca/17458eee/fca1d41b.jpg)
Ну вот, теперь можно рассмотреть макет главной страницы или еще немного об интерфейсе магазина.
![](https://habrastorage.org/storage/55056315/9a61387c/dd5912a1/e7a284c1.jpg)
Как вы видите, на верхней панели справа есть возможность добавлять витрины, блоки с контентом. Вот именно поэтому мне в этом концепте понадобился пейджинг, хотя, опять же, все относительно. Потому как пользователям это может быть не нужно, а может быть просто-напросто не так важно… В любом случае, есть возможность их добавлять.
А теперь немного о корзине. Дело в том, что я ни как не могу взять в толк, зачем же в корзинах интернет-магазинов, причем поголовно, применяется простая конструкция пересчета?
![](https://habrastorage.org/storage/2acf8195/e0be43d5/2afd154d/1f2dcfb7.jpg)
Вот сами подумайте, зачем? Учитывая специфику товара, к примеру, возьмем фотоаппараты профессиональные или ноутбуки. Это достаточно дорогостоящая техника. Ну вот кому, зайдя в корзину оформлять заказ, придет в голову вдруг заказать 5-10 лэптопов? Да никому! Уверен на все 100, так как поработал в продажах. И корпоративный сектор всегда ведет переговоры в живую, если речь идет о большом количестве. Но! Кто-то обязательно да и возразит, мол, пусть даже и не пользуются, но возможность должна быть! И я с этим соглашусь, но, опять же… Никто не будет покупать 10 лэптопов, или 5 дорогущих про-фотоаппаратов! Понимаете, о чем я?
Что я предлагаю в противовес этому? Все просто… "+" — да-да, обычный плюсик. Далее я проиллюстрирую это при рассмотрении корзины.
Корзина. Я искренне не понимаю, зачем делать отдельную страницу для корзины. Комбинированный вариант: я бы понял, если товаров в корзине больше, к примеру, 10 — то переход на отдельную страницу. Но, опять же, редко я такое встречал, работаю в интернет-магазинах и с интернет-магазинами.
![](https://habrastorage.org/storage/23528ccd/45ee5369/58fc1998/0d60fa56.jpg)
Как видно, все достаточно просто, "+" — добавить тот же самый товар, "-" удалить. И пользователь может добавлять сколько угодно таких товаров. Просто возле товара появиться небольшое обозначение количества.
![](https://habrastorage.org/storage/2e28d84f/ed2878d5/bf6ab08f/60971c14.jpg)
Вот так как бы достаточно просто, и в то же время все необходимое есть. Но я заведомо умолчал об одной детали… В начале поста я говорил о способе подаче информации, что каждому товару свои нюансы вывода. Вот мне интересно, возник ли у кого-нибудь вопрос по поводу вывода товаров кубиками, при нажатии, и таблично? :)
А суть-то вообщем-то вот в чем. Повторюсь: каждому виду товаров свои нюансы вывода. Заметьте, я выбрал магазин ноутбуков.
И что мы видим на этой иллюстрации?
![](https://habrastorage.org/storage/079e9928/9d2b339f/842ed606/1900a688.jpg)
Как по мне, мы видим достаточно грубую маркетинговую ошибку. Почему? Опять же, нюансы специфики товара. Это магазин ноутбуков. Что важно знать покупателю, даже если он сам в этом не сильно заинтересован, но что его может зацепить? По опыту скажу, что серьезно цепляет живучесть батареи. И в блоке на иллюстрации выше есть данные о процессоре, о памяти, жестком диске и коннекторах. Да, на это тоже обращают внимание, но батарея и размер экрана все равно чемпионы как критерии выбора. Как ни крути. Поэтому более приемлемый вид был бы таков:
![](https://habrastorage.org/storage/8f40bff9/90e8b545/2fc20201/17d27dab.jpg)
Согласитесь, это сразу бросится в глаза и это реально нужно покупателю ноутбука. Это одна из самых важных деталей при выборе ноутбука — батарея.
Послесловие
Уже слышал от СЕОшников, что много Аякса и т.д. вредно, слышал кучу скептического по поводу того, что подобное мегазатратно в разработке и т.д. Но! Во-первых, это не так. А во-вторых, прошу еще раз учесть, что это пока что только мои мысли, но частично они все были уже реализованы в работе. И там, где я замечал повышение конверсии, я стал задумываться об этом концепте вообще.
Как вы наверное заметили, я уделил мало внимания отдельной странице вывода единицы. Но это не так. В следующем посте на примере страницы ноутбука, страницы фотоаппарата я расскажу, как можно оформить вывод информации более удобным способом, и также на этих примерах расскажу, как можно использовать инфографику и почему я вообще рекомендую ее использовать.
Так же в следующем посте речь пойдет о еще одном важном для интернет-магазинов моменте: страницы сравнения товаров. Потому как я еще не встречал нормального механизма сравнения товаров и хотел бы поделиться своими идеями по этому поводу.
Анонс
Страница сравнения товаров
Страница товара — ноутбук
Страница товара — Фотоаппарат
Если конечно это вам интересно!