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

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

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

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


How Video Games Inspire Great UX

Scott Jenson пообщался с Raph Koster, автором книги «A Theory of Fun», и проанализировал разницу в подходах интерфейсов цифровых продуктов и игр. Очень крутой детальный разбор.


50cfc08f92b0114f769c0931e9f70ce9.png

Email Love — Email Inspiration, Templates and Discovery

Коллекция примеров хороших писем рассылки.


b2e515a5d869834bb70fc275fcd540ab.jpg

Cancel vs Close — Design to Distinguish the Difference

Aurora Harley из Nielsen/Norman Group пишет о том, как явно показать пользователю разницу между действиями отмены и закрытия, которые зачастую представлены иконкой крестика в попапах и мобильных приложениях. Перевод.


d5b88562836cd4251b22bdb9b65ea02a.png

The UX of Online Job Searching Websites & Apps

Jeff Sauro провёл сравнительное исследование интерфейсов американских сайтов по поиску работы.

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


Cooperative Design Systems

Tyler Sticka из Cloud Four описывает модели развития дизайн-системы, которую используют несколько продуктовых команд. Не все из них идут на пользу единому подходу, но ситуации жизненные.


d3c6a97f7227bfb765a0717fcf101bd4.png

Light Theme, Redeemed

Kevin Wilson из Discord рассказывает о том, как компания переделала светлую тему оформления. Тёмная давно стала самой популярной, но они хотели сделать добротной и привычную.


A guide to implemen­ting dark modes on websites

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


Capturing the Bigger Picture

Интервью с Bridget Harris из Airbnb, которая выстраивала новый подход к фотографиям в продукте. Они здорово передают дух бренда и его новое позиционирование, причём сам формат их создания распределён и опирается на местных фотографов.


5eb4a1d171da5e36d7c456c48af96970.jpg

The Gradual Design System — How We Built Slack Kit

Garrett Miller и Zack Sultan рассказывают о дизайн-системе Slack Kit. Она недоступна снаружи, но общие детали описаны. Перевод.


bd03446f5be4282266936ce375f806c2.png

Внутреннее руководство Рамблера по созданию иконок

Лена Лисеева рассказывает о принципах создания пиктограмм в дизайн-системе Рамблера.


Visual Regression Testing in Design Systems

Небольшой обзор инструментов визуального регрессионного тестирования для дизайн-систем.


iOS 13

Josh Commons пытается понять логику использования пиктограммы многоточия. Разные приложения используют её для совсем разных задач.

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


Usability for Seniors — Challenges and Changes

Lexie Kane рассказывает о серии исследований Nielsen/Norman Group об особенностях работы с интерфейсами пожилых людей. Сам отчёт платный, но в статье много выкладок из него.

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


Sketch 58

Автоматическое изменение размера компонентов при изменении контента в них, отображение проектов из командной версии в приложении. Этого ждали годами и кое-как решали через плагины, но теперь одна из самых глупых проблем инструментов дизайна позади. Что можно делать с их помощью.



Плагины


  • Color System: позволяет организовать переменные для цвета в токены и переключать светлую и тёмную тему. Пара слов от Søren Clausen, автора.
  • Zecoda:  Генератор кода на Vue.js из макетов Sketch.


Adobe XD

Планы на 2019 и обзор уже запущенного в этом году. Базовые функции дизайна и прототипирования, совместная работа, дизайн-системы.


UXPin 2.0

В ноябре появится новый интерфейс и улучшенные возможности прототипирования (взаимодействие по условию, состояния элементов), дублирование элементов а-ля Adobe XD.


Figma

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

Since many of you have asked, we thought we should let the cat out of the bag… pic.twitter.com/3rHtyvtNKy


— Figma (@figmadesign) September 23, 2019

Другие важные обновления:


Figmac

Альтернативное приложение Figma для Mac от Norm, большого энтузиаста инструментов дизайна. Он решил ряд неудобств, хотя сам инструмент не изменился.


09a11a451c6f452a6dd8a8ebbb287985.jpg

Плагины

Телеграм-канал @figmaplugin делает обзоры плагинов. У Саши Окунева есть памятка об их возможностях и ограничениях.


Figma Help

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


Полезные материалы


Glimpse

Ответвление редактора GIMP с новым брендом и интерфейсом.


Vectormator

Векторный редактор для иллюстраторов на iPad.


VeoLuz

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



Eagle

Инструмент помогает собирать мудборды на компьютере.


CopyPalette

Ещё один генератор цветовых палитр. Он позволяет экспортировать их в Sketch и Figma.


Nodes и Cables

Инструменты для визуализации данных и создания 3D-графики с помощью визуального программирования нодами.


cdd800168e649e5f12ec0daaf6b79b33.jpg

Webflow

С помощью Lottie можно импортировать анимацию из AfterEffects.


Creo Community Edition

Появилась бесплатная версия инструмента, который пытается поженить дизайн и разработку.


Artyline

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



Glorify

Простой редактор баннеров и промо-картинок для интернет-магазинов.


VoxGun

Сервис для создания простейших промо-видео.


Paper Quilling Art Generator

Онлайн-инструмент генерирует абстрактную графику в духе лабиринтов из изогнутой бумаги.


eb6b16ae84d1e8086e55318e88eb8740.jpg

Aditus Button Contrast Checker

Сервис проверяет контраст цвета текста и фона на кнопках сайта во всех их состояниях (обычное, наведение и остальные).


Epilepsy Blocker

Сервис помогает проверить интерфейс на безопасность для людей с эпилепсией. У них появился и плагин для Figma.

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


Eyetato

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

Бонус: Похожий анализатор.


b5f58393e62be0dbc397a6ecbcef34f4.jpg

VisualEyes

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


6269dc9f8e6bb6befe7a78d8688d39a7.png

UXtweak

Ещё один сервис для удалённого юзабилити-тестирования. Идёт с инструментами проверки информационной архитектуры.


Userbility

И ещё один сервис для удалённого юзабилити-тестирования.


Юзабилити-тесты с людьми с инвалидностью

Валерия Курмак из Сбербанка советует подходы к проведению юзабилити-тестирования с людьми с ограниченными возможностями. Как и кого искать, особенности процесса.


ad20430c08b0fe59202a09e2216a12a0.jpg

Sample Size in Usability Studies — How Well Does the Math Match Reality?

Jeff Sauro пытается вывести подтверждение того, что старая байка про «всего 5 пользователей для юзабилити-тестирования» позволяет найти только большинство самых распространённых проблем.


David Travis & Philip Hodgson — Think Like a UX Researcher

David Travis и Philip Hodgson из UserFocus выпустили книгу «Think Like a UX Researcher». Она помогает пройти по всему процессу пользовательских исследований и предназначена не только для самих специалистов. Интервью для Shopify.


ce958ea3958377859a0af4a0b6f216a4.jpg

How to Analyze Qualitative Data from UX Research — Thematic Analysis

Maria Rosala из Nielsen/Norman Group описывает методы тематического анализа данных пользовательских исследований. Как разобрать большой объём неструктурированных данных.


Tools for Unmoderated Usability Testing

Обзор инструментов удалённого немодерируемого юзабилити-тестирования от Kathryn Whitenton из Nielsen/Norman Group.


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


Can I email… Support tables for HTML and CSS in emails

Сервис показывает поддержку HTML и CSS популярными почтовыми клиентами.


Less Data Doesn’t Mean a Lesser Experience

Пользователи могут установить режим Save Data на своём устройстве, позволяющий экономить трафик. Tim Kadlec даёт советы по оптимизации контента, которая не ухудшит основы сервиса.


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


Метрики и ROI


What metrics and KPIs do the experts use to measure UX effectiveness?

Памятка Christopher Ratcliff и Kuldeep Kelkar из UserZoom по некоторым интерфейсным метрикам поведения и отношения к продукту. Они также рассказывают о своём комбинированном показателе qxScore, который позволяет оценить разные грани работы продукта и отслеживать улучшения.


52d7ac755cc7f4821b46da5214bb5a4e.png

Дизайн-менеджмент и DesignOps


Design critiques at Figma

Шикарная памятка по проведению сессий дизайн-критики от Noah Levin из Figma. Он предлагает несколько форматов в зависимости от стадии задачи — это вообще отличный подход к описанию методов.


f6080209ca0bd1485b82742a77cd3e92.png

The power of critique — How to improve feedback on your team

Советы Braden Kowitz по проведению сессий дизайн-критики в команде.


How to deal with people who don«t «get» design — design and strategy

Morgane Peng из Societe Generale даёт советы по работе со сложными менеджерами. Она делит их на три категории и предлагает конкретные методы.


e816c9f994254582835095fb0f7f92d8.gif

Good Customer Experience Demands Organizational Fluidity

Kim Flaherty из Nielsen/Norman Group пишет о перестройке организации, которая нужна для системного улучшения customer experience.


The Design Maturity Model And The Five Disciplines Of The Learning Organization

Забавная модель зрелости дизайна от Dennis Hambeukers. Он совместил подходы InVision и Peter Senge, чтобы уйти от линейности классической «лестницы».


263473c84a2c8fa78a85f6ea9f1b5cdb.png

Hiring UX Professionals: 3 Critical Mistakes to Avoid

Jared Spool описывает свой метод найма дизайнеров. Это предварительная подготовка и договорённость требований, на основе которых проводится интервью. Ещё один метод от него — письмо о достижениях кандидата за год. Это позволяет синхронизировать понимание его задач внутри команды.


Customer Experiences Mirror Employee Experience

Gina Oh из IBM рассказывает об анализе employee experience map, которая помогает улучшить работу продуктовых команд. В свою очередь это положительно сказывается на пользовательской customer journey map.


How to Make Sense of Inherited Design

Sidharth из Headout рассказывает о карте здоровья продукта, которая помогает выбирать точки приложения усилий для улучшения интерфейса.


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


Parking Lots in UX Meetings and Workshops

Sarah Gibbons из Nielsen/Norman Group рассказывает о методе «парковки» идей на рабочих сессиях и встречах. Если какие-то из них не вписываются в тему обсуждения, то их можно отложить в отдельный список, который регулярно разбирается.


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


Lean UX Canvas V2

Jeff Gothelf обновил свой фреймворк Lean Canvas. Изменения небольшие, но основанные на опыте использования первой версии.


c978bee5ff5dee9291baeba2c5fa0935.png

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


A New Model for the Design Thinking Process

Yosef Shuman сделал обзор всех известных моделей дизайн-мышления и предложил свой вариант.


a8f9d3cbb76b8b841e8a3b5683038031.png

Кейсы


Amazon’s Beautifully Designed And Failed Three vs. Two Column Layout Experiment

Обзор одного из экспериментов Amazon с карточкой товара.


Тренды


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


AI generates logos from whole cloth

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


d3be9aa890057fa2a3b458ac47aab035.jpg

100 000 Faces Generated by AI

Большая коллекция лиц, сгенерированных с помощью алгоритмического дизайна.


f59eccc05c3e49b4a1f63567caa5519b.jpg

AI Meets Design

Фреймворк для дизайнеров, работающих с продуктами на базе искусственного интеллекта от Nadia Pret. Обширный набор паттернов и методов проектирования таких интерфейсов.


53e06f2e3c9eeb806a0f05d61995718f.png

Smarter Patterns

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


92d374dff105174fac3554af815adb29.png

Mixing UX and Research Science to Make Music

Claire Kayacik и Signe Nørly из Google рассказывают о совместной работе дизайнеров и исследователей над экспериментальным приложением, помогающим писать музыку.


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


Начинающему проектировщику

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


0dc1469839b1629429818a5144b75684.png

Juggling Multiple Product Teams

Советы дизайнерам, работающим на несколько продуктовых команд, от Jonathan Walter из Rockwell Automation. Формирование правильных ожиданий и грамотное планирование.


Innovation by Design Awards, 2019

Победители ежегодной премии Innovation by Design от Fast Company.


Coffee Chat Series #1: Getting Ahead as an Early-Career Designer

Советы начинающим дизайнерам от Julie Zhuo из Facebook.


Gabriel Kirmaier — UX Bites

Книга для начинающих дизайнеров интерфейсов от Gabriel Kirmaier, автора одноимённого Инстаграм-канала.


28d9b01bd792cc5fc375ff12c4842f56.jpg

Establishing Patterns — How IBM Reveals the Shape of Things to Come for New Designers

Maia Herring рассказывает об учебной программе Patterns в IBM, которая прокачивает начинающих дизайнеров, недавно нанятых в компанию.


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


Курс Future London Academy 2019 по UX и продуктовому дизайну

Пятый раз езжу на курс Future London Academy и четвёртый — курирую курс по UX и продуктовому дизайну. В этот раз мы были в Huge, Map Project Office, Progression Pack, Phantom, Societe Generale, Deepmind, UserZoom, Clearleft, Smart Design, Signal Noise, Trainline, Bulb. Собрал тонну полезных инсайтов для себя и команды (как обычно, много фото).


Future London Academy UX 2018

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

© Habrahabr.ru