Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-декабрь 2020.
Конференция «Паттерны дизайн-менеджмента» №3
25 февраля курирую онлайн-конференцию «UX-марафон №23: Паттерны дизайн-менеджмента». Я давно и много пишу на тему, но хотелось пойти дальше статей и подборок. Получился крепкий состав из руководителей: Дмитрий Быков (Яндекс), Ольга Сартакова (Redmadrobot), Александр Ковальский (Creative People), Денис Кортунов (Acronis), Миша Пименова (Mish Design) и я (Райффайзенбанк). В программе практические и подробные рассказы о найме, адаптации и развитии дизайнеров, аутстаффинге и распределённых командах, HR-бренде.
Лучшие продуктовые дизайн-команды в России: 2020
Зимой запустил исследование отношения к продуктовым дизайн-командам в России. Наконец-то собрал результаты. Участвовало 1200 человек — почти как в 2019 и в два раза больше, чем в 2018. Вот, например, топ-10 по вопросу «В каких компаниях вам было бы чему научиться как дизайнеру»:
- Яндекс
- Тинькофф
- Miro
- Альфа-Банк
- Mail.ru Group
- Сбер
- VK
- Raiffeisen Bank
- Aviasales
- Skyeng
Паттерны и лучшие практики
Removing Nested Modals From Digital Products
Joseph Mueller разбирает альтернативы вложенным модальным окнам. Они ломают понятность навигации об колено и запутывают пользователя.
Design Principles
Коллекция принципов дизайна разных компаний и дизайн-команд от Jeremy Keith.
Screenlane — Web & mobile UI design inspiration
Коллекция паттернов мобильных приложений и сайтов.
A UX Analysis of Cyberpunk 2077’s HUD
Maria Meireles разбирает интерфейс игры Cyberpunk 2077. Она подсвечивает сильные и слабые решения, предлагает способы улучшить их.
Maintain Consistency and Adhere to Standards
Nielsen/Norman Group делают обзоры каждой из 10 ключевых интерфейсных эвристик Якоба Нильсена. Вышла №4 (целостность и соответствие стандартам).
Creating a Signal account — A UX case study
Peter Ramsey разбирает процесс встречи нового пользователя в мессенджере Signal. Спойлер: всё плохо.
6 Ways to Improve the Relevance of Cross-Sells in the Cart (52% of Desktop Sites Don’t Do Enough)
Sally Collins из Baymard Institute даёт рекомендации по блоку кросс-продаж в корзинах интернет-магазинов. Как не навредить текущей продаже в попытках повысить сумму заказа.
UX and Net Promoter Benchmarks of Auto Insurance Websites
Jeff Sauro и Jim Lewis анализируют сайты американских автостраховых.
Дизайн-системы и гайдлайны
Дизайн-система Ростелекома
Дизайн-система Ростелекома. Правда, большинство компонентов пока в виде скриншотов.
Brainly Pencil
Дизайн-система образовательного сервиса Brainly. Включает раздел с описанием бренда.
Как быстро создать и безболезненно внедрить большой набор иконок для цифровых продуктов и сервисов: опыт Райффайзенбанка
Дмитрий Мясников из Райффайзенбанка рассказывает об обновлении большого набора иконок в 500 пиктограмм. Процесс создания и выкатки в компонентную дизайн-систему и шаблоны в Figma на замену предыдущему стилю.
ViennaUI — Raiffeisenbank Design System
Компонентная дизайн-система Райффайзенбанка для веба.
Понимание пользователя
The no-mouse challenge: Taking the keyboard navigation red pill
Denis Boudreau предлает дизайнерам периодически использовать сайты через навигацию на клавиатуре. Это лучше помогает понять, как живётся пользователям с ограниченными возможностями.
Карта эмпатии — что это, зачем и как подготовиться
Пошаговая инструкция Евгении Крупиной из Контура по проведению рабочей сессии для создания карты эмпатии. Описано на примере реальной задачи.
What is Jobs To Be Done?
Jim Kalbach сделал обзор своего понимания Jobs to Be Done. Он выделяет три главных критерия успешного применения: никаких привязок к технологии или конкретному решению, правильный масштаб проблемы и отделение целей от результатов.
Companies on Social Media — 6 Types of User Interactions with Business
Alita Joyce из Nielsen/Norman Group описывает 6 моделей поведения пользователей относительно страниц компаний в соц.сетях.
Информационная архитектура, концептуальное проектирование, контент-стратегия
Using “How Might We” Questions to Ideate on the Right Problems
Maria Rosala из Nielsen/Norman Group даёт советы по правильной формулировке «How Might We». Они должны идти от проблемы и не описывать решение в лоб.
Impact-Centered Design — Introducing an Integrated Framework of the Psychological and Behavioral Effects of Design
Steven Fokkinga, Pieter Desmet и Paul Hekkert предлагают фреймворк, связывающий психологические и поведенческие аспекты дизайна. Он затрагивает самые разные уровни от базовых характеристик продукта до влияния на качество жизни в целом.
Новые инструменты дизайна интерфейсов
Figma
Улучшена работа со стилями. Их можно группировать, сортировать и упорядочивать.
Did somebody say...better style management in @figmadesign?
Today we're shipping the ability to:
– Group styles in collapsible sections
– Reorder styles
– Create sub (!) groups of style
– Use the styles panel in its new collapsible beauty
🎨 #FigmaTip pic.twitter.com/iyIo3UtKqb
— luis. (@disco_lu) January 12, 2021
Плагины
- Morph: Применяет эффекты скеоморфизма, неона, глитча, отражения и стекла к любому объекту.
- HCL Easy: Генератор цветовых палитр с учётом пользователей с ограниченными возможностями от команды Mos.ru.
- Layer Styles: Позволяет сохранять целые наборы стилей (например, всё для попапа), что сильно облегчает сборку цельных компонентов.
- Motion: Научился экспортировать анимированные SVG.
- Comments: Стороннее приложение для комментирования макетов Figma с телефонов.
- Clean Document: Плагин помогает системно подчистить макет (убрать скрытые слои, переименовать, округлить пиксели, отказаться от групп из одного объекта и т.п.).
- Экспериментальный плагин от Jordan Singer превращает скриншот интерфейса в разбитый по слоям макет.
Шаблоны
- Дизайн-команда Dropbox сделала базовый курс для недизайнеров в компании. Они опубликовали обучающий шаблон.
Статьи
- Саша Окунев сделал самый полный список всех команд и клавиш. Он готовит обновлённую версию своей мини-книги об инструменте.
- Простой курс от Pablo Stanley.
- Расчёт стоимости владения разными инструментами дизайна от Alexander Fandén. Они переезжали на Figma и оправдывали затраты.
- Организация библиотеки иконок от Андрея Насонова.
ButtonBuddy
Простой способ наглядно проверить цветовой контраст кнопки.
Sketch 71 (бета)
В бета-версии появилась совместная работа над макетом (пока только для подписчиков командной версии). Также улучшена работа с сеткой, можно импортировать данные из файла JSON.
.png)
Shutterstock
Покупают крупнейший магазин 3D-моделей TurboSquid. Всё меньше поводов уходить из этого единого окна.
Snowflake Generator
Генератор снежинок в браузере.
Axure RP 10 (бета)
Обновлённый интерфейс, улучшенная работа с состояниями и адаптивностью компонентов, обработка ошибок, списки и таблицы на основе данных и другое. Инструмент всё ещё хорошо дополняет Figma для юзабилити-тестирования сложных прототипов.
.jpg)
InVision
Отличный обзор взлёта и падения от Sean Dexter. Компания увлеклась маркетингом в ущерб самому продукту и сильно просела в востребованности.
Michael McWatters из HBO Max продолжил тему и размышляет о причинах провала InVision Studio. Компания расфокусировалась по множеству направлений и не занималась реально критическими стратегическими направлениями.
Пользовательские исследования и тестирование
The State of User Research Report 2020
Сервис User Interviews провёл опрос 336 UX-исследователей по множеству тем. Получился интересный срез текущего состояния отрасли: методы, орг.струкутры, инструменты и т.п.
Количественные и качественные методы исследований: инструкция
Шикарная памятка Светланы Ратнер из Контура по методам качественных и количественных исследований.
How to improve the UX research process in b2b
Максим Королёв из Acronis описывает процесс пользовательских исследований для B2B-клиентов. Как проходит рекрутинг, демократизация исследований и ведётся база знаний.
Как мы прокачали пользовательские интервью на удалёнке
Борис Юзефпольский рассказывает о перестройке пользовательских исследований в Учи.ру на полную удалёнку. Что сломалось в процессе и чем компенсировалось.
Five Reasons to Use Open-Ended Questions
Jeff Sauro и Jim Lewis перечисляют ситуации в пользовательских исследованиях, в которых помогают открытые вопросы.
Визуальное программирование и дизайн в браузере
Flash Is Dead
31 декабря 2020 года не стало Adobe Flash. Tiffany Brown написала небольшой некролог, подсветив его достижения, а не только критику.
Seven ways to test for accessibility of your web site with browser Developer Tools
Christian Heilmann показывает, как пользоваться встроенным инспектором кода в браузерах Chromium для анализа проблем accessibility.
Accessible Web Animation — The WCAG on Animation Explained
Val Head даёт советы по учёту требований accessibility для анимации в вебе.
How to avoid layout shifts caused by web fonts
Памятка Simon Hearne по оптимизации загрузки шрифтов в вебе.
Дизайн-менеджмент и DesignOps
Советы руководителям дизайн-команд — как развивать, мотивировать и вдохновлять своих дизайнеров
Ольга Сартакова рассказывает о способах развития дизайнеров в Redmadrobot. Карта компетенций, менторство, обмен знаниями, эксперименты и другие подходы.
Typical Design Team Structures and Alignment
Kate Kaplan рассказывает об исследовании дизайн-команд от Nielsen/Norman Group. Оно подсвечивает интересные корреляции между форматом интеграции дизайнеров и размером компании, функциональному расположению и влиянию на разные части работы продукта.
Measuring, Defining and Improving Productivity — The Design Productivity Blueprint
Дизайн-команда Spotify оптимизирует полезное время дизайнеров, которое они тратят на продуктовые задачи, а не обустройство рабочего окружения и решение бытовых вопросов. Они анализируют рабочие процессы разных команд и предлагают точки улучшения. Шаблон в Figma.
Orienting to Value
Scott Sehlhorst предлагает свою модель зрелости продуктовых команд. От базового микро-менеджмента в выдаче результата до качественных изменений и создания ценности.
Key Drivers for a Customer-Focused Implementation
Melissa Lemberg описывает подход Salesforce к комплексному изменению отношения к пользователям в компаниях. Цифровая трансформация должна затрагивать не только инструменты, но и то как люди работают и думают в целом.
Different ways a Matrix Diagram can help you prioritize and make design decisions
Пример использования матрицы 2×2 для ранжирования в разных интерфейсных задачах от Xindeling Pan.
Командное взаимодействие
Flexport UX Values
Принципы дизайна команды Flexport.
Продуктовый менеджмент и аналитика
Mapping User Stories in Agile
Anna Kaley из Nielsen/Norman сделала обзор методики user story mapping. Формат, цели, связка с customer journey map.
Кейсы
Quantifying UX Improvements: A Case Study
Kate Moran из Nielsen/Norman Group рассказывает о редизайне навигации интернет-магазина Marketade. Хорошая история комбинации пользовательских исследованиях для улучшения информационной архитектуры.
Брендинг цифровых продуктов
Marco Spies & Katja Wenger — Branded Interactions: Marketing Through Design in the Digital Age
Вышло второе издание книги Marco Spies и Katja Wenger «Branded Interactions». Она посвящена связи бренда с интерфейсом.
Придумать и перепридумать — как мы разрабатывали айдентику для Яндекс Go
Рассказ об обновлённом брендинге Яндекс.Такси, выросшем в комбинированный сервис Яндекс.Go. Его делали внутренняя команда Magic Camp и студия ONY.
Semrush
Ребрендинг SEO-сервиса Semrush от российского агентства Щука.
Ребрендинг Twitter от французского агентства Irradié. Правда, это скорее для материалов рекламных кампаний, а не интерфейса.
Depositphotos
Ребрендинг фотобанка Depositphotos от украинского агентства CREVV.
История
Web History, Chapter 6: Web Design
Jay Hoffmann описывает историю дизайна в вебе через первые знаковые сайты и их авторов, здорово продвинувших вперёд профессию и границы возможного.
Тренды
CES 2021
Ежегодная выставка технологических чудес и экспериментов CES 2021 в этом году прошла 11-14 января в интернете.
Журналистам устройства, конечно, не пощупать. Но организаторы справлялись как могли — например, Fiat Chrysler устроили виртуальный стенд, а часть презентации LG вёл виртуальный персонаж (у неё даже есть Instagram).
Выпускать всякую дичь сейчас рискованно, поэтому всё было ровнее и более прилизано, чем в обычный год. Но и в таком формате нашлось интересное:
Гибкие экраны
Моя любимая тема гибких экранов в этом году расширилась растягивающимися устройствами:
Двухэкранные ноутбуки ASUS. Сочетают обычную клавиатуру и доп.экран над ней.
Windows 10X больше не фокусируется на двойных экранах, это просто упрощённая версия основной ОС.
Автомобильные интерфейсы
Показывали в основном известные производители, а не дерзкие новички (о которых и не вспомнишь через год):
Mercedes показали новое поколение своего интерфейса MBUX (много картинок).
Кастомизированная Alexa. Будет встроена в Lamborghini и Rivian.
Телевизоры
Как всегда, много. Из тех, что не просто лучше по характеристикам:
Новые концепты прозрачных экранов от LG: выезжающий телевизор у кровати или в ресторане.
Пульт Samsung с солнечной батареей — заряжается и от домашнего освещения.
В телевизорах LG будет предустановлена Google Stadia.
Телевизоры Samsung помогают в домашних тренировках.
Компьютеры
Наконец-то снова растут в продажах благодаря обустройству домашних офисов. Вот что было интересного:
Нетбук Lavie Mini, который превращается в игровую приставку.
Виртуальная реальность
Уже никого не вдохновляет, но очки дополненной реальности каждый год презентуют:
Умные часы и носимые устройства
Хайп тоже позади, так что жиденько:
Умные часы пропали почти целиком. Только Fossil показывает простые обновления.
Браслет Mudra Band для Apple Watch позволяет управлять ими без прикосновения к экрану.
Чуть дальше от интерфейсов было много разного: коробки для доставки, технологичные маски, очередные умные зеркала и прочая, и прочая, и прочая.
Следующий CES пока стоит как офлайновый на 5-8 января. MWC в прошлом году отменили вообще и непонятно, смогут ли сделать в этом. Так что производители смогут потратить больше времени на полировку текущих устройств, а не концепты-однодневки (на самом деле нет).
Pinterest Predicts 2021
Прогноз трендов 2021 года от Pinterest. Он полон реальных инсайтов — они смотрят на то, что люди собирают. Много жирнейших нишевых идей о том, как домашняя работа меняет многие аспекты жизни, причём не банальщина и капитанство.
The Year in Illustration 2020
New York Times собрали большую подборку необычных иллюстраций из газет и журналов за 2020 год.
Avocode Design Trends Predictions for 2021
Прогноз трендов от Avocode. Поучаствовал в нём в хорошей компании.
Статистика рынка за 2020 год
Алгоритмический дизайн
DALL·E — Creating Images from Text
Генерация фотографий и иллюстраций реальных (например, стул в форме авокадо) и выдуманных объектов (например, очеловеченный дайкон выгуливает собаку) по текстовому описанию на базе GPT-3.
Голосовые интерфейсы
«Волшебник страны Оз» или как провести юзабилити-тестирование голосового интерфейса
Сергей Алексеев из Риалвеб описывает метод «Волшебник Изумрудного города» для юзабилити-тестирования голосовых интерфейсов.
Ditherpunk — The article I wish I had about monochrome image dithering
Surma исследует занятный тренд дизеринга изображений.
Take-Over Moments — The Hardest Design Problem of Semi-Autonomous Cars
Casper Kessels размышляет на тему возврата управления человеку в автономных машинах.
Analyzing the new tesla UI 🎄“2020 48 26” 🎄
Обзор обновлённого интерфейса Tesla от Diana López с кучей скриншотов.
Для общего и профессионального развития
Leading with Craft
UX Collective выпустили серию статей о путях развития дизайнера вне менеджмента. Во многих компаниях это единственный вариант карьерного роста, но эксперты также должны цениться и взращиваться.
Grow your design career as an individual contributor, part 1
Дизайнеры Facebook рассказывают о карьерном пути конечного исполнителя в компании, без ухода в менеджмент. Продолжение.
Staff Design
Brian Lovin запустил серию интервью с дизайнерами, которые остались на карьерном пути конечного исполнителя, а не ушли в менеджмент. И это не мешает им расти дальше.
Applying the Panofsky method to your own design
Chris R Becker предлагает метод немецкого историка искусства Erwin Panofsky для анализа дизайна.
Deadly biases every designer needs to live with
Занятный набор профессиональных искажений дизайнеров от Jerry Chang. Они являются тёмной стороной основных навыков и точек фокуса.
Люди и компании в отрасли
Ueno + Twitter
Одна из самых ярких дизайн-студий Ueno продались Twitter. Коронавирусный кризис крепко подкосил их бизнес.
Salesforce Commitment to Relationship Design
Сайт о дизайне в Salesforce.
Clear(Left)
Основатель Clearleft (одного из самых сильных британских UX-агентств) Andy Budd ушёл из компании после 15 лет. Последние несколько лет он занимался перестройкой управленческой структуры для этого и передал организацию в управление сотрудникам. По степени вклада в отрасль своими конференциями и полезными материалами они всегда были на уровне тех же Adaptive Path. Интересно, что будет дальше.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме, vc.ru или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.
