I am ready for a long road flight for work with a week- or months-long projects.

Оценка клиентского опыта

E-commerce

Приложения

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

Проектируем сортировку листинга в приложении

Лучшие практики UX/UI в мобильном e-commerce

116

гайдлайнов

Сортировка листинга – одна из важных функций в e-com приложениях, позволяющая наряду с фильтрами упростить поиск нужных нам товаров.

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

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

Станислав Хрусталёв

Автор hardclient.com

Структура статьи

Чтобы облегчить восприятие, статью я разбил на смысловые блоки в соответствии с этапами клиентского пути и функциональными элементами:

Размещение кнопки сортировки
Внешний вид кнопки
Сортировка по умолчанию
Появление карточки сортировки
Внешний вид карточки
Типы сортировки
Активация сортировки
Закрытие карточки

Размещение кнопки сортировки

16 гайдлайнов

В верхней правой части

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

Пример ● Lamoda

В верхней левой части

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

Пример ● ВкусВилл

В верхней центральной части

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

Пример ● Sokolov

В нижней части экрана

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

Пример ● Сбермаркет

Рядом с фильтрами

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

Пример ● Самокат

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

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

Пример ● Wildberries

Скрытие сразу при прокрутке

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

Пример ● Lamoda

Скрытие при определенной прокрутке

Вариация предыдущей механики – скрывать кнопки по мере прокрутки, спустя Х пикселей. Смотрится также неплохо.

Пример ● М.Видео

Анимация движения при скрытии

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

Пример ● Магнит

Анимация выцветания при скрытии

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

Пример ● Азбука Вкуса

Анимация движения и выцветания при скрытии

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

Пример ● Shop

Скорость анимации фиксирована

Часто можно встретить пропадание и появление панели с фиксированной скоростью анимации.

Пример ● М.Видео

Скорость анимации зависит от скролла

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

Пример ● Lamoda

Сортировка спрятана в фильтры?

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

Антипример ● METRO

Сортировка видна на первом экране фильтров

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

Антипример ● Юла

Highlight комбинации в кнопке

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

Пример ● Onliner

40+ статей по customer journey в e-commerce на моем канале в Telegram. Бесплатно. Без пэйволлов и продажи курсов.

Внешний вид кнопки

15 гайдлайнов

Содержит иконку

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

Пример ● еАптека

Иконка релевантна

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

Пример ● Спортмастер

Иконка общепринятая

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

Антипример ● Азбука Вкуса

Иконка сортировки vs. фильтров

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

Антипример ● Zolla

Иконка консистентна

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

Антипример ● Азбука Вкуса

Иконка визуально вторична

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

Пример ● Hoff

Иконка направлена корректно

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

Антипример ● Столплит

Содержит текст текущего варианта

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

Антипример ● Циан

Текст не обрезается

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

Антипример ● Л'Этуаль

Из текста понятна суть функции

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

Антипример ● Ozon

Из текста понятно направление сортировки

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

Пример ● Впрок

Текст сопровождается стрелкой или шевроном

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

Пример ● Sokolov

Текст текущего варианта первичен

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

Антипример ● Sello

Текст варианта vs. сортировки

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

Антипример ● Петрович

Реакция на касание

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

Пример ● Shop

Сортировка по умолчанию

5 гайдлайнов

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

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

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

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

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

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

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

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

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

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

Появление карточки сортировки

10 гайдлайнов

Анимация появления

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

Пример ● Золотой

Затемнение фона

Фоновый экран при появлении карточки лучше затемнять, тем самым смещая на нее визуальный акцент и внимание пользователя.

Пример ● Rendez-Vous

Размытие фона?

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

Пример ● Kaspi.kz

Осветление фона?

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

Пример ● Эконика

Затемнение всего фона

Чего точно делать не стоит – это затемнять фоновый экран лишь частично: области, которые не были затемнены, будут размывать фокус внимания.

Антипример ● Kaspi.kz

Затемнение плавное

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

Антипример ● Sello

Анимация синхронная

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

Антипример ● Fix Price

Затухание анимации

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

Пример ● М.Видео

Тактильная обратная связь

Окончание анимации можно сопроводить ненавязчивой краткой вибрацией (haptic feedback), подсвечивая, что карточка как бы ударяется о невидимый уровень.

Пример ● No One

Блокирование фонового экрана

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

Пример ● Ozon

Внешний вид карточки

35 гайдлайнов

Формат UIAlertController?

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

Пример ● Lamoda

Формат UIPickerView?

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

Антипример ● Ozon

Формат контекстного меню?

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

Пример ● Лента

Формат кастомной карточки

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

Пример ● Самокат

Карточка выделяется на фоне

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

Антипример ● Sela

Края карточки скруглены

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

Антипример ● Снежная Королева

Без необходимости прокрутки

Спроектируйте карточку так, чтобы все варианты сортировки были видны одномоментно. Формат UIPickerView в этом как раз подводит.

Антипример ● Ozon

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

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

Антипример ● Мегамаркет

Без лишней прокрутки

И наоборот: если контент карточки полностью помещается на экран, добавлять в нее скролл не имеет никакого смысла.

Антипример ● Hoff

Загрузка без задержек

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

Антипример ● AliExpress

Заголовок добавлен

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

Антипример ● Hoff

Заголовок отталкивается от целевого действия

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

Пример ● Shop

Варианты отсортированы

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

Пример ● Sunlight

Варианты разделены отступами

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

Пример ● Спортмастер

Варианты разделены линиями

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

Пример ● ЦУМ

Варианты в виде кнопок

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

Пример ● Shop

Варианты недвусмысленны

Текст вариантов не должен оставлять у клиента вопросов. Что есть выгода, в примере непонятно: абсолютная это или % скидка, соотношение цена/качество или что-то другое?

Антипример ● Wildberries

Варианты без сокращений

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

Антипример ● Wildberries

Варианты без ошибок

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

Антипример ● КРАВТ

Варианты в едином регистре

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

Антипример ● Яндекс.Маркет

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

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

Антипример ● AliExpress

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

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

Антипример ● Азбука Вкуса

Направленность сортировки понятна

Из текста варианта должно быть понятно, в какую именно сторону будет направлена сортировка. По популярности – понятно. А вот по стоимости? Уже неочевидно.

Антипример ● Юла

Пояснения добавлены

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

Пример ● М.Видео

Пояснения понятны

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

Антипример ● Sello

Пояснения визуально вторичны

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

Пример ● Ситилинк

Текущий вариант выделяется на фоне остальных

Базовый момент: в карточке лучше подсветить, какой именно вариант сортировки применен сейчас. У большинства приложений с этим пунктов всё ОК, но есть и исключения.

Антипример ● Sela

Текущий вариант выделен галочкой

Достаточно часто текущий вариант сортировки снабжают интуитивно понятной галочкой.

Пример ● Циан

Текущий вариант выделен radiobutton'ом

Не менее редко встречается и выделение текущего варианта сортировки с помощью radiobutton'а.

Пример ● Яндекс.Еда

Текущий вариант выделен не чекбоксом

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

Антипример ● Четыре Лапы

Текущий вариант выделен заливкой

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

Пример ● Shop

Текущий вариант выделен жирным

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

Пример ● Спортмастер

Текущий вариант выделен качественно

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

Антипример ● М.Видео

Текущий вариант выделен заметно

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

Антипример ● Stockmann

Текущий вариант активен

Если текущий вариант сделать неактивным, это может вызвать вопросы («так это текущий вариант или я по какой-то причине просто не могу его выбрать?»).

Антипример ● Lamoda

Типы сортировки

11 гайдлайнов

По популярности

Наиболее часто встречаемая сортировка – по популярности (кстати, что именно стоит за словом «популярность» – заказы / просмотры / что-то прочее – также важно пояснять).

Пример ● Сбермаркет

По возрастанию цены

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

Пример ● FixPrice

По убыванию цены

Обратный вариант: когда интересны более дорогие товары в категории. Относится не только к люксу, но и, например, к сфере подарков («какой у вас самый дорогой букет?»).

Пример ● ЦУМ

По цене за единицу

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

Пример ● Циан

По размеру скидки

Если выгода – важный фактор для ваших клиентов, а скидки – один из основных методов привлечения внимания, размер скидки можно вынести в качестве варианта сортировки.

Пример ● Детский мир

По рейтингу

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

Пример ● Мегамаркет

По количеству отзывов

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

Пример ● Яндекс.Маркет

По новизне

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

Пример ● Рив Гош

По алфавиту?

Мое мнение таково, что если клиент хочет найти товар по названию, ему нужен поиск, а не сортировка. Если считаете, что сортировка по алфавиту полезна, жду вас в комментах.

Пример ● Петрович

По специфическим параметрам

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

Пример ● Auto.ru

Направленность сортировки обоснована

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

Антипример ● Снежная Королева

Активация сортировки

10 гайдлайнов

Активная область ячейки

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

Пример ● Эконика

Реакция на касание

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

Пример ● No One

Активация в одно касание

Реализуйте возможность активации сортировки в одно касание: не заставляйте пользователя совершать дополнительные действия.

Антипример ● Комус

Реакция моментальна

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

Пример ● Befree

Индикация ожидания

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

Пример ● М.Видео

Возврат к нулевому уровню скролла

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

Антипример ● Ozon

Без обновления при тапе по активному варианту

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

Антипример ● Ситилинк

Обновление кнопки сортировки

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

Пример ● Яндекс.Маркет

Highlight выбранной сортировки

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

Пример ● Детский мир

Тактильная обратная связь

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

Пример ● Leroy Merlin

40+ статей по customer journey в e-commerce на моем канале в Telegram. Бесплатно. Без пэйволлов и продажи курсов.

Закрытие карточки

13 гайдлайнов

При выборе варианта сортировки

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

Пример ● Дикси

При тапе по кнопке отмены

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

Пример ● Lamoda

Кнопка отмены не первична

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

Антипример ● Магнит

Кнопка отмены удобно расположена

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

Пример ● Майшоп

Кнопка отмены – крестиком

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

Антипример ● Дром Авто

При тапе по фону

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

Пример ● Все Инструменты

При смахивании вниз

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

Пример ● Joom

Highlight возможности смахивания

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

Пример ● Детский мир

Жест vs. движение карточки

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

Антипример ● Спортмастер

Синхронизация анимации

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

Пример ● Kari

От скролла к закрытию

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

Пример ● Poison Drop

Анимация закрытия при тапе

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

Пример ● Рив Гош

Анимация закрытия после свайпа

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

Антипример ● Спортмастер

To be continued...

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

Надеюсь, этот материал поможет вам прокачать насмотренность, а кому-то из вас – еще и поправить недочёты, сделав сортировку листинга товаров лучше.

Следующие материалы будут с таким же высоким уровнем детализации. Продолжаем создавать крупнейшую базу знаний по UX/UI в e-commerce.

Если было полезно, буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!

Все статьи по e-commerce