Котаны, продолжаем шатать интерфейс Альфы.

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

В комментах дорогие читатели справедливо возмутились: “ЛЁХА А ЧЕГО ТЫ ПРО ГЛАВНЫЙ ЭКРАН НЕ ГОВОРИШЬ ТАМ ЖЕ ЦЕЛАЯ КОРОВЬЯ ЛЕПЁШКА ЛЕЖИТ” - и указали на то, как выглядит само приглашение оформить ипотеку.

Посмотрим же на эту красоту еще раз:

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

Начать с того, что некоторые дизайнеры (да и не только) свято уверены, что пользователи воспринимают интерфейсы так:

1. Пользователь видит интерфейс.
2. Пользователь совершает при помощи интерфейса Предусмотренное Полезное Действие.
3. Пользователь уходит довольный.
4. Дизайнер великолепен.

В жизни все устроено, мягко говоря, по-другому:

1. Пользователь видит интерфейс, нарисованный дизайнером
2. Мозг пользователя накладывает видимый интерфейс на свое представление о цифровых продуктах и мире вокруг и сохраняет в сознании глубоко личное, субъективное восприятие интерфейса - его модель (причем модель эта может не иметь ничего общего ни с реальными картинками, ни с замыслом дизайнера)
3. Пользователь на основании модели в своей голове пытается принять нужное для себя решение.
4. Пользователь тыкает в интерфейс и смотрит, что происходит дальше. Если все идет по плану и соответствует ожиданиям - все хорошо, сложился UX. Если все идет не по плану - все плохо, сложился хуикс.
5. Великолепен дизайнер или нет - зависит от того, как успешно мозг пользователя собрал представление об интерфейсе и использовал это представление в принятии решения.

“ЁБА, - культурно заметят мои постоянные читатели, - ДА ЭТО ЖЕ МЕНТАЛЬНАЯ МОДЕЛЬ В ДЕЙСТВИИ”. И, да, это оно самае: как я уже неоднократно писал, весь UX-дизайн основан на ментальных моделях, то есть на субъективном представлении пользователя об интерфейсе у себя в голове. Красивые картинки сами по себе мало кому нужны - важно впечатление от них.

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

Максимальной ценностью для пользователя обладает, само собой, блок МОИ ПОЖИТКИ, и интерфейс этому хорошо способствует: во-первых, там реально перечислены все мои счета, а во-вторых - эта область обрамлена кнопкой “Все мои продукты” (какбэ намекая тем самым, что выше - тоже мои продукты, просто не все) и плашкой с именем (которая подчеркивает лишний раз, что тут все собрано про мою пользовательскую честь).

А вот дальше начинается настоящая неприкрытая жопа, потому что в эту тонкую, трогательно выстроенную ментальную благодать кабанчиком врывается блок с ипотекой, который к МОИМ ПОЖИТКАМ не имеет никакого отношения, ведь у меня в Альфе нет ни ипотеки, ни одобренного оффера для нее. Это все рекламный надувной пузырь, не имеющий ко мне отношения. Полюбуйтесь еще раз на эту воображаемую поганую овцу, затесавшуюся в мое реальное финансовое стадо:

Вы спросите - А КАК ТАКОЕ РЕШЕНИЕ МОГЛО ВОЗНИКНУТЬ?

А вот как. Обычно такие штуки возникают двумя путями.

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

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

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

Не, я не собираюсь сейчас заламывать руки и причитать “О БИЗНЕС КАКОЙ ТЫ КОВАРНЫЙ БИЗНЕС ВСЕ БЫ ТЕБЕ ДЕНЬГИ ЗАРАБАТЫВАТЬ”, да и ипотека от Альфы, конечно, не лохотрон, - но хочу поговорить с вами о доверии: если пользователь будет понимать, что в его личную, практически интимную область кажет свое свиное рыло что-то чужеродно-рекламное, то его ментальная модель будет разваливаться, границы безопасного - нарушаться, стресс - копиться, и весь этот интерфейсный блок будет работать через пень-колоду. Тактический выигрыш вы, возможно, получите, но стратегически доверие подорвете: как правило, подобные UX-мелочи имеют ядовитое свойство накапливаться и отражаться на метриках только в долгосрочной перспективе (что, кстати, дает вам возможность порассуждать об этике быстрой рубки бабла без оглядки на последствия).

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

Некоторые команды воспринимают свой интерфейс не как средство для создания правильного восприятия продукта (и UX), а как квадратно-гнездовой ящик, КУДА НАДО ВСЕ УТРАМБОВАТЬ ПО КРАСНОГЛАЗОМУ СТРУКТУРНОМУ ПРИЗНАКУ. И не важно, что пользователи ожидают увидеть в конкретном списке свое личное добро - В СПИСКЕ ПОЛОЖЕНО ВЫВОДИТЬ СЧЕТА? ВЫВОДИМ СЧЕТА ПУСТЬ ДАЖЕ И РЕКЛАМИРУЕМЫЕ.

И это тоже херовый вариант, который показывает, что команда не пытается осмыслить то, что творится в головах у несчастных пользователей - а просто вкорячивает свое дубовое, квадратно-гнездовое представление о прекрасном. Зато КОМАНДЕ ПОНЯТНО И СТРУКТУРЕ ИНТЕРФЕЙСА НЕ ПРОТИВОРЕЧИТ.

Такое тоже бывает, особенно в технически сложных продуктах.

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

Что с Альфой:

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

Решение это, на мой скромный взгляд, работает только на полшишки: визуально-то они свою ипотеку выделили, но при этом никак не обозначили, что это не живые деньги, а насквозь гипотетическое фуфло. В результате мы получаем конструкцию, которая банально мешает мне составить представление о суммарном состоянии своих счетов - фантомные ШЕСТЬ МИЛЛИОНОВ ДЕВЯТЬСОТ ТЫСЯЧ слишком похожи на мои деньги и слишком лезут в глаза. Да, я могу закрыть крестиком этот “рекламный” счет (хотя и тут можно придраться к логике процесса), но осадок все равно остается - я постепенно перестаю верить тому, что вижу.

И корень зла лежит здесь не в том, что в персональный блок вкорячили рекламу (ЗЛОЙ БИЗНЕС УХОДИ) - но в том, что эта реклама пытается втереться ко мне в доверие и притвориться чем-то моим собственным, чем она ни разу, заведомо не является. И это получается не здоровая мимикрия, на которой держится чуть ли не весь продуктовый дизайн, но практически прямой обман.

Шо делать:

Чтобы адекватно решить эту проблему, достаточно просто перестроить рекламный блок с ипотекой так, чтобы он не сливался с остальными счетами и имел более нематериальный вид. Даже контент блока может быть ровно таким же - “6 900 000 ₽” + инфа о том, что это предложение по ипотеке - но он ни в коем случае не должен иметь вид живого счета с настоящими деньгами, иначе одно от другого не отделить.

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

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

#бисквитныйдвор

А теперь бонус-трек!

Как вы знаете, я люто ненавижу рекламу (и ее в Хуиксе не будет, покуда я в своем уме), но обожаю разные коллабы не ради бабла, но ради фана. И вчера вечером меня позвали в интересный UX-коллаб, который приурочен к запуску в Телеге функционала с шаренными папками.

Коллаб такой, зацените: 18 жирных каналов, связанных с дизайном, UX и UX-редактурой (включая вашего покорного матерящегося слугу), объединились в одну папку - и теперь вы можете подписаться на эти каналы одним чохом и преисполниться разнообразной мудрости (в дремучих 90х так покупали спутниковую тарелку и пакет каналов “НТВ+” с футболом и каналом для взрослых). При этом вы можете выбрать отдельные каналы, которые хотите читать - никто вас никуда насильно не втащит, что хорошо.

‼️ Что суперважно, в папке нет говноканалов с телеграм-срамотой. Я проверял. Большую часть ребят я знаю лично (начиная с удивительно вдумчивого Кости Ефимова, который ведет PostPostResearch, или на вид сурового, но очень доброго Миши Хана из UX Horn, чудесной Илоны Саркисовой из Поясни за UX - и заканчивая каналом-побратимом “uxuiтельные истории”), а на остальную часть и сам подписался, они прикольные.

Ссылка на папку вот: https://t.iss.one/addlist/Qmbu_AeYXegxOTgy - приятного аппетита, здоровья, счастья, дом полная чаша.

P.S. Если ссылка не пашет - обновите Телегу, функционал совсем новый, с иголочки.

P.P.S. Если вы уже подписаны на остальные 17 жирных UX-каналов, будьте готовы сегодня к потоку постов про этот список. Ну, коллаб и есть коллаб, что уж тут.

#хуинтернационал

Посадили как-то двух продуктовых дизайнеров в тюрьму на 25 лет. Они отсидели весь срок в одной камере, вышли на волю, поспорили еще минут 40 про скругления и разошлись.

Летят года, встают и рушатся империи, переизбираются (даже) президенты, а дизайнеры продолжают сраться про две темы: про СКРУГЛЕНИЯ и про НЕВИДИМЫЕ КНОПКИ. И если про скругления мы лучше поговорим как-нибудь потом, то про невидимые кнопки мы поговорим прямо сейчас. Будет много объяснений и картинок, пристёгивайтесь.

Любой дизайнер рано или поздно натыкается на следующую задачу:

1. У нас есть пользователь.
2. У пользователя есть кнопка.
3. Дано: в конкретной ситуации нажатие на кнопку ни к чему хорошему не приведет.
4. ЕБИТЕС Сделайте из этого хороший UX/UI, ну.

Дальше своих коней седлают три дизайнерских группировки.

Первые — это Паладины Квадратно-Гнездового Ордена. Эти товарищи считают, что пользователям важна ФУНКЦИОНАЛЬНАЯ НАГЛЯДНОСТЬ продукта, а потому пусть пользователь всласть долбится в свою кнопку — и получает сообщение об ошибке. “НАГЛЯДНОСТЬ ПОВЕДЕНИЯ СИСТЕМЫ СПОСОБСТВУЕТ ПОСТРОЕНИЮ МЕНТАЛЬНОЙ МОДЕЛИ А ПОТОМУ ВАЖНЕЕ ПОТЕРЯННОГО ВРЕМЕНИ, — поучают паладины, — А ПОТОМУ ПУСТЬ ПОЛЬЗОВАТЕЛЬ ОБУЧАЕТСЯ СТРАДАЮЧИ”.

Паладинам противостоят их худшие враги — Клан Невидимых Ниндзя. “НЕФИГ ДАВАТЬ ПОЛЬЗОВАТЕЛЮ ТО ЧТО НЕ ПРИНЕСЕТ ЕМУ ПОЛЬЗУ, — шипят они, — СКРЫВАЙТЕ ВСЕ ЧТО НЕ ФУНКЦИОНАЛЬНО И ОСТАВЛЯЙТЕ ТОЛЬКО ТО ЧТО ФУНКЦИОНАЛЬНО”. Невидимые Ниндзя стоят на позиции, что давать пользователю заведомо нерабочие кнопки — значит сознательно отправлять его в тупик, что больше похоже не на продуктовый дизайн, а на художественную импотенцию на грани с садизмом. Такова их правда.

Между Паладинами и Ниндзя затесалась третья группировка — Сыны и Дщери Дизейбла. Они повторяют свою монотонную мантру: “ЯКОЖЕ ПОЛЬЗОВАТЕЛЮ ЯВЛЕНА КНОПКА КОЕЮ ОН ВЖАТЬ НЕ МОЖЕТ ТО БЫСТЬ ТОЙ КНОПКЕ ВИДИМОЮ НО НЕАКТИВНОЮ (СИРЕЧЬ СЕРОЮ)”

Группировки эти непримиримы, и на их срачи просто любо-дорого смотреть (особенно когда адепты противоположных культур попадают в одну дизайн-систему). ВЫ ПРЕВРАЩАЕТЕ ИНТЕРФЕЙС В МИННОЕ ПОЛЕ, — гремят паладины. ВЫ ОКРУЖАЕТЕ ПОЛЬЗОВАТЕЛЯ МОРЕМ БЕСПОЛЕЗНОГО ГОВНА, — не сдаются предприимчивые ниндзя. НЕ СКРЫВАТИ НО И НЕ НАЖИМАТИ, — гундосят сыны и дщери, — А ПОСЕМУ КНОПКЕ БЫСТЬ НЕАКТИВНОЮ. В воздух летят предметы, референсы, макеты и отборные маты.

“ЛЁХА, — скажете вы, — А ТЫ ТО САМ ЗА КОГО?

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

Свою позицию я назвал К.А.Б.А.Н.Ч.И.К.* Давайте разберемся с картинками, как это работает.

*Комплекс Альтернативных Базовых Алгоритмов, Нацеленных на Частные Индивидуальные Кейсы. Специально для вас придумал, чтобы звучать как солидный бизнес-коуч в отвратительном галстуке.

К.А.Б.А.Н.Ч.И.К. говорит нам простую штуку: в UX нет и быть не может жёстких правил, и мы в любом случае должны сперва понять, чего же мы хотим донести до пользователя.

Вариантов может быть несколько — и ради веселья каждый из них мы проиллюстрируем скринами одного и того же Notion (к которому, согласитесь, в плане UX редко когда подкопаешься).

Вариант номер раз — «Дефолтовый». Мы хотим оградить пользователя от лишней информации, которая ему в моменте ничего не даст — и, в обратку, с которой он быстро разберётся при удобном случае. Смотрим на Ноушен и на поведение крестика в строке поиска:

Тут все просто: есть запрос — есть мультики есть кнопка для его удаления. Нет запроса — и нефиг пользователю голову морочить, все и так понятно.

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

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

Важно помнить, что при таком заходе пользователю будет сложнее составить ментальную модель интерфейса (то бишь запомнить, где что лежит), поэтому вариант подойдёт для скрытия Особо Важных и Особо Удобных Элементов, появление которых пользователь никак не пропустит — и при этом будет прекрасно понимать условия их возникновения.

Вариант номер три - «Шик-Шарман». Мы хотим приучить пользователя, где находится нужная кнопка — но при этом не хотим тратить его драгоценное время на бесцельные нажатия.

Штош, прекрасно, вот вам два примера с неактивными кнопками. Что мы делаем: дизейблим кнопку (или чо у вас там), бахаем рядом объяснение, почему кнопка не фурычит:

Заметьте, что Ноушн справляется с задачей объяснения неактивности кнопок двумя способами: или заставляет читать тултип при наведении(криво работающий, надо сказать), или призывает ориентироваться на шильдик БУЗИНЕСС (типа, нищеброд, не входи, это не про тебя). Решения не безупречные — но вполне работают.

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

Ловите пример: