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

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

Scrolling and Attention ^[2]

Свежие выкладки Therese Fessenden из Nielsen/Norman Group о том, насколько пользователи готовы прокручивать страницы. Хотя основная часть всё ещё не опускается ниже первого экрана, эта цифра упала с 80% в 2010 году до 57% сейчас.

Banner Blindness Revisited — Users Dodge Ads on Mobile and Desktop ^[3]

Kara Pernice из Nielsen/Norman Group описывает знакомые и свежие выкладки из исследований, посвящённых «баннерной слепоте».

Mobbin — Latest Mobile Design Patterns ^[4]

Ещё одна библиотека паттернов мобильных интерфейсов.

Introducing Boosts — an all-new way to show your support in Basecamp ^[5]

Jonas Downey из Basecamp рассуждает о плюсах, минусах и подводных камнях использования лайков в productivity-сервисе. Они сначала внедрили их в более-менее базовом виде, а потом пересмотрели в сторону графичных мини-комментариев.

Top 10 Design Mistakes in the Unsubscribe Experience ^[6]

Kim Flaherty из Nielsen/Norman Group приводит рекомендации по интерфейсу отписки от рассылки. Многие компании стараются удержать пользователя на этому пути, но в итоге делают отношение пользователя к себе ещё хуже.

Seven principles of effective digital navigation ^[7]

Gerry McGovern рассказывает о своих принципах хорошей навигации в вебе.

Исследования Baymard Institute

• Рекомендация форматировать описание продуктов с выделением ключевых функций и особенностей ^[8].
• Важность гибких фильтров ^[9].

Тёмные паттерны

• Flavio Lamenza собрал свежие тёмные паттерны ^[10].

What You Need To Know To Increase Mobile Checkout Conversions ^[11]

Серия советов по оптимизации мобильных интернет-магазинов от Suzanne Scacca.

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

Дизайн Альфа-Банка ^[12]

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

Книги о дизайн-системах ^[13]

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

Creating Themeable Design Systems ^[14]

Brad Frost описывает принцип создания тем оформления в дизайн-системах по всем модным канонам ― токены, единая архитектура элементов интерфейса.

Yesenia Perez-Cruz @ An Event Apart — Scenario-Driven Design Systems ^[15]

Yesenia Perez-Cruz из Vox Media рассказывает о подходе команды к развитию дизайн-системы — они ориентируются в первую очередь на сценарии использования, а не просто паттерны.

Storybook Tutorial ^[16]

Онлайн-курс по работе с живыми гайдлайнами для компонентов дизайн-системы Storybook. Анонс ^[17].

Building the Clarity Date Picker — Achievements and Challenges ^[18]

Aditya Bhandari из команды дизайн-системы VMWare Clarity рассказывает о создании поля для выбора даты, которое поддерживает локализацию. Также вышла вторая часть рассказа команды дизайн-системы Clarity о создании тёмной темы оформления ^[19].

Cards and Composability in Design Systems ^[20]

Nathan Curtis разбирает структуру популярного паттерна «карточка».

Дизайн-система. Определение понятия ^[21]

Дизайн-системы стали одной из главных тем в дизайне продуктов за последние годы — наконец-то нашлось работающее решение для поддержки нескольких продуктов в унифицированном виде. Коллекция styleguides.io ^[22] собрала огромное количество примеров, публикаций и книг на тему выше крыши. И всё равно на конференциях и в обсуждениях в интернетах встречаем непонимание самой сути явления. Два главных заблуждения: «да это же то же самое, что классические руководства по стилю» и «у нас дизайн-система в Sketch». Мой коллега Андрей Сундиев​ на пальцах рассказал, что такое дизайн-система и почему так много компаний считает их серебряной пулей.

Фреймворки

• CSS Blocks ^[23], фреймворк для дизайн-систем от LinkedIn.
• Генератор статических сайтов на базе фреймворка Vue.js ^[24].

Microsoft Fluent Design System

• Глава дизайн-системы Microsoft Fluent Joey Pitt рассказывает о принципах работы её команды ^[25]. Как строится цикл обновлений, как они завязаны на версии Windows.
• Mike Jacobs из Microsoft рассказывает о принципах интерфейсного «материала» акрил в дизайн-системе Fluent ^[26].

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

Our Exact Customer Research Process for Userlist.io ^[27]

Отличнейший кейс исследования по методике Jobs to Be Done для запуска сервиса Userlist от Claire Suellentrop. Неплохо пошагово рассказано о процессе исследования и сделанных выводах по функциональности и интерфейсу продукта.

Accessibility

• В блоге компании Altexsoft пишут о разнице между терминами «универсальный дизайн», «инклюзивный дизайн» и accessibility ^[28]. В дополнение к этому идёт памятка по улучшению доступности интерфейсов для пользователей с ограниченными возможностями.
• Валерия Курмак из Сбербанка рассказывает об инициативах компании по обеспечению доступности ^[29]. В том числе они планируют выпустить приложение-чеклист для дизайнеров.

Проектирование и дизайн экранов интерфейса

Figma

• Figma выпустили свой конвертер макетов в код для React на GitHub ^[30]. Karl Jiang рассказывает, как это устроено и что он умеет ^[31]. Это важный шаг по связке инструментов дизайна и технологических фреймворков, но без связки с основной библиотекой компонентов это всё ещё игрушка, а это самая сложная задача.
• Carmel DeAmicis приводит примеры свежих экспериментов по использованию API Figma ^[32]. Экосистема стремительно развивается и это выглядит более правильной и надёжной версией плагинов Sketch.
• Jon Rohan из GitHub рассказывает о том, как устроен экспорт библиотеки иконок из Figma в продукт с помощью нового API инструмента ^[33].
• Pagedraw ^[34], Ещё одна попытка конвертировать макеты Sketch и Figma в код на React.

Sketch

Студия Icons8 продолжает эксперименты с просмотрщиками макетов в Sketch — новый онлайн-сервис Sketch the Ripper ^[35] позволяет разобрать их.

Stackswell ^[36], ещё один плагин для адаптивных макетов в Sketch. Правда, пример Anima AutoLayout показывает, что это очень нестабильные решения, которые оставляют много мусора за собой. Анонс ^[37].

Matthew Talebi описывает более-менее здоровый процесс работы с шаблонами в Sketch и перечисляет разные способы его распространения ^[38].

InVision

• InVision купили Wake ^[39], который показывает текущие макеты дизайнеров в команде. А ещё у них были крутейшие интервью с дизайн-командами, так что и Design Genome Project перепадёт.

Framer

• Появилась работа с 3D-объектами и их анимация ^[40]. Это востребованный визуальный стиль, который делает продукты бодрее.

Flawless

• Появилась возможность сравнивать макеты с реализацией приложения на iOS ^[41] (в эмуляторе).

Studio

• Инструмент вышел из беты ^[42].

Sketchize — Free Wireframing Sheets ^[43]

Очередные шаблоны для скетчей мобильных интерфейсов.

Инструменты паблишинга

• Lonely Page ^[44], ещё один конструктор одностраничников.
• Sheet2Site ^[45], генератор простых сайтов из таблиц в Google Sheets.

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

How to Assess Brand Affinity & Sentiment ^[46]

Jeff Sauro показывает, как измерить отношение пользователей к бренду. Он приводит пример оценки для пары десятков известных компаний.

UX research findings ― Distinguishing base hits from home runs ^[47]

Отличная статья Paul McInerney из IBM о том, как и в каких ситуациях пользовательские исследования корректируют планы продуктовых команд.

Quantitative User-Research Methodologies: An Overview ^[48]

Сравнительная таблица методов качественных пользовательских исследований от Kate Meyer из Nielsen/Norman Group.

5 Techniques to Make your UX Research More Effective ^[49]

Хорошая сводная памятка Jeff Sauro о том, как сделать пользовательские исследования более эффективными.

Why you don’t need a representative sample in your user research ^[50]

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

Finding UX Research Participants ^[51]

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

You can’t research without context ^[52]

Dylan Blanchard рассказывает о принципах работы команды пользовательских исследований в Shopify.

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

Visual Inspector — Free Chrome extension for live website feedback and fixing design bugs ^[53]

Плагин для Chrome позволяет ковырять стиль сайтов в более наглядном виде, чем стандартный инспектор кода. Изменения можно обсуждать с коллегами.

Solis ^[54]

Приложение для Mac облегчает вёрстку адаптивных сайтов. Его можно подключить к любому редактору кода и получить гибкий и мгновенный предпросмотр даже для изменений в файлах препроцессоров.

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

• Скрипт реализует необычные эффекты наведения на WebGL ^[55].
• Интересный подход к отображению добротности пароля ^[56]— декоративное изображение постепенно улучшает качество.
• Фреймворк для интерфейсной анимации на React ^[57]. Анонс ^[58].
• Реализация и анимация градиентных лучей ^[59].
• Крутейшие визуальные эффекты нажатия на кнопки ^[60].
• Коллекция шизоидных экспериментов с графикой на CSS ^[61].

Письма рассылки

• Обзор простых фреймворков для создания адаптивных писем рассылки от Paolo Mioni ^[62].

Работа с цветом в вебе

• Быстрый способ создать двухцветную версию фото в духе Spotify ^[63].

Метрики и ROI

The User Experience of News Websites ^[64]

Сравнительное пользовательское исследование крупных новостных сайтов от Jeff Sauro со значениями NPS (упал с 21% в 2012 до -9%) и SUPR-Q.

UX-стратегия и менеджмент

How we structure (some) UX teams at Shopify ^[65]

Alaine Mackenzie из Shopify рассказывает о текущей структуре дизайн-команд в компании и том, почему она изменилась за последние годы. Ещё немного об их команде:

• Elyse Viotto о том, как становилась дизайн-менеджером и как нашла новую пользу от себя в команде ^[66].

Emotional Intelligence Has 12 Elements. Which Do You Need to Work On? ^[67]

Daniel Goleman и Richard E. Boyatzis предлагают отличную модель для описания эмоционального интеллекта по 12 характеристикам: самоанализ, самоконтроль, социальный анализ и управление взаимоотношениями. На основе неё удобно оценивать базовые навыки специалиста в команде.

Hardening the «soft» skills ^[68]

Lia Garvin из Google даёт советы по прокачке soft skills в команде. В продолжение темы:

• Hardik Pandya сравнительно недавно попал в Google и описал свой опыт интеграции в неё ^[69]. Получилась хорошая памятка по профессиональной гигиене и командному взаимодействию для любого специалиста.

Designed Space — The culture of design studios ^[70]

Инициатива исследует офисы и рабочие пространства дизайн-студий и продуктовых команд.

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

Abstract

• Вышло обновление 0.70 ^[71].

Plant

• Переработан плагин для Sketch ^[72].

Продуктовый менеджмент и аналитика

Go Practice! Симулятор — Курс управления продуктом на основе аналитики ^[73]

Онлайн-курс Олега Якубенкова по управлению продуктами в виде обучающей игры. Анонс ^[74].

Кейсы

The Inside Story of Reddit’s Redesign ^[75]

Рассказ о редизайне Reddit, который не менялся с 2008 года. В такой ситуации опасно делать резкие шаги ― важно начать процесс обновления, а после этого сделать его непрерывным. Официальный анонс ^[76] (выкатываться он будет постепенно). На очереди Craigslist.

Как мы разрабатывали стиль корпоративной иллюстрации «Лаборатории Касперского» ^[77]

Хороший рассказ студии Мыслеформа о создании гайдлайнов иллюстраций для Лаборатории Касперского. Разбор стилеобразующих элементов и вариаций по исполнению.

How we designed page previews for Wikipedia — and what could be done with them in the future ^[78]

Nirzar Pangarkar из Wikimedia Foundation рассказывает об особенностях и нюансах внедрения всплывающих превью для ссылок. Кросс-ссылки отвечают за 28% трафика Википедии, каждую минуту на них наводят курсор 2 миллиона раз.

Другие кейсы

• Студия Under Glass рассказывает о работе над интерфейсом переводчика Gengo ^[79].
• Cecilia Yang из Airbnb о том, как интерфейс помогает владельцам домов оправдывать ожидания жильцов ^[80].
• Дизайнеры UX Studio рассказывают о проектировании стриминговой платформы для HBO ^[81].
• Brian Donohue рассказывает об обновлении мессенджера Intercom ^[82] — продукт теперь решает задачи по поддержке пользователей в более широком ключе.
• Рассказ Zack Hargett о дизайне мобильного приложения GYANT Health ^[83].
• Gaby Izarra из Creative Market о редизайне карьерной страницы ^[84]. Очень крутой пример того, как она фокусируется на культуре и движущих силах в компании, а не просто списке вакансий.
• Vibha Bamba рассказывает о том, как команда Airbnb обнаружила потребность пользователей в инструкциях для жильцов и реализовала её в продукте ^[85].

Тренды

Статистика рынка (I квартал 2018)

-21%

падение продаж смартфонов в Китае ^[86]

0/-1,4%

стагнация рынка компьютеров ^[87]

10%

рост продаж ноутбуков в России ^[88]

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

AI UX: 7 Principles of Designing Good AI Products ^[89]

Dávid Pásztor из UX Studio описывает важные аспекты проектирования интерфейсов продуктов, использующих алгоритмический дизайн.

Perception Engines ^[90]

Tom White научился генерировать человекоподобные абстрактные иллюстрации с помощью алгоритма — он скармливает ему обучающую выборку, а затем подбирает относительно узнаваемое исполнение. Проект сделан в рамках инициативы Google Artists and Machine Learning ^[91] (её блог ^[92]).

New AI Imaging Technique Reconstructs Photos with Realistic Results ^[93]

Экспериментальное решение NVIDIA восстанавливает отсутствующие элементы на фотографиях.

Умные часы и браслеты

• Instagram отказался от приложения для Apple Watch ^[94]. Это очередное приложение из первой волны, которое оказалось бесполезным в таком контексте.

Helvetica Is Now An Encryption Device ^[95]

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

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

In Defense of Design Thinking, Which Is Terrible ^[96]

Отличнейший здоровый взгляд Khoi Vinh на никак не умолкающую дискуссию о том, полезен ли для профессии лейбл «дизайн-мышление» или это пустой маркетинговый баззворд. Даже если кто-то использует его неправильно, это мощный инструмент для того, чтобы сделать дизайн более массовым явлением (пусть даже кто-то поначалу будет делать это неправильно).

То же самое сейчас происходит с программированием — огромное количество курсов для детей и просто начинающих наверняка породит массу дрянного кода, но это решаемая проблема. Он также полемизирует с Natasha Jen из Pentagram, чьё одиозное выступление в прошлом году — чистейший кликбейт и непонимание роли дизайнера в современных продуктах и мире в целом.

Richard Banfield — ещё один дизайнер, которого утомил кликбейт Natasha Jen. Он разбирает её псевдо-критику ^[97].

Академия AIC ^[98]

AIC запустили академию для начинающих дизайнеров с бесплатной стажировкой. В свежей статье Сергей Попков сравнивает плюсы и минусы найма сильного дизайнера и прокачки начинающего с нуля ^[99]. Он рассказывает о системе развития стажёров в AIC и Skillbox.

Новые книги

• Ещё одна выдержка из книги Peter Morville «Planning for Everything» ― A List Apart публикует кусок главы 7 ^[100].

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

Объединение AIC и Лаборатории Артёма Геллера ^[101]

Знаковое объединение двух сильных дизайн-агентств. Они сфокусируются на работе над государственными сайтами. Обе команды участвуют в инициативе Дизайн государственных систем и работают над Дизайн-системой России, так что можно ждать их усиления. Дополнительная фактура у РБК ^[102].

Envoy Design — Stories and ideas from designers that challenge the workplace status quo ^[103]

Блог дизайн-команды Envoy.

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

DSCONF 2018 ^[104]

Конференция по дизайн-системам DSCONF ^[105]прошла 14-15 марта в Хельсинки. Опубликованы видео выступлений с неё.

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

Автор: jvetrau

Источник ^[110]