Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-март 2020. Кстати, он выходит в виде статьи уже 10 лет 🙂 Как выглядел первый выпуск.
Паттерны дизайн-менеджмента: Онлайн-конференция
28 мая курирую ещё одну онлайн-конференцию по дизайн-менеджменту. На ней выступят руководители крупных и средних по размеру дизайн- и UX-исследовательских команд: Алексей Чупин (МТС), Софья Чебанова (Wargaming), Юрий Солодовников (Альфа-Банк), Лена Лисеева (Rambler Group), Иван Соловьёв (DocDoc), создатели инструмента для карты компетенций Vectorly и я от Райффайзенбанка. Важные темы: карты компетенций, управление командой пользовательских исследований, перестройка дизайн-организации, синхронизация дизайнеров, менеджмент дизайн-систем. Студентам одноимённого курса — почти бесплатно.
Паттерны и лучшие практики
Interface In Game — Creative tool for video games lovers and game designers
Каталог паттернов игровых интерфейсов. Много видео и скриншотов с хорошей категоризацией.
Listboxes vs. Dropdown Lists
Anna Kaley из Nielsen/Norman Group описывает разницу между выпадающим и обычным списком вариантов в формах и фильтрах. В конце — наглядная памятка по выбору под конкретную ситуацию.
UI cheat sheet — dropdown field
Tess Gadd описала памятку по созданию выпадающих списков и использования в интерфейсах.
How People Read Online — New and Old Findings
Kate Moran из Nielsen/Norman Group рассказывает о свежем обновлении их исследования про чтение пользователями информации на сайтах. Они проводят его с 2006 года и каждый раз добавляют новые модели проведения (сейчас, например, появилась «газонокосилка»).
The Current State of Checkout UX (18 Common Pitfalls)
Baymard Institute актуализировали своё исследование интернет-магазинов. Edward Scott приводит выдержки из него по ключевым функциям.
12 ideas for B2B e-commerce user experience design
Советы Creative Navy по интерфейсам электронной коммерции для B2B. Во второй статье они описывают специфику отрасли.
Slow UI — Pace Interaction to Increase Understanding
Jakob Nielsen выпустил традиционную первоапрельскую телегу. В этот раз про медленные интерфейсы, которые заставляют пользователя внимательно изучить всю информацию.
Inspired Design Decisions With Herb Lubalin — Typography Can Be As Exciting As Illustration And Photography
Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе. В восьмом выпуске разбирает работы Herb Lubalin.
Passive Information Acquisition on the Increase
Feifei Liu из Nielsen/Norman Group рассказывает о пассивном поиске информации в интернете (например, через соц.сети или рассылки). В каких ситуациях он возникает чаще и как пользователи ведут себя.
Better Form Inputs for Better Mobile User Experiences
Alex Holachek разбирает типы полей ввода на мобильных и специальные клавиатуры для них.
The User Experience of Meeting Software
Jeff Sauro и Jim Lewis провели сравнительное юзабилити-тестирование сервисов для видео-звонков. Как пользователи оценивают их по метрикам UMUX-LITE и NPS.
How to Create Better Alerts and Symbols in Your Designs
Betina Rajakumar даёт советы по индикаторам-предупреждениям на экранах физических устройств (машины, бытовая техника и т.п.).
Дизайн-системы и гайдлайны
Токены в дизайн-системах
В прошлом году рассказывал об архитектуре токенов в дизайн-системе Mail.ru Paradigm, но только сейчас выложил презентацию. Это один из самых простых способов реализации дизайн-системы в коде. Набор базовых переменных визуального языка (цвета, шрифты, отступы и т.п.), который передаётся в любой компонентный фреймворк. Это позволяет проще управлять визуальным стилем продуктов и дешевле внедрить на практике.
Radius — A Design System Accelerator
Фреймворк для дизайн-систем. Есть компоненты на React на базе токенов и шаблоны в Figma.
Тёмная тема оформления
Building dark mode on Stack Overflow
Aaron Shekey рассказывает о создании тёмной темы оформления в Stack Overflow. Много о манипуляциях с цветом, чтобы добиться гармоничной палитры.
How to add dark mode to a Gatsby site
Инструкция Josh W Comeau по поддержке тёмной темы оформления в сайтах на генераторе Gatsby.
Implementing Dark Mode In React Apps Using styled-components
Базовая инструкция по созданию тёмной темы оформления через механизм стилизованных компонентов на React от Blessing Krofegha.
Val Head — Animation in Design System E-Book
Бесплатная книга Val Head об анимации в дизайн-системах для Adobe XD. Многое было в её статьях, но теперь собрано вместе.
Fixing what’s broken: How to improve your in-product error messages
Крутой подход к системному написанию сообщений об ошибках в интерфейсах Shopify от Chelsea Singer. Грамотная категоризация, подход к аудиту, выбор правильной тональности — всё по полочкам.
Chromatic — Storybook deployment, review, and test
Сервис-спутник для Storybook добавил возможность проверить и принять обновления компонентов в наглядном виде. Это упрощает работу распределённых команд над дизайн-системой.
Open UI
Группа энтузиастов проанализировала известные дизайн-системы и пытается предложить стандартные названия и описания типовых компонентов.
Bootstrap 5 — What’s New About It and Release Date
Разбор нововведений в Bootstrap 5 от Sam Norton из DesignModo.
LCH colors in CSS — what, why, and how?
Lea Verou рассказывает о цветовой модели LCH (Lightness, Chroma, Hue) для веба. По её словам, она позволяет использовать цветовое пространство более полно.
Charting a course through international waters
Winter Wei рассказывает о процессе и инструментах для локализации интерфейса Shopify. Как проводится аудит в дизайн-системе и как это облегчает работу команд.
Понимание пользователя
The Psychology of Design — 17 Cognitive Biases & Principles That Affect UX
Обзор когнитивных искажений и законов проектирования взаимодействия от Growth Design.
Drawing Motoring Logos from Memory
Продолжение эксперимент на тему того, как потребители запоминают логотип бренда. Группу респондентов попросили набросать логотипы 10 автомобильных марок. В результате выделились их наиболее запоминаемые черты.
Информационная архитектура, концептуальное проектирование, контент-стратегия
How To Succeed In Wireframe Design
Советы Антона Супруненко по работе с отошедшим на второй план жанром wireframes.
Adobe XD
Мартовское обновление: звук в прототипах и ссылки внутри экранов.
Haiku
Figma
Получили $50 млн инвестиций. Теперь их прорыв будет вообще не остановить — планируют покупки других инструментов и команд.
Статьи
- Lennon Cheng показывает, как использует Figma для заметок во время юзабилити-тестирования.
Pose
Инструмент помогает выбрать позу персонажа для иллюстрации. После этого можно накладывать на неё любой стиль.
Webflow
Kyler Phillips собрал сайт-коллекцию и даёт шаблон для быстрого старта. Я недавно раскопал эту возможность инструмента и перевёл на него один из личных сайтов — очень крутая экономия времени.
SVG Artista
Простой сервис для анимации SVG в браузере.
Vectornator X3
Вышла версия X3 с обновлённым интерфейсом и другими улучшениями. Помимо прочего появилась встроенная изометрическая сетка.
Пользовательские исследования и тестирование
Research Skills Framework
Карта компетенций UX-исследователя от сообщества ResearchOps. Очень крутой и детализированный подход, который интересно раскладывается на уровни влияния в компании. Один из лучших подходов к карте навыков вообще.
What Research Ops Professionals Are Doing in Response to COVID-19
Мощный набор практических советов по перестройке процесса UX-исследований в эпоху карантина от экспертов из Salesforce, Monzo Bank, Workday, Atlassian, Springer Nature, Booking.com, Kabbage, Dropbox, Mailchimp и LinkedIn. По делу и конкретным вопросам и этапам, а не просто рефлекция на тему.
Closing the feedback loop
Lindsay Boylan из Mariana Tek рассказывает о своём опыте построения базы знаний и инсайтов из пользовательских исследований. Она начала делать её в Airtable, но потом переехала в EnjoyHQ (бывший NomNom). Получилась толковая инструкция по созданию такой базы.
Zapier’s User Studies — Universe
Пример базы знаний и инсайтов из пользовательских исследований от Zapier.
How Grading User Flows Helped us Launch a Delightful CMS
Jonathan Meharry из HubSpot описывает подход к декомпозиции и оценке пользовательских сценариев. Это позволило команде расставить приоритеты при развитии интерфейса.
Leveling up your Ops and Research — A strategic look at scaling research and Ops
Brigette Metzler улучшила фреймворк сообщества ResearchOps — она связала его с моделью разной скорости изменений Stewart Brand. Это восемь ключевых аспектов: от формулирования вопроса исследований и поиска респондентов до настройки инструментария.
Approximating Task Completion When You Can’t Observe Users
Jeff Sauro и Jim Lewis описывают способы опредлить процент успешно завершённых сценариев в удалённом немодерируемом юзабилити-тестировании. Они предлагают аппроксимацию из ответов на SUS и SEQ.
Визуальное программирование и дизайн в браузере
98.css — A design system for building faithful recreations of old UIs
CSS-фреймворк для стилизации интерфейсов под Windows 98.
How We Built a Playful WebGL Experience for 100 FWA Wins
Amélie Rosser из Jam3 рассказывает о создании интерактивного промо-сайта об их победах в премии FWA. Сайт.
Новые скрипты
Дизайн-менеджмент и DesignOps
AMA with Jenny Arden (Lyft)
Толковая сессия вопросов и ответов с Jenny Arden, дизайн-директором Lyft. Структура дизайн-команд, её роль и зона ответственности и другие детали.
Putting a dollar $ign on your impact
Jennifer Sukis из IBM описывает свой подход к планированию работы дизайн-менеджера через OKR и прозрачную отчётность для своего руководителя. Отличный пошаговый разбор подхода, который легко использовать для себя.
Сергей Кондауров — 500 встреч с дизайнерами 1:1 в год
Сергей Кондауров из Яндекса рассказывает о своём подходе к проведению встреч 1:1 с дизайнерами. Очень подробный и дотошный обзор подходов и практик, особенностей и подводных камней формата регулярных встреч дизайн-менеджера с дизайнерами (хотя часть из них другие авторы не считают частью 1:1).
Breaking your 1:1 meeting status quo
Rahshia Sawyer из CapitalOne описывает свой подход к проведению встреч 1:1.
Командное взаимодействие
Как работать распределённым дизайн-командам
Продолжаю пополнять коллекцию материалов.
Design Critique on a Remote Team
Шикарная памятка по проведению сессий дизайн-критики в распределённой команде от Ivana McConnell из HashiCorp. Она показывает шаблон в Whimsical, который позволяет структурировать обсуждение.
Tips for running a remote design sprint
Дизайн-команда Slack даёт советы по проведению дизайн-спринтов в распределённом формате.
Stay Home
Дизайнеры выкладывают фото своих домашних рабочих мест.
Remote Design Week
Сообщество DesignX запустило онлайн-неделю дизайна. В программе толковые выступления, круглые столы и воркшопы — это следующий шаг для онлайн-конференций.
Remote Work for Design Teams
Новая книга InVision о работе распределённых дизайн команд от Ben Goldman, Abby Sinnott и Greg Storey. Креативный процесс, дизайн-менеджмент и общие вопросы.
Опыт компаний
Workshop Facilitation 101
Памятка по фасилитации рабочих сессий от Sarah Gibbons из Nielsen/Norman Group. Она описывает принципы, цели и инструментарий. По многим из них они уже публиковали отдельные статьи.
Продуктовый менеджмент и аналитика
Как запустить и масштабировать маркетплейс
Перевод серии статей Lenny Rachitsky о запуске и масштабировании продуктов-маркетплейсов. Вышли все 8 выпусков, в которых есть много полезного и для продуктовых дизайнеров (например, о поддержке качества).
Кейсы
Examples of how user research informs UX design decisions
Creative Navy рассказывают об оптимизации интерфейса платёжного терминала на заправках.
Брендинг цифровых продуктов
Building a brand
Ребрендинг сервиса Envoy от команды продукта.
Тренды
Touching technology — preparing for a post-pandemic future
Дизайнеры Foolproof фантазируют на тему ближайшего будущего, где публичные интерфейсы с сенсорными экранами будут минимизироваться.
Алгоритмический дизайн
US patent office rules that artificial intelligence cannot be a legal inventor
Патентные бюро США, Евросоюза и Великобритании не дают указывать искусственный интеллект как автора патента.
Голосовые интерфейсы
Usability Testing for Voice Content
Preston So описывает методы юзабилити-тестирования голосовых интерфейсов. Она проводила их для гос.сервисов американского штата Джорджия и качество пользовательского взаимодействия улучшилось.
Для общего и профессионального развития
Zak Rowling — The UX Activity Workbook
Дизайнерские кроссворды и другие увлекательные забавы для карантина.
Jon Yablonski — Laws of UX
O’Reilly выпустили книгу Jon Yablonski «Laws of UX». Она посвящена базовым законам пользовательского взаимодействия с разбором на примерах. Выдержка из неё.
Люди и компании в отрасли
The Author of ‘Don’t Make Me Think’ Discusses UX Design’s 20-Year Evolution
Свежее интервью со Стивом Кругом, автором легендарной книги «Не заставляйте меня думать».
A New Chapter for Dribbble and Creative Market
Dribbble купили Creative Market.
Материалы конференций
Advancing Research 2020
Конференция Advancing Research 2020 прошла 30 апреля-1 марта в онлайне вместо Нью-Йорка. Это первая конференция на тему от Rosenfeld Media, организаторов одних из самых полезных и глубоких конференций. Natalie Hanson сделала традиционный конспект выступлений.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.