Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге
Юрий Ветров об интерфейсах
Юрий Ветров об интерфейсах
  • Главная
  • Статьи
  • Дайджест
  • Конференции
  • Дизайн-менеджмент
  • Дизайн-системы
  • Заметки
  • О блоге

Дайджест продуктового дизайна, январь 2021

  • 10 февраля 2021

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

Конференция «Паттерны дизайн-менеджмента» №3

25 февраля курирую онлайн-конференцию «UX-марафон №23: Паттерны дизайн-менеджмента». Я давно и много пишу на тему, но хотелось пойти дальше статей и подборок. Получился крепкий состав из руководителей: Дмитрий Быков (Яндекс), Ольга Сартакова (Redmadrobot), Александр Ковальский (Creative People), Денис Кортунов (Acronis), Миша Пименова (Mish Design) и я (Райффайзенбанк). В программе практические и подробные рассказы о найме, адаптации и развитии дизайнеров, аутстаффинге и распределённых командах, HR-бренде.

Лучшие продуктовые дизайн-команды в России: 2020

Зимой запустил исследование отношения к продуктовым дизайн-командам в России. Наконец-то собрал результаты. Участвовало 1200 человек — почти как в 2019 и в два раза больше, чем в 2018. Вот, например, топ-10 по вопросу «В каких компаниях вам было бы чему научиться как дизайнеру»:

  1. Яндекс
  2. Тинькофф
  3. Miro
  4. Альфа-Банк
  5. Mail.ru Group
  6. Сбер
  7. VK
  8. Raiffeisen Bank
  9. Aviasales
  10. 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

Иллюстратор Rogie собрал примеры иллюстраций, сделанных в Figma. Joey Lamelas выложил свой пример.

Плагины

  • Morph: Применяет эффекты скеоморфизма, неона, глитча, отражения и стекла к любому объекту.
  • HCL Easy: Генератор цветовых палитр с учётом пользователей с ограниченными возможностями от команды Mos.ru.
  • Layer Styles: Позволяет сохранять целые наборы стилей (например, всё для попапа), что сильно облегчает сборку цельных компонентов.
  • Motion: Научился экспортировать анимированные SVG.
  • Comments: Стороннее приложение для комментирования макетов Figma с телефонов.
  • Clean Document: Плагин помогает системно подчистить макет (убрать скрытые слои, переименовать, округлить пиксели, отказаться от групп из одного объекта и т.п.).
  • Экспериментальный плагин от Jordan Singer превращает скриншот интерфейса в разбитый по слоям макет.

Шаблоны

  • Дизайн-команда Dropbox сделала базовый курс для недизайнеров в компании. Они опубликовали обучающий шаблон.
  • Презентации от сервиса Blush.
  • Диван для отдыха курсоров от Kevin Wilson.

Статьи

  • Саша Окунев сделал самый полный список всех команд и клавиш. Он готовит обновлённую версию своей мини-книги об инструменте.
  • Простой курс от Pablo Stanley.
  • Расчёт стоимости владения разными инструментами дизайна от Alexander Fandén. Они переезжали на Figma и оправдывали затраты.
  • Организация библиотеки иконок от Андрея Насонова.

Anima

Памятка по работе от Miroslav Bekyarov.

ButtonBuddy

Простой способ наглядно проверить цветовой контраст кнопки.

Sketch 71 (бета)

В бета-версии появилась совместная работа над макетом (пока только для подписчиков командной версии). Также улучшена работа с сеткой, можно импортировать данные из файла JSON.

Shutterstock

Покупают крупнейший магазин 3D-моделей TurboSquid. Всё меньше поводов уходить из этого единого окна.

Snowflake Generator

Генератор снежинок в браузере.

Rive

Инструмент для анимации игр и интерфейсных иллюстраций.

Axure RP 10 (бета)

Обновлённый интерфейс, улучшенная работа с состояниями и адаптивностью компонентов, обработка ошибок, списки и таблицы на основе данных и другое. Инструмент всё ещё хорошо дополняет Figma для юзабилити-тестирования сложных прототипов.

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

Ребрендинг Twitter от французского агентства Irradié. Правда, это скорее для материалов рекламных кампаний, а не интерфейса.

Depositphotos

Ребрендинг фотобанка Depositphotos от украинского агентства CREVV.

История

Web History, Chapter 6: Web Design

Jay Hoffmann описывает историю дизайна в вебе через первые знаковые сайты и их авторов, здорово продвинувших вперёд профессию и границы возможного.

Тренды

CES 2021

Ежегодная выставка технологических чудес и экспериментов CES 2021 в этом году прошла 11-14 января в интернете.

Журналистам устройства, конечно, не пощупать. Но организаторы справлялись как могли — например, Fiat Chrysler устроили виртуальный стенд, а часть презентации LG вёл виртуальный персонаж (у неё даже есть Instagram).

Выпускать всякую дичь сейчас рискованно, поэтому всё было ровнее и более прилизано, чем в обычный год. Но и в таком формате нашлось интересное:

Гибкие экраны

Моя любимая тема гибких экранов в этом году расширилась растягивающимися устройствами:

Планшет от TCL (видео) и телефон LG.

Двухэкранные ноутбуки ASUS. Сочетают обычную клавиатуру и доп.экран над ней.

Ноутбук Lenovo с дополнительным экраном из электронной бумаги.

Windows 10X больше не фокусируется на двойных экранах, это просто упрощённая версия основной ОС.

Автомобильные интерфейсы

Показывали в основном известные производители, а не дерзкие новички (о которых и не вспомнишь через год):

Cadillac делают новый интерфейс вместе с легендарной дизайн-студией Territory Studio.

Mercedes показали новое поколение своего интерфейса MBUX (много картинок).

BMW тизернули обновлённый iDrive.

Кастомизированная Alexa. Будет встроена в Lamborghini и Rivian.

Видение будущего с наложением подсказок на лобовое стекло от Panasonic.

Harman предлагают улучшить опыт прослушивания концертов на удалёнке из машины.

Телевизоры

Как всегда, много. Из тех, что не просто лучше по характеристикам:

Новые концепты прозрачных экранов от LG: выезжающий телевизор у кровати или в ресторане.

Пульт Samsung с солнечной батареей — заряжается и от домашнего освещения.

В телевизорах LG будет предустановлена Google Stadia.

Телевизоры Samsung помогают в домашних тренировках.

Компьютеры

Наконец-то снова растут в продажах благодаря обустройству домашних офисов. Вот что было интересного:

Нетбук Lavie Mini, который превращается в игровую приставку.

Тачпад Sensel, понимающий точность и силу нажатия.

Камера под экраном в ноутбуках Samsung.

Ноутбук Avita с тремя веб-камерами для стримеров.

Дезинфекция для клавиатуры.

Виртуальная реальность

Уже никого не вдохновляет, но очки дополненной реальности каждый год презентуют:

Умные очки TCL, Lenovo и Vuzix.

Управление роботом с помощью шлема и джойстиков виртуальной реальности.

Умные часы и носимые устройства

Хайп тоже позади, так что жиденько:

Умные часы пропали почти целиком. Только Fossil показывает простые обновления.

Кольцо ArcX с джойстиком помогает управлять телефоном.

Браслет Mudra Band для Apple Watch позволяет управлять ими без прикосновения к экрану.

Накладки Jlab Audio на очки делают из них наушники.

Чуть дальше от интерфейсов было много разного: коробки для доставки, технологичные маски, очередные умные зеркала и прочая, и прочая, и прочая.

Следующий 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 год

-5,9%

падение продаж смартфонов в мире

11%

рост продаж компьютеров в мире

1B

используется iPhone в мире

2,3%

рост продаж смартфонов в России

19%

рост продаж планшетов в России

Алгоритмический дизайн

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 или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.

Юрий Ветров

Директор по бренду и дизайну Muse Group, ранее — Райффайзен Банка и Mail.ru Group. Я руковожу несколькими командами, которые отвечают за дизайн бренда и интерфейсов. Веду блог и курс о дизайн-менеджменте, делаю дайджесты, со-организовывал Fintech Design Conf, Mail Design Conf и московский Dribbble Meetup, Russian Design Cup, читаю лекции в Британке, курирую курс Future London Academy в Лондоне, публикуюсь на Smashing Magazine, UXmatters и UX Collective. Подробнее обо мне.

Другие статьи по теме
View Post
  • Дайджест

Дайджест продуктового дизайна, декабрь 2022

  • Юрий Ветров
  • 22 января 2023
Дайджест продуктового дизайна, ноябрь 2022
View Post
  • Дайджест

Дайджест продуктового дизайна, ноябрь 2022

  • Юрий Ветров
  • 9 декабря 2022
Дайджест продуктового дизайна, октябрь 2022
View Post
  • Дайджест

Дайджест продуктового дизайна, октябрь 2022

  • Юрий Ветров
  • 16 ноября 2022
Дайджест продуктового дизайна, сентябрь 2022
View Post
  • Дайджест

Дайджест продуктового дизайна, сентябрь 2022

  • Юрий Ветров
  • 16 октября 2022
Дайджест продуктового дизайна, август 2022
View Post
  • Дайджест

Дайджест продуктового дизайна, август 2022

  • Юрий Ветров
  • 1 сентября 2022
Дайджест продуктового дизайна, июль 2022
View Post
  • Дайджест

Дайджест продуктового дизайна, июль 2022

  • Юрий Ветров
  • 8 августа 2022
Дайджест продуктового дизайна, июнь 2022
View Post
  • Дайджест

Дайджест продуктового дизайна, июнь 2022

  • Юрий Ветров
  • 10 июля 2022
Дайджест продуктового дизайна, май 2022
View Post
  • Дайджест

Дайджест продуктового дизайна, май 2022

  • Юрий Ветров
  • 12 июня 2022

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Юрий Ветров об интерфейсах
Дизайн-менеджмент цифровых продуктов, © 2007-2018

Input your search keywords and press Enter.