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

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

120925606e6f9b934628d03f891146ab.png


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


«Real developers don«t use UIs»


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

84b077c2c7c7fe6ef7a80db08ea6f780.png

How to write any error message


Rhiannon Jones из Deliveroo описывает подход компании к написанию сообщений об ошибках. Они делят их на несколько категорий и выбирают тональность исходя из этого.

fac3cf8afba066b5e073b66eb38abc79.png

Why Blue Light Is So Bad — The Science and Some Solutions


Amber Case говорит о проблемах современных экранов, которые излучают синий свет — это сажает глаза и мешает сну. Синий свет выделяет наибольшую энергию, поэтому в другой статье она и учёные рекомендуют оранжево-красные, которые используют военные и та же BMW.

5dfee0c4f0e62a43a493ac8a12240712.png

What Can Bike Sharing Apps Teach Us About Mobile On-boarding Design?


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

dafe839a031de5fa2dea31f0d23efcca.png

Beyond 800 words — New digital story formats for news


Экспериментальная лаборатория пытается понять, какие новостные форматы подойдут для поколения Z. В первой части статьи Tristan Ferne разбирает имеющиеся на рынке подходы. Во второй дизайн-команда сделала несколько интерактивных прототипов.

Level up for UX — Design lessons from video games


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

How to add product features without making it more complex


Dre Zhou из Askable показывает, как предзаполнение форм и избегание совсем нулевых результатов повышает конверсию и комфорт пользователей.

The User Experience of Health Insurance Websites


Jeff Sauro проанализировал несколько крупных американских компаний в сфере здравоохранения и сравнил их юзабилити по метрике SUPR-Q. Он приводит типичные проблемы для таких сайтов.

Customer-Service Information on Websites ― The Hub-and-Spoke Model


Kim Flaherty из Nielsen/Norman Group подсказывает, как лучше показывать разделы помощи и поддержки клиентов на сайте.

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


Edward Scott рассказывает о новом исследовании компании, посвящённому управлению профилем и заказами.

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


Design Systems London 2018


Конференция по дизайн-системам Design Systems London пройдёт 15–16 ноября в Лондоне. Пока объявлены локальные спикеры без ярких звёзд, но анонс только-только появился. Это уже третья конференция по дизайн-системам в дополнение к Clarity в Сан-Франциско (был на ней в прошлом году, но программа сильно сдала относительно 2016) и DSConf в Хельсинки.

3d9b3a38ae4d9042d4bf21d8b6cf47eb.png

Eight Things You Need To Know About Design Systems


Mikhail Gündoğdu побывал на многих выступлениях о дизайн-системах и собрал на их основе неплохую памятку для начинающих.

Design Systems at GitHub


Шикарный рассказ Diana Mounter о появлении и развитии дизайн-системы GitHub. Поэтапное развитие, примеры внутренних документов и процессов.

a4e505e8ea3f9ad941701de8f862b93c.png

DesignOps — Unleashing the potential of our design studio


Mark Argyle рассказывает о принципах работы команды дизайн-системы Atlassian. Достаточно подробное описание процесса в типовых ситуациях.

07a43feb1336cef2026ca4dd26e83f6b.png

Six lessons learned by creating a design system at a fast-moving start-up


Толковый рассказ Anthony Zhang из Oscar Health о постепенном развитии дизайн-системы в компании. Как делать её без надрыва, потихоньку дополняя и обновляя.

a4a85c7ad6a10baf78c117160950c093.jpg

Evolving a Design System at Scale


Liz Khoo из Salesforce рассказывает о взаимодействии команд, работающих над дизайн-системой.

ea71c77b0e5fdff1f660cda88490beb9.jpg

Material Design


Обзор Android Go, упрощённой версии ОС для дешёвых устройств на основе Oreo 8.1. На ней обрезаны многие возможности и сделаны облегчённые версии основных приложений (причём некоторые и вовсе на базе progessive web apps).

Как будут выглядеть обновлённые приложения Google в духе Material Design 2.0.

MacOS


Apple добавили официальные шаблоны для Sketch и Photoshop. Скачать.

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


Design for Kids Based on Their Stage of Physical Development


Feifei Liu из Nielsen/Norman Group описывает особенности проектирования интерфейсов для детей. Она сопоставляет развитие моторики с возрастом и даёт советы по элементам управления для каждого из них.

Accessibility for Teams


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

1149654c4c29835568eeec7eccdcc27c.png

Другие материалы по Accessibility


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

Firefox: появился инструмент для анализа accessibility сайта.

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


UXPressia 4.0


Создатели отечественного инструмента UXPressia для работы над customer journey map выпустили версию 4.0. Появилась совместная работа и расширился инструментарий по всем аспектам — сами карты взаимодействия, персонажи, карта эмоций.

Pyoneer — Design Thinking Software and Customer Research tool


Интересный интегрированный инструмент для поддержки дизайн-мышления. В нём богатый набор возможностей — customer journey map, персонажи, агрегация обратной связи из разных источников для поиска возможностей роста, привязка аналитики. И всё это на базе «двойного алмаза».

15 principles of good service design


Louise Downe, глава дизайна Government Digital Services (делают GOV.UK) приводит свои принципы проектирования услуг.

6ff4c895de1a452290b05b6d59c82c59.png

Storyboards Help Visualize UX Ideas


Rachel Krause из Nielsen/Norman Group показывает, как создавать раскадровки сценариев использования. Они показывают кусок customer journey map, причём эти два подхода можно совместить.

c7a3e769b3339dd1d12df6f05bff0994.png

945c7056d34a4435d6c0d56913d1bf25.jpg

Alan Klement — Jobs to be Done at Work


Новая книга Alan Klement о Jobs to Be Done выйдет на границе 2018 и 2019 годов. Она более детально описывает методы работы.

Book Excerpt: Living in Information


Издательство Two Waves Books выпустило в июне 2018 книгу Jorge Arango «Living in Information» об информационной архитектуре. UXmatters публикует кусочек главы 8 из неё.

Orchestrating Experiences


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

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


persP


Ещё один новый инструмент дизайна, который играет на поле Figma ― одновременная работа нескольких дизайнеров в браузере. Заявлен весь комплект современных возможностей (прототипирование, обсуждение экранов, адаптивность, символы/компоненты). Из новых идей ― поддержка нескольких языков в макете, экспорт макетов в код и загрузка на сервер, быстрый просмотр на телефоне через QR-код. Анонс от создателей.

Affinity Designer для iPad


Вышла планшетная версия приложения. Первое время можно купить со скидкой 30%. Кстати, можно почитать пошаговое руководство по работе с инструментом от Isabel Aracama.

Adobe Photoshop для iPad


На Adobe MAX 2018 этой осенью покажут полноценную версию для планшетов (сейчас есть простецкий Photoshop Express).

Sketch 51


Теперь стили можно добавить в библиотеки. Много небольших доработок по прототипированию и основному интерфейсу.

a08a8fe7cc7fb2b32940fc1949df572d.jpg

Плагины и статьи


Timeline 2.0: надстройка от Anima стала ещё мощнее и сделала упор на интерактивные компоненты, код которых можно выгрузить (пока голый HTML/CSS/JS, но обещают React, VueJS, Angular, Lottie, iOS и Android).

InVision


Вышла вторая версия мобильного приложения. Можно комментировать на планшетах и телефонах с помощью Freehand, быстро открывать прототипы Studio через QR-код.

Adobe XD


Июньское обновление.

Flowmapp


Добавили инструмент для описания пользовательских сценариев. Здорово, что не нужно мучаться с этим в каком-нибудь Sketch или создателе ментальных карт.

Carbon


Онлайн-сервис помогает сделать эффектную подачу куска кода.

Shotsnapp


Ещё один инструмент для эффектного оформления экранов интерфейса.

Modulz


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

e45e64fae1ac554a025085cd0a61f911.png

Overflow


Мощный пример того, что можно делать в инструменте.

Polyplane


Ещё один инструмент для тестирования адаптивных сайтов в браузере. Stephen Hay, один из ключевых авторов на тему, считает его одним из лучших.

Framer X


Показали видео работы Framer X и его основные возможности. Получился цельный инструмент дизайна и прототипирования в духе InVision Studio. Правда, связку с реальными компонентами на React толком не показали — хотя сами компоненты Framer сделаны на React, про их подключение к реальной дизайн-системе не говорят.

Figma


Ryan Cordell из Deliveroo рассказывает, как интерфейсные писатели работают совместно с дизайнерами.

Visual Sitemaps


Инструмент обещает создавать визуальную карту сайта на основе URL. Пока можно записаться на бета-версию.

Relate


Новый новый инструмент дизайна интерфейсов. Позиционируется как визуальная работа на базе кода (чем-то похоже на Modulz от Colm Tuite) — причём якобы можно сразу работать с компонентами на React (правда, не факт что теми, что использует реальный продукт). Интригующе, но пока из деталей есть только статья от авторов.

ff1fd25db1cafacd9166c328f6624dd9.png

Marvel


Userflows: Надстройка Userflows позволяет автоматически сгенерировать карту переходов на основе прототипа.

Flow 1.0


Инструмент вышел из беты.

Keyframes


Сайт-сообщество, посвящённое интерфейсной анимации. Один из создателей — Pasquale D«Silva.

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


Aurelius и Dovetail


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

d7bf40c61fa1af59748f6f56caf0d69c.png

Choose your own adventure — Sharing research with a broad audience


Mandeep Basi из Shopify показывает формат упаковки результатов пользовательских исследований, которые команда использует для передачи инсайтов продуктовой команде.

Field Studies Should Inform Intranet Redesign


Therese Fessenden из Nielsen/Norman Group даёт советы по методам пользовательских исследований интранет-сайтов.

Providing Better UX Recommendations


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

Looking in before looking out — A field guide for field researchers


Leia Atkinson из Shopify даёт советы по проведению полевых исследований. Что и как подготовить, чтобы провести время с пользой и получить максимум инсайтов.

How Much Does a Usability Test Cost?


Jeff Sauro приводит свои расчёты стоимости юзабилити-тестирования для разных ситуаций и задач.

Seattle Global ResOps Workshop Recap — It«s a Long Road, but We Are on Our Way


Небольшой отчёт Sheetal Agarwal о митапе и панельной дискуссии, посвящённой ResearchOps.

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


Новые скрипты


Небанальные эффекты при прокрутке страницы с использованием физики.

Скрипт для интересной анимации прокрутки галереи.

Brandon Dorn из Viget предлагает комфортный контекстный способ показа сносок в вебе.

React


Meng To запустил курс по React для дизайнеров.

Работа с SVG


SVGator: Пошаговое руководство по работе с инструментом для анимации SVG.

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


Небольшой обзор экспериментов с вариативными шрифтами от Chris Coyier. Видно, как много можно сделать с декоративными подходами.

Font Playground позволяет примерить вариативные шрифты в браузере и получить CSS для выбранной комбинации.

Работа с цветом в вебе


Gradient Hunt: Ещё одна коллекция градиентов с быстрой возможностью забрать их CSS.

Метрики и ROI


Interpreting Single Items from the SUS


Jeff Sauro приводит средние по рынку значения для комбинированной метрики SUS в целом каждого её вопроса в отдельности.

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


DesignOps, стремительно ворвавшийся в тренд (дополнено)


Я обещал больше не писать обзоры DesignOps. Но, ясное дело, не смог удержаться. Дополнил и лучше структурировал свои заметки на тему за последний месяц и выложил в основном блоге — там будет обновляться и пополняться текущая движуха и предыстория. Не благодарите/материте.

ab0bd01c14f251bd04525b0d4f6bc693.png

S7 Airlines. UX-стратегия на практике. Начало


Алексей Шайхелисламов описал UX-стратегию S7 Airlines на основе выступления на московском Dribbble Meetup. Компания стремится стать более зрелой в плане дизайна и выбрала очень системный подход.

58494f33c0d1baf372e84c2335fe219d.png

Как устроены другие дизайн-команды


Responsibility Without Territory


Шикарный взгляд на правильное понимание и определение ролей в продуктовой команде от Peter Lewis из Capital One. Они должны идти от конечного результата и цели, а не просто набора обязанностей — это и результат обеспечивает, и гибкость в тактике даёт.

21c5d3f81c9f51a9d30b7ad6d3d79965.jpg

The Delicate Art of Interviewing Stakeholders


Dan Brown из EightShapes даёт советы по проведению интервью с лицами, принимающими решения. Как и какие вопросы задавать, чтобы получить максимум полезной информации и успешно закончить проект.

Командное взаимодействие


A Model for Conducting UX Workshops and Exercises


Sarah Gibbons из Nielsen/Norman Group предлагает универсальный подход для проведения рабочих сессий. Три этапа — объяснить, провести, изучить результаты.

7beae097cd3ab2dde418f4a8a2debd58.png

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


The Design Sprint 2.0 ― What is it and what does it look like?


Jonathan Courtney из AJ&Smart предлагает якобы вторую версию дизайн-спринтов ― они ужали процесс до 4 дней. Правда, при этом пожертвовали самым главным ― временем на понимание проблемы, так что теперь можно быстрее сделать не то, что нужно пользователям и бизнесу.

Кейсы


Building the Google Photos Web UI


Antin Harasymiv рассказывает об оптимизации интерфейса Google Photos для веба. Они нашли несколько сильных решений на стыке дизайна и технологий, которые позволили сделать работу с интерфейсом сильно комфортнее.

cd43282c84e5b57474f019a03e62c5b3.gif

Designing Google Maps for Motorbikes


Дизайн-команда Google Maps рассказывает о работе над навигацией для мотоциклистов и связанных с этим пользовательскими исследованиями.

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


Концепт альтернативного оконного менеджера для MacOS от Kévin Eugène.

История


10 years of the App Store ― The design evolution of the earliest apps


17 октября 2008 года открылся AppStore для iPhone, который здорово изменил модель продаж и распространения цифровых продуктов. К десятилетию магазина Michael Steeber собрал историю изменения дизайна десяти приложений, которые появились в тот день и живут до сих пор.

1c3e42a6fcffaf3feff4822663eeb83f.jpg

Тренды


Статистика рынка


I квартал 2018


-11,5% — падение продаж планшетов в России

II квартал


+1,4% — рост продаж компьютеров в мире

Весь 2018 (прогноз)


100 млн — продано умных колонок в мире

Голосовые интерфейсы


Будущее у голосовых интерфейсов получше, чем у покрывающихся пылью ботов. Продажи устройств бодро растут, а основные платформы стремительно обзаводятся партнёрствами и интеграциями во всё, что подключено к электричеству и интернету. К концу года прогнозируют 100 миллионов устройств; уже 20% американских семей имеют умную колонку. Ну, а отечественные хайпожоры недавно стояли в очереди за Алисой. Были вы там или нет, изучить тему полезно.

7079f9b17bd8698d028575d537062264.jpg

Nielsen/Norman Group провели дотошное пользовательское исследование голосовых помощников Amazon, Google и Apple. Получился шикарный разбор текущих проблем как в основном режиме работы, так и в «навыках» от сторонних авторов. Это одна из главных статей месяца — за один присест можно познакомиться с кучей подводных камней. Особенно много нареканий на навыки — их сложно найти, они более дуболомны.

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

0093155c424a35fd97b27cd2c5105c35.png

Главная книжка — Designing Voice Interfaces от Cathy Pearl. Она, кстати, руководит дизайном Google Assistant и описывала недавно основные особенности проектирования голосовых интерфейсов.

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


Лучше всего развита экосистема Alexa — для неё хватает инструментов и интересных экспериментов (у платформы более 50% рынка). Например:
В конце июля в московском офисе Google прошёл хакатон по созданию навыков для Google Assistant (он заговорил по-русски). В нём участвовали команды из Mail.Ru Group (Delivery Club, ICQ, Pandao, Все аптеки), Clever Pumpkin, Eora.ru, Heads and Hands, Just AI, Redmadrobot, АО Рестрим и X5 Retail Group. Сами концепты — секретики, но выцепил для вас критерии оценки хорошего навыка. Так сказать, горячий репортаж :) Можете поэкспериментировать сами через конструктор Dialogflow.

Кучу свежих новостей и актуальной статистики можно найти на сайте Voicebot. А вот просто парочка относительно свежих статей на тему:


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

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


Unintended Consequnces


Justin Wetz из IBM предлагает подход к оптимизации алгоритмов, похожий на хорошо зарекомендовавшую себя процедуру улучшения лекарств.

Adobe is using AI to catch Photoshopped images


Adobe научились отлавливать фотографии, изменённые на компьютере.

Автомобильные интерфейсы


Audi: Обзор новой информационной системы.

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


What Is This Thing Called Design?


Толковый пример рассказа о том «что такое дизайн» для начинающих от Khoi Vinh.

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


Facebook Research


Блог команды пользовательских исследований Facebook. В одной из недавних статей Jessica Drum рассказывает о подходе компании к тестированию навигации. Всё достаточно стандартно.

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


Enterprise UX 2018


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

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

© Habrahabr.ru