Июль '20

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

• Carolyn Chmielewski (Spotify). Как построить команду UX-исследований от всеми любимого музыкального сервиса.
  
• Clara Gaggero Westaway (Special Projects). Прорывные концепции интерфейсов на стыке физического и цифрового мира от агентства, которое делает их для топовых компаний.
  
• Katie Wishlade (Clearleft). Проектирование услуг от мастодонтов британского UX.
  
• James Greenfield (Koto). Связь бренда с интерфейсом от одной из самых свежих и бойких компаний на рынке.
  
• Dan Makoski (Lloyds). Дизайн-лидерство от одного из самых сильных и харизматичных специалистов на британском рынке.
  

Хотя в этом году расширить годную программу туром по лучшим бургерным и старейшим пабам не удастся, в онлайн-формате цена стала доступнее — £399. Каждый вечер начинается мастер-класс или лекция, после которой идёт общение со спикером, а после — нетворкинг.

Блог дизайн-команды Babylon Health, занимающейся медициной.

Серия обзорных статей о профессии дизайнера интерфейсов от UX Collective. Описаниие базовых понятий и рекомендации книг, статей и видео.

Danny Sapio собрал вместе свою коллекцию статей для начинающих дизайнеров. Перевод.

Небольшое исследование текущего состояния профессии UX-писателя на основе опроса 110 человек и интервью 6 экспертов. Суть роли, профиль специалиста, проф.сообщества.

Owen Schoppe из Salesforce описывает критерии, по которым их движок алгоритмического дизайна Einstein анализирует интерфейс: группировка, заметность, узнаваемые визуальные коды.

Экспериментальный сервис, который генерирует интерфейс и код на React на основе текстового описания. Он использует модель машинного обучения GPT-3.

Генератор цветовых палитр на GPT-3:

Jordan Singer сделал экспериментальный плагин для Figma, который генерирует интерфейс с помощью модели машинного обучения GPT-3. Вы описываете результат словами, он переводит это в JSON с разметкой элементов.

Похожий пример, позволяющий создать промо-страницу:

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

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

1. Алгоритмы написаны под очень узкие задачи и их нужно каждый раз переписывать заново.
2. Количество сгенерированных вариантов не приводит к качеству.
3. Вдумчиво выбирать из множества вариантов на деле сложно.
4. Невозможно измерить качество результата, чтобы отфильтровать лучшее.
5. Это примитивизация реального процесса работы дизайнера.
6. Нет примеров универсальных инструментов в других отраслях.

11,2%

рост продаж компьютеров в мире

Дизайн-команда Airbnb рассказывает, как изменялся интерфейс, продукт и работа команды в целом во время пандемии.

Сохранили дурашливый характер персонажа и превратили его в маскота, поддержав в компоновках сайта.

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

Дизайнеры Spotify рассказывают, как применили принципы анимации для работы над иконкой добавления в избранное.

Georgia Kent-Braham из Babylon Health рассказывает о редизайне сценария записи к врачу. Они проанализировали реальные обращения и грамотно разделили поток на разных специалистов.

Jason Friedman из MS Office рассказывает о новом интерфейсе на базе Fluent Design.

Matthew Ström активно вовлекает недизайнеров в обсуждение дизайна. Ему нужен был способ сделать их комментарии конструктивными и он использует опросник в виде нескольких шкал: каким прилагательным лучше описать макет.

Дизайн-менеджеры IBM рассказывают о своих зонах ответственности. На чём они фокусируются и как измеряют успех.

• Эффектная анимация наведения курсора.

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

Jim Lewis и Jeff Sauro разбираются, стоит ли использовать шкалу рейтинга со звёздами вместо цифр.

Jim Lewis и Jeff Sauro изучили вопрос: можно ли использовать ползунки вместо набора радиокнопок в стандартизированных опросах от 1 до N. Это не смертельно, но не даёт сильного улучшения данных и сложнее для пользователей.

Яндекс Взгляд сделал интерфейс для быстрого удалённого юзабилити-тестирования простых прототипов на аудитории Яндекс Толоки. Дёшево (999 ₽) и быстро, но к аудитории Толоки всегда были вопросы.

Rachel Krause из Nielsen/Norman Group предлагает формат отчёта о пользовательском исследовании, который продуктовая команда сможет прочитать и понять.

Jim Lewis и Jeff Sauro показывают, как конвертировать любую шкалу опроса типа SUS в значение от 0 до 100. Оно, как правило, проще для общения внутри продуктовой команды.

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

Металлический шаблон для скетчей мобильных интерфейсов. Как его делали.

Визуальный редактор компонентов на React. Можно импортировать их готовый код и подкрутить или наоборот — превратить в код макеты из Sketch и Figma. Анонс от авторов.

Экспериментальный простой инструмент дизайна, выдающий CSS-код без вложенных

Иллюстрации рук в 3D. Есть шаблоны для всех популярных инструментов дизайна.

• Kevin Kwok подробно анализирует причины успеха Figma. Инструмент быстро становится платформой и использует сетевые эффекты по полной.

• Советы по использованию Figma в серии простых видео.

• Templatery: презентации в Figma.
  

• Breakpoints: создает адаптивный дизайн (макет продолжает работать и без плагина). Статья-инструкция.
  

17 сентября пройдёт вторая титульная конференция Figma по дизайну в онлайне.

Простой инструмент для генерации аккуратных квадрокругов в SVG.

Июльское обновление. Оптимизация интерфейса.

Теперь IBM будет активно предлагать клиентам Creative Cloud и Adobe XD в частности — возможно, его доля подрастёт.

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

Отечественный подкаст для UX-писателей. Связанный Телеграм-канал.

Sarah Gibbons из Nielsen/Norman Group предлагает шаблон для Service Blueprint, который поможет оптимизировать работу компании во всех точках взаимодействия с клиентом. Сам шаблон.

Пошаговая методичка Kate Kaplan из Nielsen/Norman Group по проведению рабочих сессий для создания Customer Journey Map. Сбор вводных, текущее состояние продукта и видение будущего.

Книга Caterina Falleni «Accessible by Design» выйдет в начале 2021 года.

• Шаблоны для iOS 14 и iPadOS 14 от Joey Banks.

Базовая инструкция Adebiyi Adedotun Lukman по использованию стилизованных компонентов на React.

В Storybook появилась возможность поиграть с компонентом прямо в живом гайдлайне.

Adobe опубликовали фреймворк на React для своей дизайн-системы Spectrum.

Henry Daggett из Societe Generale рассказывает о модели консулов для развития дизайн-системы. Это 4 человека из разных команд, которые регулярно ротируются. Процесс добавления нового компонента в таком формате: как любой участник сообщества в компании может сделать это.

Годная памятка по разным аспектам реализации тёмной темы оформления в вебе от Adhuham. Больше про вёрстку, но достаточно развёрнуто.

Лучшая в мире переключалка (в правом верхнем углу).

Плагин Toolabs для Figma позволяет управлять токенами дизайн-системы: цвета, шрифты, отступы, анимация, графика и многое другое. Можно переключать темы оформления, есть состояния компонентов. Анонс.

Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе. В одиннадцатом выпуске разбирает работы Emmett McBain.

Therese Fessenden из Nielsen/Norman Group разбирает лучшие практики для представления сложных и трудночитаемых правил использования сервисов.

Feifei Liu из Nielsen/Norman Group рассказывает о паттерне «любовь с первого взгляда» в результатах поиска — пользователь выбирает первый результат.

Советы Steven Hoober по адаптации таблиц для мобильных.

Caroline Sinders и Natalie Cadranel собрали чеклист по учёту безопасности и приватности пользователей в интерфейсе и методах работы. Сам чеклист.

Разбор процесса встречи нового пользователя в почтовом клиенте Hey от сайта Growth Design.

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

Michael Benton и Natalie Johnson из Atlassian рассказывают о запуске продукта Forge и дают советы по проектированию интерфейса командной строки.

Caterina Falleni и Mike Shebanek дают серию советов по поддержке accessibility.

Joseph Mueller проанализировал интерфейс мобильного видео-плеера Netflix, Hulu и YouTube. Самые интересные решения у Hulu — они здорово понимают контекст использования.