Корзина в современном интернет-магазине

    Здравствуйте, хочу написать цикл статей про юзабилити веб-интерфейсов, и начну, как не странно, с корзины покупок.

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

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

    Итак, начнем!

    Почему корзина?


    «Так почему именно корзина?» — спросите Вы.
    «А что объединяет все интернет-магазины?» — спрошу я Вас.

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

    Стандартная корзина


    Давайте рассмотрим несколько корзин с произвольно выбранных сайтов.

    Примеры стандартных корзин

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

    Идеальная корзина


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

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

    Рассмотрим основные моменты детальнее:
    • «выглядеть как корзина» — иконка не должна быть ведром или ящиком, чем привычнее она, тем проще ее найти;
    • «пустая корзина или полная» — меняйте иконку в зависимости от количества товара, это очень удобно;
    • «не похожа на баннер» — я думаю всем известен термин «баннерная слепота»;
    • «в привычном месте» — обычно корзины размещают в левой части сайта (обычно над или под меню), либо в правом верхнем углу;
    • «дающая основную информацию» — посмотрев на корзину покупатель должен сразу увидеть сколько товара он уже выбрал и на какую сумму;


    На первом рисунке видно, что похожие корзины имеются, но что будет если добавить интерактива? Мы не видим что за товар в корзине и это не удобно. Давайте сделаем чтобы при наведение мыши отображался список товаров.

    Пример идеальной корзины

    Современная корзина


    Теперь, когда мы увидели идеал, представьте себя в супермаркете с «идеальной корзиной» в которых не видно товара, а только количество и общая сумма и чтоб посмотреть что в ней, нужно снять накидку и открыть замок. Удобно?

    Современная корзина — это «идеальная корзина» в современном вебе. Частью современного веба являются большие разрешения мониторов и интерактивные интерфейсы пользователей. Давайте попробуем собрать все вместе и посмотреть что получится.

    Корзина покупок нового поколения

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

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

    Помечтаем


    Давайте рассмотрим несколько сайтов для примера (сайты выбраны на угад):
    • Олди — видим сайт фиксированной ширины, а справа зловещая пустота...
    • Фото.ru — опять же фиксированный сайт и опять пустота на большом разрешении.
    • Offo.ru — видим резиновый сайт, но удобно ли читать описание товара?


    А теперь просто представьте как будут выгдятеть эти сайты с новой корзиной. Красота!

    Нюансы


    Конечно корзина которая получилась у нас в конце не эталон и все зависит от конкретного сайта, но для большинства это решение будет весьма приемлемым.

    Если Ваш интернет-магазин поддерживает «отложенные товары» (товар которого сейчас нет в наличии, но который вы обещаете завезти) то, возможно, рядом с корзиной должна быть информация о них.

    Бывают также магазины которые не рассчитаны на покупку большого количества товаров за раз (к примеру, салоны vip-подарков) то смысла в списке товаров особо нет, но все равно не забываем о «идеальной корзине».

    Постскриптум


    Исследуя просторы habrahabr наткнулся на интернет-магазин Дары Камчатки в котором корзина сделана достаточно приятно, но ее минус в том что она находится внизу страницы — не всегда перед глазами и перетащить товар в нее не очень удобно,… но как же приятно!

    На этом все, надеюсь мой первый труд Вам понравится.

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

    И еще — я не дизайнер и за красоту набросков не отвечаю, главное идея ;)

    UPD: К сожалению, с циклом статей пока не получается, но все же желание еще осталось :)

    Средняя зарплата в IT

    120 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 6 212 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 97

      +8
      Неплохо. Но:
      — Что будет, если товаров слишком много?
      — Как убрать товар из корзины?
      — Как перейти к полнуму описанию, чтобы развеять свои сомнения в правильности выбора?
      0
      — Что будет, если товаров слишком много?
      Можно разделить отображать товар по частям со ссылкой еще, ведь товар который постоянно нужен перед глазами можно поднять наверх. Либо сделать группы товара и открывать определенную группу.

      — Как убрать товар из корзины?
      Либо «перетянуть» с панели, либо нажать X около тавара (про него забыл, поправлю).

      — Как перейти к полнуму описанию, чтобы развеять свои сомнения в правильности выбора?
      Об этом как-то не подумал сразу :)) Можно текст сделать ссылкой… но стоит еще подумать.
        +2
        Всяческое разделение, постраничная навигация и др. просто убьёт всю прелесть решения. Тут нужно не скрывать, а сделать что-то иное.
          0
          Обещаю подумать на этим :)
            0
            А скроллинг?
              0
              Про скроллинг двумя сообщениями ниже написано.
                0
                Появилась идея, но все же реальное решение можно найти только использовав эту систему.

                Допустим у нас магазин а-ля «Ашан». У нас есть иерархия: отделы — ряды — полки. Так вот если товаров становится слишком много можно отображать товары отдела в котором я нахожусь… если товаров все равно много, то отображать товары только этого ряда… и т.д.

                Либо сделать группировку в корзине — типа «Еда», «Техника», «Посуда».

                Хотя все что не сделаешь немного портят главную идею, но, тем не менее, набирая еды я смогу убрать с виду стиральную машинку и телевизор, а выбирая тумбу под телевизор — еду.
          +2
          По-моему «перетягивание» каких-либо элементов не самый интуитивный (да и не самый удобный) способ работы в вебе.
          +2
          — Что будет, если товаров слишком много?
          Или простейший скролл

            0
            Тоже думал написать, но скролл отдельной части страницы не очень удобен… хотя как вариант, почему бы и да!
            0
            Идея хорош, но не нова, а ее использование может пригодиться только для мелко оптовых магазинов где кол-во покупок не привышает 5-10.

            Я бы посоветовал избавиться от блока «Ваша корзина пуста» считаю его бысмысленым.
            Корзина должна появляться только когда в ней что то есть, а от пустой корзины толку нету.

              0
              Толку нет если на неё нельзя перетаскивать товары.
                +3
                Мне кажется, корзина, как один из основных элементов магазина, должна быть видна постоянно. А вот что написать рядом с ней — уже проблема дизайнера :)
                Можно разместить ссылку на инструкцию и т.д., можно просто сделать неактивной.
                  0
                  А панель — это да, ей незачем светиться когда корзины пуста.
                  0
                  а как вам корзина на eurodom.ru?
                    –1
                    Отображается количество различных товаров в корзине, а не реальное количество заказанных вещей.
                    Я не сразу догадался, что, нажав три раза на чайник, у меня в корзине стало 3 чайника, а не остался один.
                      –1
                      Хорошенькая. только лень было забивать ее всю товарами, чтобы посмотреть, как она себя ведет…
                        +1
                        ужас! с 3-его раза нашел где эта корзина вообще находится
                      +2
                      Лично мне всегда нравилась такая корзина boomboomroom.ru/
                        +4
                        Обычный юзер не всегда нормально ориентируется по кажется элементарным интерфейсам. В приведенном примере я бы заменил кнопку «В корзину» на «Купить», т.к. фиг знает что такое корзина, может это как в винде — удалить в корзину :). Юзер приходит купить, так дайте ему «Купить».
                          0
                          Интерфейс симпатичный и товары занятные :)

                          Позабавло, однако, на странице самой корзины вот что:

                          <title>
                          Untitled Page
                          </title>
                            0
                            А не могли бы вы подсказать ещё таких интересных интернет магазинов? Выбираю подарочек для женщины :)
                          • НЛО прилетело и опубликовало эту надпись здесь
                              +2
                              Да, приятно реализованно, iPhone Style :-)
                                +1
                                Кода я нажал, что бы посмотреть товары в корзине — я не нашел, как закрыть этот попап. Что, нужно было Esc нажать? Я ушел с сайта.
                                И еще — если корзина пуста — то на рисунке — пустая корзина. Если есть один товар — полупрозрачный пузырь. Если больше товара — все равно один полупрозрачный пузырь.
                                Не полностью мне ваша корзина понравилась, но ничего так.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Зря вы так остро реагируете на конструктивную критику. :( Она только способствует совершенствованию.

                                    Что касатеся корзины, соглашусь с koliasoft: корзина прелестная (особенно попап симпатичный), но не без недостатков. Пузырь не очень понятен, лучше бы нарисовать что-нибудь иное (кстати, я считаю, что необязательно разделять 1 товар и 10 — главное, что что-то есть); закрыть попап можно кнопкой Cancel, но это не очевидно; почему исчезает кнопка «In Cart», если я на неё нажимаю, разве я не могу купить 2 одинаковых товара?

                                    В любом случае удачи :-)
                                      0
                                      Про неочевидность Cancel уточню: лучше назвать Close и нарисовать крестик. ;)
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          так и не поработали =)
                                            0
                                            до сих пор не поработали =)
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                        0
                                        Я не должен быть внимательным настолько, что бы полчаса всматриваться в экран в поисках кнопок.
                                      0
                                      Позвольте, не согласиться.

                                      Что мне не понравилось как кастомеру, у вас нужно зарегистрироваться, при этом процесс регистрации просто убивает все желание покупать. Мне нужно ввести адрес почты, потом вы мне что-то высылаете на почту, я должен проверить почту, чтобы потом вернуться назад и продолжить процесс оформления заказа. За это время я 10 раз передумаю что-то у вас покупать. Не зря сейчас в моде one-page checkout-ы, где все это делается в пределах одной страницы, ajax позволяет это очень красиво сделать.

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

                                      Насчет слайдера «On/Off», мне вообще не понятно зачем он нужен. Это просто лишний элемент.
                                      Красоты и лишняя мишура, не должна мешать достичь главной цели — получить заказ, здесь видно это второстепенное.

                                      Я не знаю как у вас с заказами, и не знаю ваш ли это магазин, но я уверен, что на этих мелочах вы можете терять немало заказов. В идеале, нужно делать A/B тестинг и проверять.
                                        +1
                                        Хорошая корзина. Не очень понравилось, что она заслоняет все окно, но видимо это просто привычка.

                                        Еще очень нравится корзина www.martinandosa.com
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          Разумно. Однако давайте посмотрим на вопрос с другой стороны.

                                          подавляющее большинство покупателей берёт 1 позицию


                                          Слишком категорично. Да, большинство; но подавляющее ли? Во многих магазинах приобретают сразу несколько товаров (книги — иной раз пачками заказывают; диски, e-goods и т.п.).

                                          Второй момент: сравните не соотношение количества покупателей-«однотоварников» и покупателей-«многотоварников», а отношение полученной выручки с клиентов каждого типа. Уже не так однозначно, да? А если теперь учесть, что «многотоварники» скорее всего окажутся еще и постоянными покупателями, то может статься, что удобство для «многотоварника» выйдет существенно более важным, чем удобство для однократных покупателей, берущих мелочевку.
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              0
                                              Мои данные: от 60 до 80% заказов в разных случаях.


                                              И я о том же: большинство, но далеко не подавляющее.

                                              Вот это и есть самый страшный бич: желание удовлетворить всех.


                                              Увы, это невозможно. Но стремиться к этому — нужно. Из такого страмления как раз получаются магазины вроде Amazon'а.

                                              реально таких магазинов единицы. Основной алгоритм поиска совершенно другой: price.ru (market.yandex.ru), и далее по ценам от нижних к верхим. Зашли, попытались заказать. Если не вышло, идём в следующий магазин, не разбираясь.


                                              Не буду спорить — видимо, мы просто подразумеваем разные сферы торговли, в которых разные покупатели. :)
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                              +1
                                              Если я не позабочусь о клиенте в первый его визит, он врятли ко мне вернеться в будущем.
                                              Например, в оффлайновых магазинах есть и тележки и корзинки. Соответсвенно для мелких и крупных покупателей. Мы же, как разработчики, можем «подкатить» к покупателю тележку, если он вошел с корзинкой и увлекся покупками — пусть наслаждается… =)
                                              +1
                                              Не сказал бы, что ориентация на одну позицию выигрышна. Когда я продавал пиратские диски — их брали пачками по 5-7 штук. Продавал торговое оборудование — опять по несколку модулей брали. И только складское оборудование — частенько по одному… погрузчику, за 30к$, разумеется, не через корзину, а через звонок и пару часов утрясания комплектации с менеджером.
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                  0
                                                  Вы знаете, никаких проблем с использованием телефона и микроволновки не имею, поскольку микроволновки у меня нет, а при смене телефонов виндоус мобайл меняется не сильно — с неё так же точно можно читать, использовать её как будильник, плеер и часы. Наверное, единственный бытовой прибор, функции которого я пока пользовал в малом объёме — швейцарский ножик.

                                                  А в магазинах всё сложнее. Понятно, что корзина сверху, понятно, что ссылка «положить в корзину» близко к фотографии товара (иначе — в топку магазин). Главная проблема — понять, где лежит искомое. Вот ищем клавиатуру — она может быть в периферии? Должна быть. А она — в устройствах ввода. И в периферии её нет. Если бы я на сто процентов не был уверен, что на сайте клавиатуры есть — ушёл бы. Значит, из периферии хотя бы ссылка нужна на устройства ввода. И с другой стороны, это может привести к путанице ссылок, когда всё ссылается на всё.
                                                    0
                                                    А стремление к нестандартности порождает вот такое: mdata.yandex.ru/i?ctype=1&path=b0409105119__TaurusBravissimo28-XL1.jpg
                                                    (угадайте, что это)
                                                –1
                                                А я-то думал, почему фото.ру не отвечает :)
                                                  –1
                                                  очень понравилась статья. уже хочется попробовать сделать себе такую корзину, думаю директору понравится :) еще раз спасибо
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                      +3
                                                      Тележка — это корзина 2.0, с колёсиками и блэкджеком!
                                                        +1
                                                        Потому что для нашей предметной области это одно и то же.
                                                          +1
                                                          Как известно, настоящий расцвет супермаркетов в Америке начался после того, как с 1936 году была изобретена и пущена в оборот вместо ручной корзинки тележка для покупок :)
                                                            0
                                                            Даешь сегвей-тележку в 2010 :)
                                                              0
                                                              Я уже как-то думал над этим.

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

                                                              В супермаркете будущего, возможно, товары за собой таскать не придется. Идешь мимо полки, хочешь что-то купить — бац, бросаешь товар в (условно) спецкишку, и он потихоньку уезжает на кассу. К тому времени, как ты закончишь шоппинг, все покупки уже будут упакованы/разложены (а может, даже и отвезены домой), и сумма посчитана — останется только сунуть-вынуть кредитку :)
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                          0
                                                          Я жуткий критик и параноик. Почему параноик? Просто когда указывают что нашли что то на хабре, я сразу начинаю включать поиск «Дары Камчатки» я так и не нашел, возможно, это вообще первое его упоминание на хабре. Могу ошибаться.

                                                          Вообще, не «корзина» красит корзину, собственно, она может и не выглядеть как корзина, и совсем не важно что в ней изображено.
                                                          Куда важнее что этот раздел несет функцию информирования о заказанных товарах. И вот тут то как раз важно сказать что не важно как именно будет это решено, может быть, список товаров собирается в виде иконок прямо на странице (где нибудь в углу). И правильно тут писали, что в большинстве случаев, покупается 1-2 товара, а значит и большая корзина не требуется… Я вот частенько от лени затариваюсь в «Утконосе», и не по-наслышке знаком с проблемами корзины при покупки продуктов на неделю… Кароче, корзины универсальной не бывает.

                                                          Доступ к просмотру товара из корзины, это безусловно хорошо.

                                                          P.S....«Дары Камчатки» наконец загрузился, вот как раз продуктовая корзина требует частенько больших пространств, это вам не наушники покупать. да и вообще, внизу, даже на 22 дюймовом не помещается страница, и после покупки постоянно дергается вниз… бееее.
                                                            0
                                                            !!! Я в дарах заказал слишком много товаров — появились жуткие скролы!
                                                            +1
                                                            Почему все хотят привести всё к единому шаблону?
                                                            Для разных интернет магазинов разные корзины.
                                                            Необходимо учесть предметы продажи, затем количество предметов в одном заказе. Так же частота покупок и ещё много чего. И вот определив показатели и их значения для конкретного магазина можно проектировать корзину.
                                                              0
                                                              НУ, так проще делать :) Опять же, обычно аргументируют тем, что пользователь привыкает к единой схеме… впринципе, люди действительно учатся чему угодно, даже плохая схема будет работать если она стоит везде и все ее знают :)
                                                                0
                                                                а она и так везде одна — принцип один. а вот в мелочах всё по разному.
                                                                а установить единую на все магазины не получится из соображений теех же потребностей покупателей в зависимости от товара, а так же от желания заказчика или исполнителя выпендриться и сделать что-то свой лищь бы не делать как «вон у тех».
                                                                  0
                                                                  В некоторых интернет-магазинах цену-то на странице тяжело найти (недавний опыт поиска видеокамеры и аксессуаров). Скажите, кто в таких магазинах будет покупать?

                                                                  Если товар очень редкий — да, можно даже и в сам магазин позвонить и узнать цену, а если у меня открыто 5 страниц с одним товаром и приблизительно одинаковой ценой — я не буду долго искать цену в этом магазине. Закрою окно и перейду к другой странице.
                                                                    0
                                                                    ээээ… непонял к чему это?
                                                                0
                                                                Согласен, что для каждого конкретного сайта нужен свой подход (об этом написал в нюансах), я сам в ближайшем проекте буду использовать без панели, т.к. товаров много не будет.
                                                                +2
                                                                Как правильно тут заметил кто-то — слабовато как для «идеальной». Идеальная еще:
                                                                — будет храниться несколько месяцев, а не очищаться при закрытии браузера,
                                                                — позволит отправить себя на емэйл (гарантированное сохранение, на случай частых одинаковых заказов)
                                                                — выведет сумму доставки (в зависимости от общего веса и ориентировочного города),
                                                                — посоветует товары часто покупаемые с уже добавленными,
                                                                — намекнет что можно сэкономить 10% если докупить еще парочку
                                                                — спросит сколько штук удалить если добавил несколько штук чего-либо
                                                                Да много еще чего не было продумано.
                                                                  0
                                                                  — будет храниться несколько месяцев, а не очищаться при закрытии браузера,
                                                                  Зачем хранить корзину несколько месяцев? Для этого удобнее делать «отложенные товары». Собрал корзину — сохранил на память.

                                                                  — позволит отправить себя на емэйл (гарантированное сохранение, на случай частых одинаковых заказов)
                                                                  За это зачет! :)

                                                                  — выведет сумму доставки (в зависимости от общего веса и ориентировочного города),
                                                                  Это нюанс конкретного магазина, но в общую стоимость полезно будет включить. Знаю по себе что неудобно когда считаешь товар и отдельно ищешь стоимость доставки.

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

                                                                  — намекнет что можно сэкономить 10% если докупить еще парочку
                                                                  Это возможно, но тоже не обязательно это должно относиться к корзине…

                                                                  — спросит сколько штук удалить если добавил несколько штук чего-либо
                                                                  Этого не понял. Про удаление лучше не намекать… мы же продать хотим :)

                                                                    0
                                                                    — спросит сколько штук удалить если добавил несколько штук чего-либо
                                                                    Забыл добавить «при удалении» :) Удаление, как ни печально, тоже должно быть, в конце концов количество влияет на цену, которую пользователь подбирает. А бывает случайно добавил что-то. А бывает нашел альтернативу и хочешь поменять.
                                                                    Драг-н-дроп пока не так распространен да и не так удобен все же (а на тач скринах не заработает вообще).
                                                                      0
                                                                      Для удаления там на скриншоте крестик забыл, об этом выше писал… поправить не успел :(
                                                                  0
                                                                  По-моему, «привычным» расположением корзины является справа, а не слева. Именно справа корзины расположены на tigerdirect.com, amazon.com, bestbuy.com и многих других ведущих интернет-магазинах. Потом собственно сама идея далеко не нова.

                                                                  Я использую нечто подобное. В интернет-магазине есть два блока с корзиной. Первый блок привычный — просто иконка, количество товаров в корзине и общая сумма. Вторая корзина расположена справа ниже шапки в виде блока и в ней показывается последние 2 добавленные товара, количество наименований и количество товаров, общая сумма. Практика показывает, что в большинстве интернет-магазинов очень редко в корзину добавляется более 1 или 2 товаров. Как вариант, если товаров больше 2, то можно показывать остальные товары только в виде названий, но при наведении на них через полсекунды подгружается более подробная информация о товаре. Вариантов расширения такого блока с товарами масса — может быть всплывающее окно, может быть подгрузка инфы, может быть прокрутка списка стрелками и т.д.
                                                                    0
                                                                    Я тоже выбираю правый вехний угол. Со скриншотов это видно.
                                                                    Идея с двумя корзинами мне тоже нравится, поэтому панель в моей идеи можно скрывать и пользоваться обычной :)
                                                                    Можно ссылку на ваш магазин?
                                                                    0
                                                                    " «выглядеть как корзина» — иконка не должна быть ведром или ящиком, чем привычнее она, тем проще ее найти; "
                                                                    вы не поверите, но иконки большинству фиолетовы.

                                                                    " «пустая корзина или полная» — меняйте иконку в зависимости от количества товара, это очень удобно; " ага, клиент особо обрадуется. Вообще, чем меньше пугаете клиента, тем лучше для количества денег.

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

                                                                    Олди — видим сайт фиксированной ширины, а справа зловещая пустота…
                                                                    Фото.ru — опять же фиксированный сайт и опять пустота на большом разрешении.
                                                                    Offo.ru — видим резиновый сайт, но удобно ли читать описание товара?

                                                                    Критиковать очень больших игроков рынка всегда некорректно. Просто потому, что глупо.

                                                                    " товар в нее не очень удобно,… но как же приятно!"
                                                                    ну о чем можно еще писать. Товарищ, вы простую вещь поймите: деньги важнее приятно. А деньги получаются только из удобно. Это, кстати, «секрет» успеха всех мелкософтовых программ: они удобны.

                                                                      0
                                                                      Почему-то Вам не ответил :) Исправлюсь.

                                                                      1. Иконки фиолетовы как таковые, но вот глазу они помогают находить информацию, и если Вы нарисуете вместо корзинки самолет не думаю что человек сразу поймет где корзина.

                                                                      2. Не думаю что клиент испугается, а вот внимание опять же привлечет.

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

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

                                                                      5. Мне понравилась корзина именно тем что она прикольная, я не где ни писал что она удобная и что рекомендую ее как эталон. Просто необычная реализация.
                                                                      0
                                                                      А еще я б вообще не показывал корзину покупателю до нажатия кнопки «купить»
                                                                        0
                                                                        Неправильно. Исчезающая корзина затруднит ее розыски. Да и вроде нет никакой веской причины так делать.
                                                                          0
                                                                          Корзина должна быть на экране всегда.
                                                                          0
                                                                          Что вы скажете о том, как сделана корзина в нашем интернет-магазине детских товаров: ursik.com.ua/?
                                                                          (Просьба не ругать сильно за глюки верстки и т. д., сайт еще на стадии разработки, если что — пишите в личку)
                                                                            0
                                                                            Сначала попробуйте что-то купить, потом увидите корзину(надеюсь :) )
                                                                              +3
                                                                              1. Алерт затрудняет добавление двух и более продуктов.
                                                                              2. Плохо когда сообщение появляется в центре, а уж затем прозрачная корзина в углу. Корзину можно незаметить (усугубляется следующим пунктом)
                                                                              3. Читаешь «Товар был добавлен» но пока не согласишься не увидишь его в корзине. То же и когда «товар удален». Сообщение врет ;)
                                                                              4. Было несколько разных продуктов. Нажимаю «мусорный ящик» — удаляется всё. Без всяких подтверждений. АААААААА!!!
                                                                              5. Корзина бело-прозрачная, на белом фоне незаметная. Было бы неплохо выделить ее контуром. Или сделать серо-прозрачной (желто-прозрачной).
                                                                              6. Место у корзины неудачное, возможно будет перекрыта ICQ, например.
                                                                              7. Для удаления в «инфо» корзины используются крестики, что отличается от «мусорного ведра», оставьте что-то одно. (Мусорное ведро по сути та же «корзина» — может лучше отказатся от него).
                                                                              8. Ни корзина, ни даже кнопки «купить» (!) у продуктов не работают при отключенном яваскрипте.
                                                                              9. Товары в «инфо» корзины не сортируются. Мелочь, а такое.
                                                                              Бонус. Добавляем товары, жмем купить, на странице покупки удаляем все товары, заполняем обязательные поля мусором (а капчу верно), жмем купить и получаем «Благодарим вас за совершенную покупку! Наш менеджер свяжется с вами по телефону для уточнения деталей доставки». (И по ходу, раз уж я попал на эту страницу — не хватает номера моего заказа)

                                                                              Попробуйте вместо (!) алерта делать jquery transfer эффект — уйдут 1) и 2).

                                                                              ЗЫ. В главная левая навигация сайта схлопывается когда кликаешь на подкатегорию — очень дезориентирует. Лучше оставалась бы раскрытой пока я в данной подкатегории.
                                                                                0
                                                                                Спасибо!
                                                                                Много действительно важных моментов, о некоторых я раньше даже не задумывалась.

                                                                                jquery transfer — замечательная штука!
                                                                                100% теперь будем применять :)
                                                                                Сразу же вопрос: Что лучше переносить в корзину с помощью jquery transfer, если товар был добавлен через страницу товара, где по сути основная часть страницы — информация об этом товаре. Вот тут совсем неоднозначно ) Можно например всю область с инфой о товаре (довольно большая), можно блок, где расположена цена и кнопка «купить», можно плашку с заголовком(названием товара). Даже не знаю, какой вариант лучше.
                                                                                0
                                                                                > Сначала попробуйте что-то купить, потом увидите корзину(надеюсь :) )
                                                                                Ах, да. Это был пункт номер 0, кстати :)
                                                                                  +1
                                                                                  Конкретно в случае интернет-магазина, о котором идет речь, не соглашусь.

                                                                                  Если мы еще выделим корзину более ярким цветом, то проблемы обнаружения корзины точно не будет, потому что ее позиция зафиксирована на странице независимо от прокрутки и она всегда на глазах, когда нужно.
                                                                                  А без товаров она там мешала бы, почти как некоторые назойливые баннеры :)
                                                                                  0
                                                                                  Корзину не нашел только с третьей покупку — это не хорошо… Сделайте рамочку либо какой-то эффект, чтобы глаз ее замечал.
                                                                                  Зачем кнопка «Очистить»? Это не столь важная кнопка, чтобы ее постоянно показывать, лучше сделать эту функцию в самой корзине.
                                                                                    0
                                                                                    P.S. чуть выше написано остально.
                                                                                      +1
                                                                                      По поводу рамочки согласна.

                                                                                      По поводу кнопки «Очистить». Это и есть «в самой корзине» :)
                                                                                      Вы видите на сайте где-то отдельную страницу для корзины? Можно конечно оставить возможность удаления товаров только через список товаров в корзине(кнопочка «инфо»), но это может быть не самым очевидным решением.

                                                                                      А теперь представьте ситуацию: Человек, который наконец-то решился приобрести товар именно в нашем магазине, случайно кликнул по соседнему товару. Он в панике, ему нужно купить только один товар, но он не знает, как удалить лишний. Фактически мы теряем покупателя.
                                                                                  +1
                                                                                  Еще один момент, раз уж такое обсуждаете.
                                                                                  Вопрос к специалистам по юзабилити:
                                                                                  Мы думали создать в нашем интернет-магазине на страницах товаров возле кнопки «добавить в корзину» еще кнопку «купить», которая вела бы сразу на страницу оформления заказа с данным товаром.

                                                                                  Но есть некая неоднозначность в логике работы, смотрим, что должно происходить при нажатии на кнопку «купить»

                                                                                  Если корзина пуста — товар добавляется в корзину и пользователь перенаправляется к оформлению заказа

                                                                                  Если в корзине уже есть товары — текущий товар добавляется в корзину и пользователь перенаправляется к оформлению заказа

                                                                                  Если в корзине уже есть данный товар — непонятно, добавлять ли этот товар еще раз. Лично я считаю, что следует выводить диалог «В вашей корзине уже есть такой товар, добавить еще один? Y/N/С». После чего осуществляется переход к оформлению заказа. (при нажатии на кнопку «добавить в корзину» товар всегда добавляется, без вопросов)

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

                                                                                  Очень интересно послушать мысли специалистов по этому поводу!
                                                                                    +1
                                                                                    > пользователю непонятно — нужно сначала нажать кнопку «добавить в корзину», а потом еще и «купить», или же сразу нужно жать «купить».

                                                                                    Это точно. Оставьте кнопку «Купить», а при первом добавлении (в большинстве случаев и последнем) сразу после нажатия спрашивайте «Оформить покупку?». Если нет, то поморгать кнопкой «Оформить» в корзине и больше такое не спрашивать.
                                                                                      +1
                                                                                      Супер! Просто и удобно. Спасибо за совет, так и сделаем!

                                                                                      Это уже как минимум второе решение по усовершенствованию интерфейса по мотивам ваших комментариев здесь :)
                                                                                      0
                                                                                      Я не специалист, но много слышал по поводу двух кнопок. Я считаю что кнопка должна быть одна, дабы у покупателя не возникало лишних вопросов.

                                                                                      Если в Вашем магазине покупают больше 2-х вещей, то кнопка должна быть «Добавить в корзину», а в низу страницы можно продублировать «Перейти к оформлению» и при нажатие на нее ничего не добавляется в корзину.

                                                                                      Если в Вашем магазине покупают по 1-му товару (vip-подаки), то ссылка должна быть купить, а на страницы с оформлением, куда нас перекинет, должна быть кнопка «Продолжить покупки».
                                                                                        0
                                                                                        P.S.: Нажатие на «Добавить в корзину», а потом перейти к оформлению понять нужно один раз, чем постоянно задаваться вопросов «Какую кнопку нажать?».
                                                                                          0
                                                                                          Спасибо за советы! Выше в комментариях было подсказано очень элегантное (и я считаю, правильное) решение
                                                                                        –2
                                                                                        У foto.ru — Хабраэффект:
                                                                                        Warning: pg_connect() [function.pg-connect]: Unable to connect to PostgreSQL server: FATAL: connection limit exceeded for non-superusers in /var/www/foto/lib/db.inc on line 53
                                                                                        Cannot connect to PostgreSQL

                                                                                          0
                                                                                          В именно Вашей корзине, крестик возле цены, будет выглядеть непонятно — (4 x 11 000,00 руб X), лкчше сделать его вверху строчки корзины.
                                                                                          Ну и конечно, идеальная корзина должна помнить мой выбор.
                                                                                          Еще, как раз думаю над этим — возможность отправить ссылку на корзину.

                                                                                          В оптовом магазе, такая корзина работает плохо, гораздо понятнее — список товаров, в том же виде что и обычный список товаров.
                                                                                            +1
                                                                                            Молодец! Все классно! Спасибо за хорошую статью ;)
                                                                                              0
                                                                                              Огромное спасибо за материал!

                                                                                              Юзабилити, это то, чего так не хватает нашим интернет-магазинам.
                                                                                                0
                                                                                                Не за что, буду стараться.
                                                                                                  0
                                                                                                  «Юзабилити, это то, чего так не хватает» большинству сайтов…
                                                                                                  0
                                                                                                  «педставьте»
                                                                                                    0
                                                                                                    Статья больше похожа на: «давайте из корзины сделаем транформера». Вы когда-нибудь забывали что покупаете в среднестатистическом интернет-магазине?
                                                                                                    И вот уже статистика — в большинстве (ПОДАВЛЯЮЩЕМ!) покупают один-два товара. И вы думаете, эти люди забыли, что положили в корзину 2 минуты назад?

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

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

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