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

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

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

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

Design for security

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

Building the perfect splash screen

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

The User Experience of Chatbots

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

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 из токенов. В статье отличная диаграмма последовательности сборки с упоминанием всех нужных инструментов.

Master Product Design at Scale

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

Redesigning your product and website for dark mode

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

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-рендер.

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

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

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

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. В блоге компании много других отличных материалов на тему сервисного дизайна:

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

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

Bondlayer

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

Figma

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

Framer

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

InVision Studio 1.0

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

Atomic

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

Adobe XD

Sketch

Плагины

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

Leeflets

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

Grid Studio

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

Drawkit

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

Avocode

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

Squoosh

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

Meta Tags

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

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 и финский рынок дизайна. В статье дискуссия о том, можно ли им верить.

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

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

Progression Pack

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

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

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

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

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

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

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.

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

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

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

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.

Отчёт о DesignOps Summit 2018

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

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


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

[Перевод] Интервью с Дэвидом Гобелем

Дэвид любезно согласился дать LEAF очень интересное интервью. Дэвид Гобель – изобретатель, филантроп, футурист и ярый сторонник технологий омоложения; вместе с Обри де Греем он известен как один из основателей Methuselah Foundation и как автор концепции Longevity Escape Velocity (LEV), ...

10 долларов на хостинг: 20 лет назад и сегодня

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