Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-август 2020.
Паттерны и лучшие практики
Qonversion — UI/UX Mobile App onboarding best practices
Коллекция паттернов процесса встречи нового пользователя в мобильных приложениях. Для всех записано видео.
Nurture trust through cost transparency
Susanna Zaraysky из Google даёт советы по адаптации интерфейса для стран, где мобильный трафик дорог. Как ограничивать объём скачиваемых данных и вовремя информировать пользователя.
a11yresources — A growing list of accessibility tools and resources
Большая коллекция ссылок на тему доступности интерфейсов для пользователей с ограниченными возможностями. Инструменты, статьи, гайдлайны и т.п.
Inspirational Images Should Link to All Depicted Products (9% of Sites Don’t)
Kathryn Totz из Baymard показывает, как правильно давать ссылки на товары в эффектных промо-фото в интернет-магазинах.
Opening Links in New Browser Windows and Tabs
Jakob Nielsen и Anna Kaley из Nielsen/Norman Group разбирают ситуации, в которых уместно открывать ссылку на сайте в новом окне. Их немного — в большинстве случаев решать должен сам пользователь.
Accessibility: Guidelines for Information Architecture, UX Design, and Visual Design
Неплохая структурированная памятка по поддержке пользователей с ограниченными возможностями от Manasi Vaidya из IBM.
The Psychology Behind TikTok’s Addictive Feed
Авторы сайта Growth Design разбирают опыт первого использования TikTok и основные механики вовлечения пользователей.
6 Important Aspects of Well-Performing Mobile Product Page Breadcrumbs
Edward Scott из Baymard даёт советы по организации хлебных крошек в мобильных интернет-магазинах.
How Klarna works
Обзор интерфейса популярного сервиса рассрочки Klarna от Peter Ramsey.
Account Opening & KYC Chime vs Wells Fargo
Сравнение процесса открытия нового счёта в американских банках Chime и Wells Fargo.
Максим Ильяхов — Ясно, понятно. Как доносить мысли и убеждать людей с помощью слов
В ноябре выходит новая книга Максима Ильяхова «Ясно, понятно». Она развивает идеи «Пиши, сокращай» — контекст и тон, интерес, ясность, подача. Общий фокус на управлении вниманием читателя.
Дизайн-системы и гайдлайны
Design Systems Support
Nathan Curtis подробно разбирает процесс поддержки дизайн-системы. Как и в каком формате её пользователи обращаются к тем, кто её создаёт.
Унифицированные иллюстрации
Чтобы не рыться каждый раз в архивах мини-дайджеста, собрал все полезные материалы про унифицированные иллюстрации. Рассказы от Adobe, Airbnb, Booking.com, Creative Market, Dropbox, Лаборатории Касперского, Mail.ru, Netguru, Putnam Studio, Shopify, Slack, Spacebase, WordPress.
How we created the illustration style for our partner products
Елена Снежинская рассказывает о создании единого стиля иллюстраций Booking.com. Как анализировали цели использования, выбирали стилистику и адаптировали под конкретные задачи.
An Introduction to Multi-Platform Design Systems
Danny Banks из Amazon говорит, что всего 10% публичных дизайн-систем описывают нативные мобильные платформы. Это ключевая, но сложная тема, в которой он видит следующую точку роста для профессии. Его презентация на конференции Clarity 2020 на тему.
Бренд-система Райффайзенбанка
В публичной версии есть базовые гайдлайны, по авторизации — прорва шаблонов на все случаи жизни. Её сделали ещё до моего прихода и это важнейший кирпичик в построении цельного бренда во всех каналах, включая интерфейсы (чем мы сейчас и занимаемся).
Component Driven User Interfaces
Команда Storybook запустила сайт-памятку по созданию компонентных дизайн-систем.
Stop doing design system projects
Daniël De Wit рассказывает о неудачной попытке старта дизайн-системы агентства WebNL. И как всё удалось со второй.
10 reflections on designing a design system
Lara Hanlon из IBM анализирует опыт работы над дизайн-системой Carbon. Она даёт серию советов начинающим — местами очевидных, но всё равно полезных.
Design Systems For Figma
Каталог открытых дизайн-систем в Figma.
The Design System Encyclopedia
Большой список возможных элементов, которые описывает дизайн-система. Хотя она должна идти от реальных задач, а не отраслевых стандартов наполненности, это полезное облако тегов на память. Сопроводительная статья.
Color within Constraints
Linzi Berry рассказывает об особенностях работы с цветом в дизайн-системе Lyft.
iOS 14
- Обзор обновлений в библиотеке иконок SF Symbols 2. Видео с WWDC 2020.
Понимание пользователя
Jobs to be Done Toolkit
Jim Kalbach вместе с Elaine Matthias запустил сайт с обучающими материалами и шаблонами в дополнение к своей книге о Jobs to be Done.
Amy Bucher — Engaged: Designing for Behavior Change
Rosenfeld Media выпустили книгу Amy Bucher «Engaged». Она посвящена психологии пользователей и влиянию на их поведение. UXmatters публикуют выдержку из главы 4.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Customer Journey Map в Miro
Годная памятка Станислава Хрусталёва по созданию CJM в Miro. Много советов по работе с инструментом для задачи картирования пользовательского опыта.
Бонус: Типовые ошибки при создании CJM,
A Guide to Service-Blueprinting Workshops
Alita Joyce из Nielsen/Norman Group детально описывает формат рабочей сессии по созданию service blueprint.
Новые инструменты дизайна интерфейсов
Figma Config Europe 2020
Figma: На конференции Config Europe показали много обновлений. Состояния компонентов, которые можно переключать в прототипах (например, обычный и выбранный чекбокс); улучшение авто-компоновки, которая приближается к модели flexbox; быстрая замена элементов компонента (например, иконки); обновлённая панель для разработчиков. Они будут появляться постепенно.
Плагины
- BlendingMe: Плагин генерирует серию линий в виде потока.
- Table Creator: Удобное создание таблиц.
Шаблоны
Статьи и материалы
Vectornator X4
Новая версия векторного графического редактора. Много частных улучшений интерфейса.
Adobe Acrobat Reader
Научились разбирать PDF при просмотре. Теперь он адаптирует под мобильные экраны и даёт простую структуру документа для навигации.
BGJar
Генератор паттернов на фоне в SVG.
Пользовательские исследования и тестирование
A Content-First Approach to UX Research
Casey Capachi из Facebook описывает методы тестирования контента и интерфейсных текстов. Часть из них универсальны (например, 5-секундный тест), но часть — необычные приёмы.
Remote UX Research Without Sacrifices — 5 Best Practices for Conducting Research and Collaborating Online
Evi K. Hui из Flexport рассказывает о том, как команда UX-исследований адаптировалась к миру карантина.
I built a user research repository — you should do the same
Jonathan Richardson описывает свой процесс создания базы знаний и инсайтов из пользовательских исследований. У него простая версия — каталог отчётов, без разделения на отдельные инсайты.
User needs refinement — Why and how to do it
Jonathan Richardson показывает свой формат описания потребностей пользователей и рассказывает, как стандартизировал весь набор под него.
Simplifying the UMUX-Lite
Jim Lewis и Jeff Sauro рассказывают о доработанном опроснике стандартизированной метрики UMUX-Lite. Они перефразировали один из вопросов вокруг потребностей.
Mapping the Kitchen (and Other Distant Lands)
Во время карантина дом стал офисом для значительной части людей. Larry S. McGrath из Facebook рассказывает о важности конкретных мест и комнат, где пользователи работают с продуктом.
Простыми словами о выборке
Евгения Наумова из Контура объясняет основные понятия при рекрутинге респондентов. Как строится грамотная выборка.
Исследования в сложных B2B-продуктах: как это работает в Mail.ru для бизнеса
Дарья Шаклеева из Mail.ru Group рассказывает об особенностях пользовательских исследований в сервисах для бизнеса.
Remote UX Research — Advantages and Disadvantages, Part 1
Jim Ross разбирает плюсы удалённых пользовательских исследований.
Are Face Emoji Ratings Better than Numbered Scales?
Jim Lewis и Jeff Sauro изучают: насколько корректно использовать в опросах эмоджи вместо стандартных ответов. Данные не ухудшаются, но и смысла в этом нет.
How to Code Errors in Unmoderated Studies
Jeff Sauro и Jim Lewis показывают, как размечать найденные пользователями ошибки в немодерируемом юзабилити-тестировании.
Визуальное программирование и дизайн в браузере
Learn about spring physics animation in Javascript
Josh W Comeau наглядно описывает принципы «пружинистой» анимации и её реализацию на JavaScript.
Designing With Reduced Motion For Motion Sensitivities
Val Head показывает, как сделать режим ограниченной анимации в вебе. Это проблема для пользователей, у которых большое количество движения на экране вызывает когнитивные нагрузки.
ComicA11y — An all inclusive online comic experiment
Эксперимент с комиксами, поддерживающими требования accessibility.
AVIF has landed
Jake Archibald разбирает новый формат изображений AVIF (AV1 Image File Format). Он значительно экономит на размере файла относительно JPG и даже WEBP, хотя при долгой загрузке страницы показывается не сразу. Chrome 85 уже поддерживает его.
Новые скрипты
- Трёхмерный земной шар на WebGL с анимацией сигналов в разных точках.
- Эксперименты с эффектной анимацией кнопок.
Метрики и ROI
7 Steps to Benchmark Your Product’s UX
Пошаговая памятка Alita Joyce из Nielsen/Norman Group по выбору и отслеживанию интерфейсных метрик. На что ориентироваться, как считать, с кем сравнивать.
Designing for Outcomes Means Starting at the End
Dan Stulck из IBM приводит пример связки интерфейсных и бизнес-метрик. Как найти драйверы ключевых показателей бизнеса, на которые можно повлиять изменением поведения пользователей.
Three Myths About Calculating the ROI of UX
Kate Moran из Nielsen/Norman Group рассуждает о точности расчётов ROI дизайна. Должны ли мы всегда говорить про деньги и насколько комплексные обоснования нужны.
Дизайн-менеджмент и DesignOps
How can you find time to design? 7 tips to own your time
Отличная памятка José Torre для дизайнеров, которая помогает управлять календарём. Как расчистить его и выделить время для дизайнерских задач.
Andrea Mignolo — Design Leadership: The First 90 Days
Книга Andrea Mignolo «Design Leadership: The First 90 Days» выходит в начале 2021 года. Она посвящена первым шагам дизайн-менеджера в компании.
В одной из статей она описывает разницу между менеджментом и лидерством. Это разные стороны одной медали, которые работают в разных ситуациях.
Командное взаимодействие
Как работать распределённым дизайн-командам
Продолжаю пополнять коллекцию материалов.
When Remote Workshops Fail
Therese Fessenden из Nielsen/Norman Group разбирает типичные проблемы в онлайновых рабочих сессиях. Как правильно вовлекать участников.
Running a successful remote workshop
Rya Gershcovich описывает подход Shopify к проведению удалённых рабочих сессий по генерации идей.
Кейсы
Как провести исследование продукта и осмысленный редизайн в одиночку
Неплохой пример учебного проекта по редизайну от Бориса Шабаева. Он переосмыслил МТС Библиотеку.
Проектирование интерфейса системы видеоконференцсвязи
Рассказ о проектировании интерфейса сервиса видеоконференций IVA от агентства Usethics.
Брендинг цифровых продуктов
TikTok
Рекламная кампания от британской Wolff Olins.
Fiverr
Айдентика фриланс-биржи Fiverr от британской Koto. Правда, про интерфейсы ничего нет, в основном рекламные кампании.
История
The Evolution of the Google Sign Up Form — The Mirror of the Internet’s Development
Alex Trudov собрал все версии формы регистрации Google с 2005 года.
The untold history of macOS System Preferences
Arun Venkatesan разбирает эволюцию настроек macOS. Как менялся их состав и конкретные иконки.
Тренды
Welcome to Your Bland New World of Consumer Capitalism
Отличная статья Ben Schott о «blanding» — брендах-пустышках. Они используют громкие и пустые слоганы, за которыми ничего не стоит, а также шаблонные характеристики и приёмы оформления. Перевод.
The Bland Book — Totally Mundane™
Шаблоны брендбуков и других документов для брендов-пустышек.
Fast Company’s 2020 Innovation by Design Awards
Победители ежегодной награды Fast Company Innovation by Design. Тут решения из самых разных отраслей — от пром.дизайна и архитектуры до интерфейсов и визуализации данных.
Алгоритмический дизайн
Autobiographical paintings
Эксперимент Pierre Buttin по генерации текста и графики на основе собственных заготовок. Он написал свою автобиографию и прогнал через алгоритмический дизайн.
Designing for AI — Trust. 8 ways to infuse trust into your AI
Arin Bhowmick из IBM перечисляет способы, повышающие доверие пользователей к продуктам на базе искусственного интеллекта.
IdeasAI — A GPT-3-powered business idea generator
Генератор идей для бизнеса на базе GPT-3.
Для общего и профессионального развития
Wireframing Academy
Balsamic выпустили серию обучающих статей об основах создания wireframes и их использовании в продуктовой работе.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме, vc.ru или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
