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

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

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

116

гайдлайнов

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

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

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

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

Автор hardclient.com

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

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

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

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

16 гайдлайнов

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

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

Пример • Lamoda

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

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

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

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

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

Пример • Sokolov

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

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

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

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

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

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

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

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

Пример • Wildberries

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

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

Пример • Lamoda

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

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

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

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

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

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

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

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

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

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

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

Пример • Shop

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

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

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

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

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

Пример • Lamoda

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

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

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

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

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

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

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

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

Пример • Onliner

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

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

15 гайдлайнов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Hoff

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Sokolov

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

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

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

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

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

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

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

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

Пример • Shop

Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

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

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

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

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

13 гайдлайнов

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

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

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

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

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

Пример • Lamoda

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Joom

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

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

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

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

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

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

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

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

Пример • Kari

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

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

Пример • Poison Drop

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

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

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

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

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

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

To be continued...

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

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

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

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

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