Роман Горшков рассказал о переходе дизайн-команды с Фигмы на Клод.

Дизайнер может делать больше задач и быстрее разгребать беклог: что занимало 2 дня, делается за 2 часа. И нет торговли с разработчиками, чтобы реализовать какой-то эффект.

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

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

Сейчас опасно ковыряться в кривых и пикселях. Клод создаёт на 99% готовый продукт: специалист может увидеть неправильный рефлекс, баг отражения. Но стоит ли тратить ещё столько же времени, сколько уже потрачено, чтобы довести до 100%? Насколько 1% портит впечатление аудитории? Надо организовывать процесс так, чтобы как можно больше проходить на автомате.

Не нужно знать Фигму с её переменными, плагинами для выгрузки токенов. Она нужна на 5%: поставить рядом пару картинок, собрать историю, подправить что-то небольшое.

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

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

Важные софты: 1) Логика, умение рассуждать хотя бы на уровне своего модуля и делать выводы. Раньше Роман предлагал тестовые задания, теперь задаёт вопросы, чтобы понять, как соискатель формулирует мысли и двигается к ответу. 2) Критическое мышление, умение признавать ошибки и обучаться.

Изменение процесса команда приняла с энтузиазмом: по кайфу получать сразу кликабельный результат. Около 10% не захотели отказываться от старого процесса и ушли думать, подходит ли им новая парадигма.

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

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

В среднем дизайнеру хватает тарифа за 100 долларов, чтобы делать фронт без больших петель проверки и многих параллельных запросов. Загрузка онтологии дизайн-системы съедает все 20-долларовые лимиты.

С сокращением time to market стали маркировать задачи и менее критичные без ревью лида и дизайн-директора раскатывать волнами на всю аудиторию с пост-ревью. Поддержка и интеграторы дают много фидбека. Продукт большой, часто невозможно узнать обо всех кейсах использования.

#ai #process

Илья Бирман написал о поле ввода и его отличиях от комбобокса.

Поле ввода позволяет ввести значение с клавиатуры. В состоянии фокуса в поле появляется курсор, в тач-интерфейсе — экранная клавиатура.

Если текст не помещяется в поле, он сдвигается вслед за курсором (из комментария: отсутствие горизонтальной прокрутки — скорее недоработка привычной реализации). Вне фокуса поле отображает начало длинного текста и обрезает его конец.

Бывают однострочные и многострочные поля (text area). В последних текст может переноситься на следующие строки, и возможна вертикальная прокрутка, если высоты поля не хватает для отображения всего текста. Чтобы скрол в поле не конфликтовал с прокруткой страницы, высоту поля можно автоматически увеличивать под введённый текст.

Чтобы размер поля подсказывал, какой объём контента оно ожидает, и был удобен для ввода, многострочное поле по умолчанию делают высотой в 3–4 строки.

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

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

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

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

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

#input #combo_box

Алексей Кирдяев написал о чистом дизайне.

Чистый минималистичный дизайн — не стандарт качества, а культурное предпочтение. 73% поведенческих данных получено из исследований, в которых участвовали в основном WEIRD-респонденты (Western, Educated, Industrialized, Rich, Democratic). Они представляют всего 12% населения Земли.

Чистая форма заявки на кредит из 3 полей, прогресс-бара и кнопки не конвертила на мексиканском рынке. Пользователи ей не доверяли. У конкурентов были плотные многостраничные формы, много институционального брендинга, государственной символики и значков безопасности.

Есть низко- и высококонтекстуальные культуры. Есть культуры с низкой и высокой дистанцией власти — насколько нормальным в обществе считается неравное распределение власти. В странах с низкой дистанцией (Скандинавия, Нидерланды, Австралия) плоское и неформальное вызывает доверие.

В странах с высокой дистанцией (Индия, Мексика, Бразилия, Филиппины, Индонезия, Малайзия и большая часть Ближнего Востока и Центральной Азии) институты, которые не демонстрируют свой авторитет, не задают много вопросов, кажутся несерьёзными.

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

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

#localization

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

Так бывает, когда агенту отдают всю Figma целиком: он в ней тонет и начинает додумывать. Ему нужно объяснить, что уже есть в дизайн-системе, где это найти и как использовать. Для этого собирают карту дизайн-системы.

28 октября в 18:00 мск продуктовый дизайнер Даниил Шишко проведет бесплатный эфир и покажет, как собрать такую карту в Codex. Начнет с пустой папки и на дизайн-системе Желтого банка настроит агента, который соберет экран из готовых компонентов с нужными шрифтами, цветами и отступами. Подойдет и тем, кто ни разу не открывал агента.

Что получат зрители:
• скилл для сборки карты дизайн-системы;
• инструкцию по работе с Codex и Claude, которая поможет избежать блокировки аккаунта.

Эфир бесплатный, нужно только зарегистрироваться

Денис Зеленых написал о подходе «Атомарная матрёшка» к организации дизайн-системы.

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

Иерархия отражается и на структуре файлов в Фигме: набор сценариев в рамках пользовательской истории (страница файла) → все сценарии модуля (файл) → сервис (папка) → продукт (командное пространство). Легко искать нужные макеты.

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

У Фигмы есть ограничение в 2 ГБ на вкладку, в которые должны уместиться и файл, и все подключённые библиотеки. Глобальный UI-кит включает дизайн-токены, базовые компоненты и универсальные элементы. Продуктовая библиотека — общие шаблоны, навигацию, паттерны продукта. Сервисные и модульные библиотеки — всё сложное и специализированное: экраны, тяжёлые лейауты, паттерны взаимодействия.

Подход «Файл на компонент» подходит сверхкрупным компаниям. В обычных командах минусы перевешивают плюсы: падает производительность (медленнее отклик системы), больше рутины (правки надо проводить по цепочке файлов).

Не всё в компоненте должно быть вариантом. Простые штуки вроде скрытия иконки, подмены контента и изменения текста надо делать через свойства компонента: boolean, instance swap, text. Это уменьшает комбинаторику вариантов даже сильнее, чем дробление по неймингу («button / basic», «button / icon»).

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

Когда есть один однозначный компонент с понятными вариантами, токенами и маппингом на код, то и ИИ меньше ошибается.

Дополнение подхода экосистемой продуктов. #design_system #figma

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

В обсуждениях люди описывают спрятанные кнопки, неработающие поля и сложности отмены подписки. Это источник гипотез для discovery массовых продуктов с активным публичным обсуждением: можно обнаружить расхождение между обещаниями и реальным опытом.

Выбор площадки влияет на находки: короткие ролики показывают заметные затруднения, длинные видео и текстовые обсуждения позволяют раскрыть многошаговые сценарии. Поэтому выборку стоит собирать на нескольких платформах. Для SaaS и финтеха подходят Reddit и Hacker News.

Предлагаемый процесс начинается со сбора минимум 200 видео с двух и более платформ за период от трёх месяцев: так отдельный скандал меньше искажает картину. Критику с партнёрскими ссылками на альтернативы исключают. Речь расшифровывают, жалобы группируют по темам. Минимум 20% материалов независимо разбирают два исследователя для проверки согласованности. Результат — карта проблем с частотой упоминаний и тональностью.

Затем проводят по 6–8 интервью на каждую тему, чтобы подтвердить, опровергнуть или уточнить гипотезы. Проверенные темы выносят в опрос 100–200 реальных пользователей и расставляют приоритеты для дизайна.

Весь цикл рассчитан на 4–7 недель. Его преимущество — масштаб поиска гипотез. Частота жалоб не показывает распространённость проблемы: алгоритмы усиливают эмоциональный контент, а люди с нейтральным опытом редко публикуют разборы.

#ugc #research

Павел Шерер написал о моделях информационной архитектуры — предпоследняя статья цикла.

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

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

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

Для каждой пользовательской задачи зафиксируйте нужные данные, связи, правила отбора и представление. Если цена куртки превысит заданный бюджет, она исчезнет из выдачи, отфильтрованной по цене, но останется в редакционной подборке.

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

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

#information_architecture

Сергей Гуров написал об эволюции от модульной сетки до алгоритмической.

Первым модульную сетку в книжной вёрстке применил Макс Билл около 1940 года. Во 2-й половине XX века Йозеф Мюллер-Брокманн называл модуль «проявлением воли к порядку и ясности, объективности взамен субъективности». Однако он строил сетку для оформления уже готового материала (сначала композиция, потом сетка).

В 1962 году Карл Герстнер подготовил для журнала Capital систему, допускающую от 2 до 6 колонок, так как формат был фиксированным, но контент ещё неизвестен. Подходящий вариант для каждого выпуска должен был выбирать дизайнер.

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

Сетка — способ организации пространства формата. Рудер вместо «пространства» говорил «объём» и лист считал плоскостью. У Фаворского (ВХУТЕМАС) было пространство, а линия — процарапанной, то есть трёхмерной неровностью. В цифровых пространствах и контент непредсказуем, и формат становится живым, что требует другого подхода.

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

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

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

Можно задать алгоритм: изображения вписаны в квадратные модули с сохранением пропорций, горизонтальные прижаты к низу, вертикальные — к левому или правому краю (в зависимости от того, на какой линии модуль). Модули опираются на вертикальные силовые линии. На нечётных этажах модули на линиях 1 и 3, на чётных — на 2 и 4. На линиях 3 и 4 модули смещены вниз. Через каждые 3 строки — модуль в высоту экрана. При изменении ширины окна все размеры пропорционально пересчитываются. При переходе к ширине планшета или телефона — другой набор параметров.

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

#layout #adaptive

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

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

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

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

Но будущее не просто за чатом, а за чатом и набором детерминированных инструментов (обычные программы), подключённых через MCP. Model Context Protocol — открытый стандарт подключения ИИ к внешним данным и инструментам, предложенный в 2024 году компанией Anthropic.

Например: пользователь пишет в чате «Рассчитай скидку для компании Х» → ЛЛМ находит подходящий для запроса инструмент, уточняет у пользователя критически важные параметры запроса и формирует вызов в формате JSON → инструмент возвращает результат расчёта (например, {"discount": 3}) → ЛЛМ отвечает пользователю «Скидка для Х составит 3%».

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

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

MCP‑сервер должен работать с правами, унаследованными через стандартные протоколы вроде LDAP или OpenID. Отдаваемые ему сценарии должны учитывать принцип минимальных привилегий.

Графический интерфейс останется для задач, где нужен взляд сверху и где требуется прямое взаимодействие — взять и подвинуть, видя результат в реальном времени.

#chat #ai

Аня Карпова написала, как провести User Day — день общения продуктовой команды с пользователями.

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

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

Если команда большая, разделите её на группы по 4–5 человек, чтобы респондентам было комфортно. Чтобы слова одного респондента не воспринимались как то, что касается всех пользователей, каждая группа общается с 2 респондентами.

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

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

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

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

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

#research