Как да създадете ръководство за стил: Започнете с UI Framework

Въпроси и отговори с UX дизайнера на AdRoll за това защо го направихме и какво научихме

Тази публикация в блога е първата в поредицата, която хроникира пътуването на ръководството за стил, от създаването му, до осигуряване на зряла рамка за потребителски интерфейс за нашите екипи и в крайна сметка дестилация на уникален глас и тон за нашите продукти.

Здравейте! Аз съм Аря Шринивасан, UX изследовател в AdRoll. Седнах с Мейсън Лий, UX дизайнер, работещ върху API на продукта за собствени реклами на AdRoll, за да поговорим за работата му, разработваща ръководството за стила на AdRoll.

Аря: За да стартирате нещата, защо стартирахте проекта за ръководство за стил? Какъв беше проблемът, който трябваше да се реши?

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

Бутоните изглеждат различно в макетите на отделните дизайнери и нашите приложения.

Бързият растеж на AdRoll означаваше, че бяхме фокусирани върху скоростта. Сега сме по-голяма компания с множество продукти, така че като дизайнер считам, че е важно да подчертаем последователността в представянето на нашите продукти: чрез дизайна.

За да се съсредоточим върху дизайна, първо трябваше да поправим съществуващите несъответствия. Тук UX дизайнерите обикновено се фокусират върху един или два продукта, така че за да накараме нашия екип да мисли за дизайна на всички продукти, създадох седмична среща „UI Smackdown“, за да обсъдим насоките за потребителския интерфейс.

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

Аря: Споменахте, че искате AdRoll да бъде дизайнерска компания - какво искаш да кажеш с това?

Мейсън: Искам AdRoll да постави дизайна на преден план, така че да е конкурентен диференциал - признат от клиентите като добре проектиран продукт, който наистина решава техните нужди.

Arya: Кои бяха твоите непосредствени цели за ръководството за стил? Имате ли по-дългосрочна визия за този проект?

Мейсън: Краткосрочната ми цел е да имам последователност в дизайна между дизайнерите, като стандартизирам нашите компоненти на потребителския интерфейс. Искам дизайнерите да говорят един и същ език, когато говорят дизайн. Например в модален или падащ режим инженерите изграждат на базата на начина, по който дизайнерът предлага. Ако дизайнерските елементи са различни между дизайнерите, инженерите ще направят един и същ елемент по различни начини.

Моята средносрочна цел е този стил да бъде дефиниран в нашия код в „RollUp“, вътрешната библиотека на потребителския интерфейс на AdRoll. Ако имаме предварително определен стилен лист, всичко, което нашите инженери трябва да направят, е да го копираме. Дизайнерите и инженерите могат да говорят един и същ език.

Arya: Изправихте ли проблеми при създаването на ръководството за стил? Как ги решихте?

Мейсън: Едно от най-големите препятствия беше получаването на покупки от хора от продуктовите екипи. За да се ангажирам всички, аз нагласих среща с ясен списък от въпроси от дневния ред, които да покрия. Представих несъответствия в дизайна, като например различни падащи менюта между продуктите. Предоставянето на визуални доказателства задейства разговори и в крайна сметка хората се грижат за своя продукт и искат последователност.

Друго предизвикателство беше решението за правилата. Когато говорим за стандартизиране на компонент, той трябва да е приложим навсякъде, във всеки контекст. Трябва да мислите за всеки случай на ръба. Компонентът трябва да бъде гъвкав, но в същото време достатъчно пълен, така че да е лесно използваем, консумативен и приложим.

Ето пример за гъвкавостта на нашия ръководство за стил. Първоначалното ни решение за подплънките в това падане на геотаргетинг беше твърде голямо, затова преработихме ръководството за стил, за да отчитаме този случай на използване.Преди (вляво), След (вдясно)

Всъщност искам да извикам още едно предизвикателство! Именуването може да бъде трудно. Както казах преди, искам дизайнерите и инженерите да говорят на същия език, но това трябва да се направи внимателно. За нещо толкова просто като падащо меню, всъщност имаме няколко варианта (една с отметки, друга с отметки и текстов блок, а друга е стандартно падащо меню). Как да наречем три различни падащи менюта, така че да има универсално разбиране за това кое е?

Семантиката е предизвикателна; нашето именуване трябва да има смисъл. Използвахме няколко готини инструмента за сътрудничество, за да постигнем консенсус, когато решаваме име. Например Wake ни помогна да съберем всички отворени въпроси и проблеми, да обсъдим решения, да наблюдаваме решенията на SI Smackdown на потребителския интерфейс и да продължим разговора с по-големия продуктов екип чрез интеграция с Slack.

Как използвахме Wake, за да обсъдим несъответствията на потребителския интерфейс и да си сътрудничим върху правилата за компонентите.

Arya: Има ли нещо уникално в потребителския интерфейс на AdRoll, което трябваше да вземете предвид при създаването на ръководството за стил?

Мейсън: Таблото ни за управление е много тежко. Освен това потокът за създаване на кампания дава на рекламодателите куп лостове, които да изтеглят. За да отговорим на нуждите на по-малко опитни рекламодатели, ние се стремим да имаме ефективни настройки по подразбиране. В нашите продукти компонентите имат сложни функции, но изглеждат прости и лесни за използване.

Аря: Има ли някои неща, които бихте искали да знаете, когато сте започнали да създавате ръководство за стил?

Мейсън: Иска ми се да разбирам по-задълбочено как работят всички наши продукти от самото начало. Например, ние споделяме как работи съответният ни продукт по време на седмичната ни среща по критика на дизайна, така че знам как SendRoll (нашият продукт за пренасочване на имейли) работи на повърхността, но нямам дълбоки познания за SendRoll, които дизайнерът прави. Мисля, че нюансираното разбиране на продукта определено помага, когато работя върху ръководството за стила, защото след това имам по-добро разбиране на всички случаи на потенциална употреба.

Arya: И какъв е най-добрият начин да постигнем това общо разбиране за процеса на дизайнер и техния продукт?

Мейсън: Въпреки че наистина сме съсредоточени върху доставката на нашите продукти, ние вършим добра работа, като споделяме нашия процес на проектиране в седмичната ни среща по критика на дизайна. Мисля, че можем да сме по-добри относно затварянето на цикъла след всяка среща - как дизайнерът включи отзивите от срещата? След като продуктът бъде доставен и използван от нашите рекламодатели, бихме могли да споделим и как рекламодателите използват продуктите въз основа на прозренията от анализите.

Arya: Имаше ли ресурси, за които сте споменавали, докато работите по този проект?

Мейсън: Четох Atomic Design от Брад Фрост, проучвах онлайн и разговарях с други UX дизайнери в MeetUps. Ако смятате, че определена компания практикува добър дизайн, тогава е много вероятно те да са говорили за ръководството си за стил някъде онлайн.

Arya: Какъв е състоянието на нашия справочник за стил?

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

Можете да разгледате основите и компонентите на потребителския интерфейс в Dribbble. Ако сте запознати с Atomic Design, аз групирах нивата на "атом" и "молекула" в това, което наричам "компоненти". Например, комбинирането на заглавието на формата и входа улеснява другите дизайнери лесно да копират попълнен формуляр област.

Благодаря за четенето!

Внимавайте с тези предстоящи теми, докато разработваме нашето ръководство за стил:

  • Как рамката на потребителския интерфейс опростява сътрудничеството
  • Разработване на нови таблици стилове въз основа на UI Framework
  • Как да създадете уебсайт за ръководство за стил
  • Пътуването към намирането на нашия Глас и Тон