Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-сентябрь 2022.
Паттерны и лучшие практики
Usability heuristic frameworks — Which one is right for you?
Фешенебельный анализ чеклистов и фреймворк для эвристической оценки интерфейсов от Michael Kritsch. Он проанализировал популярные и толковые и разложил их по полочкам. Как и другие авторы, он рекомендует создавать свой чеклист под свои задачи, используя чужие списки как ориентир.
Website Fidelity
Jim Nielsen разбирает концепцию Kyle Simpson «качества воспроизведения» сайтов. Самая простая вещь — текстовая версия для людей с плохим интернетом.
Augmented-Reality Calibration in Mobile Apps — 10 Guidelines
Sana Behnam и Raluca Budiu из Nielsen/Norman Group описывают лучшие практики интерфейса настройки приложений с дополненной реальностью.
Programming Portals
Maggie Appleton описывает интерфейсную парадигму «порталов для программирования», которые объединяют лучшее из двух миров — командной строки и графических интерфейсов. Она приводит примеры нескольких исторических и современных продуктов, которые используют этот подход.
Getting WCAG color contrast right
Lukas Oppermann описывает нюансы поддержки цветового контраста в стандарте accessibility WCAG 2.1.
Drag & Drop UX Design Best Practices
Памятка Ceara Crawshaw по проектированию хорошего интерфейса drag&drop.
Toward a More Accessible Metaverse
heila Meldrum и Yao Ding рассказывают о заботе об accessibility в устройствах и пространствах метавселенной в Мете.
Tackling design challenges with the 5C framework
Charlotte Wittels описывает свой подход к решению задач по дизайну интерфейсов: понять 5C (context, cases, concept, content, constraints).
Translate User-Generated Content for Global Audiences
Feifei Liu из Nielsen/Norman Group разбирается, как международные интернет-сервисы переводят пользовательский контент типа рецензий и отзывов на разные языки.
UX and NPS Benchmarks of Ticketing Websites (2022)
Jim Lewis и Jeff Sauro обновили своё сравнительное исследование сайтов покупки билетов на мероприятия. Они сравнили их по метрикам SUS и NPS.
Can UX Metrics Predict Future Grocery Purchases?
Jeff Sauro и Jim Lewis пытаются ответить на вопрос: влияет ли качество интерфейса на частоту и объём покупок в интернет-магазинах продуктов. Они провели длительное пользовательское исследование и нашли кое-какие взаимосвязи.
Building a tooltip component
Adam Argyle показывает, как реализовать хорошую всплывающую подсказку в интерфейсе.
Дизайн-системы и гайдлайны
Magic, utility, and redesigning Material.io
Google снова переработали сайт Material Design. Новый подход к подаче информации, навигации, описании стилей и т.п. Ну и активное использование принципов самой дизайн-системы.
Дизайн-системы
Design System ROI Calculator
Knapsack сделали калькулятор ROI дизайн-системы на основе своих публикаций и исследований на тему. Он умеет считать по разным срезам — люди, компоненты, общий эффект.
Let’s talk about web components
Brad Frost описывает свой опыт работы с веб-компонентами и в целом топит за их использование. Он показывает их текущие ограничения и размышляет на тему их решения.
NewsKit design system
Дизайн-система британского подразделения компании News Corp.
Понимание пользователя
Psychology for UX: Study Guide
Nielsen/Norman Group сделали структурированную подборку своих статей о психологии пользователей.
Personas: Study Guide
Nielsen/Norman Group сделали структурированную подборку своих статей о методе персонажей.
Инструменты дизайна интерфейсов
Figma
Переработка поиска и замены (как её проектировали), поддержка экранных дикторов, секции из FigJam, вставка видео.
Relay
Google сделали связку между Figma и Android Studio. Можно экспортировать компоненты в Jetpack Compose.
Плагины
- Autoname: Экспериментальный плагин, который автоматически переименовывает слои в макете — он делает предположения, что это за элемент.
- Ando: Плагин для Figma от Antonio Cao позволяет генерировать фото и иллюстрации с помощью Stable Diffusion.
Статьи
- Acronis: Экспорт макетов писем рассылки в HTML-код. Они нашли необычное решение — это не полноценный конвертер, а связка блоков в дизайне с мини-файлами HTML для каждого блока.
Adobe MAX 2022
Конференция Adobe MAX 2022 прошла 16-20 октября в Лос-Анджелесе и онлайне. Для дизайнеров интерфейсов на ней всё меньше полезного, но интересное есть. TechRadar сделали неплохую текстовую трансляцию с обзором хитов.
Photoshop и Lightroom развивают возможности алгоритмического дизайна: проще выделять и удалять объекты, людей, фон. В Illustrator появится простая работа с пересечениями объектов без создания кучи масок. Также развивается инициатива по проверке аутентичности контента, что особенно важно в эпоху взрывного роста генераторов фото и иллюстраций.
Typogram
Инструмент помогает создавать логотипы. Авторы собрали большую базу знаний, так что он неплохо направляет в плане характера и позволяет гибко настраивать любые параметры текстовой части.
Microsoft Designer
Простой графический редактор от Microsoft для вещей типа публикаций в соцсетях. Может генерировать графику с помощью DALL-E 2 и рекомендовать композицию макета по текстовому описанию задачи.
iA Presenter
Information Architects запустили бета-версию своего инструмента для создания презентаций. Они полностью переосмыслили подход к их созданию и идут от рассказа истории, а не слайдов со списками.
WordPress Full-Site Editing — A Deep Dive Into The New Feature
Nick Schäferhoff подробно разбирает новый интерфейс WordPress для наглядного редактирования страниц сайта (Full-Site Editing). Это развитие редактора статей Gutenberg, которое позволяет легче верстать интересные публикации.
Пользовательские исследования и тестирование
Qanda
Сервис помогает делать текстовые транскрипции из сессий пользовательских исследований и вытаскивать ключевые инсайты. Пока в закрытой бете.
2022 Research Incentives Report
Свежий анализ суммы вознаграждения респондентам пользовательских исследований от User Interviews. Разбивка по методам, длительности и другим параметрам исследования.
Бонус: Интервью с Nick Baum из сервиса Tremendous, который помогает выплачивать вознаграждение респондентам пользовательских исследований.
Four Ways to Pick the Right UX Method
Jeff Sauro и Jim Lewis выпустили дополнение к своей памятке по методам пользовательских исследований — как выбирать их для конкретного этапа проекта.
Introducing the Minimum Viable Taxonomy Level 1
Emily DiLeo описывает минимальную таксономию для базы знаний и инсайтов из пользовательских исследований. Это 11 полей, которые точно нужны на старте.
Run activity based interviews to maximize your time with users
Isabel Boettcher из Lucid описывает несколько методов интервью с пользователями, в которых они делают что-то с сырыми концептами интерфейса. Это позволяет собрать проблемы на ранней стадии.
Improve Your Usability Tests — Learnings from Evaluating 100-Plus Usability Tests
Rolf Molich, Bernard Rummel и Susanne Waßerroth изучили записи сотни юзабилити-тестов, которые проводили кандидаты на профессиональную сертификацию CPUX-UT. Они выписали типичные ошибки — в целом они совпадают с известными списками проблем процесса.
Why Field-Study Sessions Go Wrong — 5 Recommendations
Майя Азарова из Nielsen/Norman Group описывает типичные проблемы при проведении этнографических исследований.
Советы для успешной анкеты
Советы Евгении Крупиной из Контура по составлению анкеты для опроса пользователей. Часть 2.
13 Best Survey Tools for UX Research
Сравнение сервисов для проведения опросов пользователей от User Interviews.
Understanding User Pathways in Analytics
Советы Page Laubheimer из Nielsen/Norman по анализу путей пользователей в интерфейсе. Как находить проблемные места.
Directing to Care — Technology to Help Patients Find Their Way
Noah Ward рассказывает о пользовательском исследовании навигации по больнице, в котором использовали очки для eye tracking.
What Percentage of Participants Think Aloud?
Jeff Sauro и Jim Lewis пытаются разобраться, какая часть респондентов пользовательских исследований готова рассуждать вслух во время сессии. Они взяли данные по США и Великобритании.
Визуальное программирование и дизайн в браузере
Upgrading colors to HD on the web
Bramus Van Damme показывает, как включить расширенные цветовые пространства в вебе.
OKLCH in CSS — Why we moved from RGB and HSL
Evil Martians рассказывают об OKLCH, ещё одном новом способе описания цветов. Они считают, что он лучше HSL в плане понятности и работы с accessibility.
Fallback Font Generator
Генератор CSS-кода для резервного шрифта на случай, если долго грузится кастомный. Он позволяет минимизировать «прыжки» контента страницы.
Дизайн-менеджмент и DesignOps
How to Build a UX Research Team
Топовейшая памятка по первым шагам в компании для лидера пользовательских исследований от Lizzy Burnam из User Interviews. Основные зоны фокуса и план на первые 90 дней.
UX Stakeholders: Study Guide
Nielsen/Norman Group сделали структурированную подборку своих статей о работе с лицами, принимающими решения. Одна из свежих: памятка по проведению интервью с ними.
Successful Onboarding for New Hires in UX Roles
Памятка Rachel Krause из Nielsen/Norman Group по построению хорошего процесса адаптации новых сотрудников в компании.
Leveling Up When You Can’t Get Headcount
Пара простых советов Design Dept. про ситуации, когда дизайнеров в команде не хватает, но бюджета на них тоже нет.
Как из джуна вырастить сеньора — HR-инструменты для развития сотрудников
Команда Purrweb описывает серию регулярных встреч для развития каждого сотрудника: ретро, 1:1 и performance review.
Real Talk with Real Leaders
Беседа Design Dept. с Tom Takigayama и Orr Shtuhl, которые поработали дизайн-менеджерами и вернулись к роли эксперта.
Content Debt
Laurah Mwirichia из Square пишет о концепции контент-долга наподобие технического и дизайнерского.
Командная работа
Eli Woolery & Aarron Walter — Collaborate Better Handbook
InVision выпустили новую мини-книгу Eli Woolery & Aarron Walter «Collaborate Better Handbook». Она основана на серии подкастов и посвящена командному взаимодействию.
Продуктовый менеджмент и аналитика
When, Why, and How to Conduct Competitive Analysis for UX Research
Rachell Lee из User Interviews описывает разные подходы к анализу конкурентов с точки зрения UX в целом, рынка и конкретно пользовательских исследований.
How Figma uses data
Max Burkhardt и Olabode Anise рассказывают, как и какие данные и аналитику использует Figma при работе над инструментом.
Методологии, процедуры, стандарты
5 этапов продуктового процесса
Игорь Кусов из сервиса Профи описывает своё понимание продуктового процесса с точки зрения дизайна интерфейсов. Это вариация концепции discovery + delivery.
Брендинг цифровых продуктов
Making Motion Design Accessible to All
Команда бренда Square вместе с агентством Athletics описала язык анимации для дизайн-системы, а потом создала свой инструмент Otto для работы с анимацией для маркетинга и интерфейсов.
Figma «Nothing Great is Made Alone»
Рекламная кампания Figma, которую они сделали вместе с американским агентством Collins. Базируется на общей айдентике и здорово передаёт силу командной работы.
Ortto
Ребрендинг сервиса маркетинговой автоматизации Ortto от австралийского агентства Christopher Doyle & Co.
Illustration.lol — Editorial illustrations from around the world
Большая коллекция иллюстраций самых разных стилей из разных СМИ и публикаций.
История
Homepage history: Apple.com
История дизайна главной страницы Apple.
Тренды
Designing an Accessible Future, talk at WDC
Geri Reid рассказывает о нововведениях в стандарте поддержки accessibility в вебе WCAG 3.0. Он смотрит на тему гораздо шире и предъявляет более жёсткие требования.
Алгоритмический дизайн
Adobe Sneaks 2022
На недавней конференции Adobe MAX 2022 традиционно показали пачку экспериментов с Adobe Sensei.
- #CleverComposites: Вставляет объекты на фото с учётом композиции, перспективы и освещения.
- #InstantAdd: Вставляет элементы в видео с обтравкой и учётом движения объекта, на который добавили картинку.
- #ProjectMagneticType: Добавляет графические элементы к шрифту, которые потом ведут себя как его часть при изменении надписи.
- #ProjectVectorEdge: Накладывает графические элементы на макеты упаковки, которые органично ложатся на поверхность в любой проекции.
- #ProjectMotionMix: Совмещает движущуюся модель объекта и фото другого объекта, так что он сам начинает двигаться.
- #ProjectBlink: Позволяет редактировать видео выступлений почти как текст — искать по фразе, вырезать ненужное и т.п.
- #ArtisticScenes: Создаёт 3D-модель из фото пространства и накладывает на него любой стиль.
- #ProjectAllofMe: Даёт расширенное редактирование фото: дорисовать недостающее по краям, поменять одежду и т.п.
- #ProjectBeyondTheSeen: Генерирует полную 3D-сцену помещения по фото и позволяет добавлять туда другие объекты.
- #ProjectMadeInTheShade: Работает с тенями на фото — перерассчитывает их при добавлении новых элементов на фото или перемещении по сцене.
AI Stock Images — The Uncanny Valley from ShutterStock to StockAI
Graeme Fulton разбирается в отношении фотобанков к фото и иллюстрациям, созданным с помощью инструментов алгоритмического дизайна. Классические осторожничают (хотя Shutterstock запустил партнёрство с DALL-E 2), но есть новые специализированные.
Вот некоторые из них:
- GhostlyStock: Фотобанк, который базируется на фото и иллюстрациях, сгенерированных с помощью алгоритмического дизайна.
The Illustrated Stable Diffusion
Jay Alammar разобрал на пальцах, как работает Stable Diffusion. Отличное наглядное пояснение механики работы и общего устройства.
Ещё несколько интерфейсов для Stable Diffusion:
- Nolibox Creator: Даёт гибкие настройки для работы с результатом.
И генераторы без информации о модели:
Jasper — The #1 AI Content Platform For Business
Автоматический генератор рекламных текстов в разных форматах — от баннера до промо-сайта. Бонусом можно генерировать и графику.
Phraser — A better way to generate prompts
Сервис помогает генерировать правильные текстовые запросы для инструментов алгоритмического дизайна вроде DALL-E.
Другие помощники в формулировании запроса:
- PromptHero: Каталог изображений, сгенерированных с помощью инструментов генерации изображений по текстовому запросу. Он помогает лучше понимать, какие запросы работают лучше.
- The DALL·E 2 Prompt Book: Методичка в помощь генерации правильных текстовых запросов для инструмента алгоритмического дизайна DALL-E.
- Dallelist: Сервис помогает генерировать правильные текстовые запросы для инструмента алгоритмического дизайна DALL-E. Версия для браузера.
- Midjourney Prompt Generator: Сервис помогает генерировать правильные текстовые запросы для инструмента алгоритмического дизайна Midjourney.
MetaHuman
Дополнение к Unreal Engine, которое позволяет генерировать реалистичных людей с помощью алгоритмического дизайна.
Generated Humans
Большая коллекция людей в полный рост, сгенерированных с помощью алгоритмического дизайна.
Explaining the Unexplainable — Explainable AI (XAI) for UX
Meg Kurdziolek рассказывает о концепции XAI (Explainable AI). Она помогает рассказать пользователям и специалистам о принципах работы систем с искусственным интеллектом.
Generative art Open Graph preview images
Matthew Ström научился генерировать картинки Open Graph для своего блога с помощью алгоритмического дизайна. Он рассказывает, как это работает.
Imagen Video
Генератор видео по текстовому описанию от Google Imagen. Научная публикация.
AI Yōkai
Maciej Lipiec сгенерировал монстров из японского фольклора с помощью Midjourney.
Fan upgrades classic MS-DOS games with AI
Frigis9 осовременил персонажей старых пиксельных игр с помощью Stable Diffusion.
Nabla — The isometric color font by Arthur Reinders Folmer & Just van Rossum
Цветной изометрический шрифт, одна из горячих тем текущих экспериментов с будущим веба.
Для общего и профессионального развития
Shhh. Don’t tell the new designers
Michael McWatters собрал подборку неприятных открытий в карьере дизайнера интерфейсов. Жиза, но не демотиватор.
Подпишитесь на дайджест в Телеграме ― там свежие ссылки появляются каждую неделю, а также в RSS, ВКонтакте или на vc.ru. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
