Способы встроить ИИ-помощника в интерфейс, роль метафор в UX, эксперименты с генерацией шрифтов: главное в дизайне за июнь
Традиционный дайджест Юрия Ветрова.
Большое визуально-интерактивное обновление — и это одно из ярчайших явлений в профессии за последние годы. «Liquid glass» — динамический материал, который используется для элементов управления и панелей.
Логика сборки экранов при этом не сильно поменялась, но по факту это сильно больше, чем просто тема оформления.
Sharang Sharma описывает типичные способы встроить ИИ-помощника в интерфейс — от небольшого окошка чата до полной интеграции в основное взаимодействие.
Kate Kaplan из Nielsen/Norman Group говорит, что рассматривать пользователей корпоративных приложений как либо новичков, либо экспертов — неправильно. Она предлагает другую категоризацию: Legacy (используют давно, но знают только самую базу), Legend (глубоко знают интерфейс) и Learner (эксперты в предметной области, но с интерфейсом ещё не работали). И даёт советы на тему того, как помочь каждой группе.
Colin Chapman разбирает нелепый оксюморон — синтетические данные опросов пользователей. Это нелепая затея, которая противоречит как самой идее опросов, так и эффективности получения нужных данных через имитацию опроса.
Hardik Pandya шикарно разложил по полочкам, с какими сценариями использования MCP справляется хорошо, а где это бесполезный костыль. Он разделяет два режима работы — оркестровка разных инструментов и источников информации, а также инкрементальные доработки. Многие инструменты предполагают переключение между ними в рамках работы, что только усложняет жизнь.
Новости инструментов дизайна:
- Figma: Как они расширили архитектуру слоёв, чтобы они могли генерировать и хранить код. Это новая функция, связывающая Figma, Figma Sites и Figma Make. Также сделали предустановку шрифтов Apple San Francisco.
- Figma Make: Советы Alexia Danton по работе с инструментом. Как описывать текстовые запросы, готовить макеты и компоненты, а также вообще планировать такие проекты.
- Thiings: Инструмент алгоритмического дизайна позволяет сгенерировать коллекцию 3D-иконок и иллюстраций в своём стиле. Стиль настраивается из примеров. Можно создать новую иконку по текстовому запросу или взять уже доступный объект.
- Midjourney V1: Midjourney теперь может генерировать видео.
- Replit Import: Сервис ИИ-разработки Replit теперь может импортировать проект из Figma, Lovable и Bolt, а потом превратить макет в код или доработать уже существующий код.
- Weavy: Универсальный инструмент алгоритмического дизайна умеет соединять отдельные простые действия (сгенерировать, отредактировать фото или видео) в единую последовательность, чтобы получился нужный результат. Они подключают множество популярных моделей, которые можно использовать в любом порядке.
- V0 Design Mode: ИИ-сервис для разработчиков Vercel v0 запустил режим дизайна. В нём можно корректировать макеты как в простом встроенном графическом редакторе без текстового запроса.
- Storyboarder AI: Генератор раскадровок для видео и кино. Помогает делать наброски на основе текстового запроса или изображения, позволяет редактировать итоговый сценарий и детали каждого кадра, помогает подбирать локации.
- HeyGen Video Agent: HeyGen запускает полный цикл создания видеоролика — от брифа, референсов, персонажей и сцен до генерации самого видео, монтажа, субтитров, перевода озвучки и подготовки разных форматов для разных каналов.
- Imagen 4: Вышла улучшенная версия генератора изображений Imagen 4 от Google. Например, он лучше работает с текстом — можно делать комиксы и открытки.
- Onlook: Генератор кода на основе макета. Макет можно докрутить в самом инструменте.
- Formia: Инструмент превращает обычный логотип в красочную 3D-версию. Он также генерирует дополнительную графику для соцсетей, магазинов приложений, презентаций и т.п.
Louis Charron описывает роль метафор в интерфейсах и дизайне в целом. Почему они помогают человеку быстрее понять новую для себя вещь.
Luke Wroblewski размышляет, какими могут быть интерфейсы для управления сразу несколькими ИИ-агентами, которые выполняют множество задач. Он примеряет стандартные интерфейсные решения и рассуждает, как это могло бы работать.
Команда Material Design показывает, как в Material Expressive 3 можно задавать свои стили анимации. Они будут переиспользоваться во всей дизайн-системе.
Casper Kessels в деталях анализирует интерфейс Panorama i-Cockpit новых машин Peugeot.
Tim Neusesser и Kate Moran собрали лучшие практики для обучения написанию хороших запросов в ИИ-чат-ботах. Они выделили несколько паттернов для разных ситуаций и показали примеры их реализации.
Встроили инструменты тестирования Vitest — тесты взаимодействия, accessibility и визуальные, — а также сделали карту покрытия тестами. Так же ужали код наполовину, сделали работу с React Native удобнее и добавили глобальные состояния (например, можно посмотреть компонент в тёмной теме, нужном размере экрана или локали),
Как работают новые встроенные тесты компонентов — они покрывают взаимодействие, визуал и accessibility.
Dawn Ta предлагает необычный подход к выстраиванию работы команды пользовательских исследований. Она использует Value Proposition Canvas, чтобы сопоставить запросы продуктовых команд и возможности исследователей.
Манифест внимания к качеству и мастерству от Karri Saarinen, главы и сооснователя Linear. Это версия его выступления на Figma Config, доработанная для статьи. У них есть спецпроект с серией интервью на эту тему.
Серия статей и экспериментов Monotype и шрифтовых дизайнеров из других словолитен вокруг генерации шрифтов и просто символов с помощью ИИ. Monotype развивают свой инструмент.
Ricardo Vazquez рассказывает, как дизайн-команда Shopify замеряла производительность основных сценариев использования платёжных терминалов и оптимизировала их. А позже в Dropbox он настроил работу от проблем пользователей.
Hardik Pandya смотрит на весь цикл работы над продуктами и рассуждает, почему ИИ-сервисы уже неплохо работают «справа от кода», где проблема уже более-менее определена. И не сильно полезны «слева от кода», где работают с пониманием проблемы и путями её решения.
Thom Rimmer (один из дизайн-директоров) рассказывает, как дизайн-команда Intercom перестроила свою работу в ИИ-эпоху. Как это меняет роль и дизайнера и дизайн-менеджера.
Катя Халитова из «Контура» собрала мнения пользовательских исследователей и менеджеров продуктов о том, каким должно быть взаимодействие между этими двумя ролями и кто принимает решения в ходе работы над проектами.
Сервисы для пользовательских исследований User Interviews и Heard провели опрос менеджеров продуктов на эту же тему.
Smashing Magazine выпускают книгу Michele Williams «Accessible UX Research». Она посвящена пользовательским исследованиям accessibility в интерфейсах. Анонс.
Читайте полную версию дайджеста в моём блоге. За свежими ссылками также можно следить в Telegram-канале или в группе во «ВКонтакте». Спасибо всем, кто помогает наполнять дайджест.