По данным IMRG / Capgemini покупатели Великобритании потратили онлайн 13,16 миллиардов фунтов за последний квартал 2008 года, что на 15% больше, чем в последнем квартале 2007 года.
С другой стороны, статистика Jupiter Research за сентябрь 2007 года показывает, что 42% из 1179 опрошенных онлайн-покупателей покинули ресурс не осуществив покупку потому, что они не смогли найти ответы на вопросы о товаре, который уже был добавлен ими в корзину.

Что и почему мы хотели сделать.

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

•  контент страницы (описания продукта, доставка);
• непосредственно дизайн (шрифты, цвета);
•  функции (рекомендации, отзывы);
•  разметка страницы (два столбца или все таки три)

Страницы каких продуктов мы сравнивали?
Для этого исследования были выбраны продукты 6-ти из 10-ти крупнейших интернет-магазинов Великобритании на 2008 год. В них вошли:

•  Amazon
• Argos
• Tesco Direct
• Play.com
• M&S
• John Lewis

Все участники исследования были знакомы с этими ресурсами и уже делали покупки, по крайней мере, на 3-х из этих 6-ти сайтов.

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

Что мы обнаружили:

Принцип 1. Призыв к действию должен быть очевидным.

Основной призыв к действию на странице продукта это добавить продукт в корзину. Следовательно, он должен быть хорошо видимым визуально и быть похожим на кнопку. Участники отметили, что на странице Tesco Direct для них было не понятно где они должны кликнуть чтобы купить товар так, как функция «Добавление в корзину» не в виде кнопки и плохо выделена визуально. Аналогичные замечания были сделаны и о серой кнопке на ресурсе John Lewis, которая такого же цвета как и другое содержимое страницы.
С другой стороны участникам было легко добавлять товары в корзину на сайте M&S, потому что кнопка визуально привлекает своим ярким цветом:

Принцип 2. Краткое описание продукта лучше представлять в виде маркированного списка.

Участники хотели чтобы описание продукта помогло им сделать выбор «покупать или нет». Кроме того, они ожидали увидеть «теплые» слова, которые бы поощряли их покупку, а не просто констатацию факта, что они что-то купили.
Пользователи также предпочитали, чтобы информация о продукте была в виде маркированного списка для быстрого сканирования текста, как сделано на сайте Argos. Представление описания в виде параграфов не только загромождает страницу, это так же требует больших усилий покупателей найти те детали, которые им нужны.
Участник прокомментировал страницу Tesco Direct так: «Это выглядит скучно и текст тяжело читать».
Участники предпочитают, чтобы все детали были показаны на одной странице (как у John Lewis и Amazon), а не в виде вкладок (как у Argos и Tesco Direct) так, как переключения вкладок это дополнительные действия для пользователей:

Принцип 3. Представляйте картинки товара только в хорошем качестве.

Первое на что всегда смотрели покупатели — фотографии товара, независимо от того, где они распложены на странице (ниже картинка «движения глаз»).

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

Принцип 4. Используйте простоту в расположении элементов.

Большинство участников предпочли видеть картинку продукта слева, а описание продукта справа (например, как у M&S).
Ресурс John Lewis имеет достаточно хорошее расположение элементов и отображается только важная информация. Участники просмотрели весь контент на странице, независимо от продукции (одежда, бытовые/цифровые товары и т.д.), которую они искали: «Мне нравится. Просто, стильно и не загромождено».
Тем не менее все участники пропустили раздел «Вами просмотренные товары» в нижней части страницы товара John Lewis. Они прокручивали вниз, но останавливались, когда заканчивалась секция контента, и прокручивали обратно вверх. Это потому, что секция «Вами просмотренные товары» визуально отделена от всего остального контента и поэтому выглядит как конец страницы. Но, в общих случаях вертикальная планировка призывает пользователей прокручивать страницу вниз:

Принцип 5. Не используйте длинные страницы.

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

•  «Даже если я прокручу вниз, я не буду на них смотреть» (про Amazon)

Ресурсы Play.com и Amazon оба имеют очень длинные страницы с продуктами (страница Amazon примерно в 8 раз длиннее чем Tesco Direct). Участники использовали фразу «пытаешься, но очень трудно» чтобы описать эту страницу. Участники видели только 2/3 всей страницы и полностью игнорировали остальную 1/3.

• «Не знаю, где она начинается и где заканчивается. Нужна концентрация чтобы прочитать» (про Play.com)
•  «Я просматривал только верхнюю часть страницы так, как знаю, что они выбрасывают бесполезную информацию вниз страницы, особенно в случаях таких длинных страниц. Так что я игнорировал их.» (про Amazon).

Принцип 6. Указывайте только необходимую информацию о продукте.

Не перегружайте покупателей. Указывайте только важную информацию относительно тех продуктов, которые продаете.
Не очень хорошая идея выбрасывать всю имеющуюся информацию на покупателей и давать им право выбора, что именно они хотят знать о продукте. Лучше досконально изучить товар и предугадать что захотят о нем знать покупатели.
Пользователи очень легко игнорируют либо пропускают информацию, которая может быть важна для них, когда на странице продуктов находится слишком много информации. На ресурсе Amazon участники исследования не прокручивали вниз страницы, где были размещены отзывы клиентов. Таким образом, они упустили такую важную информацию как обсуждения и отзывы клиентов, а так же раздел «Просмотрите похожие товары».

Принцип 7. Расставляйте акценты на важный контент.

В отличие от совершения покупки оффлайн, в онлайн магазине нету продавца, который бы рассказывал покупателям то, что они хотят узнать о товаре. Пользователям предстоит искать ответы на свои вопросы самостоятельно на странице продуктов, которая наполнена разного рода информацией. И если они не смогут найти ответы либо потеряют терпение при поиске информации, то они покинут данный ресурс тут же и вряд ли когда-либо ещё вернутся.
Например, такие технические детали о DVD как год, язык, субтитры это то, что важно для покупателя. Однако на Play.com, участники отметили, что необходимо очень много прокручивать прежде, чем они смогут увидеть эту информацию (она идет после отзывов покупателей и блока товаров связанных с DVD (разные гаджеты и игры)). Не надо играть в прятки с потенциальными покупателями!

Принцип 8. Избегайте размещения важной информации не на приоритетных участках.

Когда пользователи находится на странице продуктов его основная задача заключается в понимании того, что это за продукт и как его можно купить. Пользователи не любят когда их отвлекают от их цели, поэтому они просто блокируют информацию, которая, как им кажется, не поможет я решении их задачи. Таким образом, все участники полностью проигнорировали левую и правую колонки на сайте Play.com, особенно когда на ресурсе информация о продукте находится вертикально в одну колонку. Однако, когда на странице продукты расположены в 3 колонки (2 колонки предназначены для информации о продукте), участники были более склонны обратить свое внимание (хотя и не намного) на левую колонку так, как на сайтах M&S и John Lewis:

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

Принцип 9. Обеспечьте достаточно пространства и не злоупотребляйте цветами.

Ресурс M&S пересыщен информацией: рядом с картинкой продукта справа находится имя продукта, цена, код продукта, рейтинг, обзоры, описание продукта и информация о его наличии. Более того, все шрифты одинакового размера и между ними недостаточно белого пространства. Этот раздел выглядит перенасыщенным и участники, как только не могли найти нужную им информацию, игнорировали его.
Цвета используемые на странице отвлекали участников. Tesco Direct использует больше 5-ти цветов для шрифтов:

• Красный для цены
• Черный для контента
• Зеленый для «Добавить в корзину»
•  Голубой для вкладок с этикетками
•  Серый для некоторых ссылок

Это сбивало с толку участников и увеличивало визуальный беспорядок:

Принцип 10. Избегайте требования клика если хотите, чтобы пользователь прочел информацию.

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

Итог.

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

Перевод Натальи Лейви.

• Воздушный интерфейс будущего
• Обзор политики в интернете
• 7 решений, которые помогут успешно продавать юзабилити

Зачем это нужно?

На самом деле Eye-traсking называют методику по которой можно четко сказать куда пользователь смотрит и как долго. Можно полностью проследить за взглядом, нарисовать путь по которому следуют взгляд человека.
Эта методика позволяет определить какой элемент интерфейса привлекает зрение, насколько другие элементы отвлекают от выполнения задач, насколько быстро пользователь знакомится с контентом.

Чем измеряют взгляд?

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

Например прибор Tobii  X120 Eye Tracker (показан на рисунке), устанавливается непосредственно перед испытуемым (но чтоб не мешать взгляду, например под монитором).

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

Результаты исследования.

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

На основе исследования нескольких респондентов можно построить тепловую карту (heatmap). Где красные области -  области, куда попадает взгляд всех респондентов, желтая и оранжевая — почти все, зеленая, синяя- единичные взгляды, не засвеченные области — взгляд совсем не касался этих элементов.

Heatmap — пример компании Eyetools

Как это работает?  Примеры:

1 Eye — tracking исследование разного представления размещения подписей к полям формы.

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

2 Eye — tracking исследование рекламы .

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

Использование такой методики раскрывает большие горизонты в познании того как проектировать и тестировать интерфейсы.

Читайте также:  
• «Глупые» пользователи
• Проектировать сайт для новичков или для продвинутых?
• Зачем нужны юзабилисты?
• Не слушайте пользователей (правило юзабилити)

• Iforum — форум интернет деятелей (1.04)
• UX советы для не специалистов
• Наступление сенсорных дисплеев