НОВОСТИ Дайджест продуктового дизайна, февраль 2020

BDFINFO2.0
Оффлайн
Регистрация
14.05.16
Сообщения
11.398
Реакции
501
Репутация
0
Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: .

-ubnuouengol3xsn7vhejd6ubda.png


Паттерны и лучшие практики




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









Tridip Thrizu предлагает свой подход к отработке состояний интерфейса. Он делит способы отображения на постоянные и временные, ключевые и вспомогательные.



Danny Sapio из Skookum собрал 10 часто используемых тёмных паттернов.



Page Laubheimer из Nielsen/Norman Group даёт советы по оптимизации анимации в интерфейсах.




Aurora Harley из Nielsen/Norman Group даёт советы по тому, как сделать обучающие видео и фото понятнее для пользователей.




O’Reilly выпустили книгу Torrey Podmajersky «Strategic Writing for UX» о текстах в интерфейсе. Обзор от UXmatters.

Кстати, UXmatters и A List Apart опубликовали отрывки другой книги на тему: Michael J. Metts и Andy Welfle «Writing Is Designing».
Дизайн-системы и гайдлайны




Linette Voller из Atlassian предлагает крутую модель для системного описания текстов в интерфейсе. Она использует идею слоёв Jesse James Garrett и раскладывает все инструменты для текстовой коммуникации по ней.



Тёмная тема




Raluca Budiu из Nielsen/Norman Group собрала выкладки из исследований о восприятии тёмной и светлой темы. В большинстве случаев светлая тема облегчает чтение.





Catalin Red показывает, как менять favicon сайта для тёмной темы оформления.



Шикарнейший чеклист для работы над компонентами (да и любой другой частью) дизайн-системы от Nathan Curtis. Какие этапы он проходит от предложения до выкатки с подробным списком конкретных шагов.





В следующей статье Nathan Curtis показывает разницу в трудозатратах на создание компонента с нуля и в рамках дизайн-системы. Изначально она не в пользу дизайн-системы, но компенсируется позже.



Dominic Nguyen собрал примеры того, как крупные дизайн-системы используют Storybook.



Дискуссия Brad Frost, и о том, убивают ли дизайн-системы креативность и не являются ли они новым тейлоризмом. Как и везде, нужен баланс и любые перегибы вызывают отторжение.



Обзор подходов к навигации по живым гайдлайнам от Danielle Romo.

Microsoft Fluent Design

.




Material Design

. Во многих примерах появился наглядный инструмент со спецификациями ( ).



Понимание пользователя




Raluca Budiu из Nielsen/Norman Group описывает теорию «информационного чутья», которое помогает пользователям оценивать потенциальную полезность информации на сайтах.





Серия интервью с экспертами в проектировании поведения пользователей о текущем состоянии дисциплины и её перспективах.

Новые инструменты дизайна интерфейсов




Улучшения интерфейса без явного фокуса. .





Появился API и возможность дать ссылку на компонент в коде.

Abstract

.

Figma Config 2020

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



Плагины


  • Dan Hollick описал подробную на примере анализа цветового контраста.
  • : Сервис юзабилити-тестирования доступен и для Figma.
  • : Можно попробовать библиотеку шрифтов отечественной словолитни.
  • . Как сделать его полезным и удобным.
  • : Облегчает совместную работу над текстами в интерфейсе.
  • : Подгрузка данных из JSON.


Статьи


  • , которое он дал во время приезда в Россию осенью 2019 года.
  • , главой дизайна Figma.




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



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



Ещё одна бесплатная библиотека иллюстраций с конструктором типажей от любимчика отрасли Pablo Stanley.






Инструмент позволяет хранить набор пиктограмм и раздавать его в популярные инструменты дизайна. Есть версия для Windows.



Иконочный шрифт с анимацией и поддержкой разных цветов.

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




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





Kara Pernice из Nielsen/Norman Group описывает подход к делению сценария юзабилити-тестирования на составляющие, которые дают разную наводящую информацию. Это позволяет проверить не только удобство работы с функциональностью, но и её обнаруживаемость.





Dalia El-Shimy из Shopify сделала отличную памятку по проведению пользовательских исследований с подробным чеклистом по каждому этапу. Это особенно полезно для современных продуктовых команд, где их всё чаще проводят дизайнеры и менеджеры продуктов.





Jim Lewis и Jeff Sauro напоминают про три основные цели юзабилити-тестирования: обнаружение проблем, сравнение с конкретным показателем или другим интерфейсом. Хорошо описана суть каждого.


Jim Lewis и Jeff Sauro разбирают особенности метода оценки желанности продуктов Microsoft Desirability Toolkit.



Jeff Sauro изучил влияние культуры разных стран на распределение ответов в опросах вроде NPS. Его гипотеза: это может влиять на смещение ответов в сторону более ярко выраженных или нейтральных.



Valentina Strachan из Microsoft рассказывает о методе когнитивного пошагового анализа интерфейса agile-командой. Это позволяет обнаружить часть проблем в интерфейсе экспертным путём.



Inês Duvergé опубликовала шаблон-памятку в Notion по проведению юзабилити-тестов. .





UX-исследователь Minal Jain из Uber рассказывает несколько жизненных историй из опыта работы в компании и понимания пользователей.



Елена Бородина рассказывает о тестировании визуального дизайна в Газпромбанке. С помощью 5-секундного теста собирали ключевые реакции — насколько они соответствовали изначальным ожиданиям команды.



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



Elsa Ho анализирует прошлогоднее увольнение половины пользовательских исследователей в Uber в связи с реорганизацией. Какие выводы для процесса и формата работы можно сделать из этого (и нужно ли, если это может быть особенностью конкретной компании).

Визуальное программирование и дизайн в браузере


Новые скрипты


  • Sarah Fossheim .
  • .
  • .
  • .
  • Кажется, самый позорный тренд последних лет теперь точно будет везде. .
  • .

Доступность

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

Метрики и ROI




Jeff Sauro и Jim Lewis собрали вместе все свои мини-исследования по особенностям использования NPS.

Дизайн-менеджмент и DesignOps




Сервис позволяет вести карты компетенций для дизайн-команды. Оценка, постановка целей, отслеживание реальных задач.





Отличная памятка Kate Moran из Nielsen/Norman Group по расчёту ROI дизайна. Как выбрать подходящие метрики и конвертировать их в деньги.





Советы по организации календаря дизайн-менеджера от Mia Blume. Как организовать бесконечный поток встреч.





Zander Brade из Monzo описывает процесс найма дизайнеров в компанию. Пошаговая инструкция.





Leslie Yang из Open Table даёт советы по регулярной работе по карте компетенций. Как и какие встречи проводить для продвижения по ней.



Alaine Mackenzie из Shopify даёт советы по управлению удалёнными дизайн-командами. Она отмечает, что сложность зависит от степени распределённости и, как ни странно, проще всего с полностью рассредоточенными людьми — тогда не возникает локальной группы, которая неизбежно становится ядром всех активностей.



Scott Strubberg рассказывает о внутренней базе знаний IBM по дизайну. Деталей немного и доступ закрыт, но интересный пример категоризации справочной информации.



Командное взаимодействие




Kate Kaplan из Nielsen/Norman Group сделала памятку по встречам и рабочим сессиям, которые может проводить дизайн-команда. Она также показывает разницу между форматами и рекомендацию по использованию в типичных ситуациях.



Продуктовый менеджмент и аналитика




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

Кейсы




Casper Kessels разбирает интерфейс автономных машин Waymo, который видит пассажир во время поездки. .





Тарас Бакушевич из Windmill Solutions описывает свой подход к редизайну интерфейсов.



Ульяна Сало рассказывает об обновлении интерфейса Яндекс.Дзена. Как оптимизировали навигацию и подачу информации.



Sarah Klearman из Medium рассказывает о рефакторинге дизайна страницы статьи и доработке дизайн-системы для неё.



Raymonst рассказывает о редизайне функциональности сохранения в избранное в Medium.

Брендинг цифровых продуктов





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





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





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



Ребрендинг справочника для путешественников TripAdvisor от нью-йоркской Mother Design. Удачный пример простого упрощения и освежения без надрыва. .



История




Годный разбор истории появления дизайн-мышления и вообще системных подходов к дизайну от Maggie Gram. И, само собой, проблемы с их маркетингом, когда такой шильдик применяется не к месту.



Cameron Faulkner разобрал эволюцию интерфейса всех версий Xbox.

Тренды




Тренды в фотографии от Shutterstock.




Алгоритмический дизайн




Язык алгоритмического дизайна от компании Standard Notation. Принципы, паттерны, процессы.





Генератор логотипов от Fiverr. Забавно, ведь это именно тот тип недорогих фрилансеров, который должен пострадать от алгоритмического дизайна.





Frederick O’Brien разбирает особенности вёрстки для устройств с гибкими экранами. Отличаются ли они от обычной поддержки адаптивности и какие стандарты и наработки уже есть.


Для общего и профессионального развития


ubkgvjo3pjoy4aprixng1ua8qsk.png



Smashing Magazine выпустили новую книгу. Она посвящена современной этике при создании цифровых продуктов, избегающей тёмных паттернов. .


Richard Yang даёт советы по прокачке навыков продуктового дизайнера. Упражнения, курсы, книги и сам подход к развитию.



Chris Lee советует дизайнерам учиться анализировать свои работы и роль в продукте. Это поможет лучше расти, ну и сделает собеседования результативнее.

Люди и компании в отрасли




Осенью запустил исследование отношения к продуктовым дизайн-командам в России. Наконец-то собрал результаты. Участвовало 1260 человек — в два раза больше, чем в , хотя для качественных результатов лучше ещё больше (учту в 2020 году).

jghvc5aoni-ckjypxw6tuadkwyq.png


В России хватает сильных продуктовых компаний и команд, в которых работают мощные дизайнеры и выпускаются крепкие продукты международного уровня. Многие из них помогают дизайн-сообществу конференциями, митапами, конкурсами и другими полезными вещами.

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

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

Заодно переделал . Пока скорее переезд на новую платформу с заделом на будущее.

P.S. Отдельное спасибо дизайнерским сообществам, которые помогли собрать ответы. В первую очередь — и .



Сайт дизайн-команды Сбербанка.




Умер Larry Tesler, один из ключевых людей в истории современных интерфейсов :(
Он работал в легендарной лаборатории Xerox PARC, а потом — в первые золотые годы Apple. Предложил , пропагандировал отказ от модальности в интерфейсах. Ему «user friendly» и «what you see is what you get». Он был одним из тех, кто показал наработки Xerox PARC Стиву Джобсу (и дальше помог внедрять их в Macintosh изнутри Apple). Кажется, из этой эпохи легенд остался только Alan Kay.



Материалы конференций




Конференция по дизайн-менеджменту прошла 4-5 ноября в Торонто. Опубликованы записи выступлений.



Подпишитесь на дайджест в , , или ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде за редактор и за визуальный стиль.​
[/URL]
 
Сверху Снизу