Юзабилити Интернет-магазинов бытовой техники: сравнительный анализ

Подпишитесь на ленту или по электронной почте:

Вперед!

В украинском сегменте Интернет-продаж бытовой техники есть магазины, которые являются удобными в использовании, но большинство не выполняет даже самых простых правил юзабилити.

Предисловие к анализу

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

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

Мы решили проанализировать степень удобства использования, т.е юзабилити Интернет-магазинов бытовой техники, чтобы:

• выявить основные препятствия, с которыми сталкиваются пользователи
• указать магазинам на их ошибки, и таким образом поучаствовать в улучшении Украинского сегмента международной сети Интернет

Обзор результатов анализа

В украинском сегменте Интернет-продаж бытовой техники есть магазины, которые являются удобными в использовании, но большинство не выполняет даже самых простых правил юзабилити. Дизайнеры Интернет-магазинов бытовой техники не обращают внимания на такие важные аспекты юзабилити, как:

• отображение посещенных ссылок другим цветом
• предоставление сопутствующих и похожих товаров
• предоставление информации о доставке непосредственно при просмотре товара

Методы анализа юзабилити Интернет-магазинов

Мы взяли 20 Интернет-магазинов бытовой техники, реализующих товары по Украине, и проверили их на 15 правил юзабилити для Интернет-магазинов. 

Выборка Интернет-магазинов для оценки

Из десятков, если не сотен, Интернет-магазинов бытовой техники в Украине, мы выбрали 20 штук. Критерий выбора был очень прост: 30 октября 2009 года мы запросили Google.com.ua найти «интернет магазин бытовой техники». Все сайты, которые попали на первую страницу результатов поиска, вошли в выборку данного анализа юзабилити.

Но мы обнаружили лишь 18 штук, т.е. нам не хватало еще 2-х до 20-и, и мы специально вписали туда Вилку и Цифромир. Таким образом, у нас появилась отличная выборка из 20 Интернет-магазинов, которые представляют всю популяцию магазинов бытовой техники в Украине.

Список проанализированных Интернет-магазинов будет предоставлен ниже в результатах исследования.

Критерии оценки юзабилити Интернет-магазинов техники

Мы оценивали каждый Интернет-магазин по 15 критериям, каждый из которых описани ниже. По каждому критерию каждый сайт мог получить от 0 до 5 баллов. Таким образом, сумма баллов каждого Интернет-магазина, деленная на 75 (5*15), будет в процентном отношении показывать уровень его юзабилити (т.е. удобства).

Каждый критерий представляет собой четкое измеримое правило, против которого мы протестировали каждый Интернет-магазин бытовой техники. Строгое выполнение правила означает высший бал, т.е. 5, а строгое несоответствие — 0 баллов. Частичное соответствие правилам критериев заслуживает от 1 до 4 баллов включительно, в зависимости от того, насколько близко магазин подошел к выполнению правила.

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

Список критериев оценки юзабилити магазинов бытовой техники

1. Краткое описание сайта и номера телефонов представлены на главной странице сайта в первом экране (т.е. без прокрутки)  (Наскольнко магазин эстетично и легко предоставляет информацию о себе при вервом заходе на сайт, какое первое впечатление от взгляда.)
2. Поиск товаров находится в видимом месте, и не изменяет местоположение (Просто ли искать товары, нужно ли тратить время на обнаружение блока поиска товаров, насколько удобен поиск, какие размеры поля ввода и кнопки вызова поиска)
3. Цена отображена четко, около каждого товара на сайте (В каком виде и где отображена цена товаров, видна ли она, легко ли доступна)
4. Помощь предлагается пользователям при выборе товаров  (Имеются ли на сайте отзывы, помощь, рейтинг, и другие инструменты в помощь выбора товаров)
5. Посещенные ссылки товаров изменяют цвет (Будет ли пользователь бродить по кругу, или увидит, где он уже был)
6. В результатах поиска выводится кол-во результатов и поисковый запрос на видном месте вверху (поймет ли пользователь сразу, что вернула программа сайта, насколько удобно предлагаются результаты, удовлетворенность от результатов поиска)
7. Есть возможность изменять кол-во товаров на странице (кому-то хочется смотреть 10, а кому-то все сразу товары, смогут ли они манипулировать этим количеством)
8. Сортировка и фильтры товаров предоставлены в помощь (предоставляет ли магазин нужные инструменты для сужения результатов и для их удобной сортировки)
9. Категории товаров четко видны на главной странице (легко ли сразу на главной странице найти нужную пользователю категорию товаров, сколько времени займет поиск, не обременяющий ли он для глаз и мозга)
10. Текущее местонахождение отчетливо видно на внутренних страницах сайта (сможет ли пользователь потеряться на сайте, или он будет четко понимать, где он относительно других областей сайта)
11. Кнопка «Добавить в корзину» или аналог отчетливо видна близ каждого товара (что делать пользователю, если он готов заказать товар, нужно ли ему думать, что делать; или сразу понятно, куда жать)
12. Детальное описание и большое фото прилагается к каждому товару (сможет ли пользователь получить исчерпывающую информацию о товаре, или останутся вопросы о его деталях, спецификации; сможет ли он его графически «пощупать»)
13. Предоставляются похожие и сопутствующие товары (что, если пользователь не хочет купить эту модель, но хочет что-то похожее; что если он хочет что-то в дополнение)
14. Отчетлива видна кнопка перехода к оплате сверху и снизу корзины (при работе с корзиной, может ли пользователь интуитивно понять, куда ему двигаться дальше)
15. Детали и стоимость доставки предоставляется при выборе товара (будет ли товар доставлен бесплатно, возможна ли доставка в село в регионе, сколько она будет стоить)

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

Рейтинг интернет магазинов бытовой техники Украины

Самыми удобными магазинами оказались: Розетка, Оптимарт и Прайс.

Самыми неудобными — Мобиллак, Сокол и Техноейдж.

Сравнительная рейтинговая таблица прилагается (с процентом соответствия с правилами юзабилити):

Вкратце о юзабилити некоторых Интернет-магазинов бытовой техники

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

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

Прайс. Посещенные ссылки не меняли цвет и не было возможности манипулировать результатами поиска. Прайс — уникальный элемент выборки данного анализа, т.к. этот сайт является сайтом сравнения. Последние 2 критерия оценки (т.е. удобство покупки и детали доставки) для него были неуместны, т.к. он предоставляет информацию о других магазинах, и сам не продает. Но, для полноты анализа, мы ему дали фиктивный средний бал оценки 3 для восплонения недостающих баллов.

Технохата. У данного сайта серьезные проблемы с графической поддержкой, но этот факт не сильно повлиял на удобство взаимодействия (лишь на впечатление). Хата отличилась информацией о доставке и детальным фильтром товаров, при этом по остальным критериям набрали средние баллы. И опять цвет посещенных ссылок не менялся.

003. Один из самых больших разбросов баллов (измеряемый стандартным отклонением, далее СКО) наблюдался у них, т.е. они показали баллы от экстрима к экстриму. Сопутствующих и похожих товаров они не дали пользователям. И опять, цвет посещенных ссылок не менялся.

Вилка. Хорошие показатели по навигации и выбору товаров, но мало о доставке, и опять цвет посещенных ссылок.

Айтоп. Опять от экстрима к экстриму: в некоторых критериях — отлично, в других — ужасно. Нет других товаров в помощь и посещенные не меняют цвет

...

...

Техностар. Самый большой разброс результатов оценок. Почти все либо нули либо пятерки.

...

...

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

Сокол. Впечатляющее название и домен .ua не помогли ему быть удобным. Лишь 2 отметки по 4 балла обрадовали пользователей четко отображенной ценой и понятными категориями на главной странице. В остальном — плохо, и опять посещенные ссылки цвет не поменяли.

Техноейдж. Графически напоминает Розетку, но это не помогло ему выбратсья с последнего места в рейтинге. Много правил вообше проигнорировано, но некоторые выполнены на 4.

Критерии юзабилити в деталях

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

1. Краткое описание сайта

(Краткое описание сайта и номера телефонов представлены на главной странице сайта в первом экране)

Успешность: 68%, средний балл: 3,4, СКО: 1,19.

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

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

В этом критерии (не будем забывать, оценивалась еще и видимость телефонов) отличились Прайс, 003, Медиалидер, 590, набрав по 5 баллов.

Низший балл получил 5ок, который увел внимание пользователя нерелевантным баннером, который вообще не подходит тематике и сбивает с толку:

2. Поиск товаров

(Поиск товаров находится в видимом месте, и не изменяет местоположение)

Успешность: 69%, средний балл: 3,45, СКО: 0,89.

Поиск — важный инструмент в обращении с Интернет-магазином; он должен быть виден сразу и нести пользу.

Все магазины набрали от 2 до 4 баллов, кроме Прайса, который предложил технологию предложения результатов по мере набора запроса (используя технологию AJAX); очень полезно:

Также отличилась Вилка, которая предложила примеры запросов под полем ввода, и расположила поиск удачно, дав вокруг свободного пространства. Позиция поиска тоже удобна, т.к. находится в привычном пользователям месте справа вверху:

3. Цена

(Цена отображена четко, около каждого товара на сайте)

Успешность: 80%, средний балл: 4, СКО: 0,73.

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

4. Помощь

(Помощь предлагается пользователям при выборе товаров)

Успешность: 55%, средний балл: 2,75, СКО: 1,5.

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

Отличился Техностар, предоставив популярные однотипные товары, а также товары «за те же деньги» и аксессуары:

(Другое дело, что товаров не оказалось. Но за старание и отличие получил пятерку).

Также приятно удивила забота о пользователях магазина 003, который с каждым товаром вывел блок помощи:

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

5. Посещенные ссылки

(Посещенные ссылки товаров изменяют цвет)

Успешность: 6%, средний балл:  0,3, СКО: 1,1.

В этом критерии все очень печально. Выделяли другим цветом посещенные ссылки лишь 2 Интернет-магазина: Розетка и Оптимарт. При этом, только Оптимарт это сделал нормальным образом:

Четко видно, какой товар пользователь смотрел, а какой — нет. Причем это сделано привычным способам, который пользователи знают и помнят. 

У Розетки все плохо, хоть она и попыталась: посещенные показываются только в боковом меню, и при этом у них еще применяется цветное кодирование (какие-то товары выделяются красным), что создает более 5 вариантов форматирования ссылок. За попытку Розетка получила 1 балл. Все стальные — по нулю. Позор.

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

6. Результаты поиска

(В результатах поиска выводится кол-во результатов и поисковый запрос на видном месте вверху)

Успешность: 69%, средний балл:  3,45, СКО: 1,43.

Наблюдался весь спектр баллов. Низшие баллы заработали Техноейдж и Техностар. Последний не позаботился о кодировке, и система не понимала мои запросы:

7. Количество товаров на странице

(Есть возможность изменять кол-во товаров на странице)

Успешность: 42%, средний балл:  2,1, СКО: 2,1.

В основном, Интернет-магазины в отрасли бытовой техники справились плохо, либо вообще не предоставив возможности менять количество товаров, либо предоставили ограниченную возможность. Лишь 3 магазина — Айтоп, 100 и Технохата — дали возможномть пользователям изменять количество товаров:

8. Сортировка и фильтры

(Сортировка и фильтры товаров предоствлены в помощь)

Успешность: 80%, средний балл:  4, СКО: 1,17.

Как видите, данный критерий является самым успешным (на равне с отображением цены). Многие магазины справились с заданием на пятерку. Лишь Техноедж заработал низший балл в 1. Вот примеры некоторых хороших инструментов фильтров и сортировок:

Оченьудобными и полезными являются фильтры, которые подобраны в соответствие понкретной категории: например, для мониторов и телевизоров предлагается диагональ панели, для DVD плееров — возможности записи, караоке и т.п.

9. Категории товаров

(Категории товаров четко видны на главной странице)

Успешность: 73%, средний балл:  3,65, СКО: 1,18.

На самом деле, достаточно трудно расположить категории товаров так, чтоб они были неудобны. Нужно просто поменьше графического мусора, и по больше смысла.

В основном, успешность хорошая. Но, не все Интернет-магазины смогли справится с этим тестом юзабилити: Технотрейд решил замучить своих посетителей излишней графикой, которая заставляет глаза бегать и искать сосредоточенно:

10. Текущее местонахождение

(Текущее местонахождение отчетливо видно на внутренних страницах сайта)

Успешность: 78%, средний балл:  3,9, СКО: 0,91.

Множество магазинов, к счастью, пользуються «хлебными крошками» (пример крошек: «Начало > О нас > Контакты»). Кто-то в более удобной форме, кто-то — в менее, но суть понимают все.

Также приятно было видеть выделения непосредственно в меню каталога. Все участники заработали от 3 до 5 баллов, кроме 5ок, который не потрудился выделять пункт меню с текущей категорией, и вывел крошки очень неуверенно (заканчивая путь не текущим товаром или его «родителем», а буквально «Киевом»).

У Мобиллака была нестандартная ошибка: они вывели крошки в блок с фильтрами, и стилизовали их аналогично фильтрам. Это ошибка, потому что элементы манипуляции данными (т.е. фильтры) не имеют общего с навигационным элементом крошек. Функции у них разные, и поэтому крошки найти стало не очень просто:

Очень отличился в плане навигации Оптимарт, который показал многоуровневую вложенность в удобной и эстетичной форме:

Техностар вообще молодцы: предложили быстрые переходы по соседним элементам на всех этажах вложенности:

Ну а Вилка преследует классику в плане стиля крошек, за что ей спасибо:

Но можно было убрать ёлочки перед первой ссылкой, переименовать промежуточные ссылки и убрать повторение в названии товара.

11. Кнопка «Добавить в корзину»

(Кнопка «Добавить в корзину» или аналог отчетливо видна близ каждого товара)

Успешность: 76%, средний балл:  3,8, СКО: 1,11.

Ни один сайт не набрал 1 балл. Т.е. все более-менее справились с заданием. Но в этом критерие плохо мебя показала Розетка, набрав всего 2 балла. Дизайнеры спрятали кнопку добавления товара в корзину, не дав ей нужного активного и теплово акцента среди всей информации о товаре. Тот факт, что кнопку надо искать (пускай и несколько секунд) доказывает ошибку:

12. Детальное описание и большое фото

(Детальное описание и большое фото прилагается к каждому товару)

Успешность: 73%, средний балл:  3,65, СКО: 0,81.

В общем, магазины справились с задачей, и заработали от 3 до 5 баллов. Единственный, кто плохо отличился, — это Интернет-магазин Гранд, который дал слишком короткое описание товара:

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

13. Похожие и сопутствующие товары

(Предоставляются похожие и сопутствующие товары)

Успешность: 28%, средний балл:  1,4, СКО: 1,5.

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

Если вы в реальном (а не Интернет-) магазине вы выбираете какой-то конкретный товар, одежду, предположим, то профессиональный продавец вам предложит дополнительные товары, которые к выбранному товару действительно подойдут по стилю или функции:

— «К этим брючкам отлично подойдет кофта из этой же коллекции»

— «Давайте посмотрим»

Если покупатель относится к типажу, который не скупой, и готов тратить на то, что ему подходит и облегчает жизнь, то такие ходы со стороны продавцев делают пользу и покупателю, и магазину, и самому продавцу (в виде бонусов).

Похожие товары тоже предлагаются компетентными продавцами: «Не нравится? А вот посмотрите у нас есть с перламутровыми пуговицами». Логика же проста: клиент думает о покупке этого товара, и он готов ознакомится с похожими, при условии, что этот чем-то не подходит.

2 четверки в этом критерие заработали только Прайс и Розетка. Пятерок нет вообще. Позор!

14. Кнопка перехода к оплате

(Отчетлива видна кнопка перехода к оплате сверху и снизу корзины)

Успешность: 50%, средний балл:  2,5, СКО: 1,05.

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

В данном критерие ни один магазин не заработал 0 баллов, но есть несколько едениц и двоек.

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

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

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

15. Детали и стоимость доставки

(Детали и стоимость доставки предоставляется при выборе товара)

Успешность: 31%, средний балл:  1,55, СКО: 1,64.

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

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

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

В этом критерие магазины набрали очень мало баллов. Лишь Технохата упомянула кратко возле цены товара и предоставила отдельную вкладку непосредственно в деталях товара:

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

Сравнение товаров

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

1. предоставляется как на стадии списка товаров, так и на стадии просмотра конкретного товара
2. позволяет сравнить отдельные параметры аналогичных товаров в табличном виде

Хороший пример удобного отображения сравниваемых товаров наблюдается на Розетке. Но плохо у нее то, что функция добавления товара к сравнению предоставляется лишь только на стадии просмотра отдельного товара, и нет подписей к параметрам справа таблицы (пригодится при сравнении 3 и более товаров).

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

Окончательный вывод анализа

В украинском сегменте Интернет-продаж бытовой техники есть магазины удобные в использовании, но большинство Интернет-магазинов не выполняет даже самых простых правил юзабилити. Дизайнеры Интернет-магазинов бытовой техники не обращают внимания на такие важные аспекты юзабилити, как:

• отображение посещенных ссылок другим цветом
• предоставление сопутствующих и похожих товаров
• предоставление информации о доставке непосредственно при просмотре товара

При этом, большинство интернет-магазинов справляется относительно успешно с такими аспектами юзабилити как:

• отображение цен товаров удобным способом
• предоставление инструментов для сортировки и фильтрации товаров каталога
• отображение местонахождения пользователя на сайте
• предоставление активной кнопки призыва к действию ("Добавить в корзину" или "Купить")

Что дальше?

1. Закажите юзабилити услуги через простую форму обратной связи.
2. Читайте другие статьи: Тема веб-страницы важнее типа Первый юзабилити-семинар Humanize it состоялся Увеличение конверсии в 2 раза (Интернет-магазина malm)	3. Подпишитесь на ленту или по электронной почте: Вперед!