Меню

+380979398298

На что люди смотрят перед тем как купить, или 10 принципов для интернет магазинов

  • 08
  • 11
  • 2011

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

По данным 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 есть ссылка на альтернативные продукты, которые, при нажатии, открываются в новом окне. Участники отказывались нажимать на них, аргументируя это тем, что они могут перейти совершенно на ненужный им ресурс.

Итог.

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

 

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

Оригинал статьи здесь .

Оставьте комментарий

Ваш e-mail не будет опубликован.