Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-август 2022.
Паттерны и лучшие практики
How We Redesigned Slack for the iPad
Siddhant Mehta и Akshay Bakshi рассказывают о переосмыслении интерфейса Slack для iPad. Они проанализировали типичные сценарии использования и построили навигацию и логику адаптивности вокруг них.
Designing Better Inline Validation UX
Отличная памятка по проектированию хорошей динамической валидации форм от Виталия Фридмана. Она часто срабатывают неправильно, поэтому лучше использовать её аккуратно.
Accessibility Not-Checklist
Чеклист требований и лучших практик поддержки accessibility.
When life gives you lemons, write better error messages
Jenni Nadler рассказывает о крутой инициативе — команда Wix зарубилась на месяц и переписала тексты всех ошибок в продукте. Они предлагают отличную формулу для хорошего сообщения об ошибке.
Patterns by Maggie Appleton
Maggie Appleton собирает не самые тривиальные интерфейсные паттерны для современных продуктов.
Infinite Scrolling — When to Use It, When to Avoid It
Ещё одна подборка плюсов и минусов бесконечной прокрутки в интерфейсе от Tim Neusesser из Nielsen/Norman Group. Без нового, но структурировано норм.
AR-Onboarding Walkthroughs in Mobile Apps
Sana Behnam и Raluca Budiu анализируют хорошие и неудачные решения в обучающем процессе для приложений с дополненной реальностью.
Product Comparison UX — Always Provide Comparison Features for Spec-Driven Industries
Mark Crowley из Baymard описывает типичные проблемы интерфейса сравнения товаров в интернет-магазинах.
Our Rapid Prototyping Process with Android Automotive
Casper Kessels показывает, как Snapp Automotive быстро тестирует концепты автомобильных интерфейсов.
Typeform: How to offboard users the right way
Сайт Growth Design анализирует проблемы в процессе отказа от подписки Typeform.
Phone Numbers For Web Designers
Onno Westra даёт советы о том, как и какие номера телефонов указывать на сайте, который работает с разными странами.
Designing with Emoji
Советы по использованию эмоджи в интерфейсах от Information Architects. Они приводят много полезной статистики и исследований.
Should I Use a Button or a Link?
Ashlee M Boyer разбирается в ситуациях, когда корректно использовать настоящую кнопку и ссылку, стилизованную под кнопку.
UX tradeoffs: generalization or personalization?
Bar Zukerman рассказывает о нескольких интерфейсных решениях Wix, где пришлось искать баланс между точностью описания элементов дизайна и широким кругом пользователей.
UX analysis of HBO Max: the worst-rated streaming service
Peter Ramsey анализирует интерфейс приложения HBO Max, у которого самые низкие оценки в магазинах приложений среди кино-сервисов.
Business Software UX & NPS Benchmarks (2022)
Jim Lewis и Jeff Sauro обновили своё сравнительное исследование корпоративного ПО. Они сравнили их по метрикам SUS и NPS.
UX and NPS Benchmarks of Business Information Websites (2022)
Jim Lewis и Jeff Sauro провели свежее сравнительное исследование сайтов с отзывами пользователей. Они сравнили их по метрикам SUS и NPS.
Дизайн-системы и гайдлайны
One Formula To Rule Them All — The ROI Of A Design System
Maximilian Speicher и Guido Baena Wehrmann предлагают свою формула расчёта ROI дизайн-системы. Она достаточно сложная, но полезная точка зрения на проблему. Шаблон для расчётов.
Тёмная тема оформления
Designing dark mode — Essential tips on how to design a great dark mode
Памятка по дизайну тёмной темы оформления от Lukas Oppermann. Он проходится по основным аспектам: изображения, пиктограммы, тени, шрифты, цвета.
iPhone 14
Dynamic Island
Одно из самых интересных обновлений в iOS 16. Это интересный способ обыграть технологическое ограничение («чёлку» с камерами) — теперь это чёрная «пилюля», которая связана с интерфейсом по краям. В этой области показываются большие и маленькие уведомления, которые как будто используют это камерное пространство. Правда, Samsung и многие другие современные производители смогли уменьшить эту техническую зону до простой точки, что гораздо полезнее для пользователя.
Token CSS
Генератор токенов. Описываете их в JSON, дальше он экспортирует их в разные форматы.
How we prioritise additions to the GOV.UK Design System
Ciandelle Scollan рассказывает о переосмыслении беклога дизайн-системы Gov.uk — как меняли ранжирование через опрос команд в организации.
A beginner’s guide to Design Tokens
Хорошие иллюстрации логики работы токенов в дизайн-системах от Steve Dennis. Он описывает только цвета, но общий подход понятен.
Introducing Business Design Patterns
Onsi Kahlaoui рассказывает о практике переиспользования бизнес-паттернов в дизайн-системе Societe Generale. Это целые сценарии из серии экранов.
DRUIDS by Datadog
Дизайн-система сервисов компании Datadog.
Storybook
- Amplitude: Плагин помогает анализировать использование живого гайдлайна. Как сами Amplitude анализируют свою дизайн-систему.
- i18next: Как сделать переключатель языков.
Понимание пользователя
Unconscious Biases That Get In The Way Of Inclusive Design
Trina Moore Pervall разбирает, какие предубеждения и искажения могут возникать у продуктовой команды, которая пытается делать инклюзивный дизайн и проводить исследования на тему.
Metaphor Made Me Do It. Why metaphors are an often overlooked
Live Neuron Labs рассказывает о силе метафор для изменения поведения пользователей. Важно правильно упаковать суть продукта или инициативы.
Heather Burns — Understanding Privacy
Smashing Magazine выпускают книгу Heather Burns «Understanding Privacy» о том, как обеспечить безопасность данных пользователей и не только в человечном ключе. Анонс.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Collaborative Journey Mapping for IBM zCX
Andrea Karina Burgueno рассказывает о создании карты взаимодействия для сервиса IBM zCX.
Новости инструментов дизайна интерфейсов
Figma теперь Adobe
Adobe купили продукт за $20 млрд. Это было утро «El Pucanero Bombardini» — баттхёрт в дизайн-сообществе ещё никогда не поднимался до крепкой девятки по шкале Рихтера. Но страхи полностью оправданы — Adobe славится тем, что купленные продукты со временем одеваются в корпоративный мерч «дед инсайд».
Помимо шквала мемов вышел примерно петабайт статей разной степени полезности. Лучшая рефлексия получилась у Graeme Fulton — он говорит, что будущий крупный инструмент дизайна должен иметь открытый код и в целом подход к тому, как ведётся работа в нём. Вспоминали недавние клоны, аналоги и потенциальные заменители типа Penpot. Кто-то решил сдуть пыль со Sketch, но ребята шустро показали, что особо рассчитывать не надо — в начале октября объявили о сокращениях. Ну и при всём уважении к их заслугам (ребята первыми сделали инструмент именно для дизайнеров интерфейсов), в последние годы они сами стали медленными и несмелыми, как Adobe.
Dylan Field говорит, что Figma будет оставаться независимой командой со своими тарифами. Тут, правда, на один удачный пример (GitHub + Microsoft) приходится сотня «ну мы же говорили». Но что ещё остаётся, кроме как верить в лучшее. Но Дилану и команде в любом случае бесконечный земной поклон и вечное место в истории дизайна.
После такого сложно думать о свежих обновлениях, но вот что добавили в сентябре. Развитие свойств компонентов, интеграция с Google Calendar.
Конференция Schema 2022 о дизайн-системах пройдёт в Нью-Йорке, Токио, Лондоне и интернете с 26 октября по 16 ноября.
Статьи
- Steve Dennis: Основные проблемы инструмента, мешающие современной продуктовой работе.
- Deliveroo: Система обложек для проектов. Они учитывают статус и тип задачи.
Devices.css
Шаблоны устройств на чистом CSS. Смартфоны, компьютеры, планшеты, умные часы.
Relight
Сервис позволяет менять освещение на фотографии. Как он работает.
Webflow
Запустили бета-версию логики автоматизации. Можно описать правила, по которым обрабатываются данные от пользователей или сторонних сервисов.
Infinite Canvas
Проект собирает современные инструменты «бесконечного коллаборативного полотна» вроде Miro и FigJam и их историю.
Testing Web Design Color Contrast
Adam Argyle и Charlie Gleason в деталях показывают, как анализировать контраст цвета в браузере с помощью нескольких инструментов.
Пользовательские исследования и тестирование
Ballpark
Marvel запустили отдельный сервис для проведения пользовательских исследований. Опросы, тестирование последовательностей макетов и интерактивных прототипов.
A Taxonomy of Common UX Research Methods
Классификатор методов пользовательских исследований от Jeff Sauro и Jim Lewis. Они делят их на несколько категорий: поведение, отношение и аналитические.
Improving Feedback On the Design Research Team at Klaviyo
Mike Oren из Klaviyo описывает формат сессий критики для пользовательских исследователей. Они ориентировались на метод дизайн-критики, но адаптировали его под свои задачи.
The Context CUEs Framework in Field Studies
Майя Азарова из Nielsen/Norman Group описывает фреймворк CUE (Context, Unspoken, Environment), который помогает проводить этнографические исследования и лучше понять особенности поведения.
Pushing for citations of research repositories in product practice — to get more done with insights
Jake Burghardt рекомендует ориентироваться на цитирование инсайтов из базы знаний о пользовательских исследованиях. Причём в идеале — не просто ссылки, а практическое использование в продуктовых запусках.
Spinning up a research plan for product designers
Joey Lacus показывает на примере своей задаче, как работает новая инициатива Shopify «все дизайнеры интерфейсов умеют проводить простые пользовательские исследования». Это краткая памятка для проверки простых сценариев использования.
Affinity Mapping in UX Research
Sina Schreiber из Condens показывает, как составить карту родства тем из результатов пользовательского исследования. В идеале — в виде совместной рабочей сессии. Это более полная версия её недавней статьи.
How to Break Open the UX Research Recruiting Bottleneck
Lizzy Burnam из User Interviews описывает серию подходов, которые помогают снять геморрой по поиску респондентов для пользовательских исследований. Это самая ненавистная часть работы многих исследователей.
Antipersonas: What, How, Who, and Why?
Sara Ramaswamy из Nielsen/Norman Group рассказывает о методе анти-персонажей. Он позволяет лучше понять тех, кто может использовать продукт в злонамеренных целях.
AI and Machine Learning — The Power Behind Today’s Best Customer-Research Platforms
Kelsey Foster описывает несколько реальных и потенциальных способов анализа данных пользовательских исследований с помощью алгоритмической обработки.
An essential guide to Research Operations
Мини-фреймворк по ResearchOps от UserZoom.
Maintaining the Privacy and Security of Research Participants’ Data
Памятка Samhita Tankala из Nielsen/Nprman Group по защите персональных данных респондентов пользовательских исследований.
Busting the Myths About Agile Development and User Research
Anusha Pichumani описывает когнитивные искажения, которые могут вести пользовательские исследования по неверному пути. И даёт советы, как избежать их.
Surveys for User Research — Best Practices for Better Insights
Базовая памятка Rachell Lee из User Interviews по проведению опросов.
How many players do I need for a playtest
Советы Steve Bromley по количеству респондентов для игровых тестов на разных этапах работы над игрой. В целом не сильно отличается от общих практик пользовательских исследований, но со своими нюансами.
Визуальное программирование и дизайн в браузере
The breakpoints we tested in 2021 & 2022, and the ones to test in 2023
Сервис Polyplane анализирует популярные breakpoints для адаптивного дизайна. Они собрали несколько разных срезов на текущий момент.
Yes, accessibility is also a backend concern
Eric Bailey разбирает ситуации, в которых accessibility — в том числе забота бек-енда.
Новые скрипты
Метрики и ROI
Better performance = better design
Mauricio Wolff рассказывает о наборе метрик UPPer (User Perceived Performance), которые помогают оптимизировать важные сценарии использования вокруг производительности в разных аспектах.
Дизайн-менеджмент и DesignOps
The outsized role culture plays in attracting design talent
Andrew Hogan делится результатами исследования Figma среди дизайн-менеджеров и кадровиков о том, как правильно привлекать и нанимать толковых дизайнеров. Презентация.
Why designers quit
Matej Latin опросил 156 дизайнеров интерфейсов на тему причин их ухода из компании. Неплохой срез основных причин в зависимости от уровня специалиста — отсутствие карьерного роста, неудовлетворённость результатами работы.
How to Get Headcount — Four tips to help make your case
Советы Design Dept на тему получения бюджета на найм дизайнеров.
Lessons Learned As A Designer-Founder
Dave Feldman рассказывает, как изменился его подход к построению дизайн-процесса, когда он перешёл на роль дизайнера-основателя стартапа Miter. Спойлер: он сильно упростился.
Think introverted; act extroverted
Немного советов Shaziya Tambawala из Atlassian для дизайн-менеджеров, которые чувствуют себя интровертами. Как быть полезными и эффективными на этой роли.
Making the leap to management
Простые советы Mia Blume тем, кто только что стал дизайн-менеджером.
Командное взаимодействие
Dot Coding — An Activity to Elicit Perspectives in UX Workshops
Инструкция Kate Kaplan из Nielsen/Norman Group по методу кодирования результатов воркшопа точками. Он помогает выделить категории и подсветить важные места.
Кейсы
The Accessibility And Usability Journey Of Drupal’s Primary Navigation
Mike Herchel рассказывает, как поддержали accessibility в новом главном меню Drupal.
Брендинг цифровых продуктов
Artboard
Ребрендинг инструмента дизайна Artboard от турецкого агентства Fol.
YCBM
Ребрендинг календаря You Can Book Me внутренними силами.
KasperkyOS
Айдентика операционки KasperskyOS от российского агентства ONY.
Noom
Ребрендинг сервиса заботы о личном здоровье Noom от американского агентства Gretel.
The Verge
Ребрендинг технологического новостного сайта The Verge внутренними силами (подробнее на Brand New).
TaskRabbit
Ребрендинг сервиса поиска исполнителей простых задач TaskRabbit от американского агентства Hyphenated.
Alludo (экс-Corel)
Ребрендинг Corel (теперь — Alludo) от британского агентства Design Studio.
Hootsuite
Ребрендинг сервиса управления соцсетями Hootsuite от международного агентства Prophet.
RED
Айдентика страхового сервиса RED от российского агентства ONY.
История
The Twisted Life of Clippy
Ещё одна шикарная история «Скрепыша» из MS Office. Он стал объектом стёба за свою назойливость, но в основе него лежала крутая теория социализации взаимодействия человека с компьютером. Это было критично в 90х — всего около 15% людей имели персональные компьютеры, так что нужно было обучить работе с ними почти всю цивилизацию.
Тренды
The aesthetics of our new fictions
Caio Braga, Fabricio Teixeira и Luciano Infanti глубоко копают в корни направлений дизайна. Как они связывают историю и представления о будущем на примере нескольких текущих и прошлых трендов.
Алгоритмический дизайн
Stable Diffusion летит ракетой
- Выгрузка набора обучающих данных, который использует Stable Diffusion. Как его получили.
- Ветка, которая позволяет генерировать текстуры по текстовому описанию.
Make-A-Video
Генератор видео по текстовому описанию от Меты.
DALL·E: Introducing Outpainting
Появилась возможность outpainting. Она расширяет исходную иллюстрацию или фото с сохранением стиля. Кстати, больше не надо ждать в очереди, чтобы попробовать DALL-E. Зарегистрироваться.
Нейросети на службе офлайн-бизнеса
Как кондитерская «Тортишная» сделала упаковку шоколадок с помощью Midjourney.
CopyMonkey
Ещё один генератор текстов для соцсетей, сайтов и интернет-магазинов. Это развитие их проекта 2021 года со Сбером.
Fallout 2
Misha_Vozduh прокачал персонажей из классической игры из пикселей в реалистичных через Stable Diffusion.
Alexandra Schmidt — Deliberate Intervention. Using Policy and Design to Navigate the Harms of New Technology
Rosenfeld Media готовят к выходу книгу Alexandra Schmidt «Deliberate Intervention» о том, как заранее делать новые технологии соответствующим общепринятым нормам и законам. Интервью.
First Batch of Color Fonts Arrives on Google Fonts
В Google Fonts появились первые цветные шрифты. Это одна из потенциально горячих новых штук — они позволяют раскрашивать разные части символа.
Для общего и профессионального развития
A Book Apart Briefs Anthology
A Book Apart выпустили антологию своих ключевых книг на тему дизайна и контента, проектирования интерфейсов и разработки. По сути это 12 небольших книг, собранных в один трёхтомник.
Sameera Kapila — Inclusive Design Communities
A Book Apart готовят к выходу книгу Sameera Kapila «Inclusive Design Communities» о том, как сделать дизайн-сообщество инклюзивным на любом уровне.
Finding your T-Shape as a Generalist Designer
Толковые мысли двух Т-образных дизайнеров Spotify о том, как лучше стать таким генералистом и в чём сила комбинации нескольких специальностей.
Подпишитесь на дайджест в Телеграме, ВКонтакте или на vc.ru ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.