Май '17

Обзор трёх презентаций с американской части конференции UXSTRAT 2016 от Krispian Emert — она проходила 14-16 сентября в Providence, США.

Конференция по дизайн-менеджменту и UX-стратегии от Rosenfeld Media, которая пройдёт в Нью-Йорке 6-8 ноября.

UXPin и Rosenfeld Media проводят бесплатную онлайн-конференцию 13-16 июня. Снова достаточно мощный состав выступающих: John Zeratsky, Indi Young, Peter Merholz, Carol Smith, Josh Seiden и другие.

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

Интервью с Louis Rosenfeld, в котором он рассказывает о переходе от работы над проектами к развитию профессии в целом — они расширяют издательскую деятельность Rosenfeld Media и анонсируют новые конференции.

Dann Petty готовит фильм о дизайнерах-фрилансерах. Для этого он объездил Америку на микроавтобусе и записал кучу интервью с известными фрилансерами.

Опрос 300 фрилансеров на тему особенностей их работы и видения карьеры от компании And Co. Правда, как обычно не факт что релевантно для нашего рынка — 70% ответивших из США.

Сайт-каталог женщин-дизайнеров в Twitter. Как и для чего он делался.

Интервью с дизайн-командой 2ГИС на основе AMA. Новосибирский картографический сервис успешен в продуктовом плане и много времени уделяет развитию дизайна основного продукта, а также делает множественные экспериментальные приложения. Несколько лет назад они показали пример того, как можно сравнительно простыми средствами получить собственный шрифт. Кроме того, они организуют конференцию CodeFest в Новосибирске и поддерживают Серебро Набора, посвящённую типографике.

Erin Malone размышляет на тему того, как дизайн-менеджеру не забыть работу руками и не отрываться от реальных продуктовых дел. Она пытается восстановить навыки и делится опытом.

Adam Kopec из Hodinkee рассуждает на тему того, могут ли цифровые продукты иметь дизайн в духе нестареющей классики из мира физических предметов (например, Porsche 911). Изменения цифровых продуктов происходят так быстро и часто, что стили и модели работы с продуктами постоянно меняются. Парочка таких примеров есть — главная страница Google и новостная лента Facebook.

Tobias van Schneider обновил принципы дизайна Dieter Rams в соответствии с реалиями современного интернета.

• Amazon, eBay и Google Maps удалили свои приложения для Apple Watch. Последние, правда, обещают вернуть когда-нибудь. Отгремела первая волна приложений, во многом сделанных ради фичеринга, так что хайп постепенно откатывается к реальности.

• Антон Жиянов пробует описать основные сферы применения машинного обучения, которые имеют отношение к дизайнерам.

Обзор процесса проектирования голосовых интерфейсов от Lyndon Cerejo. Тональность и сценарии, обработка ошибок и отхождений от плана, лучшие практики.

Принципы дизайна интерфейсов для интернета вещей от Jared Porcenaluk. Толково расставлены акценты — эти интерфейсы утилитарны и не должны требовать слишком много внимания.

Группа энтузиастов собирается перевыпустить классические гайдлайны IBM от Paul Rand. За €30 можно получить печатное издание одного из лучших визуальных языков.

• На удивление толковый непрошенный редизайн Apple Music от Jason Yuan, который пытался устроиться в компанию, но не прошёл отбор.
• InVision собрали концепты мифического продукта Pied Piper из сериала «Кремниевая долина», которые выкладывались на Dribbble.

ИКРА и Одноклассники запустили методичку, которая собрала уйму методов решения проблем и затыков в работе над цифровыми продуктами. Это как полезные практики, так и просто упражнения для разминки.

Eric Morrow рассказывает, как IBM сделали игральные карты по дизайн-мышлению, которые помогают в проведении сессий ко-дизайна. Они планируют разложить их во всех переговорных, чтобы любые команды могли улучшить рабочие обсуждения. Правда, продолжение статьи водянистое.

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

Aurora Harley из Nielsen/Norman Group показывает, как перевести интерфейсные вопросы на язык аналитики и настроить отслеживание нужных метрик.

Глава дизайна бренда Intercom Stewart Scott-Curran рассказывает, как работает его команда. В продолжение темы:

• Drew Bridewell из LinkedIn рассказывает о том, как устроена дизайн-команда в компании.

Тема интеграции UX-практик в гибкий процесс разработки уже избита, но Paul McInerney из IBM неплохо структурировал опыт компании.

Ann F. Novelli рассказывает, как IBM тренирует фасилитаторов для распространения практик дизайн-мышления по всей компании. Это стало одной из ключевых идей масштабирования дизайна.

Советы по найму и развитию дизайнеров от главы продуктового дизайна Facebook Margaret Gould Stewart.

Natalie Hanson предлагает свою модель зрелости UX. В ней дизайн в компании развивается от не очень осмысленного к фокусу сначала на визуальной консистентности, потом на качестве пользовательского взаимодействия и в конце — целостной карте взаимодействия по всем каналам.

В продолжение темы:

• Jeff Sauro готовит свою модель зрелости UX. Для этого он проанализировал существующие модели, составил опросник на их основе и запустил на сотню компаний. Результаты будут опубликованы позже.

Хорошие примеры тестовых заданий от дизайн-команды WeWork. В них удачно описана проблематика и поставлены ограничения.

Шестая, финальная статья в серии про UX-стратегию на практике. Она посвящена осуществлению изменений в продуктах и компании. Это расширенная и доработанная версия презентации. Мало совершить подвиг в виде удачного редизайна устаревшего сервиса — нужно обеспечить повторяемость хороших результатов. Поэтому нужно думать о перестройке социо-технической системы, а не просто обновлении нескольких экранов. Причина плохих продуктов — это плохая машина, которая их производит, так что чинить нужно в первую очередь её. Шестая часть строится на идее паттернов дизайн-менеджмента и активно ссылается на предыдущие.

Jeff Sauro провёл исследование показателей NPS и SUS для дюжины известных productivity-сервисов. Отчёт платный и достаточно дорогой, но в статье есть основные выводы.

• Интересная формула для расчёта размера шрифта для чистой адаптивности от Jake Wilson. Размер окна браузера, конечно, пользователи изменяют редко, но такой гибкий подход позволяет заложиться на любые устройства и экраны.

• Ещё один онлайн-сервис для оптимизации кода SVG.

• Наглядная пошаговая обучалка CSS Grid от Jonathan Suh.

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

Сумасшедший пример визуального программирования от Mike Bostock, создателя популярнейшей библиотеки d3.js для визуализации данных. Он запустил d3.express, среду разработки и аналитики одновременно, которая позволяет пошагово перебирать и визуализировать данные — в таком формате работа по анализу радикально меняет свой формат.

Gregg Bernstein из Vox Media рассказывает о том, как они делают результаты пользовательских исследований постоянно доступными и наглядными всей продуктовой команде. Благодаря тому, что они всегда на виду, их инсайтами пользуются чаще.

Jeff Sauro разбирает пять основных техник кластеризации данных пользовательских исследований.

Наталья Бабаева из издательства МИФ показывает, как дизайнеру эффективно взаимодействовать с аналитиком для улучшения интерфейсов. Она показывает примерные шаги «взросления» диалога от получения бесполезных цифр до продуктивной работы через гипотезы.

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

• Вышла версия 2.2. Можно редактировать текст и объекты прямо во Flinto, так что экспериментировать станет проще.
• Перевод пошаговой инструкции по работе с Behavior Designer.

• Вышло приложение Figma Mirror для Android.
• Достаточно подробный разбор сильных сторон Figma от Tom Johnson.

• На Behance можно посмотреть примеры работ, созданных с помощью инструмента.

• Craft: Возможность создания интерактивных прототипов наконец-то вышла из беты. Связи между экранами создаются в Sketch, дальше всё экспортируется в InVision.
• InVision покупает TrackDuck, сервис для обсуждения макетов командой.

• После долгого перерыва разработчики анонсировали обновлённую версию.

Fabricio Teixeira описывает метод проектирования страниц storyframing. Вместо создания привычных wireframes, промо-сайт или подобная страница описывается кратким повествовательным текстом, включающим основные посылы, которые компания хочет донести до пользователя.

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

В новой версии появилась возможность более точно задать поведение элементов при адаптивности — к каким краям он залипает, как тянется по вертикали и горизонтали. Это работает и для объектов, и для артбордов (у которых появилась возможность быстро переключить размер). Возможно, это сделает Auto Layout не нужным, ведь он часто сбивает размеры и отступы между элементами. Также появилась возможность заменить недостающие шрифты, комментировать макеты в Sketch Cloud, обновились шаблоны для iOS. Перевод.

Свежие плагины и инструкции:

• Michael Spiegel показывает, как с помощью переопределения параметров копии символа можно раскрашивать набор иконок.
• Mirr — ещё один плагин, позволяющий собрать простой интерактивный прототип прямо в Sketch.

Framer переосмыслили инструмент и добавили туда свой Sketch. Теперь это полноценный продукт для дизайна и прототипирования с переключением между этими двумя режимами. Видео-демонстрация. Другие новости инструмента:

• Joe Day из Microsoft рассказывает, как использовать Framer на Windows. Речь, к сожалению, не о способе установки самого редактора.

Толковая пошаговая инструкция Kate Kaplan по составлению customer journey map. Это пять этапов по сбору инициативной группы, проведению исследований и созданию самой карты.

Вышла книга Jonathan Shariat и Cynthia Savard, посвящённая трагическим ситуациям в жизни, где дизайнеры не подумали и сделали ситуацию только хуже.

Продолжение новой редакции статьи Steven Hoober о том, как пользователи работают с мобильными телефонами.

Занятное пользовательско-психологическое исследование — около 1000 человек предложили решить морально-этические проблемы, пользуясь телефоном или компьютером. Пользователи телефонов делали лучший моральный выбор. Краткие выводы из исследования.

Интересный формат описания персонажей от Ben Ralph, учитывающий достаточно много деталей. Правда, мало кто из этих статей решает проблему использования персонажей после их создания.

В продолжение темы:

• Jeff Sauro подробно описывает грамотный процесс пользовательских исследований для составления персонажей. Правда, он так же не касается проблемы их дальнейшего использования.

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

Brad Frost сделал шаблон-заглушку для описания несложной дизайн-системы. Она предлагает типовую структуру для описания переменных, элементов и компонентов.

Christian Beck описывает своё видение уровней зрелости дизайн-системы: унификация на уровне макетов, унификация всей коммуникации продукта, унификация кода.

Сайт достаточно сильно обновился.

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

В продолжение темы:

• Интересный рассказ Alice Lee о создании нового единого стиля Wordpress, учитывающего многообразие пользователей.
• Meg Robichaud из Shopify продолжает описывает своё видение роли и задач продуктовой иллюстрации. В другой статье она говорит о нюансах работы с командой иллюстраторов в продуктовой команде.

Инициативная группа «Дизайн государственных систем» показала первые части дизайн-системы, которая должна унифицировать сайты государственных организаций.

На конференции Google I/O презентовали обновления Android. Дизайн-команда компании отметила наиболее интересные выступления.

Основные изменения технические, интерфейса касается всё что уже анонсировано раньше (наконец-то появились индикаторы обновлений на иконках приложений, новые эмоджи (не лучше старых), контекстные подсказки по работе с буфером обмена, улучшения области уведомлений). Теперь в платформу встроена упрощённая версия Tensor Flow, решающая задачи машинного обучения, очередное ускорение работы и уменьшение нагрузки на батарейку, новый мощный движок для 3D-графики. Самое приятное — в стандартные библиотеки добавлены многие стандартные анимации. Можно поставить бета-версию Android O. Появились библиотеки компонентов Material Design и онлайн-обучалки по их использованию: Android, iOS и веб. В офисе Google собрали большую рабочую сессию с толковыми местными дизайнерами, которые предложили много концептов приложений. Кстати, платформа используется уже на 2 миллиардах устройств. Интересно, что Google в фоновом режиме экспериментирует над версией Android, сделанном не на базе Linux. Она называется Fuchsia и недавно утекли экраны её интерфейса. Никаких планов и сроков по её поводу нет, поэтому картинки скорее для того, чтобы быть в курсе.

На конференции Build Microsoft показали следующее поколение дизайна Windows. Они назвали его дизайн-системой Fluent — она развивает текущий визуальный язык для того, чтобы объединить не только экранные интерфейсы, но и дополненную/виртуальную реальность. Если Material Design показал в своё время способ унификации для всего что имеет дисплей, то это следующий шаг в развитии визуальных языков.

Пока это просто одностраничник с рассказом об идеологии, плюс несколько новых страниц в гайдлайнах UWP (Universal Windows Platform). Но это и будет развитие UWP (уже есть шаблоны и тулкиты для многих дизайнерских инструментов — Sketch, Photoshop, Illustrator, XD и Framer). Интересно, как это отразится на дизайн-системе Office Fabric. В начале года утекли скриншоты её ранней версии под кодовым названием Project Neon. Они показывали возвращение эффекта полупрозрачности из Windows Vista и добавление типографических акцентов. Видео-демонстрация подтверждает это направление. Помимо этого и без того удачная работа с интерфейсной анимацией, которую Microsoft переосмыслил в 2010 году и здорово повлиял на рынок, стала ещё более бодрой. А также принцип масштаба, который важен для дополненной и виртуальной реальности. В своё время metro-дизайн изменил интерфейсы более современным и органичным для цифровой среды подходом и определил несколько ключевых принципов, которые подхватили Google и Apple — фокус на контенте вместо декора, особая роль анимации. Правда, мобильная Windows не смогла тягаться с лидерами, а десктопная упростила интерфейсные подходы в Windows 10. В новом поколении Microsoft добавил к своим изначальным идеям удачные мысли Material Design, так что новое поколение визуального языка должно стать ещё интереснее. Тем более, что с новым циклом обновлений раз в полгода это не останется пустым прожекторством, как часто случалось раньше. Официальная группа в LinkedIn.

Памятка Amy Schade из Nielsen/Norman Group по использованию ссылок-якорей внутри страницы. У них есть много потенциальных проблем и статья рассказывает, как избежать их.

Michelle Venetucci Harvey разбирает разные способы представления аватаров по-умолчанию, когда неизвестен пол пользователя.

Антон Николов описывает интерфейсный принцип IKEA — как вовлечь пользователей через несложные действия по настройке или заполнению личных данных.

Justin O’Beirne продолжил своё сравнение карт Google и Apple. В течение года он собирал скриншоты обновлений нескольких кусков востребованной территории.

• Обновлённый отчёт о качестве страниц товара от Baymard, прошлая версия которого вышла два года назад.
• Важность фотографий товара, наглядно показывающих его габариты. 56% пользователей в их исследованиях сразу же начинали изучать фото на карточке продукта, многие ожидали увидеть размеры.

Советы Amy Schade из Nielsen/Norman Group о том, что делать с большими картинками в мобильной версии.

Николай Бабич описывает принципы проектирования добротных интерфейсов страниц с длинной прокруткой.

Ещё пара свежих статей от него:

• Плюсы и минусы основных способ организации навигации в мобильных приложениях.
• Памятка по лучшим практикам проектирования мобильных интерфейсов.