Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день

СОРТИРОВКА ЛИСТИНГА ТОВАРОВ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
64
ГАЙДЛАЙНА
Сортировка – мощная функция, вместе с фильтрами помогающая клиенту легче найти то, что он искал. При этом ей часто отводится «роль второго плана» и уделяется меньше внимания. Отсюда и множество кейсов с плохо проработанной сортировкой даже у топовых магазинов. Но есть и крутые примеры. Как всегда, учимся на чужих ошибках, изучаем хорошие идеи и применяем у себя.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.

1. ОБЩИЕ РЕКОМЕНДАЦИИ

Функционал доступен

Сортировка ускоряет процесс выбора товаров. Поэтому грех ее не использовать (как на десктопах, так и в мобильной версии), особенно если спектр товаров в листинге широкий.
hardclient

Элемент обособлен

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

Привычное расположение

Не изобретайте колесо: разместите сортировку там, где клиент встречает ее в большинстве магазинов: в шапке над листингом (чаще – в правой части экрана).
hardclient

Фиксация при прокрутке

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

Не дублируется

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

2. ВАРИАНТЫ СОРТИРОВКИ

Основные варианты

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

Категорийные варианты

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

Не слишком много

Может возникнуть соблазн добавить в сортировку побольше параметров. Но это лишь усложнит выбор. Поэтому лучше ограничиться 2-3 ключевыми параметрами.

Взвешенный рейтинг

Какому рейтингу вы больше доверяете: 4.8 на основе 100 оценок или 5.0 на основе лишь одной? Сортируйте не просто по средней, а по взвешенной по числу отзывов оценке.

Без сортировки по алфавиту

Подумайте дважды, какая задача может подтолкнуть клиента к сортировке по алфавиту? Если он ищет по названию, ему легче воспользоваться строкой поиска, а не сортировкой.
hardclient
Используете сортировку по алфавиту? Насколько она популярна у клиентов?

Ограничение по направленности

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

Без конкурирующих вариантов

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

Без бесполезных вариантов

Базовый момент: сортировка должна происходить в принципе. Если по параметру нет данных или он у всех един, зачем отображать его в качестве варианта сортировки?

Сортировка vs. бинарные значения

Иногда встречается сортировка по наличию или бесплатной доставке. Такие фильтры лучше применять наряду с сортировкой по ключевым параметрам, а не в качестве ее вариантов.
hardclient

Все варианты понятны

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

Варианты видны, если их мало

Если вариантов мало и пространство позволяет, разместите их в ряд, чтобы они все были видны. Это позволит сортировать в 1 клик (по сравнению с 2 в случае с dropdown’ом).
hardclient

Dropdown, если много вариантов

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

Реакция на наведение

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

Подсказки не дублируют варианты

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

Если подсказки есть, они релевантны

Если вы и используете подсказки для вариантов (хотя они не должны вызывать вопросов), разместите в них какую-либо ценную информацию. Вот так лучше не делать:
hardclient

3. СОРТИРОВКА ПО УМОЛЧАНИЮ

Не по увеличению цены

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

Не по алфавиту

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

Не по рейтингу

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

Не просто по популярности

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

Лучше подсветить разнообразие

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

Нейминг

Вместо не информативного «по умолчанию» можно придумать что-то более осмысленное (например, «рекомендуем») или живое и необычное, как в Яндекс.Еде:
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

4. ВЫПАДАЮЩИЙ СПИСОК

Открывается при клике

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

Кликабельна вся область

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

Dropdown анимирован

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

Dropdown в дизайне сайта

Реализуйте dropdown в кастомном формате так, чтобы он соответствовал общему дизайну сайта. Особенно если другие раскрывающиеся списки кастомизированы.

Список без прокрутки

Если для сортировки используется выпадающий список, не заставляйте клиента его ещё и прокручивать.

Варианты доступны в 1 клик

Сделайте все варианты в dropdown'е доступными в 1 клик. В примере для просмотра сначала более дешевых товаров клиенту требуется целых 4 клика.

Список пропадает при скролле

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

Варианты не в виде чекбоксов

Формат чекбокса вызывает у большинства ассоциацию с множественным выбором. Так как сортировка чаще всего доступна только по 1 параметру, лучше чекбоксы не использовать.
hardclient

Содержит вопрос

В списке можно разместить вопрос по типу «что показывать сначала?». Это добавит эффект диалога и позволит сократить текст самих вариантов.
hardclient

5. ИНДИКАТОР НАПРАВЛЕННОСТИ

Рядом с вариантом

Разместите индикатор направленности рядом с вариантом сортировки. Чтобы эти объекты лучше воспринимались, как взаимосвязанные.
hardclient

Привычен для клиента

Сделайте индикатор направленности привычным и понятным для клиента – таким, каким он его встречает в листингах большинства магазинов: в виде стрелки или bar chart’а.
hardclient

Визуально не двусмысленный

И наоборот, если вы выберете элемент, который ассоциируется с другими объектами, реакция может стать для клиента неожиданной. Например, шеврон (из dropdown'ов):
hardclient

Смена направленности при клике

Там, где обратная сортировка подразумевается, реализуйте ее при клике по индикатору текущей направленности: это распространённый паттерн поведения.

Индикатор обновляется

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

Индикатор текущей сортировки

Если клиент выбирает сортировку по варианту, по нему должна отображаться именно текущая направленность, а не та, которая будет доступна при следующем клике.
hardclient

Контекстная подсказка

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

Стрелки не нужны? Не рисуем

Если сортировка однонаправленная, не стоит снабжать элемент двойными стрелками. Это лишь введёт клиента в заблуждение.
hardclient

Односторонняя? Не кликабельна

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

Без индикатора направленности

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

6. ПРОЧИЕ МОМЕНТЫ ПО ОФОРМЛЕНИЮ

Иконка

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

Ничего не пикселит

Как и во всех предыдущих статьях, рубрика «Ничего не пикселит»: сортировки это тоже касается. Анти-примеры, как понимаете, и здесь найдутся:
hardclient

Без системной обводки

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

Текст сортировки

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

Текст и вариант согласованы

Текст сортировки и варианты должны быть согласованы друг с другом. А от такого исполнения лучше воздержаться:
hardclient

Текст сортировки выровнен

Базовый момент: если вы добавляете текст «Сортировать» к вариантам, удосужьтесь выровнять их относительно друг друга. Иначе смотреться будет не очень:
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

7. ПРИМЕНЕНИЕ СОРТИРОВКИ

Без кнопки сортировки

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

Область обновления страницы

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

Скорость обновления

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

Сортировка на уровне front-end

Чтобы ускорить сортировку и улучшить usability, по возможности производите ее на уровне front-end, избегая лишних запросов к серверу.

Сортировка без багов

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

Когда прокручивать в начало?

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