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

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

В избранное

Updated Empathy Map Canvas

Дейв Грей обновил свой популярный шаблон карты эмпатии. В него добавлены цели, порядок заполнения и подсказки.

Design Versioning — It«s true, it«s here, let«s talk and learn more about it

Кайо Кальдерари сделал обзор инструментов контроля версий для дизайнеров. В основном они работают с макетами Sketch и основаны на Git. Один из свежезапущенных — Kactus.

Paradigm — дизайн-система Mail.Ru Group, часть 1: визуальный язык

Несколько лет портальная дизайн-команда Mail.Ru Group занимается обновлением и унификацией продуктов. У нас сформировалась дизайн-система, на которой работают медиапроекты, мобильный веб и частично productivity-сервисы, появился стиль пиктограмм и иллюстраций, стандартизируются промописьма и промосайты.

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

Что такое дизайн-система в нашем понимании:

Визуальный язык определяет то, как мы создаём интерфейсы продуктов. Как и в обычном языке, у нас есть алфавит (переменные), слова (элементы интерфейса), предложения (компоненты) и цельные тексты (экраны и продукты). Алфавит неизменен, словарный запас трансформируется со временем, а вот предложения и тексты из них создаются всегда разные.
Единые компоненты на технологическом уровне — единственный источник правды. Дизайн «вшит» в них, сервисы получают и обновляют их из единого репозитория. Продукты под брендом Mail.Ru, которые используют их на практике: медиапроекты, мобильный веб, часть productivity-сервисов. Они пока доступны только внутри компании.
Шаблоны для дизайнерских инструментов — лучший способ быстро показать идею. Другими словами, это просто высокоуровневые скетчи. В идеальной ситуации макеты не верстают, а собирают из единых компонентов. Мы писали об этом раньше.

Designing The Perfect Date And Time Picker

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

Empty States? More like You-Have-No-Idea-How-Much-Work-Goes-Into-Those States, amirite?

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

The Most Hated Online Advertising Techniques

Исследование Nielsen/Norman Group на тему навязчивости разных форматов рекламы в вебе и на мобильных платформах. Правда, оно проводилось на базе Wireframes, а не реальных баннеров, но так или иначе эксперты смотрели на влияние разных отвлекающих факторов — и в целом антирейтинг выглядит логично.

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

Information Architecture Lenses

Дэн Браун обновил свою классификацию принципов информационной архитектуры и составил список из 43 «линз», через призму которых можно оценивать эффективность интерфейсных решений.

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

Figma: вышла вторая версия десктопного приложения. Инструмент научился делать интерактивные прототипы и готовить макеты к передаче разработчикам. Дискуссия с главой Figma Диланом Филдсом о выходе второй версии инструмента.
Adobe XD: сайт-коллекция шаблонов.
Sketch: появился плагин Sketch Material для создания элементов интерфейса Material Design разного уровня сложности.
Principle: вышла версия 3.0, которая включает много мелких и средних улучшений интерфейса.
Kite Compositor: вышла версия 1.5. Из новинок — аналог драйверов из Principle, а также новые события для создания интерактивных прототипов.
Framer: дизайн-команда Framer дала советы по работе с новой версией.
Omnigraffle: вышла версия 3.0.
Vectr: обзор.
Gifmock: приложение помогает собрать анимацию интерфейса в оптимизированный по качеству и размеру GIF. Есть плагин для Sketch.
Supernova Studio: ещё один инструмент, который обещает превратить макеты в работающее приложение для мобильных платформ. Хотя пока на него постоянно жалуются за неэффективный код. На этот раз — из макетов Sketch в React Native.

Great PMs don«t spend their time on solutions

Пол Адамс описал, как строится процесс определения проблемы в Intercom. Разработчики компании уделяют 40% времени пониманию того, что и зачем нужно сделать, и только после этого переходят к проработке решения.

How I Managed to Design the Most Successful Educational Computer Game of All Time

Филипп Бушар в деталях рассказал о создании второй версии легендарной образовательной игры Oregon Trail, вышедшей в 1985 году.

Uncovering Voice UI Design Patterns

Джо Каппес и Дживон Пайк из Cooper разобрали паттерны взаимодействия с голосовыми интерфейсами. Всего пять приёмов, которые подходят для разных задач.

Human-Centered Machine Learning

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

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

The Newest Email Design Trends of 2017

Обзор визуальных трендов 2017 года в письмах рассылки.

Большой список Telegram-каналов для дизайнеров, менеджеров продуктов и аналитиков

Алексей Иванов составил подборку Telegram-каналов для дизайнеров.

Service Design at a speed and scale

Диего Далия рассказал о том, как формировался подход к работе с проектированием услуг в IBM на базе её версии дизайн-мышления.

Search-Log Analysis — The Most Overlooked Opportunity in Web UX Research

Хорошая методичка по анализу внутренних поисковых запросов на сайте от Сьюзан Фаррелл из Nielsen/Norman Group. Где смотреть, что искать, какие выводы и улучшения делать.

Designing Adaptive Icons

Ник Бутчер из Google описал возможности и нюансы работы с адаптивными иконками, которые появились в Android O. Они хорошо ложатся в разнообразные оболочки и позволяют создавать интересную анимацию. В другой статье Лиам Спрэдлин в деталях разобрал основные инструменты навигации в Android. Удобно, что для каждого из них отмечено, участвует ли он в истории переходов.

Making Good Decisions as a Product Manager

Продуктовый директор Shopify Брэндон Чу рассказал о своём подходе к принятию решений: как выделить те, что принимаются быстро и в которых не страшно ошибиться, а как понять, какие наиболее важные и где нужно детально продумать последствия. Его шаблон для принятия решений учитывает UX.

Ben Coleman и Dan Goodwin — Designing UX: Prototyping

Издательство Sitepoint в марте 2017 года выпустило книгу Бэна Колмана и Дэна Гудвина «Designing UX: Prototyping». UXmatters опубликовал из неё седьмую главу, посвящённую HTML-прототипам.

Book Review: Creative Change

В начале 2017 года издательство Houghton Mifflin Harcourt выпустило книгу Дженнифер Мюллер «Creative Change» о том, как не просто предлагать креативные и прорывные идеи, а добиваться их внедрения. UXmatters опубликовал на неё обзор.

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