Идеальный интернет-магазин

Дополню информацию в тезисах, озвученную в публикации о поведенческих факторах, но с акцентом на интернет-магазин.

Сайт

  1. стационарный (не мобильный) номер телефона.
  2. небольшая шапка. По запросу "купить кроватку в москве" www.koliaski-krovatki.ru показывает практически пустую страницу, которую видит пользователь (список товаров начинается со второго экрана)
    слишком большая шапка у интернет магазина
  3. email сайта (например, office@shpargalkablog.ru, а не NMitra@yandex.ru).
  4. адрес нахождения организации с картой.
  5. "Авторизация/Регистрация" заменить на "Вход в личный кабинет".
    кнопки в Фотошопе

Каталог

  1. каталог товаров, включая Главную страницу должен представлять из себя витрину, с такими блоками, как "Новинки", "Специальные цены", "Распродажа в связи с ликвидацией склада", "Лучшее соотношение цена качество", "Выбор покупателей", "Самый популярный товар месяца", "Эксклюзив", "Лидеры продаж", "Лучшее", "Только сегодня", "Акции", "Выбор эксперта"... Например, Главная "Связного"
    Связной
    в М.Видео есть блок "Успей купить" - призыв к действию с ограничением по времени и количеству товара
    Успей купить
    а в "Техносиле" под каждой подрубрикой (что ж оформленной так мелко) находится самый популярный товар
    оформление рубрик
  2. отсутствие пустых категорий. Они могут образоваться вследствие использования выпадающего меню, где первый пункт также является ссылкой. Пример, www.ulmart.ru.
    Ошибка в выпадающем меню
  3. в подрубрике показано количество товара.
    оформление подрубрики
  4. для пользователей, которые знают что им нужно прямо сейчас - сортировка и фильтрация товаров по параметрам: по популярности, по цене, по марке, по размеру, но не по алфавиту/названию.
    подкатегория
    Опять таки покупатель не остается наедине с длинным списком - ему рекомендована определённая модель. Но вот вкладка "Товар дня" лишняя - она предлагает выбор из всего магазина (стиральная машина), а не из подрубрики "Вытяжки".
  5. везде отображена цена на товар.

Карточка товара

  1. важные элементы в пределах первого экрана, ничего лишнего, далее при пролистывании можно предложить список похожих товаров (см. магазин Amazon).
    первый экран магазина Amazon
  2. наличие товара на складе и, при необходимости, ожидаемая дата поставки. Пример, www.ozon.ru
    наличие на складе
    Здесь же можно организовать подписку на обновление товара (поле с email и соответствующей надписи будет достаточно) или возможность его зарезервировать.
  3. показывать всевозможные варианты цветового оформления, размера продукта. В этом случае нужно сообщать о наличии товара, сочетающие эти характеристики, или как это сделано у www.victoriassecret.com: для разных размеров организовать свой список цветовой гаммы.
    выбор характеристик товара
  4. по Geo IP определить регион и указать ближайшею дату доставки и её сумму. Если доставка бесплатна, обязательно сообщить об этом: "Вы экономите на доставке". Если работаете только с городом Самара, то так и написать "Доставка только по Самаре". Тут же, если существует, адрес самовывоза и его отображение на карте. Дата - конкретное число, а не "через 2-3 дня". Пример от www.svyaznoy.ru
    информация о доставке в карточке товара
  5. изображения хорошего качества без водяного знака поперёк картинки. Фото со всех ракурсов (абонентский доступ к базе 3D-моделей предлагает maybe3d.com) и видео повышают интерес к товару. У "Связного" сочетается модальное окно с tab-меню.
    3d-фото
    посмотрим неплохой вариант видео: общий фон не офис, а природа (место применение лопаты); язык - русский, рассказчик - мужчина (потенциальный покупатель); преимущества использования.

  6. описание должно быть лаконичным с абзацами и списками, продающим, написанным на языке пользователя.
  7. полный список технических характеристик не нужен для основной аудитории. Например, не нужна домохозяйке информация, что у сотового телефона "Поддержка сотовой сети : 4G LTE (700, 2100 MHz)3; UMTS/HSPA/HSPA+/DC-HSDPA (850, 900, 1900, 2100 MHz); GSM/EDGE (850, 900, 1800, 1900 MHz)". У "Связного" на вкладке "Подробные" можно увидеть все тех. характеристики, включая сведения с вкладки "Основные". А также тут видно как организовать разъяснение непонятный терминов.
    технические характеристики
  8. отзывы/рейтинги о товаре (см. видео).
    отзывы в интернет магазине
    Негативные отзывы лучше, чем их отсутствие, которое говорит о том, что продукт не интересен, его никто не приобретает. Как мотивировать оставлять комментарии? - предоставить скидку на товар или спросить у покупателя его мнение недели через две.
  9. аксессуары, например, вазы у www.proflowers.com.
    аксесуары
  10. конкурентные преимущества, к которым относятся:
    • предоставление гарантии на товар: если сертификатов много - отдельная страница (http://www.wildberries.ru/services/certificates.aspx), иначе - в футере,
    • возврат товара в течении 7 дней без указания причин (искл.),
    • бесплатная/срочная/своевременная доставка,
    • скидка для постоянных покупателей,
    • оформление страховки от негативных случаев,
    • круглосуточная работа,
    • бесплатная примерка.
    Образец реализации: shoptime.ru
    оформление конкурентных преимуществ интернет магазина
  11. не заставляйте пользователя совершать лишние действия, например, выбирать размер, если товар существует в единичном экземпляре.
  12. хлебные крошки, URL и расширенный поиск по максимально возможным параметрам.
  13. ещё одним элементом навигации можно назвать блок "Вы недавно смотрели". См. wikimart.ru.
    блок вы недавно смотрели в интернет магазине

Кнопки

  1. у кнопки CTR выше, чем у ссылки.
  2. контрастная, фокусирующая взгляд.
  3. не огромная, иначе взгляд будет проходить мимо неё, как мимо баннера.
  4. располагающаяся до линии сгиба (в пределах первого) экрана.
  5. главное действие оформлено ярче или подсвечено.
    кнопки в Фотошопе
  6. главное действие располагается справа.
    расположение кнопки справа
  7. "Положить в корзину" для недорогих многочисленных товаров (продукты питания), "Купить", наоборот (для компьютеров, мебели, крупной бытовой техники). Хотя эти варианты равнозначны.
Ошибочная реализация на www.eddiebauer.com, где в первую очередь тянет нажать кнопку "Back".
неверное оформление кнопки

"Быстрый заказ/Заказ по телефону/Перезвонить мне"

От клиента требуется только указание имени и телефона. Можно пометить, что оператор свяжется с заказчиком в течении 10-15 минут (информация меняется в течении суток). Образец посмотрим у www.tverhit.ru
быстрый заказ
Или сообщить, что по указанному телефону можно сделать заказ. Пример, shop.sprint.com
телефон в юзабилити

Показать посетителю что делать после того, как товар положен в корзину

Осуществляется путём всплывающего окошка с предложением "оформить заказ" или "вернуться к покупкам". Смотрим на rozetka.com.ua:
добавление товара в корзину
А вид корзины после добавления товара пусть становится как в wikimart.ru
вид корзины с товаром

Корзина

  1. не нужны отвлекающие элементы, такие как меню.
  2. изображение товара обязательно.
  3. артикул клиентам не нужен, он для логистов.
  4. можно предложить соответствующие аксессуары, услуги. См. tehnosila.ru
корзина

Форма подтверждения заказа

  1. не должна быть простынёй, её лучше разбить на несколько линейных действий, включая корзину, без возврата на предыдущую страницу. На всех этапах - итоговая сумма. В заключении - шаг с подтверждением заказа (см. рис. выше).
  2. вместо кнопок "Продолжить", "Всё правильно" или "Далее" - "Заполнить контактные данные", "Перейти к способу оплаты".
  3. верхнюю навигацию ("Покупки", "Авторизация"...) желательно сделать активными. Если человек надумал вернуться на шаг назад, заполненная информация должна сохраняться.
  4. отдельной строкой стоимость доставки. Образец от М.Видео
    доставка в корзине
  5. скидки действуют магнетически. Нам приятно увидеть уменьшение цены хотя бы на незначительную сумму.
  6. один столбец. Основные ошибки пользователя:
    1. один из двух столбцов упущен,
    2. заполнены несвязанные поля.
    не использовать вместе две формы при авторизации
  7. при заказе и регистрации заполняются одни и те же поля. Поэтому вместо "Вы уже зарегистрированы" - "Я уже совершал покупки", вместо "Зарегистрироваться" - "Я покупаю впервые".
  8. ничего лишнего, например, даты рождения или графы "пол". Система сама генерирует и отправляет пароль на указанный пользователем email, который в дальнейшем можно изменить. В письме можно указать, что пароль нужен для того, чтобы
    • посмотреть историю покупок,
    • узнать свою накопительную скидку,
    • отслеживать состояние заказа.
    авторизация
  9. отлично, если есть способ авторизоваться через аккаунты социальных сетей или поисковых систем (для Яндекса), откуда можно брать такую информацию, как email.
  10. отсутствие непонятных обозначений: вместо слова "логин" использовать "Email".
  11. ссылка на информацию о защите данных.
  12. образец заполнения (атрибут placeholder), наличие описания к полю формы.
  13. объяснение зачем нужен телефон, если уже есть один способ для контактов - email.
  14. приоритет большинства: если 80% покупателей - физические лица, то для юриков - отдельный выпадающий список.
  15. визуальные сигналы, которые говорят о безопасном вводе номера кредитной карты: изображение замка, цвета фона, размещение иконки GeoTrust.
    запрос на номер карты в контактной информации
    Формат срока действия карты: "01/01", а не "январь 2001".
  16. для адреса - единое поле, а не деление на "улицу", "дом", "квартира".
  17. применять нужный тип input, а при нажатии на кнопку отправки данных на сервер, показываются только ошибочно заполненные поля (подробнее).




Также будет полезно почитать "Принципы оценки интернет-магазина Яндексом", Разделы «О компании», «Контакты», «ЧАВО»


На основе "22 главные ошибки российских интернет-магазинов", Fundamental Guidelines Of E-Commerce Checkout Design.
в f t
наверх ↑

2 комментария:

Сергей Викторович
Есть сайт на Joomla http://sebenado.ru/
Нужна только форма заказа из икеа
Как сделать вот так?
http://idea-sr.ru/checkout/
или вот так?
http://shopikea.ru/checkout.html
NMitra
А в Икеи есть партнёрская программа? Эту форму "на коленке" не сделать.