Как создать руководство по стилю: начните с UI Framework

Вопросы и ответы с UX Designer от AdRoll о том, почему мы это сделали и чему мы научились

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

Привет! Я Арья Сринивасан, исследователь UX в AdRoll. Я поговорил с Мэйсоном Ли, дизайнером UX, работающим над собственным продуктом AdRoll API для рекламы, чтобы рассказать о его работе по разработке руководства по стилю AdRoll.

Арья: Для начала, почему вы начали проект руководства по стилю? Какую проблему нужно было решить?

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

Кнопки выглядят по-разному в моделях отдельных дизайнеров и наших приложений

Быстрый рост AdRoll означал, что мы были сосредоточены на скорости. Сейчас мы - крупная компания с несколькими продуктами, поэтому, как дизайнер, я считаю, что для нас важно подчеркнуть последовательность в том, как мы представляем наши продукты: через дизайн.

Чтобы сосредоточиться на дизайне, нам сначала нужно было исправить существующие несоответствия. Здесь дизайнеры UX обычно сосредотачиваются на одном или двух продуктах, поэтому, чтобы наша команда думала о дизайне для всех продуктов, я организовал еженедельную встречу «UI Smackdown», чтобы обсудить рекомендации по UI.

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

Арья: Вы упомянули, что хотите, чтобы AdRoll была компанией, ориентированной на дизайн - что вы подразумеваете под этим?

Мейсон: Я хочу, чтобы AdRoll выдвигал дизайн на передний план, чтобы он был конкурентным отличием - признанным клиентами как хорошо продуманный продукт, который действительно решает их потребности.

Арья: Каковы были твои ближайшие цели для руководства по стилю? У вас есть долгосрочное видение этого проекта?

Мейсон: Моя краткосрочная цель - обеспечить согласованность дизайна между дизайнерами путем стандартизации наших компонентов пользовательского интерфейса. Я хочу, чтобы дизайнеры говорили на одном языке, говоря о дизайне. Например, в модальном или выпадающем меню инженеры строят на основе того, что предлагает дизайнер. Если элементы дизайна у разных дизайнеров разные, инженеры собираются делать один и тот же элемент разными способами.

Моя среднесрочная цель - определить этот стиль в нашем коде в «RollUp», внутренней библиотеке компонентов пользовательского интерфейса AdRoll. Если у нас есть предопределенная таблица стилей, все, что нужно нашим инженерам, это скопировать ее. Дизайнеры и инженеры могут говорить на одном языке.

Арья: Вы сталкивались с какими-либо проблемами при создании руководства по стилю? Как ты их решил?

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

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

Вот пример гибкости нашего руководства по стилю. Наше первоначальное решение о дополнении в этом раскрывающемся списке геотаргетинга было слишком большим, поэтому мы пересмотрели руководство по стилю, чтобы учесть этот вариант использования.До (слева), После (справа)

Я на самом деле хочу вызвать еще один вызов! Называть может быть сложно. Как я уже говорил, я хочу, чтобы дизайнеры и инженеры говорили на одном языке, но это нужно делать осторожно. Для чего-то такого простого, как выпадающий список, у нас на самом деле есть несколько вариантов (один с флажками, другой с флажками и текстовым блоком, а другой - стандартное выпадающее меню). Как мы называем три разных раскрывающихся списка, чтобы было общее понимание того, что есть что?

Семантика сложна; наше именование должно иметь смысл. Мы использовали несколько классных инструментов для совместной работы, чтобы достичь консенсуса при выборе имени. Например, Wake помог нам собрать все открытые вопросы и проблемы, обсудить решения, отследить решения Uma Smackdown и продолжить беседу с большой группой разработчиков продукта за счет интеграции со Slack.

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

Арья: Есть ли что-то уникальное в пользовательском интерфейсе AdRoll, что вы должны были учитывать при создании руководства по стилю?

Мейсон: Наша панель инструментов очень загружена данными. Кроме того, процесс создания кампании дает рекламодателям кучу рычагов, которые можно потянуть. Чтобы удовлетворить потребности менее опытных рекламодателей, мы стремимся иметь эффективные настройки по умолчанию. В наших продуктах компоненты имеют сложные функции, но выглядят простыми и простыми в использовании.

Арья: Есть ли что-то, что ты хотел бы знать, когда начал создавать руководство по стилю?

Мейсон: Хотелось бы, чтобы у меня было более глубокое понимание того, как все наши продукты работают с самого начала. Например, мы делимся информацией о том, как работает наш соответствующий продукт, на нашей еженедельной встрече, посвященной критике дизайна, поэтому я знаю, как SendRoll (наш продукт для ретаргетинга электронной почты) работает на поверхности, но я не обладаю глубокими знаниями о SendRoll, которые делает его дизайнер. Я думаю, что детальное понимание продукта определенно помогает при работе над руководством по стилю, потому что тогда я лучше понимаю все возможные варианты использования.

Арья: Так каков наилучший способ достичь общего понимания процесса дизайнера и его продукта?

Мейсон: Несмотря на то, что мы действительно сосредоточены на отгрузке наших продуктов, мы хорошо делимся нашим процессом проектирования на нашей еженедельной встрече с критикой дизайна. Я думаю, что мы можем лучше закрывать цикл после каждой встречи - как дизайнер учитывал обратную связь от встречи? После того, как продукт будет отправлен и использован нашими рекламодателями, мы также могли бы рассказать о том, как рекламодатели используют продукты, основываясь на аналитических данных.

Арья: Были ли какие-то ресурсы, на которые вы ссылались, работая над этим проектом?

Мейсон: Я читал «Атомный дизайн» Брэда Фроста, проводил исследования в Интернете и разговаривал с другими дизайнерами UX на MeetUps. Если вы думаете, что какая-то конкретная компания практикует хороший дизайн, то вполне вероятно, что они где-то говорили о своем руководстве по стилю.

Арья: Каков статус нашего руководства по стилю?

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

В Dribbble вы можете ознакомиться с элементами UI фундамента и компонентов. Если вы знакомы с Атомным дизайном, я сгруппировал уровни «атом» и «молекула» в то, что я называю «компонентами». Например, объединение заголовка формы и ввода позволяет другим дизайнерам легко скопировать заполненную форму поле.

Спасибо за прочтение!

Следите за этими предстоящими темами при разработке нашего руководства по стилю:

  • Как UI Framework упрощает сотрудничество
  • Разработка новых таблиц стилей на основе UI Framework
  • Как создать сайт руководства по стилю
  • Путешествие в поисках нашего голоса и тона