Як створити керівництво по стилю: Почніть з рамок інтерфейсу користувача

Питання та відповіді з UX-дизайнером AdRoll про те, чому ми це зробили і що ми дізналися

Ця публікація в блозі - це перша в серії, яка хронізує подорож керівництва стилем, починаючи з його створення, до того, щоб забезпечити зрілі рамки інтерфейсу для наших команд, і, нарешті, переганяючи унікальний голос і тон для наших продуктів.

Привіт! Я Арія Шрінівасан, науковий співробітник UX в AdRoll. Я сів з Мейсоном Лі, дизайнером UX, який працює над API-кодом для власних оголошень AdRoll, розповісти про його роботу над розробкою посібника зі стилю AdRoll.

Ар'я: Щоб почати щось, чому ви запустили проект керівництва стилем? Яка проблема була необхідною для вирішення?

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

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

Швидке зростання AdRoll означало, що ми зосереджені на швидкості. Зараз ми є більшою компанією з кількома продуктами, тому, як дизайнер, я вважаю, що нам важливо підкреслити послідовність у тому, як ми представляємо свою продукцію: через дизайн.

Щоб зосередитись на дизайні, спочатку потрібно було виправити наявні невідповідності. Тут дизайнери UX зазвичай зосереджуються на одному або двох продуктах, тому для того, щоб наша команда задумалася над дизайном для всіх продуктів, я створила щотижневу зустріч "Smackdown" для інтерфейсу, щоб обговорити рекомендації щодо користувацького інтерфейсу.

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

Ар'я: Ви згадали, що хочете, щоб AdRoll була дизайнерською компанією - що ви розумієте під цим?

Мейсон: Я хочу, щоб AdRoll ставив дизайн на перший план, щоб він був конкурентним диференціатором - визнаний клієнтами як добре розроблений продукт, який дійсно вирішує їхні потреби.

Arya: Якими були твої найближчі цілі для посібника зі стилю? Чи маєте ви довгострокове бачення цього проекту?

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

Моя середньострокова мета - визначити цей стиль у нашому коді у "RollUp", внутрішній бібліотеці компонентів AdRoll. Якщо у нас є заздалегідь заданий аркуш стилів, все, що потрібно зробити нашим інженерам, - це скопіювати його. Дизайнери та інженери можуть говорити однією мовою.

Arya: У вас виникли якісь проблеми, створюючи посібник зі стилів? Як ви їх вирішили?

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

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

Ось приклад гнучкості нашого посібника зі стилів. Наше початкове рішення щодо прокладки в цьому спадному розділі геотаргетингу було занадто великим, тому ми переглянули посібник зі стилів, щоб врахувати цей випадок використання.До (ліворуч), Після (праворуч)

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

Семантика є складною; наше називання має сенс. Ми використовували кілька класних інструментів для співпраці для досягнення консенсусу, коли ми вирішували ім’я. Наприклад, Wake допомогла нам зібрати всі відкриті запитання та проблеми, обговорити рішення, відстежувати рішення UI Smackdown та продовжувати розмову з більшою командою продукту шляхом інтеграції з Slack.

Як ми використовували Wake для обговорення невідповідностей інтерфейсу користувача та співпраці над правилами компонентів.

Ар'я: Чи є щось унікальне в користувальницькому інтерфейсі AdRoll, що вам довелося враховувати, створюючи посібник зі стилів?

Мейсон: Наша приладова панель дуже важка для даних. Крім того, потік створення кампанії дає рекламодавцям купу важелів. Для того, щоб задовольнити потреби менш досвідчених рекламодавців, ми прагнемо мати ефективні налаштування за замовчуванням. У наших продуктах компоненти мають складні функції, але виглядають просто і прості у використанні.

Ар'я: Чи є якісь речі, які ви хотіли б знати, коли почали створювати посібник зі стилів?

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

Ар'я: Отже, який найкращий спосіб досягти спільного розуміння процесу дизайнера та його продукту?

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

Ар'я: Чи були ресурси, на які ви згадали, працюючи над цим проектом?

Мейсон: Я читав Atomic Design від Бреда Фроста, досліджував в Інтернеті та спілкувався з іншими дизайнерами UX на MeetUps. Якщо ви думаєте, що певна компанія практикує гарний дизайн, то цілком ймовірно, що вони розповіли про своє керівництво стилем десь в Інтернеті.

Arya: Який статус нашого посібника зі стилів?

Мейсон: Я захопив і переглянув усі елементи інтерфейсу, які ми використовуємо в різних наших продуктах, і згрупував їх у основи, компоненти, візерунки та сторінки, які послужать джерелом істини для наших дизайнів інтерфейсу.

Ви можете перевірити основу та складові елементи інтерфейсу користувача на Dribbble. Якщо ви знайомі з атомним дизайном, я згрупував рівні "атом" і "молекула" в те, що я називаю "компоненти". Наприклад, поєднання заголовка форми та вводу полегшує іншим дизайнерам легко скопіювати заповнену форму поле.

Дякуємо за прочитане!

Слідкуйте за наступними темами, коли ми розробляємо наш посібник зі стилів:

  • Як Рамка інтерфейсу спрощує співпрацю
  • Розробка нових таблиць стилів на базі UI Framework
  • Як створити веб-сайт по керівництву стилем
  • Подорож до пошуку нашого Голосу та Тон