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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему Ноушн не скрывает кнопку INVITE и оставляет ее доступной даже при незаполненной строке адреса?

У меня есть два соображения на этот счёт:

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

2. Нажатие на кнопку приводит не к окошку «КОГО ТЫ ИНВАЙТИШ СТЕРВА ТЫ ДАЖЕ НИКОГО НЕ ОТМЕТИЛ», но к довольно хитрой конструкции, в которой есть место и объяснению функции, и приглашению подсоединить слак, и чувства тупика не возникает.

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

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

1. Не будет ли лучше, если я эту кнопку просто скрою или задизейблю?

2. Какую историю я смогу рассказать, если пущу пользователя дальше?

Если у вас есть ответ на оба вопроса — поздравляю, вы поёте великолепно.

Главное — ориентируйтесь на пользователя.

Если же к вам придёт какой-нибудь чёрт и скажет «В ПРОДУКТЕ АБСОЛЮТНО ВСЕ КНОПКИ ДОЛЖНЫ СЕБЯ ВЕСТИ ОДИНАКОВО» — бейте черта, гоните его, и помните, что консистентность по-настоящему работает, когда она строится во имя пользователя, но не поперёк его интересов.

#изкрестьянскогобыта

Друзья, щас будет парадокс: мой бомбаж по суперкапитанской теме (наверное, самой капитанской за всю историю Хуикса).

Интересно? А вот вам для начала пара реальных историй.

История первая. Есть хороший дизайнер с руками (2 шт.), головой (1 шт.), неравнодушием (1 ведро) и всем таким. Не подкопаешься.

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

А дальше происходит вот что. На слайде №5, когда приходит пора рассказать про отрисованное решение, дизайнер уходит в обстоятельный, нуднейший рассказ про отступы, про ВОТ ТУТ БЫЛ КОМПОНЕНТ С ОТСТУПОМ 10 ПИКСЕЛЕЙ А ВОТ ТУТ БЫЛ КОМПОНЕНТ ТОЖЕ С ОТСТУПОМ 10 ПИКСЕЛЕЙ А ВОТ ТУТ НА ПЕРЕСЕЧЕНИИ КОМПОНЕНТОВ ПОЛУЧАЛОСЬ 20 ПИКСЕЛЕЙ И ВОТ МЫ СДЕЛАЛИ ОДИН КОМПОНЕНТ ЧТОБЫ БЫЛО 10 ПИКСЕЛЕЙ НО У НАС СРАЗУ НЕ ПОЛУЧИЛОСЬ ПОЭТОМУ МЫ ПОШЛИ К РАЗРАБОТКЕ А ОНИ НАМ ГОВОРЯТ ДЕЛАЙТЕ 20 ПИКСЕЛЕЙ НО МЫ СДЕЛАЛИ МЕГАКОМПОНЕНТ С ЕДИНЫМ ОТСТУПОМ 10 ПИКСЕЛЕЙ А ПОТОМ…

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

Что делает высокое руководство? Оно сперва засыпает, потом начинает беситься, потому что сон в его задачи не входит, потом понимает, что ничего изменить нельзя, влезает в подсчет пикселей, не на шутку увлекается, раздает ковровые ценные указания по мегакомпоненту, дизайнер начинает с ним спорить, время выходит, занавес. Руководство уходит с ощущением “НУ И ХЕРАБОРА”. Цель - рассказать руководству, что вот такая проблема решена, мы молодцы и вот что хотим делать дальше - не выполнена. И это фейл.

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

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

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

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

И что же нанимающее руководство? Оно выходит со встречи с ощущением, что ему показали крутые фичи, но забыли показать самого дизайнера. Цель - убедить нанимающее руководство, что перед ними классный, топовый дизайнер, который станет ценным добавлением в команду - не выполнена. И это тоже фейл.

Что объединяет эти истории? 2 вещи: их главными героями являются дизайнеры - и они вообще не понимают, кому они рассказывают свои презентации.

Дорогие мои, запомните очень простую, но проблемную штуку - в презентации важно учитывать не только то, что, как и зачем вы презентуете, но и отвечать на 2 вопроса:

1. Кому я презентую свое решение.
2. Как личность слушателя влияет на то, что, как и зачем я презентую.

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

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

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

#изкрестьянскогобыта

Вспомнилась мне одна поучительная история.

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

Заказчик нам попался, надо сказать, с выдумкой: он решил не просто сбацать сайт, но устроить из этого социалистическое соревнование по мотивам сказки «Царевна-лягушка» — позвал два агентства (включая нас) и наказал каждому сделать такой дизайн, что ни в сказке сказать, ни пером написать. И сказал: у кого дизайн лучше выйдет — тому тендер и пол-казана плова в придачу.

Сперва все шло как по маслу: мы по уши влезли в проектирование по методу персон (кстати, в следующий раз про него поговорим), отрисовали охапку CJM, то-се. Заказчик смотрел на это и радовался: мол, вы молодцы, не то что те другие гоблины, аж сердце пляшет. А мы и рады-радёхоньки.

Радовались мы ярко, но недолго: дальше произошла фатальная штука, которая прозвучит как анекдот — мы с треском, хрустом, кряканьем провалились на, смешно сказать, вайрфреймах.

Не, сперва-то все шло хорошо: мы с собратом-креативным директором разложили наши CJMы и прочие навигационные диаграммы, поплевали на руки и нарисовали в матушке-Акшуре (Фижмы тогда и в планах не было) черно-белые прототипы — условные и очень квадратные.

«НОРМАЛЬНО, — сказал один из нас, — НО ЧТО ТО ТЕРЯЕТСЯ ИДЕЯ ПРО ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ ДАВАЙ КА И ЕГО ПОКАЖЕМ И ЗАОДНО ОТРАЗИМ КАК МЕНЮ СБОКУ ДЕЛАЕТ ВЖИК ВЖИК»

Штош, можно! Поклонились мы матушке-Акшуре и сделали скролл да вжик-вжик.

«КАЙФОВО, — заключил кто-то из нас, — НО ЧТО ТО АКЦЕНТЫ ТЕРЯЮТСЯ ДАВАЙ КНОПКИ ПОКРАСИМ»

Можно и это! Сделали кнопки цветные и шрифты заодно подхомячили.

«И ТО ДЕЛО, — одобрили мы, — НО ЧТО ТО НЕ ЧУВСТВУЕТСЯ УПОР НА КОНТЕНТ ТО БИШЬ ЖИЗНИ НЕТУ»

И добавили мы фотки лепёшек, плова, довольных гостей — и, как гвоздь программы, фотографию Шуфутинского на страницу «Наши гости». В конце концов, кто как не улыбающийся дядя Миша сможет передать сытое ощущение после тарелки бараньего хаша?

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

И знаете, что было дальше? Дальше было слово, вернее, сразу несколько слов: «ЧТО ЭТО ПОЧЕМУ ОНО ТАКОЕ УРОДЛИВОЕ ПОЧЕМУ ОНО ТАК СТРАННО ДВИЖЕТСЯ И ЧТО ТУТ ЧЕРТ ВОЗЬМИ ДЕЛАЕТ ШУФУТИНСКИЙ ОН НЕ НАШ ГОСТЬ!!!»

Мы, конечно, пробовали объяснить, что это такая условность, что мы нарисуем красивый дизайн, что это все по-быстрому и надо оценивать компоновку… все тщетно: заказчик при виде наших прототипов твёрдо уверился, что это и есть финальный дизайн, и он — полное говно.

И после этого смысл потеряло все: и персонажи, и CJM, и даже тот факт, что конкурирующая партия нарисовала так-себе-дизайн-на-троечку — все затмевалось нашим цветным уродом из недр Акшуры с довольным Шуфутинским на капитанском мостике.

Мораль (куда ж мы без морали) проста: коли вы тащите какой-то непропечённый набросок своим заказчикам или широкой публике — делайте его настолько условным, что даже дитя поймёт, что это прототип, который не нужно пинать ногами.

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

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

#байкабабайка