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