Продуктовый дизайн: 20 самых важных материалов за август Статьи редакции

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

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

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

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

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

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

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

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

• 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 по UX и продуктовому дизайну прошёл 14-18 августа в Лондоне. Я собрал большой конспект выступлений Moving Brands, Microsoft Lift, Territory, Deliveroo, Moo, Made by Many, NomNom, Monese, Analog Folk, Firedrop и Андреа Пикки из Sony Mobile.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#Интерфейсы