Первая статья цикла о том, с чего стоит начинать разработку ресурса от идеи до четкого набора документации для передачи ее команде разработчиков.
Блог UsabilitySTUDIO: «MVP, с чего начать. Часть 1. Сторителлинг в проектировании интерфейсов «
There are 12 posts tagged создание интернет-магазина (this is page 1 of 2).
Первая статья цикла о том, с чего стоит начинать разработку ресурса от идеи до четкого набора документации для передачи ее команде разработчиков.
Блог UsabilitySTUDIO: «MVP, с чего начать. Часть 1. Сторителлинг в проектировании интерфейсов «
Полезная статья о том, каких видов бывают инфоблоки на сайте и зачем они нужны.
Блог UsabilitySTUDIO: «Инфоблоки на сайте, или 12 рекомендация по юзабилити Главной страницы«
Давайте поговорим об инфоблоках на сайте. Изначально эти блоки создавались для размещения рекламы, сейчас же эти блоки используются для общего удобства пользования сайтом – чтобы «все было под рукой».
Давайте поговорим об инфоблоках на сайте. Изначально эти блоки создавались для размещения рекламы, сейчас же эти блоки используются для общего удобства пользования сайтом – чтобы «все было под рукой».
В реальной жизни это можно сравнить с грамотной организацией рабочего стола – все необходимые инструменты/бумаги и т.д., как правило, находятся на расстоянии вытянутой руки(это помогает оптимизировать работу). В случае же сайтов, инфоблоки служат для того, чтобы у пользователя всегда перед глазами находились необходимые ссылки и контакты, и ему не приходилось пролистывать страницу к нужному элементу. Это значительно упрощает навигацию на сайте, а также положительно влияет на лояльность покупателей.
И самый простой вариант инфоблока – это Hellobar.
Хелло бар это блок, располагающийся в верхней части страницы, в котором располагается различная информация. Он представляет собой готовый код для вставки на сайт.
Сам сервис дает возможность добавить в верхний инфоблок:
У сервиса hellobar есть только один минус-он платный в зависимости от количества кликов. Подробнее о возможностях и настройке этого блока можете изучить на официальном сайте разработчика hellobar.com/
Верхним инфоблоком могут служить как верхнее меню или верхнее меню вместе с шапкой сайта.
Удачный пример такой реализации на сайте радиоуправляемых моделей http://radiogear.ru/, где верхний инфоблок представлен в виде верхнего меню + маркетинговый блок:
Второй пример, сайт http://vmashin.ru/, где верхним инфоблоком является шапка сайта:
Несомненными плюсами такого расположения является наличие основной контактной информации(телефон, время работы магазина), строки поиска(напомню, поиском в 70% пользуются те пользователи, которые уже готовы совершить покупку), а также информация о содержимом корзины(это важно для вовлечения пользователя).
Нижний информационный блок, или его также называют нижний hellobar. Отличным примером применения данного функционала является сайт ulmart.ru
В данном случае всегда доступны для пользователя важные для него элементы: корзина с указанием количества товара в ней, данные о товарах, находящихся в закладках и представленных к сравнению, целевые кнопки Обратной связи и Оформления заказа.
Также в нижнем блоке также может быть расположена форма подписки:
Еще один удачный вариант переадресации на страницу подписки на сайте (и заметно и ненавязчиво):
И еще два варианта расположения на сайте, это блоки, которые «прикрепляются» к правой и левой части экрана (остаются всегда на правой/на левой части экрана при прокрутке страницы) – правый и левый инфоблоки.
Хороший пример прикрепленного инфоблока с иконками соцсетей к левой части экрана.
Для данного типа инфоблоков также есть свой нюанс:
Важно сделать этот блок «скрывающимся — раскрывающимся», чтобы не вызывать раздражение тех, пользователей, которые не заинтересованы в данной информации.
Альтернативой предыдущему способу является размещение этого инфоблока за пределами контента сайта (вариант невозможен для большой ширины страницы).
Неудачный вариант расположения правого инфоблока (иконка корзины «заползает» на остальные блоки на сайте):
В качестве инфоблоков может выступать любая полезная для пользователей информация, например информация о бесплатной доставке:
Или список товаров, который при этом не отвлекает от основного контента сайта:
Также в инфоблоках на сайте размещается кнопка «наверх», при прике по которой происходит прокрутка к началу страницы. Это чрезвычайно удобно при большой длине страницы.
Подытожим:
Важно продумать интерфейс сайта таким образом, чтобы если даже у пользователя возникнут какие-либо вопросы в процессе пользования вашим сайтом, они решались бы с наименьшими усилиями.
Не забывайте, что инфоблоки необходимо скрывать в мобильной версии сайта или заменять аналогичными по функционалу.
Любите своих клиентов и делайте все, чтобы пребывание на вашем сайте было комфортным.
Сегодня мы разобрались с 12-ой рекомендацией по юзабилити, в следующей статье мы узнаем:
Подвал сайта — как его грамотно использовать.
Продолжение следует…
Высоких Вам конверсий и продаж!
Как продавать больше конкурентов? (Часть 1)
Возникли проблемы с размещением инфоблоков на сайте — пишите, подскажу.
В сегодняшней своей статье я хочу рассказать о том, как должна выглядеть корзина на Главной странице интернет-магазина, и нужна ли она вообще.
Пример из жизни: Маловероятно, что вам понравится закупать товары в крупном строительном супермаркете, где нет «тележек».
Во-первых, вам придется носить все товары в руках по магазину, что неудобно, а порой и не под силу. А во-вторых, велика вероятность, что вы вообще ничего не купите в этом магазине.
Нужна ли?
По статистике более 95% товаров, положенных в продуктовую тележку в обычном магазине будет куплено. В этом плане у интернет-магазинов совсем другая статистика — здесь покупателей не обязывают купить товар до того, как те покинуть магазин, поэтому можно смело положить множество товаров в корзину и спокойно уйти из интернет-магазина (что и делают около 84% пользователей).
Так образуются «брошенные корзины». Это обусловлено тем, что при принятии решения о походе в магазин, мы сталкиваемся с физическими факторами: преодолеть расстояние до магазина + найти для этого время. В интернет-магазине же, время, проводимое за покупками, значительно меньше, а расстояние ограничивается несколькими кликами и несколькими ударами по клавишам.
Где расположить иконку мини-корзины?
Самыми распространенными на данный момент видами расположения иконки корзины являются:
Правый верхний угол шапки сайта:
Чтобы корзина всегда находилась в поле зрения, корзину делают «приклеенной» к экрану (наиболее часто встречающийся функционал у CMS Битрикс).
Тулбар с привязкой к верхней/нижней части экрана:
С привязкой корзины к нижнему тулбару(ulmart.ru):
Еще одним не менее популярным вариантом стало расположение корзины в виде иконки привязанной к правой части экрана:
Плохой пример: корзина расположена в непривычном для пользователей месте, поэтому ее сложно найти на сайте:
Как должна выглядеть?
Хороший и грамотно подобранный дизайн, несомненно, важен для интернет-магазина, но при всей «красоте оформления» не стоит забывать о важных деталях:
корзина должна быть заметной и ассоциативно понятной, чтобы пользователь сразу находил ее на общем фоне страницы.
Плохой пример (корзина теряется на общем фоне, никак визуально не выделена):
Хороший пример(визуально заметна, пространственно отделена от остальных элементов):
Корзина должна быть «живой».
При совершении всех действий на сайте пользователь должен видеть ответную реакцию — это знак того, что он «все правильно сделал». То же самое касается и при добавлении товара в корзину — пусть пользователь будет уведомлен об этом – анимацией или же всплывающей подсказкой:
Каким функционалом должна обладать?
В настоящее время практически отказались от варианта «кликнул на корзину — перешел в корзину и посмотрел товары». Сейчас большинство магазинов делает возможным предварительно просмотреть товары в корзине путем наведения на иконку курсора мыши или кликом, что позволяет увеличить среднюю стоимость чека.
Во всплывающем окошке корзины обязательно должны отображаться:
В корзине необходимо сделать возможным «редактировать» заказ – должна быть возможность удалить товар прямо из мини-корзины.
В самой корзине можно разместить информацию для покупателей, необходимую при совершении покупки или же мотивирующую совершить покупку:
Для оптовых магазинов всплывающее окошко корзины должно содержать список товаров + с возможностью изменения количества товара.
Подытожим:
Следует тщательно проработать все элементы в интернет-магазине, чтобы сделать времяпрепровождение клиента на сайте максимально комфортным, и тогда клиенты будут возвращаться к вам за покупками снова и снова.
Сегодня мы разобрались с 11-ой рекомендацией по юзабилити, в следующей статье мы узнаем:
Hellobar на сайте — как использовать его рационально.
Продолжение следует…
Высоких Вам конверсий и продаж!
Как продавать больше конкурентов? (Часть 1)
Возникли проблемы с размещением корзины на сайте — пишите, подскажу.
В сегодняшней своей статье я хочу рассказать о блоке преимуществ интернет-магазина – нужно ли размещать на сайте и как должен выглядеть.
Пример из жизни: представим два конкурирующих магазина мясной продукции, на одном написано:
«Часы работы 9.00-21.00, будем рады.»
А на втором:
«Часы работы 9.00-21.00, без выходных. Только свежее мясо! Говядина, свинина, курица по самым низким ценам. «
В какой магазин вы захотите зайти при прочих равных условиях? Возможно, первый магазин тоже продает только свежее мясо по приемлемым ценам, но магазин не сообщил это, а значит, покупатель может и не узнать об этом.
Нужен ли?
В интернет-магазинах да, нужен. В современном интернет-пространстве количество интернет-магазинов с каждым годом растет в геометрической прогрессии, поэтому конкуренция с каждый годом также увеличивается. В связи с этим, все владельцы магазинов сталкиваются с проблемой «привлечения потенциального клиента». Сейчас приходится постоянно бороться за внимание клиентов, нужно всегда показывать, чем же вы лучше остальных, почему стоит совершить покупку именно у вас. И блок преимуществ на сайте хороший помощник вам в этом.
Пример:
Только посетив этот интернет-магазин часов, покупатель получит интересующую его информацию:
Возможно, именно эти факт повлияют на принятие решения о приобретении товара.
Как должен выглядеть?
Лет пять назад было в тренде «прописывать» все эти преимущества на странице «О нас», однако от такого варианта размещения блока отказались, ввиду того, что тексты преимуществ не читались, ввиду того, что текст должен быть подкреплен соответствующими иконками/иллюстрациями для наилучшего восприятия информации пользователями.
Пример:
Длинные тексты в интернет-магазинах не читаются ( в отличие от новостных порталов/блогов), несмотря на форматирование текста. В таком случае текст преимущества должен быть длиной не более 40 символов, чтобы пользователь только взглянув на него, «проглотил» его за раз и не возвращался к прочтению снова.
Можно сделать преимущества в таком виде:
В данном случае в блоке так же присутствует текстовое описание, однако, для тех пользователей, которые не заинтересованы в изучении длинных тестов, выписаны тезисные фразы преимуществ.
Еще пример:
Где размещать?
Основные варианты размещения блока преимуществ это на Главной странице сайта и в карточке товара. Можете подобрать для своего интернет-магазина другой вариант, но не стоит забывать одно важное правило: не обязательно вешать блок преимуществ перед глазами пользователя, важно, чтобы этот блок просматривался покупателями (хотя бы единожды).
Блок преимуществ можно разместить:
Сразу под верхним меню:
После баннера на витрине Главной:
В левом тулбаре(toolbar):
Подытожим: не упускайте возможность доказать покупателям, что вы лучшие, будь то улучшение качества обслуживания клиентов или размещение блока преимуществ покупки у вас в интернет-магазине.
Сегодня мы разобрались с 10-ой рекомендацией по юзабилити, в следующей статье мы узнаем:
Корзина на сайте — как сделать ее удобной.
Продолжение следует…
Высоких Вам конверсий и продаж!
Как продавать больше конкурентов? (Часть 1)
Возникли проблемы с размещением блока преимуществ на сайте — пишите, подскажу.
Сегодня я хочу рассказать о том, как помочь покупателям в интернет-магазине чувствовать себя комфортно, и с легкостью обращаться за помощью с вопросами. Речь пойдет о коммуникационных сервисах:
Коммуникационные сервисы это средства взаимодействия покупателя и магазина, обеспечивающие обратную связь на сайте.
Пример из жизни: Насколько комфортно вы будете чувствовать себя, если зайдете в гипермаркет, где из работников магазина будут только кассиры? Единственное, что вы будете чувствовать, так это — нарастающее раздражение от вопросов относительно процесса покупки товара и самого товара. Поэтому важно, чтобы всегда была возможность у кого-то проконсультироваться.
Зачем нужны?
Все просто — чтобы отвечать на возникающие в процессе поиска товара в интернет-магазине. Как правило, «горячему» покупателю лень искать самостоятельно, ему проще спросить. В случае, когда данной информации нет на сайте – обратиться к помощи менеджеров посредствам коммуникационных сервисов.
Сегодня я рассмотрю основные коммуникационные сервисы в интернет-магазинах.
Подведем итог: «не бросайте» вашего покупателя одного в интернет-магазине, пусть чувствует, что ему всегда помогут и проконсультируют. От того, насколько грамотна будет помощь, оказанная пользователю, будет зависеть — вернется ли он за покупкой к вам снова.
Сегодня мы разобрались с 9-ой рекомендацией по юзабилити, в следующей статье мы узнаем:
Строка преимуществ — как показать клиенту, что вы лучшие.
Продолжение следует…
Высоких Вам конверсий и продаж!
Как продавать больше конкурентов? (Часть 1)
Возникли проблемы с размещением коммуникационных сервисов на сайте — пишите, подскажу.
В сегодняшней статье я расскажу: Зачем нужны отзывы в интернет-магазине и нужны ли вообще?
Пример из жизни: Если вам несколько раз расскажут о том, что в этом магазине низкий уровень обслуживания покупателей, или продают некачественный товар, какая вероятность того, что вы пойдете туда за покупкой? Вероятнее всего, вы обойдете этот магазин стороной, уйдя к конкурентам.
Так зачем нужны отзывы в интернет-магазине?
Прежде всего, наличие отзывов является одной из точек доверия, соответственно, влияет на принятие решения о совершении покупки для пользователей, которые впервые пришли на сайт. Срабатывает «эффект толпы», т.е. влияние общественного мнения на собственный взгляд относительно предметов/событий. Т.к. большое количество человек уже приобрели товар в данном интернет-магазине и оставили положительные отзывы о покупке, то у покупателей складывается мнение, что этот магазин «действительно хорош».
Где разместить отзывы?
Отзывы на сайте могут быть двух видов: о магазине (процессе покупки товара) и о самом товаре. Обычно отзывы о товаре выводятся непосредственно в карточке товара, чтобы покупателю было легче принять решение о покупке. Отзывам о компании, как правило, уделяется отдельная страница и, в зависимости от тематики магазина, специальный виджет на страницах сайта.
Второй вариант размещения отзывов на сайте — на страницу отзывов о компании дублируются еще и отзывы о товаре, поскольку, как правило, в отзывах указывается мнение не только о товаре, но и процессе его приобретения.
Процедура добавления отзыва
Обязательно предоставьте пользователям информацию о том, как происходит процедура добавления отзыва на сайте.
Все отзывы на сайте должны проходить модерацию администратором, это позволит избежать размещения спама (например, источников на магазины конкурентов).
Сам отзыв должен быть не просто в виде имени покупателя и текста отзыва, а должен содержать и конкретные факты, фотографии или/и рейтинговую систему оценки товара.
Откуда брать отзывы?
Как работать с отрицательными отзывами?
Прежде всего, стоит разобраться с причиной появления таких отзывов: это явный признак проблем в системе обслуживания клиентов, и для владельца интернет-магазина это будет «звоночком» к действию.
Стоит ли размещать отрицательные отзывы на сайте – решать вам. Существует мнение, что наличие отрицательных отзывов (не более 15% от общего числа) добавят доверия покупателей к вашему магазину. Главное что стоит помнить — нельзя игнорировать отрицательные отзывы. Если покупатель оставит отзыв на сайте Вашего интернет-магазина, попытайтесь разобраться в том, что именно не понравилось этому покупателю. Такой внимательный подход и желание исправить ситуацию, покажет ваше внимание и уважение к клиентам.
Однако, проигнорировав отрицательный отзыв и не получив ответной реакции, покупатель напишет о вас на стороннем ресурсе, а это большой минус к вашей репутации.
Сегодня мы разобрались с 8-ой рекомендацией по юзабилити, в следующей статье мы узнаем:
Какие коммуникационные сервисы должны быть в интернет-магазине.
Продолжение следует…
Высоких Вам конверсий и продаж!
Как продавать больше конкурентов? (Часть 1)
Возникли проблемы размещением отзывов на сайте — пишите, подскажу.
Сегодня я расскажу об одном из способов персонализировать интернет-магазин – это определение города по ip покупателя, зачем это нужно, и как можно использовать этот прием для увеличения конверсии.
«Персонализация позволяет Web-сайтам автоматически настраивать информационное наполнение в соответствии с интересами каждого пользователя».
Пример из жизни: Вы пришли в магазин бытовой электроники за холодильником. К вам подходит улыбчивый и приятный консультант, рассказывает вам про новую модель холодильника, и показывает вам его, вроде бы вас все устраивает. НО продавец-консультант говорит, что холодильника в вашем городе нет, везти будут из Новосибирска, поскольку на витрине стоит макет. Какая вероятность того, что после этих слов вы покинете магазин? Согласитесь, велика. Вы останетесь в этом магазине, только если он единственный в радиусе нескольких километров, и вам срочно нужен холодильник.
Поскольку сейчас конкуренция в онлайн пространстве велика, что актуальность персонализации не стоит объяснять. Повторюсь из прошлой статьи: «покупателям приятно, когда товар продают именно ему, а не «безликому юзеру»». А основная сложность, с которой сталкиваются все владельцы интернет-магазина – расположиться доверием покупателей, убедив его в том, что покупая товар в вашем интернет-магазине, он полностью защищен от мошенничества, и вы заинтересованы в этом не меньше него. Вот почему персонализация помогает придать покупателям эту уверенность.
В чем суть определения города покупателя по ip:
При первом посещении сайта по ip автоматически определяется город пользователя, и в соответствии с этим ip отображается контент интернет-магазина.
Что же делать, если город определился неверно? Такие случаи бывают, но эту проблему можно решить, позволив покупателю выбрать город самостоятельно.
При первом посещении сайта появляется следующее окошко:
При нажатии кнопки «Да», окошко закрывается, а информация о городе покупателя сохраняется в Cookie файлах, и, соответственно, используется для всех последующих посещениях интернет-магазина.
При нажатии на кнопку «Нет» появляется окошко выбора города, например в таком виде:
На какие элементы сайта влияет выбор города:
Пример: интернет-магазин Enter:
На многих корпоративных сайтах сверху страницы есть блок выбора своего города, и при его изменении на сайте уже отображаются статьи или какой-то материал, специфичный именно для этого региона.
Зачем покупателю знать цены и наличие товаров в другом регионе? Покажите то, что актуально для его местоположения: какие акции проводятся в его регионе, какие цены на товары именно в его регионе.
И удобно, когда эта информация содержится не только на странице сайта Доставка и оплата, но и в карточке товара и корзине. Как это реализует крупный магазин книг Лабиринт (в соответствии с городом отображается количество точек самовывоза в шапке и ближайшую дату доставки):
Все четко и конкретно.
Это также может быть реализовано в карточке (пример магазин m-video.ru):
Сегодня мы разобрались с 7-ой рекомендацией по юзабилити Главной, в следующей статье мы узнаем:
Нужны ли Отзывы на сайте, как и где их грамотно расположить.
Продолжение следует…
Высоких Вам конверсий и продаж!
Как продавать больше конкурентов? (Часть 1)
Возникли проблемы с блоком определения города покупателя по ip, пишите, подскажу.
Уважаемые читатели!
Сегодня я хочу рассказать, как не только не напугать, но и зацепить пользователей, впервые пришедших на ваш сайт. Речь пойдет о баннере на Главной странице магазина, его юзабилити и функции.
Основной вопрос: Нужен ли баннер на Главной?
Пример из жизни:
На рынке много-много торговых палаток, и рядом находятся 2 мясных магазина.
На одном написано: Мясо.
На втором же, написано, что в магазине всегда свежее мясо птицы, свинина и говядина.
Пока что, не заходя в них, вы можете сказать о первом то, что там продают какое-то мясо, а о втором то, что там продают различные виды мяса, в частности, то, что нужно именно вам, говядина, да еще и свежая.
Да, может в первом магазине тоже была свежая говядина, но эту информацию владельцы магазина не захотели показать покупателям. А во втором она была наглядно представлена, и вам, как покупателю, она оказалась полезной.
Баннер на Главной является составляющей витрины, которая показывает пользователям, что вы готовы им предложить. Таким образом, баннер на главной , однозначно, нужен с точки зрения маркетинга.
Баннер должен содержать больше графической информации, чем текстовой, т.к. пользователи ее воспринимают легче, пример, как делать не надо, можно посмотреть на сайте интернет-магазина Королева Спорта:
где в качестве рекламного баннера используется текстовый блок, который абсолютно не читается.
Только одни картинки тоже не воспринимаются, поскольку могут быть восприняты неоднозначно или вызовут множество вопросов.
Пример хорошего исполнения баннера, я бы сказал, как надо делать, можно посмотреть на сайте activizm.ru:
Каких размеров должен быть баннер с точки зрения юзабилити?
Рекомендуется делать баннер шириной и высотой таким, чтобы его без проблем могли просмотреть в полном разрешении экрана своего устройства не менее 75%-80% ваших посетителей.
Помните, большой баннер оставляет важную для посетителей информацию за пределами первого экрана (первый экран-это та область сайта, которая просматривается без прокрутки страницы вниз и вправо):
Какое дизайн решение использовать?
Цветовая гамма и используемые шрифты должны соответствовать тематике и общему стилю сайта.
Не рекомендуется делать слишком большое описание в баннере, поскольку тексты, особенно длинные, не читаются. Старайтесь ограничиться парой слов крупного шрифта, чтобы пользователь боковым зрением зацепил информацию, целиком «проглотил» и остановился взглядом на ней.
Не используйте пестрящие красные тона, их излишек воспринимается как сплошная реклама и отсеивается, вступает в силу такой эффект как баннерная слепота:
Баннерная слепота — психологическая оптическая иллюзия, благодаря которой пользователь сайта не замечает рекламные блоки (баннеры) или объекты, похожие на них.(Википедия)
Каким должен быть баннер статическим, flash баннер или сделанный с помощью яваскриптовых фреймворков?
Немного поясню, что это означает:
Статический баннер: просто картинка-никуда не двигается, ничего не делает.
Преимущество: простота, дешевизна и быстрая загрузка.
Недостатки: полностью исключается способность человеческого глаза улавливать движение, что снижает степень вовлеченности пользователя
Flash баннер — это баннер, организованный с помощью flash-технологии, т.е. анимация.
Преимущество: красочная анимация, любые эффекты с изображениями, вплоть до внедрения мультфильма.
Недостатки: дорогое производство, невозможность просмотреть с мобильных устройств, большое время загрузки, первый кадр появляется только после полной загрузки ролика.
Баннер на основе яваскриптовых фреймворков (Javascript фреймворков) — это последовательность статических баннеров, связанных стандартными переходами с заданным временем перелистывания.
Это средний вариант по тем показателям, что я рассматривал ранее.
Какую информацию использовать на баннере?
Здесь вы должны разместить все то, что вы хотели бы показать вашему покупателю: хотите показать, чем вы лучше других, так разместите в баннере преимущества покупки именно у вас, как например это реализовано на сайте http://moscross.ru/:
У вас есть товары «локомотивы» — расположите их в этом баннере. Практически во всех интернет-магазинах есть акции, расскажите в баннере о них.
Как не надо делать:
Как надо делать:
Просто разместите обычные информационные баннеры. Но здесь не нужно забывать о том, что этот баннер должен предоставлять пользователям варианты дальнейших действий, а именно, прикрепите ссылку для перехода в раздел с группой товаров или к конкретному товару.
Как не надо делать можно посмотреть на сайте http://slalomshop.ru/:
Несколько переключающихся баннеров рассказывают о различных товарах, но баннеры не кликабельны и ни предоставляют пользователю дальнейших действий, а искать товар, представленный на баннере, по каталогу будет не больше 2 покупателей из 100 (самые-самые горячие покупатели).
Внимание! Уделите должное внимание тестированию баннера. В идеале следует провести А/В тестирование баннера на сайте, оценивая эффективность с помощью статистики. Однако есть и более экономный вариант тестирования-покажите этот баннер своим друзьям или знакомым, поскольку ваш взгляд «замылен», и вы не можете в полной мере оценить, эффективен ли баннер.
Вот мы определились с четвертой ошибкой в юзабилити главной страницы. В следующей статье, которая появится в течение 3-х дней, мы узнаем:
Как должна выглядеть витрина с товаром?
Продолжение следует…
Высоких Вам конверсий и продаж!
Возникли проблемы с созданием витрины, пишите, подскажу.
Уважаемые читатели!
В прошлой статье я рассказал, как помочь пользователю подобрать нужный товар на страницах интернет-магазина с помощью правильной навигации.
Сегодня хочу рассмотреть, как не упустить «горячих» покупателей, которые пришли к вам в интернет-магазин купить конкретный товар. Как показывает статистика, 60% таких посетителей пользуются поиском на сайте , поэтому поиску необходимо уделить должное внимание при создании интернет-магазина.
Пример из жизни
Представим ситуацию: Вы давно мечтаете купить себе термобелье определенного бренда, но все нет времени зайти в магазин. Однажды у вас появилось 20 минут свободного времени, и магазин как раз неподалеку.
Вы заходите в магазин, где вам искать желаемый товар?
Начинаете искать консультанта, а его попросту нет, потеряв 20 минут времени, вы не находите ни консультанта, ни термобелье. Расстроившись, решаете для себя больше не заходить в этот магазин.
Итак, 3 ошибка в юзабилити интернет-магазинов — отсутствие или неудобный поиск.
Решим сразу, поиск в интернет-магазине должен быть обязательно, это часть интерфейса, которая поможет вашему покупателю найти товар и совершить покупку у вас.
Какое пространство на странице должен занимать поиск с точки зрения юзабилити?
Многие владельцы интернет-магазинов считают, кому нужен поиск, найдут его в любом виде и любом месте страницы. Это ложное утверждение, не надо заставлять пользователя лишний раз сомневаться в покупке товара именно в вашем магазине.
Сравним две поисковые строки в интернет-магазинах:
1) http://www.kemping-market.ru/ — интернет-магазин туристического снаряжения
2) http://veryvery.ru/ — интернет-магазин любимых товаров
В обоих случаях, поисковая строка легко находится, потому что оптимально выбрана высота строки, но в первом случае поисковая строка слишком маленькая по ширине. К примеру, если вы захотите ввести «Подводная камера Aqua-Vu Micro», то эта фраза в поисковую строку не поместится. Для проверки, все ли вы правильно ввели, придется пролистывать фразу на начало строки, что очень неудобно, особенно с мобильных устройств. Во втором случае ширина поисковой строки оптимальная и составляет 30% от ширины страницы интернет-магазина.
С точки зрения юзабилити ширина поисковой строки должна составлять не менее 30% от ширины страницы интернет-магазина, а высота в два раза больше высоты используемого шрифта.
Где расположить поисковую строку с точки зрения юзабилити?
Вопрос несложный, поисковая строка всегда должна быть в шапке сайта, при этом по мере необходимости допускается ее дублирование в остальных блоках страницы.
Как должен работать поиск с точки зрения юзабилити?
Рассмотрим основные требования к функционалу поиска:
1) поиск должен быть построен с использованием автокомплита (автоподбора), то есть выпадающего окна с подсказками.
без автокомплита
с автокомплитом
2) поиск должен автоматически преобразовывать латинские буквы в русские, что упростит работу тем пользователям, кто забыл переключить шрифт на клавиатуре.
3) при вводе символов в строку поиска в выпадающем списке в названиях товаров должна выделяться вводимая фраза, для легкого поиска взглядом нужного товара в списке.
4) помимо названия товара в выпадающем списке рекомендуется отображать миникартинку и стоимость товара, как в интернет-магазине http://www.epool.ru/
Что позволит людям с визуальной памятью по картинкам найти нужный товар в списке.
5) помимо товаров рекомендуется отображать список категорий, релевантных к запросу
6) для удобства восприятия списка не рекомендуется выводить более 10 товаров, поскольку это именно то количество строк текста, которое человек может визуально воспринять за раз. К каждому выпадающему списку необходимо прикрепить ссылку «Все результаты», чтобы пользователи понимали, что это еще не все товары, и остальные можно просмотреть кликом по ссылке, которая ведет к результатам поиска
7) в случае, если ничего не найдено, не пугайте пользователя пустой страницей, напишите «по вашему запросу ничего не найдено» и предложите список рекомендуемых или похожих товаров.
Вот мы определились с третьей ошибкой в юзабилити главной страницы. В следующей статье, которая появится в течение 3-х дней, мы узнаем:
Стоит ли показывать на главной баннеры и какие?
Продолжение следует…
Высоких Вам конверсий и продаж!
Возникли проблемы с созданием поиска, пишите, подскажу.