​19-21 мая прошла ежегодная конференция Microsoft Build 2020. Как и вся жизнь в этом году, в онлайне.

Большинство выступлений посвящено разработке, но дизайн-команда сделала обзор текущего состояния дизайн-системы Microsoft Fluent UI, которая заменила в том числе Office Fabric UI.

Во-первых, кросс-платформенные библиотеки для React, iOS и MacOS, Android, React Native и Windows. Обещают поддержку токенов для тематизации.

Во-вторых, шаблоны для Figma. Android, iOS, веб и пиктограммы.

Сама идеология Fluid станет основой и для модульных документов в MS Office.

На самом деле это все новости и на подробный разбор не тянет. Поэтому ловите подборку видео с милыми щенята…, ой, продуктовыми видео в обёртке визуального языка Fluent Design. Это один из самых ярких и передовых подходов к брендингу цифровых продуктов на текущий момент. Причём Microsoft смогли сделать это во второй раз после революции с Metro-дизайном, который уничтожил опереточный скеоморфиизм:

— Meet the new icons for Office 365
— Microsoft Fluent UI
— Microsoft Fluent Design System
— Power and simplicity
— Dark Mode in Microsoft 365
— Imagining Collaboration with the Microsoft Fluid Framework
— Tasks in Microsoft 365
— Re-imagining Microsoft’s mobile experiences
— The Microsoft Office app
— Introducing Microsoft Editor
— The new Yammer in Microsoft 365

Большая подборка видео есть в их Vimeo и Instagram. А вообще следить за этой бесконечной крутотой можно на Behance и Dribbble. Читать лучше всего на сайте Microsoft Design или их Medium. Ну и Facebook с Twitter на сдачу.

Ну и вопрос на подумать: приблизились ли они к видению будущего 2019 года, которое представляли в 2011 году?

#designsystems

​Свежая подборка памяток о том, как делать интерфейсы правильно, чтобы не делать неправильно. Паттерны, лучшие практики и вот это вот всё:

1. NN/g: проблемы интернет-магазинов с доставкой продуктов, которые вскрылись во время карантина и нереального спроса. Как учитывать такие пограничные ситуации.

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

3. Редизайн сложной таблицы с интересным взаимодействием.

4. NN/g: три вида поведения пользователей при поиске информации: получить, сравнить или выбрать, понять, простить (не, на самом деле без этого).

5. Baymard Institute: актуализировали своё исследование интернет-магазинов.

6. Accessibility в визуализации данных на базе движка D3.js. Более общие советы.

7. Andy Clarke: журнальная вёрстка в вебе в духе Max Huber.

8. Adam Silver: единое поле ввода для сложных числовых данных или разделения на несколько? В большинстве случаев лучше работает общее.

9. Jeff Sauro и Jim Lewis: сравнительное юзабилити-тестирование сервисов для видео-звонков. Как пользователи оценивают их по метрикам UMUX-LITE и NPS.

10. NN/g: анализ китайских сервисов для оплаты по лицу в магазинах и кафе. Это пока ещё непривычное решение и оно вызывает много вопросов у пользователей.

11. Usethics: проектирование информационных киосков с сенсорным управлением. У них сильно различаются экраны и физическое расположение, что приводит к большому разбросу ситуаций.

12. Ahman Shadeed: промежуточные состояния адаптивности, которые лежат между популярными точками разрыва.

13. NN/g: представление информации в интранетах компаний о ситуации с пандемией и удалённой работе в целом.

14. NN/g: свежее исследование скорости работы сайтов, которое они делают уже 23 года. Всё плохо — несмотря на увеличение скоростей доступа, сами сайты грузятся также долго (теперь из-за плохой оптимизации кода). Она приводит серию выкладок из экспериментов компаний, показывающих плохое влияние на конверсию.

А я пока пошёл собирать следующий мини-дайджест.

#patterns

​Маленький, да удаленький выпуск про дизайн-менеджмент:

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

2. Figma: Все способы синхронизации дизайн-команды. Регулярные встречи, сессии дизайн-критики, совместные выезды, обучение и другие форматы.

3. DocDoc: Два подхода к дизайн-менеджменту. Надзиратель, который микро-менеджит команду, и яблочное дерево, когда руководитель помогает ей развиваться и расти.

4. NN/g: Использование половины двойного алмаза для процесса найма. Он и так происходит в таком формате, но аналогия интересная.

5. Ситимобил: Процесс найма. От отбора и собеседований до тестового задания.

6. Marcelo Somers: Гибкость в работе над клиентским опытом. Какие организационные способности должны быть у организации, чтобы реагировать на быстрые изменения рынка.

7. NN/g: Опрос дизайнеров интерфейсов и дизайн-менеджеров на тему их понимания DesignOps.

Кстати, можно докупить записи онлайн-конференции «Паттерны дизайн-менеджмента», на которой я и другие крепкие дизайн-менеджеры из Wargaming, DocDoc, Vectorly, Rambler Group и МТС рассказывали о своё опыте управления командами.

#designmanagement

10 лет назад вышел первый выпуск дайджеста продуктового дизайна в виде статьи. Тогда он назывался «обзор свежих материалов по проектированию интерфейсов» и только перекочевал из супер-технологичной соцсети Friendfeed (которую позже купил и убил Фейсбук). Этот материал я изначально сделал для рассылки и сайта «Юзабилити-бюллетень», но там были заминки с публикацией, так что выложил у себя в блоге и на Хабре, когда он был ещё тот.

​Я и так давно читаю большой поток статей о дизайне интерфейсов. В какой-то момент начал делиться ими в соц.сетях, потом в статьях-подборках, а потом и через другие каналы. Неожиданно это оказалось полезным большому количеству людей :) Поэтому когда спрашивают о том, как у тебя хватает сил вести это, я повторяю примерно один и тот же посыл — 80% этого времени я тратил бы на профессиональное самообразование и без дайджеста. А за оставшиеся 20% успеваю упаковать это наружу. Идея кураторства контента тогда только взлетала, так что удачно попал в начало тренда.

За 10 лет вышло 99 выпусков (в понедельник появится сотый). Сложно посчитать, сколько ссылок за это время накопилось. Но в 2017 году Кирилл Улитин собрал крутой анализ публикаций и даже запустил сайт на его основе. На тот момент за 7 лет в 59 дайджестов вошло 7875 ссылок. Костяк рубрик остался тем же, но по мере развития профессии добавлялись новые (например, дизайн-системы и гайдлайны, дизайн-менеджмент, брендинг цифровых продуктов).

Менялись и способы доставки. Начал вместе с Алексеем Ивановым во Friendfeed в 2009 года, потом перешёл в Facebook в 2011. Первая статья-обзор вышла в 2010 году в блоге и на Хабре, в 2014 появился компактный формат для vc.ru. В 2015 появилась рассылка, а в 2017 — Телеграм и ВК. Я долгое время ленился и сопротивлялся этому, но смерть Фейсбука как надёжного инструмента (привет садо-мазохистам со ссылкой в первом комментарии) и удача стратегии Buzzfeed c мета-платформенностью помогли посмотреть правде в глаза.

Меня часто спрашивают, сам ли я веду дайджест. Да, зря сомневаетесь :) Общий подход «фоновых исследований» описывал в 2014 году, модель в целом актуальна (видео). Это около часа в день, причём, как и говорил выше — 80% или 48 минут из него и без дайджеста уходила бы на проф.развитие.

Но есть много людей, которые помогали развивать его в разное время:
— Саша Орлов, который сделал текущую стилистику на базе кинетической типографики.
— Редактор «Сетка», команда которого предоставляет платформу и помогает с вёрсткой.
— Вова Рудных, который написал парсер из Фейсбука в черновик статьи, экономивший тонну времени.
— Женя Мальков, который помог развить Телеграм и ВК до текущего флагманского состояния.
— Лёша Иванов, который пригласил вести самый первый подход во Friendfeed.
— Гена Драгун, Антон Олейник, Паша Скрипкин, Дима Подлужный, Антон Артёмов, Денис Ефремов, Лёша Копылов, Тарас Бризицкий, Евгений Соколов и многие другие, кто присылал свои материалы.
— Володя Хропов и, кажется, Денис Москалец, которые помогали с хостингом долгие годы.
— Команда vc.ru, которая помогает с публикациями на площадке.
— Коллеги из Mail.ru Group и Райффайзенбанка (Божена, Паша, Лиза и наверняка кого-то ещё забыл), которые помогали верстать версию для Хабра с его бесчеловечным редактором.
— Майя, которая всё это терпит и поддерживает :)

Спасибо вам! И тем, кого мог забыть упомянуть. И тем, кто благодарил за эту работу, потому что много раз хотелось соскочить и только убеждённость, что дайджест помогает проф.сообществу не давала нажать рубильник :)

Не знаю, в каком формате дайджест окажется в 2030 году. Но если я всё ещё буду заниматься дизайном интерфейсов, то он точно будет выходить :) Сейчас (пальцем в небо) оценкам его суммарно читают порядка 250 000 человек на разных площадках. Не забудьте подписаться на них:
— Телеграм: 30 000
— Facebook: 19 500
— Рассылка: 5000
— ВК: 210 000
— Дайджест в блоге: 4000 в месяц
— VC: 4000 в месяц
— Хабр: 2000 в месяц

#digest

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

Кстати, это сотый выпуск! Около 10 000 ссылок за 10 лет. Предыстория и благодарности всем, кто помогал в разные периоды. Сейчас его суммарно читают порядка 250 000 человек на разных площадках:
— Телеграм: 30 000
— Facebook: 19 500
— Рассылка: 5000
— ВК: 210 000
— Дайджест в блоге: 4000 в месяц
— vc.ru: 4000 в месяц
— Хабр: 2000 в месяц

#digest

​Съешь этих мягких французских булок, да выпей чаю. Это приветственное предложение ничего не значит и не имеет отношения к подборке о пользовательских исследованиях, но с большой долей вероятности привлекло ваше внимание:

1. Joom: Три проблемных способа интеграции пользовательских исследователей в продуктовых компаниях: они проводятся только силами дизайнеров и менеджеров либо только внутри UX-лаборатории, а где-то и вовсе не существуют.

2. Jeff Sauro и Jim Lewis: Как опредлить процент успешно завершённых сценариев в удалённом немодерируемом юзабилити-тестировании. Они предлагают аппроксимацию из ответов на SUS и SEQ.

3. Jim Lewis и Jeff Sauro: Сравнительное исследование корпоративного ПО. Они сравнили их по метрикам SUS и NPS.

4. NN/g: Опрос UX-специалистов на тему проведения разведочных пользовательских исследований.

5. Steve Bromley: Приложил методы пользовательских исследований к основным этапам модели двойного алмаза. Как и на какой стадии проверить гипотезы.

5. Rachel Miles: Airtable для хранения находок из пользовательских исследований. Она базируется на старой инструкции от самого сервиса.

6. Deliveroo: Архив отчётов о проведённых пользовательских исследованиях. Они пошли простым путём — сделали хорошо организованный список, не стали делать выдержки конкретных находок.

7. NN/g: Разница между шкалой Лайкерта и семантическим дифференциалом. Это два популярных вида вопросов с градацией ответов в пользовательских исследованиях.

8. Jeff Sauro и Jim Lewis: Обзор своих выкладок о нюансах использования шкал опросов.

9. ELEKS: Грамотные вопросы на интервью с пользователями в ходе исследований.

10. Paul Boag: Методы тестирования дизайн-концептов.

Но раз уж вы прочитали этот выпуск, то чаю утром понедельника заварить можно :)

#research

​В этом году традиционная Google I/O сначала перешла в онлайн-формат, а потом и вовсе отложилась из-за протестов. Поэтому бета-версия Android 11 появилась относительно тихо. Больших прорывов нет, но много разной оптимизации:

1. В списке уведомлений разделили разговоры с людьми и всё остальное от приложений. Плюс есть история уведомлений за сутки.

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

3. Новая панель управления умным домом позволяет видеть всё на одном экране.

4. Доработали и упростили доступ к скриншотам — как и многое другое, оно теперь как в iOS.

5. В режиме многозадачности теперь тоже можно сделать скриншот.

6. Плавающие чаты вроде как запускали год назад в Android 10, запускают и в Android 11 (причём поддерживает их пока только Facebook).

7. Улучшение подсказок при печати на клавиатуре — появилось автозаполнение из данных одного приложеня в другом.

8. Управление голосом через Voice Access творит настоящие чудеса — можно просто называть элемент на экране.

9. Сторонним приложениям ещё сильнее ограничили доступ к телефону — многие вещи можно разрешить только при его использовании.

Обзоры от Engadget и The Verge.

Google опубликовали несколько видео к этому тихушному запуску:
— What's new in Android
— What's new in Design Tools
— What's new in System UI
— Screens — large, small and foldable

Финальная версия появится осенью. Уже можно поставить бету.

#materialdesign #designsystems #googleio #events

​Вчера Apple показали iOS 14 на WWDC 2020, которая, как и всё остальное в этом году, прошла в онлайне. Традиционно подсветил обновления, которые касаются дизайнеров интерфейсов:

iOS 14:

1. Виджеты на главном экране. Теперь, как и на Android, его легко замусорить. Давний закон гласит: 95% пользователей не настраивают интерфейс (и редко меняют предустановленные производителями устройств настройки). Гайдлайны.

2. Siri не перекрывает экран, а показывает фирменный абстрактный знак внизу и плашку с результатом вверху.

3. Звонки также не перекрывают экран, а показываются в виде плашки вверху.

4. Мини-версии сайтов и приложений без установки по QR-коду или NFC. Предполагает помощь в простых действиях вроде зачисления баллов в программе лояльности кофейни, где лень ставить приложение. Правда, это работает только со своим форматом QR-кодов, а значит вряд ли получит нормальный охват. Гайдлайны.

5. Наглядная информация о собираемых приложением данных (примерно как пищевая ценность продукта).

6. Открытие машины с телефона, которое постепенно поддержат крупные автопроизводители.

7. Режим «картинка в картинке», позволяющий свернуть любое видео до маленького размера и перемещаться между приложениями.

8. Можно будет сменить браузер и почту по умолчанию, что немного повысит охват сторонних клиентов.

9. Экран умного дома лучше показывает текущий статус устройств.

iPadOS 14:

1. Постоянная боковая панель навигации, что ещё ближе к десктопным приложениям.

2. Универсальный поиск в духе spotlight.

3. Распознавание рукописного текста и фигур.

watchOS 7:

Позволяет комбинировать информацию из нескольких приложений на экране. Развитие возможностей отслеживания здоровья и помощи в занятиях спортом. Из актуальной повестки: смотрит, насколько эффективно моете руки.

macOS:

Обновление интерфейса, делающее его ещё немного визуально ближе к iOS.

И ещё на шаг назад к скеоморфизму — иконки приложений теперь с мусорными тенями и детализацией (ой, не тот скриншот), а ползунки получили объём. Маятник дизайнерских трендов неумолим, даже если с ним выплёскиватеся самоуважение к принципам, о которых ты рассказывал с пеной у рта ещё позавчера. Тот неловкий момент, когда даже неоморфизм не так плох.

Бета-версии уже можно поставить, а финальные выйдут, как обычно, в сентябре. Это чутка поинтереснее и полезнее Android 11, который запинали под ковёр.

#ios #trends #events

​Карантинные месяцы крутятся, книжки мутятся. Плодовитые интерфейсные издательства выдали новую порцию занятий на удалёнке:

1. Второе издание Aarron Walter «Designing for Emotion». Добавлены главы о приватности, инклюзивности и безопасности.

2. Предзаказ на Chris Avore и Russ Unger «Liftoff! Practical Design Leadership to Elevate Your Team, Your Organization, and You». Она посвящена базовым практикам дизайн-менеджмента по управлению командой и выйдет 20 июля.

3. Paul Boag «Click!» о лучших паттернах и практиках для повышения конверсии и других бизнес-метрик. Выдержка из главы о тёмных паттернах.

4. Jim Kalbach «The Jobs To Be Done Playbook». UXmatters и A List Apart публикуют выдержки из главы 4 и 5.

5. Scott Berkun «How Design Makes the World» о роли дизайна в повседневных предметах и явлениях. Интервью с ним.

6. Stephen Anderson и Karl Fast «Figure It Out» о концептуальном проектировании. A List Apart публикуют выдержку из главы 8.

7. Jon Yablonski «Laws of UX». Она посвящена базовым законам пользовательского взаимодействия с разбором на примерах. Выдержка из неё.

8. Дизайнерские кроссворды и другие увлекательные забавы для карантина в «The UX Activity Workbook» от Zak Rowling.

9. Luke Wroblewski «Mobile First» теперь доступна бесплатно в онлайне.

А вот что на подходе у Rosenfeld Media:
1. Caroline Jarrett «Surveys That Work»
2. Diana Deibel и Rebecca Evanhoe «Conversations with Things. UX Design for Chat and Voice»
3. Christian Crumlish «Product Management for UX Designers»

Если вы, конечно, не спустили всё внезапно появившееся свободное время на кинчик :)

#books

​Восемь лет я собираю примеры алгоритмического дизайна. Это инструменты, которые должны (были) упростить построение интерфейса, подготовку графики и контента, а также персонализацию продукта (оригинальная статья). Три года назад я запустил сайт-коллекцию и регулярно делал мини-подборки интересных экспериментов и инструментов.

Но в прошлом году тема потихоньку сдулась — возможно, вы заметили, что я давно не делал свежих подборок. Причины три:
1. Обещания были сильно завышены, смехотворно малый процент пошёл дальше концептов.
2. То, что реально работает, быстро начинает восприниматься «а что тут такого, так и должно было быть всегда».
3. Человеческий труд, к сожалению, бывает дёшев и проще нанять пачку дешёвых фрилансеров с Fiverr, чем писать сложные технологические решения.

Самостоятельных инструментов толком не появилось — команды долго пилили их на деньги инвесторов, но за годы научились делать только самые примитивные вещи. Сто двадцать пятый конструктор промо-сайтов или генератор логотипов больше не выглядят прорывом — ни по факту, ни как прокапывание новых территорий. Короче, аналог Autodesk Dreamcatcher для цифрового дизайна не случился, а эту модель все считали как основную. Реальный прогресс есть в улучшении массовых продуктов от Adobe (они поставили внедрение реально прорывных функций на поток) и Microsoft (много важных улучшений в MS Office). Поэтому главное событие в мире алгоритмического дизайна — секция Sneaks на Adobe MAX. Эти эксперименты постепенно попадают в основные продукты.

Примеры из коллекции:
— Айдентика и логотипы: Brandmark и LogoJoy
— Конструкторы сайтов: uKit AI
— Adobe: десятки экспериментов на базе платформы Sensei, многие из которых вошли в массовые продукты

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

Примеры из коллекции:
— Einstein Designer
— Netflix (продолжение)
— Oi
— Nutella Unica
— Bubble Comics
— This Person Doesn't Exist
— Alibaba и их LuBan
— Яндекс Маркет

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

Примеры из коллекции:
— Airbnb: Sketching Interfaces
— Генераторы интерфейсов: UI Bot и плагин для Sketch BillUI
— Логотипы: LoGAN
— Анимация: Photo Wake-Up
— Фото: Nvidia GauGAN

Четвёртая категория — это банальное шарлатанство, когда ключевые слова «нейросеть», «искусственный интеллект» или «машинное обучение» добавляют к прозаичным решениям типа генераторов цветовых палитр. А то и вовсе врут, привлекая внимание к простейшему алгоритму. Таких примеров на Product Hunt хватает.

Такое в коллекцию не попадает.

#ai #algorithms

​В приличном обществе в анонсах алгоритмического дизайна принято показывать технологическое обоснование — абсолютное большинство дельных экспериментов делают это. Многие публикуют код на GitHub. Кто-то показывает видео рабочего процесса с инструментом. Шарлатанам достаточно пресс-релиза или пустого видео-ролика с изображением культурных кодов «умная штука» — примерно как показывали хакеров в фильмах 90х, взламывающих сервер по IP в адресной строке браузера.

Жаль, что у многих СМИ и дизайнеров отсутствует критическое мышление и проверка фактов. При том что на рынке полно примеров надувания пузыря — Juicero, Theranos, ё-Мобиль и многие другие. Тем более печально, когда речь идёт об уходящем тренде, о котором было достаточно написано в последние годы.

Как и на любом рынке, в отечественном дизайне хватает компаний и команд мирового уровня, много крепких локальных игроков. Хватает и откровенно слабых, которые заменяют реальные достижения пресс-релизами и показухой на уровне представителей стареющей телевизионной эстрады. Эпатаж не оправдывает позорный результат. Уверен, что ориентироваться нужно на первых — таких ребят хватает как среди дизайн-агентств, так и среди продуктовых компаний. Тогда общий уровень профессии будет расти, а не оставаться местечковым.

Если подытожить 8 лет наблюдения за алгоритмическим дизайном (и 4 года его активного развития):

Плохая новость: экзоскелета для дизайнера не получилось — в лучшем случае палки для спортивной ходьбы.

Хорошая: мы сейчас внизу кривой хайпа Gartner. Нереализованные обещания уже случились и поток попыток сотворить чудо уменьшился. Зато продолжают появляться реальные внедрения в массовые продукты, которые влияют на жизнь людей. И здесь главный локомотив — Adobe (а Autodesk поставили генеративный дизайн на поток работы с клиентами). Это гораздо сложнее, чем выдавать поделку за технологический прорыв. Но это реально решает задачи, ради которых работает дизайнер.

P.S. Сайт-коллекцию я какое-то время не обновлял — нужно переехать на новый движок. Накопились пара десятков ссылок — подпишитесь на рассылку, чтобы не пропустить.

#ai #algorithms

Очень примерная хронология развития инструментов алгоритмического дизайна.

#ai #algorithms

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— vc.ru
— Рассылка по почте

#digest

​Лёгкая добавка к коллекции материалов о создании тёмной темы оформления. Для тех, кто хочет иногда побыть мрачным, как во вселенной DC:

1. Годная памятка по разным аспектам реализации тёмной темы оформления в вебе от Adhuham. Больше про вёрстку, но достаточно развёрнуто.

2. GitLab: как внедряли. Для редакторов кода это стандарт, но сам веб-интерфейс нужно было проработать.

3. Вариативный шрифт от Dalton Maag, оптимизированный для светлой и тёмной темы оформления.

4. Инструкция от Jecelyn Yeen.

5. Телеканал Пятница сделал тёмную тему для ночного эфира. После 23:00 яркие и громкие проморолики заменит тихая, спокойная айдентика со сказками и стихотворениями.

6. Ростелеком Ключ. Правда, только дизайнерская часть, без дизайн-системы в коде.

7. Ну и на сдачу — лучшая в мире переключалка (в правом верхнем углу).

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

#designsystems #darkmode

​Nielsen/Norman Group методично прокапывают методы и практики дизайна интерфейсов. Подсобрал все недавние статьи про создание Customer Journey Map и родственных инструментов вроде Service Blueprint:

1. Пошаговая методичка по проведению рабочих сессий для создания. Сбор вводных, текущее состояние продукта и видение будущего.

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

3. Шаблон, который адаптирован для заполнения распределённой командой.

4. Анализ для поиска проблем и точек роста. Хорошая памятка с примерами.

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

6. Памятка.

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

8. Пользовательские исследования.

9. Обзор видов карт.

10. Опрос UX-специалистов на тему использования service blueprints. В них видят три ценности: артефакт, фреймворк и способ улучшить командное взаимодействие.

11. Основы создания service blueprint.

12. Суть и задачи service blueprint.

13. Разница между User Experience и Customer Experience. Три уровня взаимодействия человека с компанией — конкретные взаимодействия, целостные сценарии и общая история отношений.

Так сказать, служба одного (браузерного) окна.

#cjm

​А вот и ещё одна подборка новых интерфейсных паттернов и лучших практик. Поехали:

1. Интерфейс мобильного видео-плеера в Netflix, Hulu и YouTube. Самые интересные решения у Hulu — они здорово понимают контекст использования.

2. Встреча нового пользователя в почтовом клиенте Hey.

3. Проектирование интерфейса командной строки.

4. Хороший пример работы интерфейсного копирайтера. Как Shopify улучшили форму запроса информации так, чтобы показать пользу, а не просто задачу.

5. Анализ структуры push-уведомлений от разных платформ, браузеров и программ. Шаблон в Figma.

6. Встреча нового пользователя в мобильных приложениях. По возможности избегайте их вообще.

7. Выбор правильных полей ввода и их организации в форме.

8. Состояния элементов форм для выбора (чекбоксы, радиокноки, тумблеры, чипы).

9. Интерфейсы британских банковских приложений: сложность открытия счёта, первый платёж, приостановка счёта, международные платежи, открытый банкинг, поддержка.

10 Насколько эмоджи в названии писем рассылки привлекают пользователей. Такие вещи лучше проверять A/B-тестированием, но заметки полезные.

11. Проблемы со всплывающим слоем быстрого просмотра карточки товара, который призван избавить пользователя от перехода на полноценную страницу. Но с возникает ним уйма проблем.

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

13. Адаптация таблиц для мобильных.

14. Паттерн «любовь с первого взгляда» в результатах поиска — пользователь выбирает первый результат.

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

16. Поисковая выдача от Google и Baidu. Как они устроены и как это влияет на поведение пользователей.

Этот выпуск явно не соблюдал социальную дистанцию ссылок.

#patterns

​Подборка-подборочка про пользовательские исследования. Ловите жменю ссылок:

1. Готовность британских респондентов вернуться к обычным пользовательским исследованиям в офлайне. 72% уже готовы (правда, больше половины из них уже бывали на таких сессиях). Обзор ключевых выводов.

2. Структурированная памятка по вопросам при проведении интервью.

3. Как конвертировать любую шкалу опроса типа SUS в значение от 0 до 100. Оно, как правило, проще для общения внутри продуктовой команды. То же для 5 и 7 вариантов ответа.

4. Выборка респондентов для проведения сравнительных исследований.

5. Три типа персонажей: экспертный путь, качественные исследования, количественный опрос. Плюсы, минусы и подводные камни каждого.

6. Каталог инструментов для удалённых пользовательских исследований.

7. Формат отчёта о пользовательском исследовании, который продуктовая команда сможет прочитать и понять.

8. Вкусвилл: изменение поведения покупателей в период карантина.

9. Яндекс Взгляд сделал интерфейс для быстрого удалённого юзабилити-тестирования простых прототипов на аудитории Яндекс Толоки. Дёшево (999 ₽) и быстро, но к аудитории Толоки всегда были вопросы.

10. Стоит ли использовать шкалу рейтинга со звёздами вместо цифр.

Никак не получается меньше десятки :(

#research

​Брендинг цифровых продуктов — важная область в эпоху, когда границы между офлайном и онлайном стираются. Правда, толковых примеров мизер — как правило, всё ограничивается маркетинговой коммуникацией, но не попадает в интерфейс. Да и научиться толком негде — авторы тех 10-15 успешных примеров (Airbnb, Google Material Design, Microsoft Fluent Design, Apple, Miro, Яндекс.Драйв) рассказывают о деталях не так много. Но я не сдаюсь и копаю этот рудник в надежде составить методичку. Вот что происходило в этой сфере с начала года:

1. Microsoft: интеграция команд бренда и продукта, которые позволили сделать сильное обновление в 2015 году. Формат взаимодействия команд на нескольких примерах.

2. Skyeng от Шуки. Освежение, добавление характера и поддержка растущей архитектуры бренда. Применение на сам интерфейс, правда, не показано. Кейс в портфолио.

3. Mixcloud от Output. Хороший приём с пронизыванием фирменной звуковой волны в логотипе, шрифте, анимации и других деталях. Кейс в портфолио.

4. Eventbrite от Moving Brands. Есть примеры приземления в вебе, хотя характера не так много. Кейс в портфолио.

5. TripAdvisor от Mother Design. Удачный пример простого упрощения и освежения без надрыва. Кейс в портфолио.

6. Virgin Atlantic: унификации дизайна всех платформ — сайт, приложение, развлекательные системы на борту самолёта. Статья подаётся как рассказ о дизайн-системе, но технологической составляющей нет, а вот связка совсем разных носителей есть.

7. Envoy от команды продукта.

8. OLX от Design Studio. Динамический логотип с конструктором под разные ситуации, хотя применения на интерфейсы нет.

9. Фирменный шрифт YouTube Sans.

10. Khan Academy: поиск единого визуального языка на базе принципов дизайна.

11. Mentimeter от Bold. Графики и диаграммы здорово провязаны с визуальной рифмой и логотипом.

12. Huma от Koto. С помощью достаточно простых приёмов (градиент, иллюстрации, типографика) удалось сделать хорошо работающее в интерфейсах решение, достаточное чтобы выделиться.

13. Zendesk: создание системы иконок, которые поддерживают бренд. Получился хороший конструктор из базовых форм, которые повторяются в логотипе и других элементах оформления.

14. Waze от Pentagram. Сохранили дурашливый характер персонажа и превратили его в маскота, поддержав в компоновках сайта.

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

#branding

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

А ещё оказалось, что для её нормального внедрения нужна выделенная команда, чего получается не у всех. Многие компании спокойно пилят себе компонентные фреймворки для своих задач и не особо кичатся этим. Да, стали меньше выкладывать наружу живые гайдлайны — но это большая работа по подготовке, которая приносит пользу далеко не всем (хотя её немало). Поэтому и в дайджесте поток материалов чутка пересох. Но не навсегда:

1. Societe Generale: модель консулов. Это 4 человека из разных команд, которые регулярно ротируются. Процесс добавления нового компонента в таком подходе: как любой участник сообщества в компании может сделать это.

2. Deliveroo: история запуска. Стратсессия для старта работ, набор индикаторов здоровья, расчёт ROI по разным срезам (шаблон).

3. Toolabs: плагин для Figma позволяет управлять токенами дизайн-системы: цвета, шрифты, отступы, анимация, графика и многое другое. Можно переключать темы оформления, есть состояния компонентов. Анонс.

4. Storybook: возможность поиграть с компонентом прямо в живом гайдлайне. А версия 6.0 позволяет собрать несколько веток в единый живой гайдлайн. Для ситуаций, когда разные команды внутри компании делают разные фреймворки.

5. Adobe Spectrum: фреймворк на React.

6. Salesforce Lightning: плагин для Sketch со всеми компонентами.

7. Shopify Polaris:

— Ветка для кассовых терминалов
— Процесс и инструменты для локализации интерфейса.
— Как создавались гайдлайны по текстам в интерфейсе.

8. Brad Frost: опросник, с которым он приходит к клиентам при работе над дизайн-системой.

9. SuperFriendly: возможные разделы живого гайдлайна. Исчерпывающий список, хотя заполнять вообще все его пункты необязательно.

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

#designsytems

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

Напомню, что его можно получать разными способами:
— ВКонтакте
— Facebook
— vc.ru
— Рассылка по почте

#digest