2 posts tagged

интернет-магазин

Какой должна быть «корзина» интернет-магазина

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



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



Ярлык «Корзины»



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



noodoll

Оригинальный и интересный дизайн у noodoll.com, но давайте проверим, сколько времени у вас займет поиск корзины.



Дальше от web-мастера не требуется на самом деле чего-то чрезвычайно сложного. Ярлык корзины должен быть заметным и сразу бросаться в глаза. Взгляд покупателя просто не должен промахнуться мимо нее. Особенно если он уже набрал в нее товаров. Но важно не переборщить – она не должна занимать треть экрана.



desina.co.uk



Просто, изящно и со вкусом это реализовано в desina.co.uk.

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





pichshop.ru



Почти хрестоматийный пример – pichshop.ru: как не фантазируй, но офисное ведро для мусора никак не превращается в корзинку из стильного магазина.



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



Кнопка «Купить»

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



Опять же, она должна быть заметной. Это даже важнее, чем заметность самой корзины. Кроме того нужна лаконичность и логичность элемента. Покупатель не будет гадать, что означает этот странный символ, крестик и плюсик – просто сбежит. Существует уже достаточно устоявшееся обозначение, лучше придерживаться его. Если для вашего креативного дизайна надо использовать что-то совсем необычное, то надо предложить нечто столь же понятное. Можете вообще отказаться от символов, но чтобы исключить какие-то сомнения, подпишите кнопку.



tmart.com

У интернет-гипермаркета tmart.com простой и незатейливый дизайн, но сделать кнопку «Add to cart» заметной они не забыли.



wildberries.ru

Классический, но все еще весьма эффективный дизайн этого элемента у wildberries.ru.



Используйте призыв к действию: «Заказать», «Купить» и т.д. И избегайте любого негатива и двусмысленности. Например, калька с английского: «в корзину» – несет совсем не ту смысловую нагрузку.



В самой корзине

Содержание формы – это последняя преграда перед оформлением заказом. Именно последняя. Мнение о том, что из корзины надо переходить еще на одну страницу, где уже и оформить все окончательно – морально устарело. Этим вы просто даете время потенциальному клиенту время на то, чтобы подумать. Но ваша задача не в том, чтобы он задумывался – для этого есть сайты с логическими играми. Вам надо продавать. Поэтому максимально сокращаете путь покупателя к заказу.



holodilnik.ru

Неудачное решение аксакала российской интернет-коммерции. Попав в эту часть holodilnik.ru вы сразу понимаете, что нелегкий путь к оформлению заказа только начинается.



technopark.ru

Более современный подход у technopark.ru: заказ можно оформить прямо в корзине. Есть только один нюанс. От вас требуется только ввести контактный номер, все остальное оформление происходит по телефону.



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

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

Удачных продаж!

2018   интернет-магазин

7 способов улучшить навигацию по каталогу интернет-магазина

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

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



1. Установите фильтры по всем отличительным особенностям товара

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

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

Threadless представляет клиентам поисковый фильтр по характеристикам.

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



2. Установите тематические фильтры

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

 Онлайн-магазин футболок Design by Humans предлагает поисковые фильтры по модным трендам, новинкам и популярности. Эта опция расположена в верхней части сайта и при желании может быть использована.

Хороший пример – фильтры по новинкам и трендам. «Новинка» необязательно подразумевает недавний выпуск товара, но также может указывать на новые добавленные на сайт вещи.

 На этом же сайте слева размещены и тематические фильтры по виду товара. Они позволяют покупателю выбрать коллекционный товар на различную тематику (будь то Звездные войны, Assassin’s Creed: Единство, Г.Ф. Лавкрафт) или же по категориям.

К тематическим фильтрам относится и поиск по коллекциям (например, Звездные войны), как это оформлено на Design by Humans.



3. Укажите количество результатов по каждому из критериев

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

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

Отображение количества товара при применении определенного критерия может помочь покупателю решить, стоит ли применять этот фильтр. Наглядный пример с сайта Jinx.

 Важно, что при добавлении нового критерия в фильтр, информация обновляется. Например, покупатель выбрал категорию «Футболки» и в наличии увидел 378 размера S и 362 М. Если в фильтр добавить еще один критерий по цвету – «красные», то информация по наличию красных футболок размеров S и М должна обновиться.

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



4. Сделайте поиск по нескольким критериям одновременно


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

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

Некоторые покупатели захотят выбрать в одном фильтре две и более характеристик (по цвету, цене, схожести товара). Хороший пример на BustedTees.com.

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



5. Указывайте уже примененные фильтры

Институт Баймарда (The Baymard Institute), исследовательский центр, опубликовал доклад о системах поиска на сайтах интернет-магазинов. Там рекомендуется указывать по порядку по критериям уже примененные фильтры, а в самом верху, над поиском, создать их контрольный список.

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

 Интерфейс сайта Jinx – хороший тому пример.

 Threadless неплохо поработал над указанием примененных фильтров.



6. Сделайте поиск удобным для пользователей мобильных устройств

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

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

Поисковый фильтр должен поддерживаться мобильными устройствами.



7. Не дублируйте контент

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

 По сути, Вы стремитесь найти простой и оригинальный способ поиска по сайту. Сервис Google Webmaster создал список возможных ошибок при оформлении фильтра. Поиск по фильтрам может быть использован не только людьми, но и ботами поисковых систем.

2018   веб-дизайн   интернет-магазин