Февраль '19

Конференции по дизайн-системам поняли ограниченность темы и переметнулись на общие вопросы по управлению дизайн-командами — DSConf из Хельсинки теперь Joint Futures.

Документальный фильм о дизайне с участием известных людей из профессии вроде Julie Zhuo, Natasha Jen, а также креативных и дизайн-директоров Google, Weiden+Kennedy, Headspace, Ericsson, Lyft, Sonos, Volvo, IKEA и других компаний.

Блог дизайн-команды Рамблера.

Отличный разбор плюсов и минусов сертификации для самих дизайнеров. David Travis и Anna-Gret Higgins провели опрос 249 специалистов и составили список прикладных применений полученных навыков.

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

• Умный браслет для обычных часов от Sony.

• Производители Android-телефонов массово добавляют отдельную физическую кнопку для вызова Google Assistant.

• Amazon позволили публиковать навыки для Alexa вообще всем пользователям.

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

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

Отчёт об использовании голосовых помощников в машинах. Доли рынка в США.

Группа исследователей Microsoft собрала гайдлайны по дизайну продуктов, использующих технологии искусственного интеллекта. Получилось 18 эвристик, которые достаточно удобно использовать в работе.

Издательство Harvard Business Review Press выпустило книгу Paul R. Daugherty и H. James Wilson «Human + Machine» о влиянии технологий искусственного интеллекта на рабочий процесс в марте 2018 года. Pabini Gabriel-Petit сделала неплохой обзор для UXmatters.

Ещё один генератор правдоподобных лиц может работать на основе вашей фотографии — можно менять выражение лица и другие характеристики.

В Барселоне проходит традиционная выставка Mobile World Congress по теме достижений мобильных технологий и прочей бытовой техники на пару с просто модными гаджетами. Здесь больше фокуса, чем на CES, хотя меньше уморительной дичи.

Естественно, главная тема года — гибкие экраны. Их, на удивление, меньше сотни.

1. Третий коммерческий гибкий телефон, Huawei Mate X. Экран у него единый, при складывании остаётся снаружи.

2. Oppo показали свой прототип, который подозрительно похож на Huawei Mate X.

3. Nubia показали обновлённую смесь телефона и часов с гибким экраном.

4. Полуживой прототип от TCL с интересными трансформациями. Чуть ранее они показали патент.

5. За несколько дней до MWC Samsung показали свой первый коммерческий гибкий телефон Galaxy Fold. Он, конечно, не самый компактный, зато его можно купить и он лучше первого продающегося гибкого телефона от Royole.

6. Комично выглядит затычка в виде двухэкранного телефона от LG, которые не успели на поезд гибких экранов. Nintendo DS на минималках.

Среди других телефонных забав были:

• Ультраширокие киношные экраны 21:9 от Alcatel и Sony.
• Дикий телефон размером с кирпич и батареей на 18 000 mAh от Energizer.
• Производители Android-телефонов массово добавляют отдельную физическую кнопку для вызова Google Assistant.

А ещё оказалось, что мобильная ОС KaiOS стала третьей по популярности в мире — на руках 80 млн телефонов. Она базируется на наработках Firefox OS и заточена под дешёвые кнопочные телефоны.

Вишенкой была презентация Microsoft Hololens 2 за день до открытия. Он стал значительно лучше по всем показателям — качество картинки, угол обзора, распознавание объектов и управление жестами без отдельного контроллера, отслеживание взгляда и управление им. Устройство ориентировано на компании, а не конечных пользователей.

В Unreal Engine 4 появится поддержка устройства. Нарезка ключевых моментов презентации (рвань!).

Ну и возродили Kinect для B2B-рынка.

После чёлочной идиотии безрамочных телефонов (в этом году даже они стали меньше) наконец-то пошла интересная движуха в мобильных интерфейсах.

На нашем конкурсе Mail.ru Design Cup дизайнеры решали задачу на тему почты для гибких экранов. На Dribbble тоже есть пара концептиков: Максим Гедрович, Kizuku Kitada и Александр Шевенёнов. Не все идеи интересные, но любые эксперименты на тему приближают нас к осуществлению эффектных картинок из брендовых видео, показывающих видение будущего.

17,3%

рост продаж смартфонов в России

61%

рост продаж умных часов в США

Толковый рассказ William Bengtsson о создании визуального языка для веба на основе веб-приложения Tink.

Хорошая подробная памятка по проведению сессий критики дизайна от Atul Handa. Процесс, правила хорошего тона и другие нюансы.

Памятка по проведению регулярных сессий дизайн-критики или ретроспектив от Rachel Krause из Nielsen/Norman Group.

Mia Blume описывает своё видение карьерной лестницы для дизайнеров как исполнителей и менеджеров.

Советы по правильному взаимодействию интерфейсных писателей с менеджерами продуктов и дизайнерами от Gene Shannon из Shopify. Толковые мысли про формирование ожиданий и хороший пример матрицы RACI для учёта заинтересованных лиц.

Неплохая модель зрелости от Jared Spool. Во-первых, он разделяет зрелость компании в целом и составляющих её дизайн-команд. Во-вторых, конечной точкой «взросления» команды является момент, когда базовые навыки дизайна есть у всех сотрудников.

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

Jeff Sauro подробнейше разбирает метрику CE11 от Gallup, которую Jared Spool рекомендует использовать вместе NPS. Это 11 вопросов про удовлетворённость брендом и готовность рекомендовать его — опросник появился в одно и то же время с NPS, но не стал популярным. Более распространённые UMUX-Lite и SUPR-Q дают более надёжные результаты.

Продолжение мощнейшего примера стратегического мышления при обновлении продукта для корпоративных пользователей от Burcu S. Bakioglu, Ben Basilan и JonDelina ‘JD’ Buckley из ADP Innovation Center. Во второй части они разбирают цепочку взаимосвязи метрик.

• Sara Soueidan показывает, как эффектно накладывать текст по маске на фон с текстурой через SVG-фильтры.

• Курс для дизайнеров от Meng To.

• Ещё один онлайн-курс для дизайнеров.

• JavaScript-библиотека для тонкой подстройки шрифтовой сетки на адаптивных сайтах.

• Советы по оптимизации загрузки шрифтов из Google Fonts от Sia Karamalegos.

• Эффектный скрипт для анимации переходов на промо-сайтах.

• Moisés Neto показывает скрипт, который позволяет менять цвет текста меню в зависимости от фона под ним.
• Скрипт для эффектной анимации открытия галереи.
• Yonatan Doron воссоздал в коде анимацию из мобильного приложения Facebook, подсвечивающую новые функции в интерфейсе.
• Chen Hui Jing показывает, как можно собрать презентацию в браузере на чистом CSS без всяких фреймворков.

• Скрипт анимирует поведение частиц внутри формы.
• Несколько скриптов для реализации необычных курсоров.
• Скрипт для анимации текста с эффектами искажения.
• Скрипт позволяет сделать псевдо-3D-изображение из обычного на базе WebGL.
• Chris Coyier собрал техники анимации «пузырей», модного в последние годы графического приёма.

Kathryn Whitenton даёт советы для тех, кто только начинает внедрять юзабилити-тестирование в компании и встречает первичное отрицание со стандартными вопросами «это слишком маленькая выборка» и «это какие-то неправильные пользователи».

Kate Kaplan из Nielsen/Norman Group показывает, как проводить пользовательские исследования для создания Customer Journey Map.

Karan Gupta из Dropbox описывает подход к работе с данными аналитики, пользовательских исследований и поддержки, которые дизайнеры используют в своей работе.

Jim Ross продолжает разбирать типичные ошибки при планировании и проведении пользовательских исследований.

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

Купили сервис для версионирования макетов Trunk для интеграции в инструмент. Читайте также учебник по работе с инструментом.

Выпустили учебник по анимации, помогающий собирать более интересные проекты в инструменте.

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

Коллекция иллюстраций-аватаров пользователей для ваших макетов.

Ещё один инструмент для совместной работы на «маркерной доске» в браузере в духе RealtimeBoard.

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

Простой сервис для создания скриншотов сайтов — даёте ему ссылку, он на выходе — картинку в окне браузера.

Сервис для прототипирования в дополненной реальности. Работает в браузере, есть предпросмотр на телефонах и планшетах.

Ещё один инструмент для передачи макетов разработчикам.

Приложение для Android помогает проверить точность сборки экранов. По сути работает как Zeplin, показывая параметры элементов интерфейса. Анонс.

• BillUI: генерирует вариации интерфейса с помощью алгоритмического дизайна. Можно выбрать параметры для экспериментов (цвет, радиус скругления, граница, тень) и получить быстрые наброски.
• This Person Doesn't Exist: генерирует правдоподобные лица несуществующих людей с помощью алгоритмического дизайна. Отдельный сайт с этими же фото.

• Anima 3.0 собрали все свои плагины воедино с возможностью делать достаточно мощные интерактивные прототипы с вводом данных и микро-анимациями.
• Динамичные стрелки для карт сайтов и переходов.

Получили ещё $40 млн инвестиций (суммарно в них вложили уже $82,9 млн). В ожидании новых рывков почитайте книгу Саши Окунева посмотрите бесплатные шаблоны или заранее подобранные шрифтовые комбинации.

Январское и февральское обновления. Развитие прототипирования голосовых интерфейсов, улучшение импорта из Photoshop и Illustrator, экспорт в AfterEffects, рост количества плагинов, доработки по ключевым функциям.

Онлайн-сервис (уже второй) позволяет вставить в макет устройство и на лету повернуть его в 3D нужным образом.

Erin Malone показывает несколько способов картирования для понимания сложных продуктов — от ментальной карты к кластерной и концептуальной.

Kate Kaplan из Nielsen/Norman Group показывает, как проводить пользовательские исследования для создания Customer Journey Map.

Станислав Хрусталёв продолжает серию шикарных публикаций о Customer Journey Map подробнейшим разбором клиентского опыта посетителя ресторана.

Вебинар Bruce Lawson со слепой Léonie Watson, где они наглядно показывают процесс использования приложения для чтения с экрана и проблемы сайтов в поддержке пользователей с ограниченными возможностями.

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

Сотрудники Центра цифровой этнографии в RMIT University Bjorn Nansen и Rowan Wilken исследовали, как дети взаимодействуют с интерфейсами мобильных устройств. Перевод от Usethics.

J. Henry McKeen продолжает рассказ о проблемах персонажей в сравнении с Jobs to Be Done.

Jared Spool критикует авторов книг о Jobs to Be Done за то, что они поверхностно рассказывают об исследовательской работе в ходе выявления потребностей пользователей. Из-за этого повторить успех красивых кейсов-примеров сложновато.

Alan Klement разбирает интерфейс LinkedIn в рамках Jobs to Be Done. Он говорит, что это отличный и яркий пример использования метода — соц.сеть чётко делит пользователей на 4 «работы» и грамотно продаёт каждую из них правильными словами и ценностью.

Alan Klement предлагает свою модель Jobs to Be Done, которая очень здорово и подробно описывает предпосылки возникновения «работы», процесс выбора и «найма» продукта. Наикрутейший и ультраполезнейший чеклист ситуаций, опирающийся на десяток существовавших до этого других моделей.

• Jonas Naimark из Google выложил шаблон для After Effects, облегчающий работу с анимацией в Material Design.

• MDX
• CodyHouse

• Emotion

Hayley Hughes и Yujin Han из Airbnb рассказывают, как команда дизайн-системы вовлекает коллег в её развитие. Это регулярные встречи, на которых можно прийти с проблемами и предложениями.

Val Head даёт советы по описанию анимации в дизайн-системах. Ключевые принципы, параметры и нюансы.

Alan B Smith показывает, как создавать компоненты с поддержкой разных тем оформления на базе фреймфорка Styled System.

Nathan Curtis предлагает подход для описания архитектуры дизайн-систем. На какие ветки они делятся, какие бренды поддерживают, что именно реализовано и на каких продуктах.