юзабилити тестирование сайтов для детей 2008 (Final)
общие ошибки на сайтах интернет магазинов
1. Типичные ошибки на сайтах интернет-магазинов Евгений Кулаков, «Кулаков и партнеры» Октябрь, 201 1
2.
3.
4.
5.
6.
7. Российские покупатели e-commerce : Сегменты Параметры Персона 1 Персона 2 Персона 3 Персона 4 Количество человек в выборке 241 244 168 117 Частота покупок в ИМ 1-2 раза в год Практически каждый месяц Раз в год или еще реже 1-2 раза в квартал В скольких ИМ делали покупки В двух-трех В пяти и более В одном-двух В двух-трех
8. Российские покупатели e-commerce : Сегменты Параметры Персона 1 Персона 2 Персона 3 Персона 4 С кем советуются при покупке 33% - с членами семьи 10% - с друзьями, знакомыми 24% - с членами семьи 10% - с теми, кто разбирается в покупаемых товарах 18% с членами семьи 17% с членами семьи 12% с друзьями знакомыми Возраст, лет 20-40 23-36 21-33 18-41 Пол равное соотношение равное соотношение женщин чуть больше половины (61%) две трети мужчин (64%) Доход 15-30 тысяч рублей (43%) Более 30 тысяч рублей (24%) 15-30 тысяч рублей (37%) Более 30 тысяч рублей (38%) 5-10 тысяч рублей (25%) 10-15 тысяч рублей (25%) 15-30 тысяч рублей (25%) 15-30 тысяч рублей (43%) Более 30 тысяч рублей (23%)
9. Российские покупатели e-commerce : Сегменты Параметры Персона 1 Персона 2 Персона 3 Персона 4 Какие товары покупают одинаково часто в онлайне и оффлайне никакие Бытовая техника (холодильники, стиральные машины, тостеры, электрочайники и т.п.) Мобильные телефоны и аксессуары к ним Компьютеры и комплектующие Электроника и фото (TV, DVD, MP3, GPS etc.) Товары для офиса (оргтехника, канцтовары, офисная мебель) Книги, музыка, фильмы, игры Электронные товары никакие Книги, музыка, фильмы, игры Максимальная сумма покупки в интернете 7 - 15 тысяч рублей Более 15 тысяч рублей 500 - 1500 рублей 3 - 7 тысяч рублей Склонность покупать разные типы товара в одном интернет-магазине Стараются покупать в интернет-магазинах товары только одного типа Могут покупать схожие товары в одном интернет-магазине Могут покупать схожие товары в одном интернет-магазине Могут покупать схожие товары в одном интернет-магазине
10. Российские покупатели e-commerce : Сегменты Параметры Персона 1 Персона 2 Персона 3 Персона 4 Недавно купленные товары Бытовая техника Мобильные телефоны Спортивные товары Компьютеры и комплектующие Продукты и напитки Электроника и фото Книги, музыка, фильмы, видео Красота и здоровье Подарки и сувениры Книги, музыка, видео, фильмы Одежда, обувь и принадлежности Другие товары Среднее цена недавней покупки 3 - 7 тысяч рублей 3 - 7 тысяч рублей 500 - 1500 рублей 3 - 7 тысяч рублей Почему купили в онлайне Оказалось дешевле Было удобно тем, что товар привезли на дом Оказалось дешевле Было удобно тем, что товар привезли на дом В обычном магазине этого товара не было В обычном магазине этого товара не было
11. Ольга, 31 год Игорь, 37 лет Ирина, 26 лет Андрей, 30 лет Российские покупатели e-commerce : Персоны
65. Моторные и когнитивные сложности. Нет объяснений, зачем нужны личные данные. Недостаток инструкций.
66. Thank you for patience Евгений Кулаков, «Кулаков и партнеры» Октябрь, 201 1
Notes de l'éditeur
Понятно, что каждый сайт – это витрина бизнеса.
Но бизнес не существует отдельно, как вещь в себе. Всегда есть «ответная часть» - это его клиенты.
Веб-аналитика Соц.-дем. Типичные задачи пользователей, которые он может решить на нашем сайте Контекст использования ресурса (может, у пользователя сайта в этот момент дети под ногами ползают?)
Чтобы яснее понять, что из себя представляют покупатели РОССИЙСКОГО сегмента e-commerce , компания USABILITYLAB не так давно провела исследование таких пользователей: Поисковое (открытое) Не оплаченное каким-либо внешним заказчиком (т.е. неангажированное).
Были выделены типичные персоны – сводные архетипы пользовательских сегментов.
Затем были найдены реальные пользователи, наиболее релевантные персонам, и с ними проведено юзабилити-тестирование: Поисковое 24 интернет-магазина различной направленности Открытые + конкретные задачи. Главной целью тестирования было выяснить, как различные пользователи ведут себя на сайтах e-commerce .
Выделили несколько типичных паттернов поведения…
… и – сформулировали эвристики.
Теперь давайте посмотрим, насколько российские ИМ различной степени «крутости» соответствуют ожиданиям пользователей. Для своего доклада я выбрал три интернет-магазина: Совсем крошечный (по трафику) ex-road.ru – сайт компании, которая занимается продажей внедорожной техники (вездеходов). Основные покупатели такой техники – это 40-летние мужики из регионов, часто отставные военные, которые любят рыбалку и вообще «лесное» времяпровождение. Продажа техники составляет основной бизнес компании, а запчастей – дополнительный. Да, и еще есть технический центр. Продажи осуществляются в основном через телефонный заказ (технику надо смотреть перед покупкой «вживую»). Velosite.ru – крупнейший в Рунете интернет-магазин велосипедов. У него есть пара оффлайновых магазинов в Москве и несколько – в регионах. Основная задача сайта –дать посетителю предварительное представление о покупаемом велосипеде, помочь определиться с выбором и «привести» на точку продажи. Sportmaster.ru – интернет-витрина сетевого магазина. Главный вывод, который можно сделать при анализе этих сайтов: «гранды» допускают точно такие же ошибки, что и небольшие сайты e-commerce . Смотрите подробности
На маленьком сайте – целый набор юзабилити-проблем. Возьмем их за «точку отсчета»: Нет четкого текстового пояснения, на какой именно сайт попал пользователь (возможно, это «тусовка»? или обычный магазин запчастей?) Между тем пользователь данного типа ищет именно сайт, специализирующийся на продаже внедорожных автомобилей. По умолчанию открыт каталог запчастей (контрастный по дизайну, привлекающий внимание). Он имеет визуальный приоритет, объекты в нем – яркие, активные. В результате, во-первых, пользователю приходится приложить усилие, чтобы найти слова «Продажа техники» (а ведь этот посетитель пришел именно за техникой, а не за запчастями). Во-вторых, у пользователя может сложиться ощущение, что продажа техники – дело второстепенное для этой компании. Специализация и широта выбора техники не вполне ясны из краткого названия раздела («Продажа техники») и из иллюстрации (изображен «гламурный», «глянцевый» автомобиль, мало похожий на вездеход – в понимании пользователя из Сибири). Отсутствует индикация открытого раздела (кнопка «Интернет-магазин» не подсвечена).
На сайте параллельно существуют два разных раздела «О нас» с различным содержанием. Эта двойственность может создавать у пользователя ощущение, что его вводят в заблуждение.
Проблема: Излишний вступительный «приветственный» текст. Он не помогает SEO и не дает посетителю никакой дополнительной информации (нет даже ссылки на раздел «О компании», т.к. этот раздел отсутствует на сайте). Рекомендация: Убрать данный текст. Создать раздел «О компании» и разместить на главной странице явную ссылку на него.
Проблемы: Чрезмерно длинные списки в категориях. «Соседние» категории организованы по формальному принципу (по алфавиту) и не отражают реальных задач пользователя (напр., посмотреть близкие по функционалу категории). Рекомендации: Открывать по умолчанию одну из подкатегорий. Визуально разделить пейджинатор текущей категории и ссылки на соседние категории. В качестве «соседних» предлагать релевантные категории (в данном случае, напр., «Горные велосипеды до 8 тыс.руб.» и «Экстремальные горные велосипеды»).
Проблема: Отсутствует обратная связь. Практически отсутствует индикация того, что процесс оформления завершен завершен: по его окончании система просто отправляет пользователя обратно в корзину. У него может создаться впечатление, что это ошибка. Рекомендация: Дать ясное текстовое объяснения произошедшему. Поблагодарить за сделанный заказ. Создать ожидания о дальнейших шага клиента. Напр.: «Спасибо за покупку в нашем магазине! Ваш заказ № ХХХХХ принят и находится в обработке. В ближайшее время Вы получите подтверждение на Ваш E-mail . …»
Проблема: Список предлагаемых товаров не всегда начинается с самого релевантного предмета. (Подседельная сумка за 1170 руб. предлагается к недорогому велосипеду; детское кресло – к велосипеду-круизеру). Это не создает у посетителя ощущения, что ему предлагаются действительно необходимые товары. Рекомендация: Первым в списке кроссейла всегда предлагать наиболее необходимый товар.
Проблема: Список предлагаемых товаров не всегда начинается с самого релевантного предмета. (Подседельная сумка за 1170 руб. предлагается к недорогому велосипеду; детское кресло – к велосипеду-круизеру). Это не создает у посетителя ощущения, что ему предлагаются действительно необходимые товары. Рекомендация: Первым в списке кроссейла всегда предлагать наиболее необходимый товар.
Проблема: При добавлении к заказу товара из кроссейла (клике по кнопке «Купить») нет обратной связи: страница перегружается, но ее фокус остается на том же месте. Никакого объяснения произошедшему нет. Товар, добавленный в заказ, появляется вне доступа пользователя (выше на странице, в корзине). Рекомендация: Не убирать товар из кроссейла при добавлении его в заказ. Сделать отработку действия «Купить» в кроссейле по аналогии с ее отработкой на других страницах («Товар успешно добавлен…»)
Для онлайнового представительства магазина доверие – одна из наиболее важных характеристик. Ведь покупатель не видит реального продавца, он может вообще сомневаться в том, что за сайтом стоит хоть насколько-то уважаемая компания.
В «шапке» сайта не указан почтовый адрес компании, ее географическое местоположение. Телефоны отделов продаж – судя по префиксу, мобильные (но без указания ФИО). Пользователь вынужден догадываться, в какой город он звонит. Все это в целом не поддерживает доверие. Потенциальный клиент не чувствует, что в случае проблем ему будет куда и к кому обратиться (например, с претензией).
В текстах на сайте довольно много ошибок и опечаток. Эту неаккуратность пользователь может проецировать на работу компании в целом:
Проблемы: Не указан физический адрес компании. Посетитель может сомневаться, что компания существует в реальности. Физический адрес, даже просто для почтовых отправлений, дает покупателю ощущение надежности, доказывает, что ему есть куда обратиться в случае претензий или вопросов. Отсутствует раздел «О компании». Пользователь может не знать, что velosite.ru – крупнейший велосипедный магазин, и принять его за фирму-однодневку. Информация «О компании» повышает доверие к ресурсу, дает возможность пользователям убедиться в надежности и респектабельности компании. Рекомендации: Указывать адрес на всех страницах. Создать и поддерживать раздел «О компании». Разместить в нем, помимо прочего, подразделы «Новости» (с указанием реальных новостей компании, а не только акций) и «Контакты» (расширенные, возможно, с именами менеджеров).
Несмотря на обилие web2.0 элементов, на сайте вообще нет отзывов. Между тем именно отзывы (в т.ч. Критические) создают атмосферу доверия к компании и к продуктам, которые она продает. («Мы от вас ничего не скрываем!»)
Эта страница должна показать посетителю, задумавшемуся о покупке внедорожной техники, что он попал на «правильный» сайт, дать представление о широте ассортимента и услуг, оказываемых компанией, и обеспечить возможность начать покупки прямо с этой страницы. Вместо главной используется страница раздела. Недоступны (не представлены в явном виде, без совершения действий) названия категорий – подписи к ассортименту. Нет фокуса.
Нет словосочетания «интернет-магазин» Нет кнопки «Купить» «Доставка» и «Корзина» спрятаны
Точек входа на домашней странице много, однако их полезность для посетителя невелика. Некоторые (визуально значимые) ведут на второстепенные страницы (напр., акции). Другие (продвигаемые товарные группы) не дают возможность сразу сделать выбор, перегружая внимание пользователя избыточной информацией. Матричное представление (матрица из визуально похожих объектов) затрудняет выбор, провоцирует пользователя на непредсказуемые действия. Не создано ожиданий о структуре сайта. Посетителю не предложено узнать, куда ему идти для решения его задач. Рубрикация каталога товаров в виде позиций прайс-листа не всегда прозрачна для стороннего посетителя. Так, например, неочевидно, что гантели находятся в разделе «Тренажеры». При отсутствии поисковой формы это особенно критично. Не предложено решить конкретную проблему посетителя (купить тренажер для определенной ситуации). Вместо этого на него «вываливается» множество товарных позиций, которые он не в состоянии оценить. Между тем для правильного выбора посетитель сначала должен получить критерии. Поэтому сразу предлагать ему сделать выбор из множества элементов – непродуктивно.
Один из сегментов покупателей velosite.ru – это неопытные пользователи, возможно, девушка, которая покупает свой первый собственный велосипед. Она пришла на сайт по контекстной рекламе, которая обещала ей помощь в выборе… Но релевантную «точку входа» для такого посетителя очень трудно найти. На сайте все «заточено» под профессионалов.
Вообще, «идеального каталога» в природе не существует. Всегда найдется кто-то, кто не может найти «спрятанный» товар. Тем не менее, надо стараться
Эта страница должна предоставить пользователю весь ассортимент товаров (с понятными принципами их организации), объяснить разницу между отдельными товарами, а затем помочь совершить первоначальный выбор конкретного товара. ПРОБЛЕМЫ: Пользователю сложно понять принцип, по которому составлен список. (Это не алфавит, не год выпуска и не цена). Посетителю приходится прокручивать всю страницу, чтобы понять, есть ли на ней нужный ему товар. Не указано число актуальных предложений в базе. Пользователю не понятно, сколько еще ему прокручивать, чтобы «посмотреть всех». Нет возможности отсортировать предложения по возможным запросам, которые могут быть у данного типа посетителей (например, по типам кузова, по производителю, по типу двигателя).
Необходимо учитывать, что определенные группы покупателей недостаточно владеют терминологией и в целом могут иметь слабое представление о классификации тренажеров. Таким посетителям надо объяснить, какие существуют группы тренажеров (для тренировки мышц, выносливости, смешанные – например, гребные). Объяснить плюсы и минусы каждой группы, а также для чего их стоит выбирать.
Нечеткая логика: неясен принцип размещения товаров в списке. Нет блинов Kettler (но есть грифы), зато есть Torneo . Следствие из этого просчета: для пользователя остается неизвестным, насколько взаимозаменяемы блины и грифы разных брендов. Нет критериев выбора по задачам, по типу использования. Существующие сортировки по цене/рейтингу/популярности не соответствуют реальным задачам пользователей. Дезинформирующая визуальная группировка. Пустота в конце страницы создает ложное впечатление, будто это полный список. На самом деле товаров гораздо больше: есть пейджинатор, но он практически не виден.
Проблема: Не созданы ожидания о количестве и структуре контента (не ясен даже порядок числа наименований). Нет доступа к описанию типов подкатегорий («Горные женские….» и др.). Скорее всего, девушка-покупатель не знает, чем они отличаются, и при этом не может это выяснить в данном интерфейсе. Ей приходится открывать наугад. Рекомендация: Указывать общее количество товаров в категории и в каждой подкатегории. Снабдить список типов (подкатегорий) изображениями, наглядно иллюстрирующими их основные конструктивные различия. Снабдить каждый тип кратким, но емким описанием.
Проблема: Не ясны принципы дефолтовой сортировки «по умолчанию» (это не цена, не название и не годы выпуска). Это не создает у пользователя релевантных ожиданий и не позволяет ему сосредоточиться на выборе между отличающимися характеристиками. Рекомендация: Установить ясный, однозначно понятный принцип сортировки по умолчанию. (Напр., по алфавиту).
Проблемы: Не вполне ясная классификация подтипов («Разве не может быть велосипед одновременно и комфортным, и с ободным тормозом?»). Невозможно подобрать товар по критериям или по компонентам – такой функционал отсутствует. Рекомендации: Разработать более однозначную классификацию подтипов. Внедрить функционал выбора по критериям, компонентам и, возможно, по контексту использования товара (для катания в городе; в парке; с препятствиями и т.д.)
Проблема: На странице, называющейся «Сравнение», в действительности совершить сравнение невозможно: нет ни описаний товара, ни качественных иллюстраций. Фактически, это промежуточный экран для перехода на страницу, где можно реально сравнивать товары. По умолчанию проставлены все чекбоксы «Выбрать». Между тем многие посетители любят выбирать, сравнивая товары между собой (попарно) – и чтобы так поступить, им приходится сначала снимать «лишние» отметки. Избыточные элементы замусоривают восприятие. С этой страницы неудобно совершать покупку (недостаточно информации), а значит, иконки «В корзину» не нужны. Иконки «Удалить» также не нужны: совсем удалять товары из сравнения пользователь на этом этапе пока что опасается – он их только что разместил в список сравнения и пока не готов «удалить» свои усилия по совершению предварительного выбора. Рекомендации: Вместо заголовка «Выбрать» разместить обобщающий чекбокс, позволяющий «выбрать все». По умолчанию оставлять все чекбоксы невыбранными. Убрать колонки «Добавить в корзину» и «Удалить».
Проблемы: Недостаточно информации для сравнения. Недостаточная структурированность данных. Критчески важная информация (напр., вес) «спрятана» среди относительно неважной. Нет индикации уровня/класса/ценовой группы у оборудования, установленного на различные модели. Посетитель не может сразу оценить, насколько «нафарширован» тот или иной велосипед, насколько в целом высок его класс. Сравнение не подчеркивает различие товаров: и отличающиеся, и совпадающие характеристики графически выглядят одинаково. Нет возможность удалить из списка сравнения не подошедшие товары. Пользователь не может «отщелкивать» те позиции, которые уже решил не покупать, и они продолжают замусоривать его восприятие. Рекомендации: Обеспечить заполненность всех полей из БД. Структурировать данные. Напр., ввести группы данных: «Рама», «Руль» и т.д. В начале каждой группы давать наиболее важную информацию. Продумать и внедрить индикацию (возможно, графическую) уровня оборудования. Разработать и внедрить функционал переключения режима вывода данных: «Показывать все» и «Показывать только отличающиеся», либо выделять отличающиеся параметры графически. В шапке добавить иконки «Удалить из сравнения».
Поиск – один из наиболее частых видов деятельности в интернете. Современный пользователь «не парится» и просто вбивает название интересующего его предмета в поисковую строку. Тем важнее дизайн формы поиска.
Любая, самая минимальная неточность (напр., лишний пробел) ведет к ошибке поиска. Система как будто издевается над посетителем.
Эта страница должна «продать» конкретный товар: создать у посетителя наиболее полное представление о его полезности, уникальности и ценности, сориентировать о конечной цене, а затем подтолкнуть посетителя к контакту с продавцом.
Рядом с изображением товара не указана цена. Рядом с изображением товара не даны возможные варианты действий, к которым пользователя побуждает сайт (напр., просмотр видео про этот тип автомобиля). Ничто не указывает на то, что ниже фото есть текст. (При разрешении 1280х800). В галерее превью нет индикации, какая иллюстрация сейчас просматривается. Нет указаний на то, как пользоваться галереей (например, если кликнуть по увеличенному фото, то можно войти в режим просмотра, однако об этом пользователь должен догадываться сам).
Текстовое описание товара находится в самом конце страницы, доступно только после длительного скроллинга. Есть избыточная информация («Виброустойчивость: 8,6 G RMS ») и в то же время не хватает необходимой (нет пояснения, каким образом изменяется форма луча, что означают названия «спот» и «евро» - тогда как на других страницах это есть). «Добавить в корзину» выполнена именно в виде ссылки – в то время как пользователям Рунета привычнее воспринимать эту функцию в виде кнопки. Не обозначены возможности доставки, ее сроки и цена. Не обозначено наличие товара в магазине.
У некоторых товаров практически отсутствует описание (напр., не сказано, на какие модели автомобилей можно установить этот диван):
Существенная информация, важная для покупки (цена, наличие бесплатной доставки и сборки, др.) при распространенном разрешении экрана 1024 х 768 оказывается вне доступа пользователя.
Таблица сравнения по-прежнему не отвечает на главный вопрос: какой из этих товаров подходит пользователю? Вес маховика, опции компьютера, фитнес-тест – все эти характеристики не говорят сами за себя, их необходимо еще каким-то образом интерпретировать. Посетитель, не имеющий достаточно информации для принятия решения по значимым для него признакам, в результате вынужден выбирать, например, по цене (а это плохо влияет на средний чек).
Описание товара фактически представляет собой таблицу с ТТХ: множество технических подробностей, большинство из которых пользователь не понимает (что они ему дают? Чем они хороши или плохи для него?) При этом посетителю не предложено узнать, что означает, например «магнитная система нагружения». Между тем именно для сложных технических товаров важно давать полноценное текстовое описание, описывающее особенности и суммирующее причины для покупки данного товара.
Нет информации о действии, которое нужно совершить для просмотра галереи. (Чтобы узнать, что это в принципе возможно, надо сначала навести курсор на увеличенное изображение товара).
Кнопка «Найти магазин» не создает у пользователя правильных ожиданий относительно наличия товара в ИМ, процесса и вообще возможности покупки. (Неясно, почему в одном случае можно «Купить», а в другом лишь «Найти магазин»).
Помните? Для этого сайта основная задача – это подвести посетителя к тому, чтобы он позвонил. Ну а оформление целевого элемента в виде ссылки – для современного пользователя очень странно. Когда вы последний раз видели ССЫЛКУ (а не КНОПКУ) «Купить»?
«Заказать» выглядит ничуть не более привлекательно, чем «Пересчитать» и тем более «Итого».
Этот скриншот сделан уже после того, как посетитель отправил заказ.
На велосайте кнопка «Оформить» тоже, мягко говоря, не бросается в глаза
Недостаток: Страница благодарности содержит не всю необходимую информацию. Рекомендация: Указывать название заказанных товаров, их количество и общую сумму. Разместить кнопку «Распечатать».
Тип плательщика – слишком бухгалтерский термин. Параметр «Местоположение» не запоминается при перезагрузке страницы (например, в другом поле, если пользователь сделал ошибку, то страница перезагружается и появляется сообщение об ошибке). Если пользователь не участвует в бонусной программе, то нет необходимости показывать соответствующие поля. Поэтому надо создать динамическое поле «Участие в бонусной программе» и по умолчанию предъявлять вариант «Нет» (вместо того, чтобы предлагать некую «синюю», о которой пользователь ничего не знает). Спамбот не может вводить почтовый адрес, выбирать местоположение, способ оплаты в релевантном формате. Капча – излишнее препятствие для оформления заказа пользователем.
Проблемы: Нет объяснений того, для чего система запрашивает личные данные. (Напр., пользователь может решить, что информация о его телефоне излишняя – ведь он уже ввел свой E-mail) . Поля ввода при оформлении заказа имеют недостаточный размер. Они визуально «зажаты», символы слишком мелкие. Их неудобно вводить и читать. В некоторых случаях (напр., в поле E-mail ) введенную информацию сложно проверить: она не умещается в поле. Недостаточная инструкция: не вполне ясно, что надо писать в поле «Комментарии». Неочевидно, например, что адрес доставки надо писать именно здесь (больше для этого не будет полей). Используется неудачная капча (трудночитаемый шрифт). Рекомендации: Дать краткие объяснения того, для чего запрашивается та или иная личная информация (напр.: « E-mail (необходим, чтобы подтвердить Ваш заказ) »; «Телефон (для уточнения адреса доставки) ») Изменить граф.дизайн полей ввода так, чтобы они вмещали достаточный объем информации. В поле «Комментарии» дать пример того, какая информация желательна для оформления заказа. (Напр., адрес доставки). В зависимости от загрузки модераторов, возможно, отказаться от капчи. Если это невозможно, то создать ссылку «Показать другое слово».