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

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

  • 2 сентября 2020

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

Курс «Паттерны дизайн-менеджмента»

1 сентября стартует четвёртый поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education.

На первых трёх отучились 170 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: Альфа-Банк, Aviasales, Avito, Badoo, ВТБ, EPAM, Mail.ru Group, Miro, МТС, Открытие, QIWI, Райффайзенбанк, Rambler, РБК, Redmadrobot, Ростелеком, Сбербанк, S7, Tele2, Тинькофф, TomTom, Учи.ру, ЦИАН, Wargaming, Wrike, X5, Яндекс и многих других.

Курс построен на базе будущей книги по паттернам дизайн-менеджмента (чистовик готов на 93%). Какие-то части вы уже могли прочитать ранее и, возможно, знакомы с общей концепцией модели зрелости дизайна и продвижения по ней. Значительная часть контента добавлена, а тот что был раньше — переработан и реструктурирован под более практичный формат использования.

Получился огромный массив знаний из 37 уроков на 8,5 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 4 месяца. Помимо видео-лекций есть домашние задания и вебинары после каждого блока. Я постепенно добавляю шаблоны для домашних заданий, которые здорово структурируют мысли.

Самые вовлечённые студенты внедряли улучшения в дизайн-командах по ходу курса, так что к окончанию получили осязаемый выхлоп 🙂

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

Smart Interface Design Patterns In Your Pocket ― Checklist Cards PDF

Smashing Magazine выпускают набор карточек с чеклистами для популярных интерфейсных паттернов. Как сделать их по уму и избежать типовых ошибок. Желающие могут купить пакет вместе с обучающим вебинаром.

7 Deadly Sins of Data Visualization

Слава Шестопалов разбирает популярные у дизайнеров псевдо-диаграммы. Они хорошо смотрятся на Dribbble, но плохо представляют данные.

Fintech Insights

Сервис анализирует британские, европейские и американские интернет-банки на мобильных и в вебе. В первом разборе они сравнивают процесс открытия счёта в банках нового поколения, дальше — перевода денег.

У них своя методика оценки — изначально дают каждому 1000 баллов, а дальше вычитают их за сложные этапы процесса. Сравнение крупных британских банков по функциональности.

Connect, No Matter the Speed

Отличная подборка интерфейсных паттернов для медленного интернета от Ramprakash Ravichandran и Susanna Zaraysky из Google.

The UX of LEGO Interface Panels

George Cave анализирует приёмы организации интерфейсов на примере игрушечных компьютеров из LEGO. Шикарная историческая справка и советы в одном флаконе.

Тексты для интерфейса: как пишут контент в «Тинькофф Бизнес»

Конспект выступления редактора интерфейсов Анны Кочетковой из Тинькофф Бизнес. Советы и лучшие практики.

Metric Display Standards

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

Virtual Tours — High Interaction Cost, Moderate Usefulness

Page Laubheimer из Nielsen/Norman Group описывает проблемы виртуальных туров по туристическим местам. Из-за пандемии они вроде бы должны стать востребованы, но обычная фотогалерея удобнее и практичнее.

The Animated Web

Коллекция примеров анимации в вебе. Есть разбивка по категориям.

5 Essential Filter Types Users Need on Product Listing Pages (57% Don’t Offer All 5)

Mark Crowley из Baymard Institute перечисляет наиболее востребованные фильтры в поиске по интернет-магазинам. Цена, рейтинг, цвет, размер, бренд.

Content design for user onboarding

Jason Fox из Atlassian приводит несколько примеров улучшения экранов встречи нового пользователя. Они помогли улучшить продуктовые метрики за счёт правильного фокуса на важных вещах.

The UX of Video Streaming Entertainment Websites & Apps

Jeff Sauro и Jim Lewis провели сравнительное исследование американских сервисов онлайн-видео Netflix, Hulu, Disney Plus, HBO Plus, Prime Video. Среди прочего они выделили ключевые драйверы, которые важны для пользователей.

Inspired Design Decisions With Bradbury Thompson — The Art Of Graphic Design

Andy Clarke продолжает серию экспериментов с интересной журнальной вёрсткой в вебе. В двенадцатом выпуске разбирает работы Bradbury Thompson.

Design Principles to Support Better Decision Making

Maria Rosala из Nielsen/Norman Group даёт советы по созданию принципов дизайна.

Accordion Icons — Which Signifiers Work Best?

Page Laubheimer и Raluca Budiu из Nielsen/Norman Group рассказывают об исследовании иконок для раскрывающихся списков на мобильных. Стрелка вниз ожидаемо самая узнаваемая, при этом с такой иконкой чаще нажимают на неё саму, а не на название элемента списка.

Allow Users to Upload Images with Their Review (34% of Sites Don’t)

Edward Scott из Baymard говорит о важности пользовательских фото в отзывах о товарах в интернет-магазинах.

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

FAST — Adaptive UI System, Utilities & Tools

Фреймворк для дизайн-систем от Microsoft, выросший из технологий Fluent Design. Даёт гибкую тематизацию и работает с React, Angular, Vue и другими платформами.

Measuring the health of our design system

Chase McCoy рассказывает об отслеживании здоровья дизайн-системы Sprout Social. Они показывают текущий статус компонента или страницы описания, а также подробные детали по нескольким параметрам.

The onion for Design Systems: atomic design and pace layering

Leslie Mu предлагает модель «луковицы» для описания дизайн-систем. Это мало отличается от других брендированных версий модульного дизайна, но полезно до кучи.

Atlassian Design System

Обновлённая дизайн-система Atlassian. Как и зачем переработали живой гайдлайн.

Design Systems for Email

Обзор нюансов создания дизайн-системы для писем рассылки от Ovi Demetrian, Jr. из Superfriendly.

Airbus Brand Centre

Бренд-система Airbus. В живом гайдлайне скриншоты компонентов, а не настоящий код, но это всё равно хороший пример цельного подхода.

GitLab Pajamas Design System

Дизайн-система GitLab.

iOS 14

Шаблоны для iOS 14 и iPadOS 14 от Joey Banks.

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

UX Core

Вольф Алексанян составил карту когнитивных искажений. Он взял за основу карту Buster Benson.

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

Orchestration in the Omnichannel Experience

Kim Salazar из Nielsen/Norman Group разбирает способы оркестровки многоканального взаимодействия клиента с продуктом.

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

Figma

В прототипах можно задать сразу несколько разных взаимодействий с элементом. А также появились настраиваемые кривые easing и улучшена навигация по стилям. Сообщество вышло из беты и доступно всем пользователям.

Introducing two new ways to create higher-fidelity prototypes in Figma. Show multiple ways to interact with a single object, and make your transitions pop with custom easing curves. pic.twitter.com/jWwc5MmBsw

— Figma (@figmadesign) August 6, 2020

Плагины

  • Truncate Lines: Сокращает текст под многоточие — нужно только выбрать количество строк.
  • Downsize: Оптимизация изображений в макете.
  • Даниил Субботин из Redmadrobot рассказывает об утилите для экспорта цветов, иконок и изображений в Xcode и Android Studio. Сама утилита.

Шаблоны

  • Простая обучалка анимациям в виде шаблона-песочницы. Текстовая версия.
  • Шаблоны для создания дополнений к Airtable.
  • Шаблон для смеси информационной карты и CJM.
  • Библиотека компонентов дизайн-системы GitLab Pajamas.
  • Шаблоны персонажей, CJM, сценария интервью с пользователем.
  • Памятка и шаблоны для проведения удалённых дизайн-спринтов.

Статьи

  • Как сделать компоненты, сохраняющие пропорции элементов при изменении размера.
  • Jeremy D. рассказывает о создании библиотеки компонетов для Airbnb и Lyft, где он работал раньше.

Adobe XD

Августовское обновление. Теперь из одних и тех же макетов можно собрать сразу несколько прототипов для разных тестов.

Unscreen

Сервис убирает фон под объектом в видео-роликах.

Sketch 68

Вышла версия с поддержкой ассистентов, которые помогают сверять макет с требованиями дизайн-системы или оформления макетов. Их каталог.

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

ResearchOps 101

Kate Kaplan из Nielsen/Norman Group предлагает свой фреймворк ResearchOps. Это шесть составляющих: рекрутинг, администрирование, знания, инструменты, компетенция и евангелизм.

Managing Research Insights at a Portfolio Level

Rachel Miles из IBM описала лучшую и самую детальную методичку по созданию базы знаний и инсайтов из пользовательских исследований на базе Airtable. Структура, привязка к вопросу исследований, разбивка на находки и наблюдения.

Catching Problem Participants in Remote Unmoderated Studies

Kate Moran из Nielsen/Norman Group описывает три вида проблемных респондентов: не подходящие под требования, обманщики и профессиональные респонденты. Что делать с каждым из них и как вообще определить их.

Reliability and Validity — Ensuring a Foolproof UX Research Plan

Pallabi Roy Singh описывает способы добиться надёжности и валидности результатов пользовательских исследований.

Если ты заказчик. Первый шаг перед исследованием

Эмилия Городовых из Контура описывает памятку по подготовке пользовательского исследования для заказчика. Цели, гипотезы и вопросы, что уже известно о проблеме, пользователи и сценарии, сроки. Шаблон.

Making Your Home Research Station Work

Sarah Espinosa из Facebook даёт советы по обустройству рабочего места UX-исследователя для удалённых сессий с пользователями.

Командная сессия как презентация итогов исследования

Евгения Наумова из Контура описывает несколько подходов к презентации результатов пользовательских исследований, которые вовлекают всю команду. Это позволяет гораздо лучше понять и прочувствовать находки.

Results of the 2020 User Testing Industry Report

Сервис удалённого юзабилити-тестирования User Fountain провёл опрос 55 пользователей на тему используемых методов. Обзор выводов.

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

Creating 3D Illustrations with CSS

Alex Trost показывает, как делать изометрические иллюстрации на чистом CSS.

See the Pen 3D Radio by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.

Leading-Trim — The Future of Digital Typesetting

Ethan Wang из Microsoft рассказывает об идущей сейчас доработке стандарта CSS, который позволит убирать автоматические межстрочные расстояния через свойство leading-trim. Это родовая травма веба, которая не даёт делать выравнивание относительно базовой линии. Когда именно это станет доступно в браузерах неизвестно, но работа идёт плотно.

Accessibility In Chrome DevTools

Umar Hansa показывает, как пользоваться встроенными возможностями Chrome по анализу accessibility сайтов.

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

  • Эффект перехода из списка материалов к статье с увеличением картинки как в Material Design.

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

A User Guide To Working With You

Julie Zhuo описывает формат «руководства по работе с конкретным сотрудником». Он показывает особенности поведения, а также сильные и слабые стороны.

Методологии, процедуры, стандарты

Future Thieving #1 — Stealing from the future with speculative design

Обзор дисциплины спекулятивного дизайна от Damien Lutz, её истории и методов. Часть 2.

Кейсы

6 steps to big results: How we redesigned the Sephora app

Andrew Birgiolas подробно рассказывает о редизайне приложения Sephora. Они проверяли много прототипов с помощью метода RITE и постепенно фильтровали идеи.

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

Trade Runner 2049

Ребрендинг инвестприложения Robinhood от американской Collins. Очень необычный стиль иллюстраций, который сильно отличается от основного потока. Collins сильны в этом.

История

Why Do We Interface?

Ehsan Noursalehi анализирует прошлое и будущее интерфейсов с точки зрения их ключевых задач: передачи информации и работы с ней. Как развивались способы ввода и вывода информации, какие из них имеют смысл и будущее вообще.

Тренды

Designing for the Microsoft Surface Duo

Microsoft открыли предзаказ на свой телефон Surface Duo с двумя экранами (на базе Android). Интервью с главой дизайна приложения MS Office Deepak Menon о сценариях использования в офисных программах.

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

Generative Logo Design

Как экспериментальная платформа для алгоритмического дизайна Components AI сделала себе генеративный логотип.

The Role of Design in Machine Learning

Owen Schoppe из Salesforce описывает процесс анализа и генерации паттернов в их инструменте алгоритмического дизайна Einstein.

он

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

What Is the Mean Opinion Scale (MOS)?

Jim Lewis и Jeff Sauro описывают стандартизированный опросник MOS (Mean Option Scale) для оценки качества голосовых интерфейсов со сгенерированной речью.

Driver Assistance Systems — UX from a Safety Perspective

Felix Hansen и Susanne Marquardt из Kantar анализируют ожидания пользователей от беспилотных автомобилей и более простых систем поддержки водителей. Понимают ли они принципы управления такими машинами и как можно улучшить их.

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

Learnings from a Junior Designer at Google

Lola Jiang из Google показывает, как мышление моделями и фреймворками помогло ей пройти путь от младшего дизайнера.

The 3 Phases of Inspiration. Offload. Look Around. Go Wild. The Process of Creating Ideas in Design, Experience, and Innovation Projects

Jens Mühlstedt из designaffairs описывает своё видение процесса вдохновения. В целом это плюс-минус стандартные практики воркшопов, но с интересным углом обзора.

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