Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-март 2021.

Паттерны и лучшие практики
The Current State of Mobile UX (18 Common Pitfalls)
Baymard Institute провели новое исследование интернет-магазинов на мобильных. Они сделали обзор основных выводов. Есть новые проблемы, но многие вроде маленьких областей нажатия или отсутствия информации о возврате — вечны.
Krystal Higgins — Better Onboarding
A Book Apart выпустили книгу Krystal Higgins «Better Onboarding». Она посвящена встрече нового пользователя в интерфе йсах.
Debit Card Acquisition Rank — исследование клиентского опыта онлайн-продажи дебетовой карты
Markswebb проанализировали процесс заказа дебетовой карты. Они сравнивают подходы десяти крупнейших отечественных банков.
10 Best Intranets of 2021: What Makes Them Great
Nielsen/Norman Group выбрали 10 лучших интранет-сайтов 2021 года. В сопроводительной статье они рассказывают о лучших практиках информирования о пандемии.
Spending money on Twitch — A UX case study
Peter Ramsey разбирает процесс встречи нового пользователя в Twitch и механику внутренних платежей. Это сложная система, которая никак не объясняется внутри сервиса — приходится искать объяснения в интернете.
Дизайн-системы и гайдлайны
How to actually test UIs
Varun Vachhar описывает основные способы тестирования дизайн-системы. Он разделил их на предмет тестирования (визуальное, композиция, взаимодействие, accessibility, сценарии), а не инструменты.
Тёмная тема оформления
Dark Mode with Style Dictionary
Инструкция Danny Banks по созданию тёмной темы оформления на фреймворке Style Dictionary, облегчающем поддержку токенов.
Flash of inAccurate coloR Theme (FART)
Chris Coyier пишет о проблеме дёрганого автоматического переключения между обычной и тёмной темой оформления в браузере.
Design System Checklist: How to Screen New Components
Alan Weibel описывает критерии, которым должен удовлетворять новый компонент, чтобы попасть в дизайн-систему Salesforce Lightning.
Понимание пользователя
Accessibility is more than a technical problem
Devon Persing из Shopify разбирает нюансы поддержки пользователей с ограниченными возможностями в интерфейсах.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Beth Dunn — Cultivating Content Design
A Book Apart выпустили книгу Beth Dunn «Cultivating Content Design». Она посвящена системной работе с контентом в компании.
On the Information Architecture of Music
Federico Badaloni пытается анализировать музыку как информационную архитектуру. Занятный подход с переложением метода проектирования интерфейсов на другую предметную область.
Новые инструменты дизайна интерфейсов
Figma
Бета-версия FigJam, аналога Miro, доступна для всех. Пока это очень простой и урезанный инструмент, который бесплатен до конца 2021 года. Интересный пример того, как может проходить рабочая сессия в нём.
К версионированию добавились ветки и возможность их склеивания вместе. Команда пыталась упростить привычный по Git механизм — многое автоматизировано.
Появилось полноценное мобильное приложение. Работа с прототипами и просмотр макетов, доступ ко всем файлам.
Общие доработки: скоро появится возможность созвониться с командой прямо из инс
трумента (запись в бету), количество активных участников файла выросло до 500, в сообщество может публиковать любой.
Статьи
- Uber: Используют идею, аналогичную прозрачному пикселю в веб-аналитике, чтобы отслеживать использование компонентов, даже если их отцепили от дизайн-системы. Они мотивируют команды использовать общие компоненты через соревнование и используют плагины для accessibility.
- Steve Dennis: Как аккуратно убрать устаревший компонент. В текущей архитектуре инструмента это не так тривиально.
- Matt Deco: Как синхронизировать стили в компонентах в коде и Figma.
- Sam DeBrule пообщался с со-основателем Dylan Field. Тот рассказал изначальные мысли команды, вокруг которых хотели делать стартап: дроны, мемы, 3D. К счастью, выжила лучшая идея.
- Javier ‘Simón’ Cuello: Памятка по работе с auto layout.
- Максим Лейзерович: Дикий эксперимент с адаптивными архитектурными планами.
Kamua
Инструмент в браузере для автоматической нарезки и кадрирования видео в самые разные форматы — широкие, квадратные, портретные. Выбирает ключевые объекты в сюжете и следит за ними.
Glob Editor
Занятный инструмент дизайна в браузере, который позволяет рисовать абстрактные векторные фигуры.
MagicPattern Toolbox
Генератор самых разных фоновых изображений: текстуры, градиенты, повторяющиеся элементы.
Morflax Things
Шаблоны устройств, которые можно повернуть в 3D нужным образом для подачи дизайна.
Пользовательские исследования и тестирование
Quant or Qual Research? 27 Words to Help You Decide
Jeff Sauro и Jim Lewis сделали шикарную памятку по выбору качественных и количественных методов исследований. Это набор из 27 характерных ключевых слов из вопроса исследования.
Seven Reasons Survey Questions Are Answered Incorrectly
Jeff Sauro и Jim Lewis перечисляют причины, по которым респонденты некорректно отвечают на опросники.
Live Text-Based Focus Groups
Julia Moore, Lindsay Nevard и Anita Tseng из Facebook описывают метод проведения фокус-групп на удалёнке. Это текстовые ответы респондентов в группе на вопросы модератора, без видео-звонка.
Four Types of Potential Survey Errors
Jeff Sauro и Jim Lewis описывают четыре проблемы в качестве данных при проведении опросов: от выборки до формулировок.
Визуальное программирование и дизайн в браузере
Coding Fantasy — Learn CSS, HTML & JavaScript by Playing Coding Games
Обучение CSS, HTML и JavaScript в виде простых браузерных игр.
Say Hello To CSS Container Queries
Container queries появились в одной из веток Chrome. Они позволяют задавать адаптивность на уровне отдельного компонента, а не всей страницы — это здорово облегчает работу над дизайн-системой. Ahmad Shadeed сделал обзор самой концепции и текущего состояния.
An accessible toggle
Kitty Giraudel описывает, как сделать тумблер с учётом требований accessibility.
Noise in Creative Coding
Varun Vachhar описывает способы сгенерировать случайные значения для анимации, текстур и других элементов. Так, чтобы это выглядело необычно, но естественно.
Understanding Easing Functions For CSS Animations And Transitions
Adrian Bece разбирает функции для easing в CSS-анимации.
A Complete Guide To HTML Email
Виталий Фридман собрал памятку по вёрстке писем рассылки. Это коллекция полезных материалов, инструментов, чеклистов и инструкций.
Exploring color-contrast() for the First Time
Chris Coyier попробовал экспериментальную возможность CSS color-contrast(). Она позволяет автоматически выбирать цвет текста в зависимости от фона, чтобы он был максимально контрастным.
Новые скрипты
Дизайн-менеджмент и DesignOps
UXers and Product Managers Both Say Others Intrude on Their Work
Nielsen/Norman Group попробовали конкретизировать, насколько пересекаются роли дизайнера интерфейсов и менеджера продукта. Kara Pernice и Raluca Budiu рассказывают об опросе, который подтвердил достаточно сильное наложение зон ответственности и то, как именно относятся к этому обе стороны. Отличный набор симптомов, которые можно увидеть в своей компании. Подробный разбор ключевых точек конфликта.
The ‘what’ and ‘why’ of design debt
Годная серия статей о дизайн-долге от Alicja Suska. В первой части она рассказывает о его сути и причинах появления. Во второй — как отслеживать и замерять. На подходе ещё несколько.
Stakeholder Analysis for UX Projects
Maria Rosala из Nielsen/Norman Group показывает, как собрать карту лиц, принимающих решения. А после — системно работать с ними, чтобы получить поддержку.
“Leadership-as-a-service” — 3 leadership services that empower design teams
Chloe Poulter из IBM описывает три вида помощи дизайнерам, которыми дизайн-менеджер здорово облегчает их жизнь и помогает развитию. Организация коммуникации, первая ответственность за процесс и обратная связь для самого лидера.
How to grow your T and gain skills
Неплохая обзорная статья Jenny Hsiao Sanchez из IBM о концепции Т-образных специалистов и способах развития этих навыков.
Design Debt. How to identify design debt, measure it
Gavin Elliott описывает формат работы с дизайн-долгом. Как описывать, как разбирать, как доказывать.
The Universal Challenges of Every Scaling Design Team
Презентация David Hoang из Webflow с конференции Figma Config 2021 о том, что делать дизайн-менеджеру в быстрорастущей компании. Как поддерживать дизайн и дизайн-команду цельными.
What is at the top of the UX pyramid?
Dennis Hambeukers задаётся вопросом: почему у всех пирамид UX, развивающих идею пирамиды Маслоу, всегда разная верхушка? Он предлагает свой подход — когда UX сначала связан с бизнес-стратегией, а потом и помогает определять её.
Командное взаимодействие
33 Activity Ideas for Remote UX Workshops
Мощнейшая памятка Jordan Bowman по методам генерации и выбор идей на рабочих сессиях. 33 способа разогреть группу и получить хороший выхлоп.
Кейсы
Что сделал Тинькофф Бизнес, чтобы предприниматели перешли в мобайл
Команда Тинькофф рассказывает о доработках интерфейса мобильного приложения для малого бизнеса, которые помогли поднять его использование клиентами относительно веб-версии.
How Kickstarter Designed for Creators’ COVID-19 Concerns
Arjun Mahesh рассказывает об оптимизации интерфейса Kickstarter, который помог поднять вложения в проекты на платформе.
Case Study: The Evolution of Google Maps & Colour Picking Methodology
Как Google Maps оптимизировали цветовую схему карт с момента создания.
Say anything? Behind the scenes of suggested responses
Angela Pham и Talia Ledner рассказывают о работе над автоматическими подсказками комментариев к публикациям. Как они анализируют варианты, предлагают подходящие и обучают алгоритмы обновлять подход.
Behind the Design: Rethinking support messaging in the Lyft app
Akhil Dakinedi подробно рассказывает об улучшении интерфейса поддержки пользователей в сервисе заказа такси Lyft. Он разбирает все альтернативные подходы и логику решений.
Как и зачем Mail.ru Group провела редизайн мобильной версии главной страницы портала
Дизайн-команда Mail.ru рассказывает о редизайне мобильной версии портала. Что изменилось и как проверяли, что эти улучшения работают.
Брендинг цифровых продуктов
Evolving the Maze Brand — How We Developed Our New Brand Identity
Ребрендинг сервиса для юзабилити-тестирования Maze от французского агентства Herve Studio.
Otlichnosti разработали айдентику для сервиса “Мое дело”
Айдентика онлайн-бухгалтерии Моё Дело от отечественного агентства Otlichnosti.
Welcome to Wondrium
Айдентика образовательного сервиса Wondrium от агентства Viget.
История
Лепота
В июне выходит новый фильм Bang Bang Education «Лепота» об истории русской визуальной культуры. Отечественные дизайнеры и агентства попробовали декобировать нашу культуру и проследили путь от появления кириллицы и народных промыслов до конструктивизма, советского DIY и метамодерна. Разбор визуального языка русских икон, поиск мотивы народного костюма в современной моде, взгляд на барокко, классицизм, модерн и другие стили с позиции современного дизайна.
Characterizing Interaction Design by Its Ideals — A Discipline in Transition
Неплохой анализ текущего состояния профессии дизайна интерфейсов от Kristina Hööka & Jonas Löwgrenb. История и новые вызовы.
Тренды
The anatomy of a design trend
Jens Mühlstedt предлагает свою модель для отслеживания трендов. Он делит их на микро- (1 год), макро- (5 лет) и мега-тренды (10 лет). В дополнение к идее он проанализировал и визуализировал конкретные за последние годы.
Статистика рынка
Алгоритмический дизайн
GANcraft
Эксперимент от NVIDIA превращает миры Minecraft в реалистичные сцены.
Голосовые интерфейсы
Preston So — Voice Content and Usability
A Book Apart выпускают летом книгу Preston So «Voice Content and Usability». Она посвящена подготовке контента для голосовых интерфейсов и их проектированию в целом. Параллельно вышла его статья об иммерсивной контент-стратегии.
Why Conversation Design?
Выдержка из главы №1 книги Diana Deibel & Rebecca Evanhoe «Conversations with Things. UX Design for Chat and Voice». Она посвящена проектированию голосовых и чат-интерфейсов.
How Electric Cars Could Craft the Soundscape of the Future
Alejandro de la Garza размышляет об изменениях стандартного звука движущейся машины, которые возможны с электромобилями. Автопроизводители действуют по-разному: кто-то продолжает традиции звучания мощных бензиновых двигателей, кто-то ориентируется на фантастическое кино, а BMW i4 озвучивал и вовсе Hans Zimmer.
Multitasking on Microsoft’s Surface Duo
Raluca Budiu из Nielsen/Norman Group сделала обзор интерфейса двухэкранного устройства Microsoft Surface Duo. Это интересный эксперимент, но проблем слишком много и концепция вряд ли реализуема в достойном виде.
Для общего и профессионального развития
UX Design Challenges
Серия упражнений по проектированию и дизайну интерфейсов. Нужно решать простую задачу и создать один из типовых артефактов типа wireframes или карточной сортировки.
Users Love Change — Combatting a UX Myth
Традиционная первоапрельская статья от Nielsen/Norman Group. Alita Joyce говорит, что пользователи обожают изменения и квесты, так что советует менять интерфейс продукта как можно чаще. Люди любят учиться новому!
Adding is favoured over subtracting in problem solving
Tom Meyvis & Heeyoung Yoon рассказывают о нескольких научных экспериментах, которые показывают: людям просто добавлять сложность решений, но очень сложно убирать её. А это ведёт к избыточности и непонятности.
Alexey Baranov — Web Interface Handbook
Простая онлайн-книга по дизайну в вебе от Алексея Баранова. Основы хорошего дизайна и работа с паттернами.
Addy Osmani — Image Optimization
Smashing Magazine выпускают книгу Addy Osmani «Image Optimization». Она посвящёна оптимизации изображений. Обзор и выдержки из неё.
Люди и компании в отрасли
Дизайн-команда МТС
Сайт дизайн-команды МТС.
Дизайн-команда Азбуки Вкуса
Сайт дизайн-команды Азбуки Вкуса.
Материалы конференций
Курс Future London Academy 2021 по UX-исследованиям
Конспект курса Future London Academy по UX-исследованиям, который я курировал. Инсайты, слайды и заметки про пять сильных лекций и воркшопов: звезда ResearchOps Kate Towsey (Atlassian), гений xJM и JTBD Jim Kalbach (Mural), мастера рекрутинга для удалённых исследований David Farkas (Collabralink) и Brad Nunnally (U.Group), гуру вовлечения продуктовой команды в UX-исследования Mandeep Basi (ex-Shopify), а также Rebecca Destello и Anuj Tewari (Facebook).
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме или vc.ru ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
4 comments
Крутецкий контент! Спасибо!
p.s. у Flash of inAccurate coloR Theme (FART) нет ссылки
Спасибо! Ссылку поправил.
Крутецкий контент! Спасибо!
p.s. у Flash of inAccurate coloR Theme (FART) нет ссылки
Спасибо! Ссылку поправил.