Дайджест продуктового дизайна, март 2019
Дайджест собирает свежие статьи по дизайну интерфейсов, а также инструменты, паттерны, кейсы, тренды и исторические рассказы с 2009 года. Я тщательно фильтрую большой поток подписок, чтобы вы могли прокачать свои профессиональные навыки и лучше решить рабочие задачи. Предыдущие выпуски: апрель 2010-февраль 2019 [1].
Паттерны и лучшие практики
UI Copy — UX Guidelines for Command Names and Keyboard Shortcuts [2]
Отличная памятка Anna Kaley из Nielsen/Norman Group о правильных названиях интерактивных элементов и выборе комбинаций для быстрых клавиш (десктопные и веб-приложения).
Checklist Design — Best UI elements for the best UX practice [3]
Коллекция чеклистов по проектированию типовых интерфейсных паттернов. Что не забыть при их использовании.
Communicating Ecommerce Discounts and Promotions [4]
Памятка Kim Flaherty из Nielsen/Norman Group о том, как правильно показывать скидки и промо-акции в интернет-магазинах. Она разобрала кучу страниц и сценариев, где упоминание уместно.
Human error ― An important ingredient in great designs [5]
Отличная памятка по обработке ошибок пользователей от Emanuel Serbanoiu. Он разбирает психологические их причины и даёт рецепты по типовым ситуациям.
Writing clearer error messages [6]
Чеклист по понятным и ёмким сообщениям об ошибках в формах от Amy Leak.
What does GDPR mean for UX? [7]
Паттерны грамотной интеграции ограничений и требований GDPR от Claire Barrett. Как не превратить интернет в ещё одно бюрократическое окошко, а рассказать пользователю о пользе и важности этих действий.
Contextual Menus — Delivering Relevant Tools for Tasks [8]
Anna Kaley из Nielsen/Norman Group разбирает особенности использования контекстных меню в интерфейсах.
Исследования Baymard Institute
- Как учитывать поисковые запросы о работе интернет-магазина, а не товарах [9].
- Правильный интерфейс выпадающего меню пользователя в интернет-магазинах [10].
Дизайн-системы и гайдлайны
Storybook 5 [11]
Вышла пятая версия одного из самых популярных живых гайдлайнов Storybook для компонентов на React, Vue, Angular, React Native и Ember. Он наконец-то стал выглядеть прилично и сам построен на базе Storybook.
Разработка своей дизайн-системы. Опыт «БАРС Груп» [12]
Дизайн-команда БАРС Груп рассказывает о создании дизайн-системы.
Material Design
- Новые правила для иконок приложений в Play Store [13]. Они становятся квадратными со скруглением 20% и тенью (они накладываются автоматически).
Понимание пользователя
Teenager’s UX ― Designing for Teens [14]
Alita Joyce и Jakob Nielsen из Nielsen/Norman Group рассказывают о пользовательском исследовании подростков и того, как они работают с интерфейсами. Полезная привязка к паттернам в конце и сравнение с другими возрастами (дети, студенты, взрослые).
Unbridged Knowledge Gaps Hurt UX [15]
Kim Flaherty и Kate Moran из Nielsen/Norman Group пишут о пробелах в знаниях пользователей о предметной области, которые должен решать интерфейс. А если не решает ― люди вынуждены разбирать информацию из разрозненных источников.
User Need Statements [16]
Sarah Gibbons из Nielsen/Norman Group разбирает формат описания пользовательских потребностей. Она советует использовать глаголы (цели и конечные состояния), а не существительные (конкретные решения).
Новые инструменты дизайна интерфейсов
Sketch в браузере [17]
Получили $20 млн от инвестфонда Benchmark. В отличие от всех остальных компания все эти годы развивалась на деньги основателей. Но становится видно, как Figma с суммарными $82,9 млн обходит их на повороте.
Ребята тизернули планы на год — браузерная версия с совместной работой, передача макетов из коробки, командные тарифы и пространство в облаке. Правда, темпы всё равно не огонь — первую версию в браузере обещают только к концу года. За это время Figma сделает немало витков вокруг земли.
Adobe XD
Мартовское обновление [18]. Упростилось использование наработок в Adobe Illustrator, доработки интерфейса, улучшение интеграции с Jira.
Figma
Thomas Lowry из Figma написал памятку по созданию библиотеки элементов [19]. Maxime Robinet поженил инструмент с Lottie [20].
Populate [21]
Огромная коллекция полу-реальных данных для макетов и прототипов. Имена людей, клички животных, адреса, цвета, музеи, художники — всего 120 списков.
Joe Schmoe [22]
Коллекция иллюстраций-аватаров пользователей для ваших макетов.
Friendly Faces [23]
Генератор иллюстративных аватаров пользователей для макетов.
Marvel
Добавили возможность пользовательского тестирования прототипов [24]. Они помогают как с записью сессии, так и с рекрутингом. Также вышла вторая версия плагина Maze [25] для пользовательского тестирования прототипов.
Accessible Brand Colors [26]
Сервис подсказывает, насколько выбранные цвета хорошо работают для пользователей с ограниченными возможностями в разных контекстах — фон, шрифты разного размера и т.п.
Abstract
Получили $30 млн инвестиций [27] (всего в них вложили $55). Сильно для относительно простого сервиса, который не является самостоятельным инструментом.
Blocs [28]
Ещё один инструмент дизайна, сфокусированный на адаптивных сайтах. Основан на идее «поясов», которые можно перемещать вверх и вниз по странице — как и привычные Tilda или Squarespace.
Haiku Animator [29]
Инструмент сфокусировался на интерфейсной анимации и переименовался соответствующе.
Supernova
Серьёзно обновили техническую начинку [30].
Пользовательские исследования и аналитика
UXCam App Analytics — Deliver the perfect app experience [31]
Сервис аналитики пользователей. Ориентирован на изучение конкретных сессий использования сайта или приложения.
8 things I wish I’d known about open card sorting [32]
Советы Sam Yuan из Shopify по грамотной подготовке, проведению и обработке результатов карточной сортировки.
Repeat after me — Preference testing is not A/B Testing [33]
Золотые слова David Travis из Userfocus: хватит спрашивать пользователя, какой вариант дизайна ему нравится. Это даёт ложные результаты, которые создают иллюзию принятия решений на основе данных.
Usabilla
Инструмент купили SurveyMonkey [34].
Do Survey Grids Affect Responses? [35]
Jeff Sauro задаётся вопросом, влияет ли размещение вопросов в опросниках на одной странице или разных на ответы пользователей. В целом не сильно, хотя одностраничники немного ухудшают оценки.
Визуальное программирование и дизайн в браузере
Новые скрипты
- Простой эффект кинетической типографики [36].
- Эффектное искажение изображения на промо-сайтах [37].
- Управление страницей в браузере с помощью жестов [38]. Инструкция [39].
- Разделяющиеся 3D-объекты для промо-сайтов [40].
Метрики и ROI
What Is the Purpose of UX Measurement? [41]
Годная памятка Jeff Sauro о том, зачем вообще делаются измерения UX, по каким принципам они работают и какие ответы можно получить с их помощью. Как выбрать правильные метрики и как связать изменения интерфейса с их улучшением.
Effects of Labeling the Neutral Response in the NPS [42]
Jeff Sauro исследовал, насколько явное указание нейтральной оценки в шкале NPS влияет на распределение оценок. Для активных пользователей или недавних покупателей разницы нет, а вот для тех кто давно не пользовался идёт смещение.
Дизайн-менеджмент и DesignOps
Design interviewing — Ask me anything [43]
Мощная инструкция по проведению собеседований от Kurt Varner из Dropbox. Много толковых советов по вопросам, формату, портфолио, тестовым, отсеву и другим аспектам процесса.
AUX3 — Making UX Research Track with Agile [44]
Carol J. Smith, Thyra Rauch и Hannah Moyers подробно описывают модель интеграции пользовательских исследований в канонический agile-процесс. Это три типа работ (learning, problem solving и execution), для каждого из которых показан пример реальных задач.
Lead, Don’t Manage, Part 1 [45]
Jim Nieters пишет о разнице между лидером и менеджером. Почему важно избавить креативных специалистов от страха и другие аспекты работы хорошего руководителя.
Forge a Guild — Elevate Your UX Team to Superhero Status [46]
Jennifer Bullard и Carol Bergantino из Veracode рассказывают о создании UX-гильдии в компании, во многом работающей по масштабируемому agile (есть отдельные продуктовые группы по функциям, хотя дизайнеры находятся в централизованной команде). Дизайнеров на всех не хватает, поэтому они сфокусировались на обучении недизайнеров, чтобы продуктовые группы были более самостоятельными и выдавали годный результат.
A guide to starting your own design studio from Hawraf [47]
Дизайн-студия Hawraf нашумела своим открытым подходом в последние годы. Они решили закрыть компанию, но опубликовали все рабочие документы [48]. Процесс дизайна, работа с клиентом и т.п.
A framework to give better design feedback ― Analyze, Discuss, Suggest [49]
Интересный подход Budi Tanrim к процессу дизайн-критики. Он делит встречу на три части (анализ, дискуссия и предложения) и предлагает правильное соотношение времени между ними.
A dialogue between a mentor and mentee [50]
Пример диалога между ментором и его подопечной после прохождения практики. Интересно про ожидания обеих сторон.
Командное взаимодействие
Organizing Brainstorming Workshops ― A Designer’s Guide [51]
Толковая памятка Славы Шестопалова из Eleks о популярных методах-помощниках при проведении брейнштормов ― шесть шляп Де Боно, креативная стратегия Диснея и SCAMPER от BBDO.
Кейсы
Особенности подходов к дизайну в реальном производственном секторе [53]
Лев Соломадин из Сибура рассказывает об особенностях работы дизайнера интерфейсов в крупной и сложной производственной компании. Крутое погружение в реальный мир.
Designing with Intuition [54]
Vicki Tan рассказывает о редизайне процесса встречи нового пользователя в приложении для медитации Headspace. Как они нашли ключевую метрику и экспериментировали вокруг неё.
Тренды
Статистика рынка
падение продаж смартфонов в Китае [55] -20%
рост продаж носимых устройств в мире [56] 31,4%
продано шлемов Playstation VR [57] 4,2M
Технологические, интерфейсные и визуальные тренды в дизайне [58]
John Maeda выпустил свежий ежегодный отчёт Design in Tech Report [59]. В этом году скорее компиляция заметных новостей в проф.сообществе, чем анализ инсайтов, как это было в первые годы и чего обычно ожидаешь от новых выпусков. Ну и нативка инициатив его текущей компании Automattic (создатели WordPress).
Я вообще не очень верю в ежегодные обзоры трендов (хотя, конечно же, обозреваю те что выходят [60] (ещё [61])) — отрасль меняется медленнее. Многие из тенденций развиваются и живут в восходящем виде пару лет, так что видишь их кочующими в такие отчёты из года в год (виртуальная и дополненная реальность, например). Некоторые вроде «анимации», «крупной типографики» или «фоновых видео» уже стали клише в духе гэгов Бенни Хилла и про них наверняка будут вынуждены читать наши внуки. Поэтому разделяю дизайнерские тренды на три вида: технологические, интерфейсные и визуальные.
IBM AR/VR Design Language [62]
Гайдлайны IBM по интерфейсам виртуальной и дополненной реальности.
Beyond Vision — Sound Design as Sensory Design [63]
Глава звукового и сенсорного дизайна Microsoft Matthew Bennett рассказывает о своём видении роли звука в интерфейсах и цифровых продуктах в целом. Интересный широкий взгляд на горячую тему.
Алгоритмический дизайн
Watch AI conjure up an entire city from scratch [64]
Симулятор вождения от Nvidia, в котором вполне реалистичный город сгенерирован с помощью алгоритмического дизайна.
Bloma [65]
Первый коммерческий инструмент алгоритмического дизайна от команды Creative.ai. Позволяет создавать постеры, рекламу и другие простые форматы.
Ganbreeder [66]
Интересное сообщество, где участники ремикшируют работы друг друга до бесконечности с помощью алгоритмического дизайна.
Microsoft Guidelines for Human-AI Interaction [67] (PDF)
Группа исследователей Microsoft собрала гайдлайны по дизайну продуктов, использующих технологии искусственного интеллекта. Получилось 18 эвристик, которые достаточно удобно использовать в работе. Анонс [68]. Как использовать их в креативном процессе [69].
Nvidia AI turns sketches into photorealistic landscapes in seconds [70]
Ещё один пример крышесносной магии — экспериментальное решение Nvidia превращает набросок в фотографию природного ландшафта.
A.I. Is Your New Design Material [71]
Толковая презентация Josh Clark о роли алгоритмического дизайна и том, какие работы заменят роботы, а где лучше справляется человек.
AI is bringing out the art world’s worst instincts [72]
Толковый разбор этических и законодательных проблем произведений алгоритмического дизайна. Автор проводит аналогию с фотографией, которую изначально также подвергали сомнению, а также скользкие ситуации с правами на результаты работы алгоритмов.
Google Stadia can use AI to change a game’s art in real-time [73]
Игровая платформа Google Stadia предлагает накладывать стиль на игру в реальном времени.
Голосовые интерфейсы
Voiceflow — Voice interfaces made easy [74]
Сервис позволяет спроектировать навык для Alexa и Google Assistant в наглядном виде, а после этого опубликовать его.
Smart speakers are being used to help measure inflation in the UK [75]
В Британии умные колонки добавлены в потребительскую корзину, которая помогает отслеживать инфляцию и покупательскую способность. Интересный показатель их востребованности.
Для общего и профессионального развития
Portfolios for UX Researchers — Top 10 Recommendations [76]
Lexie Martin из Nielsen/Norman Group даёт советы пользовательским исследованиям по составлению портфолио. Хотя у них нет визуально наглядных результатов, можно неплохо рассказать об исследовательских проектах и их результатах.
Pseudo Design Titles [77]
Коллекция дурацких названий дизайнерских должностей в духе бесполезных хайпов.
Люди и компании в отрасли
Elisa Design [78]
Блог дизайн-команды финского телеком-оператора Elisa.
Подпишитесь на дайджест в Facebook [79], ВКонтакте [80], Телеграме [81] или по почте [82] ― там свежие ссылки появляются каждую неделю. Спасибо всем, кто делится ссылками в группе, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному, Антону Артемову, Денису Ефремову, Алексею Копылову, Тарасу Бризицкому, Евгению Соколову и Антону Олейнику.
Автор: jvetrau
Источник [83]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/dizajn-interfejsov/313634
Ссылки в тексте:
[1] апрель 2010-февраль 2019: https://jvetrau.com/category/digest/
[2] UI Copy — UX Guidelines for Command Names and Keyboard Shortcuts: https://www.nngroup.com/articles/ui-copy/
[3] Checklist Design — Best UI elements for the best UX practice: https://www.checklist.design/
[4] Communicating Ecommerce Discounts and Promotions: https://www.nngroup.com/articles/communicating-discounts/
[5] Human error ― An important ingredient in great designs: https://uxdesign.cc/human-error-an-important-ingredient-in-great-designs-5cd1c278ba7f
[6] Writing clearer error messages: https://uxdesign.cc/writing-clearer-error-messages-d57d6f388140
[7] What does GDPR mean for UX?: https://uxdesign.cc/what-does-gdpr-mean-for-ux-9b5ecbc51a43
[8] Contextual Menus — Delivering Relevant Tools for Tasks: https://www.nngroup.com/articles/contextual-menus/
[9] Как учитывать поисковые запросы о работе интернет-магазина, а не товарах: https://baymard.com/blog/support-non-product-search
[10] Правильный интерфейс выпадающего меню пользователя в интернет-магазинах: https://baymard.com/blog/account-drop-down-structure
[11] Storybook 5: https://medium.com/storybookjs/storybook-5-0-db1d0f9c83b8
[12] Разработка своей дизайн-системы. Опыт «БАРС Груп»: https://vc.ru/design/58924-razrabotka-svoey-dizayn-sistemy-opyt-bars-grup
[13] Новые правила для иконок приложений в Play Store: https://developer.android.com/google-play/resources/icon-design-specifications
[14] Teenager’s UX ― Designing for Teens: https://www.nngroup.com/articles/usability-of-websites-for-teenagers/
[15] Unbridged Knowledge Gaps Hurt UX: https://www.nngroup.com/articles/unbridged-knowledge-gaps/
[16] User Need Statements: https://www.nngroup.com/articles/user-need-statements/
[17] Sketch в браузере: https://blog.sketchapp.com/sketch-raises-20m-in-series-a-funding-from-benchmark-ea298764d7d1
[18] Мартовское обновление: https://theblog.adobe.com/xd-march-2019-update-vectors-font-management-import-export/
[19] памятку по созданию библиотеки элементов: https://www.figma.com/blog/component-styles-and-shared-library-best-practices/
[20] поженил инструмент с Lottie: https://blog.prototypr.io/introducing-figma-%EF%B8%8F-lottie-d2fd3ccb9b0f
[21] Populate: https://www.populate.design/
[22] Joe Schmoe: https://joeschmoe.io/
[23] Friendly Faces: https://friendlyfaces.co/
[24] возможность пользовательского тестирования прототипов: https://marvelapp.com/user-testing/
[25] вторая версия плагина Maze: https://maze.design/v2/
[26] Accessible Brand Colors: https://abc.useallfive.com/
[27] Получили $30 млн инвестиций: https://techcrunch.com/2019/03/20/abstract-a-versioning-platform-that-helps-designers-work-like-developers-raises-30m/
[28] Blocs: https://blocsapp.com/
[29] Haiku Animator: https://www.haikuforteams.com/
[30] Серьёзно обновили техническую начинку: https://blog.prototypr.io/introducing-all-new-supernova-also-ycombinator-88a4d0fb24dd
[31] UXCam App Analytics — Deliver the perfect app experience: https://uxcam.com/
[32] 8 things I wish I’d known about open card sorting: https://ux.shopify.com/8-things-i-wish-id-known-about-open-card-sorting-bdcd976a72c2
[33] Repeat after me — Preference testing is not A/B Testing: https://www.userfocus.co.uk/articles/preference-testing-is-not-A-B-testing.html
[34] Инструмент купили SurveyMonkey: https://techcrunch.com/2019/03/05/surveymonkey-acquires-web-survey-company-usabilla-for-80m/
[35] Do Survey Grids Affect Responses?: https://measuringu.com/grids-responses/
[36] Простой эффект кинетической типографики: https://tympanus.net/codrops/2019/02/27/text-trail-effect/
[37] Эффектное искажение изображения на промо-сайтах: https://tympanus.net/codrops/2019/03/12/image-distortion-effects-with-svg-filters/
[38] Управление страницей в браузере с помощью жестов: https://github.com/victordibia/handtracking
[39] Инструкция: https://hackernoon.com/handtrackjs-677c29c1d585
[40] Разделяющиеся 3D-объекты для промо-сайтов: https://tympanus.net/codrops/2019/03/26/exploding-3d-objects-with-three-js/
[41] What Is the Purpose of UX Measurement?: https://measuringu.com/ux-measurement-purpose/
[42] Effects of Labeling the Neutral Response in the NPS: https://measuringu.com/labeling-nps-effects/
[43] Design interviewing — Ask me anything: https://uxdesign.cc/design-interviewing-ask-me-anything-6633e8413291
[44] AUX3 — Making UX Research Track with Agile: http://uxpamagazine.org/aux3-making-ux-research-track-with-agile/
[45] Lead, Don’t Manage, Part 1: https://www.uxmatters.com/mt/archives/2019/03/lead-dont-manage-part-1.php
[46] Forge a Guild — Elevate Your UX Team to Superhero Status: http://uxpamagazine.org/forge-a-guild-elevate-your-ux-team-to-superhero-status/
[47] A guide to starting your own design studio from Hawraf: https://www.fastcompany.com/90315699/how-to-design-the-end-of-a-studios-life
[48] опубликовали все рабочие документы: https://drive.google.com/drive/u/0/folders/1wBlDBNJI3h1KL-jeFqGiRr1U3OZDBQkV
[49] A framework to give better design feedback ― Analyze, Discuss, Suggest: http://yellowstroke.com/2019/03/09/a-framework-to-give-better-design-feedback/
[50] A dialogue between a mentor and mentee: https://ux.shopify.com/how-to-plot-the-course-for-successful-mentorship-e0f41ddddfd8
[51] Organizing Brainstorming Workshops ― A Designer’s Guide: https://www.smashingmagazine.com/2019/03/conducting-brainstorming-workshops/
[52] мышления: http://www.braintools.ru
[53] Особенности подходов к дизайну в реальном производственном секторе: https://habr.com/ru/company/sibur_official/blog/439818/
[54] Designing with Intuition: https://medium.com/front-conference/designing-with-intuition-edc569d80c83
[55] падение продаж смартфонов в Китае: https://www.engadget.com/2019/03/13/smartphone-sales-china-plummet/
[56] рост продаж носимых устройств в мире: https://www.engadget.com/2019/03/05/wearable-market-2018-growth/
[57] продано шлемов Playstation VR: https://www.engadget.com/2019/03/26/sony-4-2-million-playstation-vr-headset-sales/
[58] Технологические, интерфейсные и визуальные тренды в дизайне: https://vk.com/@pdigest-trends-2019-true
[59] Design in Tech Report: https://vk.com/away.php?to=https%3A%2F%2Fdesignintech.report%2F2019%2F03%2F09%2Fdesign-in-tech-report-2019%2F&cc_key=
[60] обозреваю те что выходят: https://vk.com/@pdigest-trends-2019
[61] ещё: https://vk.com/@pdigest-summary-2018
[62] IBM AR/VR Design Language: https://www.ibm.com/design/v1/language/experience/vrar/
[63] Beyond Vision — Sound Design as Sensory Design: https://medium.com/microsoft-design/beyond-vision-sound-design-as-sensory-design-3259a8ca59ea
[64] Watch AI conjure up an entire city from scratch: https://www.fastcompany.com/90277356/watch-ai-conjure-up-an-entire-city-from-scratch
[65] Bloma: https://bloma.ai/
[66] Ganbreeder: https://ganbreeder.app/
[67] Microsoft Guidelines for Human-AI Interaction: https://www.microsoft.com/en-us/research/uploads/prod/2019/01/Guidelines-for-Human-AI-Interaction-camera-ready.pdf
[68] Анонс: https://medium.com/microsoft-design/guidelines-for-human-ai-interaction-9aa1535d72b9
[69] Как использовать их в креативном процессе: https://medium.com/microsoft-design/ai-guidelines-in-the-creative-process-807b6d31cda2
[70] Nvidia AI turns sketches into photorealistic landscapes in seconds: https://techcrunch.com/2019/03/18/nvidia-ai-turns-sketches-into-photorealistic-landscapes-in-seconds/
[71] A.I. Is Your New Design Material: https://bigmedium.com/speaking/ai-is-your-new-design-material.html
[72] AI is bringing out the art world’s worst instincts: https://www.fastcompany.com/90316932/ai-is-bringing-out-the-art-worlds-worst-instincts
[73] Google Stadia can use AI to change a game’s art in real-time: https://www.engadget.com/2019/03/19/google-stadia-style-transfer/
[74] Voiceflow — Voice interfaces made easy: https://www.getvoiceflow.com/
[75] Smart speakers are being used to help measure inflation in the UK: https://www.engadget.com/2019/03/11/smart-speakers-uk-basket-of-goods/
[76] Portfolios for UX Researchers — Top 10 Recommendations: https://www.nngroup.com/articles/ux-researcher-portfolio/
[77] Pseudo Design Titles: https://designtitles.com/
[78] Elisa Design: https://medium.com/elisa-design
[79] Facebook: https://www.facebook.com/groups/pdigest/
[80] ВКонтакте: https://vk.com/pdigest
[81] Телеграме: https://t.me/pdigest
[82] по почте: http://eepurl.com/bu61XX
[83] Источник: https://habr.com/ru/post/446460/?utm_campaign=446460
Нажмите здесь для печати.