Продуктовый дизайн: 20 самых важных материалов за октябрь

Дайджест от директора по дизайну бренда Mail.Ru Юрия Ветрова.

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

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

Кейт Моран и Ким Флаэрти из Nielsen, Norman Group показывают причины возникновения технологических мифов и то, как они влияют на использование продуктов.

На ежегодной презентации новых продуктов и экспериментов Adobe Max 2018 показали карьерный самосвал обновок: Adobe XD, Photoshop для iPad, Adobe Fonts (бывший TypeKit), обновления After Effects, Illustrator, InDesign, Dimension и других инструментов. Экспериментальные: Project Aero, Project Gemini, Character Illustrator CC, Premiere CC. Обновления уже прилетели через Creative Cloud.

Билл Чанг провёл пользовательское исследование схематичных экранов загрузки, которые популяризировал в своё время Facebook. Они помогают, если показывают загрузку поэтапно и снижают неопределённость ожидания, а не просто служат в качестве заглушек. Автор даёт советы по правильной анимации для них.

Пятая часть серии статей Нейтена Кёртиса о релизном цикле дизайн-систем говорит о взаимозависимостях между компонентами и другими слоями модульности.

Ралука Буди и Катрин Вайтентон продолжают серию исследований голосовых интерфейсов от Nielsen, Norman Group. Они изучили ожидания пользователей от идеального умного помощника и сопоставили их с существующими продуктами по нескольким критериям. Крайне интересная пища для выбора направлений развития.

• Figma. Появилась мощная функция для работы с группой повторяющихся объектов, когда их можно изменять одновременно. Читайте также инструкцию по работе с API для начинающих от Даниэля Холика Daniel Hollick из TIDAL. Пошаговое подключение к макетам и их разбор.
• FramerX. Лачезар Петков разобрал нюансы работы с инструментом.
• Interplay. Экспериментальный онлайн-инструмент дизайна интерфейсов, который также обещает связку с реальными компонентами дизайн-системы на React, Angular и Vue.
• Modulz. Кольм Тьют начал сбор денег на свой фреймворк для создания дизайн-систем, о котором писал несколько раз в дайджесте (сопроводительная статья). Денег дали.
• Overframe. Простой инструмент для Mac позволяет вставить интерактивный прототип в рамку телефона и получить видео для промосайта.
• Ratio. Экспериментальный инструмент дизайна от Флриана Шульца. В своей сопроводительной статье он рассказывает о принципах работы. Ratio основан на токенах и использует их в достаточно передовом виде (например, может подключать их из стороннего инструмента).
• Principle 5. Вышло обновление, хотя и лёгонькое. Можно импортировать макеты из Figma, есть тёмная тема оформления.
• UXPin. В прототипах появились общие переменные, которые можно использовать на разных шагах (например, введённое в форму имя пользователя).
• Famous. Инструмент обещает экспорт макетов Sketch, Adobe XD и Photoshop в работающие Progressive Web Apps.
• Webflow. Добавили инструмент работы с CSS Grid.
• Sketch. Советы Дмитрия Бунина по использованию стилей текста в Sketch 52.
• Prototypr. Запустила хронологию обновлений инструментов дизайна — сейчас есть архив за последний год.
• UX Feedback. Сервис позволяет опросить пользователей сайта. На входе — оценка через смайлики (по шкале из пяти), есть возможность задать дополнительные вопросы.
• Sympli Versions. Система версионирования макетов и шаблонов для дизайнеров от Sympli. Её анонсировали в 2017 году, теперь она доступна для всех.
• Purple. Сервис помогает хранить проектную документацию по дизайну: от входящих требований и сценариев использования в самых разных вариациях до макетов и других наглядных результатов работы.
• Drafta. Ещё один сервис для хранения макетов в команде. Правда, не особо полезный ― просто галерея без спецификаций и даже описания. Делает отечественная компания Scada.
• Sensitive. Ещё один сервис версионирования макетов.

Джефф Сауро описывает подход сводных оценочных листов состояния UX в продукте. Это отличный наглядный инструмент для отслеживания «здоровья» дизайна и выбора точек приложения усилий дизайн-команды.

Карл Фаст пишет о трёх ролях дизайна в современных компаниях: интеграция, трансформация и эволюция. Толковый взгляд на задачи дизайн-менеджера.

Ханна Маккелви и Яккуилен Л. Франк рассказывают, как они использовали customer journey map для встречи новых сотрудников в библиотеке. Эта задача сама по себе интересная и важная, так что статья полезна вдвойне.

Фред О'Брайан описывает текущее состояние конструкторов сайтов, использующих алгоритмический дизайн. Он пообщался с создателями многих из них или процитировал их мнения на эту тему.

Памятка по реализации «ленивой» загрузки изображений в вебе от Рауля Нанвани. Многие сильно ухудшают работу с сайтами, реализуя только часть из этих практик. В итоге пользователи с хорошим интернетом дольше ждут, пока загрузится графика.

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

• Скотт Кьюби "Writing for Designers" о текстах в интерфейсах.
• Кэт Холмс "Mismatch" об инклюзивном дизайне.
• Адам Силвер "Form Design Patterns" о приёмах дизайна форм.
• Тим Браун "Flexible Typesetting" от главного типографа Adobe.
• Ну и выдержка из прошлогодней книги Матей Латин "Rhythm in Web Typography".

Аврора Харли говорит о значительном улучшении рекомендательных систем за последние годы. Она даёт советы по их реализации.

Памятка по проведению интервью с пользователями от Кары Пернис из Nielsen, Norman Group. Достаточно подробно для обзора.

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

Толковая статья Жерлин Яренпун-Филипс из Clearleft о внедрении дизайн-систем на практике. Полезные нюансы процесса общения с продуктовой командой или клиентом.

Отличный пример описания Jobs to Be Done на основе типичных жизненных ситуаций учителя.

Блог дизайн-команды Pocket. В первой статье Тони Мёрфи рассказывает о целях редизайна продукта и принципах дизайна, которые закладывали в него.

Меган Вензель делится опытом выстраивания процесса UX-исследований в компании с нуля.

Читайте полную версию дайджеста в моём блоге. В нём, как обычно, много новых материалов по дизайну, дизайн-системам, инструментам дизайна, свежих скриптов и прочего. За свежими ссылками также можно следить в группе на Facebook, сообществе во «ВКонтакте» или канале Telegram — спасибо всем, кто помогает наполнять её. Вы также можете получать свежие обзоры по почте.