Лого vc.ru

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

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

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

Уже семь лет Юрий Ветров публикует в своём блоге регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок он отбирает примерно 5% стоящих публикаций, которыми интересно поделиться среди экспертов. Специально для vc.ru Юрий Ветров собрал выжимку из 20 самых интересных ссылок мая.

UX-стратегия. Часть 6 — Внедрение

Шестая, финальная статья в серии про UX-стратегию на практике. Она посвящена осуществлению изменений в продуктах и компании. Ниже расширенная и доработанная версия презентации.

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

Причина плохих продуктов — это плохая машина, которая их производит, так что чинить нужно в первую очередь её. Шестая часть строится на идее паттернов дизайн-менеджмента и активно ссылается на предыдущие.

Microsoft Fluent Design System

На конференции Build Microsoft показала следующее поколение дизайна Windows. Компания назвала его дизайн-системой Fluent — она развивает текущий визуальный язык для того, чтобы объединить не только экранные интерфейсы, но и дополненную и виртуальную реальности.

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

Пока это просто одностраничник с рассказом об идеологии, плюс несколько новых страниц в гайдлайнах UWP (Universal Windows Platform). Но это и будет развитие UWP (уже есть шаблоны и тулкиты для многих дизайнерских инструментов — Sketch, Photoshop, Illustrator, XD и Framer).

Android O

На конференции Google I/O презентовала обновления Android. Дизайн-команда компании отметила наиболее интересные выступления. Основные изменения — технические, интерфейса касается всё, что уже было анонсировано раньше (наконец-то появились индикаторы обновлений на иконках приложений, контекстные подсказки по работе с буфером обмена, улучшения в области уведомлений).

Появились библиотеки компонентов Material Design и онлайн-руководства по их использованию: Android, iOS и веб. Google собрала большую рабочую сессию с толковыми местными дизайнерами, которые предложили много концептов приложений. Самое приятное — в стандартные библиотеки добавлены многие стандартные анимации. Можно установить бета-версию Android O.

Примечательно, что Google в фоновом режиме экспериментирует над версией Android, сделанной не на базе Linux. Она называется Fuchsia, и недавно в сети появились экраны её интерфейса. Никаких планов и сроков пока нет, поэтому картинки скорее для того, чтобы быть в курсе.

Design Better Data Tables

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

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

  • Framer Design — переосмысленный инструмент, в который добавили свой Sketch. Теперь это полноценный продукт для дизайна и прототипирования с переключением между этими двумя режимами. Есть видео-демонстрация. А ещё Джо Дэй из Microsoft показал, как использовать Framer на Windows. Речь, к сожалению, не о способе установки самого редактора.​
  • Sketch. Вышла версия 44. В новой версии появилась возможность более точно задать поведение элементов при адаптивности — к каким краям он залипает, как тянется по вертикали и горизонтали. Это работает и для объектов, и для артбордов. Возможно, это сделает Auto Layout не нужным, ведь он часто сбивает размеры и отступы между элементами. Также появилась возможность заменить недостающие шрифты, комментировать макеты в Sketch Cloud, обновились шаблоны для iOS. Новые плагины: Mirr — для простых интерактивных прототипов. Майкл Шпигель показал, как с помощью переопределения параметров копии символа можно раскрашивать набор иконок.​
  • Ludus — браузерный графический редактор. Интересная особенность: можно импортировать материалы из сторонних сервисов — например, прототипы Framer или скрипты на CodePen.​
  • C4Studio. После долгого перерыва разработчики анонсировали обновлённую версию.
  • InVision Craft. Возможность создания интерактивных прототипов, наконец-то, вышла из беты. Связи между экранами создаются в Sketch, дальше всё экспортируется в InVision.
  • InVision покупает TrackDuck — сервис для командного обсуждения макетов.
  • Adobe XD. На Behance можно посмотреть примеры работ, созданных с помощью инструмента.
  • Figma. Вышло приложение Figma Mirror для Android. Подробный разбор сильных сторон Figma от Тома Джонсона.
  • Flinto, версия 2.2. Можно редактировать текст и объекты прямо в Flinto, так что экспериментировать станет проще.

A Better Way to Code

Сумасшедший пример визуального программирования от Майка Бостока — создателя популярной библиотеки d3.js для визуализации данных. Он запустил d3.express — среду одновременно разработки и аналитики, которая позволяет пошагово перебирать и визуализировать данные. В таком формате работа по анализу радикально меняет свой формат.

The Illusion of Measuring What Customers Want

Отличный разбор ограничений измерения UX от Алана Климента. Несмотря на то, что популярные измерения на базе шкалы Ликерта выражаются в показателях, это качественные, а не количественные данные, и их нужно использовать для расчётов с осторожностью.

Sliders, Knobs, and Matrices — Balancing Exploration and Precision

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

Джейк Кнапп, «Спринт: Как разработать и протестировать новый продукт всего за пять дней»

Издательство Альпина выпустило перевод книги про Design Sprints от Google Ventures.

Illustrating a more human brand, part 2

Продолжение статьи дизайн-команды Dropbox об эволюции их стиля иллюстраций. Вторая часть описывает рождение текущего подхода.

Другие статьи на тему иллюстрации в продуктах:

  • Интересный рассказ Элис Ли о создании нового единого стиля WordPress, учитывающего многообразие пользователей.
  • Мэг Робичауд из Shopify описала своё видение роли и задач продуктовой иллюстрации. В другой статье она говорит о нюансах работы с командой иллюстраторов в продуктовой команде.

Casey Winters Reveals How Pinterest Perfected User Onboarding

Бывший дизайнер Pinterest Кейси Винтерс рассказал о том, как устроен процесс встречи нового пользователя в продукте. В другой статье Сэмюэл Хулик описал три принципа хорошего процесса встречи нового пользователя: интегрированный, придающий уверенности и надёжный.

Hollywood Goodbyes and Focused Content

Интересный подход к упрощению существующих экранов интерфейса от Дэйва Риенше. Он определяет ключевые задачи страницы, а затем выписывает её текущие элементы и вычёркивает те, что не относятся к задаче. После этого ранжирует их по ценности и пересобирает экран без всего лишнего и с нужными акцентами.

Best Practices for Long Scrolling

Николай Бабич описал принципы проектирования добротных интерфейсов страниц с длинной прокруткой. Ещё пара свежих статей от него: плюсы и минусы основных способов организации навигации в мобильных приложениях и памятка по лучшим практикам проектирования мобильных интерфейсов.

Group Notetaking for User Research

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

The 5 Principles of IoT UX Design

Принципы дизайна интерфейсов для «интернета вещей» от Джареда Порсеналека. Толково расставлены акценты — эти интерфейсы утилитарны и не должны требовать слишком много внимания.

AMA: 2ГИС

Интервью с дизайн-командой «2ГИС» на основе AMA. Новосибирский картографический сервис успешен в продуктовом плане и много времени уделяет развитию дизайна основного продукта, а также делает множественные экспериментальные приложения. Несколько лет назад они показали пример того, как можно сравнительно простыми средствами получить собственный шрифт. Кроме того, они организуют конференцию CodeFest в Новосибирске и поддерживают «Серебро Набора», посвящённую типографике.

How IBM Trains Design Thinking Facilitators

Энн Ф. Новелли рассказала, как IBM тренирует фасилитаторов для распространения практик дизайн-мышления по всей компании. Это стало одной из ключевых идей масштабирования дизайна.

Creating Personas — A guide, not a template

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

A New UX Maturity Model

Натали Хэнсон предложила свою модель зрелости UX. В ней дизайн в компании развивается от не очень осмысленного к фокусу сначала на визуальной консистентности, потом — на качестве пользовательского взаимодействия и в конце — на целостной карте взаимодействия по всем каналам.

Jessica Enders — Designing UX: Forms

В прошлом году издательство SitePoint выпустило книгу Джессики Эндерс «Designing UX: Forms». UXmatters опубликовало выдержку из неё, посвящённую проектированию общего сценария заполнения формы.

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

Прямой эфир
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления