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

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

  • 12 октября, 2020

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

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

Qonversion — UI/UX Mobile App onboarding best practices

Коллекция паттернов процесса встречи нового пользователя в мобильных приложениях. Для всех записано видео.

Nurture trust through cost transparency

Susanna Zaraysky из Google даёт советы по адаптации интерфейса для стран, где мобильный трафик дорог. Как ограничивать объём скачиваемых данных и вовремя информировать пользователя.

a11yresources — A growing list of accessibility tools and resources

Большая коллекция ссылок на тему доступности интерфейсов для пользователей с ограниченными возможностями. Инструменты, статьи, гайдлайны и т.п.

Inspirational Images Should Link to All Depicted Products (9% of Sites Don’t)

Kathryn Totz из Baymard показывает, как правильно давать ссылки на товары в эффектных промо-фото в интернет-магазинах.

Opening Links in New Browser Windows and Tabs

Jakob Nielsen и Anna Kaley из Nielsen/Norman Group разбирают ситуации, в которых уместно открывать ссылку на сайте в новом окне. Их немного — в большинстве случаев решать должен сам пользователь.

Accessibility: Guidelines for Information Architecture, UX Design, and Visual Design

Неплохая структурированная памятка по поддержке пользователей с ограниченными возможностями от Manasi Vaidya из IBM.

The Psychology Behind TikTok’s Addictive Feed

Авторы сайта Growth Design разбирают опыт первого использования TikTok и основные механики вовлечения пользователей.

6 Important Aspects of Well-Performing Mobile Product Page Breadcrumbs

Edward Scott из Baymard даёт советы по организации хлебных крошек в мобильных интернет-магазинах.

How Klarna works

Обзор интерфейса популярного сервиса рассрочки Klarna от Peter Ramsey.

Account Opening & KYC Chime vs Wells Fargo

Сравнение процесса открытия нового счёта в американских банках Chime и Wells Fargo.

Максим Ильяхов — Ясно, понятно. Как доносить мысли и убеждать людей с помощью слов

В ноябре выходит новая книга Максима Ильяхова «Ясно, понятно». Она развивает идеи «Пиши, сокращай» — контекст и тон, интерес, ясность, подача. Общий фокус на управлении вниманием читателя.

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

Design Systems Support

Nathan Curtis подробно разбирает процесс поддержки дизайн-системы. Как и в каком формате её пользователи обращаются к тем, кто её создаёт.

Унифицированные иллюстрации

Чтобы не рыться каждый раз в архивах мини-дайджеста, собрал все полезные материалы про унифицированные иллюстрации. Рассказы от Adobe, Airbnb, Booking.com, Creative Market, Dropbox, Лаборатории Касперского, Mail.ru, Netguru, Putnam Studio, Shopify, Slack, Spacebase, WordPress.

How we created the illustration style for our partner products

Елена Снежинская рассказывает о создании единого стиля иллюстраций Booking.com. Как анализировали цели использования, выбирали стилистику и адаптировали под конкретные задачи.

An Introduction to Multi-Platform Design Systems

Danny Banks из Amazon говорит, что всего 10% публичных дизайн-систем описывают нативные мобильные платформы. Это ключевая, но сложная тема, в которой он видит следующую точку роста для профессии. Его презентация на конференции Clarity 2020 на тему.

Бренд-система Райффайзенбанка

В публичной версии есть базовые гайдлайны, по авторизации — прорва шаблонов на все случаи жизни. Её сделали ещё до моего прихода и это важнейший кирпичик в построении цельного бренда во всех каналах, включая интерфейсы (чем мы сейчас и занимаемся).

Component Driven User Interfaces

Команда Storybook запустила сайт-памятку по созданию компонентных дизайн-систем.

Stop doing design system projects

Daniël De Wit рассказывает о неудачной попытке старта дизайн-системы агентства WebNL. И как всё удалось со второй.

10 reflections on designing a design system

Lara Hanlon из IBM анализирует опыт работы над дизайн-системой Carbon. Она даёт серию советов начинающим — местами очевидных, но всё равно полезных.

Design Systems For Figma

Каталог открытых дизайн-систем в Figma.

The Design System Encyclopedia

Большой список возможных элементов, которые описывает дизайн-система. Хотя она должна идти от реальных задач, а не отраслевых стандартов наполненности, это полезное облако тегов на память. Сопроводительная статья.

Color within Constraints

Linzi Berry рассказывает об особенностях работы с цветом в дизайн-системе Lyft.

iOS 14

  • Обзор обновлений в библиотеке иконок SF Symbols 2. Видео с WWDC 2020.

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

Jobs to be Done Toolkit

Jim Kalbach вместе с Elaine Matthias запустил сайт с обучающими материалами и шаблонами в дополнение к своей книге о Jobs to be Done.

Amy Bucher — Engaged: Designing for Behavior Change

Rosenfeld Media выпустили книгу Amy Bucher «Engaged». Она посвящена психологии пользователей и влиянию на их поведение. UXmatters публикуют выдержку из главы 4.

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

Customer Journey Map в Miro

Годная памятка Станислава Хрусталёва по созданию CJM в Miro. Много советов по работе с инструментом для задачи картирования пользовательского опыта.

Бонус: Типовые ошибки при создании CJM,

A Guide to Service-Blueprinting Workshops

Alita Joyce из Nielsen/Norman Group детально описывает формат рабочей сессии по созданию service blueprint.

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

Figma Config Europe 2020

Figma: На конференции Config Europe показали много обновлений. Состояния компонентов, которые можно переключать в прототипах (например, обычный и выбранный чекбокс); улучшение авто-компоновки, которая приближается к модели flexbox; быстрая замена элементов компонента (например, иконки); обновлённая панель для разработчиков. Они будут появляться постепенно.

Плагины

  • BlendingMe: Плагин генерирует серию линий в виде потока.
  • Table Creator: Удобное создание таблиц.

Шаблоны

  • Город в изометрии.
  • Расширения для MS Teams.

Статьи и материалы

  • Книга Евгения Фёдорова.

Vectornator X4

Новая версия векторного графического редактора. Много частных улучшений интерфейса.

Adobe Acrobat Reader

Научились разбирать PDF при просмотре. Теперь он адаптирует под мобильные экраны и даёт простую структуру документа для навигации.

Sketch 69

Переменные для цветов, обновлённый просмотрщик компонентов и другие обновления интерфейса.

BGJar

Генератор паттернов на фоне в SVG.

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

A Content-First Approach to UX Research

Casey Capachi из Facebook описывает методы тестирования контента и интерфейсных текстов. Часть из них универсальны (например, 5-секундный тест), но часть — необычные приёмы.

Remote UX Research Without Sacrifices — 5 Best Practices for Conducting Research and Collaborating Online

Evi K. Hui из Flexport рассказывает о том, как команда UX-исследований адаптировалась к миру карантина.

I built a user research repository — you should do the same

Jonathan Richardson описывает свой процесс создания базы знаний и инсайтов из пользовательских исследований. У него простая версия — каталог отчётов, без разделения на отдельные инсайты.

User needs refinement — Why and how to do it

Jonathan Richardson показывает свой формат описания потребностей пользователей и рассказывает, как стандартизировал весь набор под него.

Simplifying the UMUX-Lite

Jim Lewis и Jeff Sauro рассказывают о доработанном опроснике стандартизированной метрики UMUX-Lite. Они перефразировали один из вопросов вокруг потребностей.

Mapping the Kitchen (and Other Distant Lands)

Во время карантина дом стал офисом для значительной части людей. Larry S. McGrath из Facebook рассказывает о важности конкретных мест и комнат, где пользователи работают с продуктом.

Простыми словами о выборке

Евгения Наумова из Контура объясняет основные понятия при рекрутинге респондентов. Как строится грамотная выборка.

Исследования в сложных B2B-продуктах: как это работает в Mail.ru для бизнеса

Дарья Шаклеева из Mail.ru Group рассказывает об особенностях пользовательских исследований в сервисах для бизнеса.

Remote UX Research — Advantages and Disadvantages, Part 1

Jim Ross разбирает плюсы удалённых пользовательских исследований.

Are Face Emoji Ratings Better than Numbered Scales?

Jim Lewis и Jeff Sauro изучают: насколько корректно использовать в опросах эмоджи вместо стандартных ответов. Данные не ухудшаются, но и смысла в этом нет.

How to Code Errors in Unmoderated Studies

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

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

Learn about spring physics animation in Javascript

Josh W Comeau наглядно описывает принципы «пружинистой» анимации и её реализацию на JavaScript.

Designing With Reduced Motion For Motion Sensitivities

Val Head показывает, как сделать режим ограниченной анимации в вебе. Это проблема для пользователей, у которых большое количество движения на экране вызывает когнитивные нагрузки.

Бонус: Советы по улучшению анимации в вебе от Prasanjit Singh.

ComicA11y — An all inclusive online comic experiment

Эксперимент с комиксами, поддерживающими требования accessibility.

AVIF has landed

Jake Archibald разбирает новый формат изображений AVIF (AV1 Image File Format). Он значительно экономит на размере файла относительно JPG и даже WEBP, хотя при долгой загрузке страницы показывается не сразу. Chrome 85 уже поддерживает его.

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

  • Трёхмерный земной шар на WebGL с анимацией сигналов в разных точках.
  • Эксперименты с эффектной анимацией кнопок.
  • Анимация появления рукописного текста с разной толщиной штриха.
  • JavaScript-библиотека позволяет делать 3D-типографику в вебе.

Метрики и ROI

7 Steps to Benchmark Your Product’s UX

Пошаговая памятка Alita Joyce из Nielsen/Norman Group по выбору и отслеживанию интерфейсных метрик. На что ориентироваться, как считать, с кем сравнивать.

Designing for Outcomes Means Starting at the End

Dan Stulck из IBM приводит пример связки интерфейсных и бизнес-метрик. Как найти драйверы ключевых показателей бизнеса, на которые можно повлиять изменением поведения пользователей.

Three Myths About Calculating the ROI of UX

Kate Moran из Nielsen/Norman Group рассуждает о точности расчётов ROI дизайна. Должны ли мы всегда говорить про деньги и насколько комплексные обоснования нужны.

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

How can you find time to design? 7 tips to own your time

Отличная памятка José Torre для дизайнеров, которая помогает управлять календарём. Как расчистить его и выделить время для дизайнерских задач.

Andrea Mignolo — Design Leadership: The First 90 Days

Книга Andrea Mignolo «Design Leadership: The First 90 Days» выходит в начале 2021 года. Она посвящена первым шагам дизайн-менеджера в компании.

В одной из статей она описывает разницу между менеджментом и лидерством. Это разные стороны одной медали, которые работают в разных ситуациях.

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

Как работать распределённым дизайн-командам

Продолжаю пополнять коллекцию материалов.

When Remote Workshops Fail

Therese Fessenden из Nielsen/Norman Group разбирает типичные проблемы в онлайновых рабочих сессиях. Как правильно вовлекать участников.

Running a successful remote workshop

Rya Gershcovich описывает подход Shopify к проведению удалённых рабочих сессий по генерации идей.

Кейсы

Как провести исследование продукта и осмысленный редизайн в одиночку

Неплохой пример учебного проекта по редизайну от Бориса Шабаева. Он переосмыслил МТС Библиотеку.

Проектирование интерфейса системы видеоконференцсвязи

Рассказ о проектировании интерфейса сервиса видеоконференций IVA от агентства Usethics.

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

TikTok

Рекламная кампания от британской Wolff Olins.

Fiverr

Айдентика фриланс-биржи Fiverr от британской Koto. Правда, про интерфейсы ничего нет, в основном рекламные кампании.

История

The Evolution of the Google Sign Up Form — The Mirror of the Internet’s Development

Alex Trudov собрал все версии формы регистрации Google с 2005 года.

The untold history of macOS System Preferences

Arun Venkatesan разбирает эволюцию настроек macOS. Как менялся их состав и конкретные иконки.

Тренды

Welcome to Your Bland New World of Consumer Capitalism

Отличная статья Ben Schott о «blanding» — брендах-пустышках. Они используют громкие и пустые слоганы, за которыми ничего не стоит, а также шаблонные характеристики и приёмы оформления. Перевод.

The Bland Book — Totally Mundane™

Шаблоны брендбуков и других документов для брендов-пустышек.

Fast Company’s 2020 Innovation by Design Awards

Победители ежегодной награды Fast Company Innovation by Design. Тут решения из самых разных отраслей — от пром.дизайна и архитектуры до интерфейсов и визуализации данных.

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

Autobiographical paintings

Эксперимент Pierre Buttin по генерации текста и графики на основе собственных заготовок. Он написал свою автобиографию и прогнал через алгоритмический дизайн.

Designing for AI — Trust. 8 ways to infuse trust into your AI

Arin Bhowmick из IBM перечисляет способы, повышающие доверие пользователей к продуктам на базе искусственного интеллекта.

IdeasAI — A GPT-3-powered business idea generator

Генератор идей для бизнеса на базе GPT-3.

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

Wireframing Academy

Balsamic выпустили серию обучающих статей об основах создания wireframes и их использовании в продуктовой работе.

Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме, vc.ru или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.

Юрий Ветров

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

Подписаться на рассылку

Вы будете получать свежий дайджест раз в месяц

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

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

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

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

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

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

  • 4 ноября, 2020
View Post

Унифицированные иллюстрации

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

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

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

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

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

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

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

Дайджест продуктового дизайна, май 2020 (№100)

  • 9 июня, 2020

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Подписаться на рассылку

Вы будете получать свежий дайджест раз в месяц

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

Input your search keywords and press Enter.