UX и UI дизайн, есть что сказать Илье Красинскому на продуктовых кружках

18 ноября в кружке продактов мы обсуждали UX/UI дизайн. На связь вышел Илья Красинский и выдал более 50 кружков по этой теме, очень толковой информации и опыта, которым захотелось поделиться.

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

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

Я сам в прошлом дизайнер, руководил дизайнерами, был арт-директором, через меня прошло минимум 30 дизайнеров, кто-то получил профессию.

Дизайнер, конечно же, нужен, как и UX. И мы сильно недооцениваем, насколько это важно и нужно. Особенно я говорю про российских продактов. Например, ребятам из Израиля, Штатов или Англии этого практически не надо доказывать. С ними легче разговаривать о том, как дизайн влияет на метрики, на конверсию, и какое огромное влияние они оказывают. Да и вообще многое, что закладывается в дизайн UX: активация пользователя, retention loop. Но в России об этом приходится спорить.

Мне кажется, что во многом это связано с уровнем конкуренции и уровнем зрелости. А в России по факту конкуренции не так уж и много. Но по мере роста конкуренции растёт и стоимость привлечения пользователя и все точки роста в 70-80 процентов случаев смещаются в сторону конверсии. Практически во всех продуктах.

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

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

У меня есть видео на ютуб-канале про команду заботы, его стоит посмотреть. Там я говорю о нелинейной, неочевидной цепочки причинно-следственной связи, о появлении петлей негативной обратной связи, связывающей маркетинг, конверсию, команду заботы и продаж с тем, что компания выходит на плохую юнит-экономику https://youtu.be/CC9uRtZIR5Q

Дизайнерское комьюнити в России живёт отдельно от продуктового. Так как я был в разных комьюнити, многочисленные российские агентства очень мало связаны с продуктовой тусовкой. Прям удивительно мало. И очень многие вещи, которые являются стандартами в продуктовой тусовке – работа с аналитикой, юнит-экономикой, нахождение точек роста, системное управление продуктом, метрики – для дизайнеров это всё ещё тёмный лес. Они боятся и не хотят туда идти. По крайней мере из того, что я видел.

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

Я сам в своё время тоже работал в агентстве и потом как можно быстрее ушёл в продуктовый мир, начал делать продукты. В первом продукте мне повезло, мы делали на Англию и на Штаты, где были уже определённые требования к дизайну. Мне приходилось заниматься метриками. Оказалось, что всё работает совсем не так, как я предполагал.

Мне кажется, что дизайнеры продолжают нести майндсет агентства. И курсы, на которых они учились, тоже делают агентства. В агентском бизнесе дизайн продаётся. Дизайнеры привыкают к тому, что они сделали хорошо работу, если их дизайн купил заказчик. Поэтому они сильно вкладываются в презентацию своего дизайна, в портфолио. Посмотрите на behance и на dribbble.

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

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

Мне в своё время не рассказали про когорты, про новых и старых пользователей. У новых пользователей совершенно другие проблемы. Если новый пользователь не понимает в первые 10-20 секунд, что ему нужно делать, он уходит. И вдруг оказалось, что многие продуктовые компании не рисуют отдельных дизайн первой сессии.

Тут появляют два главных bias’а. Confirmation bias — желание подтвердить свою точку зрения. И survivorship bias.

Как они работают: дизайнер, когда разбирается в предметной области он садится и разбирается в ней, какие есть термины. Я в своё время проектировал для компании Avis – аренды автомобилей – в Англии. Проблема в том, что, когда новый пользователь в первый раз в Avis что-то пытается приобрести в прокате авто, он нихрена не знает, как всё должно работать. Использование специализированных жаргонизмов в интерфейсе — это главная ошибка дизайнера.

Confirmation bias в Avis звучал следующим образом: мы знаем, как продавать наш софт, нужно подробно изучить бизнес-процесс и отразить его в интерфейсе, потому что мы делаем продукт для опытного пользователя.

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

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

Мы попадаем в survivorship bias – когда берём не все факты, а только маленькую подчасть фактов.

Если дизайнер или продакт сядет смотреть ролики Вебвизора в Яндекс.Метрике – то есть записи пользовательского взаимодействия с сайтом – он часто будет искать не проблемные ролики, а ролики где всё более менее хорошо, где пользователь справился. Но здесь нам наоборот нужно смотреть за пользователями, которые не справились. Которые зашли в продукт, потыкались, помыкались и ушли. Именно такие первые сессии надо изучать. Нужно смотреть, где дизайнер ошибся, о чём он вообще не подумал.

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

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

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

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

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

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

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

Как мы организуем эту работу. Надо принять, что дизайн – это коммуникация, это сообщение. Наш UX интерфейс — это, в первую очередь, текст.

У Горбунова есть хорошая серия статей, где он показывает, что разные элементы интерфейса выполняют синтаксическую роль в предложении. Единица смысла, коммуникации является предложение. Кнопки – это глаголы, сказуемое. Есть дополнения: варианты ответов, чекбоксы. Даже иконки выполняют определённую синтаксическую роль.

Первый шаг, который мы обычно делаем в дизайне, – пишем, какое сообщение должен считать пользователь. Не то, что мы хотим ему написать, а что мы хотим, чтобы он понял после того, как он посмотрел на этот экран. И что мы хотим, чтобы он сделал благодаря этому. Это точно так же как в выступлениях. Какую мысль мы хотим, чтобы люди с собой унесли. Какой будет output, с чем они уйдут, что они запомнят.

У Бирмана есть хорошая зарисовка на эту тему «Дизайн 1.0», где он собирает версию дизайна версии 1.0, просто написав текст. Если посмотреть в книге Эдварта Тафти про информационный дизайн, он показывает что из текста легко появляются таблицы, из таблицы получаются графики. Это практически одни и те же элементы. И ещё из текста получается UX.

Это легко делать на языке Jobs to be Done сценариев. Поэтому они такую популярность получили. Поэтому я обожаю их использовать, потому что буквально в первой версии дизайна мы делаем раскадровку Customer Journey Map, то есть набор экранов. Это удобно делать в Figma. Это просто белые экраны, так называемый «дизайн в серых блоках», «метод прогрессивного джипега» или «метод решения задач с конца». Это очень похожие фреймворки.

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

По факту мы сейчас записали definition of done. Дизайнер когда смотрит над фреймом и понимает, что пользователь должен считать и понять, у него появляется cross check (проверка): то, что я спроектировал, решает тот сценарий, который написан или нет.

Мы проектируем путь пользователя, который потом можно будет улучшать, сокращать, чтобы уменьшать количество кликов, которые он должен сделать. Примерно каждый клик в 3-5-10 раз понижает конверсию.

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

Итак, первый шаг – мы хотим написать JBTD-сценарий: что пользователь видит, что понимает, что делает на этом экране. Это будет не один сценарий, а кусочки, объединённые в CJM. После этого можно написать текст на экране, какую информацию мы передаём пользователю для того, чтобы он мог совершить действие.

Есть такой фреймворк в информационном дизайне: Information, Subject, Object, Action. Грубо говоря, чтобы пользователь сделал целевое дейстивие, он должен получить какую-то информацию. Например, узнал, что он может сделать перевод маме за 2 клика, субъект – я, объект – мама, могу сделать перевод – действие.

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

Существует очень давний спор между дизайнерами и UX-ерами. По моему мнению, побеждают дизайнеры, потому что есть логика, есть эстетика. И оказалось, что проще дизайнеров обучить UX и логике, чем UX-еров обучить форме и дизайну.

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

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

И это сугубо специфические навыки дизайнера в графике, типографике и композиции. Здесь критерий успеха – чтобы человек считал наше сообщение текста в определённом порядке.

А этим всем управляет иерархия акцентов.

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

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

Есть книга «Тотальная видимость» по информационному дизайну, в которой есть 5-6 клёвых концептов. Автор говорит: «Представьте, что вы находитесь в незнакомом городе, как вы будете ориентироваться на карте?». Наверное, вы будете искать достопримечательности, знаковые объекты, простраивая маршрут между ними. Точно так же новые пользователи хотят ориентироваться в интерфейсе, который вы им дали. Первое, что в этом помогает – иерархия акцентов.

Акцент — это:

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

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

Дизайнеры откуда-то решили, что пользователи не читают текст. Они читают. Люди не читают скучный и плохо свёрстанный текст, потому что форма мешает. Поэтому Людвиг Быстроновский был прав когда говорил, что дизайнер, умеющий писать текст, зарабатывает в 2 раза больше, потому что заменяет двух сотрудников.

Важно не делать так, чтобы 2 акцента спорили между собой. Например, возле заголовка не был текст, выделенный жёлтым.

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

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

Когда 15 лет назад Norman Group делал исследование, где они посмотрели eye tracking того, как люди читают текст, они увидели паттерн буквы F. Это значит, что люди читают первую строку, где главный акцент, потом спускаются на вторую и это «вычерчивает» вторую палочку буквы F. Проблема в том, что люди читают слева направо.

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

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

Основная задача дизайнера – всего лишь за счёт акцентов сделать так, чтобы страница читалась в прямом порядке.

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

У Горбунова была отличная зарисовка, которая называется «Дизайн-авария».

Представьте Древний Рим, где на перекрёстке сталкиваются две колесницы, авария, кишки, отдельно валяются шлем, оси отдельно, мёртвые кони, мечи, патриции в крови. Вот это дизайн-авария, дизайн «кишмиш».

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

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

Потому что мы опытные пользователи, мы смотрим на дизайн и обсуждаем его часами. А новый пользователь смотрит всего миллисекунды и за 300 миллисекунд принимает решение, нравится или нет. Люди плохо могут объяснить почему, они уходят или устают. Здесь важно учитывать когнитивную нагрузку.

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

Итак:

В одной яндексовской компании за 2-3 месяца до закрытия продакты увидели, что мобильные конверсии ниже, чем десктопные. Оказалось, что дизайнер «красавчик» спрятал информацию о доставке за лишний клик, на лишнем экране. А люди часто, когда не понимают условия доставки, не покупают. То есть дизайн помешал ответить на этот вопрос.

Обычно требуется 7-8 коридорок, чтобы избавить дизайн от грубых ошибок. Даже с опытом многие косячат. Коридорки показывают, что где-то глагол не дописали, предложение несогласовано, жаргонизм использовали, люди нас не понимают.

Как это работает в коридорных тестах

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

Нет, работа только начинается. Вы получили всего лишь заготовку – штуку, которая в принципе способна нести определённое сообщение и которую можно отдавать в разработку. Вообще говоря, хороший дизайн получается с 7-8 попытки. Разница между первым и восьмым вариантом поразительная.

К этому моменту может показаться, что вы переусложнили: много кликов, лишних действий. Нужно спрашивать себя: «А точно ли эта кнопка нужна? А можно ли их убрать? Можно ли сократить?»

Обычно весь этот цикл делается за несколько дней, максимум за неделю. Зависит от объёма задач, объёма раскадровки, но небольшой сценарий реализуется меньше чем за неделю.

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

Если вы дизайнер или продакт, чтобы быстрее учиться, берите сайд-проекты с очень простым продуктом, и просто проходите весь цикл 7-8 раз. В принципе станет понятно, что дизайн – это ремесло.

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

Дизайнер экономит 3 вещи:

Вообще, за последние 18 лет 90% продуктовой работы над метриками – это работа над текстом и сообщениями, потому что метрики бизнеса отражают поведение пользователя.

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

Cпасибо, что дочитал — надеюсь, это было полезно. Ещё больше информации у меня в ТГ канале @blackproduct

До новых встреч!