Usability интернет-магазина. Золотой стандарт. Часть I

Usability интернет-магазина. Золотой стандарт. Часть I

Usability — это отличный способ поднять конверсию и увеличить продажи без увеличения посещаемости. Подавляющее большинство владельцев магазинов не используют и 10% возможностей повышения продаж, хотя думают, что выкладываются на все 100! А ведь можно немного потрудиться и задать маршрут, по которому пользователи будут охотно следовать к заветной кнопке «Купить»!

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

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

Общие стандарты

На сайте отсутствует сплэш-страница (заставка).

Наверху каждой страницы хорошо заметен логотип магазина.

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

На сайте нет flash-анимации, за исключением разве что баннеров.

Поиск по сайту находится на всех страницах сайта, на самом верху и обнаруживается в течение первых трех секунд просмотра. Поиск снабжен кнопкой «найти».

Ссылки в тексте подчеркнуты. Прочие элементы текста, не являющиеся ссылками, подчеркиванием не выделяются.

На сайте используется белый или светлый фон. Шрифты и фон контрастны по отношению друг к другу.

На каждой страничке присутствует не больше восьми блоков и не больше трех колонок.

Выравнивание элементов сайта всегда реализуется по единому принципу.

Изображения сопровождаются тегом alt.

Курсор мыши не видоизменяется скриптами.

На сайте отсутствует анимация вроде «падающего снега»

Страница ошибки 404 имеет тот же дизайн, что и все страницы сайта. На этой страничке есть ссылки на главные навигационные страницы магазина.

Каждая страничка содержит товарное предложение.

Проект одинаково хорошо отображается в бразерах Firefox, IE, Opera, Google Chrome, Яндекс.Браузер.

При просмотре в популярных браузерах на мониторах с разрешением 1024x768 отсутствует полоса прокрутки.

Каждая страничка имеет не больше трех «ярких пятен».

Базовая навигация

Меню каталога товаров ориентировано по вертикали и вмещает не больше восьми пунктов.

Если меню разворачивается по клику на знак «+», то меню разворачивается, а страница не меняется. Если меню разворачивается по клику на пункт меню, то меню разворачивается и осуществляется переход на новую страничку.

Меню основной навигации ориентировано горизонтально. Оно продублировано в низу сайта.

На сайте есть такие разделы, как «хиты продаж», «новинки», «бестселлеры».

Текущий пункт меню выделен всегда. Ссылка на текущий пункт в меню не кликабельна.

На всех страницах присутствуют «хлебные крошки».

Система навигации занимает не более 20% площади экрана.

Корзина и система оформления заказа

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

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

Как только пользователь нажал кнопку «добавить товар в корзину», РЯДОМ с кнопкой появляется надпись, сигнализирующая, что товар успешно добавлен в корзину. При этом в блоке «Корзина» отмечается визуальное изменение содержимого.

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

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

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

В корзине нет прямых резких горизонтальных линий.

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

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

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

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

В блоке корзины нет надписи «ваша корзина пуста» или «0 товаров на 0 рублей».

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

Если пользователь не довел оформление заказа до конца, он получит письмо с предложением завершить заказ и получить небольшой подарок.

Автор , на 4 марта 2015 г. в Веб-дизайн, юзабилити.

Расскажите друзьям:


Комментарии

Комментирование отключено.

Услуги
Спецпредложения

Подписка на блог

без спама, не чаще одного раза в неделю

Кто победит?

Google

Yandex