Тренды, системы и инструменты в продуктовом дизайне: 18 самых важных материалов за январь

Традиционный дайджест руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.

Шикарный обзор визуальных трендов года от Filip Triner.

Алан Клемент начинает 2018 год с одной из лучших статей года. Он говорит о том, что под маркой Jobs to Be Done продвигаются два разных подхода: общий прогресс в достижении жизненных целей (кем человек хочет быть) и более-менее конкретная активность (что хочет сделать).

Например, косметическая компания Revlon продаёт надежду стать лучше — это процесс без чётких границ, а избитый пример про то, как «люди покупают не дрели, а отверстия в стенах» ближе ко второму подходу. Это сложилось исторически: авторы ссылались на разные источники и решали разные задачи. Поэтому возникает путаница, что это переименованный анализ деятельности.

В другой статье Алан критикует Энтони Улвика за попытки запатентовать методику Jobs to Be Done. Хуже того, встречаются уже первые случаи преследования за это.

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

Александр Остервальдер рассказывает о 12-недельном инновационном спринте, которому обучает его компания Strategyzer. Он помогает проработать потенциальные новые продукты и получить раннее подтверждение, что они будут востребованы рынком.

Дизайнеры студии Looi собрали обзор хитовых проектов на Awwwards за последние 17 лет.

Майк Фредерик Зэтилоу перечисляет степени качества реализации индикатора загрузки, который помогает пользователям.

Инфографика-шпаргалка по методам и инструментам проектирования услуг от дизайн-команды Capital One.

Платформа UX Pin запустила каталог дизайн-систем Adele, который был анонсирован на конференции Clarity в ноябре 2017 года. Для каждой компании указано около 30 параметров, показывающих степень её зрелости.

Впервые у styleguides.io появился достойный конкурент. В каталоге отечественных дизайн-систем мы также планировали добавить степень развития платформы после сбора базовой информации, но в более простом и читабельном виде (кстати, недавно там появилась страничка «СКБ Контур»).

Из других свежих кейсов: рассказ Марии Мускато из HubSpot и пример единой реализации drag&drop от VMWare. Вообще в этом году особенно горячими должны стать две темы.

Во-первых, централизованная раздача переменных (или токенов) в разные технологические фреймворки. Они позволяют подружить не просто разные технологии (React, Angular и прочие), но и платформы — веб, Android, iOS. Недавно краткий обзор идеи сделал Луи Ченаис, хотя лучше всего её описал Натан Кёртис два года назад; кстати, обнаружился их генератор статического сайта.

Свежий пример генератора маркеров дизайна для веба и мобильных можно посмотреть у Нейта Болдуина. Design Systems Manager от InVision тоже умеет экспортировать переменные и иконки во всевозможные форматы, но такой код надо потом перерабатывать. Грядущее обновление нашей дизайн-системы Paradigm будет как раз про это — готовим вторую статью и примеры кода к публикации.

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

Как именно объединить два мира — вопрос на миллион, приходится поддерживать обе ветки параллельно (шаблон и фреймворк), здесь легко и непринуждённо появляются расхождения.

Но попытки появляются то тут, то там. Например, Джоэл Бесада из Tictail рассказывает о прототипе связки библиотеки компонентов на React и макетов в Sketch. Они собрали связку для своих задач, и на первом этапе она ещё сырая, но это важное подтверждение того, что в эту сторону можно и нужно двигаться.

В другую сторону работает библиотека от Seek — она генерирует файлы Sketch из HTML. Например, можно превратить в живой гайдлайн символы, чтобы связать компонентный фреймворк с макетами. Или плагин Shopify Telescope, который позволяет искать компоненты в их дизайн-системе Polaris не выходя из Sketch. В общем, впереди одиннадцать месяцев интереснейших новостей и технологий на эту тему.

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

• Свежие плагины Sketch: Timeline от Anima для создания анимации, экспорт макетов в Jira, Font Rapid для создания шрифтов, Gif Me для вставки GIF-анимаций в макеты, тёмная тема оформления. Статьи: памятка по созданию современной библиотеки символов в Sketch от Michael Fouquet из Hudl.
• Январское обновление Adobe XD: интеграция с Zeplin, Sympli и аналогичными инструментами, предпросмотр файлов в Dropbox. Издательство SitePoint выпустило в 2017 году книгу Дэниеля Шварца «Jump Start Adobe XD». UXmatters публикует вторую главу из неё, посвящённую основам прототипирования в инструменте.
• Marvel Design тоже становится инструментом дизайна интерфейсов, а не просто прототипирования — эту тенденцию не остановить.
• Новые официальные шаблоны Framer (iOS, Android, веб, wireframes).
• Rightware Kanzi — специализированный инструмент для дизайна автомобильных интерфейсов.

Рассказ британской студии Blind Ltd о работе над интерфейсами фильма Star Wars: The Last Jedi.

Оператор центра информирования граждан о чрезвычайных ситуациях на Гавайях случайно отправил массовое сообщение о ракетной атаке. Многие ссылаются на проблему в интерфейсе инструмента оповещения, и Джаред Спул неплохо разобрал ситуацию. Более-менее толковый обзор был также у Nielsen Norman Group, а Business Insider заметило ещё и хранящийся в открытом виде пароль.

Очередная инициатива InVision ― клуб дизайн-менеджеров Design Leadership Forum. Сейчас там пара десятков экспертов из Intuit, Lyft, Facebook, Google, Hulu, Samsung, Fox, Khosla Ventures и самого InVision, также они принимают и сторонние заявки. Обещают серию мероприятий: экскурсии, ужины и прочее.

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

Но в сфере цифровых продуктов действительно яркие истории внедрения дизайна на всех уровнях начались только в последнее десятилетие. Здесь нужны хорошие управленцы, так что в 2017 году было уже пять крупных конференций, не считая митапов и онлайн-мероприятий:

• LXConference — Сан-Франциско, 19-20 марта.
• UXSTRAT — Амстердаме, 10-12 июня и США, сентябрь.
• Leading Design — Лондон, осень.
• DesignOps Summit — Нью-Йорк, осень.
• Enterprise UX Summit — Сан-Франциско, 13-15 июня.

Я был на первых двух (LXConference вообще одна из самых полезных и сильных конференций, на которых я когда-либо был) и планирую как-нибудь добраться до Leading Design и DesignOps Summit.

Это шикарная возможность узнать, как работают другие дизайн-команды и пообщаться с коллегами по цеху. А ещё ― получить обратную связь по идеям из моей будущей книги по паттернам дизайн-менеджмента. Кстати, в ней есть много примеров того, как устроены дизайн-команды, и вот несколько свежих рассказов на тему: Amplitude, Google, Microsoft.

Коллекция паттернов игровых интерфейсов.

Джефф Саеро описывает результаты сравнительного тестирования сайтов крупных сотовых операторов, включая метрики NPS и SUPR-Q.

В первые дни года традиционно проходит самая эффектная технологическая выставка CES (Consumer Electronics Show). Хотя крупнейшие компании вроде Microsoft, Apple и Samsung стараются делать собственные мероприятия для важных презентаций продуктов и платформ, CES — толковый срез трендов в новых устройствах и форм-факторах.

Тут есть где разгуляться фантазии дизайнеров интерфейсов — то и дело увидишь материализацию какого-нибудь фантастического фильма. Что можно отметить:

Голосовые интерфейсы продолжают быть самой горячей темой (в США продано 39 млн устройств). Продолжилась война за партнёров между устройствами Amazon Alexa и Google Assistant — их встраивают в любую штуковину с питанием от электричества.

Amazon начал массовый захват рынка в прошлом году первый, Google подтянулся в этом. Правда, местами это выливается в производство бесполезных устройств — было показано много «умных» экранов, которыми мог бы быть любой дешёвый планшет.

А вот у Facebook не полетело — они закрыли своего виртуального помощника «M». Самое время почитать свежие статьи на тему проектирования голосовых интерфейсов:

• инструкция Марсио фон Мюлена по проектированию, разработке и тестированию навыка для голосового помощника Alexa;
• часть пятой главы из книги Кэти Перл «Designing Voice User Interfaces».

«Умные» часы теряют популярность вместе в с продажами (они снова слегка упали в третьем квартале). Было множество анонсов, из них интересен разве что «умный» браслет Sgnl, который позволяет говорить по руке: нужно просто приложить палец к уху.

«Умные» гарнитуры и наушники, наоборот, популярность набирают вместе с развитием технологий и инфраструктуры. Они вызвали ажиотаж ещё на CES 2014. В прошлом году получили новый всплеск интереса с анонсом Google Pixel 2, который переводит иностранную речь на лету, но анонсировали вещь и покруче. Некоторые считают, что будущие поколения Airpods от Apple тоже будут «умными». На CES было много устройств для слабослышащих. В общем, снова отсылка к статьям про голосовые интерфейсы.

Виртуальная и дополненная реальности остаются важны, но пока они сражаются за взрывной рост (все мечтают о новых смартфонах и компьютерах, но зря). Ещё с конца 2017 года с анонсами от Oculus и HTC то и дело показывают положительную динамику в решении изначальных проблем: провода, качество, сенсоры, способы управления и прочее.

Из интересных экспериментов с сенсорами:

• Tobii встроили в шлемы свой eye tracking;
• Looxid Labs встроили считыватель мозговой активности с помощью ЭЭГ.

Автомобильные интерфейсы последние годы показывают всё чаще, у каждого — широкий экран на всё торпедо, сыпятся баззворды про автономность, электричность и прочую хайтековость. В реальные машины это попадает дозировано, хотя General Motors планирует выпустить первое авто без руля в 2019 году.

Nissan экспериментирует с интерфейсами «мозг-компьютер» для водителя, а Harman — с интерьерами автономных машин и тем, что происходит с пассажирами в это время: их концепт Moodscape использует данные биометрии для управления звуком, освещением, проекциями.

Много интересных технологий, например: оптическое соединение нескольких мониторов, сенсор отпечатка пальца под экраном. Есть всякая дичь вроде устройств для легализованных вейперов и передачи запахов, а также криптомайнер от Kodak. Есть чем развлечься перед выходом нового «Железного человека». В следующий раз много интересного покажут на Mobile World Congress, который состоится 26 февраля 2018 года.

Kate Meyer описывает разницу в сценариях для качественного и количественного пользовательского тестирования.

Подробнейший чек-лист оптимизации производительности сайтов от Smashing Magazine. Можно скачать PDF.

Читайте полную версию дайджеста в моём блоге. В нём, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и прочего. За новыми ссылками также можно следить в группе на Facebook, «ВКонтакте» и в канале Telegram — спасибо всем, кто помогает их наполнять. Вы также можете получать свежие обзоры по почте.

#дизайн