“Разбор полетов - юзабилити в примерах”
Март 11th, 2010
Здравствуйте! Давненько не давала о себе знать. Все исправляюсь.
Из-за обилия продуктов на рынке, порой конкурировать бывает очень сложно. Это же касается и online бизнеса.
Всем и без меня понятно, что основной задачей сайта являются продажи, а значит хороший сайт - это продающий сайт! Сегодня я постараюсь связать юзабилити интернет-магазина с его прямым отношением к продажам. Как можно за пару приемов увеличить объемы своих продаж и посмотреть на сайт другими глазами.
Мой блог - моя территория, а значит сегодня я буду поносить свой же ресурс. Думаю после этого, мы с Сашей возьмемся за ум и приведем сегодняшний пример, пусть не к идеалу, но хотя бы к инструменту торговли. Пожалуй, начну.
Для начала давайте взглянем на наш интернет-магазин офисной мебели. Посмотрите внимательно и даже можете сделать для себя заметки, что по вашему мнению там неправильно.
Посмотрели? Хорошо. А теперь пробежимся по отдельным элементам. И сразу отмечу, что скрины будут представлены в конце каждого разобранного пункта.
“ОБЩЕПРИНЯТЫЕ СТАНДАРТЫ ДЛЯ ИНТЕРНЕТ-МАГАЗИНОВ”
- Логотип компании стоит на своем месте. Хорошо заметен и бросается в глаза. Желательно в левом верхнем углу. У нас все так же. Это отлично.
- Как и на любом продающем сайте должны быть хорошо заметны номера телефонов, без прокрутки страницы. Зашедший на сайт посетитель, должен увидеть их в первые несколько секунд. И не забудьте указать код города. Это тоже очень важно. Соблюдено.
- Фон интернет-магазина должен быть светлым, а шрифт контрастным. Этот пункт также обязателен, т.к. играет важную роль в плане удобства. Ставим галочку.
- Повторюсь еще раз: хороший сайт - это тот сайт, который приносит деньги. И поэтому каждая страница интернет-магазин должна содержать товарное предложение! Смотрим что у нас? Нет. На самой главной странице, мы не видим ни одного товарного предложения. Ни цен, ни акций, ничего! Проходим по ссылке и убеждаемся в этом. Плохо. Ставим жирный минус. Будем дорабатывать.
- “Поиск по сайту” находится в верхней части сайта и также виден в первые несколько секунд. Смотрим на подопытном. Не так. Снова штрафной балл.Итог: 3 из 5
“НАВИГАЦИЯ”
- Меню каталога товаров представлено вертикально в боковой панели. Это есть.
- Меню основной навигации по сайту должно располагаться горизонтально. А что у нас? Ужас о.О И первый минус.
- Вся навигация на сайте занимает не более 20% всего сайта. Здесь можем поставить плюс.
- Текущий пункт меню всегда выделен. Тут тоже плюс. Можете проверить
Итог: 3 из 4
“КОРЗИНА МАГАЗИНА И ОФОРМЛЕНИЕ ПОКУПКИ”
- Корзина находится на всех страницах сайта. Это эталон! Должно быть так и никак иначе.
- Корзина должна представлять собой одно яркое пятно! А что у нас? Унылое серое пятнышко. Хм, значит минус!
- Блок корзины находится рядом с логотипом. А еще лучше, когда сразу же под логотипом! У нас снова один минус. Блока не видно, ну, если только прокрутить до самого начала, а ЛОГО всегда на виду. Что же будем исправлять.
- Именно рядом с блоком корзины должна располагаться информация о “Доставке”! К сожалению это большой минус не только нашего интернет-магазина, но и всех остальных. Я сама являюсь активным покупателем и зачастую мне приходится тратить много времени на поиски информации о доставке. Для меня страница с доставкой чуть ли не одна из самых важных на всем сайте. Так, что снова заработали жирный минус.
- При добавление товара в корзину происходят видимые изменения. Снова балл
- Корзина магазина должна быть чистой, т.е. без основного шаблона сайта, без навигации, без анимации. Короче должна быть только та информация, которая интересует покупателя. Это информация о доставке (обязательно!) Я довольна, ставим плюсик
- Для надписей в оформлении корзины используются более крупные шрифты. Снова плюс!
- В корзине должна быть информация о том, как связаться с менеджерами! Тут я поставлю полуминс, полуплюс. т.к. контактных данных все-таки в корзине нет. А призыв стоит. Смотрим на скрин.
- Предлагаем пару вариантов доставки и оплаты! Это есть. Я рада.
- В случае, когда по неизвестным причинам, покупатель отказался от покупки и не довел процесс оформления заказа до конца - на почту к посетителю должно приходить письмо с предложением завершить покупку. Опять минус. Итого: 5 из 5
“СТРАНИЦА С ТОВАРОМ”
- Присутствует название товара. Ставим плюс.
- Присутствует цена.
- Присутствует описание.
- Присутствуют характеристики (габаритные размеры, цвет, выгоды) Тоже плюс
- Кнопка “Купить” или “Добавить” находится в самом низу карточки товара. Даже удивительно, снова плюс
- Обязательно наличие фото товара, с возможностью его увеличить. Опять плюс
- Организован показ сопутствующих товаров. К сожалению, зарабатываем минус.
Явный правильный пример вот тут.
Итого: 1 из 7
“РЕГИСТРАЦИЯ”
- Если на вашем сайте предусмотрена регистрация, то она должна проходить как можно менее болезненно для покупателей
- Должно быть два вида регистрации облегченная (e-mail) и полная
- При ошибочном вводе данных эти пункты выделяются ярким цветом
- И обязательно спросить о согласии покупателя получать дальнейшую информацию об акциях, скидках и новостях.
Ура!!! Ну, как!? Вам понравилось? Обязательно проверьте на своих сайтах. Прямо-таки сядьте и отмечайте по пунктам. Пусть анализ у вас займет 30 мин или 1 час не важно. Ведь залог успешного юзабилити лежит в постоянном тестировании! Так, что вперед.
А с вами была, я, все та же Эльвина. И до скорых встреч. Пока!
А еще вы можете почитать:
“Почему сайт получил тИЦ +60″“Online-консультанты: вопрос выбора не стоит”“Зачем компаниям иметь несколько сайтов?”“По просьбе моего нового друга.”Мой вариант: “Конкурс 300″“3 Вида Фото, Способные Продать Любой Продукт!”
Комментарии
Март 11th, 2010 | 23:17
Все по полочкам разложила прямо
P.S засунул в закладки (думаю, пригодиться) и ретвит.
Март 11th, 2010 | 23:24
Dinar, спасибо, что оценил))) Я очень рада.
Март 12th, 2010 | 00:56
Добрый вечер!
Из минусов еще можно добавить, что:
1. Навигация по сайту не дублируется внизу.
2. В блоке корзины висит надпись “0 товаров 0 рублей” - тоже не очень хорошо.
3. Нет примеров отзывов покупателей, которые воспользовались вашими услугами.
4. В каталоге товаров нет фильтров - пользователь никак не может влиять на выдачу.
5. И еще встречала интересное предложение по юзабилити - добавлять кнопку купить в окно с увеличенным изображением товара.
Март 12th, 2010 | 07:19
Людмила, хм… пункт 5 очень заинтересовал. Я еще хотела добавить, чтобы в увеличенном изображении обязательно присутствовала цена =) ну, и кнопка “КУПИТЬ” не помешает
Спасибо, учтем.
Что касается фильтров, тоже согласна. Давно трещу, что нужно сделать, пока созреваем.
А первые 3 так же входят в стандартный набор, которые обязательно должны быть выполнены.
Можно, конечно еще добавить,
)
Но тоже очень важно
1.чтобы с главной страницы не было ни одной ссылки ведущей на главную (неактивная)
2. Чтобы основное УТП магазина помещалось на странице без прокрутки (а что у нас? Одна серия эконом на всю страницу
3. Обязательное наличие значков со скидками и акциями на избранных товарах (тоже нет)
4. Нет заголовка магазина, вернее слогана. Это дело конечно поправимо
Март 12th, 2010 | 09:28
Может с точки юзабилити и не очень получилось у них, но “шапка” сайта мне понравилась:))
Март 12th, 2010 | 10:11
Вот насчет поиска по сайту - я не согласен
Вполне нормальное место и в глаза не кидается, и когда понадобится не будешь по всей странице искать. Остальное очень интересно, надо же было так препарировать сайт, там ведь такие пуфики мммм 
Март 12th, 2010 | 12:55
и Вам добрый день!
твой пост мне именно “в десятку”: я на следующей неделю сдаю заказчику интернет-магазин. знаеш, как приятно на почти готовом сайте найти почти все “плюсы” ?!
кстати, рекомендую как то визуально выделить блок поиска, что бы он сразу попадал на глаза.
все, иду печатать твой пост, а то ведь он будет полезен и моим дизайнерам.
пасибочки за собранную в одном месте инфу
Март 12th, 2010 | 17:53
NomadUA, и пуфики не оставлю без внимания
Всему свое время. Я довольна. Уже сегодня на работе сделали заметки, даже кое что начали исправлять. Очень рада.
Natalya, ужасно, ужасно рада, что материал оказался полезным
Приятно, когда твой труд оценивают. Спасибо.
Март 15th, 2010 | 00:37
[...] понравился пример разбора юзабилити сайта от Eastbelle. Довольно просто и логично все обосновала [...]
Май 20th, 2010 | 16:38
Статья мягко говоря, весьма спорная. Это не “юзабилити в примерах”, это Ваше личное мнение, не более.
Для примера “Меню основной навигации по сайту должно располагаться горизонтально” - а почему оно должно располагаться именно а чем вертикальное расположение так плохо? Вы например когда книгу в руки берёте, Вас смущает, что там оглавление (по сути та же навигация) вертикально? Нет? А чего тогда простите сайт должен иметь именно горизонтальную навигацию?
И из таких вот субъективных вещей вся статья..
Май 20th, 2010 | 16:39
P.S. Ага, комментарии только с премодерацией… Боимся услышать негативное мнение?
Май 21st, 2010 | 17:53
Mariik, нет не боимся) Больше месяца руки до блога не доходили. Согласна, что субъективно, но не все. Что касается горизонтального меню, так это не я придумала. Вертикальное меню просто ужасно, но это опять мое мнение) Есть стандарты, которые знают все юзабилити проектировщики их-то я стараюсь изучать и делать все правильно)
Май 21st, 2010 | 20:12
пробуйте отказаться от этих сомнительных шаблонов и вместо них применить сценарии поведения. те поставьте себя на место среднего пользователя - ничего не пропустили?