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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте

#digest

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

1. Page Laubheimer из Nielsen/Norman Group опровергает старый миф о доступности любой задачи в три клика. Она предлагает набор приёмов информационной архитектуры, которые помогут улучшить любую навигацию.

2. Virginia Start из Shopify разбирает разницу в формах адресных данных в разных странах мира. Она приводит варианты как отдельных полей, так и их группировки.

3. Kara Pernice из Nielsen/Norman Group описывает способы чтения текстов, которые практикуют пользователи в разных ситуациях. Про часть из них они публиковали отдельные подробные статьи (например, «слоёный пирог»).

4. Разборы интерфейсов встречи нового пользователя:
— Superhuman.
— Trello.
— Duolingo.
— Hopper.
— Tinder.

5. Anna Kaley из Nielsen/Norman Group разбирает правила и примеры создания хорошей страницы контактной информации на сайте.

6. Edward Scott из Baymard пишет о проблемах с промоблоком, призывающим установить приложение на мобильных сайтах интернет-магазинов. Бездумная реализация перекрывает процесс покупки и роняет конверсию.

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

#patterns

​Стабильный поток обновлений инструментов дизайна даёт хорошую жатву новостей. Подкопил за полтора дайджеста:

ProtoPie 4.0: В новой версии появились компоненты. Переработан интерфейс и освежился бренд. Курсы: Руслан Шарипов на Udemy и Meng To.

Sketch 57 и бета Sketch 58: Появился привычный по Figma и Adobe XD инструмент для работы с сеткой повторяющихся элементов — можно менять расстояние между столбцами и строками. В бете размер символов вроде кнопок наконец-то меняется автоматом при изменении текста и другого контента (разбор).

Плагины:
— Zecoda: Генератор кода на Vue.js из макетов Sketch.

Figma: Телеграм-канал @figmaplugin делает обзоры плагинов. У Саши Окунева есть памятка об их возможностях и ограничениях.

Статьи и памятки:
— Figma Help: Справочный сайт по работе с инструментом. Статьи, видео, разборы плагинов, обновления продукта.

— Adam Noffsinger из Dropbox рассказывает о том, как команда настроила шаблоны.

— Памятка Buzz Usborne из Help Scout по переезду со Sketch. Во что это выливается для дизайн-команды.

— Советы Philippe Hong по использованию — горячие клавиши и чуть менее очевидные функции.

— Советы по работе с иконками от команды Iconfinder.

Waves: Генератор волн в SVG для промо-сайтов. У них есть плагин для Figma.

UXPin 2.0: В ноябре появится новый интерфейс и улучшенные возможности прототипирования (взаимодействие по условию, состояния элементов), дублирование элементов а-ля Adobe XD.

Adobe XD: Августовское обновление. Переработанная панель плагинов, редактирование в Photoshop, расширенный экспорт кода и другие доработки интерфейса.

Artyline: Инструмент позволяет превратить скетч интерфейса мобильного приложения в примерный макет, а потом и интерактивный прототип.

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

Userbility и UXtweak: Два новых сервиса для удалённого юзабилити-тестирования. Второй ещё с инструментами проверки информационной архитектуры.

Quill 2.0: Инструмент для иллюстраторов и аниматоров в виртуальной реальности от Facebook.

Codeimg: Сервис делает красивый скриншот кода для любой соцсети.

Flinto: Появился импорт из Figma и тёмная тема оформления.

Glorify: Простой редактор баннеров и промо-картинок для интернет-магазинов.

Nodes: Инструмент для визуализации данных и создания 3D-графики с помощью визуального программирования нодами.

Eagle: Инструмент помогает собирать мудборды на компьютере.

Epilepsy Blocker: Сервис помогает проверить интерфейс на безопасность для людей с эпилепсией. У них появился и плагин для Figma.

Vectormator: Векторный редактор для иллюстраторов на iPad.

Webflow: С помощью Lottie можно импортировать анимацию из AfterEffects.

VoxGun: Сервис для создания простейших промо-видео.

Glimpse: Ответвление редактора GIMP с новым брендом и интерфейсом.

Новые генераторы цветовых палитр появляются примерно каждые 10 минут. Muzli собрали наиболее полезные из них (а это уже более полусотни)

Brendan Mahony собрал десяток толковых расширений для Chrome для дизайнеров.

Как всегда, пара реально живых и тонна перспективных, о которых мы вряд ли вспомним через полгода.

#tools

​На вторничной презентации Apple про интерфейсы нового не было, так что в обзоре нет смысла. Зато дизайн-менеджерам набралось интересных памяток и материалов:

1. Шикарная памятка по проведению сессий дизайн-критики от Noah Levin из Figma. Он предлагает несколько форматов в зависимости от стадии задачи — это вообще отличный подход к описанию методов. И ещё одна от Jonathan Walter из Rockwell Automation.

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

3. Aurora Harley и Kate Moran из Nielsen/Norman Group описывают синхронный и асинхронный подход к генерации идей удалённой командой.

4. Kate Kaplan описывает фреймворк DesignOps от Nielsen/Norman Group. Толково сгруппированные точки фокуса дизайн-менеджера и команды по трём направлениям — организация самой команды, эффективность работы и выхлоп для продукта.

5. DesignOps Global Conference прошла с 30 мая по 1 июня в Манчестере. Это уже седьмая конференция по дизайн-менеджменту цифровых продуктов (точнее, шестая — LXConference закрылась). Организаторы опубликовали видео выступлений.

6. Emmet Connolly из Intercom рассказывает о процессе внедрения новых методов и практик в дизайн-команде. Значительная часть статьи посвящена общефилософским вопросам, но в последней трети как раз самое интересное.

7. Как устроена дизайн-команда Instacart.

8. Scott Strubberg из IBM рассказывает о своём списке инструментов дизайнера интерфейсов, который помогает разным подразделениям компании правильно выделять бюджет на покупку и вообще обосновывать.

Про эти и другие темы для дизайн-менеджеров я рассказываю на своём курсе «Паттерны дизайн-менеджмента». Второй поток стартует в октябре.

#designmanagement #designops

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

1. Шикарная азбука создания дизайн-систем от Mike Dick из Survey Monkey. Советы командам по управлению системой как проектом и продуктом.

2. Tyler Sticka из Cloud Four описывает модели развития дизайн-системы, которую используют несколько продуктовых команд. Не все из них идут на пользу единому подходу, но ситуации жизненные.

3. Garrett Miller и Zack Sultan рассказывают о дизайн-системе Slack Kit. Она недоступна снаружи, но общие детали описаны.

4. Marco Paglia из Uber рассказывает о том, как дизайн-команда использует дизайн-систему Base.

5. Команда Vox Media достаточно подробно рассказывает о поэтапном внедрении поддержки пользователей с ограниченными возможностями. Со стороны дизайна и разработки. Похожая история от VMWare Clarity.

6. Создатели Storybook сделали свою дизайн-систему для работы над фреймворком. Репозиторий и рассказ о ней.

7. Superposition: Сервис генерирует набор токенов для дизайн-системы на основе сайта или макета в Figma, Sketch или Adobe XD. Выдаёт файл для препроцессоров. Правда, такой код вряд ли можно использовать в живом продукте.

8. Лена Лисеева рассказывает о принципах создания пиктограмм в дизайн-системе Рамблера.

9. Ariana Escobar из Heroku рассказывает о системном улучшении контраста цветов в их дизайн-системе.

10. Небольшой обзор инструментов визуального регрессионного тестирования для дизайн-систем.

Кстати, свежий ежемесячный дайджест выйдет на следующей неделе — черновик почти готов.

#designsystems

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте

#digest

​Астрологи объявили неделю пользовательских инсайтов: сегодня и в четверг два выпуска на тему. Начнём с подходов к измерению взаимодействия человеков с продуктами:

Удовлетворённость и связанные метрики от Jeff Sauro
1. Разные способы оценки удовлетворённости пользователя. Он выделил пять типов шкал, которые используются в них.

2. Метрика NSAT (Net Satisfaction) от Microsoft. Это шкала из 4 пунктов, похожая по модели расчёта на NPS.

3. Попытка дать более измеримое определение понятию delight, к которому стремятся многие продукты. В целом это совмещение неожиданного и приятного, которое связано с удовлетворённостью.

4. Мощный обзор ключевых научных публикаций, проверяющих работоспособность или критикующих NPS. Только те, которые могут считаться авторитетными.

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

Выбор метрик
1. Jared Spool описывает пример выбора метрик для оценки улучшения интерфейса. Он взял за основу парковочные автоматы, которые обновлялись до современных.

2. Aurora Harley из Nielsen/Norman Group пишет о «тщеславных» метриках и том, как правильнее оценивать эффективность интерфейса.

3. Дельные советы Jeff Sauro по выбору зависимых метрик для пользовательских исследований. В предыдущей статье он описывал виды переменных.

Бонус
1. Jeff Sauro описывает особенности метрики NASA TLX (Task Load Index), которая измеряет нагрузку на пользователя.

2. Alita Joyce из Nielsen/Norman Group показывает, как измерить обучаемость работе с интерфейсом.

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

#metrics

​Завершает неделю пользовательских инсайтов подборка материалов об исследованиях из нового и сентябрьского дайджеста:

1. Команда Usethics рассказывает о связке методов персонажей и Jobs to Be Done на примере условного продукта.

2. Юлия Кингсеп из UX-лаборатории Mail.ru Group рассказывает о методах парного юзабилити-тестирования интерфейсов.

3. Валерия Курмак из Сбербанка советует подходы к проведению юзабилити-тестирования с людьми с ограниченными возможностями. Как и кого искать, особенности процесса.

4. Jeff Sauro пытается вывести подтверждение того, что старая байка про «всего 5 пользователей для юзабилити-тестирования» позволяет найти только большинство самых распространённых проблем.

5. Caryn Kieszling из Microsoft рассказывает о миграции пользователей в обновлённое мобильное приложение. Как команда использовала качественные и количественные данные, чтобы найти причины недовольства редизайном.

6. Обзор инструментов удалённого немодерируемого юзабилити-тестирования от Kathryn Whitenton из Nielsen/Norman Group.

7. Пример поэтапного улучшения опросника от Feifei Liu из Nielsen/Norman Group. Они пробовали разные версии на малом количестве пользователей перед запуском на основную аудиторию.

8. Maria Rosala из Nielsen/Norman Group описывает методы тематического анализа данных пользовательских исследований. Как разобрать большой объём неструктурированных данных.

Продолжим мини-дайджестить в понедельник.

#research

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

ПРИМЕРЫ
1. Газпромбанк. Весь базовый набор на месте.

2. Adobe. Токены, анимация, accessibility, локализация. Хотя вместо реальных компонентов — скриншоты.

МЕНЕДЖМЕНТ ДИЗАЙН-СИСТЕМ
1. Шикарная памятка Nathan Curtis по ведению дизайн-системы как проекта в Jira. Постановка и группировка задач, версионирование и другие ключевые аспекты.

2. Памятка Nathan Curtis по коммуникации обновлений дизайн-системы внутри и снаружи компании, ну и в целом ведении системной информационной работы со всеми заинтересованными лицами.

3. Nathan Curtis сделал обзор методов тестирования дизайн-систем. Стандартные меры обеспечения качества и проверка пользовательских качеств.

4. Budi Harto Tanrim рассказывает о процессе создания дизайн-системы Bukalapak и организационных нюансах этого пути. Как начать, как построить эффективное взаимодействие в команде.

КЛЮЧЕВЫЕ РАЗДЕЛЫ
1. Мощная памятка по ведению гайдлайнов voice & tone от Andrea Drugay из Dropbox. Она даёт советы по всем аспектам — обновление, ведение рабочих групп, внутренний маркетинг.

2. Daryl Koopersmith и Wilson Miner из Stripe описывают подход к созданию цветовых палитр в дизайн-системе. Они используют цветовую модель Lab (CIELAB) вместо самой горячей сейчас HSL, потому что она более реалистично передаёт освещённость.

КНИГИ И МЕТОДИЧКИ
1. Крутейшая методичка по созданию дизайн-системы на базе Storybook для разработчиков. Охватывает все важные части процесса с помощью по работе с инструментами и библиотеками. Обзорная статья про основные темы.

2. Книга Andy Coldwell «Laying the Foundations» о дизайн-системах. Обещает ответить на базовые вопросы.

3. Методичка по React для дизайнеров от Framer.

ИНСТРУМЕНТЫ
1. Алексей Каленюк из Ingram Micro Cloud рассказывает о плагине Puzzle Tokens, который делает аналог токенов на Less для Sketch. Это позволяет системно обновлять параметры визуального языка в макетах. Сам плагин.

Остался ещё один мини-выпуск до полноправного дайджеста и пара недель до восстановления графика публикаций.

#designsystems

​В прошлом году мы провели исследование рынка для внутренних задач Mail ru Group: какие дизайн-команды в отечественных продуктовых компаниях самые сильные? Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда для профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.

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

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

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

Буду благодарен, если вы тоже поучаствуете.

P.S. В России хватает сильных продуктовых компаний и команд, в которых работают мощные дизайнеры и выпускаются крепкие продукты международного уровня. Многие из них помогают дизайн-сообществу конференциями, митапами, конкурсами и другими полезными вещами. Это исследование поможет им стать лучше.

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте

#digest

​В сентябре-ноябре проходит основной поток конференций по дизайн-менеджменту. Я был на четырёх основных: MXConference (позже переименовалась в LXConference, а затем закрылась), UXSTRAT, DesignOps Summit и Leading Design. Есть ещё несколько сравнительно новых (Joint Futures, DesignOps Global Conference, Design Leadership Summit и другие), но они не так сильны по контенту. Собрал для вас материалы с нескольких из них.

DesignOps Summit 2019: Нью-Йорк, 23-25 октября. Был на ней в прошлом году и она оказалось одной из лучших на тему дизайн-менеджмента.

Видео и презентации опубликованы. А Natalie Hanson традиционно конспектировала все выступления. Самые интересные:

1. Amy Thibodeau (Shopify). Как она стала главой Design Operations и что это значило. Она адаптировала модель IAD (Institutional Analysis and Development Framework) для развития дизайн-команд (всего в компании 350 дизайнеров и смежных специалистов). Видео и презентация.

2. Kristin Wisnewski (IBM). Как её команда ИТ-поддержки делает жизнь коллег лучше и измеряет принесённую пользу. Видео и презентация.

3. Dianne Que (Pandora). Как она выстраивала системную работу дизайн-команды с достаточно хаотичного уровня. Видео и презентация.

4. Kim Fellman Cohen (Pinterest). Как повышали удовлетворённость и retention дизайн-команды. Хороший пример внутренних метрик и процесса поиска точек улучшения в целом. Видео и презентация.

5. Jilanna Wilson (Zendesk). Опыт управления распределённой дизайн-командой. Практики и методы с учётом нескольких стран и временных зон. Видео и презентация.

6. Alastair Simpson (Atlassian). Советы по построению кросс-функционального взаимодействия в продуктовых командах. Он даёт отсылки к нескольким внутренним инструментам. Видео и презентация.

7. Marjorie Stainback и Kelsey Kingman (Fidelity Investments). Как они обучили дизайнеров основам пользовательских исследований. Исследователей сильно не хватало для выделенной работы и это дало продуктовым командам инструмент для более частой проверки своих решений. Видео и презентация.

8. Saara Kamppari-Miller (Intel). Сложность процесса интеграции команды купленного продукта. Как они искали общие точки и формировали общий язык. Видео и презентация.

9. Манифест Dave Malouf о том, когда дизайн наиболее эффективен.

10. Накануне DesignOps Summit 2019 провели опрос профсообщества на тему измерения выхлопа от дизайн-команды. Kristen Skinner и Kamdyn Moore презентовали фреймворк из 8 типов метрик и показали несколько полезных моделей на тему. Видео и презентация.

#designmanagement

​Leading Design 2019: Лондон, 6-8 ноября. Я побывал на ней и выделил толковые рассказы. Презентации пока отправили только участникам, а видео на подходе. Так что буду ссылаться на свои фото:

1. Bob Baxley (экс-Pinterest): о дизайн-менеджменте на примере лунной миссии в 60х. Как продавали идею, как делали центр управления, как вели процесс вместе с цитатами ключевых руководителей. Ключевые слайды.

2. Cap Watkins (Primary): как провёл 600 встреч 1:1 и что вынес оттуда как дизайн-менеджер. Например, про изменение зоны ответственности при росте команды. Ключевые слайды.

3. Melissa Hajj (Facebook): развитие дизайнеров. Ключевые слайды.

4. Farai Madzima (Shopify): культурная разница в продуктовых командах и её преодоление. В Shopify учат давать обратную связь в первые дни работы. Очень сильный спикер, по делу и круто держит внимание. Ключевые слайды.

5. Dan Makoski (Lloyds Banking Group): рассказ о своей карьере (Microsoft, Google, Walmart) и текущей работе в финтехе. Как банк реализует в продуктах миссию повышения благосостояния британцев. Ключевые слайды.

6. Simon Rohrbach (экс-Deliveroo): начало работы в компании и изменение своей зоны ответственности как дизайн-менеджера. Отличная модель понимания себя, а через это — пользы для продуктов прямо сейчас. История — прям про меня и недавний уход. Ключевые слайды.

7. Nicole Burrow (Spotify): построение сильной дизайн-команды. Она сравнивает её с музыкальной группой. В том числе как выбрать точку роста — дизайн-менеджер или эксперт. Разрыв шаблона — они добавили чуть централизации к своей легендарной agile-модели. Ключевые слайды.

8. Randy Hunt (Grab): особенности и проблемы планирования работы дизайн-команды. В том числе советы дизайн-менеджеру, который только пришёл в компанию. Он советует книгу Michael D. Watkins «The First 90 Days». Ключевые слайды.

9. Stuart Frisby (Deliveroo): свой опыт дизайн-менеджмента с пачкой жизненных советов и нюансов роли главы дизайна. Ключевые слайды.

10. Мастер-класс Julia Whitney: работа со сложными ключевыми людьми в компаниях. Много полезных инструментов и фреймворков собраны вместе (часть использую у себя на курсе). Ключевые слайды.

11. Мастер-класс Alberta Soranzo (Lloyds Banking Group): роль дизайн-менеджера в цифровой трансформации. Хорошие кейсы и вопросы к ним с обсуждением группой. Ключевые слайды.

Выступления Kristen Skinner, Kim Fellman Cohen (Pinterest) и Jason Mesut повторяли рассказы на DesignOps Summit.

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

Она также проходит в Нью-Йорке и видео оттуда уже доступны.

————

По этим двум примерам видны текущие и будущие актуальные темы. Например, дизайн-системы почти не обсуждают (решённая и понятная проблема). Каждый второй рассказ затрагивает карты компетенций дизайнера (это повышает мотивацию и retention). При этом не первый год всплывают критерии успешности работы дизайн-команды (это было одной из главных тем DesignOps Summit).

На британской конференции получился неплохой нетворкинг. В ходе обсуждений там понял для себя, что разница между дизайн-менеджмент и DesignOps — это примерно как просто agile и фреймворки типа SAF и LeSS, реализующие его на масштабе. Речь идёт о примерно одних и тех же методах и подходах, но в разных организационных структурах. Хотя местами это заходит слишком далеко — например, обсуждают роль «оператор дизайна» (тот же дизайн-менеджер, но работающий под брендом DesignOps).

В следующем году хочу зацепить тусовку классического дизайн-менеджмента от Design Management Institute: Design Management Conference. Недавно дочитал книгу The Handbook of Design Management от них — хотя ей 10 лет и она не про цифровые продукты, там собраны классические публикации на тему начиная с середины 60х.

#designmanagement

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

1. Smashing Magazine выпускает книгу Heydon Pickering «Inclusive Components». Анонс и вебинар с автором. Пару лет назад он создал одноимённый сайт, где есть многие наработки.

2. A Book Apart: Yesenia Perez-Cruz «Expressive Design Systems». Автор руководила командой дизайн-системы в Vox Media и Shopify. Должна появиться в продаже позже сегодня.

3. Taschen: Rob Ford «Web Design. The Evolution of the Digital World 1990–Today» об истории веб-дизайна с начала 90х. 640 страниц раритетов и необычных раскопок. Обзорная статья — https://www.vice.com/en_us/article/d3awk7/flash-is-responsible-for-the-internets-most-creative-era.

4. David Travis и Philip Hodgson «Think Like a UX Researcher». Она помогает пройти по всему процессу пользовательских исследований и предназначена не только для самих специалистов. Интервью для Shopify.

5. UX Bites для начинающих дизайнеров интерфейсов от Gabriel Kirmaier, автора одноимённого Инстаграм-канала.

6. Andy Coldwell «Laying the Foundations» о дизайн-системах. Обещает ответить на базовые вопросы.

7. Кристина Краснянская и Александр Семёнов «Soviet Design: From Constructivism to Modernism. 1920-1980». Она не про интерфейсы, а про историю советского дизайна интерьеров, но таких вещей вообще выходит немного.

А вот что на подходе у Rosenfeld Media:

1. Jacqui Frey «Design Operations: Program Management for Design at Scale».

2. Cheryl Platz «Design Beyond Devices».

3. Harry Max «Prioritization: Beyond Getting Things Done».

Напомню свой Goodreads, где архивирую прочитанное с оценками и веду лютый список планов, которым непросто сбыться.

#books

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

2-6 ноября прошла традиционная конференция Adobe MAX 2019 с кучей анонсов. Как всегда, опубликована тонна видео, а вот что по программам:

— Photoshop для iPad вышел, а в следующем году запустят Illustrator для iPad. Они работают с хранящимися в облаке настоящими файлами .PSD и .AI, хотя портированы не абсолютно все функции — будут смотреть на органичность для планшетов и запросы пользователей.

— XD: Ноябрьское и октябрьское обновление. Одно из самых мощных: совместная работа над макетом (правда, надо включать для каждого макета), история версий, состояния компонентов (UI Kit с примерами), множественные взаимодействия в прототипе с одним элементом через разные триггеры, импорт библиотек из Sketch (макеты с использованием компонентов оттуда не сломаются).

— Обновление линейки CC: Photoshop с упрощённым выделением объектов и общие улучшения интерфейса в Illustrator, InDesign, Animate и других. А ещё в ней появится стриминг своей работы.

— Aero: Дизайн в дополненной реальности через мобильное приложение. Импортирует файлы из известных программ (Maya, Cinema 4D, Dimension, Photoshop, Illustrator).

————

Sketch 60: Переделано управление компонентами, автоматическое подключение библиотек новому сотруднику в версии для команд.

Плагины:
— Flowkit: Информационные карты в Figma, Sketch и Adobe XD.

— Suitcase Fusion: управление подключаемыми шрифтами.

— Represent: Доступ к прототипу коллеге или клиенту, сидящему далеко.

— Sketch Styler: Находит визуально похожие решения без назначенных стилей и предлагает причесать их.

————

FramerX: готовит версию для браузера. Совместная работа и все дела.

Darshil Vora из Salesforce рассказывает, как они готовят свои компоненты своей дизайн-системы на React для FramerX и делают прототипы на их основе.

————

Figma: Добавляется аналитика использования компонентов из общей библиотеки.

Плагины:
— Vectary и Artboard Studio: 3D-шаблоны телефонов и физических предметов для примерки макетов в них.

— Figma Ninja: Обучалка основам инструмента в виде шаблона.

— Product Planner: Тонна шаблонов для управления
продуктами и проектами.

————

InVision: Обновился Design Systems Manager. Появилась интеграция со Storybook.

Glide: Генератор мобильных приложений на основе Google Sheets.

Paper & Media: Простейший конструктор картинок для постов в соцсетях.

UI Bakery: Простой онлайн-конструктор интерфейсов на базе дизайн-системы Eva.

8b: И ещё один конструктор промо-сайтов.

BuilderX: Ещё один браузерный инструмент дизайна с экспортом в код на React.

Прошлый выпуск я пропустил в своём маленьком творческом отпуске, но теперь-то привычный ритм вернётся.

#tools

​В библиотеку паттернов и лучших практик приехало новенькое:

1. Raluca Budiu из Nielsen/Norman Group рассказывает об исследовании пользователей облачных сервисов. Ментальная модель проще чем то, как они работают, что вызывает много недопониманий.

2. Jen Clinehens разбирает интерфейсные приёмы Netflix, которые мотивируют пользователя смотреть больше. Она ссылается на цитаты и публикации самой компании.

3. Scott Jenson пообщался с Raph Koster, автором книги «A Theory of Fun», и проанализировал разницу в подходах интерфейсов цифровых продуктов и игр. Очень крутой детальный разбор.

4. Raluca Budiu из Nielsen/Norman Group рассказывает о теории сбора информации, которая проводит аналогию с поиском пищи животными. Как пользователи решают свои информационные задачи и чем интерфейсы могут помочь им.

5. Graham Scott из Shopify рассказывает о проектировании интерфейса командной строки с точки зрения текстов.

6. Raluca Budiu из Nielsen/Norman Group рассказывает о микросессиях (порядка 15 секунд и меньше), которые позволяют решить многие мелкие задачи пользователей на мобильных, в носимых устройствах и голосовых помощниках. Она показывает хорошие и плохие примеры в уведомлениях и виджетах.

6. Мощная серия советов Toph Tucker по представлению данных для финансистов самой разной специализации.

7. Katie Sherwin из Nielsen/Norman Group даёт советы по грамотному интерфейсу страницы товара в интернет-магазинах.

8. Kate Moran и Cami Goray из Nielsen/Norman Group описывают паттерн «пинбола», который пользователи применяют в результатах поиска. После добавления развёрнутой информации в выдачу (в последние годы это не просто список синих ссылок) они прыгают глазами от блока к блоку.

9. Kara Pernice из Nielsen/Norman Group уже 20 лет проводит исследование лучших интранетов и составила критерии ключевых возможностей на текущий день.

Свежий дайджест уже почти укомплектован и приедет на следующей неделе.

#patterns

​Черновик подборки статей про тёмную тему оформления лежит с весны. Решил дожать его, хотя большинство желающих уже успели внедрить её.

Базовые знания дают гайдлайны платформ:
— Material Design (пара слов от их дизайнеров)
— iOS
— Windows

Читая аргументацию для тёмной темы ощущаешь дежавю. Ровно те же слова и схожесть решения была в Windows Phone (экономия батарейки в OLED-экранах, меньше устают глаза — 9 лет назад, если чо). Фотошоп перекрасился в тёмный в 2012 году. Штош — главное, что хотя бы в таком виде это доехало до массового пользователя.

Новую волну интереса породила прошлогодняя macOS Mojave с тёмной темой оформления. Там же пошли первые толковые статьи на тему:

1. Andy Clarke: поддержка на сайте через media queries.

2. Marcin Wichary: изменение ключевых переменных в CSS.

3. Один из самых дешёвых способов реализации через режимы наложения в CSS.

ТОКЕНЫ
Тёмная тема — один из главных драйверов внедрения токенов. Чтобы покрасить одни и те же элементы интерфейса разными цветами в разных ситуациях, компании внедряют переменные для цветов и находят способ их раздачи в продукт. Например, хорошая история получилась у ВК. Здорово пригодились уже существовавшие токены для внедрения в Почте Mail.ru.

Естественно, такое хочется и в инструментах дизайна. Например, плагин Color System для Sketch позволяет организовать переменные для цвета в токены и переключать светлую и тёмную тему.

ПИСЬМА РАССЫЛКИ
Одна из проблем — это почтовые клиенты, где тело письма приходит в виде HTML и картинок (там может быть что угодно). Alice Li собрала шикарную памятку для создателей писем, также писал про это Kevin Mandeville.

Рассказ о нескольких подходах к автоматизированному перекрашиванию писем рассылки в Яндекс Почте.

БРАУЗЕРЫ
В ближайшем будущем это коснётся и сайтов. Chrome 76 поддерживает тёмную тему на уровне браузера. Если сайт имеет её, она включится автоматом. Firefox тоже в деле.

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

КЕЙСЫ
Вот что рассказывают компании, которые прикрутили её к продуктам:

1. Superhuman. Шикарная памятка, советы хорошо подкреплены примерами и теоретическими выкладками.

2. Microsoft. Они раскатили её на все мобильные продукты в офисной линейке. Ещё от них про большой Office.

3. Discord. Тёмная давно стала самой популярной, но они хотели сделать добротной и привычную светлую тему.

В общем, если вы ещё не начали делать тёмную тему — эта подборка срежет кое-какие углы для вас.

#designsystems

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте

#digest

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

1. Emma Boulton: фреймворк ResearchOps. Это восемь ключевых аспектов: от формулирования вопроса исследований и поиска респондентов до настройки инструментария.

2. Вадим Шлячков перелопатил тонну статей и литературы о правиле «для обнаружения значительной части проблем в интерфейсе достаточно 5 пользователей». Много расчётов для иллюстрации того, когда оно работает, и исторических отсылок.

3. Leisa Reichelt: проблемы современных подходов к демократизации пользовательских исследований, когда продуктовые команды сами проводят некоторые из них. Они решаемы, но без лечения такие исследования могут принести больше вреда, чем пользы.

4. Userzoom провели опрос-исследование рынка UX среди своих клиентов. Фокус на методах и инструментах пользовательских исследований, но есть и общий кусок про дизайн-команды в компаниях.

5. Priya Kamat и Candice Hogan из Uber рассказывают о команде пользовательских исследований, ориентированных на изучение фундаментальных особенностей поведения. Она состоит из учёных и статья описывает один из примеров применения: сократили отказ от заказа во время ожидания на 11% за счёт обработки феноменов избегания ожидания, организационной прозрачности и градиента целей.

6. Ashwini Kamath из IBM: выбор правильных текстов в интерфейсе с помощью теста Cloze.

7. Jared Spool: гибкий сценарий пользовательского тестирования. Задача корректируется исходя из мини-интервью в начале общения с респондентом.

8. John Kille из MSTS: метод экспертной оценки интерфейса по ключевым сценариям. Он помогает пополнить интерфейсный долг и обеспечить попадание этих задач в продуктовый план.

9. Rick Sobiesiak и Omkar Chandgadkar из IBM: формат рабочих сессий для осмысления выводов из пользовательских исследований. Зачастую просто отчёт воспринимается хуже, но они делают полноценное концептуальное проектирование в малых группах, пытаясь поставить себя на место респондента.

10. Простая и ёмкая памятка David Travis из UserFocus по составлению сценариев юзабилити-тестирования.

11. Noel Lamb из Salesforce: создание панели респондентов для пользовательских исследований.

Сорян, но делать мини-выпуски совсем компактными не выходит — слишком много крутоты происходит в нашей уютной профессии :)

#research

​Свежее подкрепление знаниями для дизайн-менеджеров:

1. Andrea Mignolo очень здорово раскрывает тему ценности дизайна для бизнеса. Она предлагает рассматривать не только продукт дизайна как деятельности, но и обучающую активность, снимающую риски. Интересная отсылка к ценовой модели, которую можно применить к вариантам развития продукта.

2. Jerrod Larson описал рабочий день условного дизайн-менеджера. Он отличается от ситуации к ситуации, но в целом похож на правду.

3. Andy Thornton рассказывает о карте компетенций агентства Clearleft. Чуть раньше он описал структуру навыков и критерии оценки. Но самое крутое — они опубликовали его в сервисе Progression App. Кажется, это первый публично доступный пример карты компетенций из него.

4. Конференция Leading Design London 2019 по дизайн-менеджменту прошла 6-8 ноября в Лондоне. Опубликованы видео выступлений.

5. Простые советы Rudy Mutter из Yeti по вовлечению разработчиков в дизайн-активности и наоборот.

6. Отличная простая памятка Marc Jenkinson из Trello по методам координации удалённой дизайн-команды. К некоторым из них доступны шаблоны.

7. Cliona O'Sullivan из Spotify рассказывает о команде DesignOps и её роли в компании.

8. Jeff Patton описывает процесс ревью результатов работы продуктовой команды в формате двух-трекового agile-процесса, предполагающего исследовательский спринт. У него вышло сразу несколько заметок на эту тему: ревью заинтересованными лицами, планирование итерации, ежедневные стендапы.

Моргните, если что-то пригодилось :)

#designmanagement

​Самое время собрать прогнозы трендов на 2020 год. Как обычно, многие из них просто перевыпускают одни и те же посылы из года в год. Другие ударились в подведение итогов декады и нумерологию красивой наступающей цифры (20/20 Vision (аналог нашего «зрение — единица») и всё такое). Попробовал оставить только то, что даёт новые инсайты или делает пристойную переупаковку старого.

1. Fjord. Прогнозы на стыке дизайна, технологий, экономики и общества в целом.

2. Milo. Скорее перечисление того, что всё ещё хорошо работает, чем открытие чего-то нового, зато самое подробное.

3. Monotype собрали обзор шрифтовых трендов в брендинге. Помимо стандартных вещей вроде вариативности и геометрических гротесков говорят о постоянном ребрендинге.

4. Gartner. Технологии.

5. Pantone объявили цвет 2020 года — классический синий. Занятно, что в эпоху гипер-скоростных изменений участники этих изменений испугались и захотели покоя. Ок, бумер!

Все цвета года за последние 20 лет с ключевым визуалом к каждому.

6. Анализ цветов, использовавшихся в показах модной одежды. Отличный способ отслеживать цветовые тренды шире, чем Dribbble и Behance — к каждому цвету идёт мудборд.

7. Обзор лучшего дизайна обложек книг за 2019 год.

8. Dribbble провели мощное исследование среди своего сообщества (участвовало 17 000 человек). Особенности места работы и графика, образование, зарплата и другие аспекты.

9. New York Times. Потребление новостей.

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

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

В презентации для Design Prosmotr описал своё понимание трендов. Я вижу их скорее как диаграмму Geoffrey Moore, когда методы, практики и техники могут набирать обороты, быть просто жанрами и стандартами, либо выходить из моды. Стараюсь рассматривать всё новое через эту призму и вам советую.

P.S. Ради интереса можно сравнить с тем, что обещали на 2019.

#trends