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

Как спорный UI-паттерн увеличивает прибыль, но снижает доверие

Недавно в своём тг-канале я разместил пост о том, что в мобильном приложении Авито в сценарии создания объявления содержится неочевидное решение, которое противоречит ментальной модели пользователя и фактически является дарк-паттерном.

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

1. Термины и семантика элементов (с примерами)

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

Если же рассматривать круглый чекмарк с подложкой (как в нашем случае), то называется он Selection Indicator (одиночный выбор) или Selection Badge (множественный выбор). Не смотря на то, что выглядят они одинаково, их поведение является принципиально различным и взаимоисключающим.

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

Если говорить о Selection Badge, то он используется в множественном выборе (MultiSelect), а повторное нажатие на элемент позволяет снять отметку.

Резюмируя вышесказанное, мы приходим к ключевому паттерну, отличающим один элемент от другого:

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

2. Чекмарк в одежде радиокнопки

Внутри продукта Авито есть сценарии, где круглый чекмарк ведет себя именно как радиокнопка (в случаях одиночного выбора). Но при этом в другом сценарии, где подразумевается одиночный выбор, позволяет отжать селектор. То есть мы имеем разночтения в рамках одной дизайн-системы. Именно это поведение компонента является для пользователя неочевидным. Высок шанс того, что пользователь скорее выберет тариф дешевле, чем догадается отключить селектор (метрики полетели вверх).

3. Как это исправить

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

4. Заключение

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

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