Собрал дайджест продуктового дизайна за август 2021. Отечественные дизайн-системы, недоступные кнопки, рекламный интернет, история гиперссылок, алгоритмический дизайн, сетки, инструкции по UX-исследованиям, препарирование аватаров, новые инструменты дизайна и ещё сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.

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

​Перезапустили сайт-коллекцию отечественных дизайн-систем вместе с Андреем Сундиевым.

Первая версия здорово помогла подсветить наработки компаний на рынке, но со временем её стало сложно обновлять. В новой версии всё актуально и легко поддерживается — помимо старых знакомых (Альфа-Банк, БАРС Груп, Дизайн государственных систем, IVI, Контур, Mail.ru Group, Рамблер, Яндекс) наконец-то появились B2B Center, Вконтакте, Газпром Нефть, Райффайзенбанк, Ростелеком и Semrush. Кто-то выпал, ведь основное условие участия — компоненты на технологическом уровне, открытые для всех.

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

Если мы почему-то не знаем о вашей дизайн-системе — присылайте её боту @DSClubbot в Телеграме, обязательно добавим.

#designsystems

​Микро-подборка на тему свежего в алгоритмическом дизайне (а свежо тут в основном предание):

1. Интересный эксперимент Hayk An, позволяющий настраивать интерфейс, собранный на базе компонентов с токенами. Можно получить случайную комбинацию параметров, так что это игрушка на стыке алгоритмического дизайна.

2. Salesforce: Роль прототипов в интерфейсах на базе искусственного интеллекта. Они помогают моделировать результат генерации и общую логику взаимодействия.

3. Tyler Hobbs: Набирающее обороты применение алгоритмического/генеративного дизайна. Это коллекционные серии произведений, которые продаются через NFT и даже генерируются по определённым верифицированным правилам. Он упоминает платформу Artblocks и свой проект Fidenza на ней.

4. Fishdraw: Генератор рисунков рыб на базе алгоритмического дизайна.

В последнее время ссылки на эту тему копятся всё дольше, но кое-чего оседает.

#ai #algorithms

​Снова со-организую конференцию Fintech Design Conf 2021 от Райффайзенбанка. Она пройдёт 30 сентября в онлайне. Дизайн-команды современных банков покажут, что интересного происходит в отрасли и расскажут, куда движется индустрия. Они расскажут про интересные запуски и покажут, как устроены дизайн-процессы.

Состав: Klarna, Ак Барс, ВТБ, МТС Банк, Райффайзенбанк, Росбанк, Тинькофф, Хайс и ONY × Blanc.

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

В перерывах между выступлениями проведем дикие интерактивы и разыграем редкий цифровой мерч. А сразу после организуем серию воркшопов по редактуре, UX-исследованиям, Jobs to Be Done и маскам в Инстаграме (сами посмотрите, какая крутота выходит).

Конференция, как всегда, бесплатна и открыта для всех. Будет интересно.

​Первая тридцатка мини-выпусков дайджеста о пользовательских исследованиях: done.

1. Jim Lewis и Jeff Sauro: Новая интерфейсная метрика UX-Lite на базе UMUX-Lite. Она упрощает шкалу оценки до 5 пунктов и уточняет вопрос о полезности.

2. NN/g: Планирование пользовательских исследований в чистом agile.

3. Jim Ross: Сложные респонденты. Советы по работе с каждым из них.

4. NN/g: Процесс редизайна интранета Commonwealth Care Alliance. Какие исследования и в каком порядке они проводили перед началом проектирования и ближе к запуску.

5. Florent Buisson: Три переменные, важные для описания поведения пользователей в виде данных: наблюдаемые, индивидуальные и атомарные.

6. Jeff Sauro и Jim Lewis: Почему к NPS часто негативно относятся. Часть причин идёт от особенностей конкретной компании, где метрика работает хуже. Часть — скорее надуманы.

Сегодня я отстреляюсь с нашей конференцией Fintech Design Conf 2021 и вернусь к регулярности дайджеста.

#research

​Свежая выгрузка из файла "Интерфейсные_паттерны_и_лучшие_практики-20211004.xlsx":

1. Indeed: Советы по локализации интерфейсов. Много подводных камней и неочевидных вещей.

2. Baymard: Обзор типичных ошибок при проектировании навигации в интернет-магазинах из свежего исследования. Многое повторяется из года в год, но в любом случае полезная напоминалка.

3. NN/g: Интерфейсные паттерны, помогающие пользователям в ситуации долгого ожидания или прерываний в работе.

5. Stanislav Stankovic: Сбалансированный подход к созданию рейтинга пользователей или игроков.

6. Access Guide: База знаний по лучшим практикам accessibility. И ещё один простой чеклист.

7. Saurabh Phadnis: Проектирование интерфейса интеграции с Jira в Lucidspark (аналог Miro).

8. NN/g: Работа с пустыми состояними интерфейса в сложных веб-приложениях.

9. Памятка по оптимизации интерфейса для пользователей с нарушениями восприятия цвета.

10. Jim Lewis и Jeff Sauro: Сравнительное исследование американских интернет-магазинов. Они замеряют NPS, SUPR-Q и UMUX-Lite.

11. Growth Design: Разбор знакомой дизайнерам боли — отписки от Adobe Creative Cloud. И немного советов по лечению интерфейса.

12. Peter Ramsey: Разбор интерфейса встречи нового пользователя в приложении Apple Fitness+.

Таких файлов было уже 36.

#patterns

​В начале декабря делаю эксперимент — интенсив по дизайн-менеджменту для Smashing Magazine. Это 5-дневная версия моего курса и книги «Паттерны дизайн-менеджмента» — по 2,5 часа вечером с 1 по 15 декабря. Много теории и практики теперь и на английском языке.

А вот что интересного писали на тему управления дизайном в последнее время:

1. Легендарный Phil Gilbert, который сделал из IBM дизайнерскую компанию, покинул должность главы дизайна после 8 лет работы. Karel Vredenburg рассказывает много интересных деталей о том, как шли изменения.

2. NN/g: Первый и второй уровень зрелости дизайна в фреймворке Nielsen/Norman Group.

3. Atlassian: Крутой и системный подход к анализу и разбору дизайн-долга. Это категоризация по разным типам плюс фокус не только на багах, но и на сложностях в самой логике взаимодействия с интерфейсом.

4. МТС: Серия дизайнерских упражнений oneshot. Это позволяет быстро прокачать навыки визуального дизайна.

5. Shopify: Памятка по проведению сессии дизайн-критики. Он также предлагает шаблон в Figma для прозрачности процесса.

6. Atlassian: Создание видения будущего для корпоративных интерфейсов. Это серия рабочих сессий, которая помогла обрисовать его.

7. Как работает дизайн-команда Stripe.

Статус по книжке: закончилась редактура и готовы все 150 диаграмм, так что где-то должен начать верстаться дизайн-макет.

#management

Собрал дайджест продуктового дизайна за сентябрь 2021. Дизайн-долг, альтернатива CJM, игры для дизайнеров, локализация, accessibility, сессии дизайн-критики, тестирование дизайн-систем, зрелость дизайна, история трансформации дизайна IBM, новые инструменты дизайна и ещё сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.

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

​Новая мини-подборка о дизайн-системах с самых разных сторон:

1. Atlassian: Регулярные упражнения дизайнеров, когда они пробуют создать на дизайн-системе компании известные продукты на рынке. Это позволяет проверить её масштабируемость и отловить потенциальные проблемы.

2. Storybook: Готовят возможность тестирования интерактивных компонентов. В последнее время они много пишут на тему тестирования дизайн-систем:

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

— Как тестировать целые пользовательские сценарии с помощью Storybook и Cypress.

3. Figma: Провели новую мини-конференцию Schema о дизайн-системах 7 октября. Некоторые выступления затрагивали связь инструмента дизайна и компонентов в коде. Записи доступны, но нужно зарегистрироваться.

4. Дизайн-система Elephas отечественной компании Центр Финансовых Технологий.

6. Pega Cosmos: Как поддерживают accessibility из коробки.

7. Michelle Barker: Как быстро стилизовать элементы интерфейса через свойство CSS accent-color. Это, по сути, токен для основного цвета бренда.

8. Assembler CSS: Свежий CSS-фреймворк для создания компонентов и сайтов.

9. Pollen: Система токенов на базе CSS-переменных.

#designsystems

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

Поэтому раз за разом отправляю всех в канал «Ищу дизайнера» (@designer_ru). Это крупнейшая база вакансий для дизайнеров, так что я который год рекомендую и продолжу рекомендовать её.

P.S. Я не размещаю рекламу, но иногда делаю обмен постами — в Телеграме почти нет органического роста. Спасибо ребятам за поддержку исследования дизайн-команд.

​Кто бренд с интерфейсом свяжет, тот — хурма. Ну, за всю её и подборка:

1. Сервис аналитики Hotjar от британского агентства How & How.

2. Сервис пользовательских исследований User Interviews, сделанный своими силами.

3. Сервиса для автоматизации продаж Salesloft от американского агентства Focus Lab.

4. Одна из главных бирж фрилансеров Upwork от американского агентства Porto Rocha.

5. Справочник Yelp.

6. Продолжение ребрендинга Циан от отечественного агентства Щука. Как и зачем его делали.

7. Испанский сервис такси Cabify, сделанный собственными силами.

8. WeTransfer запустили своё медиа. Они стали одним из самых ярких примеров связи бренда с интерфейсом и на этом сайте их стилистика раскрывается ещё сильнее.

9. VPN-сервис Bluf VPN от эстонского агентства Tabasco.

Много всякой крутоты — научись в неё и ты.

#branding

​Ультра-короткая, но мега-жирная подборка лучших интерфейсных практик и паттернов:

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

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

3. Adam Argyle: Адаптивный список с множественным выбором, органично работающий на компьютерах и сенсорных устройствах.

4. Creative Navy: Обзор методов, помогающих упростить первое использование интерфейсов физических устройств (и не только).

Чтобы долго не копить, надо сразу всё излить

#patterns

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

1. IBM: Составление roadmap UX-исследований в продукте или команде.

2. NN/g: Структурированные подборки своих статей об удалённом юзабилити-тестировании, а также методах полевых и контекстных исследований.

3. Jeff Sauro и Jim Lewis: Как измерить прошлый опыт работы пользователя с продуктом. Это комбинация срока использования, частоты и процента востребованных ключевых функций.

4. Jim Lewis и Jeff Sauro: Как предсказывать значения метрики SUS на основе их новой метрики UX-Lite, которая сильно проще. Ну и предыстория появления UX-Lite.

5. Sophia V. Prater: Процесс дизайна и исследований ORCA (Objects, Relationships, CTAs, Attributes) в рамках концепции Object-Oriented UX.

#research

​Междупраздничная подборка для дизайн-менеджеров, лидеров и других, желающих сделать дизайн-команды лучше:

1. Как описать миссию дизайн-команды и видение будущего дизайна? Формат воркшопа от Nielsen/Norman Group и опыт RedHat.

2. Sainsbury's: Подход к продуктовой работе, ориентированный на конкретный выхлоп.

3. Nielsen/Norman Group: Третий уровень зрелости дизайна в их фреймворке.

4. Shopify: Удалённая менторская программа. Как запустили её и как она устроена.

P.S. Напомню, что в начале декабря делаю эксперимент — интенсив по дизайн-менеджменту для Smashing Magazine. Это 5-дневная версия моего курса и книги «Паттерны дизайн-менеджмента» — по 2,5 часа вечером с 1 по 15 декабря. Много теории и практики теперь и на английском языке.

#management

​Шустро поднабралась ещё одна мини-подборка по брендингу цифровых продуктов:

1. Microsoft: Новые принципы дизайна. Пара советов на тему внедрения принципов в рабочие практики.

2. BBC: Gareth Ford Williams рассказывает о комплексной задаче оптимизации брендинга для accessibility в рамках недавней эволюции. Он вызвал много насмешек (мол, увеличили расстояние между квадратиками за десятки миллионов фунтов), но это был целенаправленный тюнинг всех аспектов для облегчения восприятия.

3. Facebook от внутренней студии Creative X.

4. Meta: Новый бренд материнской компании Facebook от внутренней студии Creative X.

5. Ребрендинг Mail.ru Group в VK от британской Saffron Branding и внутренней команды.

6. Ребрендинг сервиса для создания мини-сайтов Exposure от американского агентства Smith & Diction.

7. Новая айдентика облачного сервиса Kion от американского агентства Focus Lab.

8. Новая айдентика productivity-сервиса Heyday от американского агентства Order.

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

#branding

​Короткий выпуск про дизайн-системы:

1. Команда Sparkbox провела интересный эксперимент — они попросили группу разработчиков написать форму на базе дизайн-системы IBM Carbon (с которой они не были знакомы) и такую же — самим с нуля. С дизайн-системой вышло на 47% эффективнее. Они готовят более масштабное исследование ROI.

2. Storybook: Бета интерактивных историй для описания компонентов со сложным поведением, которое нужно симулировать пошаговым сценарием.

3. ЦФТ Elephas: Дизайн-система отечественной компании Центр Финансовых Технологий. Страница на сайте клуба отечественных дизайн-систем.

4. Дизайн-система компании Nord Health.

5. Обзор функции UXPin Merge. Она позволяет связать компоненты в коде и инструмент дизайна.

#designsystems

Собрал дайджест продуктового дизайна за октябрь 2021. Material Design 3, Photoshop в браузере, планирование исследований, миссия и видение, прошлый опыт пользователя, принципы дизайна, игры по accessibility, новые инструменты дизайна и ещё сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.

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

Четвёртый год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные?

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

Результаты исследования опубликую в январе. Вы найдёте отчёт в крупных дизайн-каналах и изданиях.

P.S. Результаты за 2020, 2019 и 2018.

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

1. Сравнение интерфейсов Playstation 5 и Xbox Series X в плане эффективности навигации.

2. Baymard: Советы по проектированию сложных таблиц сравнения тарифных планов.

3. Riya Chakravarty: Простой способ напомнить коллегам о том, что вы показываете сырую версию дизайна — водяные знаки на макетах.

4. Shopify: Лучшие практики по созданию промо-сайтов, адаптированных под требования accessibility.

5. Salesforce: Разница в проектировании обычных интерфейсов и ботов/плагинов для мессенджеров. Конкретные отличия этого контекста жизни пользователя.

6. Jordan Bowman: Памятка по предотвращению ошибок в интерфейсе.

7. Tess Gadd: Памятка по использованию аккордионов в интерфейсах.

8. Gov.uk: Зачем внедрили отдельный чекбокс для ситуаций, когда пользователь не выбирает ни одно из значений. Где-то важно иметь явный отказ, где-то это помогает менее опытным пользователям.

#patterns

​Мини-подборка о пользовательских исследованиях:

1. Издательство ДМК Пресс готовит к выходу перевод второго издания известной книги Кэрол Барнум «Основы юзабилити-тестирования». Первое издание появилось 11 лет назад.

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

3. Jim Lewis и Jeff Sauro: Влияет ли расположение вариантов в шкале опроса (горизонтально или вертикально) на ответы? Их исследования и предыдущие публикации других авторов говорят — не особо.

4. Meta / Facebook: Профессиональные наблюдения за 10 лет карьеры, которые помогли Logan Wells выстроить хорошую связку с продуктовыми командами.

5. NN/g: Закон Кэмпбела — он говорит о том, как и почему метрики подвержены манипуляциям. И что делать, чтобы нивелировать этот эффект.

6. Jeff Sauro и Jim Lewis: Разница между количественными методами исследований: перепись населения, соц.опрос, анкеты и опросники.

Когда-нибудь эпопея с книгой и курсом по дизайн-менеджменту закончится и я снова начну писать подводки к спискам, но пока так.

#research

​Свежие новости из дизайнерского книгоиздательства. Под конец года много немного, зато всё — жыр:

1. Steven Hoober «Touch Design for Mobile Interfaces». Она посвящена особенностям интерфейсов для мобильных сенсорных экранов. Анонс и обзор.

2. Перевод второго издания известной книги Кэрол Барнум «Основы юзабилити-тестирования». Первое издание появилось 11 лет назад.

3. Известный на Dribbble дизайнер Michael Flarup готовит книгу-коллекцию «The iOS App Icon Book». Она собрала лучшие примеры иконок приложений для iOS. Есть ещё пара дней, чтобы вписаться на KickStarter.

А вот что на подходе у Rosenfeld Media:
1. Kate Rutter «Practical Metrics for Designers»

#books