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

Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-май 2018.

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


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


From First Mile To Nth — Onboarding Beyond User Onboarding


Годная статья Yohann Kunders из ChargeBee о том, как не просто встретить нового пользователя, а сделать его активным. Он выделяет работу над «первой милей» и «энной» — это две разные задачи, которые одинаково важны для успеха пользователя.

3a8f9fb8a297c65b4b4faa5af1a87e93.png

Theresa Neil «Mobile Design Pattern Gallery» (2 издание)


Издательство O«Reilly выпустили второе издание книги. Они публикуют главу 1 из неё. Правда, примеры настолько морально устарели, что я несколько раз перечитал дату публикации — странноватый подход к обновлению.

On writing for deprecation


Sarah Dunning Park из Slack рассказывает, как компания сообщает пользователям о закрытии функций и прекращении поддержки версий. Это сам по себе неприятный момент, важно отнестись к потенциальным проблемам пользователей с уважением.

Don«t Use The Placeholder Attribute


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

b934d2a4580c0b4c364893c4b0bcd609.png

The State of E-Commerce Search


Kate Moran из Nielsen/Norman Group показывает, как улучшилось общее состояние поиска на сайтах с 2000 года (они проводили исследования в 2000, 2011 и 2017). Она также описывает типовые проблемы и даёт рекомендации по улучшению поисковых интерфейсов.

The User Experience of University Websites


Jeff Sauro провёл сравнительное тестирование сайтов американских университетов. Он приводит метрики NPS и SUPR-Q для них.

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


Появился более удобный доступ ко всей базе исследований через подписку.
Christian Holst даёт советы по отображению состояния «клиент отказался от заказа» в интернет-магазинах.

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


iOS12


С точки зрения интерфейса изменений немного, основной упор сделан на повышение производительности (iOS 11 была одной из самых сырых и глючных). Причём её можно будет поставить на те же устройства, что работали с прошлой версией — пул доступных устройств получается шире.

55cae80aa4e273ba86ced7e0b9f7df80.png

Неплохие обзоры обновления сделали The Verge и Engadget. Какие визуальные и интерфейсные нюансы можно отметить:

iOS-приложения можно будет портировать для MacOS. Пока это сделано для некоторых приложений Apple, со следующего года станет доступно сторонним разработчикам. Но это не объединение платформ, о чём мечтают многие.

0c4b35560773145aaf112bce328e229f.jpg

Уведомления от приложений складываются в стопки:

cf6dcb3471a9fbfefb83ba26f5c0e5fd.gif

Apple Books (бывший iBooks) использует шрифт с засечками для заголовков. Палитра визуального языка становится ещё богаче.

baa5830dd783d1e9507669593c5a204b.jpg

Как и свежий Android, платформа будет помогать бороться с телефонной зависимостью. Неплохой пример экрана с инфографикой оттуда:

fd494ac9e76abbc79a6dd81b4ed286cc.jpg

Ещё один стиль кнопок в action sheets:

58666f5e5dd7fed972f4a0820c46d99f.jpg

Apple, Adobe и Pixar продвигают единый стандарт файла для описания дополненной реальности.

Shortcuts, своя версия IFTTT на базе купленного продукта Workflow — можно создавать собственные операции для Siri, которые затрагивают несколько действий в разных приложениях.

Автоподстановка кодов подтверждения, которая поможет мобильным банкам.
Умельцы раскопали намёк на тёмную тему. Она появится в новом MacOS, в iOS была в некоторых приложениях (например, будильник).

Короче, для дизайнеров новостей мало, получился скорее релиз про полировку и оптимизацию. Полный список изменений. iOS 12 будет доступна в сентябре, но уже сейчас можно поставить бета-версию.

GOV.UK Design System


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

63fc20ff3d0cb5d0ad385adc2aa4f332.png

The 2018 Design Systems Survey


Студия Sparkbox провела опрос среди 400 дизайнеров и разработчиков, работающих над дизайн-системами (86 продуктовых команд). Получились достаточно характерные ответы о том, для чего им нужна такая инициатива и какую пользу она приносит продукту и самим дизайнерам.

323245f2344c803031a9e742e73a1857.jpg

Distinct Design Systems


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

d2e2ca0a495b36a884b044e390681d89.png

Component Design Guidelines


Nathan Cutis продолжает свой универсальный справочник по описанию компонентов в дизайн-системах. Четвёртая часть о правилах использования.

f7ec4ece535ab7cb59c24c869eaab622.png

8-Point Grid — Typography On The Web


Elliot Dahl показывает примеры реализации шрифтовой сетки в соответствии с 8-пиксельным микро-модулем.

Инструменты


CSS Stats: анализирует CSS сайта и показывает использующиеся визуальные стили: цвета, шрифты, отступы. Отличный способ найти проблемы внедрения дизайн-системы.

Docz: фреймворк для описания живых гайдлайнов для дизайн-систем.

Fluent Design


Microsoft готовятся обновить Office в соответствие с гайдлайнами Fluent Design. Интересно, что десктопные и веб-приложения работают и выглядят одинаково. Видео.

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


Yes, Personas Focus on Demographics (And How to Fix That)


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

4c7e2d7d01c8d2ef67ca3c3ac155cc8f.png

Accessibility


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

Простой чеклист Pablo Stanley по учёту особенностей пользователей с ограниченными возможностями.

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


The CX Tower of Babel — What CX descriptions tell us about corporate CX initiatives


Michael Thompson проанализировал объявления о вакансиях на тему customer experience. Часть из них вообще не имеет отношения к работе с пользователями, часть — только опосредованно, и только треть соответствует сути.

ab29dbdd389fa63bf701ee415205a2ad.png

Orchestrating Experiences


A List Apart публикует часть 2 из книги Chris Risdon и Patrick Quattlebaum «Orchestrating Experiences».

What is Customer Journey Analytics?


Steve Offsey из сервиса Pointillist, помогающего создавать customer journey map, рассказывает о подходах к аналитике этапов карты.

df0efd95b69c5d6bf9224cfbf9a203a5.png

Agile Journey Mapping with Empathy

Richa Prajapati из Salesforce рассказывает о построении customer journey map для сервиса аналитики. Они использовали её для поиска проблем пользователей, решение которых улучшает продукт.

When great product teams ship broken UX — 4 steps to mind the gap


Jeoff Wilks из IBM Cloud рассказывает, как дизайн-команда составила job stories и серию customer journey map для продукта. Перевод.

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


ToyBox


Создатели перенесли концепцию линтинга из разработки в работу над дизайн-системами. Это серия инструментов (отдельная продукт Measure и плагин Roller для Sketch), которые помогают сравнивать идеальное видение дизайна с реализацией. Они показывают расхождения в макетах и реальном продукте, что облегчает отслеживание косяков. Пока доступен только плагин и они работают только с цветами и шрифтами, но сама задумка крайне интересная.

ef068714cc6bd9252ea1dd5ef7152674.png

Sketch


Meng To запустил онлайн-курс по созданию плагинов.

Полноценное решение для экспорта макетов Sketch в код на React. Это плагин и фреймворк, которые позволяют быстро получить адаптивный прототип. Они используют сетку Bootstrap 4 и шрифты с Google Fonts. Анонс.

Easing Gradient делает градиенты более плавными.

Framer X


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

Axure RP 9 Beta


Обещают переработанный интерфейс и полностью переписанную версию для Windows.

3fb72441dff72d0c9ed16b314bb06ad3.png

Adobe XD


Июньское обновление. В основном тюнинг по стандартным функциям для инструмента дизайна интерфейсов.

Phase


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

Sketch.systems


Инструмент помогает определить все альтернативные и краевые состояния интерфейса — взаимодействие с курсором (наведение, фокус), нулевое, ошибки, загрузка и т.п. Сначала описываете его в виде списка, потом добавляете внешний вид.

137da7044c3e507237f07d080b2b87c3.png

Zeplin 2.0


Теперь вместе с общими стилями макета показываются и компоненты (символы) — на старте Sketch, позже появится Figma и Adobe XD. Вдовесок — пачка улучшений интерфейса.

Avocode 3


Работает на Windows, Mac и Linux, можно загружать макеты из Sketch, Photoshop, Adobe XD. Обещают добавить поддержку Illustrator.

Figma 3.0


Улучшение прототипирования, полноценная версия анонсированных ранее стилей, управление организацией.

632a7fb46e755bb64310d0169385d01c.png

Плагины


Relay позволяет экспортировать графику из макетов Figma прямо в репозиторий разработки.

Ryan Cordell из Deliveroo рассказывает, как дизайн-команда использует Figma в работе.

Gravit


Corel купил инструмент. Самое время для стандартных шуток «а что, они ещё живы?».

Webflow


Шаблон для wireframes.

Artboard Studio


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

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


How to Test Visual Design


Kathryn Whitenton из Nielsen/Norman Group описывает способ тестирования визуального дизайна на соответствие позиционированию бренда. Он предполагает показ интерфейса и последующий опрос.

200f39085c8ba20107843e14cdd3bff6.png

User Research Field Guide


Памятка Quintin Carlson по проведению пользовательских исследований. Представлено в виде специализированного сайта, но по сути это, скорее, просто длинная статья.

8912959875dea2b9d04f715cb690285b.png

How to Build a Dedicated Usability Lab


Памятка Jeff Sauro по созданию юзабилити-лаборатории. Помещение, оборудование и их стоимость.

GOV.UK User research service manual


Руководство по проведению пользовательских исследований от команды дизайна GOV.UK.

The 9 Best A/B Testing Tools ― How Using Them Can Improve Your User Experience


Обзор инструментов A/B-тестирования от Megan Headley.

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


Inclusive Components: Cards


Heydon Pickering описывает следующий компонент: карточки.

Работа с SVG


Nils Binder показывает, как сделать адаптивный логотип с помощью SVG.

Как анимировать каллиграфию на SVG.

React Native For Designers


Авторы курса React for Designers добавили обучение React Native.

Письма рассылки


Samantha Connelly показывает, как можно тестировать доступность писем рассылки для пользователей с ограниченными возможностями.

Веб-анимация


Студия Ueno опубликовала свой внутренний инструмент для отладки анимации, сделанной на GSAP.

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


DesignOps Handbook


InVision выпустили электронную книгу о DesignOps ― набирающем обороты термине-аналоге «UX-стратегии» и «дизайн-менеджмента». Авторы: Dave Malouf (Digital Ocean), Collin Whitehead (Dropbox), Meredith Black (Pinterest), Kate Battles (Fitbit). Организационные модели, координация команд, Research Ops.

279396467c3eb1b2814c6d974992794b.png

Баззворд «DesignOps» грозится вытеснить «UX-стратегию» и другие термины для описания дизайн-менеджмента. Он периодически всплывал в последние годы, но с подачи этой методички ворвался на вершину хайпа. Термин не создаёт новый смысл (дизайн-менеджмент, UX-стратегия, дизайн-лидерство говорят про то же), скорее называет уже существующее по-новому.

Ops, I did it again! Дизайнеры, как цыгане, постоянно кочуют от тренда к тренду и любят новые блестящие штуки ― термин и концепцию DevOps уже натягивают на дизайн-системы (Design Systems Ops), пользовательские исследования (ResearchOps).

b8658daad289d1112385bd9244fe1388.png

Походу, придётся переименовывать мою серию статей. Не то чтобы я бежал за каждым трендом, но DesignOps лучше описывает инициативную группу, которая улучшает инфраструктуру компании для реализации хорошего дизайна — кто и как это делает. Это не просто про работу над конкретным продуктом — скорее про то, как системно улучшить работу разных продуктовых команд. Централизованные дизайн-команды и так живут по этому принципу; в более современной модели а-ля Spotify речь об отдельной команде, которая работает с остальными по внедрению лучших практик.

Чёрт, это попахивает терминологическим спором, самой бесполезной тратой времени после создания погодного чат-бота. Но иногда от этого не скрыться и не все обновления терминов плохи. Jared Spool говорит, что «что-нибудь»-ops — это новое «что-нибудь»-мышление. Fabricio Teixeira собрал предысторию появления понятия (хотя его трактовка термина спорная).

«x»-ops is the new «x»-thinking.
— Jared Spool (@jmspool) 2 апреля 2018 г.


Introducing Research Ops at Deliveroo


Saskia Liebenberg из Deliveroo пишет о формировании Research Ops в компании ― группы, которая поможет исследователям внутри продуктов. Правда, большинство UX-лабораторий и так работают в формате внутреннего агентства, которое помогает всем продуктам. Charlotte Clancy описала роли в этой команде.

DesignOps Summit 2018


Открылась продажа билетов на DesignOps Summit 7–9 ноября в Нью-Йорке (до 17 июля можно получить хорошую скидку). Я уже в деле (пойду на мастер-класс Peter Merholz и Kristen Skinner). Айда вместе:)

0b67287906a3a66322015c1a94eb2d31.png

Athena Health Design


Жемчужина в моих новых подписках — блог дизайн-команды Athena Health. В нём много отличных публикаций о дизайн-менеджменте / DesignOps:

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

Организация дизайн-команд. У неё два руководителя — эксперт по управлению и по предметной области. В статье неплохое описание специфики каждой из ролей.

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

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

520817c6d3b57db144603021c24c4476.png

Have You Defined Your Product«s Core Experiences?


Marco Di Costanzo из IBM описывает подход компании к поиску ключевых моментов в продукте и фокусе всех активностей дизайна и продуктовых команд в целом на них. Отличный пример того, как дизайнеры могут повысить ценность своей работы.

ec558817bf3da0a01663272ee0c9400a.jpg

GitHub for Product and Design Collaboration


Siddhant Mehta из команды мобильного Microsoft Outlook рассказывает, как они используют GitHub как полноценную среду для ведения продуктовых задач. Интересный график коммитов в середине статьи, который хорошо показывает наиболее активные фазы работы над дизайном.

e789830e24ce519d5ffdd3e7f0f6d8fa.png

Как работают известные дизайн-команды


Eliel Johnson, глава дизайна Charles Schwab, рассказывает о том, как устроена дизайн-команда в компании.
Глава Creative Market Aaron Epstein рассказывает о том, как компания определила свои принципы и культуру.

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


Why Your Design Sprints Always End in Tears


Shaun Archer из Capital ONE описывает типовые проблемы при планировании и проведении дизайн-спринтов.

3 ways to prioritize your product roadmap with a matrix


Команда Airtable показывает, как использовать инструмент для приоритезации продуктового плана по нескольким подходам.

10 insights into user-centered growth design


Arlen McCluskey из Dropbox даёт советы по грамотному проведению экспериментов в продукте с точки зрения дизайна. Как находить точки роста, не ломая при этом интерфейс.

Кейсы


Designing AdWords


Pendar Yousefi участвовал в редизайне AdWords и рассказывает о процессе.

Deep UX ― The last «Here Be Dragons» area of modern game development


Александр Енин из игровой студии IT Territory пишет об улучшении интерфейса мобильной игры HAWK. У неё были отличные показатели возвращаемости и прибыли, но пользователи считали её скучноватой. После сравнительного пользовательского исследований с основными конкурентами команда определила точки роста и смогла поднять и эти показатели.

История


Scaling Agile is not the Path to Business Agility


Шикарная историческая справка Inês Almeida о том, как развивалось использование гибких методологий в бизнесе и к каким проблемам для единого customer experience это привело.

5e8f1059f9242c19f2aba38c770a2df9.jpg

73ad2dc9879331d7cdb25aee53f708c4.jpg

Раф Костер — Разработка игр и теория развлечений


Вышел перевод книги Raph Koster «Theory of Fun for Game Design». Она рассказывает о предыстории появления компьютерных игр и теории развлечений в целом. Сайт книги.

Тренды


Тренды 2018


Создатели сообщества «Ищу дизайнера» собрали пару десятков обзоров и прогнозов по трендам в дизайне на 2018 год.

a1e94f929469751ad1ca2f477b2bc73d.png

Алгоритмический дизайн


Achieving Lift-off — How to Embrace a Rebrand


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

AI can transfer human facial movements from one video to another


Команда исследователей научилась переносить эмоции человека из одного видео в другое.

We Designed Voice User Interface for StarCraft II — Here«s What We Learned


Rafal Cymerys из Upside показывает эксперимент по голосовому управлению StarCraft II на базе Alexa. Он неплохо подходит для операций, включающих последовательность нескольких примитивных действий, хотя базовые операции всё же проще делать через мышь и клавиатуру.

Ещё о голосовых интерфейсах


Несколько стендап-комиков оценили юмор умных помощников Amazon Alexa, Apple Siri, Google Assistant и Microsoft Cortana. Например, в Google работает отдельная команда писателей, которые обеспечивают шутки.

UX and Service Design for Connected Products Report


Отчёт-исследование о современных подходах к проектированию интерфейсов для устройств интернета вещей от Claire Rowland, со-автора книги O«Reilly на эту тему.?

Chatbots ― A Creative Guide


Советы Rob Harrigan из IBM по проектированию ботов в мессенджерах.

Why touchscreens in cars don«t work


Jacky Li из Connected Lab провел несколько пользовательских исследований на тему управления функциями машины с помощью сенсорного экрана и голоса. Сенсорные экраны, очевидно, отвлекают водителя. Но и голосовое управление не лучше (свежая статья Nielsen/Norman Group приводит конкретные причины).

fdb8e276bc7e1e4de7584d032d22ce11.jpg

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


Design Challenges & Design Challenge Ideas


Luke Jones и Robb Owen запустили сайт с примерами тестовых заданий.

a02561d636832d1ecba715565732ffbc.png

2710e08d858c1df365fd77ffd84e963d.jpg

Smashing Book 6: New Frontiers in Web Design


Smashing Magazine открыли предзаказ на свою новую книгу. Они опубликовали отрывок из главы от Виталия Фридмана.

Genius


Dan Brown из EightShapes советует дизайнеру не радоваться, если его называют «гением» — скорее всего, суть его работы не очень понимают и это чревато последующим разочарованием. Важно быть наравне с продуктовой командой — тогда получится собрать разные точки зрения и вводные в крепкий результат.

Книги, которые вот-вот выйдут


Pamela Pavliscak «Designing for Happiness».

Austin Govella «Hacking Product Design».

Amber Case и Aaron Day «Designing Products with Sound».

Jorge Arango «Living in Information» от Rosenfeld Media. В следующем году у Rosenfeld Media появится ещё 6 книг.

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


Покупки дизайн-студий крупными компаниями


Accenture покупает немецкую студию designaffairs.

Airtasker Design


Блог дизайн-команды Airtasker.

The Game UX Interview Series #5: Howie Begosa


Интервью с дизайнером игровых интерфейсов Howie Begosa из Disney, который прошёл достаточно длинный профессиональный путь, поработав с уймой платформ.

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


Enterprise UX 2018


Конференция Enterprise UX 2018 прошла 13–15 июня в Сан-Франциско. Natalie Hanson сделала шикарный подробнейший конспект выступлений (ссылки на отдельные части в комментариях).

Confab 2018


Конференция Confab 2018 прошла 21–23 мая в Миннеаполисе. Rhiannon Jones из Deliveroo сделала конспект выступлений, посвящённых интерфейсным текстам.

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

© Habrahabr.ru