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

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

  1. На главной странице и всех прочих страницах, на которые попадают посетители (из поисковых систем, с PPC систем), призыв к действию (баннер со спецпредложением или кнопки BUY NOW) должен быть виден без прокрутки страницы, т.е. не ниже 400-500 пикселей от верхнего края страницы.
  2. Если где-либо на сайте упоминается товар, то надо обязательно указывать его цену и по возможности кнопку "Buy now".
  3. По возможности, на каждой странице, где человек принимает решение о покупке, выделяйте свои особые условия: "доставка в течение 7 дней", "при покупке такой-то подарок" и т.п.
  4. Качество картинки с товаром имеет значение: постарайтесь сделать его максимально высоким.
  5. На каждой странице помещайте телефон и иные средства связи (если есть онлайн служба поддержки, то тоже на видное место).
  6. Тексты должны легко читаться (предложения короткие, слова простые, абзацы 2-4 предложения), а страница "сканироваться", т.е. человеку должно быть достаточно пробежаться по странице глазами, чтобы увидеть все основные моменты (о чем тут речь, какие условия, цены, как купить, стоит ли доверять данному сайту).
  7. Отслеживайте запросы, по которым пользователи приходят на ваш сайт из поисковиков - убедитесь, что самые популярные товары из этих запросов представлены на главной странице сайта. Аналогично для поиска по сайту (желательно вообще сделать так, чтобы поиск по сайту редко был нужен).
  8. Не используйте строки длиннее 13-15 слов. Исследования показывают, что более длинные строки в сети читать напряжно и этого почти никто не делает.
  9. Если у вас есть сомнения о размере шрифта, то смело используйте бОльший.

А теперь как же разобрать готовый сайт по полочкам. Я использую плагин для Firefox: http://screenshot-program.com/fireshot/ - он позволяет добавлять различные элементы к скриншотам сайтов, причем умеет делать скриншот всей страницы, а не только ее видимой части. Плагин очень удобный и почти каждый день я им пользуюсь.

Приведу пару примеров.

Для страницы товара:

Для корзины:

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



  • Бармалей

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

  • http://gumenuk.ru Алексей Гуменюк

    Отличный минифак по юзабилити магазинов. А слева что за два товара – с этим товаром мы рекомендуем?

  • http://myezine.ru/ Рядовой веб-мастер

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

  • http://4min.name Виктор Фомин

    Жаль, что плагин FireShot платный.

  • http://www.techco.ru Дмитрйи 24

    Реально нужный пост с примером + разбором на картинке + все по пунктам расписано. Если будет продолжение – будет интересно. Вообще тема конверта посетителей в покупателей в связи с юзабилити мало освещается в рунете…(

  • http://otupenie.blogspot.com/ AxioS

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

  • http://www.znm.ru scoff

    Здесь довольно мало о юзабилити, если его рассматривать с точки зрения пользвателя. Это скоре об эффективности «продажного» сайта. Могу добавить еще один пункт: в интерфейсе оформления заказа не должно быть вообще никакой навигации по сайту. Как только покупатель нажал «оплатить», все дальнейшие должно быть сосредоточено на вводе платежной информации и данных для доставки. Последняя точка, где допускаются разные «похожие товары» и «continue shopping» — это просмотр корзины, до нажатия checkout. Да и то смотря чем торгуете.

  • http://creative-news.ru/ Misterio

    Я привык к SnagIt. Удобство FireShot только в том, что сфоткать страницу получается быстрее, всего одним щелчком по кнопке.

  • http://blog.w-research.ru/ Dmitriy K.

    Виктор Фомин, вы или спамер или слепой ) Fireshot бесплатен.

  • http://blogosphere.com.ua/ jarofed

    Самый «веселый» интернет-магазин, который я видел, использовал фотку какого-то фотоаппарата как дефолтную картинку к товарам, для которых нет фотографий. Очень интересно было наблюдать фотографию этого фотика, а дальше – описание: «Ноутбук Sony…» или же «Телефон Nokia…»

  • http://www.perfectblogger.com Perfect Blogger

    Хорошая заметка, спасибо за то, что поделился наблюдениями!

  • http://www.svift.org/ Svift

    Вообще неудачный диз…
    - ярко выражены какие-то области, отвлекающие пользователя от товара…
    - корзина не справа сверху, где её обычно визуально ищут (так принято)
    - путь (хлебные крошки) неудачно разделен двоеточиями
    - шапка в целом слишком высокая… не для магазина такая…
    - то что телефона нет это уже указаный минус

    Не согласен с тем, что «Home» надо обозвать «Jewelry Store»

  • http://dimok.ru/ dimok

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

  • http://www.kinozritel.in.ua Кинозритель

    Хм, несколько пунктов из этого списка выполнял интуитивно, ориентируясь на удобство :)

  • http://optimizator.in.ua Оптимизатор

    интересная информация, спасибо, как раз сталкивался с вопросом юзабилити для одного портала

  • http://perfect-flowers.ru/ Сэр Пульс

    Соглашусь с предыдущим оратором, что текст ссылки «главная» нужно переименовывать.. С т.з СЕО это как раз понятно, но топик про Юзабилити :)

1

Облако тегов

Связаться со мной можно по почте: dimokru@gmail.com или через твитер @dimokru (9876 фолловеров)

Последние комментарии

    follow me on Twitter

    ТОП комментаторы

    Статистика

    • Рейтинг блогов
    • Участник Blograte.ru