Дизайн Ольга Шишкова
1 879

От анализа рынка до широкого распространения продукта: как развивается дизайн-система Microsoft

Конспект интервью с главным дизайнером в команде Fluent Джоуи Питтом о том, как работает и развивается дизайн-система и как начать в этом участвовать.

В закладки

Вопросы задавал старший разработчик контента в Miscrosoft Дэвид Бетц.

Волны релизов

Скоро будет день рождения Fluent.

Fluent выпускает релизы два раза в год. Благодаря такой частоте мы становимся гораздо ближе к методологии разработки Agile — гибки к гипотезам, тестируем продукт на практике и корректируем курс, основываясь на обратной связи.

Например, мы можем написать: «Эй, мы думаем, что это правильно» или «В эту сторону сейчас идёт вся индустрия, меняется наш основной потребитель, так что и компания должна изменить стратегию соответственно» — о чём бы ни шла речь. У нас есть инструменты, с помощью которых можно всё так быстро исправить, что мы можем опираться на обратную связь ещё до того, как продукт увидит широкая аудитория.

То есть у вас SaaS-модель, а дизайн-система — услуга?

Да, дважды в год мы решаем, что для нас приоритетно и что будет в следующем релизе. У нас всегда много идей и обратной связи. Мы пользуемся такими сервисами, как Feedback Hub, Insider Program, разговариваем с потребителями, участвуем в мероприятиях вроде MVP Summit и Build, чтобы собрать информацию и обратную связь от покупателей — так мы приоритизируем свою работу.

Этот цикл позволяет нам осознавать возможности индустрии. В Microsoft есть много команд-партнёров вроде Office, Cloud and Enterprise (C&E) и Xbox, которые занимаются такой же работой, так что мы взаимодействуем и взаимодополняем друг друга. В конце концов мы создаём инструменты для разработчиков приложений, чтобы те могли создавать хороший опыт для своих потребителей, так что наша работа должна быть согласованной.

Мы также пользуемся обратной связью, чтобы сосредоточить свою работу на определённых компонентах нашей платформы, например основы UX, элементы управления или шаблоны. Иногда это выглядит так: «Этот вариант был не совсем хороший, нам надо его лучше настроить» или «Здесь должно открываться быстрее или медленнее», или «Управление, которое мы тут сделали, неудачное — его надо отрегулировать».

Это и есть основной процесс. Мы много отлаживаем. И весь процесс строится на гипотезе, мы используем данные, полученные после запуска каких-либо продуктов, и обратную связь. Это помогает нам двигаться вперёд. Работа проходит как внутри компании — день за днём мы вместе с коллегами из других команд разрабатываем и планируем — так и за её пределами, через обратную связь.

Стадии дизайна

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

Да, всё правильно. Дизайн-системы по определению сложные и большие, так что нельзя сказать, что мы чуть-чуть поработали и запустили что-то новое. У нас есть четыре стадии дизайна и разработки, через которые мы проходим в каждом релизе: инкубационный период, систематизация, набор критической массы и широкое распространение.

Инкубационный период

На этом этапе мы собираем всю обратную связь, получаем аналитическую картину рынка, информацию от клиентов и выбираем из всех идей определённый набор. И они проходят инкубационный период.

Инженеры и дизайнеры собираются вместе, чтобы понять объём идеи, сколько усилий потребуется, в чём выгода для покупателя. Некоторые проекты могут длиться только в течение одного релиза, другие растягиваются на несколько релизов — зависит от сложности идеи. Выражаясь терминами Agile, инкубационный период — это изучение журнала пожеланий (backlog).

Важно отметить, что это не просто свободный полёт мыслей дизайнеров. Процесс основан на настоящих идеях пользователей, а также на проектировании и целях нашего продукта.

Систематизация

Когда у нас сложился понятный объём работ, когда мы понимаем, как функциональность должна выглядеть, и готовы начать писать реальный программный код — мы переходим к этапу систематизации. Это этап создания готового к потреблению интерфейса прикладного программирования (API) эксклюзивными (first-party) разработчиками. Он нужен, чтобы убедиться что мы не сделали что-то, что не входило в первоначальный план.

В зависимости от функциональности или компонента мы делимся своей работой с близкими партнёрами и наиболее ценными специалистами, чтобы те смогли протестировать продукт.

Критическая масса

Когда мы готовы провести релиз функциональности, мы переходим к этапу критической массы. Функциональность переходит в этот этап, когда есть хотя бы несколько примеров эксклюзивного опыта: можно получить их от команды Windows Shell, из эксклюзивных (созданных Microsoft) приложений, Xbox или Office.

После того как эксклюзивные покупатели смогли попробовать интерфейсы прикладного программирования и функциональность, можно презентовать их на таких мероприятиях, как Build: «Это элемент Fluent. Мы сделали следующие управление и функциональность. Это вот код. А вот — пара примеров этой функциональности или элемента на практике». И так далее.

К этому моменту продукт готов, чтобы дизайнеры третьей стороны могли его использовать и создавать опыт для своих потребителей?

Да. Если вы наиболее ценный специалист, то вероятно, вы его уже видели, но если вы дизайнер третьей стороны, теперь вы можете сказать: «Ладно, круто, это готовый продукт, с которым я могу продолжать работать». Примерно в это время мы увидим, что компонент или функциональность начали внедряться. Спустя несколько месяцев мы видим, что они становятся широко доступны в сообществе создателей.

Широкое распространение

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

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

Эти четыре этапа возникают в каждом цикле релизов и позволяют нам всегда проводить полный набор работ.

Сотворчество

Ваша аудитория состоит в основном из дизайнеров и разработчиков. Как вы с ними взаимодействуете?

Мы теперь больше внимания обращаем на дизайнеров. Исторически Microsoft была настолько ориентирована на разработку, что когда мы создали Insider Hub и инструменты обратной связи, то хотели прежде всего активизировать и вовлечь в процесс сообщество разработчиков.

Теперь мы всё больше пишем в Medium, Twitter и на сайте Microsoft Design (который будет перезапущен в этом мае), чтобы активизировать и вовлечь дизайн-сообщество. Есть такая идея, и эта работа сейчас проводится.

Должен ли я как дизайнер присоединиться к программе Insider?

Да, конечно. Fluent настолько же для дизайнеров, насколько для разработчиков. Мы хотим говорить о создателях приложений в целом. И прямо сейчас всё, о чём мы говорили, направлено на вовлечение в Центр разработки для Windows. И под вовлечением мы имеем в виду, что можно посмотреть на API, загрузить пробные приложения, посмотреть на код.

В то же время, если вы дизайнер, существует множество интересных дизайнерам идей на тех же страницах, где мы рассказываем о коде. Кроме того, есть инструменты для дизайнеров. По мере роста мы хотели бы использовать сайт Microsoft Design, чтобы дизайнеры не чувствовали, что вынуждены идти за дизайнерским материалом к разработчикам.

Мы работаем над этим сейчас.

Вы уже работаете с командами из Office, C&E, Xbox, HoloLens и Cortana (а также с участниками Insider и наиболее ценными специалистами). Все эти дизайнеры помогают команде Fluent отлаживать и улучшать продукт. Но самое важное, что Fluent открыт и для дизайнеров третьей стороны. Помимо того, что они становятся участниками Insider, как ещё вы вовлекаете их в совместное творчество?

Это хороший обзор наших сотворческих сообществ, именно поэтому такие мероприятия, как Build, настолько важны, потому что они являются нулевой отметкой вовлечения. У наиболее важных специалистов и участников Insiders есть дополнительные каналы обратной связи, но даже для них Build — это лучшее место, потому что там есть люди и дизайнеры, и разработчики.

И на других крупных мероприятиях, таких как Ignite и Dev Days, мы также представляем своих коллег дизайнеров и разработчиков. Они показывают и пошагово рассказывают о коде, кратко знакомя с ним наиболее ценных специалистов. Или спрашивают мнение о запущенном продукте. Наступил важный период, когда мы все объединяемся.

#дизайн #microsoft

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Ольга Шишкова", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","microsoft"], "comments": 12, "likes": 13, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 38796, "is_wide": false, "is_ugc": true, "date": "Thu, 07 Jun 2018 09:28:30 +0300" }
{ "id": 38796, "author_id": 107557, "diff_limit": 1000, "urls": {"diff":"\/comments\/38796\/get","add":"\/comments\/38796\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/38796"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

12 комментариев 12 комм.

Популярные

По порядку

Написать комментарий...
–1

Забавная ситуация: странная и неудобная дизайн-система, неинтересная и ненужная конечному пользователю, разработанная не ради его удобства, а из принципа "что бы ещё такого задизайнить, чтобы не стоять на месте", навязывается миру, и мир покорно кушает из-за отсутствия выбора.

Ответить
5

Вполне себе проработанная и удобная дизайн-система, которая отлично решает вопрос рефреша старой-доброй винды. Дизайн-система и не должна быть "интересна пользователю", она просто должна работать и выполнять необходимые задачи, что она, собсна, и делает.

Ответить
3

Дизайн-система должна делаться исключительно для пользователя - как и весь продукт. У нового дизайна старого продукта могут быть две практические цели: 1) заинтересовать и привлечь новых пользователей (но винде это не нужно), 2) сделать продукт удобнее для старого пользователя. Новый визуальный язык должен подчиняться этим целям, а не существовать сам по себе подобно произведению искусства.

История редизайна винды после Windows 7 - это как раз пример дизайна как свободного искусства: пользователь не принимался в расчёт, делались смелые "рефреши" вроде удаления меню "Пуск", возвращения меню "Пуск", удаления теней, возвращения теней, разделения одной панели управления на две. Эксперименты эти были безнаказанны: пользователь не мог никуда сбежать, мог только остаться на старых версиях той же винды.

А прекрасный девиз "просто должна работать и выполнять задачи" слабо применим к редизайну старого ПО, которое до редизайна выполняло свои задачи ничуть не хуже, а может быть и лучше.

Ответить
0

Забавная ситуация

Ответить
1

И презентации с голубым текстом на синем фоне...

Ответить
0

Это нормально для темной цветовой схемы.
https://ilyabirman.ru/meanwhile/all/gray-text/

Ответить
0

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

Ответить
0

Ребята из VC, переместите плз добавление в избранное в шапку статьи

Ответить
0

Привет! Эта кнопка есть в шапке: она под подзагом справа от кнопок соцсетей

Ответить
0

Спасибо, не заметил. Может ее наверх к комментам?

Ответить
0

Никак

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления