Usability для интернет магазина.

Ryar · 09-01-2011, 16:14:46

По просьбе bumer написал статью о usability для интернет магазина.

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

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

[spoiler='Почитать статью']

Часть первая. Общие принципы для всего магазина.

Логотип магазина.
Всегда должен находиться в верхней части страницы, в одном и том же месте и быть хорошо заметным. На всех страницах, кроме главной, логотип является ссылкой на главную страницу.
Номер телефона.
Всегда находится всегда в одном и том же месте на страничке;
Номер телефона указывается с кодом города;
Хорошо заметен в первые несколько секунд просмотра страницы;
Возле телефона всегда должна быть ссылка «закажите обратный звонок»;
Поиск по сайту.
Форма поиска находится в верхней части страницы, в шапке или боковой колонке;
Форма хорошо заметна даже при беглом просмотре страницы;
Возле формы поиска есть ссылка на расширенный поиск;
Кнопка «найти» должна присутствовать обязательно;
Основной фон магазина белый или светлый. Цвет шрифта контрастен фону.
Все ссылки в контенте магазина подчеркнуты. Критично важные ссылки имеют всплывающие подсказки.
Все изображения в магазине должны иметь тег alt
Не используйте скрипты изменяющее вид курсора, не используйте скрипты типа «падающий снег», всплывающие без ведома пользователя окна и баннеры.
Страница ошибки 404 должна выполнена в дизайне магазина и содержит ссылки на основные разделы магазина, карту сайта и форму поиска.
Сайт должен корректно отображается во всех популярных браузерах и иметь версию для мобильных телефонов.

Часть вторая. Базовая навигация магазина.

Меню каталога товаров всегда расположено вертикально;
Вложенные пункты меню товаров должны отображаться без перезагрузки страницы;
Меню каталога товаров должно иметь не более 8 пунктов.
Пункты меню каталога товаров должны быть отсортированы либо по алфавиту, либо по группам товара.
Меню каталога товаров должно содержать виртуальные категории «новинки», «распродажи», «лучшие товары» В которых товары подобраны по какому либо принципу.
Навигация магазина расположена горизонтально.
Для всех страниц магазина используются «хлебные крошки».
Текущий пункт меню всегда выделен.
Ссылки на страницы «варианты оплаты», «способы доставки», «ЧаВо», «Контактная информация» должны обязательно присутствовать.

Часть третья. Корзина.

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

Страница корзины.

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

Часть четвертая. Процесс оформления заказа.

Оформление заказа должно происходить только на одной странице.
Оформление заказа не должно прерываться, если пользователь не зарегистрирован.
Не зарегистрированным пользователям для оформления заказа требуется указать только e-mail и номер телефона.
В процессе оформления заказа предлагается несколько вариантов доставки.
В процессе оформления заказа указывается максимум вариантов оплаты.
По нажатию на кнопку «оформить заказ», покупателю показывается страница с информацией об успешно отправленном заказе и словами благодарности.
По факту оформления заказа покупателю отправляется e-mail с благодарностями, подробным списком заказанных товаров, регистрационными данными, указанием выбранного способа оплаты и доставки, контактными телефонами менеджеров.
Время реакции менеджера магазина на заказ не должно превышать 5 минут.

Часть пятая. Главная страница магазина.

Главная страница магазина должна содержать осмысленный заголовок магазина.
Главная страница содержит краткий текст «о магазине», построенный на выгодах и (или) Уникальном Торговом Предложении (УТП)
Главная страница содержит как минимум одно конкретное предложение о покупке товара.
Главная страница содержит заметную ссылку на предложение помощи по выбору товара и оформлению заказа.
Пункты меню оплата и доставка должны быть легконаходимы из любой точки страницы
Главная страница не должна содержать pop-up баннеров и всплывающих окон.
Главная страница не должна содержать никаких звуков запускаемых без действий пользователя
Главная страница содержит подробную контактную информацию (номер телефона, адрес, e-mail, ссылка на форму обратной связи и подробную контактную информацию). Необходимо давать ссылку на страницу с сертификатами товара.
Если у вас есть офис или реальный магазин, на главной необходимо разместить информацию о магазине, с фoтографией и ссылкой на карту проезда.
Информационные сервисы (подписка, форма регистрация) должны находиться в верхней части экрана.

Часть шестая. Карточка товара.

Карточка товара содержит хорошо заметный заголовок - название товара.
Для каждого товара должно существовать описание товара, написанное человеческим языком.
Присутствуют технические характеристики.
В технических характеристиках обязательно должны быть указаны вес товара, и размеры в упаковке.
Обязательно должна быть указана цена товара за единицу.
Цена товара должна быть хорошо заметна.
Кнопка «купить» или «положить в корзину» должна быть хорошо заметна.
Для каждого товара должна быть фoтография.
Дополнительные фoтографии товара должны показывать товар со всех сторон, желательно фoто товара в запакованном виде. Для некоторых товаров, размеры которых сложно определить визуально, нужно использовать фoтографию с линейкой.
На карточке товара отсутствует отвлекающие элементы (новости, реклама)
Для разделения содержимого можно использовать вкладки.
Для каждого товара должны быть определены «сопутствующие товары» с возможностью добавить в корзину вместе с основным товаром.

Часть седьмая. Каталог товаров.

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

Часть восьмая. Регистрация.

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

[/spoiler]

Sevab · 09-01-2011, 18:34:44

Отличный материал, достойный вхождения в наш сео учебник!

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

.

Ryar · 09-01-2011, 19:03:03

ЦитироватьОтличный материал, достойный вхождения в наш сео учебник!

Спасибо

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

Sevab · 09-01-2011, 19:21:45

Цитата: Ryar от 09-01-2011, 19:03:03наверно нужно разделить его на несколько частей

Ничего страшного. В книге есть и побольше статьи.

bumer · 09-01-2011, 19:54:37

круто))) шикарная статья

Lena-Miha · 10-01-2011, 06:25:57

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

wildgoodwin · 30-01-2011, 13:24:36

Вот этого как раз то мне и не хватало. Огромное человеческое спасибо!

ReCopier · 01-02-2011, 12:42:17

Материал действительно хороший. Прочитал с удовольствием. Спасибо вам за ваш труд.

sergiocharm · 29-04-2012, 19:28:05

Интересное пособие и ссылка...

Делаю инет-магазин http://www.allremont59.ru/shop что можете сказать? что посоветуете? в правильном ли я направлении двигаюсь?

EntuziAst · 06-07-2012, 23:42:04

Цитата: sergiocharm от 29-04-2012, 19:28:05
Интересное пособие и ссылка...

Делаю инет-магазин http://www.allremont59.ru/shop что можете сказать? что посоветуете? в правильном ли я направлении двигаюсь?

А зачем реклама в интернет-магазине? Рекламируете конкурентов?