UX главной страницы: 8 распространенных ошибок

No items found.
Аудио перевод статьи
0:00
0:00
·

Главная страница остается “входной дверью” для многих пользователей, взаимодействие с сайтом начинается именно отсюда.

Основные выводы:

  • Наше исследование 60 сайтов электронной коммерции, проведенное в конце 2020 года, показало, что в целом UX главных страниц можно считать удовлетворительным.
  • Тем не менее, 32% сайтов показали либо средний, либо плохой результат.
  • Постарайтесь не допускать 8 распространенных ошибок юзабилити, рассмотренных в статье, и это станет первым шагом на пути к улучшению опыта взаимодействия пользователей с главной страницей сайта.

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

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

В ходе исследования, проведенного в конце 2020 года, наша команда UX-специалистов тщательно изучила и оценила более 10 900 элементов главных страниц и страниц категорий товаров. Наряду с этим, мы рассмотрели 3100 лучших и худших примеров, собранных на 60 самых прибыльных сайтах электронной коммерции Европы и США.

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

Текущее состояние UX главных страниц

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

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

Однако, за пределами этого значения эффективность UX сильно различается: например, 32% сайтов показали либо средний, либо плохой результат (для сравнения, в 2018 году этот показатель составил 25%). Это, в первую очередь, связано с тем, что сайты формируют у пользователей плохое первое впечатление и несоответствующие ожидания.

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

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

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

Ниже мы обсудим эффективность UX и 8 распространенных ошибок и стратегических просчетов, о которых следует помнить, работая над главной страницей сайта:

  1. Неспособность визуально представить большое количество видов товаров
  2. Использование чрезмерно агрессивных и отвлекающих рекламных объявлений
  3. Неправильная реализация каруселей
  4. Неспособность помочь пользователю в выборе нужной группы товаров
  5. Отсутствие уникальных изображений и дизайна
  6. Поле поиска, которое не так просто обнаружить
  7. Неправильная реализация выбора страны и языка
  8. Визуальные области воздействия не соответствуют фактическим

Мы выбрали именно эти ошибки, поскольку они наиболее интересны и подходят для обсуждения в статье.

8 распространенных ошибок и стратегических просчетов UX на главной странице

Описанные здесь ошибки встречаются на многих сайтах. Некоторые из них можно рассматривать как “упущенные возможности” индустрии электронной коммерции в целом.

Обратите внимание на то, что в статье представлен анализ средней эффективности UX главных страниц 60 самых прибыльных сайтов электронной коммерции США и Европы.

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

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

1) На главных страницах 6% сайтов представлено мало разновидностей товаров
👎🏻 На главной странице сайта Overstock представлены менее 20% видов товаров. По этой причине пользователи не могут адекватно оценить, насколько разнообразен ассортимент на сайте.
👎🏻 Пользователю мгновенно становится понятно, что компания REI продает туристическое снаряжение. Однако, главная страница не сообщает о том, что значительную часть каталога составляют велосипеды, коврики для йоги и лыжи.

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

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

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

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

👍🏻 На главной странице сайта B&H Photo представлено более 90% ассортимента за счет эффективного использования маленьких изображений разных видов товаров. Такой подход помогает пользователям сразу выбрать категорию, которую они ищут.
👍🏻 Основные категории товаров визуально представлены на главной странице сайта Musician’s Friend. В мобильной версии можно использовать текстовые ссылки вместо изображений или в дополнение к ним.

Если на сайте представлен широкий ассортимент, главная страница должна содержать как минимум 40% видов товаров. В мобильной версии можно использовать текстовые ссылки вместо изображений или в дополнение к ним.

Несмотря на то, сколько пользователей формируют первое впечатление о сайте и ассортименте на основе контента главной страницы, 6% крупнейших сайтов электронной коммерции по-прежнему совершают ошибку и отображают на ней менее 40% видов товаров (что можно считать прогрессом, ведь в 2018 году такой недостаток имели 13% сайтов).

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

2) Главные страницы 59% сайтов включают чрезмерно агрессивные рекламные объявления, которые отвлекают пользователей
👎🏻 Главная страница сайта Costco настолько переполнена рекламными объявлениями о различных акциях и скидках, что становится трудно получить какое-либо представление о каталоге товаров. Поскольку важный контент либо отсутствует, либо перекрывается агрессивной рекламой, новым пользователям придется потратить время и силы, чтобы найти базовую информацию о том, что может предложить компания.
👎🏻 Зайдя на сайт Walmart, пользователь не понял, туда ли он попал, поскольку часть главной страницы была закрыта большим рекламным объявлением. Он даже спросил: “Я точно нажал на правильную ссылку? Ах да, извините.” Такая реклама особенно сильно сбивает с толку пользователей мобильной версии сайта, поскольку в этом случае другие источники информации скрыты (например, основная навигация).

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

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

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

👍🏻 Главная страница сайта Grainger позволяет пользователям сфокусироваться на изучении категорий товаров и не отвлекает их агрессивными рекламными объявлениями.
👍🏻 На главной странице Northern Tool рекламные объявления размещены в карусели (см. пункт 3 ниже). Однако такая карусель не отвлекает пользователя от остального контента, ведь половину области просмотра занимают категории товаров.

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

Несмотря на риск испортить первое впечатление пользователей, главные страницы 59% сайтов включают агрессивную рекламу (в 2018 году этот показатель составлял 37%).

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

3) На главных страницах 75% сайтов неправильно реализованы карусели

👎🏻 На главной странице сайта GAP слайды в карусели сменяются каждые 4 секунды или даже быстрее, а элементы управления почти не видны.

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

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

👍🏻 На сайте Bell слайды автоматически сменяются с низкой скоростью, при этом движение приостанавливается, когда пользователь наводит на них курсор мыши.  Кроме того, карусель включает хорошо заметные элементы управления.

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

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

👍🏻 Главная страница сайта Gilt. Для большинства сайтов электронной коммерции статический контент, разделенный на секции, как здесь, будет лучшим решением, чем карусель. Такой дизайн проще разрабатывать и поддерживать. Пользователи также считают его наиболее удобным.

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

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

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

Отличные примеры реализации каруселей можно найти на сайтах Home Depot and B&H Photo.

4) Главные страницы 62% сайтов не помогают пользователям выбрать нужную группу товаров
👎🏻 Поскольку на главной странице Nike не отображаются категории товаров, пользователям трудно найти нужный раздел.

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

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

👍🏻 Напротив, компания Williams Sonoma показывает популярные категории и подкатегории товаров прямо на главной странице, что позволяет пользователям быстро и легко попасть в нужный раздел

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

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

Несмотря на то, насколько сильно страдает опыт пользователей, когда они по ошибке попадают не в тот раздел, главные страницы 62% сайтов не помогают им быстро и легко находить нужную группу товаров (в 2018 году этот показатель составлял 55%).

Отличные примеры сайтов, главные страницы которых помогают пользователям попасть в нужный раздел, можно найти на сайтах Lowe’s и Newegg.

5) Главные страницы 19% сайтов не используют уникальные изображения и дизайн
👎🏻 Компания John Lewis решила не вкладывать средства в уникальные изображения для демонстрации товаров, в частности, фото с примерами использования товаров (например, детей с игрушками или моделей в аутфитах).
👎🏻 На главной странице сайта REI можно найти лишь вырезанные изображения товаров. Уникальные изображения и дизайн выделяют сайт среди конкурентов, а также вдохновляют пользователей и вызывают у них интерес.

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

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

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

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

👍🏻 В сферах, где визуал играет решающую роль, например, одежда, эстетическая привлекательность товара является важным фактором для принятия решения о покупке. Большие контекстные изображения на главной странице сайта American Eagle привлекают внимание пользователей, демонстрируя товары и их категории.
👍🏻 Красивые фотографии и простой дизайн на сайте Wayfair создают позитивную атмосферу для совершения покупок, а также отлично демонстрируют отдельные товары.

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

Несмотря на негативные последствия, на главных страницах 19% сайтов не используются уникальные изображения или дизайн (показатели улучшились, ведь в 2018 году это было характерно для 28% сайтов).

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

6) На главных страницах 22% сайтов трудно обнаружить поле поиска
👎🏻 На главной странице сайта Ann Taylor достаточно сложно сразу обнаружить поле поиска. На его видимость влияют размер, расположение, а также соседние конкурирующие элементы. Кроме того, поиск обозначен лишь иконкой и подписью.

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

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

👍🏻 На главной странице сайта Walmart поле поиска мгновенно бросается в глаза, поскольку выделяется на контрастном фоне.

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

Несмотря на ведущую роль поля поиска в обнаружении нужных товаров, его трудно найти на главных страницах 22% сайтов (по сравнению с 15% в 2018 году).

Отличные примеры заметного поля поиска можно найти на сайтах Wayfair, J.C.Penney, Staples

7) На 35% сайтах неправильно реализован выбор страны и языка
👎🏻 На сайте Neiman Marcus для выбора страны и языка используется оверлей. Это может привести к тому, что его ошибочно примут за стандартное предложение подписаться на рассылку и закроют, даже не прочитав текст.
👎🏻 На сайте Apple оверлей с выбором страны занимает очень мало места, из-за чего его могут просто не заметить.

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

При этом оверлеи, предназначенные для выбора страны или языка, часто принимали за рекламные объявления, опросы, призывы создать аккаунт или предложения подписаться на рассылку. Их просто закрывали, даже не взглянув на содержимое.

👍🏻 Сайт Asos определяет местоположение пользователей по ID и отображает иконку флага в правом верхнем углу, а также в футере. Такой подход позволяет пользователям легко менять страну или язык.
👍🏻 Пользователь, который зашел на сайт Adidas, увидел оверлей для выбора страны (первое изображение). После того, как он выбрал США, оверлей закрылся, и человек перешел к изучению сайта (второе изображение). Пользователи мобильных устройств уделяли больше внимания оверлеям, поскольку область просмотра была сильно ограничена. В данном случае оверлей на сайте Adidas занимал 77% экрана и включал яркие изображения флагов. Вероятно, оба этих фактора способствовали тому, что пользователь обратил внимание на содержимое оверлея.

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

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

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

Выбор страны и языка может играть важную роль при совершении покупок на сайте, однако на 35% сайтов эта функция реализована неправильно (в 2018 году этот показатель составлял 27%).

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

8) На 43% сайтов неэффективно обозначены интерактивные элементы интерфейса
👎🏻 Неясно, ведут ли представленные на главной странице сайта Sephora элементы в один раздел или в разные. Возникает риск того, что некоторые пользователи не найдут, на какой элемент следует нажать, чтобы попасть в нужный раздел, и потратят больше времени на то, чтобы найти его на сайте. В то же время, другие пользователи будут сбиты с толку, если интерактивные элементы приведут их на страницы, не соответствующие их ожиданиям
👎🏻 Визуальные элементы на главной странице сайта Ann Taylor реализованы ненадлежащим образом. Пользователи попадают на разные страницы, в зависимости от того, куда именно они нажимают внутри элемента. Если визуальный элемент может представлять собой как единую интерактивную область, так и несколько, это лишь запутывает пользователей и заставляет их блуждать по сайту.

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

Им было неясно, является ли визуальный элемент единой интерактивной областью, ведущей на одну страницу, или это несколько областей воздействия, ведущих на разные страницы.

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

👍🏻 На сайте Wayfair заголовок и изображение подкатегории выделяются одновременно при наведении курсора. Это показывает, что оба интерактивных элемента ведут на одну страницу.
👍🏻 На главной странице в мобильной версии сайта Etsy каждая ссылка представляет собой отдельную область воздействия, включающую графику и заголовок. При этом ссылки визуально отделены друг от друга.

Для решения этой проблемы можно определенным образом выделять интерактивные элементы при наведении курсора, чтобы было понятно, ведет ли конкретный визуальный объект на одну страницу или на несколько.

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

Несмотря на то, насколько важно правильно реализовать интерактивные элементы для эффективного перемещения по сайту, на 43% сайтов области воздействия в интерфейсе не выделены надлежащим образом. Не совсем очевидно, куда пользователи могут попасть, нажав на тот или иной элемент, а также не обозначены границы интерактивных областей (в 2018 году такая проблема существовала на 18% сайтов).

Отличные примеры стилизации интерактивных элементов можно увидеть здесь:

Эффективность UX главных страниц снизилась

👎🏻 На главной странице сайта Nordstrom есть 6 из 8 проблем, указанных в этой статье: чрезмерно агрессивные и отвлекающие рекламные объявления, неправильная реализация карусели, отсутствие помощи в поиске нужной подкатегории товаров, слабо заметное поле поиска, использование оверлея для выбора страны и языка, а также недостаточно четко обозначенные интерактивные области. Таким образом, многие пользователи, которые начнут знакомство с товарами с главной страницы Nordstrom, получат негативный опыт.

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

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

Несмотря на то, что наше исследование главных страниц 2020 года показало, что они в среднем работают удовлетворительно, очевидно, что им есть, куда расти. 32% сайтов показали плохой или средний результат (по сравнению с 25% в 2018 году).

Приведенный в этой статье анализ текущего состояния UX главных страниц учитывает лишь 8 из 17 проблем, рассмотренных в рамках нашего масштабного исследования. Остальные 9 также желательно изучить, чтобы получить полное представление о недостатках UX главных страниц.

Чтобы повысить эффективность UX главной страницы, следует начать с исправления описанных в этой статье 8 ошибок, а именно:

  1. Показывать достаточное количество видов товаров (нет на 6% сайтов)
  2. Не использовать чрезмерно агрессивные и отвлекающие пользователей рекламные объявления (не справляются 59% сайтов)
  3. Правильно реализовать карусели (нет на 75% сайтов)
  4. Помогать пользователям в выборе нужной группы товаров (не справляются 62% сайтов)
  5. Инвестировать в уникальные изображения и дизайн (не делают 19% сайтов)
  6. Сделать поле поиска заметным (нет на 22% сайтов)
  7. Правильно реализовать выбор страны и языка (не справляются 35% сайтов)
  8. Убедиться, что визуальные области воздействия соответствуют фактическим (не делают 43% сайтов)

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

Источник:
baymard.com
·
comments powered by HyperComments