Перед началом повествования, хочу подчеркнуть, что пост не несёт никакой негативной оценки работы дизайн-команды Авито. Напротив - кейс разбирается исключительно с точки зрения улучшения пользовательского опыта.
Как спорный UI-паттерн увеличивает прибыль, но снижает доверие
Недавно в своём тг-канале я разместил пост о том, что в мобильном приложении Авито в сценарии создания объявления содержится неочевидное решение, которое противоречит ментальной модели пользователя и фактически является дарк-паттерном.
После публикации я получил волну критики от продуктовой команды о том, что я путаю чекмарк с радиокнопкой и мне следовало бы изучить паттерны ui-элементов лучше. Ниже я привожу подробный разбор данного случая и расскажу, почему профессиональная дискуссия важнее хейта.
1. Термины и семантика элементов (с примерами)
Чтобы разобраться в паттернах тех или иных элементов, мы будем опираться на их поведение в Human Interface Guidelines, так как разбираем приложение на Айфоне. Проштудировав библиотеку компонентов, мы узнаем, что в интерфейсе iOS чекмарком называется сам символ (иконка) и может использоваться как самостоятельный элемент, так и быть частью другого компонента.
Если же рассматривать круглый чекмарк с подложкой (как в нашем случае), то называется он Selection Indicator (одиночный выбор) или Selection Badge (множественный выбор). Не смотря на то, что выглядят они одинаково, их поведение является принципиально различным и взаимоисключающим.
Selection Indicator используется, когда необходимо выбрать один из вариантов. При нажатии на другой селектор предыдущий автоматически отключается. Повторное нажатие на элемент не позволяет его отключить. Фактически работает он по тому же принципу, что и радиокнопка.
Если говорить о Selection Badge, то он используется в множественном выборе (MultiSelect), а повторное нажатие на элемент позволяет снять отметку.
Резюмируя вышесказанное, мы приходим к ключевому паттерну, отличающим один элемент от другого:
Круглый чекмарк снимается повторным нажатием только в случаях множественного выбора (MultiSelect). В случаях, если он отменяет другой выбор и подразумевает один единственно возможный, то работает он аналогично радиокнопке.
2. Чекмарк в одежде радиокнопки
Внутри продукта Авито есть сценарии, где круглый чекмарк ведет себя именно как радиокнопка (в случаях одиночного выбора). Но при этом в другом сценарии, где подразумевается одиночный выбор, позволяет отжать селектор. То есть мы имеем разночтения в рамках одной дизайн-системы. Именно это поведение компонента является для пользователя неочевидным. Высок шанс того, что пользователь скорее выберет тариф дешевле, чем догадается отключить селектор (метрики полетели вверх).
3. Как это исправить
Самый простой способ - разместить третий селектор «Без преимуществ» (условно) с коротким текстом выгод, которые продавец упускает. Также стоит обратить внимание, что если кнопка «Продолжить» зафиксирована, то и текст с условиями стоит зафиксировать (чтобы избежать ситуации, при которой пользователь его не заметит и пропустит экран).
4. Заключение
Даже крупные продукты могут содержать ошибки и это абсолютно нормально в условиях огромного количества внутренних команд. Важно не скатываться в сухую критику. Хейт заставляет людей защищаться, а не исправлять ошибки. В то время, как профессиональный диалог делает продукты лучше, а специалистов — сильнее.
Еще больше разборов визуальных решений в интерфейсах у меня в телеграм-канале.
Комментарии (12)
MrSmitix
26.06.2025 06:59Я прекрасно понимаю и осознаю что habr
уже не тортне площадка для жалоб, но мне кажется у Авито есть куда более серьезные проблемы снижающие доверие к их платформе чем какие-то там спорные моменты в UI/UX. Ребята до сих пор не научились (или не хотят) блочить фейковые объявления в недвижке и всячески игнорируют любые жалобы на таковые. Приходится пользоваться расширениями вроде Ave Blacklist (очень рекомендую, it's amazing) что б превратить помойку в выдаче в что-то более менее юзабельное
radtie
26.06.2025 06:59А вы не думали, что это не ошибка, а осознанный дарк-паттерн?
Прошли те времена, когда интерфейсы делали удобными, сейчас их делают только в угоду повышения собственной прибыли (как например на маркетплейсах отсутствуют простейшие полезные фильтры в поиске или специально убитая сортировка по цене)
ika_sultanov Автор
26.06.2025 06:59Спасибо за комментарий! Изначально мой пост был именно об использовании дарк-паттерна в текущем сценарии приложения. После чего большое кол-во специалистов, кто так или иначе взаимодействует с дизайн-системами, сошлись на том, что здесь нет дарк-паттерна, а действие селектора является очевидным для пользователя. Именно поэтому я и решил порассуждать на эту тему в формате развёрнутой статьи.
kamunicorn
26.06.2025 06:59действие селектора является очевидным для пользователя
Для дизайнера может очевидно, а для реального пользователя нет. Такое утверждение желательно подтвердить исследованиями.
А мне вообще не нравится, когда галочку, которая ассоциируется с чекбоксом, засовывают в кружок, который ассоциируется с радиокнопкой.
ika_sultanov Автор
26.06.2025 06:59не нравится, когда галочку, которая ассоциируется с чекбоксом, засовывают в кружок, который ассоциируется с радиокнопкой
Согласен, иногда это вводит пользователя в ступор, как в нашем случае. Тем более, когда в разных частях интерфейса селектор работает по-разному. Что касается исследований - нам остается лишь предполагать, ссылаясь на привычные паттерны. Стоит сказать, что если те же A/B тесты показывают условные +15% прироста, решение часто запускают без глубинных исследований. В данном случае мотивом для пересмотра этого решения может стать, возможно, именно снижение уровня лояльности пользователей (NPS) или удержания (Retention). Но это все лишь мое видение и не более.
ika_sultanov Автор
26.06.2025 06:59Спасибо за комментарий!
Есть вероятность, что это неосознанный дарк-паттерн. Дискуссии с людьми в индустрии показала, что использование круглого чекмарка не такое очевидное, как кажется на первый взгляд. Именно поэтому я и решил порассуждать на эту тему в формате развёрнутой статьи.
Что касается удобства, я считаю, что сейчас любой маркетплейс предлагает удобств в разы больше, чем что-то аналогичное предлагало нам 8-10 лет назад. Любому бизнесу важна прибыль и это естественно, но есть граница между последовательным интерфейсом и решениями, которые неочевидны для пользователя. Я не придерживаюсь концепции хейтить крупные продукты, хотя это сейчас очень популярно. Не стоит забывать, что Авито - одна из сильнейших продуктовых команд в России
Vorchun
26.06.2025 06:59Вот вам пример от reg.ru
Как бы есть крестик, который отменяет выбор. А выбор они ставят всегда, хотя у меня этой услуги не было. Но его видно плохо.
Тут тоже хочется вариант "без услуг". Но надо продавать.
ika_sultanov Автор
26.06.2025 06:59Я понимаю, о чем вы, но статья выше немного о другом. Вопрос не в отсутствии пункта «Без услуг», а в том, что отключение тарифа неочевидно для пользователя. В вашем же примере все достаточно прозрачно: используется индикация, которая не подразумевает обязательный выбор +есть вполне конкретная и очевидная кнопка отключения (крестик).
Jeiwan10
26.06.2025 06:59У меня был небольшой ступор когда я в первый раз за долгое время публиковал объявление именно на этом месте. И пришлось тыкать все подряд чтобы добиться бесплатного размещения. Поэтому всё-таки это больше похоже на намеренное введение пользователя в заблуждение, сделанное достаточно качественно, чтобы не являться таковым
ika_sultanov Автор
26.06.2025 06:59Я и сам не сразу догадался, как отключить тариф. Все же склоняюсь к варианту, что у команды была мысль, чтобы тариф "Без скидки" включался через такой механизм отмены, просто подобрали не совсем верный способ индикации, который и заставляет работать все это довольно непривычным образом.
Tomasina
Там и на правом скриншоте кривой UI - голубой переключатель по сути выполняет ту же функцию "включить/выключить", но дизайн у него иной, чем у элементов ниже. Зачем на одном экране делать два типа элементов, которые визуально разные, но выполняют одинаковую функцию?
ika_sultanov Автор
Это не весь экран, вверху экрана есть возможность включения/выключения Авито доставки. То есть включение Авито доставки не обязует включать бесплатную доставку (скидку) для покупателей. Немного разные контексты переключателей.