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

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

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

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

#digest

​Выставка прорывного и уматного хайтека CES 2020 прошла 7-10 января в Лас-Вегасе. На ней традиционно обкатывают новые технологии для массовых продуктов, потом наперегонки заявляют «у нас тоже есть концепт применения этой штуки», а потом переключаются на что-то новое. Короче, хайпотека, где часть ставок срабатывает и становится хитами на много следующих лет.

Выбрал интересные устройства и направления, которые касаются дизайнеров интерфейсов:

ГИБКИЕ ЭКРАНЫ
В прошлом году случился фальстарт — Samsung отложил запуск своего первенца, остальные тоже либо оказались сыроваты, либо переносили начало продаж. Но технология решает уйму проблем (и позволяет ускорить цикл обновления устройств), так что шансы стать массовой хорошие:

1. Цена. TCL обещают телефон до $1000. Когда/если технология обкатается, она будет падать ещё ниже.

2. Больше примеров форм-факторов. Dell: ноутбук и планшет с гибким и двойным экраном, поддерживающие концепты Microsoft. Lenovo: ноутбук-трансформер по-новому (складывается вдвое, работает как книжка, имеет беспроводную клавиатуру). Intel: концепт аж 17"-ноутбука.

3. Больше сфер использования. LG: сворачиваемый ТВ и куча других примеров.

УМНЫЕ КОЛОНКИ И ГОЛОСОВЫЕ ПОМОЩНИКИ
Владельцы платформ организуют собственные конференции и презентации, так что на CES остаётся не так много:

— Samsung: не особо рассчитывает на Galaxy Home.

— Citizen: умная колонка с аналоговыми часами. В следующем году — с кукушкой.

— Google Assistant: поможет переводить общение пассажиров с представителями American Airlines.

АВТО
Это не автошоу, но многие автопроизводители позиционируют себя как технологичные и показывают койчего:

— Continental и Seinheiser: 3D-проекция без очков.

— Amazon: вслед за Alexa встраивает Fire TV.

— Sony: прототип с демонстрацией технологий компании.

— Velodyne: компактный LiDAR за $100.

НОСИМЫЕ УСТРОЙСТВА
Мода на умные часы прошла, так что их было негусто. В основном от мега-производителя Fossil, ну и сколько-то полу-аналоговых вроде Withings.

Зато весь прошлый год шёл бум беспроводных наушников (их называют hearables по аналогии с wearables), так что и на CES прилетело (например, Audio-Technica).

Обувка на массовую не тянет, но периодически проскакивает. Вот примеры от Nurvv и Asics.

УМНЫЙ ДОМ
— Alexa продолжает встраиваться в каждый возможный товар из Леруа Мерлен вроде душа и кухонного крана. А каждый второй кухонный предмет «умнеет» за счёт подключаемых модулей (например, грили Weber).

— Умные зеркала продолжают показывать: Poseidon и связка с тренажёром от Amazfit.

— Samsung показал уматнейшего робота Ballie, который следит за домом.

— Создатели мессенджера Kakao развиртуализировали персонажа в наборе для умного дома.

РАЗНЫЕ ТЕХНОЛОГИИ
Из других интересных штуковин около интерфейсов я бы отметил эти:

— Sensel: реакция на силу нажатия на корпус телефона.

— Lenovo: ноутбук со вторым экраном из электронной бумаги сзади.

— OnePlus: камера на задней стороне скрыта затемняемым стеклом.

— Quibi: кино, которое адаптируется под ландшафтный и портретный режим.

— Neon: полу-рабочие сгенерированные аватары людей.

— Panasonic: шлем виртуальной реальности в виде очков.

Было ещё много совсем отвлечённых концептов вроде целостного клиентского опыта от дома до аэропорта и самого полёта. И всякой дичи типа туалета с телефонным управлением и виртуальной реальностью и определения настроения собаки. В общем, технологии, как всегда, на службе человечества</sarcasm>.

Не каждый год выставки приносит прорывы, но CES неизменно двигает технологии и рынок вперёд. MWC в Барселоне куда менее интересна, а берлинская IFA более одскульная. Так что увидимся через год (обзоры за 2018 и 2019).

#ces #trends #events

​Недавний выпуск про тёмную тему оформления внезапно крепко пополнился. Сайт Dark Mode Design собирает такие материалы вместе (хотя и без категоризации). Официальные руководства и выступления Apple и Google, статьи компаний. Вот что добавил к прошлому:

КЕЙСЫ
1. Slack. Они сделали это через токены.
2. Instagram. Внедрение в iOS-приложения.
3. Wego. Советы на основе своего опыта.
4. Clubhouse. Они сделали забавный инструмент для сокращения количества цветов, обязательный этап перехода на дизайн-систему.

ПОДДЕРЖКА
Тест Engadget показал, что для iPhone с OLED-экранами тёмная тема держит батарейку гораздо лучше.

Chrome 78 и мобильная Opera позволят насильно включить тёмную тему на сайте, даже если он не поддерживает её.

APPLE
Статьи и выступления дизайнеров:
— Introducing Dark Mode
— Implementing Dark Mode on iOS
— Supporting Dark Mode in Your Web Content
— Advanced Dark Mode

GOOGLE
Статьи и выступления дизайнеров:
— How to Design a Dark Theme Using Material
— Dark Theme & Gesture Navigation
— Руководство по работе с тёмной темой оформления Material Design в Figma.

Подробнейший разбор особенностей создания тёмной темы в Material Design от Chethan KVS. Он проходится по всем основным аспектам подготовки цветов, состояний элементов, иллюстраций и т.п. Читайте также мощный обзор всех приложений Google на Android с тёмной темой оформления.

Ну и обновил статью с картинками. Чёрный — это новый чёрный.

#designsystems

Курирую UX-Марафон №18 по дизайн-менеджменту 30 января. Это самая крупная онлайн-конференция по дизайну интерфейсов от Александры Постоваловой.

Собрал годную и современную программу от сильных руководителей дизайна:

1. Сергей Кондауров (Яндекс). 500 встреч 1:1 с дизайнерами в год.

2. Лена Куликова (Райффайзенбанк). Управление design community в agile-командах.

3. Егор Коробейников (Miro). Управление распределённой командой: как перестать жить и начать беспокоиться.

4. Саша Гришин (Badoo). Diversity внутри дизайн-отдела. Почему это одно из качеств сильной команды и действительно важно для ее успеха.

5. Анастасия Попова (Альфа-Банк). Новый лидер в старой команде.

6. Иван Васильев (Scentbird). Найм дизайнеров в продуктовые компании и его исследование рынка.

Я сделаю небольшую вводную вначале о состоянии дизайн-менеджмента.

Начало в 11:00. Участники получат видео-запись, презентации и другие полезные материалы.

#designmanagement

​В свежей подборке по дизайн-системам вы узнаете о том, что:

1. Nathan Curtis собрал вместе все свои статьи о дизайн-системах. Он самый толковый автор по теме, так что это лучше любой книги. Они с EightShapes также оживили одноимённый Твиттер.

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

2. Подробный чеклист по внедрению дизайн-системы. Визуальный язык и токены, компоненты, инструменты, управление проектом.

3. Material Design обновили гайдлайны по плотности интерфейса. Она позволяет адаптировать его для разных задач и сред (например, увеличить для веба).

4. Подкаст с Amy Hupe, работавшей над контентом и документацией для дизайн-системы Gov.uk.

5. Shaun Bent, Gerrit Kaiser и Marina Posniak из Spotify рассказывают о структуре команд их дизайн-системы Encore. Правда, деталей мало и непонятно, действительно ли там есть сложная модель или они просто используют эффектный термин «дизайн-система дизайн-систем».

6. Sam Mason de Caires и Adam Morse мощно расписывают работу над новой цветовой палитрой для дизайн-системы Cloudflare с учётом всех требований доступности.

Что будет в 2020 году
В работе над дизайн-системами много вопросов, один из главных — как делать живой гайдлайн для вывода компонентов. Разработчики всегда любили фреймворк Storybook, но он выдавал не самый симпатичный сайт, да и описать там можно было не всё. В итоге дизайнеры делали свою витрину компонентов, так что приходилось поддерживать сразу две.

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

Ещё одна ключевая новость — появилась рабочая группа, которая хочет сделать токены стандартом W3C. Это просто пушка, ведь токены — самый простой способ начать технологическое решение для дизайн-системы. Ребята также хотят сделать его и для инструментов вроде InVision Design System Manager — тогда одна из главных проблем (нет связи между компонентами в коде и шаблонами в инструментах дизайна) станет чуть ближе к решению.

Кстати, зацените каталог дизайн-систем с использованием токенов. Его делает Jina Anne (а ещё она пишет книгу про них).

#designsystems

​Материалы о пользовательских исследованиях из будущего и предыдущего дайджеста. Чтобы пользователь улыбался, а дизайнер вдохновлялся:

1. NN/g: Два типа персонажей — широкого и узкого спектра. Первые описывают компанию в целом, вторые — отдельные продукты.

2. Rosenfeld Media запускают новую конференцию Advancing Research. Первая пройдёт с 30 марта по 1 апреля в Нью-Йорке. Крутой состав и мощные темы про масштабирование и ResearchOps.

3. СКБ Контур: продуктовая команда делает концепты интерфейсов вместе с респондентами.

4. Glubina: Исследования для понимания Jobs to Be Done.

5. NN/g: чеклист этической зрелости. Всё больше компаний, где дизайнеры и менеджеры продуктов самостоятельно общаются с пользователями, но не всегда умеют делать это.

5. Чеклист по организации помещения для UX-лаборатория от Дмитрия Himi.

6. NN/g: подход к проверке гипотез, которые зачастую заложены в беклоге продуктовой команды.

7. Jeff Sauro изучил вопрос «нужны ли подписи ко всем элементам шкалы опроса». Предыдущие исследования на тему чёткого доказательства не дают, многое зависит от контекста опроса (способ, частота, подача).

8. Shopify: переход из поддержки пользователей в UX. Пересечение и потенциальное взаимодействие между этими двумя ролями.

9. Creative: предварительные исследования для одного из клиентских проектов.

10. Ветеран пользовательских исследований Carol Barnum размышляет на тему текущего состояния профессии. Как популярные подходы (демократизация исследований, новые инструменты и т.п.) сказываются на качестве результата.

Лайк, если пригодилось.

#research

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

1. Dave Cunningham (Co-op): модель DIET (Design Impact Evaluation Tactic) для оценки потенциального успеха проекта. Она проверяет доработанную версию double diamond по нескольким вопросам. Чеклист на отдельном сайте и в виде таблицы.

2. Libby Maurer (HubSpot): баланс между ростом и улучшением существующей функциональности. Хорошие принципы дизайн-команды, а также детали про работу с дизайн-долгом.

4. Daniel Rosenberg: фреймворк дизайн-менеджмента. Он, как и я, использует идею паттернов для структурирования лучших практик и методов. Хотя фокусируется на общих для менеджеров вообще.

5. Kate Kaplan: задачи и формат типовых рабочих сессий: изучение проблемы, эмпатия, дизайн, расстановка приоритетов, критика.

6. Jon G. Temple и Patrick Commarford (IBM): 4 способа взаимодействия дизайнера в agile-команде. От этого зависит влияние на дизайн-решения и вообще формат их принятия.

7. J.T. Trollman (Facebook): процесс работы над типичной задачей по дизайну. Ключевые вопросы и шаблон постановки задач.

8. Jared Spool: подход к внедрению методов и практик в дизайн-командах. Они раскладываются на три стопки: уже делаю, попробую, не подходит.

9. Прошлым летом к нам на Mail.ru Design Conf приезжал Matouš Roskovec из Avocode. А потом я сгонял в Прагу и пообщался с ним. Из этого выросло годное интервью для их серии The Grit. От истории прихода в дизайн и карьерного пути до практик дизайн-менеджмента и профессиональных хобби. Писал ответы с неделю, зато получилось очень подробно. Общались между работами, так что текст про этот период.

Кстати, в этот четверг пройдёт UX-Марафон №18 о дизайн-менеджменте. Выступят Сергей Кондауров (Яндекс), Лена Куликова (Райффайзенбанк), Егор Коробейников (Miro), Саша Гришин (Badoo), Настя Попова (Альфа-Банк) и Иван Васильев (Scentbird). Заходите на огонёк (это я про темы выступлений).

#designmanagement

​Мини-дайджест с новыми инструментами дизайна пропустил пару циклов. Так что приехало с горочкой:

Play: Совершенно дикая штука — инструмент дизайна мобильных приложений на самом телефоне. Ребята сотворили совершеннейшую чуму (пусть и вызывающую вопросы по продуктивности такой работы дизайнера). В феврале появится бета для iPhone, позже обещают iPad и Android-телефоны. Предыстория создания от авторов.

Sketch 62 и Inspector: Улучшение smart layout (минимальная и максимальная ширина). И, наконец-то, бета-версия аналога Zeplin. В конце прошлого года обещали некого помощника по улучшению дизайн-решений, совместную работу над макетом и более мощные возможности прототипирования.

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

Плагины для Figma:
— Bravo Studio App: Подключает реальные данные и генерирует нативный код для Android и iOS на основе прототипов.
— Design Lint и Roller: Линтинг для макетов. Проверяет расхождения с дизайн-системой (цвета, шрифты, границы, тени, скругления).
— Smooth Shadow: Плагин позволяет делать аккуратные тени с помощью кривых easing.
— Text Prettier: Плагин-типограф для причёсывания текста.

Adobe: MS Office 365 может подключить библиотеки Creative Cloud для импорта стилей и ресурсов.

Adobe XD: Январское обновление. Также добавили авто-layout. Читайте также интервью с Talin Wadsworth об истории создания инструмента и планах на будущее. Он также рассказывает о рабочем процессе и команде.

Vectornator: Вышла версия для Mac.

Adalo: Ещё один конструктор мобильных приложений, делающий нативную сборку на основе прототипа. Android, iOS и веб.

Storyland: Конструктор промо-сайтов в формате историй.

WebStudio: Ещё один конструктор сайтов в браузере.

ГЕНЕРАТОРЫ И КОНВЕРТЕРЫ
Fronty: Сервис конвертирует картинку в HTML. Эффектно, но непонятно зачем — макет сайта и так сделан в каком-либо инструменте с разбивкой по слоям, а генераторов оттуда и так хватает.

EscherSketch: Браузерный инструмент позволяет делать паттерны из симметричных фигур и наглядно видеть их в повторяющемся полотне.

Super Sphere: Генератор контурных сфер с анимацией.

Flow Lines: Генератор абстрактных паттернов из линий.

BG Painter: Генератор модных фонов (например, «жидкий металл»).

Scribbbles: Бесплатная коллекция клякс и абстрактных паттернов для промо-сайтов.

ЦВЕТ
Calcolor: Интересный генератор цветовых палитр, который позволяет копать смежные в разные стороны.

Who Can Use: Мощный сервис для проверки цветового контраста. Он показывает значение для каждого типа нарушения цветовосприятия и сам искажённый цвет.

Leonardo: Генератор цветовых палитр с фокусом на правильный контраст для обеспечения доступности.

Gradienta: Генератор градиентов и интересных наложений слоёв в браузере с экспортом в CSS.

Trace: Ещё один убиратор фона с фотографий.

Social Sizes: Большая коллекция шаблонов для всех соцмедиа с актуальными размерами.

Pixelworm: Занятный сервис, который позволяет сравнить макет в Sketch и реализацию в мобильном приложении.

Clai: Инструмент позволяет сделать подачу макета на устройстве, которое в свою очередь можно вертеть с анимацией.

Nototo: Дичайший сервис заметок в виде карты виртуального мира.

Уже сейчас видно, что всё это будет глючить и тормозить (в развитии), как говорил автор мема из позапрошлого десятилетия. Хотя какие-то вещички полезны по-мелочи.

#tools

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

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

#digest

​Немного свежих (или вышедших не так давно) лучших (ну, нормальных) практик и паттернов для ваших (или клиентских) интерфейсов:

1. Теория «информационного чутья», которое помогает пользователям оценивать потенциальную полезность информации на сайтах.

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

3. Роль анимации в интерфейсах. Список достаточно стандартный, но язык описания более профессиональный. Продолжение с советами по оптимизации.

4. Быстрые, но менее наглядные способы управления интерфейсом для опытных пользователей.

5. Dan Davies вдохновился экспериментами Andy Clarke по переносу интересной журнальной вёрстки в веб и сделал пачку собственных подходов.

6. Правильное представление элементов интерфейса для выбора цвета товара.

7. Подходы к перенаправлению пользователя интернет-магазина из поиска в категорию товаров. Они дают больше инструментов.

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

9. Организация и размещение видео-инструкций на сайтах.

(тут должно было быть традиционное напутствие, но очень охота спать)

#patterns

​Наконец-то я умудрился выпустить мини-дайджест, который действительно мини: свежатинка про пользовательские исследования:

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

2. Три основные цели юзабилити-тестирования: обнаружение проблем, сравнение с конкретным показателем или другим интерфейсом. Хорошо описана суть каждого.

3. Деление сценария юзабилити-тестирования на составляющие, которые дают разную наводящую информацию. Это позволяет проверить не только удобство работы с функциональностью, но и её обнаруживаемость.

4. Подробнейшая памятка по учёту GDPR при проведении пользовательских исследований. Закон накладывает много ограничений.

5. Полный список стандартных методов оценки UX. Они развивались по трём веткам с 1980х годов.

6. Влияние культуры разных стран на распределение ответов в опросах вроде NPS. Его гипотеза: это может влиять на смещение ответов в сторону более ярко выраженных или нейтральных.

Кажется, это редкая не-простыня :)

#research

​Осенью запустил исследование отношения к продуктовым дизайн-командам в России. Наконец-то собрал результаты. Участвовало 1260 человек — в два раза больше, чем в 2018, хотя для качественных результатов лучше ещё больше (учту в 2020 году).

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

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

Бонусом собрал список заметных продуктовых дизайн-команд со ссылками на их сайты, блоги и дизайн-системы. Как можно заметить, это практически полностью повторяет рейтинг :) Пока бета-версия, но буду активно развивать — получится хорошее дополнение к Design Systems Club.

Заодно переделал сайт готовящейся книги о дизайн-менеджменте. Пока скорее переезд на новую платформу с заделом на будущее.

P.S. Отдельное спасибо дизайнерским сообществам, которые помогли собрать ответы. В первую очередь — Оди и Ищу дизайнера.

#designmanagement #survey #research

​2 марта стартует третий поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education. На первых двух отучились 120 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: Альфа-Банк, App in the Air, Aviasales, Avito, Badoo, ВТБ, Chatfuel, EPAM, Foodplex, Mail.ru Group, ManyChat, Miro, Модульбанк, МТС, OneTwoTrip, ПСБ, QIWI, Qlean, Райффайзенбанк, Rambler Group, РБК, Redmadrobot, Ростелеком, Сбербанк, S7, Tele2, Тинькофф, TomTom, Учи.ру, ЦИАН, Wrike, X5, Яндекс и многих других.

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

Получился огромный массив знаний из 37 уроков на 8,5 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 3 месяца (правда, первые два потока выехали за срок, но я стараюсь вернуться в рамки). Помимо видео-лекций есть домашние задания и вебинары после каждого блока.

Записаться.

#designmanagement