Дайджест продуктового дизайна, ноябрь 2018

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-октябрь 2018.

537a8d95a361284e1570805442f95131.png


Паттерны и лучшие практики


Design for security


Дихотомия между юзабилити и безопасностью ― одна из самых старых в профессии, причём зачастую проигрывает либо одно, либо другое. Serena Chen описывает пути, которые помогут найти баланс ― как сделать наиболее безопасный вариант самым удобным, чтобы по нему хотелось пойти.

7345f8b6087fb6f72419077d9dc8f30b.jpg

Building the perfect splash screen


Duncan Campbell из Gorilla Arm разбирает лучшие практики экранов-заставок при запуске приложений. Толковые советы для разных ситуаций, позволяющие уменьшить реальное или воспринимаемое ожидание загрузки.

b9d74637ae3f3cef0a3cb28a1037e535.jpg

The User Experience of Chatbots


Raluca Budiu рассказывает о пользовательском исследовании ботов от Nielsen/Norman Group. Отличное описание типовых сценариев и частых проблем.

421c459bd27c1e976bad120ee66e5954.png

Design Guidelines for Input Steppers


Yuxuan (Tammy) Zhou из Nielsen/Norman Group описывает принципы использования полей ввода с пошаговым увеличением значений.

Five Mistakes in Designing Mobile Push Notifications


Советы Alita Joyce из Nielsen/Norman Group по грамотной работе с уведомлениями на мобильных. Как правильно настроить их частоту и момент отправки.

Wishlist or shopping cart? Saving products for later in ecommerce


Page Laubheimer из Nielsen/Norman Group описывает несколько способов сохранения товаров в интернет-магазине на будущее и помогает выбрать оптимальный.

Дизайн-системы и гайдлайны


Efficient Consistency with the Mosaic Design System


Мощный рассказ Benjamin Martin из TeleTracking о том, как их дизайн-система собирает компоненты и шаблоны в Sketch из токенов. В статье отличная диаграмма последовательности сборки с упоминанием всех нужных инструментов.

b0d10961e0ed0f8ef9dc15b83ce11544.png

Master Product Design at Scale


Brad Frost, Dan Mall и Josh Clark подготовили серию образовательных видео по работе над дизайн-системами для InVision. Анонс.


Redesigning your product and website for dark mode


Судя по всему, тёмные темы оформления станут хитом следующего года. Andy Clarke показывает, как поддержать её на сайте через media queries.

827ccef3a5dcc26cb86a48a600b439b5.png

How we document components and patterns in the GOV.UK Design System


Amy Hupe из GOV.UK рассказывает, как команда описывает компоненты и паттерны в дизайн-системе.

Palx


Генератор цветовых палитр. Вы ему основной цвет, он вам ― вспомогательные.

Microsoft Fluent Design


Jon Friedman из команды MS Office рассказывает о работе над новыми иконками приложений. Это один из самых мощных примеров того, как можно выразить визуальный язык — они здорово провязаны с Fluent Design System, в основе которой 3D-материалы, акрил и clay-рендер.

1a45c2adff2b30d99e547f166504d5b9.jpg

Понимание пользователя


We are Colorblind — Making the world a better place for the colorblind


Толковый ресурс по оптимизации интерфейсов для людей с нарушениями восприятия цвета (300 миллионов человек в мире). Кейсы, статьи, инструменты.

158d12160ab1ab31cf2f8ef2ccb1617c.png

Presenting UX Research Findings Using the Jobs to Be Done Framework


J. Henry McKeen из The Home Depot рассказывает об атласе Jobs to Be Done. Он помогает проанализировать ключевые составляющие ― драйверы, текущее поведение, болевые точки и критерии успеха.

Глубокое погружение в JTBD


Серия видео Михаила Руденко из Бюро Сервисного Дизайна, описывающих основы метода Jobs to Be Done. Часть 2 и 3. Они также опубликовали чеклист для описания работы.




Информационная архитектура, концептуальное проектирование, контент-стратегия


Описать задачу в виде истории


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

Строим Customer Journey Map


Станислав Хрусталёв из Hard Client описал годную памятку по созданию customer journey map. В блоге компании много других отличных материалов на тему сервисного дизайна:

Методы сбора обратной связи.
Внедрение улучшений.
Построение программ лояльности.

cb91156439d62202a5e7069d5a1bef84.jpg

Проектирование и дизайн экранов интерфейса


Bondlayer


Новый инструмент дизайна и разработки. Можно получить код для веба или Android/iOS (и даже опубликовать в магазинах приложений).

7e857d0e7b4152264b865de408966edb.jpg

Figma


Dylan Field сделал обзор основных обновлений за год. Скорость развития инструмента, конечно, фантастическая.
Читайте также советы по эффективной работе с инструментом от Tom Johnson.

Framer


Получили ещё $24 млн инвестиций в серии Б.

InVision Studio 1.0


Общие библиотеки компонентов, улучшение интерфейса и производительности. UI Kit для iOS и Android.

b579686a8899afe88fddd64faea7493b.jpg

Atomic


Инструмент закрывается. Команда планирует заняться более общим инструментом для продуктовой разработки.

Adobe XD


Sketch


Плагины


  • Timelapse: позволяет записать скринкаст работы над макетом.
  • Anima: управляет отступами вложенных символов.
  • Felipe: позволяет превращать примитивные фигуры в символы Sketch. Анонс от автора.
  • VK Data: позволяет вставлять различные данные из профиля ВКонтакте: аватарки друзей, сообществ, обложки видео.


Leeflets


Ура! Ещё один конструктор одностраничников.

Grid Studio


Стоп. Ещё один!

Drawkit


Шаблоны иллюстраций в духе Slack.

18c5cd23ce730a433fc66bfbb794ae47.png

Avocode


Теперь тоже показывают связку экранов, загруженных как прототип.

Squoosh


Сервис для оптимизации изображений от Google.

Meta Tags


Сервис помогает быстро примерить мета-теги сайта и то, как ссылка отображается в Google, Facebook, Twitter, LinkedIn, Pinterest и Slack.

0a994ba9a21782eaf96d195455cb1eac.png

Hadron


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

Readymag


Анонсировали бета-версию разбивки длинных страниц на секции. Это упростит изменение контента в середине (не придётся двигать и перепроверять то что ниже).

Iterate


Тарас Бризицкий делает свой инструмент для проектирования интерфейсов на iPad. Недавно появилась бета-версия. Более ранний анонс с описанием изначальной идеи.


Falafel + AIC


AIC сделали свой блокнот для скетчей интерфейсов.

Пользовательские исследования и тестирование, аналитика


Research That Counts


Duyen Mary Nguyen рассказывает о методах количественных исследований, которые использует Facebook.

The Methods UX Professionals Use (2018)


Jeff Sauro провёл регулярный опрос среди UX-специалистов на тему используемых ими методов пользовательских исследований. В статье статистика за 2018 год.

Scoping User Research


Памятка Jim Ross об определении объёмов работ при проведении пользовательских исследований. Сколько и каких респондентов искать, какие задачи включать, как выстроить логистику, в каком виде анализировать и презентовать результаты.

Визуальное программирование и дизайн в браузере


Новые скрипты


Experimenting with brain-computer interfaces in JavaScript


Charlie Gerard научилась управлять сайтами в браузере через устройство мозг-компьютер с помощью JavaScript.

FE webdev on iPad Pro (2018)


Craig Morey попробовал iPad Pro в качестве инструмента для веб-разработки. Для серьёзной работы он не годится, как бы Apple ни продавали будущее.

Метрики и ROI


Do Detractors Really Say Bad Things about a Company?


У NPS, как и у любого другого метода, есть свои особенности и ограничения, а также критики, которые книжек не читали, но высказаться должны. Jeff Sauro повторил эксперимент автора метрики Fred Reichheld и показал распределение оценок и готовности рекомендовать продукт. Спойлер: почти всё работает как обещано.

Дизайн-менеджмент


Внедрение UX-стратегии 2.0 или DesignOps


Моя презентация о нашем свежем подходе к долгосрочному планированию изменений в дизайне в компании. В начале года мы запустили свежую версию подхода, с помощью которого системно улучшаем дизайн продуктов и внедряем новые методы работы. В основе — классическая пирамида стратегического планирования от видения и миссии до конкретных шагов на базе OKR (Objectives & Key Results).

Индексы ценности дизайна для бизнеса


Понимание ценности дизайна для бизнеса помогает обеим сторонам. Собрал несколько индексов, пытающихся посчитать взаимоопыление: McKinsey Design Index, Design Value Index; отчёты Forrester для IBM, British Design Council и финский рынок дизайна. В статье дискуссия о том, можно ли им верить.

4a2042976e58e6efcf7817fcfeb4d97a.png

Как разобрать интерфейсный долг, №1


Долг бывает карточный, технический, организационный и интерфейсный. За первый можно пострадать лично и физически, за остальные ― отхватить проблем как продуктовая компания. Дизайн-долг ― это намеренно или неумышленно накопленные проблемы с юзабилити, решение которых откладывается до будущих версий. В итоге страдают пользователи, а они хоть и терпеливые, со временем соскакивают и не возвращаются. Есть несколько примеров системного подхода: Nielsen/Norman Group, Truven Health, Athena Health, Salesforce, Optimizely.

11f6754979b0d340ed99295ad37683df.png

Progression Pack


Инструмент для оценки компетенций дизайнеров и их развития. Она разбита на три категории — общечеловеческие, профессиональные и лидерские навыки.

a7d8502910f6ca6aa107f710e0e40741.png

progression.fyi — A collection of open source frameworks for helping designers and engineers to grow at work


Jonny Burch собрал коллекцию карт компетенций для дизайнеров и разработчиков от разных компаний.

450d582d31a66b1844f780c7e444118b.png

Interview with Stephen Olmstead VP Product Design Strategy at InVision


Stephen Olmstead из InVision рассказывает о том, как работает дизайн-команда в компании. Всего в организации 750 распределённых сотрудников, из которых дизайном занимаются около 30.

Design Leaders are Business Leaders


Alastair Simpson из Atlassian описывает основные тезисы своего выступления на Leading Design 2018. Он говорит, что дизайнеры уже давно получили место у стола принятия ключевых решений, но боятся воспользоваться им в полной мере. Кроме того, самомнение в духе «мы единственные знаем о пользователях» мешает осознать, что в современной продуктовой команде таких ролей много и они ценны не менее.

Playback on Design Thinking — Not Just For Designers


Kelly Churchill из IBM продолжает рассказ о том, как дизайн-мышление помогло front-end-разработчикам. Они замеряют NPS у людей в компании, которые работают с новыми разработчиками и он вырос благодаря предложенным улучшениям.

Increase your design influence by understanding your organization«s decision-making style


Dani Nordin из athenahealth показывает, как учитывать стиль принятия решений в организации. Она даёт советы дизайн-командам по каждому из четырёх.

Про продуктовую культуру Facebook. Взгляд изнутри


Олег Якубенков поработал в Facebook и рассказал о продуктовой культуре компании.

Microsoft CEO Satya Nadella on innovation and organizational change


Интервью главы Microsoft Satya Nadella об изменениях в культуре и организации компании, которые понадобились для нового рывка. Он более чем заметен — в конце ноября их капитализация обогнала Apple. Статья не про дизайн, но про важность перестройки организации для нового рывка, который в случае Microsoft отразился и на интерфейсах.

Intranet Design After a Merger or Acquisition


Памятка Kara Pernice из Nielsen/Norman Group по интеграции интранетов компаний после их объединения. Проблема не то что бы частая, но ситуация сложная и разбор достаточно подробный.

Командное взаимодействие


Cleverstack


Сервис помогает проводить брейнштормы в онлайне — записывать идеи и голосовать за них, чтобы выбрать наиболее годные.

ac73e2faa9c45039c13db4e098bb8bf0.png

Методологии, процедуры, стандарты


How concept sprints can improve customer-experience innovation


McKinsey взяли методологию дизайн-спринтов и переименовали в свой подход «концепт-спринтов». Отличий мало, разве что более чётко прописана привязка к бизнес-задачам и расчёту ROI от внедрения.

Кейсы


What We«re Working On: Facebook


Jordan Amblin из MetaLab рассказывает, как они делали концепт представления видео в мобильном приложении Facebook.

Тренды


Статистика рынка (III квартал 2018)


рост продаж умных часов в мире — 67%

Samsung Infinity Flex


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


Android поддержит эту возможность в ближайшее время.

We just announced support for foldables at #AndroidDevSummit, a new form factor coming next year from Android partners.

Android apps run seamlessly as the device folds, achieving this form factor’s chief feature: screen continuity. pic.twitter.com/NAfOmCOY26
— Android Developers (AndroidDev) 7 ноября 2018 г.


Кроме этого они анонсировали новую интерфейсную оболочку One UI. Интересно, что они разделили экран на верхнюю (контент) и нижнюю части (элементы управления).

20ef3fe3fbe04143561319d281ca7d8b.png

Алгоритмический дизайн


Apple«s New Maps


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

Generating custom photo-realistic faces using AI


Экспериментальный генератор реалистичных фотографий лиц от Shaobo Guan. Можно выбирать пол, возраст, расу и другие детали.


Chinese news agency adds AI anchors to its broadcast team


Китайское новостное агентство Xinhua запустило двух алгоритмических ведущих. Их голос, выражение лица и движение губ синтезируются.


Голосовые интерфейсы


Голосовые помощники показывают крутой рост — на конец года прогнозируют 75 миллионов проданных устройств по миру (подробная статистика ниже). Китай скоро обгонит США, да и в России намечается горячая пора — к Яндексу и Google добавится Mail.Ru Group. Чтобы не остаться в стороне, дизайнерам давно пора качать мускул голосовых интерфейсов.

доля продаж Amazon — 31,9%

29,4% продаж приходится на Китай

прогноз продаж на год — 75М

на смартфонах в США — 90М

в колонках в США — 46М

50 000 навыков у Alexa в США, мало отзывов

Siri на смартфонах в США — 44%

Siri на смартфонах в мире — 31%

Google Assistant на смартфонах в мире — 51%

Voice Principles


Ben Sauer собрал для Clearleft коллекцию принципов дизайна голосовых интерфейсов от разных компаний. В дополнение к ним — книги, статьи и общие мысли.

Voice User Interfaces (VUI) — The Ultimate Designer«s Guide


Годная памятка по проектированию голосовых интерфейсов от Justin Baker из Intuit. Выбор типа устройства, сценарии и контексты использования, технологические ограничения и ключевые моменты взаимодействия.

Посредственный юзабилити умных помощников: исследование пользователей Alexa, Google Assistant и Siri


Перевод самой первой части исследования от Nielsen/Norman Group.

How to Use Voice UI Prototyping for Delightful User Experiences


Советы по прототипированию голосовых интерфейсов от Cathy Pearl из Google, Cassidy Williams из Amazon, Susse Sønderby Jense из Adobe XD, Ben Sauer из Clearleft.

Aimylogic


Онлайн-конструктор чат-ботов и навыков для голосовых помощников Google Assistant и Яндекс Алиса.

Для общего и профессионального развития


Why are tech companies making custom typefaces?


Arun Venkatesan разбирает причины, по которым компании создают собственные шрифты. В последнее время их всё больше, при том что это не всегда выражается в характерном результате ― многие из них очень похожи.

Материалы конференций


Все видео с Dribbble Meetup, UX-Среда и других мероприятий Mail.Ru Design на YouTube и во ВКонтакте


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

4b530501f11aacf4826a03c258ee182a.png

Отчёт о DesignOps Summit 2018


Попал на относительно свежую конференцию по дизайн-менеджменту цифровых продуктов DesignOps Summit (проходит второй год). Оказалось очень годно ― одна из самых полезных, на которых бывал. Мощно, что смогли набрать столько узкоспециализированного контента на два дня ― почти все выступления были либо добротными, либо крутыми (всего несколько пустышек). Уже есть презентации и отчёт от Natalie Hanson. Организаторы обещают выложить видео.

989c76da3d433ebb2ca2b3073ecac488.jpg

Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику.

© Habrahabr.ru