​Внезапно собралась очередная копилочка о дизайн-системах и в ней хватает интересного добра. Минимум воды, максимум практической пользы на тему практических внедрений и полезных инструментов:

1. Ben Lister рассказывает о создании дизайн-системы Sprout Social и том, как менялась её команда. Как это часто бывает, это началось с группы энтузиастов, выделявших 30% времени на работу над ней, но постепенно сформировалась полноценная выделенная группа. Очень крутой пример того, как эволюционирует такая команда с чётко описанными проблемами, целями и задачами. Сама система Seeds и блог команды.

2. Maya King из REI рассказывает о построении команды дизайн-системы Cedar и выпуске её новой версии. Она показала процесс работы над компонентом и идеальный сценарий внедрения в продуктовую команду. Кстати, их консультировал Nathan Curtis.

3. Павел Лаптев научился выгружать токены из Figma в JSON, а затем и CSS-препроцессоры. Хотя разработчики вряд ли возьмут такой код в живой продукт (эта схема должна работать в обратном направлении), такие эксперименты приближают связку компонентов в коде и дизайнерские шаблоны. Репозиторий.

4. Наконец-то вышел Framer Bridge, позволяющий подключить компоненты из технологического фреймворка. Они синхронизируются с компонентами Framer X (которые теперь используют Git для версионирования).

5. Storybook движется в сторону полноценного живого гайдлайна для дизайнеров, а не только разработчиков — в новой версии можно выводить основы визуального языка (цвета, типографика, пиктограммы) и в целом лучше описывать компоненты. Также полезна будет надстройка Chromatic для визуального тестирования компонентов.

6. Дизайн-система австралийских госсайтов.

7. Мини-журнал Jina Anne о дизайн-системах на Medium с интересными статьями сторонних авторов.

8. Figma перезапустили свой сайт о дизайн-системах. В новой версии больше статей о технологических решениях, а не UI Kit, хотя на вид они не особо глубокие. Есть пока полупустая коллекция и совсем уж короткая история, так что у InVision контент-маркетинг получается лучше.

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

#designsystems

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте

#digest

​Ежегодная презентация достижений гуглового хозяйства Google I/O 2019 прошла 7-9 мая в Mountain View. Мероприятие проводится уже 11 лет и каждый раз показывает новый Android и другие куски экосистемы. Собрал то, что касается дизайнеров:

Android Q теперь имеет тёмную тему из коробки. Её ещё должны поддержать сами приложения, но для многих это хороший повод систематизировать работу с цветами и иконками, (например, через токены). Те, кто использовал стандартные компоненты Material Design, могут вообще расслабиться — у них поддержка из коробки. Другие интерфейсные нововведения в десятой версии:

1. Доработали управление жестами для основной навигации по ОС, переход на которое начали в Android P. Есть потенциальный конфликт с боковым меню для возврата назад. Классический вариант с 3 иконками доступен при первичной настройке.

2. Поддержка гибких экранов из коробки. В компании работают над прототипами таких устройств.

3. В гайдлайнах Material Design появился раздел про звуки в интерфейсах.

4. Плавающие чаты Bubbles а-ля Фейсбук станут частью платформы.

5. Инициатива digital wellbeing дала хороший эффект: её пользователи уменьшили использование телефона ночью на 27%. В Q будет ещё и режим фокуса с запретом на запуск отдельных приложений для прокрастинации.

Движок для deep learning мощно оптимизировали, так что он теперь доступен на устройстве даже без интернета. Благодаря этому появилось сразу несколько мощных вещей:

6. Smart Reply работает для любых мессенджеров, быстрые действия доступны в области уведомлений.

7. Субтитры к видео в реальном времени (пока только для английского).

Все выступления с конференции для дизайнеров. Тематизация в Material Design и его применение в продуктах, дизайн-спринты для Google Assistant, дизайн для ИИ, звуки в интерфейсе, тёмная тема. Ну и обзор нового в Material Design.

После масштабного обновления Material Design в прошлом году сейчас речь больше про полировку и постепенное развитие. Бета-версию уже можно поставить.

Из других околоинтерфейсных новостей конференции:

Google Assistant как одна из точек фокуса бодро развивается. Активнее помогает водителям, упростил вызов популярных действий, научился распознавать обращение к близким людям без имени, лучше работает с Android TV. Благодаря работающему на устройстве движку deep learning он реагирует сильно быстрее.

Но самое интересное — развитие Duplex, который в прошлом году всколыхнул пользователей интернета (фото). Он подключился к Chrome и стал помощником в заполнении сложных форм в вебе — например, арендовать машину или купить билеты в кино.

Показали и обратный пример — Live Relay поможет пользователям с ограниченными возможностями отвечать на звонки текстом (ну или готовыми Smart Reply).

Всё это связано с инициативами умного дома, которые теперь подаются под маркой Google Nest (вместо Google Home). Поскольку многие голосовые помощники уходят в «умные дисплеи» (тупо планшет на подставке, теперь и с играми), их новый Google Nest Hub Max как раз такой.

Ну и на сдачу обновился давно подзабитый Android Auto. Постоянная навигационная панель, упор на работу с картой.

В начале июня пройдёт ответочка от Apple, так что сравним все эти достижения с iOS.

#googleio #events #trends

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

1. Kathryn Whitenton рассуждает на тему массовых продуктов, где сложно сегментировать пользователей. Часто это приводит к вынужденному мнению, что «наши пользователи — это примерно все, так что ничего не попишешь». Она советует попробовать разделять их как минимум по частоте использования — это хороший первый шаг.

2. Jared Spool предлагает модель зрелости пользовательских исследований в команде. Его важное уточнение — зрелость имеет смысл оценивать именно у конкретной команды, а не организации в целом.

3. Kate Kaplan из Nielsen/Norman Group описывает подход с намеренным кратковременным молчанием модератора во время пользовательских исследований. Это позволяет не сбивать респондента с мысли и не задавать наводящих вопросов и уточнений. В статье отличные аудио-примеры по каждой ситуации.

4. Lindsay Nevard из Facebook показывает, как грамотно упакованные истории пользователей могут помочь продуктовым командам во многих рабочих моментах.

5. Jeff Sauro исследовал ситуации, в которых клиенты обращаются в службу поддержки. Они разделены по отраслям и конкретным проблемам.

6. Памятка Alita Joyce из Nielsen/Norman Group по проведению пользовательских исследований с детьми и подростками. Это непростая аудитория, при этом имеющая ещё и юридические ограничения в работе с ней.

7. Dani Nordin из athenahealth показывает шаблон подготовительных документов и отчёта о пользовательских исследованиях в lean-формате.

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

9. Годные советы Nancy Lincoln Perry из Microsoft по вовлечению всей продуктовой команды в пользовательские исследования. Как повысить их дизайн-грамотность и вложить в руки инструменты для проведения быстрых оценок продукта, чтобы сами исследователи смогли сфокусироваться на стратегических задачах.

10. David Siegel и Susan Dray рассуждают о картах эмпатии, которые идут по пути персонажей — становятся «как бы» заменителями понимания пользователей, на самом деле не давая нужной глубины.

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

12. Don Norman скептически относится к попыткам эмпатии к пользователям — если обращаться к изначальному смыслу термина, то это вряд ли возможно. Он советует фокусироваться на активностях пользователей и поддерживать их в продуктах.

13. В ещё одной статье он говорит о проблемах современного технологического мира, плохо приспособленного для пожилых людей.

14. Arin Bhowmick из IBM рассказывает о том, как устроен формат работы с пользователями-спонсорами (т.е. респондентами) в их версии дизайн-мышления. Команда продукта регулярно проводит с ними тестирование прототипов и концептов.

Уф, еле впихнул в один пост! Будет чем покормить ваш Pocket, который наверняка оголодал за выходные.

#research

​Микро-дайджест свежих инструментов дизайна интерфейсов насчитал уже два десятка выпусков и постоянно вылезает за границы малого формата:

Sketch 55: Простой способ менять расстояния в группе объектов, просмотр кода SVG, улучшение печати и интерфейса в целом.

Плагины:
— Method: сверяет отступы в макетах на соответствие 8-пиксельному микро-модулю.

— Iconscout: позволяет быстро найти иконки и иллюстрации для макета.

— AEUX: Экспорт макетов Sketch для использования в After Effects.

— Заметка о создании своего плагина для Sketch от Amy Rogers.

Adobe XD: Майское обновление. Компоненты переработаны в более зрелую версию вместе с более системной работой со стилями, много улучшений интерфейса.

Google Earth Studio: Команда Google Earth выпустила инструмент, который позволяет собирать видео пролёта над городами на основе своих карт.

Project Cue: Онлайн-инструмент для анимации, облегчающий её передачу разработчикам. Позволяет использовать JSON из плагинов вроде Bodymovin' для AfterEffects и докрутить результат. Анонс от авторов.

Framer X: Наконец-то вышел Framer Bridge, позволяющий подключить компоненты из технологического фреймворка. Они синхронизируются с компонентами Framer (которые теперь используют Git для версионирования).

Также запустился Framer Playground с новым редактором кода для создания своих компонентов.

Figma: Обзор работы с сетками.

— Шаблоны для рисования диаграмм в Sketch и Figma.

Marvel: Вышла третья версия корпоративного пакета инструмента. Собрали вместе все последние запуски вроде юзабилити-тестирования и помогают с организацией проектов и управлением организацией в целом.

Évolt: Сервис позволяет вести работу по концептуальному проектированию интерфейсов. Описание персонажей, сценариев, customer journey map, ну и мудборды в придачу.

Baselance: Сервис позволяет хранить базу фрилансеров с контактами, портфолио, ценниках. Импорт данных из Behance, Vimeo, Soundcloud, Instagram, GitHub и Artstation.

Useberry: Сервис помогает проводить юзабилити-тестирование интерактивных прототипов (и даже собрать их внутри).

Concepts: Планшетное приложение для скетчей и иллюстраций.

WBO: Ещё одна маркерная доска для совместной работы в браузере.

Octopus: Сервис для создания простых карт сайта в браузере.

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

remove.bg: Выпустили приложения для Windows, Mac и Linux.

Bildr: Ещё один сервис, который обещает объединить дизайн и генерацию готового кода из него.

DesignGapp: Сервис для создания статических гайдлайнов.

Gimli: Плагин для Visual Studio Code позволяет редактировать HTML и CSS в визуальном виде простыми настройками. Наглядная работа с расположением элементов, подключение к фреймворкам React, Bootstrap, VueJS и Angular и куча других возможностей. Пока собирают деньги на Kickstarter, бета-версия появится во второй половине года.

Сравнение Sketch, Figma и Adobe XD по ключевым функциям от Ashish Bogawat. Хороший способ быстро разобраться для тех, кто знает только один продукт.

Наклейки на клавиатуру с горячими клавишами Sketch, Figma и Photoshop.

Релизы выпускаются, инвестиции поднимаются, темпы не сбавляются, дизайнеры умиляются.

#tools

​Если вы открыли этот выпуск мини-дайджеста в поисках идей по развитию своей дизайн-системы, значит я не зря читал эти статьи для вас. Пара примеров, отличных инструкций и инструментов:

1. Шикарная памятка по описанию анимации от Caleb Barclay. Аудит существующих решений, ключевые переменные и шкалы, характер и принципы, спецификация.

2. Adam Doti из Salesforce рассказывает об описании интерфейсных звуков в их дизайн-системе Lightning. Принципы, паттерны и отличная модель уместности.

3. Дизайн-система ВКонтакте для мобильных приложений. Поддерживает тематизацию на базе токенов (репозиторий). Михаил Лихачёв рассказывает о создании тёмной темы для мобильных приложений. Для этого им потребовалось перевести часть переменных на токены, так что улучшили основу для дизайн-системы.

4. Дизайн-система Uber. Анонс.

5. Nathan Curtis показывает, как описывать несколько плотностей компонентов и типографику.

6. Обзор синтаксиса MDX и популярных фреймворков (Docusaurus, Gatsby, Docz, Storybook, Styleguidist, VuePress, MkDocs, GitBook) для создания живых гайдлайнов и описания компонентов.

Последние выпуски микро-дайджеста тянут на жёсткое макро, которое читать обычно нету сил. Попробую сдерживать себя и оставаться в рамках 5-7 ссылок (хохма.jpeg).

#designsystems

​Новые электронные и бумажные книги по дизайну интерфейсов снова просятся на ваши полки. Ловите полдюжины уже доступных и столько же анонсированных до конца года:

1. Новая книга Ryan McLeod «Animation Handbook» от InVision посвящена интерфейсной анимации. Мысли и интервью дизайнеров Google, Headspace, Lyft и Zova Fitness. Не самая крупная из того что они делали, но достаточно подробно.

2. Intercom опубликовали второе издание своей книги «Onboarding».

3. Smashing Magazine выпустили книгу Andy Clarke «Art Direction for the Web». В ней рассказывается о возможностях современных технологий по эффектному представлению брендов в вебе. Одна из статей показывает, какую эффектную журнальную вёрстку можно сделать с помощью CSS Shapes.

4. A List Apart выпустили в апреле 2019 книгу Lisa Maria Martin «Everyday Information Architecture». Они публикуют отрывок из главы 4.

5. Julie Zhuo «The Making of a Manager». Она помогает начинающим менеджерам работать грамотнее. Она не фокусируется на дизайн-менеджменте, а говорит об общих вещах в управлении. Хотя на эту тему написаны тысячи книг, дизайнеру будет понятнее книга от дизайнера. Интервью про её подход к работе и книгу.

6. У A Books Apart, кажется, вот-вот начнёт продаваться похожая «Resilient Management» от Lara Hogan.

А вот что на подходе у Rosenfeld Media:

1. Abby Bajuniemi «Designing and Researching Natural Language Interaction» об исследовании голосовых и чат-интерфейсов. Интервью с автором.

2. Stephen Anderson и Karl Fast «Figure It Out».

3. Jim Kalbach «The Jobs To Be Done Playbook».

4. Boon Sheridan «Getting Started in UX».

5. Michael Metts и Andy Welfle «Designing with Words».

6. Amy Bucher «Engaged: Psychology for Digital Product Design».

Оформляйте предзаказики!

P.S. Напомню свой Goodreads, где архивирую прочитанное с оценками и веду лютый список планов, которым непросто сбыться.

#books

​На этой неделе в Торонто пройдёт конференция Strive о пользовательских исследованиях. Там очень мощный и представительный состав из десятков спикеров.

Они ведут толковый журнал на Medium UX Research Collective, где публикуют интервью со всеми докладчиками конференции. Вот самые интересные:

1. Mandy Owen из Airbnb. Она рассказывает о структуре команды, интеграции с продуктовыми командами, роли исследований в культуре компании и развития рынка в целом.

2. Shopify. Как устроена и работает команда.

3. Monal Chokshi из Lyft. О структуре команды, интеграции с продуктовыми командами, роли исследований в культуре компании и развития рынка в целом.

4. Patti Carlson из Mailchimp. Структура команды.

5. Chris Geison из AnswerLab о своём видении профессиональных трендов и вызовов.

Это уже 6-7 июня, так что вряд ли успеете вписаться. Но организаторы делают митапы и держат сообщество в Slack, так что полезно следить за их активностями. Тем более, что они публикуют видео выступлений (прошлогодняя конференция, например).

#research

​Ежегодная конференция WWDC приносит свежий iOS и какие-нибудь нежданчики для дизайнеров интерфейсов, делающих модные приложения. В этот раз приехало со стороны со стороны планшетов.

iPadOS
Поскольку разумного подхода с единой операционкой для компьютеров и планшетов от Apple ждать не приходится, продолжается ползучая миграция планшетов в сторону полноценности (с попутным отказом от многих мантр концепции «Post-PC»). В этом году iOS выделили в отдельную ветку iPadOS. Что интересного произошло с интерфейсом:

1. Более серьёзная работа с файловой системой после всех тех баек о ненужности этой «устаревшей концепции». Есть даже свои флешки — через адаптер можно подключить SD-карточку.

2. Приложения можно запускать несколько раз (они будут во вкладках).

3. Стартовый экран теперь с виджетами, а сетка иконок приложений плотнее.

4. Более лучшее переключение между приложениями.

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

6. Можно ставить шрифты (судя по описанию, через AppStore).

7. Постепенно работают над браузером, который был очень далёк от современных возможностей на десктопе. Уже хвалятся работой Google Docs, так что наверняка сможет Figma и грядущий Sketch для браузера.


8. iPad может стать вторым экраном для ноутбука или компьютера. Можно также управлять компьютером с планшета.

Обзор обновлений для разработчиков и дизайнеров.

iOS 13
Особых обновлений интерфейса нет (снова фокус на ускорение работы и уменьшение размера приложений), но:

1. Тёмная тема оформления, как и в любом чайнике в 2019 году. Гайдлайны.

2. Новый паттерн фильтра в фотографиях и расширенный редактор во встроенной почте.

3. Авторизация в сторонних сервисах через учётную запись Apple. Позволяет войти через отпечаток пальца или распознавание лица, ну и поможет спрятать почту от спамеров.

4. Быстрый набор на клавиатуре через свайпы — всего-то с отставанием почти на десять лет от Android.

5. Управление голосом для пользователей с ограниченными возможностями теперь покрывает, кажется, вообще все возможные сценарии использования.

Обзор обновлений для разработчиков и дизайнеров. А ещё появились шрифт New York и библиотека иконок с вариативной толщиной линий.

Ещё из полезных инструментов — фреймворк SwiftUI для любых ОС от Apple, который сильно упрощает сборку интерфейса. Так, что это могут делать дизайнеры — можно набросать элементы на экран и потом корректировать код. К нему идут пошаговые уроки, а вездесущий Meng To запустит курс осенью.

Ну и традиционное награждение лучших по дизайну приложений.

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

Другие околоинтерфейсные анонсы
— Project Catalyst (анонсированный ранее как Marzipan), который позволяет портировать iPad-приложения на Mac, уже доступен разработчикам. Например, Twitter быстро запилили приложение.

— Редизайн CarPlay. Разделение экрана для двух приложений, так что не придётся переключаться с карт на музыку, плюс контекстные подсказки приложений.

— Обновлённый Apple TV может работать с контроллерами Xbox и PlayStation.

— iTunes разделили на отдельные приложения, так что один из самых жутких интерфейсов в истории уходит в прошлое.

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

#ios #trends #events

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте

#digest

​Лето принесло усиление схватки между Sketch и Figma — оба инструмента сделали ключевые анонсы, сокращающие функциональное отставание.

Sketch: Анонсирована версия для команд. Общее пространство в Sketch Cloud, версионирование, централизованная раздача плагинов и библиотек символов, просмотр спецификаций экрана в браузере без Zeplin. Как и в Figma, вы платите только за редакторов, а не каждый чих с единичным просмотром одного экрана. Бета-версия появится в июле.

А ещё в версии 56 решится самая древняя и глупая боль — символы сами меняют размер при изменении контента. Неужели не придётся руками менять ширину кнопок?! Плюс появится панель компонентов рядом со слоями (как в Фигме). И изменение расстояний в группе объектов (тоже как в Фигме).

Плагины и дополнения:
— Дмитрий Коваленко из Readle сделал три сотни наборов данных. Имена, адреса почты, устройства, страны, аэропорты и т.п.

— Sparkle: Плагин превращает инструмент в конструктор промо-сайтов — можно собрать его и получить готовый код.

— xLayers: Приложение позволяет собрать готовый сайт из макета Sketch. Причём можно получить как статику, так и компонентный вариант на React и Angular.

Figma: Анонсированы плагины. Обещают надёжную и безотказную работу, когда надстройки не ломаются при обновлении инструмента. Уже доступна бета-версия для разработчиков. Это было одной из главных функциональных претензий переходящих со Sketch.

Полезные материалы:
Роман Камушкен описывает несколько подходов к созданию таблиц. А Thomas Lowry — памятку по созданию типографической системы. Больше базовой теории построения шрифтовой шкалы, зато есть шаблоны-примеры прямо в Figma.

Это напоминает переломный момент в гонке Android и iOS — в какой-то момент они настолько сильно оторвались от конкурирующих платформ вроде Windows Phone, Tizen, Sailfish, WebOS и других, что все попытки догнать в лоб потеряли смысл (при всех деньгах Adobe и InVision). В этом году Sketch и Figma сделают примерно то же, так что даже не знаю, стоит ли продолжать говорить про остальных. Но я попробую:

UX Reality: Сервис для юзабилити-тестирования мобильных сайтов и приложений. Обещает eye tracking и отслеживание выражения лица.

Overflow: Вышел из беты. Появилась организация проектов в облаке и версионность, а сам интерфейс сильно доработан.

Shape: IDEO запустили сервис для обмена мудбордами, заметками и другими наработками внутри команды.

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

Startup: Вышла третья версия конструктора промо-сайтов от DesignModo.

Muzli Search: Поиск по подборкам Muzli неплохо дополняет Pinterest для сбора мудбордов.

Muse: Экспериментальное планшетное приложение для визуальных заметок и набросков. Интересные приёмы взаимодействия с интерфейсов, которые подробно разобраны в статье.

Alyssa X рассказывает о своём новом инструменте для анимации. Пока ничего рабочего нет, но есть обзор основных идей.

Struct: Ещё один сервис-конструктор иллюстраций из готовых элементов.

Milkshake: Конструктор мобильных сайтов для Instagram, можно делать их прямо на телефоне.

Framer X: Курс по Framer Playground от Meng To.

GoodBrief: Генератор брифов на разные работы по дизайну.

Amadine: Векторный редактор для Mac.

Зато выбор значительно упростится — останутся всего два стула.

#tools

​Штош, дизайн-менеджеры, вот и свежий выпуск мини-дайджеста для вас:

1. Alastair Simpson из Atlassian руководил многими дизайн-командами в компании. Он составил шикарную памятку для нового дизайн-менеджера в команде — как разобраться в ситуации и приносить пользу, а не новый слой микро-менеджмента.

2. Arturo Leal из Dell описывает модель метрик для оценки эффективности работы дизайн-команды. Они делятся на 4 категории: продуктивность, здоровье команды, результаты работы и рост.

3. Sana Rao из Deliveroo рассказывает о реорганизации дизайн-команды. Они пришли к матричной структуре вместо разделения по функциональным отделам.

4. Шикарнейшая памятка для дизайнеров, работающих в agile-процессе, от Anna Kaley из Nielsen/Norman Group. Она показывает, как эффективно участвовать во всех встречах и планёрках, которые достаточно интенсивны в каноническом подходе.

5. И сразу несколько материалов о карте компетенций дизайнеров и работе по ней (тема всё чаще всплывает в реальных примерах):

— Shopify. Как парная работа помогает передавать навыки от сильных специалистов к растущим.

— IBM (сейчас их уже 2000 человек). И о том, как рождалась карта компетенций (многовато воды, но есть основные детали процесса создания).

— DocDoc (первая часть).

На благо ваших команд и вашей же полезности.

#designmanagement #designops

​Как ещё повысить насмотренность дизайнеру интерфейсов, если не разбирать годные интерфейсные паттерны? Вот вам свежая подборка от мастеров жанра:

1. Page Laubheimer из Nielsen/Norman Group рассказывает о законе руления Accot-Zhai для элементов интерфейса, предполагающих долгое перемещение указателя (например, курсора мыши). Он помогает сделать доступную зону (тоннель) достаточно широкой, чтобы взаимодействие с выпадающим списком, ползунком, хронологией видео и другим подобным элементом было комфортным.

2. Suzanne Scacca пишет о странном тренде, когда чат-боты заменяют привычные формы обратной связи на мобильных сайтах. В большинстве случаев они бесполезны и только усложняют контакт с компанией.

3. Обзор безумных интерфейсных паттернов, которые выходят в Reddit-сообществе Programmer Humor с 2016 года.

4. Webframe: Ещё один каталог интерфейсных паттернов.

5. Памятка Raluca Budiu из Nielsen/Norman Group по выделению обязательных полей в формах. Базово, но обзор хороший.

6. Kara Pernice и Patty Caya из Nielsen/Norman Group описывают тренды в дизайне интранет-сайтов.

7. Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе.

8. Советы Maria Rosala из Nielsen/Norman Group по грамотному формату и моменту запроса разрешений на использование функций мобильного у пользователей.

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

#patterns

​Розы красные,
Фиалки голубые.
Дизайн-системы разные —
Вот примеры вам любые.

Свежие примеры:
1. IVI. Илья Хромов о работе над ней. Продукт работает на множестве платформ — ТВ, веб, мобильные, десктопные ОС, так что команда раздаёт единый дизайн через токены.

2. Adobe Spectrum. У них больше сотни продуктов, так что задача монструозная и отдача будет не скорой. Но они описали неплохой универсальный подход, который потенциально поможет сделать разные приложения однородными.

Детальный опыт внедрения:
1. Michele Cynowicz из Vox Media рассказывает о том, как устроены интерактивые прототипы на базе их дизайн-системы. Они делают ветку в компонентах, которая в случае успеха вливается в основной код и доступна всем.

2. Gene Shannon из Shopify размышляет об основных выводах из двухлетнего опыта работы над их дизайн-системой Polaris. Много интересных деталей и практических проблем развития масштабной платформы.

3. Серия статей по созданию дизайн-системы от Shane P Williams.

Горячие токены:
1. Diez помогает хранить токены и раздавать их в кучу платформ и фреймворков. Ну и собирать их изначально из инструментов дизайна.

2. Chrid Cid предлагает называть переменные «ионами» для тех, кто придерживается методологии атомарного дизайна. Правда, «токены» уже более устоявшееся и прижившееся слово.

Востребованные тексты в интерфейсах:
1. Годная памятка Rhiannon Jones из Deliveroo по выбору правильной тональности для интерфейсных текстов. Она должна быть связана с брендом и работать в обычных и проблемных ситуациях.

2. Susan Gray Blue из Facebook на ту же тему. Они не пытаются угадать настроение пользователя, ведь это невозможно, но стараются быть адекватными конкретной ситуации.

Целых четыре категории ссылок, какая-то точно пригодится.

#designsystems

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте

#digest

​В свежем дайджесте была традиционная стопка ссылок о пользовательских исследованиях. Ловите выжимку из этой традиционной простыни:

1. Шикарная статья Олега Якубенкова, где он показывает ошибку в использовании популярного сейчас в отечественном проф.сообществе термина Customer Development. В изначальной концепции Steve Blank это была целостная методология продуктовой работы, а у нас под этим понимается только один из кусков — пользовательские исследования (или скорее их часть — глубинные интервью).

2. Matt Duignan из Microsoft руководит базой пользовательских инсайтов HITS. Он показывает принципы её работы и то, как продуктовые команды получают пользу от неё. Babette Schilte из Facebook о том же.

3. Jeff Sauro сделал обзор своих попыток воспроизвести известные метрики и методы пользовательских исследований. Какие-то подтвердились, какие-то — нет.

4. Jared Spool пишет об итеративном улучшении понимания пользователей и их сценариев по ходу работы над продуктом.

5. Beth Lingard из Facebook показывает свой подход к описанию выводов из пользовательских исследований, который удобен для продуктовых команд.

6. Behzod Sirjani из Slack рассказывает о своём опыте построения стажёрской программы для пользовательских исследований, а также видении правильной работы с продуктовыми командами.

7. Maria Rosala из Nielsen/Norman Group описывает типичные проблемы в планировании и проведении интервью с пользователями.

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

Больше знаешь о пользователях — меньше мучительно переделываешь потом.

#research

​Быстрая доза интерфейсных паттернов для повышения насмотренности:

1. Топовая памятка Anna Kaley из Nielsen/Norman Group помогает избегать плохих решений с использованием попапов. Это тяжёлый интерфейсный паттерн, прерывающий работу пользователя, так что нужно делать это крайне аккуратно.

2. Мощное исследование тёмных паттернов в интернет-магазинах. Пристонский и Чикагский университеты изучили 11 тысяч сайтов и оценили частоту встречаемости проблем.

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

4. Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе.

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

Видите, иногда выпуски дайджеста можно быстро пролистать в формате информационного перекуса :)

#patterns

​На радость дизайн-менеджерам, арт-директорам и всем тем, кто в ответе за команду дизайнеров — свежая подборка на тему:

1. Толковая подборка советов для дизайн-менеджеров от сообщества Playbook. Опытные люди из отрасли отвечают на частые вопросы об управлении командами и построении процесса.

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

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

4. Kate Moran из Nielsen/Norman Group даёт советы по организации удалённой работы UX-команды. Компания все годы своего существования работала без офиса.

5. Иван Соловьёв из DocDoc описывает методы синхронизации команды на разных уровнях — регулярные встречи в разных форматах.

6. Памятка Jonathan Walter из Rockwell Automation по проведению регулярных сессий дизайн-критики продуктовой командой.

Удачи на дорогах к светлому продуктовому будущему!

#designmanagement

​Методов пользовательских исследований огромное множество и нужно уметь подбирать их под конкретную задачу и гипотезу для проверки. Есть классический фреймворк от Christian Rohrer, но жизнь не стоит на месте:

1. Елена Бородина из Газпромбанка описала мощный фреймворк для выбора методов пользовательских исследований. Она приводит три проекта из недавнего опыта и показывает логику принятия решений. Полная версия.

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

3. Colette Kolenda и Kristie Savage из Spotify показывают, как компания совмещает методы пользовательских исследований и аналитики для ответов на сложные вопросы. Они, кстати, используют тот самый фреймворк Christian Rohrer.

Выбор определённо станет разумнее, а арсенал подходов — нагляднее.

#research

​Накал борьбы Sketch и Figma за лидирующий инструмент дизайна уже шкворчит — громкие анонсы месячной давности почти подкрепились результатом:

Sketch 56: Улучшение работы с группой объектов, замена текста в символе прямо на макете (не в панели overrides) и мелкие доработки интерфейса.

Бета-версия для команд: Общее рабочее пространство в облаке (теперь макеты можно сохранять сразу туда) с управлением всей рабочей группой. $8,25 в месяц за пользователя (просмотр бесплатен). Пока только самые базовые функции (комментирование и версии), но позже появится аналог Zeplin, организация макетов в проекты, API.

Плагины
1. Anima 4 будет экспортировать код на React и позволит настраивать итоговый синтаксис. А ещё перейдёт на верстку через flexbox.

2. Envato Elements: Envato запустили свою коллекцию шаблонов для Sketch. Есть плагин, который облегчает работу с каталогом.

3. Толковая инструкция Matt Curtis по созданию простого плагина. Часть 2.

Figma: Плагины запустятся 1 августа. Sander Smeekes сделал обзор 10 показанных на недавней встрече с командой. Переключение тем оформления для макетов, полезные утилиты (вставка карт, генератор паттернов, работа с цветом), покадровая анимация, примитивная работа с 3D, информационные карты.

Полезные материалы
1. Интервью с Dylan Field об истории инструмента, формате работы команды и планах на будущее.

2. Denis Rojčyk из Kiwi рассказывает о своём подходе к версионированию макетов.

3. Шаблоны для создания wireframes и интерфейсных диаграмм.

Drama: Новый универсальный инструмент дизайна от создателей PaintCode. Пока вообще никаких деталей, но можно записаться на бета-версию.

Subform: На сайте пишется о прекращении разработки.

Mason: Конструктор сайтов на базе библиотеки React-компонентов, которые можно менять в визуальном редакторе. Обзор.

Tumult Hype 4: Вышла из беты. Из наиболее интересных изменений — анимация векторных фигур.

Axure RP 9: Вышла из беты. Обновился интерфейс, появился импорт из Sketch, расширяются возможности визуального дизайна.

Adobe XD: Июньское и июльское обновление. Улучшенная работа с плагинами, прототипами и Jira.

Relate: Появилась бета-версия. Видео-обзор от авторов.

Artboard Studio 2.0: В новой версии появилась совместная работа над макетами.

Brizy: Ещё один конструктор промо-сайтов.

Whimsical: Теперь умеет делать ментальные карты.

ScreenChat: Конструктор переписки в чате, который даёт на выходе скриншот iMessage в телефоне.

Adobe Fresco: Приложение для иллюстраторов на iPad, которое выросло из прототипа Project Gemini. Упор на кисти, которые воспроизводят поведение реальной краски.

Zeplin: Запустили глобальные гайдлайны, которые могут описывать сразу несколько проектов. Цвета, шрифты и компоненты могут наследоваться, например, между вебом, Android и iOS.

Photopea: Бесплатный графический редактор в браузере. Открывает кучу форматов — PSD, Sketch, Adobe XD, RAW и другие. AMA с создателем.

Framer: Библиотека интерфейсной анимации на React.

Readymag: Запустили готовые шаблоны для быстрого старта проекта.

Record Screen: Простой сервис для записи видео из браузера.

Желающих убить пару лет на создание конкурента Sketch или Figma с каждым годом всё меньше — почти всё кроме самого крупняка умерло или живёт в своих маленьких нишах. Зато простые утилиты всегда в цене.

#tools

​Мини-дайджест по дизайн-системам наступает на пятки обзорам новых инструментов дизайна. Ловите свежий впрыск:

1. Amy Cesal собрала примеры описания визуализации данных.

2. Chase McCoy об истории создания Sprout Social и её текущих возможностях.

3. Brad Frost о том, куда развивается его концепция «атомарного дизайна» и почему он только за любые её изменения под конкретные задачи.

4. Microsoft обновили Fluent. Она охватывает Windows, веб, Android и iOS (к ним, кстати, идут шаблоны для Sketch и Figma). Пара слов от команды.

5. Katie Sievert и Jon Koon из Twitter о своей дизайн-системе.

6. Koen Vendrik из Shopify о способах тематизации и том, как они постепенно включают эти возможности в Polaris.

7. Обзор работы с темами оформления на React от Mitch Gavan.

8. Devin Abbott показывает, как создавал свой сайт с помощью экспериментального фреймворка Lona.

9. Виталий Евтехов из Skyeng о переменных для цвета.

10. Eva: Готовая дизайн-система на Angular, которую можно кастомизировать под свои задачи. К ней идут также шаблоны для Sketch.

Десяточка накануне полноценного июльского дайджеста — кажется, он будет у вас на экранах уже в понедельник.

#designsystems