Рекомендации по дизайну основных страниц сайтов электронной торговли

Оптимизируйте путь пользователей к продуктам, предоставляя понятную, дифференцирующую информацию о продукте на всех уровнях — от домашней страницы сайта до списка товаров.

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

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

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

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

Приветливая информативная домашняя страница

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

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

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

Четкая организация

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

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

Сайт REI
Сайт REI имел четкие навигационные категории, которые облегчали пользователям поиск. Полииерархия позволяла некоторым пользователям находить походную одежду в категории Camp & Hike, в то время, как другие просматривали категории Men или Women, а затем совершали покупки.

Продвижение подкатегорий при открытии списков товаров

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

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

Kitchen & Dining
Target.com: Верхняя часть раздела Kitchen & Dining выглядела как традиционная целевая страница категории со ссылками на доступные подкатегории; в нижней части отображаются отдельные списки продуктов, чтобы обеспечить немедленный доступ к товарам и минимизировать количество кликов.

Asos.com
Asos.com: Страница категории для аксессуаров отображает заметные ссылки на подкатегории выше списков товаров. Из-за относительно небольшого размера области подкатегории этот макет поощряет просмотр отдельных товаров больше, чем макет сайта Target выше.

Информация дифференцирующая продукт

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

Полезная информации для каждого списка продуктов должна включать, как минимум:

  • Краткие названия, содержащие важные и значимые характеристики продукта
  • Достаточно большие фотографии, чтобы идентифицировать товар и показать различия между товарами
  • Отображение других доступных цветов, стилей или опций
  • Цена (в то время, как это последнее исследование было сосредоточено на сайтах электронной коммерции B2C, наши ранние исследования показывают, что отсутствие цен — это огромная проблема юзабилити на B2B сайтах)

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

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

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

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

Вывод

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

Полный отчет

Теперь доступна новая версия нашего полного 222-страничного отчета по домашним страницам, страницам категорий, спискам и сравнению продуктов с 69 рекомендациями по UX дизайну, основанными на доказательствах. (Это один из отчетов из новой редакции серии Пользовательский опыт электронной торговли).

Нет комментариев
.