5 лучших UX-практик в дизайне интернет-магазинов одежды, которым не следуют 94% сайтов

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

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

  • Наше масштабное тестирование интернет-магазинов одежды показало, что существует 5 лучших практик, которые при правильном применении помогают пользователям уверенно принимать решения о покупке.
  • Однако 94% сайтов неправильно используют одну или несколько из этих лучших практик.
  • В результате многие пользователи не получают в интернет-магазинах одежды необходимой для совершения покупок поддержки.

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

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

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

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

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

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

В этой статье мы рассмотрим 5 лучших UX-практик для интернет-магазинов одежды:

  • Предоставлять достаточно информации о размерах (94% не предоставляют)
  • Объединять разновидности товара в один элемент списка (20% не делают этого)
  • Использовать для каждого доступного размера отдельную кнопку (63% не используют)
  • Показывать, как вещи выглядят на моделях (75% не делают этого)
  • Позаботиться о том, чтобы изображения товаров, имели надлежащее разрешение и хорошо масштабировались (72% не делают этого)

1) Предоставлять достаточно информации о размерах (94% не предоставляют)

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

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

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

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

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

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

👎🏻В "Руководстве по размерам" на сайте Pangaia все параметры указаны только в сантиметрах. Пользователям, лучше знакомым с дюймами, а также большинству посетителей, которые не знают точных характеристик своей любимой одежды (длина рукава и т.д.), скорее всего, будет трудно определить, какой размер приобрести.
👍🏻В интернет-магазине Everlane стандартная информация о размерах указана наряду с числовыми обозначениями размеров и мерками самих предметов одежды, что позволяет пользователям получить все необходимые сведения для совершения покупки.

Исследование показало, что сведения о размерах можно считать достаточными, если учтены следующие 10 аспектов:

  1. Предоставлена стандартная информация о размерах
  2. Есть числовые обозначения размеров
  3. Есть измерения как в дюймах, так и в сантиметрах
  4. Есть таблица соответствия международных размеров
  5. Есть инструкции и советы по снятию точных мерок
  6. Информация о размерах и измерениях соответствует типу продукта
  7. Есть ссылка на "руководство по размерам" рядом с кнопками выбора размеров
  8. Кнопка "назад" браузера возвращает пользователей на страницу с информацией о товаре
  9. В руководстве по размерам есть ссылка на службу поддержки клиентов
  10. Указаны параметры моделей на фото

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

2) Объединять разновидности товаров в один элемент списка (20% не делают этого)

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

Есть два способа отобразить эти разновидности в списке товаров:

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

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

  1. Списки товаров становятся загроможденными, они создают чрезмерную когнитивную нагрузку и затрудняют изучение ассортимента
  2. Многим пользователям будет сложно найти определенную разновидность товара, особенно если варианты разбросаны по всему списку
👎🏻"Так, это все одна и та же куртка разных цветов. На самом деле это не разные товары... На веб-страницах обычно так много всего. Я не хочу тратить целый день на то, чтобы перебрать все доступные опции". Когда мы создаем несколько элементов списка для одного товара, пользователям приходится тратить больше времени на то, чтобы определить количество имеющихся вариантов. Даже если в каждой карточке указано, что есть "еще 3 цвета" (как в приложении Urban Outfitters' ).
👎🏻На сайте Overstock различные цветовые вариации одного и того же рюкзака мешали участникам тестирования изучать ассортимент магазина (на этом сайте представлено более 3 000 рюкзаков). Проблема усугубляется тем, что фото товара сняты под разными углами, — пользователи могут подумать, что на них изображены разные товары, а не вариации одного.
👎🏻"Это одна и та же обувь в разных цветах? Что?" Этот участник зашел на сайт Thousand Fell и был сбит с толку, поскольку одни и те же кроссовки были представлены в списке несколько раз с небольшими визуальными различиями. Такое разделение на несколько элементов списка может значительно усложнить навигацию даже на небольших сайтах-каталогах, которые занимаются прямыми продажами.

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

Поэтому разновидности товаров следует объединять в один элемент списка.

👍🏻Интернет-магазин Neiman Marcus объединяет доступные расцветки каждого товара в один элемент списка. В результате список не выглядит загроможденным, что позволяет пользователям эффективно изучить ассортимент.
👍🏻"Хорошо, что все расцветки показаны прямо под платьем. Так что если мне понравится какое-то платье, я могу просто перейти на страницу товара и изучить их, не открывая другие страницы, — это экономит время". Объединение разных расцветок в один элемент списка может сэкономить много времени, как подтвердила эта участница тестирования, просматривая немецкий сайт Bonprix.

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

Важное условие для объединения разновидностей в один элемент списка — они должны быть связаны в базе данных.

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

Учитывая серьезность этой проблемы, удивительно, что 20% протестированных сайтов не объединяют разновидности товаров в один элемент списка.

3) Использовать для каждого доступного размера отдельную кнопку (63% не используют)

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

👎🏻"Какие милые!" Эта пользовательница, совершающая покупки в Adidas, нашла понравившуюся ей пару обуви (первое изображение), но не понимала, что ее размера нет в наличии, пока не воспользовалась выпадающим меню (второе изображение): "О, у них нет моего размера". Когда доступные размеры скрыты внутри такого списка, пользователям сложнее определить, какие варианты есть в наличии, что может разочаровать и расстроить их.
👎🏻Этот пользователь сайта Adidas не выбрал размер в выпадающем меню, прежде чем нажать кнопку "Добавить в корзину", из-за чего на экране появилось сообщение об ошибке. Пользователи склонны игнорировать еле заметные выпадающие списки.

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

Некоторые пользователи, пропустившие список с размерами, видели сообщение об ошибке.

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

👍🏻"Похоже, размер в наличии, да". Участница исследования зашла на сайт Under Armour и без труда определила, что толстовка есть в нужном ей размере. Видимые кнопки упрощают просмотр доступных размеров, при этом пользователям не нужно взаимодействовать с выпадающим списком.
👍🏻"Здесь четко указано, какие есть размеры". На сайте Marks & Spencer (Великобритания) другая участница тестирования смогла быстро разобраться с доступными размерами, а затем быстро выбрать свой.

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

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

4) Показывать, как вещи выглядят на моделях (75% не делают этого)

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

👎🏻"Вот этот... я не думаю, что тут есть его фото у кого-то на спине, поэтому я ничего не знаю о его размере... я не хочу что-то слишком маленькое... насколько я понимаю, это может быть детский рюкзак". Поскольку на сайте Kohl’s отсутствуют изображения вещей на моделях, пользователям трудно судить об их посадке и габаритах.
👎🏻"Я поищу в Google, например, "Lolly’s Laundry, платье Ева" и посмотрю, есть ли фотографии этих платьев на человеке". Когда пользователи действительно хотят увидеть одежду на модели, как, например, эта участница тестирования, изучавшая товары на скандинавском сайте Boozt, существует реальная опасность, что они могут отправиться в другое место, чтобы найти соответствующие изображения. И в некоторых случаях не вернуться.

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

👍🏻"Мне нравится, что можно увидеть, как это выглядит на человеке", — отметила эта участница, задержавшись на изображении модели в пуловере на сайте Adidas. Представленные изображения помогли ей получить более точное представление о посадке изделия и его визуальных характеристиках.
👎🏻"Я думаю, что без модели трудно представить это на себе. Поэтому мне не очень интересны такие фото. Я бы предпочла вариант с моделью". Отсутствие изображения модели в этом платье в приложении Urban Outfitters’ не позволило участнице тестирования оценить его должным образом.
👍🏻"Отличные фотографии, есть несколько действительно хороших крупных планов, а затем показано, как обувь выглядит на человеке. Это здорово". Демонстрация ботинок на модели в приложении ASOS позволяет пользователям, таким как эта участница тестирования, более точно оценить, насколько они соответствуют требованиям.

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

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

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

👎🏻"Манекен в очень скучной одежде... он не вызывает у меня желания ее купить". Изображение сумки на сайте eBags не вызвало восторга у пользователя, который счел внешний вид манекена дешевым и отталкивающим.
👍🏻"Сумка представлена на модели, так что я вижу, что она довольно большая". Когда вы демонстрируете, как сумка выглядит на человеке, это снимает все вопросы о ее размере. Мы убедились в этом, тестируя интернет-магазин Next (Великобритания).

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

Поэтому при любой возможности выбирайте фото реальных людей.

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

5) Позаботиться о том, чтобы изображения товаров, имели надлежащее разрешение и хорошо масштабировались (72% не делают этого)

Наше тестирование показало, что некачественные изображения негативно сказываются на восприятии товаров.

👎🏻"Эти изображения абсолютно бесполезны". Один из участников пожаловался на качество изображений на сайте Overstock. Качество изображений является одним из важнейших аспектов, волнующих пользователей, особенно в таких визуально ориентированных сферах, как одежда
👎🏻"Здесь представлена только одна фотография. И она нечеткая. Я никогда не смогу принять решение, нужен мне этот кошелек или нет, опираясь на эту фотографию. Даже если бы в описании было сказано, что он волшебный и будет приносить мне 100 долларов каждый день [смеется], я не стану его покупать. Я бы даже не стала смотреть описание. Мне нужно увидеть фото. Я покупатель-визуал... Качество настолько плохое... что мне хочется просто закрыть этого сайт". Участница тестирования была сильно разочарована качеством фотографий на Overstock и заявила, что готова уйти на другой сайт.
👎🏻"Я бы хотела понять, как выглядит материал вблизи. Приближение должно быть достаточным, чтобы я могла почувствовать это просто по фотографии. Нет, наверное, я все-таки не куплю его". Во время нашего тестирования участники, например, эта участница на сайте Zalando (Германия), часто говорили о необходимости масштабирования изображений для изучения материалов и тканей. Для некоторых отсутствие возможности "пощупать" материал стало причиной отказа от покупки.

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

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

В частности, тестирование выявило 2 ключевые проблемы, которые касаются качества изображений:

  1. Изображения невозмо
  2. жно приблизить достаточно сильно (по крайней мере, на 50%), чтобы рассмотреть детали.
  3. Изображения имеют низкое разрешение

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

👍🏻"Мне нравится автоматический зум. Я могу рассмотреть все детали". Этот пользователь сайта Farer высоко оценил уровень визуальной детализации при масштабировании изображения.
👍🏻"Очень приятно, что можно увидеть вещь вблизи... рассмотреть материал, да. Это на самом деле хорошо". Аналогичным образом, пользователь скандинавского сайта Miinto оценил функцию приближения изображения, которая позволяет рассмотреть ткань, из которой изготовлено платье.

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

Тем не менее, по нашим данным, владельцы 72% сайтов не заботятся о том, чтобы изображения товаров имели достаточно высокое разрешение и должным образом масштабировались.

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

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

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

Поэтому важно следовать нашим рекомендациям:

  • Предоставлять достаточно информации о размерах (94% не предоставляют)
  • Объединять разновидности товара в один элемент списка (20% не делают этого)
  • Использовать для каждого доступного размера отдельную кнопку (63% не используют)
  • Показывать, как вещи выглядят на моделях (75% не делают этого)
  • Позаботиться о том, чтобы изображения товаров, имели надлежащее разрешение и хорошо масштабировались (72% не делают этого)
Источник:
Baymard Institute
arrow