Дайджест продуктового дизайна, май 2019

Дайджест продуктового дизайна, май 2019


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

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


Design Animation Handbook — UI Animation Guide


Новая книга Ryan McLeod «Animation Handbook» от InVision посвящена интерфейсной анимации. Мысли и интервью дизайнеров Google, Headspace, Lyft и Zova Fitness. Не самая крупная из того что они делали, но достаточно подробно.

a2aca98f22b48e763a709ae7e6606910.png

Google UX Designer David Hogue Shares How to Reverse Over-Complication in Product Design and How to Avoid It Altogether


Советы David Hogue из Google по упрощению интерфейсов. Толковый системный подход помогает разобрать потенциальные сложности в продукте.

4122f44bbcef7ac564e1cc20a08f74e6.png

3 Design Considerations for Effective Mobile-App Permission Requests


Советы Maria Rosala из Nielsen/Norman Group по грамотному формату и моменту запроса разрешений на использование функций мобильного у пользователей.

4a24fb5138f72910ad7bc4d2a2e9f2fe.png

Designing for different states in the UI


Памятка по дизайну состояний интерфейса от Shane Doyle. Идеальное состояние, пустое, загрузка, частичное, неидеальное, интерактивное, ошибки, успех.

Тексты для интерфейса — как пишут контент в Тинькофф Бизнес


Конспект выступления Анны Кочетковой из Тинькофф Бизнес с конференции UX Марафон. Отличная памятка по хорошим текстам в интерфейсе.

5 things to be mindful of when you design filters


Памятка Zhiyu Xue по грамотному интерфейсу фильтров. Как обеспечить хорошую выборку и помочь пользователю работать с ней.

В поисках длинного тире


Интересный формат памяток по типографике в формате простых карточек от команды DocDoc.

Designing a Dark Theme for OLED iPhones


Vidit Bhargava показывает, почему на OLED-телефонах лучше подходит тёмно-серый цвет для тёмной темы оформления, а не чистый чёрный. С чистым чёрным анимация будет смазанной, а тёмно-серый будет есть почти так же мало энергии (на OLED-экранах чем ярче пиксель, тем больше батарейки он требует).

Night Mode with Mix Blend Mode: Difference


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

«About Us» Information on Corporate Websites — User Research Findings


Советы Anna Kaley и Jakob Nielsen из Nielsen/Norman Group по представлению страницы «о компании».

Исследования Baymard Institute


Советы Jamie Appleseed по органичному встраиванию видео на страницу продукта.

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


Новое в Android Q и Google I/O 2019


Ежегодная презентация достижений гуглового хозяйства Google I/O 2019 прошла 7–9 мая в Mountain View. Собрал то, что касается дизайнеров.

_z64_iv77ef9uw_l40o4b9pyhaa.gif

Android Q теперь имеет тёмную тему из коробки (гайд для разработчиков). Её ещё должны поддержать сами приложения, но для многих это хороший повод систематизировать работу с цветами и иконками, (например, через токены). Те, кто использовал стандартные компоненты Material Design, могут вообще расслабиться — у них поддержка из коробки. Лекция для дизайнеров с конференции.

7c23ba4d116a1a756d6d6ad4655d53ef.gif


Другие интерфейсные нововведения в десятой версии:

Доработали управление жестами для основной навигации по ОС, переход на которое начали в Android P. Есть потенциальный конфликт с боковым меню для возврата назад. Классический вариант с 3 иконками доступен при первичной настройке.

70d0504ea2edd1da85e52610454dcb91.gif

Поддержка гибких экранов из коробки. В компании работают над прототипами таких устройств.


В гайдлайнах Material Design появился раздел про звуки в интерфейсах. Лекция для дизайнеров.


Плавающие чаты Bubbles а-ля Фейсбук станут частью платформы.

ae5b68bf4bcfe595cc99768318cb4cd2.png

Инициатива digital wellbeing дала хороший эффект: её пользователи уменьшили использование телефона ночью на 27%. В Q будет ещё и режим фокуса с запретом на запуск отдельных приложений для прокрастинации.
Движок для deep learning мощно оптимизировали, так что он теперь доступен на устройстве даже без интернета. Благодаря этому появилось сразу несколько мощных вещей:

Smart Reply работает для любых мессенджеров, быстрые действия доступны в области уведомлений.

zpcsmrr-e9kciezid0qvpengdkw.gif

Субтитры к видео в реальном времени (пока только для английского).

2f897851d0e5835ede1692a636e9c1aa.gif

Все выступления с конференции для дизайнеров. Тематизация в Material Design и его применение в продуктах, дизайн-спринты для Google Assistant, дизайн для ИИ, звуки в интерфейсе, тёмная тема. Ну и обзор нового в Material Design.


В общем, после масштабного обновления Material Design в прошлом году сейчас речь больше про полировку и постепенное развитие. Бета-версию уже можно поставить (хотя там есть пока не всё).

5 steps for systematizing motion design


Шикарная памятка по описанию анимации в дизайн-системах от Caleb Barclay. Аудит существующих решений, ключевые переменные и шкалы, характер и принципы, спецификация.

16c3dc0f67b3a1d2078821db01c23c6c.png

The Sound of Trust — Building a Sonification Strategy for Enterprise Experiences


Adam Doti из Salesforce рассказывает об описании интерфейсных звуков в их дизайн-системе Lightning. Принципы, паттерны и отличная модель уместности.

bed0fa0d940f033aa7f6a3d200d1219c.png

Typography in Design Systems


Nathan Curtis подробно рассказывает о лучших практиках описания типографики в дизайн-системах.

27795514615e19007f81a3d2b138ccfc.png

Uber Base Web — Base Web React Components


Дизайн-система Uber. Анонс.
1f662c9902469b8de4677dd54de0aa32.png

Stencil


Фрейворк для создания дизайн-систем вышел из беты.

Front-End Documentation, Style Guides and the Rise of MDX


Обзор синтаксиса MDX и популярных фреймворков (Docusaurus, Gatsby, Docz, Storybook, Styleguidist, VuePress, MkDocs, GitBook) для создания живых гайдлайнов и описания компонентов.

83b0ac6a6cc8b8f0d40ae263638dab11.png

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


«Our Users Are Everyone» — Designing Mass-Market Products for Large User Audiences


Kathryn Whitenton рассуждает на тему массовых продуктов, где сложно сегментировать пользователей. Часто это приводит к вынужденному мнению, что «наши пользователи — это примерно все, так что ничего не попишешь». Она советует попробовать разделять их как минимум по частоте использования — это хороший первый шаг.

cf9c2ac21a44253e2a949a3d3c302ad8.png

6 Rules for Persuasive Storytelling


Советы Rachel Krause из Nielsen/Norman Group по обёртке знаний о пользователях и их сценариев использования продукта в понятные и наглядные истории.

Remember Me


Lindsay Nevard из Facebook показывает, как грамотно упакованные истории пользователей могут помочь продуктовым командам во многих рабочих моментах.

479dce96bebebf674563ec3d388a211e.jpg

Why Do People Call Customer Service?


Jeff Sauro исследовал ситуации, в которых клиенты обращаются в службу поддержки. Они разделены по отраслям и конкретным проблемам.

Making the Case for Accessibility


Susanna Zaraysky даёт советы по аргументации вложений в доступность для пользователей с ограниченными возможностями. Не то что бы подкреплено сильными цифрами, но полезно.

Why I Don«t Believe in Empathic Design


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

fb86e396959349403b5eba985343565b.jpg

Don Norman on how design fails older consumers


Don Norman пишет о проблемах современного технологического мира, плохо приспособленного для пожилых людей.

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


Évolt


Сервис позволяет вести работу по концептуальному проектированию интерфейсов. Описание персонажей, сценариев, customer journey map, ну и мудборды в придачу.


Intercom on Onboarding


Intercom опубликовали второе издание своей книги «Onboarding».

Новые инструменты дизайна интерфейсов


Sketch 55


Простой способ менять расстояния в группе объектов, просмотр кода SVG, улучшение печати и интерфейса в целом.

7ae224d5db641a09c9f3b5f95fe2d113.png

Плагины


Adobe XD


Майское обновление. Компоненты переработаны в более зрелую версию вместе с более системной работой со стилями, много улучшений интерфейса.

Figma


Шаблоны для рисования диаграмм в Sketch и Figma.
Роман Камушкен описывает несколько подходов к созданию таблиц.

Framer X


Наконец-то вышел Framer Bridge, позволяющий подключить компоненты из технологического фреймворка. Они синхронизируются с компонентами Framer (которые теперь используют Git для версионирования).

3f74d8a669edcfababa4fa2ebc9c5e5f.png

Также запустился Framer Playground с новым редактором кода для создания своих компонентов.


Marvel


Вышла третья версия корпоративного пакета инструмента. Собрали вместе все последние запуски вроде юзабилити-тестирования и помогают с организацией проектов и управлением организацией в целом.

Baselance


Сервис позволяет хранить базу фрилансеров с контактами, портфолио, ценниках. Импорт данных из Behance, Vimeo, Soundcloud, Instagram, GitHub и Artstation.

Project Cue


Онлайн-инструмент для анимации, облегчающий её передачу разработчикам. Позволяет использовать JSON из плагинов вроде Bodymovin» для AfterEffects и докрутить результат. Анонс от авторов.

Tilda


Сайт о работе с Тильдой — советы, примеры, подрядчики.

Octopus


Сервис для создания простых карт сайта в браузере.

UserGuiding


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

Concepts


Планшетное приложение для скетчей и иллюстраций.

WBO


Ещё одна маркерная доска для совместной работы в браузере.

Bildr


Ещё один сервис, который обещает объединить дизайн и генерацию готового кода из него.

DesignGapp


Сервис для создания статических гайдлайнов.

remove.bg


Выпустили приложения для Windows, Mac и Linux.

Abstract


Joe Woodward из команды Microsoft Outlook описывает их дизайн-процесс на базе связки Sketch и Abstract.

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


Useberry


Сервис помогает проводить юзабилити-тестирование интерактивных прототипов (и даже собрать их внутри).


UX Research Collective


6–7 июня в Торонто прошла конференция Strive о пользовательских исследованиях. Там очень мощный и представительный состав из десятков спикеров.

Они ведут толковый журнал на Medium UX Research Collective, где публикуют интервью со всеми докладчиками конференции. Mandy Owen из Airbnb, Monal Chokshi из Lyft, исследователи Shopify и Patti Carlson из Mailchimp рассказали о структуре команд, интеграции с продуктовыми командами, роли исследований в культуре компании и развития рынка в целом. Chris Geison из AnswerLab — о своём видении профессиональных трендов и вызовов.

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


The Science of Silence — Intentional Silence as a Moderation Technique


Kate Kaplan из Nielsen/Norman Group описывает подход с намеренным кратковременным молчанием модератора во время пользовательских исследований. Это позволяет не сбивать респондента с мысли и не задавать наводящих вопросов и уточнений. В статье отличные аудио-примеры по каждой ситуации.

a75674ae8884d486f64c87d6fa7dd711.png

Usability Testing with Minors: 16 Tips


Памятка Alita Joyce из Nielsen/Norman Group по проведению пользовательских исследований с детьми и подростками. Это непростая аудитория, при этом имеющая ещё и юридические ограничения в работе с ней.

7d8f023bba488c5d5c4084ba4a8a5e6c.png

Design partnership with users


Arin Bhowmick из IBM рассказывает о том, как устроен формат работы с пользователями-спонсорами (т.е. респондентами) в их версии дизайн-мышления. Команда продукта регулярно проводит с ними тестирование прототипов и концептов.

eb503f65445a2fcc030169afe577d8d5.png

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


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


CSS Grid


Наглядный генератор сеток на CSS Grid.

Метрики и ROI


Validating a Lostness Measure


Jeff Sauro рассказывает о метрике «потерянности» пользователей — она позволяет оценить навигацию на сайте. Помогает ли она найти информацию за приемлемое количество действий.

b97b4450fbe2c126d87de29590329344.jpg

10 Things to Know about the Technology Acceptance Model


Jeff Sauro рассказывает о модели TAM (Technology Acceptance Model), которая помогает оценить оценить полезность и удобство использования продукта. Как она работает, как проводить оценку по ней, альтернативные подходы.

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


DesignOps: What can we measure?


Arturo Leal из Dell описывает модель метрик для оценки эффективности работы дизайн-команды. Они делятся на 4 категории: продуктивность, здоровье команды, результаты работы и рост.

be7d328183ddbda18be932637d340fb0.png

How Corporate Innovation Labs End Up Preventing Innovation


Jared Spool пишет о правильной организации инновационных команд в компаниях. Выделение отдельных лабораторий или стартапов не всегда даёт эффект — куда полезнее вооружить основные продуктовые команды подходящими инструментами.

Дизайнер 6 уровня — как мы мотивируем и развиваем дизайнеров


Иван Соловьёв из DocDoc рассказывает о карте компетенций для дизайнеров в компании.

7d2bf9854444bfa67e97846ebb53cb3f.png

What Mike Monteiro Taught me About Feedback


Конспект ключевых идей Mike Monteiro по обработке обратной связи от заказчика. Что делать, если бомбит и как правильно выдохнуть и перевести дискуссию в здравое русло.

Fortifying the design career path at IBM


Eunice из IBM вкратце рассказывает о карте компетенций для дизайнеров в компании (сейчас их уже 2000 человек).

962827c572aabd895e2f46646cfc27d7.jpg

Julie Zhuo — The Making of a Manager


Julie Zhuo выпустила книгу «The Making of a Manager». Она помогает начинающим менеджерам работать грамотнее. Я пока не добрался, но судя по всему, она не фокусируется на дизайн-менеджменте, а говорит об общих вещах. Интервью про её подход к работе и книгу (и ещё одно для InVision).

У A Books Apart, кажется, вот-вот начнёт продаваться похожая «Resilient Management» от Lara Hogan.

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


Setting the Right Tone in Design Conversations


Dan Brown из EightShapes даёт советы по проведению полезных рабочих встреч.

Кейсы


Designing for publishing tools


Ramla Mahmood из Vox Media рассказывает о дизайн-процессе для редакционных инструментов на примере Chorus Video.

Our order tracker — designing a product that crosses the physical and digital divide


Stephen Macvean из Deliveroo рассказывает о редизайне интерфейса отслеживания статуса заказа.

Тренды


How Facebook designs for its billions of future dead users


Размышления Facebook на тему того, что делать с профилями пользователей после их смерти. К 2050 году они обгонят количество живых (если, конечно, продукт сам ещё будет с нами).

Transitioning to a Career in AR/VR Design


Jake Blakeley из Facebook рассказывает о том, как начал заниматься интерфейсами виртуальной и дополненной реальности.

a2155899a7031ac63f7dc1e2ff5149fc.png

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


Google Assistant на Google I/O 2019


Бодро развивается как одна из точек фокуса. Активнее помогает водителям, упростил вызов популярных действий, научился распознавать обращение к близким людям без имени, лучше работает с Android TV. Благодаря работающему на устройстве движку deep learning он реагирует сильно быстрее.

e7065690516df5fcf283355daa7d5f1c.jpg

Но самое интересное — развитие Duplex, который в прошлом году всколыхнул пользователей интернета (фото). Он подключился к Chrome и стал помощником в заполнении сложных форм в вебе — например, арендовать машину или купить билеты в кино.

0b85bd8ad0d529470d5b888e869494b9.jpg

Показали и обратный пример — Live Relay поможет пользователям с ограниченными возможностями отвечать на звонки текстом (ну или готовыми Smart Reply).

Всё это связано с инициативами умного дома, которые теперь подаются под маркой Google Nest (вместо Google Home). Поскольку многие голосовые помощники уходят в «умные дисплеи» (тупо планшет на подставке, теперь и с играми), их новый Google Nest Hub Max как раз такой.

f627e117d1e0b850b579bb9b785d2e02.jpg

Автомобильные интерфейсы


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


Design Critique Coach


Тренировка навыков аргументации — сайт задаёт тренировочные вопросы дизайнеру, которые помогают отвечать на критику дизайна.

fb39e39809710f23c3101e6bec326680.jpg

Designer First World Problems


Pablo Stanley уже несколько лет делает серию комиксов о дизайнерах на сайте The Design Team. Он собрал главные хиты в одном материале.

0e331076fe152b65684ba38ab4bd426d.jpg

Soft skills in UX — What makes a mediocre designer great


Советы по прокачке общепрофессиональных навыков дизайнера от Kaja Laura Toczyska.

What «intuitive» really means


Fabricio Teixeira разбирает абстрактный и редко уместный термин «интуитивный» на конкретные характеристики интерфейса.

The world needs a tech diet; here is how designers can help


Мощный лонг-рид Fabricio Teixeira и Caio Braga по этике для дизайнеров, которая потенциально поможет уменьшить технологическую привязанность пользователей.

Новые книги Rosenfeld Media


Люди и компании в отрасли


How Microsoft learned from the past to redesign its future


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

c60870b9079ebc6f6fccc98748edf727.png

D³ — DocDocDesign


Блог дизайн-команды ДокДок.

UX Collective — How to run the largest design publication on Medium in a remote team


Основатель и редактор UX Collective Fabricio Teixeira рассказывает о том, как команда ведёт один из крупнейших журналов по дизайну на Medium.

Покупки дизайн-студий крупными компаниями


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


Enterprise UX 2018


Конференция Enterprise UX 2018 прошла 13–15 июня в Сан-Франциско. Конспект выступлений от Pabini Gabriel-Petit (часть 3).

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

© Habrahabr.ru