Улучшаем UX в вашем интернет-магазине: фильтры и карточка товара

Перевод и адаптация материала: Baymard Institute

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

В данной статье мы рассмотрим исследования на две темы, которые будут актуальны при разработке интернет-магазина:

Почему стоит избегать всплывающих окон в карточке товара? (Мобильный UX)

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

Однако бывает и обратная сторона в применении подобного решения — когда большое количество контента пугает пользователей: «Здесь так много всего… Я не могу найти то, что ищу».

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

UX Design

Newegg

Тем не менее, такое решение привело к двум проблемам. Первая связана с тем, что часть пользователей пропустила ссылку на подстраницу. И это оставило у них очень плохое восприятие от карточки товара, так как они думали, что единственным доступным контентом был контент на «основной» странице.

Кроме того, многие проекты реализовали эту функцию только в мобильной версии. Потому пользователи, которые пользуются и десктопной версией сайта, не ожидали встретить в мобильной дополнительный функционал. Тем временем, отсутствие подстраниц на десктопной версии объясняется негласным соглашением «1 продукт = 1 страница сведений о продукте», которое существует в отрасли более двух десятилетий.

UX Design

Adidas

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

UX Design

Staples

Альтернативным решением подстраницам могут стать «вертикально свернутые разделы» (разворачивающиеся блоки). Преимущества данного способа:

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

UX Design

Under Armour

Тем не менее, важно учитывать две ключевые детали реализации «вертикально свернутых разделов»:

  • Основные разделы страницы продукта должны располагаться в строго заданном порядке: например, описание товара, отзывы пользователей, вопросы и ответы, информация о доставке, технические характеристики и т.д. Вторичный контент при этом не обязательно должен следовать тому же шаблону (перекрестные продажи, реклама, промо-акции и др). Так вы помогаете своим пользователям быстро усвоить структуру карточки товара.
  • Заголовки разделов должны быть информативными и легко интерпретируемыми. В дополнение к названию будет полезно указывать количественные данные: например, «Отзывы (23)». Подразумевается, что если развернуть данный блок, там будет 23 отзыва.

Отображение примененных фильтров

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

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

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

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

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

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

Какие решения возможны для корректного отображение примененных фильтров на компьютерах?

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

  • обзор над списком продуктов;
  • обзор над боковой панелью фильтрации;
  • обзор под горизонтальной панелью инструментов фильтрации.

Кравт

Кравт

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

Фурнитоп

Фурнитоп

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

5 элемент

5 элемент

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

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

Мобильные решения для примененных фильтров

  • Обзор в списке с горизонтальной прокруткой.

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

UX Design

Macy’s

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

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

  • Обзор в виде сложенного списка.

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

Отображение типа фильтра

Белый — цвет, 35 см — высота, 250-300$ — цена. Вы можете добавить параметр фильтра для большей ясности, но при этом рекомендуется визуально отделить эту часть, так как она дополнительная и менее важная, чем само значение.

ОМА

ОМА

Для начала надо определить в целом, стоит ли использовать место для этих данных, так как если речь идет об одежде, например, то красный — цвет, а хлопок — материал, будут сами собой разумеющимися и не требуют разъяснений. И если при этом нет каких-то еще менее очевидных данных (размер / высота / ширина), то включать такой параметр нет смысла. Если вы выбираете такую реализацию, то использовать ее надо для всех фильтров, иначе пользователь просто запутается: почему «белый без объяснения», а «5-10 м» — это длина.

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

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

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