Визуальная иерархия: 70% интернет-ритейлеров проваливают этот тест

Posted on by riasevastopol

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

Выясняется, нет. Недавний опыт, совершённый силами сервиса EyeQuant, продемонстрировал, что не хватает проработанная визуальная иерархия присутствует не только на сайтах маленьких вебмагазинов, но и настоящих «звезд» мира электронной коммерции — и наряду с этим на самых серьёзных страницах!

Подготовка опыта

Дабы подготовить выборку самых популярных вебмагазинов, было решено обратиться к перечню из основных 50 интернет-ритейлеров Национальной федерации розничной торговли (National Retail Federation). Потом на любой сайт был совершен визит, на протяжении которого были сделаны скриншоты товарных страниц. Было решено проанализировать эти страницы, потому, что:

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

p
Кое-какие образцы, нетипичные для сайтов eCommerce, были исключены из перечня.Визуальная иерархия: 70% интернет-ритейлеров проваливают этот тест

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

  • что это за страница? (What)
  • из-за чего она ответственна для пользователя? (Why)
  • куда они должны направиться дальше? (Where)

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

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

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

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

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

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

Просматривайте кроме этого: 15 золотых правил визуальной иерархии на лендинге

Результаты

По окончании того, как нетипичные веб-магазины были удалены из перечня, анализ оставшихся 43 продемонстрировал, что 70% из них (30 сайтов) провалили тест. Среди них: Walmart, GAP, OfficeDepot и Target.

Дизайн сайта Target уводит взор пользователя влево, в силу чего размещенные справа CTA и цена продукта сливаются с фоном

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

Запрещено обойти вниманием и те компании, чьи примерные сайты сходу давали ответы на все три вопроса: HM, BestBuy и другие.

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

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

Просматривайте кроме этого: Как избавиться от всего лишнего и расширить конверсию лендинга?

Заключение

Что возможно вынести нужного из этого изучения? Имеется три главных момента:

  1. Кроме того большие и, казалось бы, поднаторевшие в вопросах дизайна компании испытывают проблемы с организацией четкой визуальной иерархии на собственных сайтах. Одной из главных обстоятельств этого есть, конечно же, то, что многие дизайнерские ответы до сих пор принимаются интуитивно. Если вы не станете замерять визуальное внимание, деньги, израсходованные на дизайн, будут легко выкинуты на ветер.
  2. Тот факт, что компания успешна, не означает, что она совершенна. Обеспечение пользователей безукоризненным опытом — сложная задача для любой компании. В случае если компания большое количество получает, не обязательно, что ее сайт совершенен. Вот из-за чего копировать чужие сайты небезопасно.
  3. Вправду хороший дизайн — это до сих пор исключение, а не правило. Прекрасный дизайн не то же самое, что и действенный. Веб-страницы, в особенности товарные страницы, создаются чтобы увлечь пользователя к нижним этапам воронки. Как сообщил Пол Рэнд (Paul Rand): «Не секрет, что настоящий мир, в котором и действует дизайнер, — это не мир мастерства, а мир продаж». Не забывайте об этом.

Высоких вам конверсий!

По данным: eyequant.com Источник картины: Col!ne

Случайные статьи:

Иерархия интеллекта во вселенной


Подборка похожих статей:

riasevastopol

More Posts