Июнь '17

Конференция LX Conference 2017 прошла 24-25 апреля в Сан-Франциско, США. Она посвящена дизайн-менеджменту и UX-стратегии (видео выступлений). Обзоры:

• Rahshia Sawyer из Capital One сделала беглый обзор выступлений со ссылками на видео.
• База знаний Polaris от команды WeWork — она собирает инсайты из пользовательских исследований в атомарном виде. Данные фейковые, но структура настоящая. Презентация и видео выступления Tomer Sharon о том, как и зачем она создавалась.

Конференция Enterprise UX 2017 прошла 7-9 июня в Сан-Франциско, США. Natalie Hanson сделала шикарный подробнейший конспект выступлений:

• Презентация Elizabeth Churchill из Google «Exploring Cadence: You, Your Team, and Your Enterprise» — как компания объединяет форматы и практики работы над дизайном на разных уровнях.
• Презентации Tricia Wang (Constellate Data), Robert Reimann (PatientsLikeMe) и Craig Villamor (AppDynamics) о масштабировании дизайна.
• Презентации Gretchen Anderson (Pacific Gas & Electric), Peter Merholz (Snagajob) и Kim Lenox (LinkedIn) о структуре дизайн-команд.
• Панельная дискуссия с историями того, как инсайт и его подача помогли «продать» идею.
• Презентации Mark Interrante (HPE), Ross Smith (Microsoft) и Ariel Kennan (администрация Нью-Йорка) о том, как выстраивалось кросс-функциональное взаимодействие.
• Выступления Kaaren Hanson (ex-Intuit), Bob Schwartz (GE) и Sam Yen (SAP) о том, как их компании менялись в отношении к дизайну.
• Презентация «Creating a Legacy: The Ultimate Experience» Mark Templeton из Citrix о том, как компания внедряла зрелые практики дизайна.
• Дополнительные материалы конференции.

В 2017 году пройдут две части конференции UXSTRAT 2017: 15-16 июня в Амстердаме и 18-20 сентября в Boulder, США. Она посвящена дизайн-стратегии и собирает мощный состав тематических спикеров. Презентации с европейской части конференции. Наиболее интересные презентации:

• Презентация Andrea Picchi из Sony Mobile, одна из лучших на европейской части. Очень толковый и практически полезный фреймворк UX-стратегии, который позволяет сопоставить конкретные изменения в продуктах и организации с выхлопом, который они дадут. Я веду свою серию по UX-стратегии к чем-то похожей модели.
• Презентация David Ruiz о запуске Orange Bank. Шикарнейший детальный кейс с описанием ключевых этапов по хронологии проекта и привязкой к общей UX-стратегии. Одна из лучших презентаций, которую я когда-либо видел.
• Barbara Koop из Funda рассказывала о модели метрик, которая используется в компании.
• У Dr. Friederike Schultz из McKinsey была в целом проходная презентация от консультантов про связку бренд- и UX-стратегии. Но на слайде № 65 бесценный подход с матрицей сопоставления принципов бренда и интерфейсных решений — наконец-то есть простой и понятный инструмент.
• Презентация Martin Kulessa из BMW о запуске каршерингового сервиса NOW и UX-стратегии, которой придерживались при работе над продуктом. Получилась достаточно годная модель зрелости.
• Nico Weckerle из Deutsche Telekom рассказал о UX-стратегии при работе над унификацией экосистемы умного дома. Хороший процесс с запуском пилота, простая и чёткая стратегия.

Обновился сайт Google Design.

В блоге Tilda собрали добротные выступления на TED, относящиеся к дизайну.

Julie Zhuo учит дизайнеров говорить «нет» в нужный момент и в нужном ключе.

Обзор книги Scott Faranello «Practical UX Design», которая вышла в прошлом году в издательстве Packt Publishing.

Флеш-моб на Reddit, в котором сообщество предложило самые ущербные подходы к интерфейсу регулировки громкости.

Carol J. Smith пишет о том, как UX-специалисту говорить на понятном клиенту языке. Она не считает зазорным не убиваться о том, что кто-то называет юзабилити-тестирование «фокус-группой» — зачастую лучше начать работу, а уже потом объяснить разницу.

Кирилл Улитин сделал крутейший анализ дайджеста продуктового дизайна за 7 лет — основные темы, ключевые слова, упоминаемые люди и компании и т.п. Вместе с названием (изначально всё называлось «Обзор свежих материалов по проектированию интерфейсов», позже перешло в более широкое «Дайджест продуктового дизайна») менялись рубрики (стало обширнее), степень фильтрации (меньше публикаций на совсем базовые темы), подход к подготовке (сотрудничество с vc.ru мотивировало к регулярности, а она мотивировала к упрощению подготовки), добавилась рассылка. На сайте UX Buzzwords есть интерактивная версия. Всегда хотел проанализировать архив выпусков, но не хватало времени и навыков.

На прошлой неделе количество подписчиков пробило 15 000 — новая планка для отечественных групп по дизайну в Фейсбуке (за исключением поиска работы).

Принципы дизайна интерфейсов виртуальной реальности от Yisela Alvarez Trentini.

Развитие статьи Josh Clark об этике современных продуктов, полагающихся на алгоритмы и машинное обучение.

Итальянское подразделение Ogilvy & Mather сделало алгоритмическую упаковку для Nutella. Они сгенерировали 7 миллионов паттернов для этикетки, тираж разлетелся за месяц.

Другие материалы об алгоритмическом дизайне:

• Исследователи из университета Беркли запустили «Призму наоборот» — она превращает работы известных художников в фотографии.
• Экспериментальный проект pix2code, который может сверстать сайт по статической картинке. Качество кода вряд ли подойдёт для реального использования, но направление интересное.
• Экспериментальный проект генеративного супрематизма.
• Интереснейший экспериментальный инструмент от университета Стэнфорда и Adobe, который значительно упрощает работу кино-монтажёра. Он сам предлагает готовый кусок фильма на основе отснятых сцен.
• Экспериментальный инструмент uKit AI от создателей uCoz движется в сторону The Grid и Wix ADI.
• В продолжение экспериментального проекта Quick Draw в Гугле научились рисовать человекоподобные скетчи иконок.
• Экспериментальный инструмент Sketchplore помогает работать с композицией макета.

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

Интересный взгляд Fortune на историю брендинга — они пишут о том, как цифровой продукт и интерфейс со временем стали определяющими для него.

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

Ежегодный прогноз трендов развития интернета от Mary Meeker из KPCB (избранное). Слайд № 188 посвящён росту количества дизайнеров в крупных компаниях — хороший индикатор зрелости отрасли.

Статья New York Times 1993 года, в которой поднимаются проблемы в использовании компьютеров, говорится о юзабилити и инициативах Microsoft и других компаний.

Коллекция старых сайтов с 1996 по 2005 год. Накоплено 800 примеров.

• Непрошенный редизайн профессионального инструмента для создания музыки Ableton Live от Nenad Milosevic.

Простой и симпатичный кейс работы над мобильным приложением от Eli Rousso.

Anwesha Samanta из Salesforce рассказывает, как проектировали аналитический сервис и облегчили пользователям поиск инсайтов среди сырых данных.

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

• Подборка кейсов использования дизайн-спринтов, которую курирует команда Google Ventures.

Методология Game Thinking предполагает использование опыта работы над играми при создании более привычных цифровых продуктов. Обзор методологии от Amy Jo Kim.

Scott Sehlhorst сделал отличный разбор целей работы по agile и выгод для продукта от этого. Как именно он помогает проверить продуктовые инсайты.

Выступление Кирилла Олейниказ Capital One на SXSW об их подходе к определению сильных и слабых сторон дизайнера.

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

Jessica Harllee рассказывает о формате ситуативных рабочих групп для решения сложных дизайнерских задач в Etsy. Мы используем похожий подход и он здорово показал себя.

Ещё о структуре дизайн-команд:

• Andrew Coyle рассказывает, как менялась структура дизайн-команды в компании Flexport.
• Tom Waterton рассказывает о рабочей атмосфере и внутренней культуре дизайн-команд IBM.
• Cap Watkins рассказывает о третьей версии описания дизайнерских ролей в Buzzfeed. Описание ролей.
• Alecsandru Grigoriu рассказывает, как его команда использует еженедельные встречи дизайнеров с пользой. В целом достаточно типичный подход, но интересен шаблон для фиксирования результатов встречи.

Pabini Gabriel-Petit пишет о том, как повысить вовлечённость продуктовой команды с помощью матрицы социальных потребностей. Концепция базируется на книге Paul Herr «Primal Management».

Jeff Sauro опубликовал результаты исследования NPS для 17 популярных профессиональных программ и веб-сервисов. Исследование говорит, что показатель SUS отвечает примерно за треть оценки рекомендующих продукт пользователей.

• Пошаговая инструкция Morten Rand-Hendriksen о создании адаптивной сетки с помощью CSS Grid, которую можно использовать на реальном проекте.
• Benjamin De Cock рассказывает, как собирает моднейшие промо-сайты Stripe средствами CSS.

• Conrad Irvin показывает, как использовать лигатуры и другие типографические приёмы стандартными средствами CSS.
• Параметрический шрифт Spectral от Google, который используется в их офисном пакете.

• Интересная анимация декоративного текста на CSS.

Ahman Shaheed показывает, как обрабатывать краевые ситуации в элементах интерфейса, когда реальный контент ломает их структуру.

Sonnie Sledge проверил, что происходит с известными сайтами при выключенном JavaScript — многие становится сложновато использовать.

Онлайн-курс по React для дизайнеров.

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

Caroline Jarrett и Naintara Land описывают плюсы, минусы и подводные камни создания собственной панели респондентов. Хорошая памятка для тех, кто готов.

Много говорится о том, что лабораторное юзабилити-тестирование имеет свои ограничения и подходит не для всех ситуаций, но разборы конкретных проблем случаются реже. Carine Lallemand и Vincent Koenig провели серию тестов и достаточно подробно описали конкретные проблемы в интерпретации поведения пользователей.

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

• Толковые советы Michael Morgan по упаковке результатов пользовательских исследований — так, чтобы они повлияли на продукт и продуктовую команду.

• Вышла версия 3.1.

• Интервью с командой создателей Framer о их новом поколении инструмента.
• Готовые шаблоны-паттерны типовых взаимодействий, позволяющие быстро начать работу над прототипом.
• Видео-курс.

Улучшена работа с плагинами (для автообновления не нужны сторонние утилиты) и много интерфейсного тюнинга (перевод).

Плагины и полезные статьи:

• Плагин Symbol Spacer, который позволяет сохранять стандартные отступы между элементами, используя Auto Layout. Как это работает.
• Плагин позволяет синхронизировать макеты с презентацией на Google Slides.
• Плагин Chromatic для создания гармоничных градиентов.
• Плагин UXperiment для создания интерактивных прототипов и проведения экспериментов на их основе.
• Плагин Looper 2.0 позволяет генерировать что-то вроде фракталов из простых форм.
• Emin Inanc Unlu наглядно проиллюстрировал принципы работы встроенной адаптивности в Sketch 44.

• Craft запартнёрились с Getty Images и запустили бесплатный фото-банк внутри плагина.
• Серьёзно обновилась Craft Library.

• В июньской бете наконец-то появились символы, включая переопределение состояния конкретной копии. Улучшена работа со слоями и градиентами.

Библиотека интерфейсных звуков от дизайн-команды Facebook. Лицензия позволяет использовать их только в прототипах. Советы по работе со звуком в интерфейсе от Will Littlejohn.

Антон Николов перечисляет пять подходов к организации информации: по местоположению, алфавиту, времени, категориям и иерархии. Перевод.

Занятная модель «тройного алмаза» от Nomensa — они добавили ещё один этап в начале, отвечающий за поиск ценности для пользователей и бизнеса.

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

Конспект сессий конференции Google I/O 2017, посвящённых написанию интерфейсных текстов. Во второй половине неплохой подход к формированию тональности бренда.

В прошлом году Rosenfeld Media выпустили книгу Steve Diller, Nathan Shedroff и Sean Sauber «Blind Spot: Illuminating the Hidden Value of Business». UXmatters публикует отрывок из неё, посвящённый современному процессу дизайна продуктов.

Команда Google Play и SKIM Analytics провели исследование поведения людей, играющих на мобильных. Они выделили 5 сегментов в зависимости от вовлечённости и социальности. Подход Jobs To Be Done Отличная сводная памятка по методике определения потребностей пользователей Jobs to Be Done от Анны Булдаковой.

Darius Contractor из Dropbox предложил необычный подход для оценки когнитивной нагрузки интерфейса — он оценивает все элементы интерфейса с помощью условной единицы «psych». Если цифра больше нуля — интерфейс хороший. Это чем-то похоже на модель «3 банок» от Google. Перевод.

Крутейшая модель классификации когнитивных искажений от Buster Benson. Он разложил их по 4 категориям — слишком много информации, недостаточно смысла, нужно быстро принять решение, избирательная память. Перевод.

Гайдлайны Slack по проектированию приложений и ботов для мессенджера.

В сентябре Smashing Magazine выпускают книгу Аллы Холматовой «Design Systems». Её можно пред-заказать и прочитать первую половину уже сейчас, плюс бесплатно доступна глава 2.

Другие новости дизайн-систем:

• Cathy Lo рассказывает о создании визуального языка для бизнес-сервисов Facebook.
• Nathan Curtis показывает, как можно применить методику OKR для планирования работ по дизайн-системе и приводит несколько условных примеров. Правда, годовой план противоречит изначальной идее динамичности, предполагающей задумывать на квартал.
• Max Stoiber описывает создание единой среды для компонентной дизайн-системы на базе React, которая объединяет веб, мобильные приложения и шаблоны в Sketch.
• Отличное интервью с Dan Mall о дизайн-системах. Много толковых мыслей о реальной работе над ними и подводных камнях внедрения.
• Audrey Hacq предлагает интересную метафору для модульных дизайн-систем — она сравнивает их с музыкой, где из базовых нот можно строить аккорды и мелодии, которые ещё и отличаются ритмом и настроением.

Microsoft опубликовали дизайн-гайдлайны по проектированию интерфейсов смешанной реальности. Анонс.

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

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

• Принципы дизайна Buzzfeed. Caitlin Osbahr рассказывает, как они создавались.

• Вышла watchOS 4. Из относительно явных интерфейсных изменений — список запущенных и недавних приложений превратился в вертикальную ленту.

Анонсирована iOS 11. На самой презентации WWDC деталей про обновление мобильной ОС было немного, зато в бета-версии видно, что стилистика приложения Apple Music становится основой визуального языка платформы:

• Крупные заголовки экрана и в целом уход от тонких шрифтов.
• Залитые иконки вместо контурных: наконец-то можно будет унифицировать Android- и iOS-приложения. Стали залитыми и круги вокруг цифр при наборе номера (а также скруглились в калькуляторе).
• Оркестровка анимации в духе Material Design: например, крупный заголовок превращается в кнопку «назад» при уходе вглубь навигации, а переход в информацию о приложении в магазине совсем уж похоже на то, что делает Google.
• Сочные изображения используются всё чаще: обновлённый AppStore теперь похож по компоновке экранов на Google Play (хотя экран приложения жутко перегружен).
• Все всплывающие слои строятся по принципу уведомлений и меню: например, написание письма в стандартном почтовом клиенте.
• Полноценная работа со скриншотами, включая их редактирование — здорово упростится жизнь тех, кто работает над продуктами.

Здорово, что после безликого iOS 7, которая скопировала проблемы Windows Phone и его тысяч однояйцевых приложений, у платформы появляется яркое лицо. iPad продолжает пытаться развиваться в сторону замены компьютера (drag&drop между двумя открытыми рядом приложениями, панель задач а-ля doc в MacOS, файловая система, расширенная работа с пером (ещё), хотя постоянное падение продаж в последние годы говорит о том, что развивается он не совсем туда. Единственное, что показывает проблески светлого будущего — появление почти полноценного аналога Affinity Photo. Из других интересных моментов: стандартная камера научилась читать QR-коды (что должно сделать их популярнее), развитие возможностей машинного обучения, запоздалое появление возможностей работы с дополненной реальностью, режим «не беспокоить» во время вождения, бесконечно уродливая панель быстрых настроек. Материалы для дизайнеров:

• Обновлённая главная страница гайдлайнов.
• Шаблоны для Sketch, Figma и Adobe XD от Great Simple Studio.
• Официальные шаблоны iOS для Adobe XD.

Рейтинг мобильных приложений российских банков для iOS от USABILITYLAB. Пятёрка лидеров: Тинькофф Банк, Банк ВТБ 24, Сбербанк, Альфа-Банк, Промсвязьбанк.

Raluca Bidiu из Nielsen/Norman Group описывает лучшие практики использования пошаговых помощников.

• Отрывок из свежего отчёта Baymard Institute, описывающий важность указания стоимости доставки и возможные способы это сделать.

Николай Бабич даёт советы по использованию крупных изображений в шапке сайта.

Отличный обзор сложности восприятия способов представления информации на дашбордах от Page Laubheimer из Nielsen/Norman Group.

Brad Ellis разбирает способы отказа от верхней панели навигации в мобильных — с современными размерами телефонов работать с ней непросто.