Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-декабрь 2019.
Паттерны и лучшие практики
Choosing the right UI component for communication with your users
Adam Shriki разложил паттерны для уведомления пользователя по степени комфорта для пользователя. От push-уведомлений и попапов, которые вырывают из текущего потока, до более нейтральных всплывающих подсказок.
The Role of Animation and Motion in UX
Page Laubheimer из Nielsen/Norman Group описывает роль анимации в интерфейсах. Список достаточно стандартный, но язык описания более профессиональный.
Evidence-based design heuristics for idea generation
77 эвристик для проектирования и оценки промышленного дизайна.
Videos as Instructional Content — User Behaviors and UX Guidelines
Aurora Harley из Nielsen/Norman Group даёт советы по организации и размещению видео-инструкций на сайтах.
Тексты в Яндекс.Драйве
Михаил Озорнин собрал коллекцию интерфейсных текстов Яндекс.Драйва, очень человечных.
Тёмные паттерны
- Кажется, нашлась управа на властелинов тёмных паттернов из Booking. Еврокомиссия заставила их уменьшить количество моргающих уведомлений и психологических трюков.
Baymard Institute
- Рекомендации по количеству товаров на странице выдачи. Оно отличается для веба и мобильных, а также для страницы категории и результатов поиска.
- Подходы к перенаправлению пользователя интернет-магазина из поиска в категорию товаров. Они дают больше инструментов.
Дизайн-системы и гайдлайны
EightShapes @components
Nathan Curtis собрал вместе все свои статьи о дизайн-системах. Он самый толковый автор по теме, так что это лучше любой книги. Они с EightShapes также оживили одноимённый Твиттер.
Тёмная тема оформления
DarkModeDesign — Best Resources for Designing and Building Dark Mode Apps and Websites
Сайт собирает материалы по дизайну тёмной темы оформления. Официальные руководства и выступления Apple и Google, статьи компаний. Дополнил свою статью недостающими.
The Ultimate Guide on Designing a Dark Theme for your Android app
Подробнейший разбор особенностей создания тёмной темы в Material Design от Chethan KVS. Он проходится по всем основным аспектам подготовки цветов, состояний элементов, иллюстраций и т.п.
Google Dark Mode app roundup — Everything available so far
Мощный обзор всех приложений Google на Android с тёмной темой оформления.
Building Dark Mode on Desktop
Kyle Stetz из Slack рассказывает о внедрении тёмной темы. Они сделали это через токены.
Implementing Dark Mode in iOS 13
Tim Johnsen из Instagram рассказывает о поддержке тёмной темы оформления в iOS-версии приложения.
Turn the lights off — designing for dark mode
Советы по созданию тёмной темы оформления от Briandito Priambodo на основе опыта внедрения в приложении Wego.
Building Dark Mode into a Complex Web App
Andrew Childs из Clubhouse рассказывает о внедрении тёмной темы оформления. Они сделали забавный инструмент для сокращения количества цветов, обязательный этап перехода на дизайн-систему.
Design System Checklist
Подробный чеклист по внедрению дизайн-системы. Визуальный язык и токены, компоненты, инструменты, управление проектом.
Windows 10X
Microsoft готовит альтернативный интерфейс Windows 10X для новых вроде двухэкранного Surface Neo. Он будет поддерживать обычные приложения Windows, но оболочка имеет упрощённый вид.
Defining Design System Contributions
Nathan Curtis из EightShapes описывает форматы взаимодействия команды дизайн-системы и продуктовых команд, которые предлагают свои решения и изменения. Толково и подробно разложены многие нюансы процесса. Продолжение.
Smashing Podcast Episode 7 With Amy Hupe — What Is A Government Design System?
Подкаст с Amy Hupe, работавшей над контентом и документацией для дизайн-системы Gov.uk.
Material Design
Обновили гайдлайны по плотности интерфейса. Она позволяет адаптировать его для разных задач и сред (например, увеличить для веба). Сами гайдлайны и онлайн-инструмент для примерки.
SLDS + VS Code = Win!
Плагин к Visual Studio Code от SalesForce позволяет подсвечивать параметры из их дизайн-системы.
Понимание пользователя
Just-Right Personas — How to Choose the Scope of Your Personas
Kim Flaherty из Nielsen/Norman Group говорит о двух типах персонажей — широкого и узкого спектра. Первые описывают компанию в целом, вторые — отдельные продукты.
Netflix thinks ‘Fortnite’ is a bigger threat than HBO
Шикарный пример правильного понимания Jobs to Be Done от главы Netflix Reed Hastings. Он считает главной угрозой не канал HBO, а игру Fortnite в борьбе за свободное время пользователей.
How Information-Seeking Behavior Has Changed in 22 Years
Nielsen/Norman Group повторили исследование Xerox PARC 1997 года о том, как пользователи ищут информацию в интернете. Feifei Liu рассказывает об основных выводах.
Adobe XD
Январское обновление. Также добавили авто-layout. Читайте также интервью с Talin Wadsworth из команды об истории создания инструмента и планах на будущее. Он также рассказывает о рабочем процессе и команде.
Adobe Creative Cloud
MS Office 365 может подключить библиотеки Creative Cloud для импорта стилей и ресурсов.
Play — The new tool for creating better mobile apps
Совершенно дикая штука — инструмент дизайна мобильных приложений на самом телефоне. Ребята сотворили совершеннейшую чуму (пусть и вызывающую вопросы по продуктивности такой работы дизайнера). В феврале появится бета для iPhone, позже обещают iPad и Android-телефоны. Предыстория создания от авторов.
Figma: Плагины
- Bravo Studio App: Подключает реальные данные и генерирует нативный код для Android и iOS на основе прототипов.
- Smooth Shadow: Аккуратные тени с помощью кривых easing.
- Design Lint: Линтинг для макетов. Находит элементы без привязанных стилей.
- Text Prettier: Типограф для причёсывания текста.
Полезные материалы
- Zandre Coetzer даёт советы по переезду дизайн-команды со Sketch. Он советует перестроить мышление, потому что попытки воссоздать решения и организацию макетов из Sketch приводит к куче проблем.
EscherSketch
Браузерный инструмент позволяет делать паттерны из симметричных фигур и наглядно видеть их в повторяющемся полотне.
BG Painter
Генератор модных фонов (например, «жидкий металл»).
Mosaica Studio
Новый инструмент для создания каскадной (stagger) анимации. Прототипировать и создавать подобную анимацию вручную через кейфреймы трудозатратно, здесь же вместо работы с кодом предлагается WYSIWYG.
Adalo
Ещё один конструктор мобильных приложений, делающий нативную сборку на основе прототипа. Android, iOS и веб.
WebStudio
Ещё один конструктор сайтов в браузере.
Fronty
Сервис конвертирует картинку в HTML. Эффектно, но непонятно зачем — макет сайта и так сделан в каком-либо инструменте с разбивкой по слоям, а генераторов оттуда и так хватает.
Super Sphere
Генератор контурных сфер с анимацией.
Calcolor
Интересный генератор цветовых палитр, который позволяет копать смежные в разные стороны.
Gradienta
Генератор градиентов и интересных наложений слоёв в браузере с экспортом в CSS.
Pixelworm
Занятный сервис, который позволяет сравнить макет в Sketch и реализацию в мобильном приложении.
Clai
Инструмент позволяет сделать подачу макета на устройстве, которое в свою очередь можно вертеть с анимацией.
Trace
Ещё один убиратор фона с фотографий.
Пользовательские исследования и тестирование
The critical connection between support and UX design
Clara Petit из Shopify перешла из поддержки пользователей в UX. Она показывает на своём опыте пересечение и потенциальное взаимодействие между этими двумя ролями.
The User Researcher’s Guide to GDPR
Подробнейшая памятка по учёту GDPR при проведении пользовательских исследований от Carrie Boyd из сервиса User Interviews. Закон накладывает много ограничений.
How to Get More Out of A/B Testing Than a Win or Loss
Leigh Lyman из Lucid Software рассказывает о подходе компании к анализу проведённых ранее A/B-тестов. Как они хранят выводы и возвращаются к ним для поиска паттернов в поведении пользователей.
Should All Scale Points Be Labeled? + Comparing Fully vs. Partially Labeled Five- and Seven-Point Scales
Jeff Sauro и Jim Lewis изучили вопрос «нужны ли подписи ко всем элементам шкалы опроса». Предыдущие исследования на тему чёткого доказательства не дают, многое зависит от контекста опроса (способ, частота, подача).
Co-creation в пользовательских исследованиях
Евгения Наумова из СКБ Контур рассказывает об опыте проведения пользовательских исследованией, где продуктовая команда делает концепты интерфейсов вместе с респондентами.
Ethical Maturity in User Research
Maria Rosala из Nielsen/Norman Group даёт чеклист этической зрелости при проведении пользовательских исследований. Всё больше компаний, где дизайнеры и менеджеры продуктов самостоятельно общаются с пользователями, но не всегда умеют делать это.
Важные моменты при создании юзабилити-лаборатории
Чеклист по организации помещения для UX-лаборатория от Дмитрия Himi.
Building an Integrated Qualitative and Quantitative User Research Capability
Jared Spool приводит интересный пример исследования Intuit при запуске новой функциональности в их продукте Quickbooks. Реально полезную функцию в интерфейсе не использовали, потому что эту задачу решали вообще в почтовом клиенте.
Визуальное программирование и дизайн в браузере
Progressive Web Apps in 2020
Мощный разбор текущего состояния Progressive Web Apps от Maximiliano Firtman. Внедрение, поддержка платформ и т.п. (даже про тёмную тему и гибкие экраны).
Новые скрипты
- Jeremy Franzese и Colin Peyrat рассказывают о создании эффекта модной «переливающейся цветами» жидкости на WebGL для сайта Akaru.
Типографика в вебе
- Florens Verschelde разбирает историю появления типичного базового размера шрифта на сайтах. Как она менялась от самых первых устройств и наследия печатного мира.
Работа с цветом в вебе
- Kilian Valkhof показывает, как использовать easing для градиентов и теней в вебе с помощью CSS (точнее, не совсем чистого CSS).
Метрики и ROI
Designing for Retention & Growth
Chloe Cathcart из HubSpot описывает потенциальную помощь дизайнера в увеличении retention. Она разобрала процесс «залипания» пользователя на 4 составляющих.
Three Branches of Standardized UX Measurement
Jeff Sauro и Jim Lewis составили полный список стандартных методов оценки UX. Они развивались по трём веткам с 1980х годов.
Дизайн-менеджмент и DesignOps
How To Empower Design Teams By Measuring Value
Dave Cunningham из Co-op предлагает модель DIET (Design Impact Evaluation Tactic) для оценки потенциального успеха проекта. Она оценивает доработанную версию double diamond по нескольким вопросам. Чеклист на отдельном сайте и в виде таблицы.
The Many Meanings of Design-Led
Jon G. Temple и Patrick Commarford из IBM описывают 4 способа взаимодействия дизайнера в agile-команде. От этого зависит влияние на дизайн-решения и вообще формат их принятия.
The business of UX management
Фреймворк дизайн-менеджмента от Daniel Rosenberg. Он, как и я, использует идею паттернов для структурирования лучших практик и методов. Хотя фокусируется на общих для менеджеров вообще.
Organizational Design Canvas / Канвас организационного моделирования
Шаблон организационного моделирования от Wonderfull. Он позволяет оптимизировать сервисные процедуры, команду, процессы и инфраструктуру для улучшения по всей customer journey map.
The Grit: Yury Vetrov, ex-Design Director at Mail.ru Group
Прошлым летом к нам на Mail.ru Design Conf приезжал Matouš Roskovec из Avocode. А потом я сгонял в Прагу и пообщался с ним. Из этого выросло годное интервью для их серии The Grit. От истории прихода в дизайн и карьерного пути до практик дизайн-менеджмента и профессиональных хобби. Писал ответы с неделю, зато получилось очень подробно. Общались между работами, так что текст про этот период.
The Possibilities of “And” — Prioritizing Usability Alongside Feature Growth
Libby Maurer из HubSpot рассказывает о том, как компания балансирует между ростом и улучшением существующей функциональности. Хорошие принципы дизайн-команды, а также детали про работу с дизайн-долгом.
How we’re building a high-trust distributed culture
Matt Hryhorsky из команды роста Shopify описал практики совместной работы и координации для распределённой команды. Отличная цельная памятка.
Shifting Our Team Goals to be UX Outcomes
Jared Spool описывает свой подход к стратегии дизайн-команды на год через выхлоп и его визуализацию.
Командное взаимодействие
Дизайн-марафон — Эффективный тимбилдинг, который помогает находить прорывные решения
Дизайнеры Redmadrobot рассказывают о формате хакатонов по дизайну, которые они проводят для клиентов. Вторая часть с опытом Альфа-Банка, Сбербанка, Miro, Wargaming и Mail.ru Group.
Методологии, процедуры, стандарты
Design’s Unsexy Middle Bits
Christina Wodtke описывает своё видение современного дизайн-процесса. Правда, она зачем-то привязывается к диаграмме дизайн-мышления, устраивая терминологический переполох.
Triple Loop Product Lifecycle. Learn, Build, Measure and Maturity Levels
Фарид Сабитов предлагает свою версию lean-модели создания продуктов. Она разбита на три подцикла.
Кейсы
An exclusive look at how Google designed its Stadia game controller
Обзор процесса работы над джойстиком игровой приставки Google Stadia.
How adopting a UX mindset changed the Shopify Help Center
Robert Mousseau из Shopify рассказывает об улучшении интерфейса раздела помощи. Какие исследования они проводили и как описывали персонажей и Jobs to Be Done.
Битва за доли процента — как Альфа-Банк растит конверсию своего сайта
Обзор подходов Альфа-Банка к оптимизации работы сайта.
wikiHow’s Art Is Made By a Global Network of Freelancers, Primarily in the Philippines
Рассказ про уматнейший стиль иллюстраций сайта с инструкциями wikiHow, которые стали культовым мемом. Как устроен дизайн-процесс, выдающий миллионы картинок.
История
The Apple Archive
Неофициальный архив маркетинговых материалов Apple.
Тренды
CES 2020 и новые интерфейсы
Выставка прорывного и уматного хайтека CES 2020 прошла 7-10 января в Лас-Вегасе. На ней традиционно обкатывают новые технологии для массовых продуктов, потом наперегонки заявляют «у нас тоже есть концепт применения этой штуки», а потом переключаются на что-то новое. Выбрал интересные устройства и направления, которые касаются дизайнеров интерфейсов: гибкие экраны (второе пришествие), умные колонки и голосовые помощники, авто, носимые устройства, умный дом и просто интересные технологии.
Five key colors for 2020
Цветовые тренды 2020 года от Coloro.
Статистика рынка в 2019Q3
+2%
рост продаж смартфонов в мире (после двухлетней стагнации)
Статистика рынка в 2019
94,4M
проникновение интернета в России (79,8% взрослого населения)
Алгоритмический дизайн
NVIDIA’s AI can put your pet’s smile on a random animal
NVIDIA теперь меняет эмоции не только на фото людей, но и животных.
Does Artificial Intelligence Mean Data Visualization is Dead?
Интереснейшее обсуждение роли и будущего визуализации данных в эпоху искусственного интеллекта от IBM. Нужен ли вообще спидометр в машине с автопилотом?
25,000 AI Photos
Ещё одна крупная галерея реалистичных лиц, сгенерированных алгоритмами. Причём это не просто лица, а целые позы в классическом для фотостоков виде.
Sketch2Code
Экспериментальный сервис Microsoft делает из бумажного наброска интерфейса прототип в коде.
Голосовые интерфейсы
Встречаем Яндекс.Станцию Мини. Большая история маленького устройства
Тимур Гаскаров рассказывает о создании умной колонки Яндекс.Станция Мини с точки зрения железа и интерфейса.
Speculative Identities — Exploring the Frontiers of Visual Identity…
Сайт анализирует айдентику в фантатических фильмах и комиксах. Они достаточно подробно разбирают вымышленные бренды Blade Runner, Terminator, Back to the Future, Alien, Robocop, Total Recall и других.
Автомобильные интерфейсы
Digital Wellbeing
Craigslist only took 11 years to make its own iOS app
Ещё один повод стебать Craigslist с дизайном интерфейса из альтернативной вселенной. Они впервые запустили мобильное приложение.
Vertically Works
Занятный концепт «вертикального интернета» для корейского языка (хотя и не особо практичный). История проекта от авторов.
Для общего и профессионального развития
Daniel Rosenberg — UX Magic
Interaction Design Foundation выпустили книгу Daniel Rosenberg «UX Magic» о семантическом методе проектирования взаимодействия.
Люди и компании в отрасли
FWD[1]: ONY / Брендинг цифровых продуктов
В прошлом году мы с Митей Осадчуком взяли интервью у студии ONY, одной из лучших отечественных компаний в цифровом брендинге. Макс Орлов, Сергей Лавриненко и Андрей Потапов рассказали о своём подходе, процессе создания и поддержки айдентики, метриках и трендах. А также показали офис агентства. Спасибо Антону Резнику и команде Mediaproduction Mail.ru за шикарную работу по съёмке и монтажу.
Clayton Christensen dies at 67 after lifetime of business, spiritual influence
Умер Clayton Christensen, автор концепции «дилеммы инноватора» о подрывных инновациях 🙁 Он также один из ключевых людей в развитии Jobs to Be Done и тесно работал с гением менеджмента Andy Grove в Intel. Хотя он не всегда угадывал движение технологий, он внёс один из самых мощных вкладов в работу как менеджеров продуктов, так и дизайнеров интерфейсов. Некролог от его хорошего друга Michael B. Horn.
Материалы конференций
UX & Design Events in 2020
Каталог конференций по дизайну на 2020 год.
All Design Conferences — A place to find UX, Tech, and Creative Events Around the World
Ещё один каталог конференций по дизайну.
Подпишитесь на дайджест в Facebook, ВКонтакте, Телеграме или по почте ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику. Отдельный благодарчик команде Сетки за редактор и Александру Орлову за визуальный стиль.