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

Habrahabr 1

Уже семь лет я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-октябрь 2017.

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

Теперь свежий выпуск дайджеста можно получать в Телеграм-канале

Я долго думал о том, как можно использовать мессенджеры, чтобы это было не дублированием информации, а другой ценностью для читателей. Например, почтовая рассылка и версия для vc.ru выделяют самое главное из ежемесячной выборки. Ковырял бота, но хайп вокруг них достаточно быстро сошёл. Но после дюжины вопросов в духе «а где Телеграм-канал дайджеста» за последний год пришлось сдаться и сделать его простую версию.

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

The VR Book — Human-Centered Design for Virtual Reality

The VR Book — Human-Centered Design for Virtual Reality Издательство Morgan & Claypool Publishers выпустило в 2016 году книгу Jason Jerald «The VR Book: Human-Centered Design for Virtual Reality». UXmatters публикует главу 28 из неё со списком паттернов для интерфейсов виртуальной реальности — очень крутой и подробный каталог.

Right-To-Left Development In Mobile DesignRobert Dodis и Yvette Mosiichuk достаточно подробно описывают особенности адаптации мобильных интерфейсов для языков, где чтение предполагается справа налево.

Right-To-Left Development In Mobile Design

Zigzag Image-Text Layouts Make Scanning Less EfficientKim Flaherty рассказывает о сравнительном исследовании двух компоновок для списка с изображениями ― стандартный сверху вниз и такой же, но с чередованием расположения картинки (слева и справа). В целом серьёзного влияния на восприятие информации нет, хотя есть нюансы.

Zigzag Image-Text Layouts Make Scanning Less Efficient

UX for the Industrial Environment, part 3Часть 3 с советами по проведению пользовательских исследований и учёту ментальных моделей.

Really Good UXОчередная коллекция хороших интерфейсных паттернов.

A Comprehensive Guide To Web DesignОбъёмная статья Николая Бабича с лучшими практиками для начинающих и более опытных дизайнеров интерфейсов.

Typography for Glanceable Reading ― Bigger Is BetterPage Laubheimer из Nielsen/Norman Group рассказывает о сравнительном исследовании нескольких подходов к написанию коротких интерфейсных текстов, предполагающих быстрое считывание.

Исследования Baymard Institute

Дизайн-системы и гайдлайны

Lona — A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, images, and other artifactsAirbnb уверенно вырываются вперёд в звании главного инноватора в развитии дизайн-систем — их новый экспериментальный инструмент Lona позволяет собирать компоненты в коде для разных платформ и Sketch на базе спецификации переменных визуального стиля и своего языка разметки компонентов. Пока, правда, можно только скомпилировать самостоятельно.

Lona — A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, images, and other artifacts

Design Systems HandbookInVision выпустили новую онлайн-книжку на Design Better ― методичка по созданию дизайн-систем от Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter и Roy Stanfield.

Design Systems Handbook

Дизайн-система МегаФона. Эпизод 1 ― Процессы и инструментыНадежда Терехова, Артём Володин и Станислав Петров из дизайн-команды МегаФон рассказывают о работе над дизайн-системой компании. В первой части больше про UI Kit, но есть задел на описание компонентов в коде. Скоро они откроются по адресу ui.megafon.ru.

Design Systems for the Real WorldRyan McCormack из GE рассказывает о подходе компании к развитию дизайн-системы в компании. Большинство дизайн-систем неплохо покрывают базовые потребности, но хуже справляются с более редкими компонентами и сложными частными решениями, так что нужно здоровое сообщество по всей организации, которое поддерживает систему.

Design SystemsFigma готовятся запустить ресурс про дизайн-системы. Планируют серию мероприятий и статьи по теме.

Атомарный дизайнПолный перевод книги Brad Frost «Atomic Design» от Ольги Кокулиной.

ReactSymbols.com — React UI KitНовая мода на Dribbble — продавать не только масштабный UI Kit для Sketch, но и React-библиотеку для него.

iOS11

Material Design Шаблоны Android-телефонов

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

Accessibility

Информационная архитектура, концептуальное проектирование, контент-стратегия

Mixed Reality User Flows ― A New Kind of TemplateLillian Warner предлагает шаблон для набросков карты переходов при проектировании интерфейсов смешанной реальности. В статье есть пример его использования.

Mixed Reality User Flows ― A New Kind of Template

Level-Up Email Campaigns With Customer Journey MappingЮрий Веденин рассказывает об оптимизации почтовой рассылки UXPressia с помощью customer journey map.

UX Mapping Methods Compared — A Cheat SheetНеплохой сравнительный обзор карт взаимодействия и эмпатии от Sarah Gibbons из Nielsen/Norman Group.

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

Haiku — Design meets productionЭкспериментальный инструмент анимации Haiku обещает легко экспортировать наработки в реальный код. Создатели называют его «Lottie без AfterEffects» и рассказывают о том, зачем запускают его.

Spirit — The animation tool for the webРасширение для Chrome, с помощью которого можно редактировать анимацию на странице.

FlowMapp — Powerful Visual Sitemap Tool For Planning Websites And Collaborate With OthersИнструмент позволяет создавать карты сайта в браузере. Это всегда было головной болью, ведь обычно приходится делать их в слабо приспособленном для этого графическом редакторе или не очень наглядном составителе ментальных карт.

Devices от FacebookFacebook обновили свою коллекцию шаблонов разных устройств.

Improving UI with Web AudioПодробная инструкция Curtis Dulmage из Shopify по созданию интерфейсных звуков, включая работу с инструментами, запись и пост-обработку. Части 2 и 3.

Improving UI with Web Audio

Sketch

Adobe XD Framer

InVision

Figma UXPin
  • UXPin анонсировали на конференции Clarity по дизайн-системам дополнение к инструменту, которое позволит импортировать технологические компоненты с GitHub в макеты Sketch. Идея React → Sketch от Airbnb станет доступна всем. Они также запускают категоризированный каталог дизайн-систем Adele.
Pixelmator ProВышла финальная версия инструмента. Предварительный обзор.

What the FontНовое мобильное приложение от MyFonts позволяет определить шрифт по фото.

Landbot.io ― Build Conversational WebsitesОнлайн-конструктор промо-сайтов, построенных вокруг общения с ботом. Кажется, идея задержалась на год и весь хайп уже прошёл.

InterfaceBryn Jackson размышляет на тему современных инструментов дизайна и указывает на их идейные проблемы. Он пробует предложить подход, берущий толковые стороны из инструментов разработки.

A Highly Subjective Guide to Prototyping ToolsЗанятный подход к сравнению популярных инструментов прототипирования интерфейсов от Sanette Tanaka из Vox Media. Тепловая карта функций хорошо показывает фокус каждого из продуктов.

Whiteboard Design Language v0.1Jonathan Gorczyca предлагает стандартизировать наброски интерфейсов на маркерной доске с помощью простых договорённостей. Следовать необязательно, но сама задумка интересная.

Пользовательские исследования и тестирование, аналитика

Do Observers Affect Usability Test Results?Jeff Sauro поднимает исследования на тему влияния «эффекта наблюдателя» на респондента в ходе юзабилити-тестирования. Результат неоднозначный ― железобетонных доказательств нет.

How to Know Which Items to Remove in a QuestionnaireJeff Sauro показывает, как упрощать типовые опросники для пользователей без потери качества результатов.

We often forget about the brand when evaluate the User ExperienceКсения Стернина, руководитель UX-лаборатории Mail.Ru Group, рассказала журналу prototypr о том, как бренд влияет на восприятие продукта на примере поисковых систем. На три абсолютно одинаковых страницы с поисковой выдачей поставили логотипы Яндекса, Google и Mail.Ru и пользователи оценили качество одинаковых результатов по-разному.

We often forget about the brand when evaluate the User Experience

A designer has collected at least 66 (!!!) active versions of Facebook app’s navbarLuke Wroblewski собрал 66 версий основной панели навигации в приложении Facebook для iOS, которые компания одновременно тестирует на пользователях.

A designer has collected at least 66 (!!!) active versions of Facebook app’s navbar

Визуальное программирование и дизайн в браузере

Using Browser Extensions for PrototypesMax Roytman рассказывает о том, как дизайнеры Google используют браузерные плагины для экспериментов с сайтами ― с их помощью меняется стандартный интерфейс у пользователя.

New from MailChimp Landing PagesMailChimp запустили конструктор промо-сайтов на базе своего редактора писем. Он, правда, один из самых неудобных на рынке, но для тех кто уже в экосистеме это может быть привычнее.

Веб-типографика

Новые скрипты Работа с SVG

UX-стратегия и менеджмент

Secrets of design leadership — from Stanley Wood of SpotifyДизайн-менеджер Spotify Stanley Wood проехался по 20 ведущим продуктовым компаниям США и пообщался с их дизайн-командами. Он сделал огромное количество заметок на тему их организации, процессов и инструментов, часть из которых рассказывает в статье.

Secrets of design leadership — from Stanley Wood of Spotify

Другие рассказы о дизайн-командах:

Amplify DesignНовый блог на Medium, посвящённый дизайн-менеджменту под маркой DesignOps.

An Introduction to Design OperationsС подачи конференции Design Ops Summit от Rosenfeld Media термин используется всё чаще. Dave Malouf из Digital Ocean даёт свою трактовку этой вариации на тему дизайн-менеджмента.

Overcoming Common Barriers to Collaboration, Part 2Pabini Gabriel-Petit продолжает перечислять проблемы взаимодействия дизайнеров и других участников продуктовой команды, а также способы их решения. Всё это помогает создать здоровую дизайн-культуру в компании.

UX Strategy Canvas — A Handy Tool to Review and Update Your UX StrategyDavid Pasztor из UXStudio описывает модель UX-стратегии компании по запуску нового сервиса. Скачать шаблон.

How to Lead a Design-Driven OrganizationTim Brown из IDEO перечисляет 4 подхода к дизайн-менеджменту, которые в идеале должен уметь сильный специалист.

Продуктовый менеджмент и аналитика

Innovation Ecosystem XPLANATiONМодель инновационной экосистемы компании от XPLANE.

The 4 Stages of 0->1 ProductsJulie Zhuo описывает здравый подход продуктового дизайнера на всех этапах жизненного цикла продуктов.

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

Build Experiences not FeaturesCorrie Kwan, Eric Morrow и John Murray сделали подробнейший обзор того, как использовать версию дизайн-мышления от IBM в связке со story mapping в agile. Часть 2. Получилась интересная модель продуктовой работы с учётом интересов пользователей.

Build Experiences not Features

Кейсы

Designing Adobe’s Evolving Brand SystemSonja Hernandez продолжает рассказ о ребрендинге продуктов Adobe и поднимает историю развития иконок приложений. В свежем обновлении Creative Cloud они сделали ещё один шаг по упрощению работы с ними и систематизации всей линейки. Полезно для тех, кто заведует большой линейкой продуктов.

Designing Adobe’s Evolving Brand System

Looking After Number One-fortyJosh Wilburne рассказывает, как Twitter экспериментировал с индикатором количества символов в твите после увеличения их максимального количества до 280. Правда, до прочтения этой статьи я воспринимал его как застопорившийся индикатор загрузки. Кстати, у дизайн-команды Twitter есть блог на Medium.

Непрошенные редизайны

Тренды

Виртуальная реальность

Для общего и профессионального развития

Shapes of UX designerJason Mesut 12 лет пытался наглядно представить навыки продуктового дизайнера. В своей шикарнейшей статье он показывает все промежуточные варианты диаграммы и даёт шаблон итоговой версии.

Shapes of UX designer

The Future of Design EntrepreneurshipEnrique Allen из Designer Fund описывает свои мысли о текущих проблемах и перспективах дизайнеров как основателей компаний. Это отчасти результат круглого стола с Khoi Vinh (Adobe), Joey Cofone (Baron Fig), Tiffany Chu (Remix) и Tricia Choi (MoveWith).

Qualities of Effective User ResearchersJim Ross описывает основные профессиональные и человеческие качества хорошего пользовательского исследователя.

DESIGNERCIZEГенератор простых заданий для прокачки интерфейсных навыков или тестовых.

The Ethics of User Experience DesignPeter Hornsby предлагает кодекс этики UX-дизайнера на базе трёх законов робототехники Азимова.

Люди и компании в отрасли

UX-Среда AMA № 14: RedmadrobotИнтервью с дизайн-командой студии Redmadrobot на базе AMA UX-Среда и vc.ru. Это одна из самых известных студий, специализирующихся на разработке мобильных приложений. История компании началась с запуском AppStore в 2008 году. Роботы активно работают с сотовыми операторами (Билайн, МегаФон, Tele2), банками и финансовыми организациями (Открытие, ПромСвязьБанк, МДМ, Альфа-Страхование, Ренессанс), продуктовыми компаниями (Rambler & Co, ABBYY) и другими крупнейшими отечественными клиентами.

UX-Среда AMA № 14: Redmadrobot

Рейтинг юзабилити интернет-банков для физических лиц 2017 от UsabilityLabUsabilityLab составили очередной рейтинг российских интернет-банков по их интерфейсам. В презентации разбираются удачные паттерны.

Дизайн-команда МегаФонБлог дизайн-команды МегаФон.

Материалы конференций

DesignOps Summit 2017Конференция по дизайн-менеджменту и UX-стратегии от Rosenfeld Media прошла в Нью-Йорке 6-8 ноября. Natalie Hanson конспектировала все выступления.

DesignOps Summit 2017

Наиболее интересные из них:

Leading Design 2017Конференция по дизайн-менеджменту цифровых продуктов Leading Design прошла 25-27 октября в Лондоне. Опубликованы презентации и видео выступлений. Мой коллега Андрей Сундиев сделал обзор наиболее интересных из них.

Leading Design 2017

What We Learned at The Service Experience Conference 2017Конференция The Service Experience прошла 23-24 октября в Сан-Франциско, США. Adaptive Path опубликовали обзор основных выступлений со ссылками на видео.

Luke Wroblewski @ Conversions 2017 ― Mobile in The FutureОбновлённая версия 3-часового мастер-класса Luke Wroblewski по дизайну мобильных интерфейсов.

How to Demo Software for 11,000 PeopleKhoi Vinh рассказывает, как готовил выступление на Adobe MAX с демонстрацией работы дизайнерского инструмента. По ходу всплыло безумное количество подводных камней.

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

Подписывайтесь на рассылку! Письмо приходит один раз в месяц.