Дайджест продуктового дизайна за февраль:​ первая конференция Figma, дизайн для гибких экранов и другие материалы

Традиционный дайджест директора по дизайну «Райффайзенбанка» Юрия Ветрова.

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

Шикарная памятка по проектированию и дизайну интерфейса перетаскивания от Page Laubheimer из Nielsen Norman Group. Как сделать его хорошо в вебе и на мобильных.

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

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

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

• Figma: прошла первая конференция Config 2020. Улучшенный Auto Layout, выбор цветов и шрифтов, ссылки на любые объекты и страницы внутри документа (или вообще внешние), поддержка новых способов управления в прототипах (клавиатуры, игровые джойстики, устройства для пользователей с ограниченными возможностями). Видео выступлений. Интервью с Dylan Field и Noah Levin.

• Плагины для Figma: памятка Yuan Qing Lim по грамотному интерфейсу и инструкция Dan Hollick по созданию. Maze для юзабилити-тестирования; Ditto для совместной работы над текстами; JSON to Figma подгружает данные из JSON; Type Today для библиотеки шрифтов отечественной словолитни.
  
• Sketch 63: улучшения интерфейса без явного фокуса. И развитие облака.
• Flow Fields: инструмент позволяет делать анимированные линии потоков. Похожие эксперименты от Tyler Hobbs.
• Кажется, самый позорный тренд последних лет теперь точно будет везде. Генератор теней для неоморфичных элементов в вебе.
• Abstract: купили украинскую команду Flawless.
• Iconset: инструмент позволяет хранить набор пиктограмм и раздавать его в популярные инструменты дизайна. Есть версия для Windows.
• Anicons: иконочный шрифт с анимацией и поддержкой разных цветов.
• TinkerSynth: простой инструмент для генеративных абстрактных изображений по модели синтезатора.
• Open Peeps: ещё одна бесплатная библиотека иллюстраций с конструктором типажей от любимчика отрасли Pablo Stanley.
• Seamless Pattern Generator: генератор фоновых паттернов на чистом CSS.
• Zeplin 3.0: появились API и возможность дать ссылку на компонент в коде.

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

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

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

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

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

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

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

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

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

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

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

Умер Larry Tesler, один из ключевых людей в истории современных интерфейсов :( Он работал в легендарной лаборатории Xerox PARC, а потом — в первые золотые годы Apple. Предложил концепцию Сopy & Зaste при работе над экспериментальным текстовым редактором, пропагандировал отказ от модальности в интерфейсах.

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

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

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

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

За свежими ссылками также можно следить:

• В Facebook.
• «ВКонтакте».
• Telegram-канале.
• Рассылке.

#дайджест #инструменты #figma #sketch