«Разбор полетов — юзабилити в примерах»

mainЗдравствуйте! Давненько не давала о себе знать. Все исправляюсь.

Из-за обилия продуктов на рынке, порой конкурировать бывает очень сложно. Это же касается и online бизнеса.

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

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

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

big_11

Посмотрели? Хорошо. А теперь пробежимся по отдельным элементам.  И сразу отмечу, что скрины будут представлены в конце каждого разобранного пункта.

«ОБЩЕПРИНЯТЫЕ СТАНДАРТЫ ДЛЯ ИНТЕРНЕТ-МАГАЗИНОВ»

  1. Логотип компании стоит на своем месте. Хорошо заметен и бросается в глаза. Желательно в левом верхнем углу. У нас все так же. Это отлично.плюс
  2. Как и на любом продающем сайте должны быть хорошо заметны номера телефонов, без прокрутки страницы. Зашедший на сайт посетитель, должен увидеть их в первые несколько секунд. И не забудьте указать код города. Это тоже очень важно. Соблюдено.плюс
  3. Фон интернет-магазина должен быть светлым, а шрифт контрастным. Этот пункт также обязателен, т.к. играет важную роль в плане удобства. Ставим галочку.плюс
  4. Повторюсь еще раз: хороший сайт — это тот сайт, который приносит деньги. И поэтому каждая страница интернет-магазин должна содержать товарное предложение! Смотрим что у нас? Нет. На самой главной странице, мы не видим ни одного товарного предложения. Ни цен, ни акций, ничего! Проходим по ссылке и убеждаемся в этом. Плохо. Ставим жирный минус. Будем дорабатывать.минус
  5. «Поиск по сайту» находится в верхней части сайта и также виден в первые несколько секунд. Смотрим на подопытном. Не так. Снова штрафной балл.минусИтог: 3 из 5

big_21

«НАВИГАЦИЯ»

  1. Меню каталога товаров представлено вертикально в боковой панели. Это есть.плюс
  2. Меню основной навигации по сайту должно располагаться горизонтально. А что у нас? Ужас о.О И первый минус. минус
  3. Вся навигация на сайте занимает не более 20% всего сайта. Здесь можем поставить плюс.плюс
  4. Текущий пункт меню всегда выделен. Тут тоже плюс. Можете проверить 🙂 плюс

Итог: 3 из 4

big_31

«КОРЗИНА МАГАЗИНА И ОФОРМЛЕНИЕ ПОКУПКИ»

  1. Корзина находится на всех страницах сайта. Это эталон! Должно быть так и никак иначе. плюс
  2. Корзина должна представлять собой одно яркое пятно! А что у нас? Унылое серое пятнышко. Хм, значит минус! минус
  3. Блок корзины находится рядом с логотипом. А еще лучше, когда сразу же под логотипом! У нас снова один минус. Блока не видно, ну, если только прокрутить до самого начала, а ЛОГО всегда на виду. Что же будем исправлять.минус
  4. Именно рядом с блоком корзины должна располагаться информация о «Доставке»! К сожалению это большой минус не только нашего интернет-магазина, но и всех остальных. Я сама являюсь активным покупателем и зачастую мне приходится тратить много времени на поиски информации о доставке. Для меня страница с доставкой чуть ли не одна из самых важных на всем сайте. Так, что снова заработали жирный минус. минус
  5. При добавление товара в корзину происходят видимые изменения. Снова балл 😉 плюс
  6. Корзина магазина должна быть чистой, т.е. без основного шаблона сайта, без навигации, без анимации. Короче должна быть только та информация, которая интересует покупателя. Это информация о доставке (обязательно!) Я довольна, ставим плюсик плюс

big_41

  • Для надписей в оформлении корзины используются более крупные шрифты. Снова плюс! плюс
  • В корзине должна быть информация о том, как связаться с менеджерами! Тут я поставлю полуминс, полуплюс. т.к. контактных данных все-таки в корзине нет. А призыв стоит. Смотрим на скрин. минус
  • Предлагаем пару вариантов доставки и оплаты! Это есть. Я рада. плюс
  • В случае, когда по неизвестным причинам, покупатель отказался от покупки и не довел процесс оформления заказа до конца — на почту к посетителю должно приходить письмо с предложением завершить покупку. Опять минус. минусИтого: 5 из 5 🙁

 

thumb_5

«СТРАНИЦА С ТОВАРОМ»

  1. Присутствует название товара. Ставим плюс. плюс
  2. Присутствует цена. плюс
  3. Присутствует описание. плюс
  4. Присутствуют характеристики (габаритные размеры, цвет, выгоды) Тоже плюс плюс
  5. Кнопка «Купить» или «Добавить» находится в самом низу карточки товара. Даже удивительно, снова плюс плюс
  6. Обязательно наличие фото товара, с возможностью его увеличить. Опять плюс плюс
  7. Организован показ сопутствующих товаров. К сожалению, зарабатываем минус. минус

Явный правильный пример вот тут.

big_7

Итого: 1 из 7 🙂

big_6

«РЕГИСТРАЦИЯ»

  1. Если на вашем сайте предусмотрена регистрация, то она должна проходить как можно менее болезненно для покупателей
  2. Должно быть два вида регистрации облегченная (e-mail) и полная
  3. При ошибочном вводе данных эти пункты выделяются ярким цветом
  4. И обязательно спросить о согласии покупателя получать дальнейшую информацию об акциях, скидках и новостях.

Ура!!! Ну, как!? Вам понравилось? Обязательно проверьте на своих сайтах. Прямо-таки сядьте и отмечайте по пунктам. Пусть анализ у вас займет 30 мин или 1 час не важно. Ведь залог успешного юзабилити лежит в постоянном тестировании! Так, что вперед.

А с вами была, я, все та же Эльвина. И до скорых встреч. Пока!

 

Сейчас я сотрудничаю с агентством интернет-рекламы Юла Group. По заказам аудита юзабилити вы можете связаться с нашим менеджером Женей по телефону +7(967)464-00-74  или по  e-mail: info@yula-group.ru.

13 комментарии на “«Разбор полетов — юзабилити в примерах»

  1. Добрый вечер!
    Из минусов еще можно добавить, что:
    1. Навигация по сайту не дублируется внизу.
    2. В блоке корзины висит надпись «0 товаров 0 рублей» — тоже не очень хорошо.
    3. Нет примеров отзывов покупателей, которые воспользовались вашими услугами.
    4. В каталоге товаров нет фильтров — пользователь никак не может влиять на выдачу.
    5. И еще встречала интересное предложение по юзабилити — добавлять кнопку купить в окно с увеличенным изображением товара.

    1. Людмила, хм… пункт 5 очень заинтересовал. Я еще хотела добавить, чтобы в увеличенном изображении обязательно присутствовала цена =) ну, и кнопка «КУПИТЬ» не помешает 😉 Спасибо, учтем.

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

      Можно, конечно еще добавить,
      1.чтобы с главной страницы не было ни одной ссылки ведущей на главную (неактивная)
      2. Чтобы основное УТП магазина помещалось на странице без прокрутки (а что у нас? Одна серия эконом на всю страницу 🙁 )
      3. Обязательное наличие значков со скидками и акциями на избранных товарах (тоже нет)
      4. Нет заголовка магазина, вернее слогана. Это дело конечно поправимо 😉 Но тоже очень важно

  2. Вот насчет поиска по сайту — я не согласен 🙂 Вполне нормальное место и в глаза не кидается, и когда понадобится не будешь по всей странице искать. Остальное очень интересно, надо же было так препарировать сайт, там ведь такие пуфики мммм 😉

    1. NomadUA, и пуфики не оставлю без внимания 😉 Всему свое время. Я довольна. Уже сегодня на работе сделали заметки, даже кое что начали исправлять. Очень рада.

      Natalya, ужасно, ужасно рада, что материал оказался полезным 😀 Приятно, когда твой труд оценивают. Спасибо.

  3. и Вам добрый день!
    твой пост мне именно «в десятку»: я на следующей неделю сдаю заказчику интернет-магазин. знаеш, как приятно на почти готовом сайте найти почти все «плюсы» ?!
    кстати, рекомендую как то визуально выделить блок поиска, что бы он сразу попадал на глаза.
    все, иду печатать твой пост, а то ведь он будет полезен и моим дизайнерам.
    пасибочки за собранную в одном месте инфу 😉

  4. Статья мягко говоря, весьма спорная. Это не «юзабилити в примерах», это Ваше личное мнение, не более.

    Для примера «Меню основной навигации по сайту должно располагаться горизонтально» — а почему оно должно располагаться именно а чем вертикальное расположение так плохо? Вы например когда книгу в руки берёте, Вас смущает, что там оглавление (по сути та же навигация) вертикально? Нет? А чего тогда простите сайт должен иметь именно горизонтальную навигацию?

    И из таких вот субъективных вещей вся статья..

  5. P.S. Ага, комментарии только с премодерацией… Боимся услышать негативное мнение?

    1. Mariik, нет не боимся) Больше месяца руки до блога не доходили. Согласна, что субъективно, но не все. Что касается горизонтального меню, так это не я придумала. Вертикальное меню просто ужасно, но это опять мое мнение) Есть стандарты, которые знают все юзабилити проектировщики их-то я стараюсь изучать и делать все правильно)

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

Добавить комментарий для eastbelle Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *