Собрал дайджест продуктового дизайна за май 2023. Android 14 и Microsoft Fluent Design 2, алгоритмический дизайн, рифма иконок и шрифта, риски в дизайне, ChatGPT для UX-исследований, тёмные паттерны, дашборды, dynamic island и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS
Свежая выгрузка из базы нового по дизайн-менеджменту. Загрузка начинается через 3, 2, 1…
1. Mia Blume: Советует дизайнерам говорить с бизнесом не об абстрактном улучшении качества продукта, а об инвестициях в ключевые метрики с помощью дизайна.
2. NN/g: Управление рисками при внедрении и обновлении дизайна. Как это влияет на пользователей и как предусмотреть потенциальные проблемы.
3. Контур: Координация сообщества пользовательских исследований. Как внедряются общие методы, проводится планирование и ретро.
4. Steve Bromley: Как ранжировать интерфейсные проблемы в игровых интерфейсах.
5. Clara Kuo: Персональная стратегия для пользовательских исследователей, которые первыми пришли в компанию.
6. Andrea Mignolo: Сила коучинга от дизайн-менеджера. Этот метод помогает не только самому дизайнеру, но и всей организации, которая думает в таком ключе.
7. Capital One: Стратегия развития UX-исследований в компании. Подход к её формированию и реализации.
8. SAP: Модель проникновения хорошего дизайна в компании. Это 4 этапа масштабирования.
9. Joshua McLaughlin: Матрица AAI (Awareness, Alignment, Inclusion) для вовлечения участников проекта, которая на вид проще классических RACI и аналогов. Перевод.
10. User Interviews: Шаблоны для проведения встреч по дизайну.
11. Microsoft: Вариация ретроспективы для дизайнеров, которая здорово помогла на удалёнке.
#management
1. Mia Blume: Советует дизайнерам говорить с бизнесом не об абстрактном улучшении качества продукта, а об инвестициях в ключевые метрики с помощью дизайна.
2. NN/g: Управление рисками при внедрении и обновлении дизайна. Как это влияет на пользователей и как предусмотреть потенциальные проблемы.
3. Контур: Координация сообщества пользовательских исследований. Как внедряются общие методы, проводится планирование и ретро.
4. Steve Bromley: Как ранжировать интерфейсные проблемы в игровых интерфейсах.
5. Clara Kuo: Персональная стратегия для пользовательских исследователей, которые первыми пришли в компанию.
6. Andrea Mignolo: Сила коучинга от дизайн-менеджера. Этот метод помогает не только самому дизайнеру, но и всей организации, которая думает в таком ключе.
7. Capital One: Стратегия развития UX-исследований в компании. Подход к её формированию и реализации.
8. SAP: Модель проникновения хорошего дизайна в компании. Это 4 этапа масштабирования.
9. Joshua McLaughlin: Матрица AAI (Awareness, Alignment, Inclusion) для вовлечения участников проекта, которая на вид проще классических RACI и аналогов. Перевод.
10. User Interviews: Шаблоны для проведения встреч по дизайну.
11. Microsoft: Вариация ретроспективы для дизайнеров, которая здорово помогла на удалёнке.
#management
Medium
Action #2: Stop talking about “quality”
You can be a designer who understands, shapes, and aligns with the business without losing your creativity.
Массивная инъекция свежего о пользовательских исследованиях:
1. MeasuringU: Эксперимент с ChatGPT — насколько хорошо он умеет выделять основные темы интерфейсных проблем по результатам исследования. Они дали одинаковое задание трём исследователям и сделали три прогона с ботом. В целом результат не идеальный, но пристойный.
2. User Interviews: Мясистая памятка по пользовательским исследованиям для дизайнеров и менеджеров продуктов. Как взаимодействовать с профессиональным исследователем, какие методы можно использовать самому, как задавать правильные вопросы и т.п. Правда, они зачем-то разделяют всё на проектировщика и продуктового дизайнера, но это можно игнорировать.
3. Condens: Универсальный подход, который поможет выбрать правильный способ донесения результатов исследований на разных этапах работы продуктовой команды.
4. User Interviews: Шаблоны для проведения юзабилити-тестирования.
5. Jeff Sauro и Jim Lewis: Продолжают изучать измерения технической подкованности. В этой статье они пытаются проследить влияние этого показателя на успешное выполнение задачи.
6. NN/g: Методы поиска респондентов и проведения юзабилити-тестов с пользователями, которые имеют ограничения по зрению. Выводах из соседнего исследования на тему ввода текста на мобильных такими пользователями.
7. Alison Jones: База знаний и инсайтов из исследований Atlassian Research Library. Как они собирали требования к ней, какие удачные и неудачные этапы прошли и как она работает сейчас.
8. NN/g: Советы по созданию своей панели респондентов.
9. Meghan Skapyak: Советы по проведению исследований с детьми. Как создать комфортную обстановку для них и получить дельные инсайты.
10. Liam O’Brien и Stephanie Wilson: Особенности вариации метода рассуждения респондентом вслух — когда модератор может прерывать и дополнять их в каких-то ситуациях.
11. MeasuringU: Проблема исследования, оценивающего записи немодерируемых юзабилити-тестов. Разные исследователи выделяют разные интерфейсные проблемы и пересечение между ними не сильно большое.
12. NN/g: Эффект Хоторна, который может искажать результаты пользовательских исследований. Сам факт наблюдения за ними может повлиять на поведение.
13. Дмитрий Старков: Методы тестирования продуктов на базе алгоритмов.
#research
1. MeasuringU: Эксперимент с ChatGPT — насколько хорошо он умеет выделять основные темы интерфейсных проблем по результатам исследования. Они дали одинаковое задание трём исследователям и сделали три прогона с ботом. В целом результат не идеальный, но пристойный.
2. User Interviews: Мясистая памятка по пользовательским исследованиям для дизайнеров и менеджеров продуктов. Как взаимодействовать с профессиональным исследователем, какие методы можно использовать самому, как задавать правильные вопросы и т.п. Правда, они зачем-то разделяют всё на проектировщика и продуктового дизайнера, но это можно игнорировать.
3. Condens: Универсальный подход, который поможет выбрать правильный способ донесения результатов исследований на разных этапах работы продуктовой команды.
4. User Interviews: Шаблоны для проведения юзабилити-тестирования.
5. Jeff Sauro и Jim Lewis: Продолжают изучать измерения технической подкованности. В этой статье они пытаются проследить влияние этого показателя на успешное выполнение задачи.
6. NN/g: Методы поиска респондентов и проведения юзабилити-тестов с пользователями, которые имеют ограничения по зрению. Выводах из соседнего исследования на тему ввода текста на мобильных такими пользователями.
7. Alison Jones: База знаний и инсайтов из исследований Atlassian Research Library. Как они собирали требования к ней, какие удачные и неудачные этапы прошли и как она работает сейчас.
8. NN/g: Советы по созданию своей панели респондентов.
9. Meghan Skapyak: Советы по проведению исследований с детьми. Как создать комфортную обстановку для них и получить дельные инсайты.
10. Liam O’Brien и Stephanie Wilson: Особенности вариации метода рассуждения респондентом вслух — когда модератор может прерывать и дополнять их в каких-то ситуациях.
11. MeasuringU: Проблема исследования, оценивающего записи немодерируемых юзабилити-тестов. Разные исследователи выделяют разные интерфейсные проблемы и пересечение между ними не сильно большое.
12. NN/g: Эффект Хоторна, который может искажать результаты пользовательских исследований. Сам факт наблюдения за ними может повлиять на поведение.
13. Дмитрий Старков: Методы тестирования продуктов на базе алгоритмов.
#research
Measuringu
Can ChatGPT Replace UX Researchers?An Empirical Analysis of Comment Classifications – MeasuringU
1. The Pudding: Крутой обзор тёмных паттернов прекращения подписки. Они потратили свои деньги на эксперимент с парой десятков сервисов. Спойлер: потеряли почти все.
2. Lyft: Виджет live activity и «динамический остров» в iOS.
3. Creative Navy: Подробная памятка по дизайну дашбордов на основе своего многолетнего опыта.
4. Alex Ivanovs: Памятка по поддержке accessibility на разных уровнях.
5. Baymard Institute: Актуализировали список лучших практик для интернет-магазинов. Edward Scott сделал обзор из их недавнего исследования.
6. NN/g: Ограничения и проблемы экранных дикторов на мобильных.
7. Marcus Herrmann: Как поддержать accessibility в запросах на сбор персональных данных на сайтах.
8. Christopher Butler: Правильный ритм в подаче информации на длинных страницах, чтобы пользователи докручивали их до конца. Он ссылается на исследования Nielsen/Norman Group и Chartbeat на эту тему. Он также показывает пример перестройки длинной промо-страницы в более читабельный формат. И выделяет ключевые правила такого переосмысления.
9. Luke Wroblewski: Сценарии использования дополненной реальности.
10. Uber: Редизайн навигации. Они делали много интерактивных прототипов разного уровня сложности и активно тестировали их.
11. NN/g: Памятка по показу сообщений об ошибках в интерфейсе.
12. Creative Navy: Изучили и сравнили медицинские интерфейсы.
13. Adam Silver: Проблемы «залипающей» навигации на сайте и заблокированных кнопок в формах (это древний спор, я на его стороне).
14. Camryn Manker: Чеклист по поддержке accessibility в игровых интерфейсах.
15. Коллекция идиотских вариантов интерфейса правил использования сайта и реализации старого эппловского жеста «проведите, чтобы разблокировать».
16. NN/g: Особенности использования «шторок» в мобильных интерфейсах. Статья полезная, но с оговоркой про спорную рекомендацию всегда использовать явную иконку «крестика» для закрытия — не нужно переизобретать системные элементы операционных систем.
17. Luke Wroblewski: Напоминает, что нудные длинные туры при встрече нового пользователя часто бесполезны. И приводит пару примеров продуктов, которые поменяли их на реальную ценность.
18. Asma Aldrees и Denis Gračanin: Большое исследование государственных цифровых сервисов. Что пользователи ожидают от них и как системно подступаться к работе такими проектами.
19. Peter Ramsey: Дикая механика покупки билетов в сервисе Ticketmaster. Он ограничивает время на оплату, что в условиях вереницы партнёров уполовинивает шансы на покупку.
20. Baymard: Удачные и плохие интерфейсные приёмы, чтобы показать состав витаминов в интернет-аптеках.
21. NN/g: Короткая шпаргалка по «скелетным» экранам загрузки.
22. Jim Lewis и Jeff Sauro: Сравнительные исследования сайтов интернет-магазинов офисных товаров и интернет-магазинов электроники. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
The Pudding
How companies use dark patterns to keep you subscribed
Unsubscribing should be easy. It’s not.
На этой неделе снова будет выгрузка свежего по алгоритмическому дизайну в пару заходов. Пару месяцев не доходили руки собрать вместе (скорость появления нового запредельная), но момент за хвост сейчас пойман. Начнём с инструментов:
ДИЗАЙН
Framer сгенерирует сайт по текстовому описанию, а потом поможет докрутить отдельные элементы из набора предложений.
Figma купила нашумевший стартап Diagram, который запустил энтузиаст Jordan Singer с командой. Они делают простые и достаточно прагматичные решения, которые наверняка скоро попадут в Figma. В статье описаны несколько сценариев использования, которые уже помогут в повседневных задачах — например, автоматическая категоризация идей из брейнштормов (дико нудное дело).
Adobe Firefly теперь встроен и в Photoshop через функцию Generative Fill. Можно выделить место на фото и добавить туда любой объект. Как это работает. Это лучшая реализация алгоритмических функций в инструменте дизайна на текущий момент — они встроены органично в существующий процесс и прокачивают его, а не делают костыльные надстройки. Как и должны быть везде.
Adobe Express: Новый простой инструмент дизайна для несложных макетов и видео. Он умеет генерировать изображения и шрифты с помощью Firefly, готовит макет под разные размеры.
Adobe добавили в Illustrator экспериментальную функцию Generative Recolor. Она меняет цвета на сложных иллюстрациях с помощью их движка Firefly.
Uizard Autodesigner: Видео-обзор от Kim Alban.
Shaper: Вторая версия инструмента от Hayk An, который позволяет настраивать интерфейс, собранный на базе компонентов с токенами. Можно получить случайную комбинацию параметров, так что это игрушка на стыке алгоритмического дизайна.
Drag Your GAN: Можно простым способом указать, как нужно поменять параметры объекта или персонажа на фото.
Durer: Генерирует иллюстрации в вашем собственном стиле. Он учится на нескольких примерах.
Recraft: Генератор и редактор иконок и иллюстраций в разных стилях. Это смесь текстового запроса и выбора параметров.
Mandala: Интеграция Stable Diffusion в инструмент для 3D-моделирования Maya. А ещё там появится официальный ассистент на базе OpenAI.
Spline для 3D научился генерировать объекты по текстовому описанию и накладывать стиль по примеру.
Zoo: Сервис сравнивает результаты популярных инструментов генерации картинок по текстовому запросу.
Gamma App: Может сгенерировать черновик презентации с графикой на основе тезисов.
Shap-E: Новый проект OpenAI генерирует трёхмерные объекты по текстовому запросу. Научная публикация.
Insightface Swap: Бот для Midjourney грамотно вставит ваше лицо на сгенерированное фото или иллюстрацию.
Photoleap: Фоторедактор для мобильных, умеющих кучу приёмов по стилизации и переосмыслению фото.
Illustroke: Генератор векторных иллюстраций по текстовому запросу.
ClipDrop Uncrop: Дорисовать то, что было за границами изображения (примерно как Generative Fill у Photoshop).
UX-ИССЛЕДОВАНИЯ
Dovetail сможет сгруппировать инсайты в темы или набросать черновик инсайта.
ИНСТРУМЕНТЫ ДЛЯ ТЕКСТОВ
Яндекс Маркет генерирует описание товаров с помощью YandexGPT.
TikTok: Генератор сценариев для рекламы.
LinkedIn генерирует текст сопроводительного письма для отклика на вакансию.
ПРОМДИЗАЙН И АРХИТЕКТУРА
Toyota экспериментирует с алгоритмическим дизайном для работы над машинами. Это один из самых разумных процессов — дизайнер делает первый набросок стиля, дальше алгоритм предлагает несколько вариантов его оптимизации (например, для лучшей аэродинамики). Дизайнер выбирает одно из предложений и дорабатывает его.
Finch и PlanFinder: Планы помещений.
МУЗЫКА И ВИДЕО
TikTok Ripple генерирует и редактирует музыку. Можно напеть мотив и оно превратит его в заготовку песни.
Генератор музыки по текстовому описанию от Меты.
Synthesizer V: Генерирует вокал для музыки. Он обещает упростить ранние наброски песен.
NVIDIA Align Your Latents и Runway Gen-2: Видео по текстовому описанию.
Вторая часть — в четверг.
#al #algorithms
ДИЗАЙН
Framer сгенерирует сайт по текстовому описанию, а потом поможет докрутить отдельные элементы из набора предложений.
Figma купила нашумевший стартап Diagram, который запустил энтузиаст Jordan Singer с командой. Они делают простые и достаточно прагматичные решения, которые наверняка скоро попадут в Figma. В статье описаны несколько сценариев использования, которые уже помогут в повседневных задачах — например, автоматическая категоризация идей из брейнштормов (дико нудное дело).
Adobe Firefly теперь встроен и в Photoshop через функцию Generative Fill. Можно выделить место на фото и добавить туда любой объект. Как это работает. Это лучшая реализация алгоритмических функций в инструменте дизайна на текущий момент — они встроены органично в существующий процесс и прокачивают его, а не делают костыльные надстройки. Как и должны быть везде.
Adobe Express: Новый простой инструмент дизайна для несложных макетов и видео. Он умеет генерировать изображения и шрифты с помощью Firefly, готовит макет под разные размеры.
Adobe добавили в Illustrator экспериментальную функцию Generative Recolor. Она меняет цвета на сложных иллюстрациях с помощью их движка Firefly.
Uizard Autodesigner: Видео-обзор от Kim Alban.
Shaper: Вторая версия инструмента от Hayk An, который позволяет настраивать интерфейс, собранный на базе компонентов с токенами. Можно получить случайную комбинацию параметров, так что это игрушка на стыке алгоритмического дизайна.
Drag Your GAN: Можно простым способом указать, как нужно поменять параметры объекта или персонажа на фото.
Durer: Генерирует иллюстрации в вашем собственном стиле. Он учится на нескольких примерах.
Recraft: Генератор и редактор иконок и иллюстраций в разных стилях. Это смесь текстового запроса и выбора параметров.
Mandala: Интеграция Stable Diffusion в инструмент для 3D-моделирования Maya. А ещё там появится официальный ассистент на базе OpenAI.
Spline для 3D научился генерировать объекты по текстовому описанию и накладывать стиль по примеру.
Zoo: Сервис сравнивает результаты популярных инструментов генерации картинок по текстовому запросу.
Gamma App: Может сгенерировать черновик презентации с графикой на основе тезисов.
Shap-E: Новый проект OpenAI генерирует трёхмерные объекты по текстовому запросу. Научная публикация.
Insightface Swap: Бот для Midjourney грамотно вставит ваше лицо на сгенерированное фото или иллюстрацию.
Photoleap: Фоторедактор для мобильных, умеющих кучу приёмов по стилизации и переосмыслению фото.
Illustroke: Генератор векторных иллюстраций по текстовому запросу.
ClipDrop Uncrop: Дорисовать то, что было за границами изображения (примерно как Generative Fill у Photoshop).
UX-ИССЛЕДОВАНИЯ
Dovetail сможет сгруппировать инсайты в темы или набросать черновик инсайта.
ИНСТРУМЕНТЫ ДЛЯ ТЕКСТОВ
Яндекс Маркет генерирует описание товаров с помощью YandexGPT.
TikTok: Генератор сценариев для рекламы.
LinkedIn генерирует текст сопроводительного письма для отклика на вакансию.
ПРОМДИЗАЙН И АРХИТЕКТУРА
Toyota экспериментирует с алгоритмическим дизайном для работы над машинами. Это один из самых разумных процессов — дизайнер делает первый набросок стиля, дальше алгоритм предлагает несколько вариантов его оптимизации (например, для лучшей аэродинамики). Дизайнер выбирает одно из предложений и дорабатывает его.
Finch и PlanFinder: Планы помещений.
МУЗЫКА И ВИДЕО
TikTok Ripple генерирует и редактирует музыку. Можно напеть мотив и оно превратит его в заготовку песни.
Генератор музыки по текстовому описанию от Меты.
Synthesizer V: Генерирует вокал для музыки. Он обещает упростить ранние наброски песен.
NVIDIA Align Your Latents и Runway Gen-2: Видео по текстовому описанию.
Вторая часть — в четверг.
#al #algorithms
Framer
AI Tools in Framer
Enhance your website using Framer’s AI-powered tools: Generate new pages with advanced localization, brand the tone of your translations dynamically rewrite text for better copy.
Продолжу выгрузку накопившегося по алгоритмическому дизайну, которая копилась последние пару месяцев:
ДИЗАЙН-ПРОЦЕСС
1. Dan Mall: Простыми и чёткими мыслями пересказал стандартную логику процесса алгоритмического дизайна, актуальную на сегодняшний день. Она повторяется из года в год, не меняясь при смене волн хайпа.
2. Matty Brownell: Иллюстративная графика для бренда в едином стиле с помощью Midjourney.
3. David Truog: Смогут ли такие инструменты развиваться, если сами дизайнеры не будут поставлять им свежие обучающие данные из своих работ.
4. Jay Anthony: Реалистично ли писать сценарии для юзабилити-тестирования через ChatGPT. Конкретики мало, но ограничения подсвечены.
5. Как сделать иллюстративные QR-коды от nhciao через Stable Diffusion, которые работают на самом деле.
ПОЛЬЗОВАТЕЛЬСКОЕ ВЗАИМОДЕЙСТВИЕ С НИМИ
1. Jakob Nielsen: Современные генераторы по текстовому запросу — это новая интерфейсная парадигма после пакетной обработки в первых компьютерах и командной строки. Впервые пользователь описывает сам конечный результат, а не последовательность команд для его получения.
2. Luke Wroblewski: Прикрутил поиск по своему блогу на базе ChatGPT (включая видео и подкасты). Затея интересная — он отвечает на вопросы в свободной форме выводами из статей Люка (а он написал очень много материалов за 25 лет). Его мысли про стандартную иконку такого поиска через «магические искры».
3. Stephen P Anderson: Проблемы генераторов текстов а-ля ChatGPT. Они способны создавать черновики, но многие забывают, что эти черновики нужно критически анализировать и доводить до ума.
4. Jakob Nielsen: Одно из первых вменяемых исследований на тему продуктивности и качества работы специалистов, использующих ChatGPT. Они стали тратить меньше времени на написание черновиков, но больше на редактуру. В целом качество материалов достойное. Бонусом они традиционно шутканули на 1 апреля на эту тему.
5. Luke Wroblewski: Переход редакторов графики и видео от инструменто-центричных интерфейсов к объекто-центричным. Алгоритмический дизайн подталкивает к этому.
6. Maggie Appleton: Концепты взаимодействия с чат-ботами. Как они могут уточнять и дополнять текст.
КАК ВСЁ ЭТО РАБОТАЕТ
1. Алина Валяева: Политика фотобанков и сайтов вопросов и ответов по поводу использования контента, сгенерированного алгоритмами.
КУЛЬТУРНЫЙ ЭФФЕКТ
1. Amy Goodchild: Примеры алгоритмического дизайна из 50х и 60х. Забавно, что даже дискурс про роль таких инструментов местами такой же, как в текущую волну.
2. Fast Company: Значительная часть логотипов современных сервисов вокруг ИИ ходят вокруг разного рода шестигранников.
КАКИЕ РАБОТЫ УЙДУТ
Идущие и планирующиеся сокращения в IBM, Bild, Bluefocus Intelligent Communications Group Co.
НЕ ДЕЛАЙТЕ ТАК
1. Niloufar Salehi: Попробовал сервис Synthetic Users, который якобы генерирует персонажей на основе публичных данных без проведения пользовательских исследований. По факту это просто мусорная информация — не сильно лучше высосанных из пальца персонажей, которые пишут дизайнеры без исследований. ChatGPT создаёт похожие по бесполезности материалы.
2. Arvind Sanjeev: Как закрытые личные данные утекают для обучения алгоритмов. Например, многие генераторы лиц как будто ненастоящих людей на самом деле берут настоящие фото и просто немного дорабатывают их.
3. Использовались ли ваши данные или фото для обучения алгоритмов. Это часть более крупной инициативы Spawning по защите своих персональных данных от обработки.
4. Bloomberg: Как сервисы генерации изображений по текстовому запросу воспроизводят расовые и гендерные стереотипы.
#al #algorithms
ДИЗАЙН-ПРОЦЕСС
1. Dan Mall: Простыми и чёткими мыслями пересказал стандартную логику процесса алгоритмического дизайна, актуальную на сегодняшний день. Она повторяется из года в год, не меняясь при смене волн хайпа.
2. Matty Brownell: Иллюстративная графика для бренда в едином стиле с помощью Midjourney.
3. David Truog: Смогут ли такие инструменты развиваться, если сами дизайнеры не будут поставлять им свежие обучающие данные из своих работ.
4. Jay Anthony: Реалистично ли писать сценарии для юзабилити-тестирования через ChatGPT. Конкретики мало, но ограничения подсвечены.
5. Как сделать иллюстративные QR-коды от nhciao через Stable Diffusion, которые работают на самом деле.
ПОЛЬЗОВАТЕЛЬСКОЕ ВЗАИМОДЕЙСТВИЕ С НИМИ
1. Jakob Nielsen: Современные генераторы по текстовому запросу — это новая интерфейсная парадигма после пакетной обработки в первых компьютерах и командной строки. Впервые пользователь описывает сам конечный результат, а не последовательность команд для его получения.
2. Luke Wroblewski: Прикрутил поиск по своему блогу на базе ChatGPT (включая видео и подкасты). Затея интересная — он отвечает на вопросы в свободной форме выводами из статей Люка (а он написал очень много материалов за 25 лет). Его мысли про стандартную иконку такого поиска через «магические искры».
3. Stephen P Anderson: Проблемы генераторов текстов а-ля ChatGPT. Они способны создавать черновики, но многие забывают, что эти черновики нужно критически анализировать и доводить до ума.
4. Jakob Nielsen: Одно из первых вменяемых исследований на тему продуктивности и качества работы специалистов, использующих ChatGPT. Они стали тратить меньше времени на написание черновиков, но больше на редактуру. В целом качество материалов достойное. Бонусом они традиционно шутканули на 1 апреля на эту тему.
5. Luke Wroblewski: Переход редакторов графики и видео от инструменто-центричных интерфейсов к объекто-центричным. Алгоритмический дизайн подталкивает к этому.
6. Maggie Appleton: Концепты взаимодействия с чат-ботами. Как они могут уточнять и дополнять текст.
КАК ВСЁ ЭТО РАБОТАЕТ
1. Алина Валяева: Политика фотобанков и сайтов вопросов и ответов по поводу использования контента, сгенерированного алгоритмами.
КУЛЬТУРНЫЙ ЭФФЕКТ
1. Amy Goodchild: Примеры алгоритмического дизайна из 50х и 60х. Забавно, что даже дискурс про роль таких инструментов местами такой же, как в текущую волну.
2. Fast Company: Значительная часть логотипов современных сервисов вокруг ИИ ходят вокруг разного рода шестигранников.
КАКИЕ РАБОТЫ УЙДУТ
Идущие и планирующиеся сокращения в IBM, Bild, Bluefocus Intelligent Communications Group Co.
НЕ ДЕЛАЙТЕ ТАК
1. Niloufar Salehi: Попробовал сервис Synthetic Users, который якобы генерирует персонажей на основе публичных данных без проведения пользовательских исследований. По факту это просто мусорная информация — не сильно лучше высосанных из пальца персонажей, которые пишут дизайнеры без исследований. ChatGPT создаёт похожие по бесполезности материалы.
2. Arvind Sanjeev: Как закрытые личные данные утекают для обучения алгоритмов. Например, многие генераторы лиц как будто ненастоящих людей на самом деле берут настоящие фото и просто немного дорабатывают их.
3. Использовались ли ваши данные или фото для обучения алгоритмов. Это часть более крупной инициативы Spawning по защите своих персональных данных от обработки.
4. Bloomberg: Как сервисы генерации изображений по текстовому запросу воспроизводят расовые и гендерные стереотипы.
#al #algorithms
Danmall
“Artificial Intelligence & Humanity,” an article by Dan Mall
What I rely on AI for—and what I don’t.
Собрал дайджест продуктового дизайна за июнь 2023. visionOS и iOS17, алгоритмический дизайн, CSS для дизайн-систем, тренды в логотипах и упаковке, отдача от UX-исследований, куча нового в Figma, открытая библиотека книг, упрощение длинных страниц и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS
Некоторое количество свежего для дизайн-менеджеров:
1. Karin den Bouwmeester: Фреймворк для оценки выхлопа от пользовательских исследований в компании. Она делит их на влияние на бизнес и UX в целом, а также организацию и самих специалистов по исследованиям.
2. Design Dept.: Советы для дизайн-менеджеров в ситуациях экономического кризиса, когда компании колбасит.
3. IBM: Памятка для фасилитатора рабочих сессий. Как понять, что всё идёт хорошо.
4. NN/g: Чеклист для оценки качества отработки ошибок в интерфейсе. Это измеримый подход, к которому идёт шаблон в Excel.
5. Emma Boulton: Плюсы и минусы централизованной и погружённой оргструктуры для пользовательских исследователей. И показывает, как лучше всего отработать в каждой из ситуаций.
6. NN/g: Польза приглашения пользователей на воркшопы. Он описывает несколько форматов таких сессий и даёт советы по их проведению.
7. Andrea Mignolo: Перечисляет фреймворки для описания лидерских стилей. И делает особенный акцент на коучинговом стиле.
8. Shamsi Brinn: Концепция «no handoff» (без передачи проектных артефактов от дизайнера разработчикам). Это процесс, в котором нет явного перехода между этапами, а постоянная совместная работа.
#management
1. Karin den Bouwmeester: Фреймворк для оценки выхлопа от пользовательских исследований в компании. Она делит их на влияние на бизнес и UX в целом, а также организацию и самих специалистов по исследованиям.
2. Design Dept.: Советы для дизайн-менеджеров в ситуациях экономического кризиса, когда компании колбасит.
3. IBM: Памятка для фасилитатора рабочих сессий. Как понять, что всё идёт хорошо.
4. NN/g: Чеклист для оценки качества отработки ошибок в интерфейсе. Это измеримый подход, к которому идёт шаблон в Excel.
5. Emma Boulton: Плюсы и минусы централизованной и погружённой оргструктуры для пользовательских исследователей. И показывает, как лучше всего отработать в каждой из ситуаций.
6. NN/g: Польза приглашения пользователей на воркшопы. Он описывает несколько форматов таких сессий и даёт советы по их проведению.
7. Andrea Mignolo: Перечисляет фреймворки для описания лидерских стилей. И делает особенный акцент на коучинговом стиле.
8. Shamsi Brinn: Концепция «no handoff» (без передачи проектных артефактов от дизайнера разработчикам). Это процесс, в котором нет явного перехода между этапами, а постоянная совместная работа.
#management
UXinsight
How to measure UX research impact: A multi-level framework
We propose a framework for defining and measuring UX research impact across different levels: outcome, organisation and UX research practice.
Свежая подборка свежего про свежие интерфейсные паттерны и лучшие практики:
1. Rauno Freiberg: Под микроскопом разбирает жесты и анимацию интерфейса в операционках Apple. Он делал интересный концепт MercuryOS, которая ощущается так же плавно и аккуратно, как и они.
2. Swiggy: Отличный рассказ о работе над конкретным компонентом кнопки в сценарии оформления заказа. Как они замеряли связанные метрики и доработали первую версию, уделяя внимание небольшим, но критичным деталям.
3. Wikipedia: Как делали редизайн.
4. Dan Brown: Рассуждает о сложностях описания информационной архитектуры продуктов, где интерфейс строится вокруг центрального объекта (например, календарь или документ). А ещё — о корпоративных продуктах и их отличии от продуктов для массового пользователя.
5. NN/g: Советы по дизайну интерфейса виртуальной очереди. Как показывать пользователю статус и сообщать о важных вещах.
6. Robert Goesch: Интересный концепт поиска авиабилетов. Их агентство DUMBO попробовало пересмотреть порядок действий пользователя, чтобы оптимизировать основной (по их мнению) сценарий использования.
7. Indeed: Роль прототипов в проверке продуктовых решений. В статье есть ещё одна классификация глубины их проработки и общие советы по применению.
8. IBM: Простой чеклист по свежему стандарту accessibility WCAG 2.2.
9. MeasuringU: Новое сравнительное исследование сайтов парков развлечений. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
1. Rauno Freiberg: Под микроскопом разбирает жесты и анимацию интерфейса в операционках Apple. Он делал интересный концепт MercuryOS, которая ощущается так же плавно и аккуратно, как и они.
2. Swiggy: Отличный рассказ о работе над конкретным компонентом кнопки в сценарии оформления заказа. Как они замеряли связанные метрики и доработали первую версию, уделяя внимание небольшим, но критичным деталям.
3. Wikipedia: Как делали редизайн.
4. Dan Brown: Рассуждает о сложностях описания информационной архитектуры продуктов, где интерфейс строится вокруг центрального объекта (например, календарь или документ). А ещё — о корпоративных продуктах и их отличии от продуктов для массового пользователя.
5. NN/g: Советы по дизайну интерфейса виртуальной очереди. Как показывать пользователю статус и сообщать о важных вещах.
6. Robert Goesch: Интересный концепт поиска авиабилетов. Их агентство DUMBO попробовало пересмотреть порядок действий пользователя, чтобы оптимизировать основной (по их мнению) сценарий использования.
7. Indeed: Роль прототипов в проверке продуктовых решений. В статье есть ещё одна классификация глубины их проработки и общие советы по применению.
8. IBM: Простой чеклист по свежему стандарту accessibility WCAG 2.2.
9. MeasuringU: Новое сравнительное исследование сайтов парков развлечений. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
rauno.me
Invisible Details of Interaction Design
What makes great interactions feel right?
Сегодня — всё, что попадало в дайджест о дизайн-системах за последние месяцы:
1. Lukas Oppermann: Подробнейше разложил по полочкам системную работу с новыми токенами в Figma. Как реализовать все аспекты, важные для дизайн-системы и связать её с компонентами в коде. Ну и рассказал про текущие возможности и ограничения бета-версии.
2. Авито: Как визуально срифмовали набор иконок со шрифтом. Отличная пошаговая инструкция для важной задачи, до которой редко добираются команды.
3. Pinterest: Измерение «покрытия» продуктов на уровне Figma. Это главный показатель успеха внедрения и у них получился отличный и не сильно затратный подход.
4. Booking.com: Процесс работы над компонентом (он есть в Figma). И рассказывает о других инструментах в работе над ней.
5. Intuit: Работа над семантическими токенами. Как они пришли к их архитектуре и типизации.
6. Lyft: Процесс внедрения платформы для платежей. Самая ценная часть статьи — подход к оценке новых запросов в дизайн-систему.
7. Storybook: Дополнение, которое позволяет переключать тему оформления для любого фреймворка.
8. Wikipedia: Как искали единую сетку для редизайна.
9. Proportio: Сервис помогает построить пропорциональную систему размеров, которая объединяет шрифт, иконки и отступы. Обзор от автора. Правда, сейчас там есть странности типа размера иконок 23x23.
10. Stephanie Eckles: Все современные приёмы CSS для описания компонентов и дизайн-систем в целом.
#designsystems
1. Lukas Oppermann: Подробнейше разложил по полочкам системную работу с новыми токенами в Figma. Как реализовать все аспекты, важные для дизайн-системы и связать её с компонентами в коде. Ну и рассказал про текущие возможности и ограничения бета-версии.
2. Авито: Как визуально срифмовали набор иконок со шрифтом. Отличная пошаговая инструкция для важной задачи, до которой редко добираются команды.
3. Pinterest: Измерение «покрытия» продуктов на уровне Figma. Это главный показатель успеха внедрения и у них получился отличный и не сильно затратный подход.
4. Booking.com: Процесс работы над компонентом (он есть в Figma). И рассказывает о других инструментах в работе над ней.
5. Intuit: Работа над семантическими токенами. Как они пришли к их архитектуре и типизации.
6. Lyft: Процесс внедрения платформы для платежей. Самая ценная часть статьи — подход к оценке новых запросов в дизайн-систему.
7. Storybook: Дополнение, которое позволяет переключать тему оформления для любого фреймворка.
8. Wikipedia: Как искали единую сетку для редизайна.
9. Proportio: Сервис помогает построить пропорциональную систему размеров, которая объединяет шрифт, иконки и отступы. Обзор от автора. Правда, сейчас там есть странности типа размера иконок 23x23.
10. Stephanie Eckles: Все современные приёмы CSS для описания компонентов и дизайн-систем в целом.
#designsystems
Medium
Getting started with native design tokens in Figma
How to use Figma variables to implement different design token strategies
1 сентября стартует десятый поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education. На первых девяти отучились более 550 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: 1C, ABBYY, AIC, Ак Барс, Альфа-Банк, Apalon, App in the Air, Arrival, Aviasales, Avito, Badoo, BBC, Билайн, БКС, ВТБ, Chatfuel, Clay, Газпром, de Bijenkorf, Delivery Club, Детский мир, Dodo Pizza, ДОМ.РФ, EPAM, Foodplex, HeadHunter, Heads & Hands, Hoff, inDriver, Joom, Kaspi, Klarna, Комитет, Красцветмет, Леруа Мерлен, Литрес, Loóna, Луч, MacPaw, Mailchimp, Mail.ru Group, Манго Офис, ManyChat, М.Видео, Microsoft, Miro, Модульбанк, МосБиржа, МТС, Naumen, Okko, OneTwoTrip, OpenWeb, Opera, Открытие, Ozon, PayPal, Петрович, ПИК, Pinkman, ПСБ, QIWI, Qlean, Райффайзенбанк, Rambler Group, РБК, Readdle, Redmadrobot, Reg.ru, Ренессанс Страхование, Росбанк, Россельхозбанк, Ростелеком, S7, Сбербанк, Ситимобил, Спортмастер, Столото, Selectel, Semrush, Skyeng, Tele2, Тинькофф, Трипстер, TomTom, Touch Instinct, Точка, Учи.ру, Уралхим, Финам, ЦИАН, Эксмо, Voximplant, Wargaming, Wrike, X5, Яндекс и многих других.
Я полностью перезаписал все видео, переехал на новую образовательную платформу и постоянно развиваю формат домашних заданий и вебинаров. Курс построен на базе будущей книги по паттернам дизайн-менеджмента (идёт корректура в издательстве). Какие-то части вы уже могли прочитать ранее и, возможно, знакомы с общей концепцией модели зрелости дизайна и продвижения по ней, но это около 20% материала курса.
Получился огромный массив знаний из 37 уроков на 10 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 4 месяца. Помимо видео-лекций есть домашние задания и вебинары после каждого блока. Результат — рабочая дизайн-стратегия, которая основана на проблемах и целях вашей компании. Я постепенно добавляю шаблоны для домашних заданий, которые здорово структурируют мысли. Проверяю всё сам.
Самые вовлечённые студенты внедряли улучшения в дизайн-командах по ходу курса, так что к окончанию получили осязаемый выхлоп :)
#management
Я полностью перезаписал все видео, переехал на новую образовательную платформу и постоянно развиваю формат домашних заданий и вебинаров. Курс построен на базе будущей книги по паттернам дизайн-менеджмента (идёт корректура в издательстве). Какие-то части вы уже могли прочитать ранее и, возможно, знакомы с общей концепцией модели зрелости дизайна и продвижения по ней, но это около 20% материала курса.
Получился огромный массив знаний из 37 уроков на 10 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 4 месяца. Помимо видео-лекций есть домашние задания и вебинары после каждого блока. Результат — рабочая дизайн-стратегия, которая основана на проблемах и целях вашей компании. Я постепенно добавляю шаблоны для домашних заданий, которые здорово структурируют мысли. Проверяю всё сам.
Самые вовлечённые студенты внедряли улучшения в дизайн-командах по ходу курса, так что к окончанию получили осязаемый выхлоп :)
#management
Bang Bang Education
Курс «Паттерны дизайн-менеджмента»
Курс «Паттерны дизайн-менеджмента» для опытных дизайнеров — о том, как дизайн-менеджмент помогает улучшать цифровые продукты не только в макетах, но и в реальной жизни. Вы изучите инструменты, методы и организационные подходы — и попробуете применить их в…
И снова массивный дроп свежего про пользовательские исследования:
1. Jim Lewis и Jeff Sauro: Сравнивают несколько чеклистов для оценки компьютерной грамотности пользователей.
2. Lyft: Системный подход, который поможет презентовать результаты исследований команде. Как обернуть их в историю, которая подсвечивает главное и за которой интересно следить.
3. MeasuringU: Памятка по использованию метода тестирования интерфейсов с помощью «первого клика» (она же в виде шпаргалки). Они также изучили, насколько метод клик-тестов на макетах позволяет предугадать реальное поведение пользователя на сайте. В целом — очень близко.
4. NN/g: Изучили сервисы для обработки результатов исследований, которые обещают готовить инсайты на их основе. В целом всё плохо — корявые выводы, невозможность отследить исходный материал конкретной сессии, непонимание контекста.
5. Marvin: База знаний и инсайтов из пользовательских исследований. Помогают разбирать заметки и раскладывать их по категориям с помощью алгоритмов.
6. NN/g: Как работать с матрицей CSD (Certainties, Suppositions, Doubts). Она помогает разложить предположения о пользователях по стопкам (уверены, предполагаем, сомневаемся) и системно работать по повышению степени уверенности.
7. David Tang: Ограничения и риски демократизации исследований в компании. В ней есть польза, но только если это управляемый процесс, который решает правильные задачи.
8. Condens: Метод кабинетных исследований и ситуации, в которых он полезен.
9. User Interviews: Памятка по поиску и отбору респондентов. А также советы Mary Nolan для B2B-продуктов.
10. User Interviews: Пообщались с несколькими продуктовыми командами и узнали, как они работают идеологии постоянно идущих исследований.
11. Rohan Irvine: Советы по выстраиванию ResearchOps в компании. Он делится опытом удачных и проблемных ситуаций из компаний, где внедрял эти подходы.
12. Jeff Sauro и Jim Lewis: Продолжают изучать метод юзабилити-тестирования, когда респондент проговаривает проблемы вслух. Так респонденты находят больше проблем, хотя они не проверяли реальность этих проблем.
13. NN/g: Мощный глоссарий терминов в количественных пользовательских исследованиях.
14. Robert McWhirter: Процесс проверки продуктовых гипотез на самой ранней стадии с помощью исследований и экспериментов.
15. NN/g: Памятка по проведению экспертной оценки. Они дают полезный шаблон, который основан на классических 10 эвристиках Нильсена.
#research
1. Jim Lewis и Jeff Sauro: Сравнивают несколько чеклистов для оценки компьютерной грамотности пользователей.
2. Lyft: Системный подход, который поможет презентовать результаты исследований команде. Как обернуть их в историю, которая подсвечивает главное и за которой интересно следить.
3. MeasuringU: Памятка по использованию метода тестирования интерфейсов с помощью «первого клика» (она же в виде шпаргалки). Они также изучили, насколько метод клик-тестов на макетах позволяет предугадать реальное поведение пользователя на сайте. В целом — очень близко.
4. NN/g: Изучили сервисы для обработки результатов исследований, которые обещают готовить инсайты на их основе. В целом всё плохо — корявые выводы, невозможность отследить исходный материал конкретной сессии, непонимание контекста.
5. Marvin: База знаний и инсайтов из пользовательских исследований. Помогают разбирать заметки и раскладывать их по категориям с помощью алгоритмов.
6. NN/g: Как работать с матрицей CSD (Certainties, Suppositions, Doubts). Она помогает разложить предположения о пользователях по стопкам (уверены, предполагаем, сомневаемся) и системно работать по повышению степени уверенности.
7. David Tang: Ограничения и риски демократизации исследований в компании. В ней есть польза, но только если это управляемый процесс, который решает правильные задачи.
8. Condens: Метод кабинетных исследований и ситуации, в которых он полезен.
9. User Interviews: Памятка по поиску и отбору респондентов. А также советы Mary Nolan для B2B-продуктов.
10. User Interviews: Пообщались с несколькими продуктовыми командами и узнали, как они работают идеологии постоянно идущих исследований.
11. Rohan Irvine: Советы по выстраиванию ResearchOps в компании. Он делится опытом удачных и проблемных ситуаций из компаний, где внедрял эти подходы.
12. Jeff Sauro и Jim Lewis: Продолжают изучать метод юзабилити-тестирования, когда респондент проговаривает проблемы вслух. Так респонденты находят больше проблем, хотя они не проверяли реальность этих проблем.
13. NN/g: Мощный глоссарий терминов в количественных пользовательских исследованиях.
14. Robert McWhirter: Процесс проверки продуктовых гипотез на самой ранней стадии с помощью исследований и экспериментов.
15. NN/g: Памятка по проведению экспертной оценки. Они дают полезный шаблон, который основан на классических 10 эвристиках Нильсена.
#research
Measuringu
Measuring Tech Savviness with Technical Activity Checklists – MeasuringU
Новёхонькая подборка об алгоритмическом дизайне собралась в рекордные сроки:
1. Adobe Photoshop: Новая функция Generative Expand на основе их движка алгоритмического дизайна Firefly. Она продолжает Generative Fill, но более удобна для дорисовки изображения за текущими границами. Как она работает.
2. Stable Diffusion XL 1.0: Выпустили новую версию для всех.
3. Clipdrop Stable Doodle: Превращает наброски от руки в фото и иллюстрации.
4. GetIMG.AI: Ещё один инструмент алгоритмического дизайна, который собрал вместе кучу модных утилит — генерация картинок и расширение существующих изображений, обучение собственного стиля и всё такое.
5. Canva Magic Design: Запустили алгоритмического помощника, который помогает генерировать шаблоны, изображения и другие аспекты дизайна.
6. Benedict Evans: Алгоритмические инструменты не сократят рабочие места, а наоборот — создадут много новых. Он ссылается на парадокс Jevons, который показал — когда какой-то ресурс становится дешевле, его наоборот начинают потреблять больше. И приводит много подходящих примеров.
7. Rest of World: Журнал пообщался с низкооплачиваемыми работниками в нескольких профессиях (иллюстратор, редактор, ассистент, аналитик), которых потенциально могут заменить алгоритмы. Что они делают с этим прямо сейчас и видят ли свою полную замену (скорее нет, хотя работать придётся больше). Интересно, что журналисты попросили сделать одинаковую задачу руками и с помощью новых инструментов.
8. Shopify Sidekick: Готовят алгоритмического помощника. Он анализирует исторические данные по интернет-магазину, предлагает рекомендации по перестройке ассортимента и может обновить сайт по этим рекомендациям.
9. Per Axbom: Проблемы с этикой и качеством инструментов алгоритмического дизайна в виде инфографики.
10. YouTube: Бета-версия пересказа содержания видео.
11. SciSpace Copilot: Плагин для Chrome помогает анализировать научные публикации и выделять из них основное.
12. LoopPanel: Помогает обрабатывать заметки из пользовательских интервью и выделять инсайты из них.
13. Kraftful: Помогают разбирать обратную связь от пользователей и раскладывать её по категориям с помощью ChatGPT.
14. Pika Art: Генератор видео по текстовому описанию.
15. HiFa: Экспериментальный инструмент генерирует 3D-модели по текстовому описанию.
16. Рекламная кампания очков Georgetown Optician, которую агентство Design Army сделало в Midjourney.
#al #algorithms
1. Adobe Photoshop: Новая функция Generative Expand на основе их движка алгоритмического дизайна Firefly. Она продолжает Generative Fill, но более удобна для дорисовки изображения за текущими границами. Как она работает.
2. Stable Diffusion XL 1.0: Выпустили новую версию для всех.
3. Clipdrop Stable Doodle: Превращает наброски от руки в фото и иллюстрации.
4. GetIMG.AI: Ещё один инструмент алгоритмического дизайна, который собрал вместе кучу модных утилит — генерация картинок и расширение существующих изображений, обучение собственного стиля и всё такое.
5. Canva Magic Design: Запустили алгоритмического помощника, который помогает генерировать шаблоны, изображения и другие аспекты дизайна.
6. Benedict Evans: Алгоритмические инструменты не сократят рабочие места, а наоборот — создадут много новых. Он ссылается на парадокс Jevons, который показал — когда какой-то ресурс становится дешевле, его наоборот начинают потреблять больше. И приводит много подходящих примеров.
7. Rest of World: Журнал пообщался с низкооплачиваемыми работниками в нескольких профессиях (иллюстратор, редактор, ассистент, аналитик), которых потенциально могут заменить алгоритмы. Что они делают с этим прямо сейчас и видят ли свою полную замену (скорее нет, хотя работать придётся больше). Интересно, что журналисты попросили сделать одинаковую задачу руками и с помощью новых инструментов.
8. Shopify Sidekick: Готовят алгоритмического помощника. Он анализирует исторические данные по интернет-магазину, предлагает рекомендации по перестройке ассортимента и может обновить сайт по этим рекомендациям.
9. Per Axbom: Проблемы с этикой и качеством инструментов алгоритмического дизайна в виде инфографики.
10. YouTube: Бета-версия пересказа содержания видео.
11. SciSpace Copilot: Плагин для Chrome помогает анализировать научные публикации и выделять из них основное.
12. LoopPanel: Помогает обрабатывать заметки из пользовательских интервью и выделять инсайты из них.
13. Kraftful: Помогают разбирать обратную связь от пользователей и раскладывать её по категориям с помощью ChatGPT.
14. Pika Art: Генератор видео по текстовому описанию.
15. HiFa: Экспериментальный инструмент генерирует 3D-модели по текстовому описанию.
16. Рекламная кампания очков Georgetown Optician, которую агентство Design Army сделало в Midjourney.
#al #algorithms
Adobe
Photoshop releases new Generative Expand workflow and global language support for Firefly-powered features | Adobe Blog
Дайджест продуктового дизайна за июль 2023. Алгоритмический дизайн, интранеты, индикаторы загрузки, детали анимации iOS, токены в дизайн-системах, матрица CSD, бронирование билетов, подача результатов исследований, клик-тесты, пространственный дизайн и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS
Ссылочно-протеиновая масса для тех, кто ищет связь бренда с интерфейсом. Что набралось за пару месяцев:
Evil Martians: Фантастическая статья про рифмование шрифта и иконок. Универсальный подход для поиска такой рифмы исходя из особенностей шрифта. Ровно по такой логике мы сделали решение для Райффайзена, хотя здесь целая система.
Pinterest: Язык анимации от американского агентства DIA.
OpenAI от французско-американского агентства Area17 (больше деталей).
TheFork: Ребрендинг сервиса бронирования ресторанов от британского агентства Design Studio.
InVision: Обновление айдентики от британского агентства Ensemble.
Askly: Айдентика сервиса для общения с пользователями сайта от эстонского агентства Tabasco.
Unmind: Ребрендинг сервиса для ментального здоровья сотрудников компаний от американского агентства Ragged Edge.
Glassdoor: Ребрендинг сайта о работодателях от британского агентства Koto.
Guild: Ребрендинг карьерно-образовательного сервиса от американского агентства Collins — .
Airtm: Ребрендинг финтеха от британского агентства Design Studio.
MUX: Ребрендинг видео-платформы от австралийского агентства For the People. История работы над проектом.
AMP: Ребрендинг музыкального сервиса от британского агентства Koto.
Kili: Ребрендинг ИИ-платформы от американского агентства Ragged Edge.
Pley: Ребрендинг игровой компании от шведского агентства Essen.
Replay: Ребрендинг компании генетического анализа от британского агентства Koto.
Runway: Ребрендинг финтеха от американского агентства Reform Collective.
Антипример для Nike от агентства Instrument. Это яркий бренд с простейшими характерными базовыми приёмами, но для него сделали максимально бесхребетную и унылую дизайн-систему.
Ostro: Ребрединг медицинского сервиса от испанского агентства Mucho.
DailyMotion: Ребрендинг видео-сервиса.
Lookout: Ребрендинг компании по кибер-безопасности от американского агентства Emotive Brand.
#branding
Evil Martians: Фантастическая статья про рифмование шрифта и иконок. Универсальный подход для поиска такой рифмы исходя из особенностей шрифта. Ровно по такой логике мы сделали решение для Райффайзена, хотя здесь целая система.
Pinterest: Язык анимации от американского агентства DIA.
OpenAI от французско-американского агентства Area17 (больше деталей).
TheFork: Ребрендинг сервиса бронирования ресторанов от британского агентства Design Studio.
InVision: Обновление айдентики от британского агентства Ensemble.
Askly: Айдентика сервиса для общения с пользователями сайта от эстонского агентства Tabasco.
Unmind: Ребрендинг сервиса для ментального здоровья сотрудников компаний от американского агентства Ragged Edge.
Glassdoor: Ребрендинг сайта о работодателях от британского агентства Koto.
Guild: Ребрендинг карьерно-образовательного сервиса от американского агентства Collins — .
Airtm: Ребрендинг финтеха от британского агентства Design Studio.
MUX: Ребрендинг видео-платформы от австралийского агентства For the People. История работы над проектом.
AMP: Ребрендинг музыкального сервиса от британского агентства Koto.
Kili: Ребрендинг ИИ-платформы от американского агентства Ragged Edge.
Pley: Ребрендинг игровой компании от шведского агентства Essen.
Replay: Ребрендинг компании генетического анализа от британского агентства Koto.
Runway: Ребрендинг финтеха от американского агентства Reform Collective.
Антипример для Nike от агентства Instrument. Это яркий бренд с простейшими характерными базовыми приёмами, но для него сделали максимально бесхребетную и унылую дизайн-систему.
Ostro: Ребрединг медицинского сервиса от испанского агентства Mucho.
DailyMotion: Ребрендинг видео-сервиса.
Lookout: Ребрендинг компании по кибер-безопасности от американского агентства Emotive Brand.
#branding
evilmartians.com
Icon transcendence: customizing icons to complement fonts—Martian Chronicles, Evil Martians’ team blog
There are many lovely open source icon sets out there, but sometimes, we just need to 'transcend' them. Product Designer Gleb Stroganov shows us how to craft customized icons by leveraging product font styles, bridging two key interface elements—and giving…
Ещё чутка свежих интерфейсных паттернов и лучших практик:
1. Тарас Бакушевич: Удачные практики создания индикаторов загрузки для разных ситуаций.
2. GNOME: Новый способ организации окон программ в операционной системе. Это «мозаика» — смесь плитки и свободного расположения.
3. Пошаговые методички по методам проектирования, дизайна и исследования интерфейсов от Университета Аризоны.
4. Léonie Watson и Rakesh Paladugula: Основные тезисы из дискуссии о поддержке accessibility. Получился отличный чеклист.
5. NN/g: Тренды в интранетах 2023 года. Недавно они анонсировали победителей своих ежегодных наград.
6. Hajira Atheeque: Подробно разбирает принципы пространственного дизайна в Apple Vision.
7. NN/g: Памятка по дизайну аккордеонов в интерфейсах. Когда они работают и когда мешают.
8. Hannah Milan: Разные способы наложения текста на изображение в вебе, которые хорошо поддерживают accessibility. Часть 2.
#patterns
1. Тарас Бакушевич: Удачные практики создания индикаторов загрузки для разных ситуаций.
2. GNOME: Новый способ организации окон программ в операционной системе. Это «мозаика» — смесь плитки и свободного расположения.
3. Пошаговые методички по методам проектирования, дизайна и исследования интерфейсов от Университета Аризоны.
4. Léonie Watson и Rakesh Paladugula: Основные тезисы из дискуссии о поддержке accessibility. Получился отличный чеклист.
5. NN/g: Тренды в интранетах 2023 года. Недавно они анонсировали победителей своих ежегодных наград.
6. Hajira Atheeque: Подробно разбирает принципы пространственного дизайна в Apple Vision.
7. NN/g: Памятка по дизайну аккордеонов в интерфейсах. Когда они работают и когда мешают.
8. Hannah Milan: Разные способы наложения текста на изображение в вебе, которые хорошо поддерживают accessibility. Часть 2.
#patterns
Medium
Loading & progress indicators — UI Components series
Engage users and enhance waiting experiences with these simple recommendations.
Первые полсотни мини-выпусков дайджеста о пользовательских исследованиях: done.
1. NN/g: Памятка по формулировкам вопросов в опросниках.
2. Google: Интересный метод для регулярного замера отношения пользователей к функциональности через серию стандартизированных опросов.
3. Okta: Перевод базы знаний и инсайтов из старого инструмента в Dovetail. Интересно, что рынок дозрел и до таких историй.
4. Roberta Dombrowski: Советы по поиску направлений для стратегических исследований и расстановке приоритетов между ними.
5. Jim Lewis и Jeff Sauro: Изучили, насколько влияет наличие нейтрального варианта ответа в стандартизированных интерфейсных шкалах опросов. В целом — не особо.
6. Jim Ross: Изменения в профессии пользовательского исследователя за последние 25 лет. Терминология, зона ответственности, формат проектов и т.п. MeasuringU также изучили изменения названий профессии.
7. NN/g: Советы по оплате респондентам в дневниковых исследованиях. Она влияет на детальность этих само-отчётов.
8. Lisa van Ekeren: Созданиие базы знаний из прошлых исследований на базе SharePoint.
#research
1. NN/g: Памятка по формулировкам вопросов в опросниках.
2. Google: Интересный метод для регулярного замера отношения пользователей к функциональности через серию стандартизированных опросов.
3. Okta: Перевод базы знаний и инсайтов из старого инструмента в Dovetail. Интересно, что рынок дозрел и до таких историй.
4. Roberta Dombrowski: Советы по поиску направлений для стратегических исследований и расстановке приоритетов между ними.
5. Jim Lewis и Jeff Sauro: Изучили, насколько влияет наличие нейтрального варианта ответа в стандартизированных интерфейсных шкалах опросов. В целом — не особо.
6. Jim Ross: Изменения в профессии пользовательского исследователя за последние 25 лет. Терминология, зона ответственности, формат проектов и т.п. MeasuringU также изучили изменения названий профессии.
7. NN/g: Советы по оплате респондентам в дневниковых исследованиях. Она влияет на детальность этих само-отчётов.
8. Lisa van Ekeren: Созданиие базы знаний из прошлых исследований на базе SharePoint.
#research
Nielsen Norman Group
Writing Good Survey Questions: 10 Best Practices
Designing a good survey is harder than it may seem. Ensure accurate and reliable data by writing questions that are appropriate for the method and worded to minimize bias.
Дайджест продуктового дизайна за август 2023. Дизайн-культура Airbnb, мега-список книг, алгоритмический дизайн, дизайн-системы и токены, интерфейсы мастеров настройки, принципы дизайна, базы знаний исследований, управление роботами и ещё полсотни свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS
Напомню, что его можно получать разными способами:
— vc.ru
— ВКонтакте
— RSS
Обновление базы знаний по дизайн-системам, выпуск №40:
Lukas Oppermann: Карта лиц, принимающих решения, для дизайн-систем. Он собрал разные профили и роли таких людей, плюс методы коммуникации с ними.
NN/g: Причины выбора пользователями тёмной темы и реальный эффект от изначальных постулатов пользы от неё. А также собрали советы по внедрению, включая подсветку самых проблемных мест.
Zag: Коллекция API для дизайн-систем обещает решить проблему поддержки разных компонентных фреймворков типа React, Vue и Solid. Он даёт логику поведения, которая будет одинаково работать в любом из них.
Spotify: Следующее поколение их дизайн-системы Encore. Она объединяет 45 платформ вроде компьютеров, телефонов, планшетов, телевизоров и т.п. Со временем правила стали более жёсткими, чтобы сохранить целостность.
Captiv8: Внедрение цветовых семантических токенов на базе цветовой модели CIELAB.
Storybook: Плагин для визуального тестирования компонентов. Он автоматически сравнивает новую версию с предыдущей и показывает разницу.
Melissa McArthur: Пошаговая инструкция по созданию токенов с помощью новых переменных Figma.
Dave Rupert: Анализирует, почему потенциально годный стандарт веб-компонентов не шибко популярен. Полемика Nolan Lawson.
Radix UI: Фреймворк для простых дизайн-систем.
#designsystems
Lukas Oppermann: Карта лиц, принимающих решения, для дизайн-систем. Он собрал разные профили и роли таких людей, плюс методы коммуникации с ними.
NN/g: Причины выбора пользователями тёмной темы и реальный эффект от изначальных постулатов пользы от неё. А также собрали советы по внедрению, включая подсветку самых проблемных мест.
Zag: Коллекция API для дизайн-систем обещает решить проблему поддержки разных компонентных фреймворков типа React, Vue и Solid. Он даёт логику поведения, которая будет одинаково работать в любом из них.
Spotify: Следующее поколение их дизайн-системы Encore. Она объединяет 45 платформ вроде компьютеров, телефонов, планшетов, телевизоров и т.п. Со временем правила стали более жёсткими, чтобы сохранить целостность.
Captiv8: Внедрение цветовых семантических токенов на базе цветовой модели CIELAB.
Storybook: Плагин для визуального тестирования компонентов. Он автоматически сравнивает новую версию с предыдущей и показывает разницу.
Melissa McArthur: Пошаговая инструкция по созданию токенов с помощью новых переменных Figma.
Dave Rupert: Анализирует, почему потенциально годный стандарт веб-компонентов не шибко популярен. Полемика Nolan Lawson.
Radix UI: Фреймворк для простых дизайн-систем.
#designsystems
Medium
Stakeholder management for design systems
The success of a design system depends more on stakeholder management than on the quality of its components.
Мини-подборка для дизайн-менеджеров и тех, кто тоже тащит эти задачи:
1. Brian Chesky: Мощное интервью с основателем и главой Airbnb, которое Dylan Field взял у него на Figma Config 2023. Он один из редких дизайнеров-основателей компании такой крупной компании и рассказал о перестройке организации во времена ковидного кризиса. Это не самая типичная история, но крутой пример того, какой эффект может иметь дизайнерский взгляд на все вещи в компании. Такие мощные мотивационные публикации выходят несколько раз в десятилетие.
2. Figma: Поэтапный запуск бета-версии режима разработчика. Они ориентировались на WAU (еженедельные активные пользователи) и настроили оперативные каналы сбора обратной связи для быстрой доработки интерфейса.
3. Indeed: Создание принципов дизайн-команды. Хорошая и простая памятка по процессу.
4. NN/g: Формат карты взаимоотношений дизайнера в компании. Этот инструмент похож на карту лиц, принимающих решения. Шаблон ― https://miro.com/app/board/uXjVM3IMpAA=/.
5. NN/g: Проблемы кросс-функционального взаимодействия при работе над дизайном. И даёт рекомендации по снижению рисков.
6. Dan Ramsden: Предлагает свою модель креативного процесса, потому что считает ограничения «двойного алмаза» проблемой. Это некий трёхмерный треугольник.
#management
1. Brian Chesky: Мощное интервью с основателем и главой Airbnb, которое Dylan Field взял у него на Figma Config 2023. Он один из редких дизайнеров-основателей компании такой крупной компании и рассказал о перестройке организации во времена ковидного кризиса. Это не самая типичная история, но крутой пример того, какой эффект может иметь дизайнерский взгляд на все вещи в компании. Такие мощные мотивационные публикации выходят несколько раз в десятилетие.
2. Figma: Поэтапный запуск бета-версии режима разработчика. Они ориентировались на WAU (еженедельные активные пользователи) и настроили оперативные каналы сбора обратной связи для быстрой доработки интерфейса.
3. Indeed: Создание принципов дизайн-команды. Хорошая и простая памятка по процессу.
4. NN/g: Формат карты взаимоотношений дизайнера в компании. Этот инструмент похож на карту лиц, принимающих решения. Шаблон ― https://miro.com/app/board/uXjVM3IMpAA=/.
5. NN/g: Проблемы кросс-функционального взаимодействия при работе над дизайном. И даёт рекомендации по снижению рисков.
6. Dan Ramsden: Предлагает свою модель креативного процесса, потому что считает ограничения «двойного алмаза» проблемой. Это некий трёхмерный треугольник.
#management
Figma
Navigating the intersection of design and business: a conversation with Airbnb’s Brian Chesky | Figma Blog
Airbnb’s Brian Chesky talks about design’s catalytic potential for business and the central role it played in Airbnb’s post-IPO growth story.