Продуктовый дизайн: 20 самых важных материалов за август04.09.2017 17:07

Дайджест руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.

В избранное

DesignBetter.Co — Discover the world«s best design practices

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

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

Sayspring — Free Voice Design & Prototyping Software for Alexa and More

Sayspring — сервис для прототипирования голосовых интерфейсов для Amazon Alexa и Google Home. Прототип запускается на устройстве, и с ним можно взаимодействовать голосом. Основатель продукта Марк Вебстер дал интервью, в котором рассказал о своём видении дизайна для голосовых интерфейсов. В другой статье Сьюзан Хура описала нюансы и сложности юзабилити-тестирования голосовых интерфейсов.

Designing Marketing Email and Newsletters — UX Research Findings

Любопытные выводы из нового исследования Nielsen/Norman Group о том, как пользователи относятся к почтовым рассылкам. Например, изменилось значение слова «спам»: теперь так всё чаще называют письма от сервисов, на которые пользователь подписался добровольно.

Uber — Perfecting the Pickup

Подробный рассказ Саймона Пэна о редизайне процесса вызова такси в Uber. Масса деталей о том, как и почему принимались решения, много вводных о реальном использовании функциональности и «умных» интерфейсных решений.

How I Stopped Worrying and Learned to Love Design Thinking

Как и многие опытные проектировщики интерфейсов, Кристина Водтке скептически относится к ажиотажу вокруг «дизайн-мышления». Во многом это просто добротный процесс проектирования, который существует давно, считает дизайнер.

Но если смириться с тем, что люди из других профессий используют термин как попало, то можно внести несколько важных дополнений к стандартному процессу: кодизайн, «думание руками» и итеративное моделирование идеального результата. На эту же тему недавно писал Влад Головач.

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

Studio — новый инструмент для прототипирования и дизайна интерфейсов. В отличие от большинства аналогов (или клонов Balsamiq) не полагается на древние паттерны, а предлагает собственные уникальные решения.
У Sketch вышли версия 46 и бета-версия 47. Улучшена работа с текстом (вертикальное выравнивание, расчёты расстояния от базовой линии), развивается Sketch Cloud (становится проще делиться макетами). В бета-версии заявлена встроенная библиотека символов, которая заменит Craft.

Интересные плагины: Lingo и Satchel для организации UI Kit, Sketch Relabel Button для автоматического изменения ширины кнопок (даже с учётом иконок). Статьи: подробная инструкция Захари Шуслера по созданию плагина и сайт-коллекция плагинов, шаблонов и статей.
У Adobe XD вышло августовское обновление, в котором упрощена работа с общими стилями и компонентами. Член команды создателей инструмента Демиан Борда опубликовал сессию вопросов и ответов о продукте.
Framer выпустил свой первый UI Kit Fiber (пока только для iOS).
Создатели Avocode запустили в экспериментальном режиме конвертер макетов для Photoshop в Sketch. Также они готовят конвертеры для Adobe XD.
Вышел плагин Sketch2AE для AfterEffects, позволяющий импортировать макеты из Sketch. Та же команда выпустила Inspector Spacetime, который показывает спецификацию анимации. Библиотека Bodymovin научилась экспортировать параметры анимации для Android.
Вышел Bootstrap Studio — ещё один инструмент для дизайна сайтов на базе Bootstrap.
Приложение Smartmockups помогает быстро показать, как выглядит интерфейс на устройстве. Есть версии для Windows и Mac.
Джеймс Раухат из IBM показал, как работает встроенный в Chrome аудит сайтов на производительность, доступность и другие характеристики.

Ключевые моменты из курса Future London Academy 2017 по продуктовому дизайну

Курс Future London Academy 2017 по UX и продуктовому дизайну прошёл 14–18 августа в Лондоне. Я собрал большой конспект выступлений Moving Brands, Microsoft Lift, Territory, Deliveroo, Moo, Made by Many, NomNom, Monese, Analog Folk, Firedrop и Андреа Пикки из Sony Mobile.

Starting a Design System

Отличная памятка от Натана Кёртиса по ведению дизайн-системы как обычного проекта. Он неплохо расписал ключевые фазы — от стратегии и планирования до пилотного запуска и планомерного развития. В продолжение темы:

Продуктовый дизайнер Приянка Гадбол предложила свой подход к определению отступов и размеров в дизайн-системе. На примере типографики она показала, как сделать все расстояния кратными четырём.
Алла Холматова опубликовала хорошую памятку по описанию анимации в дизайн-системах. Пожалуй, это один из самых толковых материалов на тему.
Carbon Themes — конструктор тем оформления в дизайн-системе IBM Carbon. Он позволяет заменить базовые переменные и получить новый стиль для продукта. Старший дизайнер Бетани Сонфилд рассказала о том, как и зачем его делали.

Life inside the design asylum

Достаточно подробный рассказ Эрин Боумик о том, как устроен рабочий процесс в одной из дизайн-команд IBM. В материале представлен полезный график работ по типовому проекту. В другой статье руководитель дизайна для малого бизнеса в Intuit Лэсли Витт рассказала о том, как работает её дизайн-команда.

(Re)writing our bot for advertisers

Контент-стратег из Facebook Эмили Коночи рассказала о создании бота для рекламных продуктов. Интересно, как правильная постановка фраз и корректировка сценария повысили вовлечённость и увеличили прибыль.

Canvas collection — A list of visual templates by Andi Robert

Бизнес-тренер Энди Робертс собрал большую коллекцию шаблонов концептуальных карт и моделей для описания продуктов и пользователей.

Designing The Perfect Feature Comparison Table

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

To be a design-led company

Креативный директор Эшли Эксиос рассказала о том, как Automattic (создатель Wordpress) меняет дизайн в компании. У руководства примечательный взгляд на UX-стратегию, отличный от банальных «лестниц»: оно разделяет её на тактический уровень, системные инновации и двигатель трансформаций. Дизайн-команада Automattic в целом ведёт достаточно интересный блог.

«Get Started» Stops Users

Аврора Харли и Ким Флаэрти из Nielsen/Norman Group посвятили материал новой навигационной проблеме — бесполезным кнопкам «Get Started», которые ничего не говорят о конкретном действии и зачастую уводят пользователя с основного пути. Проблему усугубляет популярность ненужных первых экранов с фоновой картинкой, логотипом и кнопкой: вместо того, чтобы прокручивать страницу вниз, пользователи жмут на первую кнопку.

The Sad State of Payment Buttons

Толковый разбор многообразия кнопок платёжных систем от Джона Фриборна.

How Google Designers Adapt Material

Мустафа Куртулду из Google рассказал, как команды Inbox и Keep работали с руководствами по Material Design. Они не совсем подходили под задачи продукта, поэтому в некоторых моментах дизайнерами пришлось от них отойти. Занятно, как Google легко делает это сам, но при этом пресекает подобные отхождения при допуске в Google Play.

Are app reviews worth reading?

Джон Саито из Dropbox провёл большое количество времени за изучением отзывов в магазине приложений и собрал советы о том, как по ним делать выводы об интерфейсных проблемах.

100 Questions Designers Always Ask

Отличный список-шпаргалка важных вещей о продукте и его дизайне от Джона Мура. Хорошо подойдёт в качестве чек-листа для себя и своей команды.

How do you set metrics?

Советы от Джули Чо по выбору продуктовых метрик для дизайнеров. Интересный пример того, как Facebook cмогла выразить свою текущую стратегию про более тесное связывание людей через сообщества (которое проявилось в функциональности групп), а уже после начала думать о конкретных показателях успеха.

What we mean when we talk about «Product Feels»

Толковые мысли Майка Уолкера из Made by Many о том, как создать у продукта правильное ощущение на примере своих решений.

Читайте полную версию дайджеста в моем блоге. В нём, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и ещё тонна всего. За свежими ссылками также можно следить в группе на Facebook — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.