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

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

  • 12 апреля 2021

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

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

Паттерны и лучшие практики

A Complete Guide To Accessible Front-End Components

Ультимативный список интерфейсных компонентов от Виталия Фридмана, которые свёрстаны с учётом требований accessibility.

Finding conversations on Clubhouse — A UX case study

Peter Ramsey разбирает интерфейс Clubhouse и то, насколько он помогает получать качественный контент.

The Search Before the Search — Keyword Foraging

Kate Moran из Nielsen/Norman Group описывает модель поведения пользователей «собирательства ключевых слов» при поиске в интернете. Она возникает, если человек не знает, как именно искать объект (например, это редкий термин для стиля одежды).

Designing for the Breakup

Liz Tan размышляет на тему здорового поведения интернет-сервисов, которые знают своё место в жизни пользователя и не пытаются жить «отныне и вовеки веков, пока смерть не разлучит нас».

10% of E-Commerce Sites Have Product Descriptions That Are Insufficient for Users’ Needs

Alex Krzyminski из Baymard анализирует важность хорошего описания товаров в интернет-магазинах.

Shifting from Consumer UX Design to Enterprise Product Design

Dan Fornal из Slack показывает, как изменил свой подход к дизайну для администраторов, потребности которых отличаются от обычных пользователей.

6 List Item Attributes to Include for Cross-Sells (68% of Desktop Sites Are Missing One or More)

Sally Collins из Baymard напоминает о ключевых атрибутах карточки продукта в блоках кросс-продаж интернет-магазинов.

Cookie Consent Speed.Run

Угарная игра пародирует идиотские бюрократические окна согласия с требованиями GDPR.

How to write inclusive, accessible digital products

Советы Nick DiLallo по написанию текстов в интерфейсе, которые инклюзивны.

California is banning companies from using ‘dark patterns,’ a sneaky website design that makes things like canceling a subscription frustratingly difficult

Штат Калифорния запретил использование тёмных паттернов. Правда, конкретных приёмов там не приводится.

Дизайн-системы и гайдлайны

The Component Gallery

Каталог типовых компонентов дизайн-системы, для каждого из которых есть куча примеров из реальных внедрений. Здорово помогает быстро сравнить подходы.

Тёмная тема оформления

Dark mode in 5 minutes, with inverted lightness variables

Lea Verou показывает по шагам, как быстро реализовать тёмную тему оформления через цветовую модель HSL. Правда, параметр яркости в ней варьируется от цвета к цвету, так что он советует похожую по смыслу модель LCH.

Building Dark Mode

Robin Rendle рассказывает о создании тёмной темы оформления для сервиса Sentry.

Redesigning the illustration style at Shopify

Holly Schofield рассказывает о переработке единого стиля иллюстраций Shopify. До этого у них была шикарная и так же единая стилистика, но они посчитали её отвлекающей от основных задач владельца интернет-магазина.

11 Fantastic Benefits of Design Systems

Кажется, одна из самых полных и толково описанных статей о пользе внедрения дизайн-системы от Lukas Oppermann.

Designing with a fluid space palette

James Gilyead описывает систему размеров дизайн-системы, которая позволяет реализовать гибкую адаптивную сетку как всего экрана, так и отдельных компонентов.

The Power of Composition with CSS Variables

Maxime Heckel показывает, как создать тему оформления интерфейса на базе CSS-переменных и цветовой модели HSL. Это упрощает поддержку состояний компонентов (например, наведение и нажатие на кнопку).

Storybook

  • Научился показывать нативные компоненты для мобильных. Это упрощает создание живых гайдлайнов для них. Сама библиотека.
  • Официальная памятка по созданию плагинов.

Понимание пользователя

Proposed Personas

Группа веб-стандартов W3C сделала первую версию набора персонажей для учёта требований accessibility.

Информационная архитектура, концептуальное проектирование, контент-стратегия

Getting Started with Journey Mapping: 27 Tips from Practitioners

Alita Joyce из Nielsen/Norman Group опросила пару сотен специалистов по интерфейсам и составила памятку с советами по созданию customer journey map.

Scenario Mapping — Design Ideation Using Personas

Kim Salazar из Nielsen/Norman Group описывает метод картирования сценария для конкретного персонажа. Он фокусируется на генерации идей вокруг конкретных шагов.

Новые инструменты дизайна интерфейсов

Figma

Бесплатный тариф будет ограничен с 21 апреля. Теперь можно вести максимум 3 файла по 3 страницы в каждом и 1 проект. Хотя при этом снимут ограничение на количество редакторов.

В последнюю неделю марта они выпускали по одному улучшению в день. Наконец-то появились списки. А ещё можно публиковать отдельные компоненты дизайн-системы, не обязательно всю библиотеку сразу. И, самое приятное, — связать личную и рабочую учётную запись. Публичный профиль в сообществе также будет единым.

Next up:

Do you use Figma for work? Yes.
And for your personal projects? Also yes.

Now you can switch accounts seamlessly, flipping between your design system and the side projects you bought domains for and are totally going to finish.

Stay tuned, more tomorrow ? pic.twitter.com/YaBgRz8psr

— Figma (@figmadesign) March 31, 2021

Также появился улучшенный поиск внутри инструмента а-ля известный плагин Sketch Runner.

Menu search got a visual refresh!

Press Command + / (Mac) or Control + / (Windows) to access your recent actions, Figma plugins, menu items, and more from the center of your canvas. pic.twitter.com/UlO7HF2zqW

— Figma (@figmadesign) March 18, 2021

Плагины

  • Above the Fold: Отмечает, где находится конец первого экрана браузера на разных разрешениях экрана.
  • Cards for Humanity: Стимулирует думать о пользователях с ограниченными возможностями.
  • Yuan Qing Lim из Shopify сделал несколько небольших полезных плагинов, которые упрощают манипуляции с большим количеством объектов.

Шаблоны

  • Annotation Kit 2.0: Вторая версия шаблона для комментирования и спецификации макетов от Mixpanel.
  • A11y Annotation Kit: Спецификации по поддержке accessibility в макетах. Разметка для экранного диктора и экранной навигации, подсказки к элементам и логика поведения форм.
  • Tailwind UI Kit: От создателей популярного CSS-фреймворка. Как работали над ним.
  • Brick constructor: Можно поиграть в конструктор а-ля Lego внутри Figma.
  • Microsoft опубликовали свои известные иллюстрации об инклюзивном дизайне.

Статьи

  • Команда Figma рассказывает о том, как использует Figma, чтобы делать Figma.
  • Wendy Lu: как менялось командное использование инструмента во время тотальной удалёнки. Она выгрузила много внутренней статистики.
  • Steve Ruiz: безумные эксперименты с интерактивными компонентами. Интерфейсные компоненты со сложной логикой и игры.
  • Rodrigo Osornio: микро-анимации с помощью новых интерактивных компонентов.

Getty Images купили Unsplash

Фотобанк останется бесплатным.

Float

Простой инструмент для послойной анимации иллюстраций от Gal Shir.

Sketch 71

Совместная работа с документом вышла из беты.

Placeholder

Генератор заглушек перед загрузкой изображения на основе фото. Выдаёт CSS, SVG или Base64.

Easing Gradients

Генератор градиентов с плавными переходами с возможностью получить CSS на выходе.

Mesh Gradients

Инструмент позволяет делать эффектные mesh-градиенты. Есть плагины для Sketch и Figma.

Dither Me This

Сервис позволяет сделать дизеринг изображения, что в духе одного из нишевых трендов.

Fancy Border Radius Generator

Простой онлайн-инструмент позволяет сделать сложный радиус скругления фигуры и получить его CSS.

Spline

Скоро можно будет редактировать векторные иллюстрации в 3D.

Conic.css

Сервис позволяет генерировать конусные градиенты и выдаёт их CSS.

Haikei

Инструмент позволяет создавать подложки с фигурами или градиентами и сохранять их в SVG.

Mail Studio

Инструмент помогает создавать адаптивные письма рассылки. Есть версии для Windows, Mac и Linux.

Пользовательские исследования и тестирование

Attention Insight Heatmaps — AI-Driven Pre-Launch Analytics

Ещё один сервис, который моделирует тепловые карты для интерфейсов на основе исторических данных похожих тестов.

UXOps

Новый сервис для проведения карточной сортировки.

Быстрый клик-тест скриншотов вместо юзабилити-тестирования прототипа

Виктория Нагорная, Диана Вайнберг и Наталья Шмелева из Usethics описывают метод юзабилити-тестирования через клик-тесты скриншотов интерфейса.

UX and Net Promoter Benchmarks of Food Delivery Services

Jim Lewis и Jeff Sauro провели сравнительное исследование нескольких американских сервисов доставки еды. Они выявили ключевые драйверы хорошего пользовательского опыта и оценили их по модели Кано.

Cognitive Interviewing — A Method to Evaluate Surveys

Jean Fox и Jennifer Edgar описывают метод когнитивных интервью, который в каких-то ситуациях заменяет юзабилити-тестирование.

Four Reasons Why Research Participants Forget

Jeff Sauro и Jim Lewis описывают причины, по которым респонденты UX-исследований забывают причины, детали и последовательность событий, о которых рассказывают.

Retail research during COVID-19 and beyond

Michelle Brown из Shopify рассказывает, как научилась проводить пользовательские исследования физических платёжных устройств в условиях удалённых методов.

Seven Reasons People Misinterpret Survey Questions

Jeff Sauro и Jim Lewis приводят причины, по которым респонденты могут неправильно понять формулировки опросов.

Sample Size Estimation for NPS Confidence Intervals

Jim Lewis и Jeff Sauro показывают, как определить выборку для опроса NPS.

Stephanie Marsh — User Research

В начале 2022 года выйдет второе издание книги. Добавится раздел о ResearchOps и защите персональных данных, помимо множества других обновлений.

Визуальное программирование и дизайн в браузере

SVG и CSS Generators

Фантастическая коллекция генераторов CSS-кода для любых дизайнерских приёмов от Iris Lješnjanin. Цвета, типографика, сетки, анимация, декоративные элементы и много чего ещё. Во второй статье собраны генераторы SVG на самый разный случай: фигуры, фоны, анимация и т.п.

CSS Grid Cheat Sheet Illustrated in 2021

Свежая шпаргалка по CSS Grid от Joy Shaheb.

The End of AMP

Dwayne Lafleur прогнозирует, что AMP может потерять привелигированное положение в поиске Google, если сайт и так выполняет требования по скорости загрузки. Он описывает проблемы формата и говорит, что не будет скучать по нему.

Why should type be fluid, anyway?

Elise Hein размышляет на тему целесообразности поддержки гибкой адаптивной типографики (когда размер шрифта подстраивается под оптимальное количество знаков в строке). Это хорошо для читабельности, но требует не самых простых решений в коде.

Handling Text Over Images in CSS

Ahmad Shadeed разбирает разные виды подложек для текста на картинке и CSS-код для них.

The Future of CSS: Scroll-Linked Animations with @scroll-timeline

Bramus Van Damme рассказывает о готовящемся дополнении к стандартам CSS — появится анимация при прокрутке.

Новые скрипты

  • Charts.css: CSS-фреймворк для визуализации данных.
  • Эффектная анимация кругового текста.

Дизайн-менеджмент и DesignOps

A Framework for CX Transformation — How to Operationalize CX at Scale

Kim Salazar из Nielsen/Norman Group описывает фреймворк CX-трансформации компании. Недавно они выпустили отчёт с рекомендациями на тему.

Growing UX Maturity — Finding A UX Champion And Demonstrating ROI, part 1

Серия статей Victor Yocco о зрелости UX и том, как её повысить. В первой части он фокусируется на адвокатах дизайна среди лиц, принимающих решения, а также ROI. Во второй — об обмене знаниями и менторстве.

Interviewing with Lyft Design: The Product Designer

Tyler Norman рассказывает о том, как устроен процесс собеседования для дизайнеров в Lyft.

How to ask for design feedback at every stage of a project

Marijan Šnajdar из Shopify предлагает несколько способов собирать обратную связь в зависимости от стадии проекта и проработки концепта.

Why your organization needs product principles

Ethan Eismann рассказывает о продуктовых принципах Slack, которые помогают всем ролям — от дизайнеров до юристов.

Just Jump In — How to Scale Design Practices

Kate Sullivan из IBM описывает подход к внедрению сложных практик и методов дизайна. Это рамка «пилот → евангелизм → масштабирование», которая позволяет делать всё поэтапно.

Reflections on the user-centred design communities team

Как устроено дизайн-сообщество в государственных сервисах Gov.uk.

Design communication is a critical skill

Годные советы Kazden Cattapan о том, как объяснять дизайн-решения коллегам из разных ролей: разработчики, редакторы, менеджеры продуктов и топ-менеджеры.

Командное взаимодействие

Designing a Virtual Venue

Claire Cianca из Flexport рассказывает о формате ежегодной встречи дизайнеров, которая в этом году прошла виртуально. Они сделали необычный шаблон в Miro в виде дома, где в каждой комнате проходила своя активность.

Кейсы

Как мы отказались от вкладок в интерфейсе и ускорили работу пользователей почти в 2,5 раза

Кирилл Улитин рассказывает о перепроектировании панели инструментов в браузерном редакторе докумнетов МойОфис. Они рассматривали разные популярные подходы и сравнивали их эффективность.

People are talking

Jess Klein рассказывает о перепроектировании обсуждения правок статей в Wikipedia. Они в том числе используют силу сообщества для поиска идей.

Брендинг цифровых продуктов

Why Some Sonic Logos Actually Hurt Their Brands During Covid

Lauren McGuire говорит о том, что аудио-логотипы брендов должны адаптироваться к текущей ситуации в обществе. Например, фирменный джингл Netflix стал звучать намного чаще на карантине, а звук McDonald’s шёл вразрез с невозможностью физически попасть в заведение.

Brand Management for Dummies

Frontify выпустили бесплатную мини-книгу. Это совсем базовый обзор того, как сделать бренд цельным.

История

Jeff Bezos and Amazon — A complicated design legacy

Fast Co Design собрали хронологию взаимоотношений главы Amazon Jeff Bezos с дизайном. Успех и провалы с историей ключевых запусков.

A Look Back on 20 Years of The Skins Factory

Агентство The Skins Factory вспоминает историю своих тем оформления для медиа-плееров за последние 20 лет. Много эффектных приветов из прошлого. Продолжение.

Defending Personas. If you love a design tool, set it free

Alan Cooper говорит, что некорректное использование персонажей началось вскоре после публикации книги «Психбольница в руках пациентов». Он просто в своё время рассказал дизайнерам интерфейсом о потенциально интересном методе, а переврали его уже последователи.

Тренды

Aurora UI — new visual trend for 2021

Michal Malewicz предлагает название для одного из трендов прошлого года с размытыми градиентными пятнами на фоне — «северное сияние» (Aurora).

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

«Творческая и умеренно меланхоличная»: нейросеть проходит тест Роршаха

Сервис Seeing AI от Microsoft прошёл тест Роршаха и получил оценку личности от психолога.

Голосовые интерфейсы

Microsoft’s Cortana silenced as Siri gets new voice

Microsoft прекращает развитие голосового помощника Cortana на мобильных. Amazon и Google победили.

Diana Deibel & Rebecca Evanhoe — Conversations with Things

Rosenfeld Media выпускают книгу Diana Deibel & Rebecca Evanhoe «Conversations with Things. UX Design for Chat and Voice». Она посвящена проектированию голосовых и чат-интерфейсов.

The Rise of Touch Screens in Cars Explained

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

Ethics by Design — An organizational approach to responsible use of technology

Рекомендации по этичному использованию технологий от Всемирного Экономического Форума. Salesforce выделили основные пункты, полезные для дизайнеров интерфейсов.

The Mobile Performance Inequality Gap, 2021

Интересные расчёты Alex Russell: какие характеристики смартфона можно считать массовыми в 2021 году? Он предлагает в качестве ориентира одну из недорогих моделей на Android и даёт прогноз по размеру страницы в браузере, которую такое устройство может комфортно переварить.

It’s High Time to Replace JPEG With a Next-Generation Image Codec

Jon Sneyers представляет рабочую группу JPG XL, нового поколения формата JPG. Он сравнивает старые и новые форматы изображений по эффективности сжатия и качеству.

Для общего и профессионального развития

Google User Experience (UX) Certificate

Бесплатный курс по дизайну интерфейсов от Google на Coursera. Если платить $39 в месяц, то по окончанию дают сертификат то имени компании, что неплохо для резюме начинающих дизайнеров.

Winning with fidelities

Группа дизайн-менеджеров IBM предлагает свою модель уровней описания продукта и поведения пользователей. Шаблон в Mural.

Three things product teams need from designers

Chris Hill-Scott из Gov.uk говорит о трёх полезных вещах, в которых дизайнер интерфейсов может помочь продуктовой команде. Сделать вещи наглядными, реальными и осмысленными.

The Elements of Digital Ethics

Per Axbom собрал модель проблем в цифровой этике на разных уровнях — от общества и организации до человека и машины.

Люди и компании в отрасли

Magic Camp

Сайт внутренней креативной команды Яндекса Magic Camp, которая занимается сервисами такси и доставки. Например, там опубликованы реальные брифы.

Материалы конференций

#GAconf — A day of talks and networking, exploring accessibility for disabled gamers

Конференция #GAconf пройдёт 5-6 апреля в интернете. Она посвящена accessibility в играх.

Подпишитесь на дайджест в 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.