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

Alvaros
Онлайн
Регистрация
14.05.16
Сообщения
21.452
Реакции
101
Репутация
204
Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: .

526ab7536202b0eefe61e2090ca88195.jpg



Кстати, это сотый выпуск! Около 10 000 ссылок за 10 лет. . Сейчас его суммарно читают порядка 250 000 человек на разных площадках:
ezjxrzodibk_sghcdljzxwfyo4m.png
u758hyksky8laoepz7ceie1lvfu.png
ev51hub_e9pgjubye0inizbez6a.png
5orzde-_6vghyehqewfd-fwdiq0.png
gowwdmb5k8pnixlypfgq9ym2fuq.png
umb0uyehsna7ixnkop1ocbarw9s.png

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




Raluca Budiu из Nielsen/Norman Group разбирает проблемы интернет-магазинов с доставкой продуктов, которые вскрылись во время карантина и нереального спроса. Как учитывать такие пограничные ситуации.





Годный кейс о редизайне сложной таблицы с интересным взаимодействием.





Feifei Liu из Nielsen/Norman Group анализирует интерфейсы поисковой выдачи от Google и Baidu. Как они устроены и как это влияет на поведение пользователей.




Smashing Magazine выпустили книгу Paul Boag «Click!» о лучших паттернах и практиках для повышения конверсии и других бизнес-метрик. .


Adam Silver размышляет на тему использования единого поля ввода для сложных числовых данных или разделения на несколько. В большинстве случаев лучше работает общее.




Peter Ramsey разбирает интерфейсы британских банковских приложений. В первой части он смотрит на сложность открытия счёта, во второй — , в третьей — .





Памятка по выбору правильных полей ввода и их организации в форме от Тараса Бакушевича.



Ahman Shadeed размышляет на тему поддержки промежуточных состояний адаптивности, которые лежат между популярными точками разрыва.





И снова новая коллекция интерфейсных паттернов.





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





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





Feifei Liu из Nielsen/Norman Group анализирует китайские сервисы для оплаты по лицу в магазинах и кафе. Это пока ещё непривычное решение и оно вызывает много вопросов у пользователей.





Книга Luke Wroblewski «Mobile First» теперь доступна бесплатно в онлайне.





Kara Pernice из Nielsen/Norman Group описывает лучшие практики по представлению информации в интранетах компаний о ситуации с пандемией и удалённой работе в целом. .



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




Команда SuperFriendly перечисляет возможные разделы живого гайдлайна дизайн-системы. Исчерпывающий список, хотя заполнять вообще все его пункты необязательно.



Microsoft Fluent Design

19-21 мая прошла ежегодная . Как и вся жизнь в этом году, в онлайне.



Большинство выступлений посвящено разработке, но дизайн-команда сделала , которая заменила в том числе Office Fabric UI.



Во-первых, кросс-платформенные библиотеки для , , , и . Обещают поддержку токенов для тематизации. Во-вторых, : Android, iOS, веб и пиктограммы.

Сама .






Marcel van Remmerden и Jeremy Elder из GitLab рассказывают о создании тёмной темы оформления. Для редакторов кода это стандарт, но сам веб-интерфейс нужно было проработать.





Kilian Valkhof советует не делать простой переключатель светлой и тёмной темы на сайте, а добавить возможность оставить выбор на уровне системы.



Max Böck показывает, как быстро и дёшево сделать переключатель темы оформления на сайте (причём не только обычной и тёмной).



Вариативный шрифт от Dalton Maag, оптимизированный для светлой и тёмной темы оформления.



Brad Frost описывает свой опросник, с которым он приходит к клиентам при работе над дизайн-системой.



Clay Derk рассказывает, как создавались гайдлайны по текстам в интерфейса Shopify. Интересные детали о поиске характера — например, они перестали пытаться угадать настроение пользователя.





Ricardo Vazquez и Tobias Negele из Shopify рассказывают о создании ветки дизайн-системы Polaris для кассовых терминалов. Интересные детали о принципах дизайна для среды, которые определяли интерфейс.



Рекомендации по поддержке accessibility в визуализации данных на базе движка D3.js от Sarah L. Fossheim. .



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





CSS-фреймворк для стилизации интерфейсов под Windows XP.



Liam Spradlin из Google рассказывает, как рассчитать размер экрана для любого устройства на Android, при том что их многообразие бесконечно.



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




Feifei Liu из Nielsen/Norman Group описывает три вида поведения пользователей при поиске информации: получить, сравнить или выбрать, понять.





Набор фреймворков от Microsoft для этического отношения к пользователям при инновационной деятельности. .

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




Коллекция методов системного мышления и анализа проблем при концептуальном проектировании интерфейсов (и не только).






Rosenfeld Media выпустили книгу Jim Kalbach «The Jobs To Be Done Playbook». UXmatters и A List Apart публикуют и .



Rosenfeld Media выпустили книгиу Stephen Anderson & Karl Fast «Figure It Out» о концептуальном проектировании. A List Apart публикуют .
Новые инструменты дизайна интерфейсов




Совсем мелкий тюнинг.



Adobe XD

: офлайновая совместная работа и улучшение прототипов. Также .

Framer Web

Версия для браузера вышла из беты. .



Сторонний клиент Figma для iPad.



Плагины


  • : Позволяет увидеть разные состояния адаптивности экрана.
  • : Меняет размеры всех элементов в группе при уменьшении или увеличении.
  • .
  • : Экспортирует всю страницу с артбордами и комментариями.

Шаблоны


  • . .
  • .
  • Dropbox: . .



Простой графический редактор в браузере с большой библиотекой шаблонов, пиктограмм и других ресурсов.



Простой генератор CSS-кода кривых Безье для анимации.



Вышла бета-версия. Новый интерфейс, адаптивность, интеграция со Sketch и Figma.



Zeplin

. Быстрый доступ к макетам и связанным задачам в Jira.



Приложение позволяет экспериментировать с анимацией для iOS и MacOS. На выходе родной код.



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





Новый браузерный инструмент для создания сайтов. Достаточно мощный на вид: код на React с возможностью делать простые компоненты, библиотека готовых шаблонов и многие другие обязательные пункты.





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



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




Samantha Sergeant из Deliveroo рассказывает об организации архива отчётов о проведённых пользовательских исследованиях. Они пошли простым путём — сделали хорошо организованный список, не стали делать выдержки конкретных находок.



Steve Bromley приложил методы пользовательских исследований к основным этапам модели двойного алмаза. Как и на какой стадии проверить гипотезы.



Maria Rosala из Nielsen/Norman Group рассказывает об опросе UX-специалистов на тему проведения разведочных пользовательских исследований.



Jeff Sauro и Jim Lewis описывают способы опредлить процент успешно завершённых сценариев в удалённом немодерируемом юзабилити-тестировании. Они предлагают аппроксимацию из ответов на SUS и SEQ.





Caroline Jarrett и Janice ‘Ginny’ Redish описывают подходы к юзабилити-тестированию документов. Можно попросить респондентов кратко описать суть после прочтения, отметить отдельные абзацы плюсами и минусами, попросить найти ответ на конкретный вопрос.

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




Google предложили базовый набор метрик для оптимизации производительности сайтов. Это сильно влияет на восприятие продукта и работу интерфейса.

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


  • .
  • .
  • .
  • , чтобы на ней хорошо читался текст.

Метрики и ROI




Jim Lewis и Jeff Sauro провели свежее сравнительное исследование корпоративного ПО. Они сравнили их по метрикам SUS и NPS.





Обзор использования сравнительных метрик Kate Moran из Nielsen/Norman Group. Зачем, когда и какие использовать.

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




Моя презентация о фреймворке «Паттерны дизайн-менеджмента», на базе которого построена будущая книга и курс на Bang Bang Education. Это системный подход к улучшению дизайна в компании, а также обновлению самой организации для этого рывка. Он помогает проанализировать ситуацию в компании и определить точки фокуса, а после этого предложить стратегию и команду, которая сможет запустить пилот и масштабировать его. Всё это базируется на наборе повторяемых методов и практик дизайн-менеджмента, обёрнутых в формат паттернов.





Noah Levin описывает все способы синхронизации дизайн-команды Figma. Регулярные встречи, сессии дизайн-критики, совместные выезды, обучение и другие форматы.



Иван Соловьёв из DocDoc рассказывает о двух подходах к дизайн-менеджменту. Надзиратель, который микро-менеджит команду, и яблочное дерево, когда руководитель помогает ей развиваться и расти.





Rachel Krause из Nielsen/Norman Group предлагает использовать половину двойного алмаза для процесса найма. Он и так происходит в таком формате, но аналогия интересная.





Александр Всехвальнов из Ситимобила рассказывает о процессе найма дизайнеров в компании. От отбора и собеседований до тестового задания.



Kate Kaplan из Nielsen/Norman Group приводит результаты опроса дизайнеров интерфейсов и дизайн-менеджеров на тему их понимания DesignOps.





Marcelo Somers описывает концепцию гибкости в работе над клиентским опытом. Какие организационные способности должны быть у организации, чтобы реагировать на быстрые изменения рынка.



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




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



Sarah Gibbons из Nielsen/Norman Group опубликовала , который адаптирован для заполнения распределённой командой.

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




Олег Якубенков подробно описывает подход к прогнозированию аудитории и дохода продукта с помощью когортного анализа. Он даёт шаблон, хотя уточняет, что его нужно дорабатывать под конкретную модель роста.



Байрам Аннаков из App in the Air перечисляет навыки менеджера продукта, которые по-хорошему должны быть у всех членов продуктовой команды.

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




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

bomwfx1nnbmxl-3caiu1yxxbfdm.png




Карта методов дизайна интерфейсов и UX-исследований от Mei Zhang. .



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




Nefaur Khandker и May-Li Khoe из Khan Academy рассказывают о поиске единого визуального языка на базе принципов дизайна.





Дизайн-директор YouTube Chris Bettig рассказывает о работе над фирменным шрифтом YouTube Sans.





Ребрендинг международной доски объявлений OLX от Design Studio. Динамический логотип с конструктором под разные ситуации, хотя применения на интерфейсы нет.





Ребрендинг аналитического сервиса Mentimeter от скандинавской Bold. Графики и диаграммы здорово провязаны с визуальной рифмой и логотипом.



История




25 мая исполнилось 10 лет концепции адаптивного дизайна, которую предложил Ethan Marcotte. Он описывает краткую предысторию.



Jakob Nielsen вернулся к своим прогнозам 1995-2001 годов и посмотрел, какие из них сработали, а какие были ложными.



Тренды




Kathryn Whitenton из Nielsen/Norman Group рассказывает о свежем исследовании скорости работы сайтов, которое они делают уже 23 года. Всё плохо — несмотря на увеличение скоростей доступа, сами сайты грузятся также долго (теперь из-за плохой оптимизации кода). Она приводит серию выкладок из экспериментов компаний, показывающих плохое влияние на конверсию.



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


и

Сервисы генерируют художественный портрет на основе фото.





В IBM назвали проектировщиков интерфейсов бизнес-дизайнерами.

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




Каталог дизайнерских сообществ в Slack.



Подборка бесплатных или почти бесплатных фильмов о креативности.




Scott Berkun выпустил книгу «How Design Makes the World» о роли дизайна в повседневных предметах и явлениях. .
Материалы конференций




Сервис Design Calendar дополнил свой каталог онлайновыми конференциями и митапами по дизайну.



Конференция Adobe 99U пройдёт 17 июня 2020 года в онлайне и бесплатно.

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