Как ставится глаз: практика в дизайне

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

И проектировать пока не умеешь.

Это не обескураживание, а та же фраза, которой заканчивается статья про чанки в сфере «Как учиться»: понял рецепт — ещё не повар. Последняя статья — о расстоянии между этими двумя состояниями и о том, как проходить его намеренно, а не в надежде, что само.

Разрыв

Айра Гласс описал то, о чём никто не предупреждает, и это объясняет большинство бросивших.

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

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

Вкус, обгоняющий руки, — не признак бездарности. Это руль.

Единственный известный способ пройти — объём законченных работ с приложенной обратной связью. Не больше чтения. Не инструмент получше.

Какие у тебя чанки

Сфера «Как учиться» описывает навык как библиотеку сросшихся блоков: повар думает «зажарка», а не двенадцать шагов. У дизайна ровно та же структура, и стоит знать, какие тут блоки, чтобы собирать их намеренно:

Форма. Пустое состояние. Сценарий подтверждения. Онбординг. Страница настроек. Таблица данных. Интерфейс поиска и фильтров. Страница тарифов. Многошаговый мастер. Путь восстановления после ошибки. Дашборд. Мобильная навигация.

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

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

Скопируй, закрой, воспроизведи

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

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

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

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

Еженедельный разбор

Повторяемые полчаса, которые накапливаются быстрее любого курса:

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

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

Перемешивай практику

Статья про связку ключей из сферы «Как учиться» применяется здесь без изменений. Десять посадочных страниц подряд тренируют «применить метод посадочной страницы» и никогда не тренируют его выбор. Настоящая работа выдаёт задачу без ярлыка.

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

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

Откуда берётся обратная связь

Практика без обратной связи просто делает твои привычки более стойкими. Три источника, по возрастанию ценности:

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

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

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

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

Портфолио — это доказательство мышления

Самая частая ошибка портфолио — показывать экраны. Экраны может выдать кто угодно; нанимают за суждение.

У работающего кейса пять частей:

Задача — со свидетельствами. Кто, в какой ситуации, что шло не так, откуда ты это знал.
Что ты делал — исследование, что пробовал, что отбросил.
Решения и их причины — три-четыре настоящих, включая компромиссы и ограничения, внутри которых ты работал.
Что вышло — результаты тестов, метрики или честно: «не выкатили, вот что я бы проверял».
Что не сработало — версия, в которой ты ошибся, и то, что изменило твоё мнение. Этот раздел убеждает сильнее всех остальных вместе взятых, потому что он единственный, который нельзя подделать.

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

Где взять настоящие проекты

Ответ — не «дождаться работы».

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

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

Проектируй для собственного продукта, если ты его строишь. Задача с ограничениями будет решена, а проблема «ты не пользователь» встанет в полный рост; проводи тесты.

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

Вся сфера одним чек-листом

Двадцать статей в том порядке, в каком ими реально пользуются:

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

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

Проверь себя

Закрой статью и ответь своими словами:

Что за разрыв описал Айра Гласс и почему видеть недостатки своей работы — хороший знак?
Назови пять дизайнерских чанков, которые можно собирать намеренно.
Какую половину техники копирования пропускают все и почему она важна?
Опиши еженедельный разбор в пяти шагах.
Почему перемешивать практику полезнее, чем повторять один тип экрана?
Какие пять частей у кейса и какая убеждает сильнее всего?
Почему практика требует доводить работы до конца?

Коротко

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