На этой неделе в Торонто пройдёт конференция 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
Они ведут толковый журнал на 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
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
Напомню, что его можно получать разными способами:
— ВКонтакте
— Рассылка по почте
#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
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
Sketch
Sketch for Teams, Smart Layout and more announcements from Layers
Last week at Layers we we announced some exciting new features coming to Sketch very soon. Here’s a roundup of all the announcements!
Штош, дизайн-менеджеры, вот и свежий выпуск мини-дайджеста для вас:
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. 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
Medium
New to a design team? Use these 4 pillars to set it up for success
I always tell people when I meet them in interviews that I have had the pleasure or misfortune (depending on how you look at it) of…
Как ещё повысить насмотренность дизайнеру интерфейсов, если не разбирать годные интерфейсные паттерны? Вот вам свежая подборка от мастеров жанра:
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. 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
Nielsen Norman Group
Accot-Zhai Steering Law: Implications for UI Design
Dropdowns, hierarchical menus, sliders, or scroll bars involve steering a pointer or a cursor through a tunnel; optimal design for these GUI elements should consider the Steering Law.
Розы красные,
Фиалки голубые.
Дизайн-системы разные —
Вот примеры вам любые.
Свежие примеры:
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
Фиалки голубые.
Дизайн-системы разные —
Вот примеры вам любые.
Свежие примеры:
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
Medium
От UI-kit до дизайн-системы
Опыт онлайн-кинотеатра Иви
Собрал дайджест продуктового дизайна за июнь 2019. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте
#digest
Напомню, что его можно получать разными способами:
— ВКонтакте
— Рассылка по почте
#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. Шикарная статья Олега Якубенкова, где он показывает ошибку в использовании популярного сейчас в отечественном проф.сообществе термина 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
GoPractice
ᐈ Customer Development и Custdev. Что это такое и в чем разница?
Что значит Customer Development, насколько данная методология популярна, чем отличается Custdev (Кастдев) от Customer Development.
Быстрая доза интерфейсных паттернов для повышения насмотренности:
1. Топовая памятка Anna Kaley из Nielsen/Norman Group помогает избегать плохих решений с использованием попапов. Это тяжёлый интерфейсный паттерн, прерывающий работу пользователя, так что нужно делать это крайне аккуратно.
2. Мощное исследование тёмных паттернов в интернет-магазинах. Пристонский и Чикагский университеты изучили 11 тысяч сайтов и оценили частоту встречаемости проблем.
3. Гениальный сайт, показывающий кучу интерфейсных ошибок на деле. Как не надо использовать привычные паттерны и ломать привычки пользователей.
4. Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе.
5. Новая реализация навигационного треугольника от Amazon, который помогает точнее попадать курсором мыши в пункты выпадающего меню.
Видите, иногда выпуски дайджеста можно быстро пролистать в формате информационного перекуса :)
#patterns
1. Топовая памятка Anna Kaley из Nielsen/Norman Group помогает избегать плохих решений с использованием попапов. Это тяжёлый интерфейсный паттерн, прерывающий работу пользователя, так что нужно делать это крайне аккуратно.
2. Мощное исследование тёмных паттернов в интернет-магазинах. Пристонский и Чикагский университеты изучили 11 тысяч сайтов и оценили частоту встречаемости проблем.
3. Гениальный сайт, показывающий кучу интерфейсных ошибок на деле. Как не надо использовать привычные паттерны и ломать привычки пользователей.
4. Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе.
5. Новая реализация навигационного треугольника от Amazon, который помогает точнее попадать курсором мыши в пункты выпадающего меню.
Видите, иногда выпуски дайджеста можно быстро пролистать в формате информационного перекуса :)
#patterns
Nielsen Norman Group
Popups: 10 Problematic Trends and Alternatives
Whether modal or not, most overlays appear at the wrong time, interrupt users during critical tasks, use poor language, and contribute to user disorientation.
На радость дизайн-менеджерам, арт-директорам и всем тем, кто в ответе за команду дизайнеров — свежая подборка на тему:
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
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
Askplaybook
Grow as a Design Manager Collection
You’re passionate about building teams and helping people realize their full potential. However, the waters of design management can be pretty choppy. Here are ways to approach these challenges!
❤1
Методов пользовательских исследований огромное множество и нужно уметь подбирать их под конкретную задачу и гипотезу для проверки. Есть классический фреймворк от Christian Rohrer, но жизнь не стоит на месте:
1. Елена Бородина из Газпромбанка описала мощный фреймворк для выбора методов пользовательских исследований. Она приводит три проекта из недавнего опыта и показывает логику принятия решений. Полная версия.
2. Карта инструментов для подготовки и проведения пользовательских исследований и работы с их результатами от сервиса User Interviews.
3. Colette Kolenda и Kristie Savage из Spotify показывают, как компания совмещает методы пользовательских исследований и аналитики для ответов на сложные вопросы. Они, кстати, используют тот самый фреймворк Christian Rohrer.
Выбор определённо станет разумнее, а арсенал подходов — нагляднее.
#research
1. Елена Бородина из Газпромбанка описала мощный фреймворк для выбора методов пользовательских исследований. Она приводит три проекта из недавнего опыта и показывает логику принятия решений. Полная версия.
2. Карта инструментов для подготовки и проведения пользовательских исследований и работы с их результатами от сервиса User Interviews.
3. Colette Kolenda и Kristie Savage из Spotify показывают, как компания совмещает методы пользовательских исследований и аналитики для ответов на сложные вопросы. Они, кстати, используют тот самый фреймворк Christian Rohrer.
Выбор определённо станет разумнее, а арсенал подходов — нагляднее.
#research
Medium
Which UX Research Method to Use
They say that asking the right question is half the answer. Take a look at this UX Research Decision Making Tree from Elena Borodina, who…
Накал борьбы 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
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
Medium
Smart Distribute, Cloud documents and Sketch for Teams — What’s New in Sketch?
We’ve got some really exciting updates to share with you— from big improvements to the Mac app, to the Sketch for Teams beta!
Мини-дайджест по дизайн-системам наступает на пятки обзорам новых инструментов дизайна. Ловите свежий впрыск:
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
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
Medium
What Are Data Visualization Style Guidelines?
Data visualization style guides are standards for formatting and designing representations of information.
Собрал дайджест продуктового дизайна за июль 2019. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте
#digest
Напомню, что его можно получать разными способами:
— ВКонтакте
— Рассылка по почте
#digest
Второе дыхание примеров алгоритмического дизайна выдало жирнейшую подборку. Роботы уже не та молодая шпана, что сотрёт дизайнеров с лица земли, но они становятся всё изобретательнее и услужливее. Лучший подмастерье, которого только можно придумать:
1. UIBot: Лучший на сегодняшний момент пример для интерфейсов. Сервис применяет самые разные стили к условной консоли и даже предлагает простейшую вариативность по расположению элементов.
2. Робо-дизайнер LuBan от Alibaba помогает делать баннеры. Продавец выбирает стиль и целевые размеры, дальше генерируются все нужные варианты. Пишут, что почти вся рекламная графика на Tmall делается с его помощью. Ещё один обзор.
3. GauGAN: Ещё один пример крышесносной магии — экспериментальное решение Nvidia превращает набросок в фотографию природного ландшафта. Подробнее.
4. Components AI: Ещё один бывший сотрудник The Grid запустил экспериментальный инструмент алгоритмического дизайна. Он генерирует токены дизайн-системы. Другой его эксперимент на эту тему.
5. GANPaint Studio: Экспериментальный инструмент дизайна, который позволяет дорисовывать фотографию готовыми объектами — например, добавить дерево или облако.
6. Эксперимент от исследователей Университета Вашингтона и Facebook позволяет анимировать персонажа из обычной фотографии.
7. Эксперимент отечественных исследователей Samsung, создающий видео говорящего персонажа на основе фото или картины.
8. Второй исследовательский проект Adobe определяет обработанные фотографии. Видео-рассказ.
9. Генераторов правдоподобных лиц стало так много, что появился даже "Hot or Not" для них.
10. Экспериментальный сервис превращает фото в классический портрет. Пара слов о нём.
11. Игровая платформа Google Stadia предлагает накладывать стиль на игру в реальном времени.
Подпишитесь на рассылку новостей алгоритмического дизайна. Не всегда новости по теме собираются быстро, зато точно ничего не пропустите.
#ai #algorithms
1. UIBot: Лучший на сегодняшний момент пример для интерфейсов. Сервис применяет самые разные стили к условной консоли и даже предлагает простейшую вариативность по расположению элементов.
2. Робо-дизайнер LuBan от Alibaba помогает делать баннеры. Продавец выбирает стиль и целевые размеры, дальше генерируются все нужные варианты. Пишут, что почти вся рекламная графика на Tmall делается с его помощью. Ещё один обзор.
3. GauGAN: Ещё один пример крышесносной магии — экспериментальное решение Nvidia превращает набросок в фотографию природного ландшафта. Подробнее.
4. Components AI: Ещё один бывший сотрудник The Grid запустил экспериментальный инструмент алгоритмического дизайна. Он генерирует токены дизайн-системы. Другой его эксперимент на эту тему.
5. GANPaint Studio: Экспериментальный инструмент дизайна, который позволяет дорисовывать фотографию готовыми объектами — например, добавить дерево или облако.
6. Эксперимент от исследователей Университета Вашингтона и Facebook позволяет анимировать персонажа из обычной фотографии.
7. Эксперимент отечественных исследователей Samsung, создающий видео говорящего персонажа на основе фото или картины.
8. Второй исследовательский проект Adobe определяет обработанные фотографии. Видео-рассказ.
9. Генераторов правдоподобных лиц стало так много, что появился даже "Hot or Not" для них.
10. Экспериментальный сервис превращает фото в классический портрет. Пара слов о нём.
11. Игровая платформа Google Stadia предлагает накладывать стиль на игру в реальном времени.
Подпишитесь на рассылку новостей алгоритмического дизайна. Не всегда новости по теме собираются быстро, зато точно ничего не пропустите.
#ai #algorithms
Пятый раз езжу на курс Future London Academy и четвёртый — курирую часть по UX и продуктовому дизайну. В этот раз мы были в Huge, Map Project Office, Progression Pack, Phantom, Societe Generale, Deepmind, UserZoom, Clearleft, Smart Design, Signal Noise, Trainline, Bulb. Собрал тонну полезных инсайтов для себя и команды:
ОРГАНИЗАЦИЯ ДИЗАЙН-КОМАНД И ПРОЦЕССА
Progression
Jonny Burch работает над сервисом, где можно вести карты компетенций для дизайнеров. Тема горячая: дизайн-команды в продуктовых компаниях стремительно растут, а значит нужно думать об их внутреннем здоровье.
Societe Generale
Morgane Peng и часть дизайн-команды банка показала толковый фреймворк по работе со сложными менеджерами.
Clearleft
Andy Thornton сопоставил несколько моделей дизайн-менеджмента и получил интересные пересечения. В конце он презентовал свою модель зрелости по трём уровням (Aesthetic, Empathic, Strategic) и пяти аспектам (Who, When, How, Why, Where).
HUGE
Одно из самых известных в мире дизайн-агентств имеет неплохой офис в Лондоне. 3-4 года назад в компании был жёсткий период — люди перегорали, многие ушли. Нужно было сильно меняться изнутри и студия переизобрела себя.
Bulb
Команда устроила необычный воркшоп. Мы разбились на 5 команд и должны были спроектировать экраны продукта. Дальше нужно было сформировать дизайн-систему, которая поможет создавать похожие продукты. После этого мы передали её соседней команде и каждый должен был заново спроектировать все 5 продуктов на базе этой дизайн-системы. Подход здорово показал проблемы её отчуждаемости.
ПОЛЬЗОВАТЕЛЬСКИЕ ИССЛЕДОВАНИЯ
UserZoom
Lee Cooper и Jenna Smith представляют один из старейших и крупнейших сервисов удалённого юзабилити-тестирования в Лондоне. Они рассказали о продукте и компании в целом — помимо ожидаемых возможностей инструмента они консультируют клиентов по многим вопросам и даже могут выступать как UX-агентство.
UX В НИШЕВЫХ ОБЛАСТЯХ
Map Project Office
Компания работает на стыке физических и цифровых интерфейсов. Они участвовали в нескольких успешных запусках на Kickstarter и плотно работают с Google, Amazon, IBM и другим крупняком для поиска применений их новых технологий. Julie Arrive и Alex Hulme рассказали, как они экспериментируют и пытаются спрогнозировать, как люди могли бы это использовать.
Signal Noise
Hem Patel и Christian Thumer рассказали об истории компании и ключевых проектах. Зачастую это узкоспециализированные темы, про которые они ничего не знают. Поэтому сначала изучают сами, а потом проводят рабочую сессию с экспертом в предметной области — убедиться, что правильно поняли и ничего не упустили.
ПРОДУКТОВАЯ РАБОТА
Trainline
Jan Srutek рассказал о работе продуктовой команды. Они работают в динамичном формате, выпуская 100-300 релизов в неделю. Это маленькие команды, работающие по OKR. Есть много agile-ритуалов, включая еженедельные демо и двухтрековый подход. Разрыв между 2 треками советуют держать 2-4 недели.
ТРЕНДЫ
Phantom
Яркая дизайн-студия, которая является официальным поставщиком Google (и частично работает у них в офисе). Они плотно работают над голосовыми интерфейсами с Amazon и Google. Alice Cappo рассказала об инсайтах и особенностях работы в этой теме.
Deepmind
Google купил Deepmind в 2014 году. Поначалу они были исследовательской компанией, не делали продукты, поэтому заказывали многое на стороне (в том числе у ustwo). Сейчас компания занимается несколькими новыми проектами. Dem Gerolemou рассказал о приложении Deepmind Health Streams.
Smart Design
Nathaniel Giraitis, Ruby Steel и Omar Bakhshi рассказали о подходе компании к инклюзивному дизайну. Они улучшают экстремальный сценарий, после этого используют наработки для всех пользователей. Smart Design называет это инклюзивной инновацией, а не просто адаптацией.
Пришлось ставить канал на паузу — сначала собирал, потом переваривал инсайты. В полной версии их больше.
P.S. По доброй традиции уже известны даты курса в следующем году — 10-14 августа 2020 года. Айда 🙂
#events #reports #fla
ОРГАНИЗАЦИЯ ДИЗАЙН-КОМАНД И ПРОЦЕССА
Progression
Jonny Burch работает над сервисом, где можно вести карты компетенций для дизайнеров. Тема горячая: дизайн-команды в продуктовых компаниях стремительно растут, а значит нужно думать об их внутреннем здоровье.
Societe Generale
Morgane Peng и часть дизайн-команды банка показала толковый фреймворк по работе со сложными менеджерами.
Clearleft
Andy Thornton сопоставил несколько моделей дизайн-менеджмента и получил интересные пересечения. В конце он презентовал свою модель зрелости по трём уровням (Aesthetic, Empathic, Strategic) и пяти аспектам (Who, When, How, Why, Where).
HUGE
Одно из самых известных в мире дизайн-агентств имеет неплохой офис в Лондоне. 3-4 года назад в компании был жёсткий период — люди перегорали, многие ушли. Нужно было сильно меняться изнутри и студия переизобрела себя.
Bulb
Команда устроила необычный воркшоп. Мы разбились на 5 команд и должны были спроектировать экраны продукта. Дальше нужно было сформировать дизайн-систему, которая поможет создавать похожие продукты. После этого мы передали её соседней команде и каждый должен был заново спроектировать все 5 продуктов на базе этой дизайн-системы. Подход здорово показал проблемы её отчуждаемости.
ПОЛЬЗОВАТЕЛЬСКИЕ ИССЛЕДОВАНИЯ
UserZoom
Lee Cooper и Jenna Smith представляют один из старейших и крупнейших сервисов удалённого юзабилити-тестирования в Лондоне. Они рассказали о продукте и компании в целом — помимо ожидаемых возможностей инструмента они консультируют клиентов по многим вопросам и даже могут выступать как UX-агентство.
UX В НИШЕВЫХ ОБЛАСТЯХ
Map Project Office
Компания работает на стыке физических и цифровых интерфейсов. Они участвовали в нескольких успешных запусках на Kickstarter и плотно работают с Google, Amazon, IBM и другим крупняком для поиска применений их новых технологий. Julie Arrive и Alex Hulme рассказали, как они экспериментируют и пытаются спрогнозировать, как люди могли бы это использовать.
Signal Noise
Hem Patel и Christian Thumer рассказали об истории компании и ключевых проектах. Зачастую это узкоспециализированные темы, про которые они ничего не знают. Поэтому сначала изучают сами, а потом проводят рабочую сессию с экспертом в предметной области — убедиться, что правильно поняли и ничего не упустили.
ПРОДУКТОВАЯ РАБОТА
Trainline
Jan Srutek рассказал о работе продуктовой команды. Они работают в динамичном формате, выпуская 100-300 релизов в неделю. Это маленькие команды, работающие по OKR. Есть много agile-ритуалов, включая еженедельные демо и двухтрековый подход. Разрыв между 2 треками советуют держать 2-4 недели.
ТРЕНДЫ
Phantom
Яркая дизайн-студия, которая является официальным поставщиком Google (и частично работает у них в офисе). Они плотно работают над голосовыми интерфейсами с Amazon и Google. Alice Cappo рассказала об инсайтах и особенностях работы в этой теме.
Deepmind
Google купил Deepmind в 2014 году. Поначалу они были исследовательской компанией, не делали продукты, поэтому заказывали многое на стороне (в том числе у ustwo). Сейчас компания занимается несколькими новыми проектами. Dem Gerolemou рассказал о приложении Deepmind Health Streams.
Smart Design
Nathaniel Giraitis, Ruby Steel и Omar Bakhshi рассказали о подходе компании к инклюзивному дизайну. Они улучшают экстремальный сценарий, после этого используют наработки для всех пользователей. Smart Design называет это инклюзивной инновацией, а не просто адаптацией.
Пришлось ставить канал на паузу — сначала собирал, потом переваривал инсайты. В полной версии их больше.
P.S. По доброй традиции уже известны даты курса в следующем году — 10-14 августа 2020 года. Айда 🙂
#events #reports #fla
Юрий Ветров об интерфейсах
Курс Future London Academy 2019 по UX и продуктовому дизайну
Конспект лекций и воркшопов лондонских дизайн-студий и продуктовых компаний: Huge, Map Project Office, Progression Pack, Phantom, Societe Generale, Deepmind, UserZoom, Clearleft, Smart Design, Signal Noise, Trainline, Bulb.
Под конец лета — мясная подборка свежих статей о пользовательских исследованиях. Методы, инструкции по настройке процесса и выбору инструментов, ну и работа с инсайтами, само собой:
1. Лучшая статья на тему внедрения базы знаний и инсайтов от Etienne Fang из Uber. Она рассказывает о предпосылках, первых шагах и ошибках, организационных особенностях раскатки — практичнее пока никто не писал.
2. Памятка по проведению юзабилити-тестирования для начинающих от Эмилии Городовых из Контура.
3. David Travis из UserFocus сравнивает уровень автоматизации методов пользовательских исследований сейчас и 16 лет назад. Он делит их данные на «худые» (количественные данные) и «жирные» (наблюдения и истории).
4. Jeff Sauro сделал обзор методов экспертной оценки интерфейсов, которые появились за последние 30 лет.
5. Alita Joyce из Nielsen/Norman Group объясняет разницу между формативными и суммативными пользовательскими исследованиями. В статье хорошие примеры вопросов исследования и соотнесение их с этими категориями.
6. Конфигурация простой UX-лаборатории от Michael Margolis из Google Ventures.
7. Дельные советы Jeff Sauro по выбору зависимых метрик для пользовательских исследований. В предыдущей статье он описывал виды переменных — https://measuringu.com/understanding-variables/.
8. Толковые советы Dan Brown из EightShapes на тему догоняющих вопросов в интервью с пользователями и заказчиками. Они позволяют найти больше инсайтов.
9. Инструкция Sarah Gibbons из Nielsen/Norman Group по созданию когнитивных карт вместе с пользователями. Они позволяют лучше понять их представление о теме или предметной области.
10. Stephanie Guaman из Facebook рассказывает о необычных методах пользовательских исследований.
Кстати, свежий дайджест уже почти готов и должен приехать к вам на следующей неделе.
#research
1. Лучшая статья на тему внедрения базы знаний и инсайтов от Etienne Fang из Uber. Она рассказывает о предпосылках, первых шагах и ошибках, организационных особенностях раскатки — практичнее пока никто не писал.
2. Памятка по проведению юзабилити-тестирования для начинающих от Эмилии Городовых из Контура.
3. David Travis из UserFocus сравнивает уровень автоматизации методов пользовательских исследований сейчас и 16 лет назад. Он делит их данные на «худые» (количественные данные) и «жирные» (наблюдения и истории).
4. Jeff Sauro сделал обзор методов экспертной оценки интерфейсов, которые появились за последние 30 лет.
5. Alita Joyce из Nielsen/Norman Group объясняет разницу между формативными и суммативными пользовательскими исследованиями. В статье хорошие примеры вопросов исследования и соотнесение их с этими категориями.
6. Конфигурация простой UX-лаборатории от Michael Margolis из Google Ventures.
7. Дельные советы Jeff Sauro по выбору зависимых метрик для пользовательских исследований. В предыдущей статье он описывал виды переменных — https://measuringu.com/understanding-variables/.
8. Толковые советы Dan Brown из EightShapes на тему догоняющих вопросов в интервью с пользователями и заказчиками. Они позволяют найти больше инсайтов.
9. Инструкция Sarah Gibbons из Nielsen/Norman Group по созданию когнитивных карт вместе с пользователями. Они позволяют лучше понять их представление о теме или предметной области.
10. Stephanie Guaman из Facebook рассказывает о необычных методах пользовательских исследований.
Кстати, свежий дайджест уже почти готов и должен приехать к вам на следующей неделе.
#research
Medium
The Power of Insights: A behind-the-scenes look at the new insights platform at Uber
In the late 20th century, the dominant technological question was “How do we learn better?” In the early 21st, that question has been…
Собрал дайджест продуктового дизайна за август 2019. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.
Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— Рассылка по почте
#digest
Напомню, что его можно получать разными способами:
— ВКонтакте
— Рассылка по почте
#digest
Августовский дайджест вышел в пятницу. Как обычно, в нём была подборка новых интерфейсных паттернов и описания того, как пользователи воспринимают информацию:
1. Page Laubheimer из Nielsen/Norman Group опровергает старый миф о доступности любой задачи в три клика. Она предлагает набор приёмов информационной архитектуры, которые помогут улучшить любую навигацию.
2. Virginia Start из Shopify разбирает разницу в формах адресных данных в разных странах мира. Она приводит варианты как отдельных полей, так и их группировки.
3. Kara Pernice из Nielsen/Norman Group описывает способы чтения текстов, которые практикуют пользователи в разных ситуациях. Про часть из них они публиковали отдельные подробные статьи (например, «слоёный пирог»).
4. Разборы интерфейсов встречи нового пользователя:
— Superhuman.
— Trello.
— Duolingo.
— Hopper.
— Tinder.
5. Anna Kaley из Nielsen/Norman Group разбирает правила и примеры создания хорошей страницы контактной информации на сайте.
6. Edward Scott из Baymard пишет о проблемах с промоблоком, призывающим установить приложение на мобильных сайтах интернет-магазинов. Бездумная реализация перекрывает процесс покупки и роняет конверсию.
А сентябрьский выпуск, как обычно, уже начинает копиться с первыми опавшими листьями.
#patterns
1. Page Laubheimer из Nielsen/Norman Group опровергает старый миф о доступности любой задачи в три клика. Она предлагает набор приёмов информационной архитектуры, которые помогут улучшить любую навигацию.
2. Virginia Start из Shopify разбирает разницу в формах адресных данных в разных странах мира. Она приводит варианты как отдельных полей, так и их группировки.
3. Kara Pernice из Nielsen/Norman Group описывает способы чтения текстов, которые практикуют пользователи в разных ситуациях. Про часть из них они публиковали отдельные подробные статьи (например, «слоёный пирог»).
4. Разборы интерфейсов встречи нового пользователя:
— Superhuman.
— Trello.
— Duolingo.
— Hopper.
— Tinder.
5. Anna Kaley из Nielsen/Norman Group разбирает правила и примеры создания хорошей страницы контактной информации на сайте.
6. Edward Scott из Baymard пишет о проблемах с промоблоком, призывающим установить приложение на мобильных сайтах интернет-магазинов. Бездумная реализация перекрывает процесс покупки и роняет конверсию.
А сентябрьский выпуск, как обычно, уже начинает копиться с первыми опавшими листьями.
#patterns
Nielsen Norman Group
The 3-Click Rule for Navigation Is False
While it is important to keep key information easily accessible, the 3-click rule is an arbitrary rule of thumb that is not backed by data.
Стабильный поток обновлений инструментов дизайна даёт хорошую жатву новостей. Подкопил за полтора дайджеста:
ProtoPie 4.0: В новой версии появились компоненты. Переработан интерфейс и освежился бренд. Курсы: Руслан Шарипов на Udemy и Meng To.
Sketch 57 и бета Sketch 58: Появился привычный по Figma и Adobe XD инструмент для работы с сеткой повторяющихся элементов — можно менять расстояние между столбцами и строками. В бете размер символов вроде кнопок наконец-то меняется автоматом при изменении текста и другого контента (разбор).
Плагины:
— Zecoda: Генератор кода на Vue.js из макетов Sketch.
Figma: Телеграм-канал @figmaplugin делает обзоры плагинов. У Саши Окунева есть памятка об их возможностях и ограничениях.
Статьи и памятки:
— Figma Help: Справочный сайт по работе с инструментом. Статьи, видео, разборы плагинов, обновления продукта.
— Adam Noffsinger из Dropbox рассказывает о том, как команда настроила шаблоны.
— Памятка Buzz Usborne из Help Scout по переезду со Sketch. Во что это выливается для дизайн-команды.
— Советы Philippe Hong по использованию — горячие клавиши и чуть менее очевидные функции.
— Советы по работе с иконками от команды Iconfinder.
Waves: Генератор волн в SVG для промо-сайтов. У них есть плагин для Figma.
UXPin 2.0: В ноябре появится новый интерфейс и улучшенные возможности прототипирования (взаимодействие по условию, состояния элементов), дублирование элементов а-ля Adobe XD.
Adobe XD: Августовское обновление. Переработанная панель плагинов, редактирование в Photoshop, расширенный экспорт кода и другие доработки интерфейса.
Artyline: Инструмент позволяет превратить скетч интерфейса мобильного приложения в примерный макет, а потом и интерактивный прототип.
Eyetato: Сервис обещает предсказывать тепловую карту eye tracking на основе данных тысяч проведённых ранее пользовательских исследований. Правда, схему движения взгляда он, конечно, не даст.
Userbility и UXtweak: Два новых сервиса для удалённого юзабилити-тестирования. Второй ещё с инструментами проверки информационной архитектуры.
Quill 2.0: Инструмент для иллюстраторов и аниматоров в виртуальной реальности от Facebook.
Codeimg: Сервис делает красивый скриншот кода для любой соцсети.
Flinto: Появился импорт из Figma и тёмная тема оформления.
Glorify: Простой редактор баннеров и промо-картинок для интернет-магазинов.
Nodes: Инструмент для визуализации данных и создания 3D-графики с помощью визуального программирования нодами.
Eagle: Инструмент помогает собирать мудборды на компьютере.
Epilepsy Blocker: Сервис помогает проверить интерфейс на безопасность для людей с эпилепсией. У них появился и плагин для Figma.
Vectormator: Векторный редактор для иллюстраторов на iPad.
Webflow: С помощью Lottie можно импортировать анимацию из AfterEffects.
VoxGun: Сервис для создания простейших промо-видео.
Glimpse: Ответвление редактора GIMP с новым брендом и интерфейсом.
Новые генераторы цветовых палитр появляются примерно каждые 10 минут. Muzli собрали наиболее полезные из них (а это уже более полусотни)
Brendan Mahony собрал десяток толковых расширений для Chrome для дизайнеров.
Как всегда, пара реально живых и тонна перспективных, о которых мы вряд ли вспомним через полгода.
#tools
ProtoPie 4.0: В новой версии появились компоненты. Переработан интерфейс и освежился бренд. Курсы: Руслан Шарипов на Udemy и Meng To.
Sketch 57 и бета Sketch 58: Появился привычный по Figma и Adobe XD инструмент для работы с сеткой повторяющихся элементов — можно менять расстояние между столбцами и строками. В бете размер символов вроде кнопок наконец-то меняется автоматом при изменении текста и другого контента (разбор).
Плагины:
— Zecoda: Генератор кода на Vue.js из макетов Sketch.
Figma: Телеграм-канал @figmaplugin делает обзоры плагинов. У Саши Окунева есть памятка об их возможностях и ограничениях.
Статьи и памятки:
— Figma Help: Справочный сайт по работе с инструментом. Статьи, видео, разборы плагинов, обновления продукта.
— Adam Noffsinger из Dropbox рассказывает о том, как команда настроила шаблоны.
— Памятка Buzz Usborne из Help Scout по переезду со Sketch. Во что это выливается для дизайн-команды.
— Советы Philippe Hong по использованию — горячие клавиши и чуть менее очевидные функции.
— Советы по работе с иконками от команды Iconfinder.
Waves: Генератор волн в SVG для промо-сайтов. У них есть плагин для Figma.
UXPin 2.0: В ноябре появится новый интерфейс и улучшенные возможности прототипирования (взаимодействие по условию, состояния элементов), дублирование элементов а-ля Adobe XD.
Adobe XD: Августовское обновление. Переработанная панель плагинов, редактирование в Photoshop, расширенный экспорт кода и другие доработки интерфейса.
Artyline: Инструмент позволяет превратить скетч интерфейса мобильного приложения в примерный макет, а потом и интерактивный прототип.
Eyetato: Сервис обещает предсказывать тепловую карту eye tracking на основе данных тысяч проведённых ранее пользовательских исследований. Правда, схему движения взгляда он, конечно, не даст.
Userbility и UXtweak: Два новых сервиса для удалённого юзабилити-тестирования. Второй ещё с инструментами проверки информационной архитектуры.
Quill 2.0: Инструмент для иллюстраторов и аниматоров в виртуальной реальности от Facebook.
Codeimg: Сервис делает красивый скриншот кода для любой соцсети.
Flinto: Появился импорт из Figma и тёмная тема оформления.
Glorify: Простой редактор баннеров и промо-картинок для интернет-магазинов.
Nodes: Инструмент для визуализации данных и создания 3D-графики с помощью визуального программирования нодами.
Eagle: Инструмент помогает собирать мудборды на компьютере.
Epilepsy Blocker: Сервис помогает проверить интерфейс на безопасность для людей с эпилепсией. У них появился и плагин для Figma.
Vectormator: Векторный редактор для иллюстраторов на iPad.
Webflow: С помощью Lottie можно импортировать анимацию из AfterEffects.
VoxGun: Сервис для создания простейших промо-видео.
Glimpse: Ответвление редактора GIMP с новым брендом и интерфейсом.
Новые генераторы цветовых палитр появляются примерно каждые 10 минут. Muzli собрали наиболее полезные из них (а это уже более полусотни)
Brendan Mahony собрал десяток толковых расширений для Chrome для дизайнеров.
Как всегда, пара реально живых и тонна перспективных, о которых мы вряд ли вспомним через полгода.
#tools
Medium
Meet ProtoPie 4.0: Accelerate Your Workflow with Components
Change the way you prototype in ProtoPie 4.0.