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

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

    Пост вышел совсем не маленький! Много текста, требует осмысления, и, возможно(как всегда у меня выходит), сложного для восприятия. Но разбивать весь пост на 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 — то переход на отдельную страницу. Но, опять же, редко я такое встречал, работаю в интернет-магазинах и с интернет-магазинами.



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



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

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

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



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



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

    Послесловие


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

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

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

    Анонс


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

    Если конечно это вам интересно!
    Поделиться публикацией
    Комментарии 81
      0
      Ставлю + за старания. НО имхо, подход хороший, но принципиально не отличающийся от многих реализованых.
      Например, www.citilink.ru/catalog/computers_and_notebooks/notebooks/ — разве что чуть более продумана графическая часть. Трудно сказать плюс это или минус. Некоторые покупатели ноутбуков могут не знать как выглядят модули dimm — и их это может даже запутать… И вообще, все-таки речь идет о юзабилити.
        0
        Думаю, люди не знающие вообще что такое модуль памяти не идут в интернет-магазин, а бегут к ближайшему «компутерщику» с криком души: «Я хочу ноутбук, что лучше Ацер или ХэПэ?», а там уж выбирать будет не он…
          +1
          Я согласен с этим по поводу модуля памяти я писал, что не делаю упор на часть доводку дизайна. Иконки надписи что угодно может быть там.
            0
            Да. Подход к любому виду товара должен быть индивидуальный.
            Так что каждый магазин надо «продумывать» тщательно.
              0
              Я это и имел ввиду в глобальном смысле.
              0
              Не согласен. Это вещи не связанные между собой.
              0
              А что в этой ссылке реализовано?

              Я задумал 3 поста, для всего… на самом деле, там есть интересные моменты, но в целом все то же… Фото, какое ни какое описание в обычном виде и все.
                0
                ну возможность выбора по модели цене процессору и куче других параметров. Справа колонка с параметрами. По-моему как у вас, даже более подробно.
                  0
                  www.citilink.ru/catalog/computers_and_notebooks/notebooks/?available=1&brand=298_3ASUS&f=a:5:{i:0;s:5:%22269_3%22;i:1;s:9:%22298_3ASUS%22;i:2;s:13:%22277_3Cored1i3%22;i:3;s:6:%222579_3%22;i:4;s:6:%221124_3%22;} вот в 5 кликов я нашел нужный мне ноут.
                  0
                  вообще в плане выбора электроники наверное лучший магазин из тех что я видел.
                +6
                Ненавижу пейджинг, как и большинство. Потому что нехрен выводить тысячу товаров на одной странице, всегда можно придумать как их разбить на категории.

                +- — поздравляю с изобретением велосипеда. Если раньше ты видел только говёные магазины с кнопкой «пересчитать» без этих "+" и "-" — то сочуствую.

                Но остальное всё бред. Никто из гиков даже не будет под себя подстраивать какую-то «зону отображения магазина». Это не главная страница яндекса с виджетами, а просто интернет магазин
                  +1
                  Никто из гиков даже не будет под себя подстраивать какую-то «зону отображения магазина»

                  Ключевое слово «Гиков» Причем тут гики? Гики перед покупкой просто таки весь интернет перероют. А я рассчитываю на простого человека. Причем я был очень удивлен когда люди читая описание:

                  «Этот ноутбук идеально подходит для работы менеджера» и это является критерием для покупки… А по поводу + и — в корзине я видел такие и не раз, но опять же большинство не много не так реализовано.
                  +8
                  Подавляющее большинство пользователей использует настройки по-умолчанию, никто не будет настраивать страницу и разбираться что там скрывается под иконкой со звездочками. Плюс и минус в корзине на редкость неочевидное решение, особенно для тех кто привык видеть поле с количеством товара (это стандарт и не вам его менять :) )

                  Но самое главное. Я например гик, но даже мне с большего плевать на количество памяти и частоту процессора, я хочу выбрать ноутбук по дизайну. Я хочу видеть качественные фотографии в БОЛЬШОМ разрешении, много, и все на одной странице, чтобы выбрать красивый бук. Обычно модель выпускается в разных комплектациях но с одинаковым дизайном, поэтому я выбираю по внешнему виду, и только потом определяюсь с конкретными параметрами и ценой на них.

                  Когда???!!! Ну когда же наконец сделают интернет магазин не по стандартной шаблонной кальке (с видоизмененными иконками и только) а для реального настоящего покупателя? В данной реализации придется прокликать сначала все бренды по очереди, у каждого бренда кликнуть на каждую модель (потому что в мелкой превьюшке ничего не видно) а у каждой модели кликнуть отдельно чтобы посмотреть большую фотографию. За чтоооооо? Что я вам плохого сделал?
                    0
                    а как бы вы хотели чтобы было? Ответьте, пожалуйста
                    0
                    статья, в принципе, интересная, но есть, мне кажется, два недостатка:
                    — сложность восприятия из-за пунктуации и сумбурности текста;
                    — странный таргетинг.

                    неразбирающиеся люди будут смотреть на картинку и магические слова «мощный процессор», «игровая видеокарта», «4 часа без зарядки».
                    разбирающимся людям нужна полная спецификация плюс нормальные фотографии.

                    ни того, ни другого в Вашем варианте нет.

                    p.s. идея я аяксом, безусловно, интересная. сами этим страдаем:)
                    но над реализацией надо думать.
                    p.s.1 странно, что не заострили внимание на видах сортировки — можно ли сортировать сразу по нескольким параметрам, а не только по одному?
                      +1
                      Можно… я же написал тема рассчитана на 3-4 поста… Все будет далее…
                      +3
                      Не со всем согласен, но статья интересная, спасибо! Жду продолжение.
                        0
                        Продолжение на тему: «Как я учёл пожелания харбралюдей».
                        +1
                        Старались вы немало! :)

                        Еще бы структурировать текст получше. А то уж очень рваные мысли.
                          –2
                          А почему не написаны цены когда товар представлен кубиками? Чтобы посетитель тыкал на каждый товар? Фигня какая-то.
                            +1
                            Поддерживаю.

                            Почему для того чтобы сравнить стоимости ноутов мне сначала на каждый из них надо кликнуть?

                            А для того чтобы положить в корзину какой-нить простой товар надо сделать два клика вместо одного?

                            Если честно, юзабилити под вопросом, поверьте я создал достаточно магазинов чтобы судить об этом.
                              +1
                              Мое упущение
                              +2
                              Прежде всего хочу сказать спасибо за то что вы работайте над улучшением дизайна интернет-магазинов, думаете своей головой и не боитесь предлагать новое. Нас таких мало.

                              С остальным всё не так радужно:
                              — Только хотел вас похвалить за попытку «человеческих категорий» для ноутбуков, как понял что это просто скриншот другого сайта в качестве примера.
                              — Вы по сути предлагайте сделать ещё одну систему фильтрации на основе тех.параметров, причём её ещё и спрятать! Вот пользователи то порадуются…
                              — Визуальные картинки процессора, памяти и жёсткого диска ничего не иллюстрируют. В них нет смысла, да и красоты не много. Но сама идея упростить вывод информации о товаре похвальна.
                              — Убрать маркетинговую информацию из описания товара это прямо удар по яйцам производителей. 8-)
                              — Постраничная разбивка вместе с сортировкой и фильтрацией — ночной кошмар UI дизайнера.

                              В целом у вас получается прайс-лист с иконками. До того чтобы называться интернет-МАГАЗИНОМ это ещё очень далеко. Подумайте. Как в вашем случае буду действовать покупатели, которые не понимают в технических параметрах? Таких более 60%.

                              Я не планирую с вами дискутировать в этом посте, я готовлю свои статьи на эту тему, и надеюсь вы их не пропустите. 8-)
                                +1
                                Нет не пропущу. Но и в следующем посте я приведу много интересного.

                                P.S. С чего это вы взяли что это скриншот другого сайта? оО!
                                +1
                                Дизайн симпатичный. Возможно, я что-то упустил, но я бы не назвал это концептуальным подходом, Вы именно показываете нам хороший дизайн…

                                PS: я бы не стал прятать фильтр — хороший вариант это показать его сначала и дать кнопочку «скрыть» и состояние фильтра запоминать, чтобы на всех страницах он был отображен или скрыт.
                                  0
                                  Никогда бы не подумал, что для фильтрации или поиска товаров нужно работать с сортировкой. С некоторых магазинов уходил лишь из-за отсутствия фильтров (а может они там были, но прятались за словами типа «сортировка» или. Скакать по сотне страниц в поисках искомого диапазона цен, например, методом половинного деления как-то лениво обычно (если нет других причин выбрать именно этот магазин)

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

                                  Вообще бесит, когда СЛУЧАЙНО узнаешь, что можно было позвонить/подъехать/написать и договориться об «оптовых» или «особых» ценах. Оформляешь заказ на 20 одинаковых десктопов и «сервер» (тот же десктоп, но помощнее), звонят только чтобы сообщить, что им потребуется 2-3 дня на сборку заказа. В итоге заказ ушел тем, кто попросил 5 дней, но дали 5% скидку (что в итоге вышло дешевле чем цена по прайсу за 2-3 дня). А потом оказывается, что изначально выбранная фирма такую скидку (и даже большую и ещё какие-то бонусы) имела в виду само собой разумеющейся, даже если бы сразу можно было забрать заказ, а не через 2 дня, хотя последующее детальное обследованиях их сайта даже намека на такую возможность не показало.
                                    +1
                                    Видно, что стараний вложено немало! За это хвалю. Однако сразу же критика по юзабилити: во-первых цена практически теряется в (не сразу нашел ее) вот в этом вью:


                                    Там же… кнопка «в корзину» должна как-то выделяться и быть рядом с ценой. Опять же, приходится некоторое время искать.

                                    Далее… Кнопкоиконки хороши, но их назначение лично мне не очевидно. Ну допустим звезды — вроде как в избранное добавить. А что значит ромашка-шестеренка (непонятно, что это). Ну фотик — по идее фотки, видео — видео пользования?

                                    Потом, непонятно, как это будет, если характеристик больше, ну то есть тех же например картинок интерфейсов будет побольше, или там про дисплейную матрицу что-то будет…

                                    В общем, как концепт — нравится, но безусловно нужна юзабилити доработка.
                                      +1
                                      Ну я же предупредил это схематически :)
                                      0
                                      Хотелось бы увидеть хоть один интернет-магазин, в создании которого принял участие автор…
                                        0
                                        macshop.com.ua(2007-й год) и я уже писал о том как важно компановка групп товаров. Так же писал об этом тут. Это единственное что есть на Украинском рынке. Остальные пока не могу показать. В разработке macme.com.ua и еще магазин по продаже свечей… и интернет-магазины для 2-х крупнейших в Украине Ювелирных компаний.

                                        Вообще когда закончатся работы по последним проектам я сделаю мини отччет на хбре или у себя в рабочем блоге. Потому как там будет много инноваций, подсмотренных за рубежом или придуманных мной. Следите за моим блогом(тут имею ввиду) если интересно.
                                          –1
                                          Простите, а чем macshop.com.ua принципиально отличается от store.apple.com, за вычетом испорченного оформления и навигации?
                                            0
                                            Я привел ссылку не для оценки дизайна… но за навигацию было много споров с начальством… я согласен.
                                        0
                                        Красный — отпугивающий, только в советской пропаганде.
                                        Нестле с Кока-Колой ставит вам большую двойку.
                                        +5
                                        Начнем с того, что 98% посетителей не пользуются всякими приблудами интернет-магазина. Даже сортировку по цене редко используют.
                                        1. Панель «Сортировать» с подчеркнутыми ссылками предполагает вообще какой-то переход (ну мне так показалось). Ссылки, которые не ведут перехода на другую страницу, а показывают что-то скрытое, обычно делают подчеркнутые пунктиром. К тому же открывшееся окно — это фильтрация, а не сортировка. Как работает именно сортировка — мне не понятно. Куда нажать, чтобы показались самые дешевые ноутбуки в порядке возрастания цены?
                                        2. Кнопка с шестерней — это обычно настройка или персонализация, а у вас получается навигация. К тому же она очень маленькая, ее просто не заметят и не узнают, что это вообще было. На кнопку не похоже. Навигацию лучше делать открытой всегда, хотя бы разделы первого, ну или первого+второго уровня разделов. Можно в виде облака, можно в виде списка, дерева, раскрывающегося меню, как угодно. Но доступные разделы должны быть видны всегда, потому что покупатель слишком ленив, ему не очевидно, что раздел там и чтобы их открыть, надо куда нажать. Скрыли разделы — всё, нет разделов.
                                        3. Иконки — это конечно позитив. Но опять-таки не очевиден. Разделом «Помощь» вообще никто никогда не пользуется. Вы, когда приходите в супермаркет, читаете инструкцию по использованию супермаркета? Иконки должны быть понятными тогда уж. Или научите посетителя различать иконки сразу, например, показывая моментальные подсказки при наведении на иконку. Навели на звездочку — «Этот товар участвует в акции», навели на «20%» — «На этот товар предлагается скидка 20%» и т.д. И у иконок не должно быть повторения цветов, на каждую иконку свой цвет — это как с деньгами. Купюра своего достоинства имеет свой цвет, также и здесь каждое выделение должно иметь цвет, чтобы человек не расшифровывал символов на иконке.
                                        4. При нажатии на товар должен быть переход к товару, а не краткая информация о товаре. Зачем она? Что она мне дала? Такая информация может показываться при наведении на товар. Навел — это справка, нажал — это действие. У вас получается, чтобы попасть на страницу товара надо сделать 2 клика в разные места. После просмотра 10 товаров я бы закипел.
                                        5. Ноутбуки — это не тот товар, который можно показывать только названием и фоткой. Могут быть целые серии ноутбуков, различающиеся по ценам в разы. Название одно, серия одна, корпус один, а начинка может быть абсолютно разной, потому и цена сильно меняется.
                                        6. Корзина. 10 лэптопов действительно никто не будет покупать, а вот ерунды всякой могут, например, коробки для дисков, планки памяти, салфетки и т.д. Кстати, в корзине еще выводят аксессуары для товаров в корзине — последний шанс что-то впихнуть к заказу.
                                        В общем, всё это как концепт хорошо, но в реальном магазине вызовет лишь отказы от покупок — люди впадут в ступор и убегут в панике.
                                          +1
                                          Опять же… это схематически. К сожелению моему и большому, я не могу найти время на прорисовку дизайна, доводку. Хотя сам с опытом и мог бы сделать но…
                                          +1
                                          По поводу страницы пересчета это как два крана и раковина в Великобритании. Раковина затыкается, в ней смешивается холодная и горячая вода. На вопрос «почему» и «не удобно» отвечают «потому что всегда так было».

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

                                          К тому же плюсики, причем разных цветов — зеленого и красного, используются в соц.сетях.
                                            +1
                                            Речь вроде шла о магазине дорогих товаров. Понято, что если заказывается большое количество одного товара, то пересчет должен быть. :)
                                            0
                                            Спасибо за статью.

                                            А какая CMS для интернет-магазинов, из присутствующих на рынке, максимально приближена к идеалу, по Вашему опыту?
                                            Так чтобы минимально надо было допиливать.
                                              0
                                              Та в которой меньше всего наворотов. Я использую разработку компании h1.com.ua очень удобная тем что я могу делать абсолютно все. В плане вывода, но там есть и минусы…
                                              0
                                              И так. Есть магазин.
                                              Ноутбуки
                                              ассортимент: Ноутбуки, Аксессуары

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


                                              Два раза перечитал, но не увидел нигде второй. Это опечатка или я где-то не врубился?
                                                +1
                                                Все верно… на 1-м примере. 2-й это дальше. пост-продолжение.
                                                0
                                                Поясните еще один момент, пожалуйста. Вот в том месте, где идет речь о настройке блока на вывод группы товаров:
                                                Группа товаров, пользователь может сам определить что ему необходимо. К примеру он хочет что бы в этом блоке отображались только Ноутбуки, или Ноутбуки и батареи или еще что ни будь.

                                                Картинка после этого куска. Там показана панелька настройки, зачем там три одинаковых столбца чекбоксов?
                                                  +1
                                                  вместо 3-х одинаковых могут быть 3 разных или 4-5 столбцов. Я же говорил это схематически. нужно делать на это скидку.
                                                  0
                                                  Понял, спасибо
                                                    0
                                                    По поводу пагинации и скроллинга. Действительно спорный момент. Что будут меньше просматривать товары на дальних страницах или товары внизу одной длинной страницы? Тем более, что сейчас, как мне кажется, восприятие длинных (высоких) страниц меняется. Все эти блоги, длинючие ленты комментариев. Высокая страница особо уже никого не пугает.

                                                    Вон корейцы совсем не парятся по этому поводу выводят весь товар в одну ленту с возможностью при скроллинге расставлять закладки по позициям товара (внизу справа синий ползунок):
                                                    < a href='http://english.gmarket.co.kr/challenge/neo_goods/goods.asp?goodscode=192787847&pos_shop_cd=EN&pos_class_cd=90000002&pos_class_kind=T>http://english.gmarket.co.kr
                                                    Но это женский магазин, конечно, тут ощущение барахолки очень даже к месту и скорее даже плюс.
                                                  0
                                                  Сортировать/Бренд/Склад/Акция — вот уже эти элементы «панели навигации» вызывают у меня ступор. Абсолютно не не понятно, что будет происходить по нажатию на кнопку. Почему на одном уровне находятся кнопки «Сортировать» и «Склад». То есть сейчас активно «сортировать», а если я на «склад» нажму, что изменится?..
                                                  Это и пассажи про «отпугивающий красный цвет цены» заставляют всерьёз усомниться в наличии у Вас здравого смысла и способностей рассуждать о плюсах и минусах той или иной компоновки элементов навигации. Я считаю, что ещё стоит несколько лет почитать книжки и позаниматься веб-строительством где-нибудь в песочнице, а потом уже можно на публику. Сейчас — явный провал.
                                                    +1
                                                    Я нормально отношусь к критике. Только я написал что это концепт. По поводу схемы…

                                                    Люди вы что издеваетесь?! Это схема… и кнопки склад и т.д. все это решается дизайнером и все будет предельно понятно! Более того современные технологии позволяют создавать отличные всплывающие подсказки где будет белым по черному или черным по белому написано что это такое.

                                                    а если я на «склад» нажму, что изменится?.. — покажут товары которые есть на складе или отсутствуют в данный момент. Потому как на сайтах сплошь и рядом «Звоните для уточнения состояния склада» или сделаешь заказ через корзину, а тебе перезвонят и скажут что этого нет, и попробуют продать что ни будь еще.

                                                    И я работал и работаю в веб-песочнице уже больше 7 лет.
                                                      0
                                                      Тогда пост вообще ни о чём: в начале заявлется, что речь не идёт о «дизайне, юзабилити и подобном», а далее именно об этом и речь: «вывод кубиками...» да «компоновка». Разве что у вас в голове есть раздел «здесь дизайн, а здесь не дизайн», но другим-то это не видно.
                                                      То есть либо провал по дизайну, либо по умению выражать свои мысли. Опять-таки, как Вы при этом собираетесь ставить задачи дизайнерам?..
                                                      «Отличные всплывающие подсказки»?! Помилуйте, если дизайну требуются всплывающие подсказки, то что-то с ним не так в зародыше.
                                                        0
                                                        Не издеваемся ). О том, что схематично предупреждение есть, но степень схематичности каждый понимает по своему. Отсюда многие непонимания.
                                                          0
                                                          А в чём глубинный смысл показа товаров, которых нет на складе? :D
                                                            0
                                                            предварительный заказ?
                                                              0
                                                              Это обозначает, что товар всё же есть на складе и может быть доставлен, только после определённой даты. У автора же сказано о том, что компания заранее знает о том, что у них нет определённых товаров, но при этом показывает товар.
                                                              0
                                                              Предзаказ, или устаревшие модели, которые возможно будут, уведомление на почту и т.д. Как-то у меня был магазинчик даавно уже я продавал мягкие игрушки, это была проблема… и я сосотяние склада было на сайте постоянно разным. Я это показывал.
                                                          0
                                                          А вы пробовали это все продать кому то? Можно пример реализации?

                                                          А то почему-то мне кажется, «букаф» много, а толку от них мало.
                                                          Ваша сортировка хороша, но тупая как тут www.ochkarik.ru/shop/ лучше и практичнее. И главное не выносит мозг, че и куда тыкать.
                                                            0
                                                            по-моему фигня все эти «концептуальные» подходу и т.п. Нет, конечно увеличить продажи это может, но немного. А вот если в Вашем магазине дизайн будет ужасен, сравнений товаров и прочих штук не будет, но цены будут МЕНЬШЕ цен конкурентов — продажи вам обеспечены. Цены и репутация (гарантия, условия предоплаты и т.д.) для меня как покупателя в 100 раз важнее дизайна и разных подходов.
                                                              +1
                                                              Все правильно, конечно. Но дело в том, что цены ты существенно снизить не можешь. Твои конкуренты торгуют тем же самым, берут товар у тех же поставщиков. Тратят на поддержку/рекламу/курьеров примерно столько же. На чем снижать цену?
                                                                –1
                                                                Не торговать тем же самым (если конкурентов уже много) — изучать спрос, собирать статистику и т.д.
                                                                Оптимизировать затраты на закупку/хранение/доставку
                                                                Реклама может оказаться выгоднее затрат на дизайн сайта (кто знает, что будет лучше — нужно исследовать, сравнивать)
                                                                Если подобное решение не связано с серьезными затратами, то да — почему бы и не попробовать! :)
                                                                  +1
                                                                  Я не буду спорить. Вы говорите все верно. Но согласитесь, что при прочих равных условиях удобный сайт магазина может стать конкурентным преимуществом по сравнению с не удобным. Цена и эффективность такого преимущества, это конечно все вопросы.
                                                                0
                                                                mmib прав. Покупатель предпочтёт более низкую цену, наличие на складе в магазине (а не у поставщика «моего поставщика») и обещание доставтить «через пять минут». К тому же у покупателя абсолютно нет времени «крутить настройки» под себя. В три клика не нешел, в одну минуту не разобрался/запутался/«не туда попал» — тотчас ушел строчкой ниже в поиске Яндекса. Ключевые слова — «быстро» и, в первую очередь, «честно» (на складе есть. именно эта модель. привезем утром).
                                                                  0
                                                                  Снизить цены к примеру на Apple это риск, серая техника… Налоговая и т.д. Снизить цены к примеру на мягкие игрушки компании Fancy Group тоже только жестче…

                                                                  Вообще каждый уважающий себя производитель начинает следить за тем что бы «рекомендуемые цены» были не просто слова. Такие тенденции уж…

                                                                  И в скором будущем, я уверен в этом, конкуренцию будут выигрывать следующие вещи: Отношение к покупателям, сервис, хороший магазин, и т.д. но ни как не цена…
                                                                  0
                                                                  Мне кажется, что цена не главное при покупке в интернет-магазинах. В России на первом месте у грамотных покупателей, по-прежнему, стоит надежность магазина, затем скорость обработки заказов и уж только потом цена товара/доставки. А для тех, кто ни разу не покупал в Интернет — наверное все-таки цена.
                                                                    –2
                                                                    Если оплата курьеру, то плевать на репутацию и прочее. Все равно гарантия в СЦ будет, если что. Что за надежность такая на первом месте, если цена в 2 раза больше, к примеру?
                                                                    P.S> цена = цена товара + цена доставки. Отдельно эти вещи считать нельзя
                                                                      0
                                                                      Цена в два раза больше, чем у кого? У студента, который работает в черную и при первой же поломке свернет свою палатку и след простыл? Я про надежность интернет-магазина, а не товара.

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

                                                                      +1
                                                                      Видимо кармы не хватает, вставлять картинку в комментарий. dl.dropbox.com/u/3992742/temp/nb.jpg
                                                                        0
                                                                        Отличный вариант… особенно если это при наведении…
                                                                        0
                                                                        Причем подобром по параметрам в Яндекс.Маркете :)…
                                                                        +2
                                                                        Интресно! Автор продолжайте пожалусто! Хотелось бы узнать больше о процессе оформления покупки (регистрация, сколько и какие шаги и тд.)
                                                                          0
                                                                          Вот об этом в следующем посте… на примере создаваемого нами сейчас MacMe.com.ua
                                                                          –1
                                                                          Отличное описание Air
                                                                          Особенно Windows 7 ha ha ha
                                                                            0
                                                                            похвально за старание, похвально за стремление к инновациям, но есть недоработки, связанные с тем, что скорее всего вы не владеете собственным магазином.
                                                                            Всю статью преследовала мысль, что вы создали магазин для гиков, но про рядовых граждан забыли. Слишком у вас сложно, люди хотят простоты.
                                                                            Ответьте, пожалуйста на ПМ, нам есть о чем с вами поговорить)
                                                                              0
                                                                              Это не магазин для Гиков… это концепт :)
                                                                                0
                                                                                ну, концепт выходит как для гиков)
                                                                              +1
                                                                              1. Красный цвет — не отпугивает, а выделяется.

                                                                              2. Настройки хороши тогда, когда человек постоянно приходит и проводит много времени. Скажем, на «хабре», «ленте», «яндексе» это годится, а в интернет-магазине не-гики не оценят, зато получат усложненный интерфейс с обилием визуального и информационного шума.
                                                                                0
                                                                                Возможно… но когда я представляю себе свой концепт в действии… грамотная верстка, JS + Ajax как-то все очень даже просто получается.

                                                                                В любом случае… это концепт. И я намерен его реализовать(именно дизайн и программирование) попробовать, дать попробовать людям а уже потом судить.
                                                                                0
                                                                                А когда планируете продолжение?

                                                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                Самое читаемое