Stílus útmutató készítése: Kezdje a felhasználói felület keretrendszerével

Kérdések és válaszok az AdRoll UX Designerjével arról, hogy miért csináltuk és mit tanultak

Ez a blogbejegyzés az első olyan sorozatban, amely a stíluskalauz útját írja le, annak létrehozásától kezdve a csapataink érett felhasználói felületének biztosításáig, végül pedig a termékek egyedi hangjának és hangjának desztillálásáig.

Szia! Arya Srinivasan vagyok, az AdRoll UX kutatója. Ültem Mason Lee-vel, egy UX Designerrel, aki az AdRoll natív hirdetési API-termékén dolgozik, hogy beszéljen az AdRoll stílusú útmutatójának kidolgozásáról.

Arya: A dolgok elindításához miért indította el a stíluskalauz-projektet? Mi volt a probléma, amelyet meg kellett oldani?

Mason: A probléma a tervezés következetlensége volt, mind a termékek, mind pedig egy termékben. Például egy gomb, amelynek mindenütt azonosnak kell lennie, de valójában színe, betűtípus súlya és szegélystílusa változik.

A gombok másképp néznek ki az egyes tervezők csúnyain és alkalmazásaiban.

Az AdRoll gyors növekedése azt jelentette, hogy a sebességre koncentráltunk. Most egy nagyobb vállalat vagyunk, több termékkel, így tervezőként azt hiszem, fontos számunkra, hogy hangsúlyozzuk a termékek bemutatásának következetességét: a formatervezésen keresztül.

A tervezésre összpontosítva először ki kellett javítanunk a fennálló következetlenségeket. Az UX-tervezők itt általában egy vagy két termékre összpontosítanak, ezért annak érdekében, hogy csapatunk gondolkodjon az összes termék kialakításán, heti „UI Smackdown” értekezletet indítottam az UI irányelveinek megvitatására.

Minden egyes találkozón megvizsgáltuk a tervezési következetlenségeket, hogy egyetlen mintát döntsünk. Néhány találkozó után a tervezők még mindig megkérdezték a helyes színről vagy párnáról, stb. Szüksége van egy központi dokumentumra, amely tartalmazza az összes választ, ezért a vázlatban felépítettük a felhasználói felület keretünket, mint a tervezők erőforrását. Ha rájönnek, hogy van hiányzó összetevő, vagy új összetevőt szeretnénk beilleszteni, megvitatjuk és hozzáadjuk a fő UI-keretfájlhoz.

Arya: Megemlítette, hogy azt akarja, hogy az AdRoll egy tervezés-központú cég legyen - mit értesz ezzel?

Mason: Azt szeretném, ha az AdRoll a tervezést előtérbe helyezné, hogy ez versenyképes differenciáló eszköz legyen - amelyet az ügyfelek elismernek olyan jól megtervezett termékként, amely valóban megoldja igényeiket.

Arya: Melyek voltak a közvetlen célok a stíluskalauzban? Van hosszabb távú elképzelése erről a projektről?

Mason: Rövid távú célja az, hogy a felhasználói felület komponenseinek szabványosítása révén a tervezők közötti konzisztenciát biztosítsuk a tervezők között. Azt akarom, hogy a tervezők ugyanazt a nyelvet beszéljék, amikor a tervezésről beszélnek. Például egy modális vagy legördülő menüben a mérnökök építik a tervező javaslata alapján. Ha a tervező elemek eltérnek a tervezők között, akkor a mérnökök ugyanazt az elemet különféle módon készítik el.

Középtávú célom az, hogy ezt a stílust a „RollUp” kódban definiáljuk, az AdRoll belső felhasználói felületének könyvtárában. Ha van egy előre definiált stíluslap, akkor minden mérnökének meg kell tennie, hogy lemásolja. A tervezők és a mérnökök ugyanazt a nyelvet beszélhetik.

Arya: Volt-e valamilyen problémája a stílus-útmutató létrehozása közben? Hogyan oldotta meg őket?

Mason: Az egyik legnagyobb akadály az volt, hogy a terméktámogatási csapatok megvásárolják az embereket. Annak érdekében, hogy mindenki bekapcsolódjon, összeállítottam egy értekezletet a lefedett napirendi pontok világos listájával. Bemutattam a tervezési következetlenségeket, például a termékek közötti legördülő menüket. A vizuális bizonyítékok szolgáltatása beszélgetéseket vált ki, és végül az emberek törődnek a termékkel, és következetességet akarnak.

Egy másik kihívás a szabályok meghatározása volt. Amikor egy komponens szabványosításáról beszélünk, annak bárhol, minden helyzetben alkalmazhatónak kell lennie. Minden élre gondolni kell. Az alkatrésznek rugalmasnak kell lennie, ugyanakkor kellően komplettnek kell lennie, hogy könnyen használható, fogyasztható és alkalmazható legyen.

Íme egy példa stíluskalauzunk rugalmasságára. Az ebben a földrajzi célzás legördülő listában a párnázásra vonatkozó kezdeti döntésünk túl nagy volt, ezért ennek a felhasználási esetnek a figyelembe vételével átdolgoztunk a stílus útmutatóban.Előtte (balra), után (jobbra)

Valójában még egy kihívást akarok felhívni! Az elnevezés nehéz lehet. Mint már korábban mondtam, azt akarom, hogy a tervezők és a mérnökök ugyanazt a nyelvet beszéljék, de ezt óvatosan kell tenni. Annyira egyszerű, mint a legördülő menü, valójában számos változatunk van (az egyik jelölőnégyzetekkel, a másik jelölőnégyzetekkel és szövegblokkkal, a másik pedig egy standard legördülő menü). Hogyan nevezhetnénk három különféle legördülő listát, hogy egyetemesen megértsük, melyik melyik?

A szemantika kihívást jelent; az elnevezésünknek értelemszerűnek kell lennie. Néhány jó együttműködési eszközt használtunk, hogy konszenzusra jussunk, amikor a névről döntenek. Például Wake segített minket az összes nyitott kérdés és kérdés összegyűjtésében, a megoldások megbeszélésében, az UI Smackdown döntéseinek figyelemmel kísérésében és a Slack-nal történő integráció révén folytatni a beszélgetést a nagyobb termékcsapattal.

Hogyan használtuk a Wake eszközt az UI következetlenségeinek megvitatására és az összetevők szabályainak kidolgozására.

Arya: Van valami egyedi az AdRoll felhasználói felületén, amelyet figyelembe kellett volna vennie a stílus útmutató elkészítésekor?

Mason: Az irányítópultunk nagyon nehéz. Ezenkívül a kampány létrehozásának folyamata a hirdetők számára egy csomó mozgatórugót ad. A kevésbé tapasztalt hirdetők igényeinek kielégítése érdekében célunk, hogy hatékony alapértelmezett beállítások legyenek. Termékeinkben az alkatrészek összetett funkciókkal rendelkeznek, de egyszerűek és könnyen használhatóak.

Arya: Vannak olyan dolgok, amelyeket szeretne tudni, amikor elkezdett létrehozni a stíluskalauzot?

Mason: Bárcsak mélyebben megértetném, hogyan működik minden termékünk a kezdetektől. Például megosztjuk a saját termékünk működését a heti tervezési kritikával foglalkozó találkozón, tehát tudom, hogyan működik a SendRoll (az e-mailt újracélzó termékünk) a felületen, de nincs mély ismeretem a SendRollról, amelyet a tervező végez. Úgy gondolom, hogy a termék árnyalt megértése határozottan segít a stílus útmutató kidolgozásakor, mert akkor jobban megértem az összes lehetséges felhasználási esetet.

Arya: Tehát hogyan lehet a legjobban elérni a tervező folyamatának és termékének közös megértését?

Mason: Annak ellenére, hogy valóban a termékeink szállítására koncentrálunk, jó munkát végezzünk azzal, hogy megosztjuk a tervezési folyamatunkat a heti tervezési kritikával foglalkozó találkozón. Úgy gondolom, hogy jobban tudjuk lezárni a hurkot minden ülés után - hogyan építette be a tervező a találkozó visszajelzését? Miután a terméket kiszállították és hirdetőink használják, megoszthatjuk azt is, hogy a hirdetők hogyan használják a termékeket az elemzésből származó betekintés alapján.

Arya: Vannak olyan források, amelyekre Ön hivatkozott a projekt kidolgozása során?

Mason: Olvastam Brad Frost Atomic Design-ját, online kutatást végeztem, és beszéltem más UX-tervezőkkel a MeetUps-on. Ha úgy gondolja, hogy egy adott cég jó dizájnt alkalmaz, akkor valószínű, hogy valahol az interneten beszélték a stíluskalauzról.

Arya: Mi a stíluskalauz státusza?

Mason: Felfogtam és áttekintettem az összes felhasználói felület elemet, amelyeket különféle termékeinkben használunk, és alapokra, összetevőkre, mintákra és oldalakra csoportosítottuk őket, amelyek igazságforrásként szolgálnak felhasználói felületeink tervezéséhez.

Ellenőrizheti az alapokat és az összetevő felhasználói felület elemeit a Dribbble oldalon. Ha ismeri az atomi tervezést, az „atom” és a „molekula” szinteket az „összetevőknek” neveztem. Például az űrlapcím és a bevitel kombinálása megkönnyíti más tervezők számára a kitöltött űrlap másolását. mező.

Köszönöm, hogy elolvasta!

Vigyázz ezekre a közelgő témákra a stílus útmutatónk kidolgozásakor:

  • A felhasználói felület kerete egyszerűsíti az együttműködést
  • Új stíluslapok fejlesztése az UI keretrendszer alapján
  • Hogyan készítsünk egy Style Guide webhelyet?
  • Az út a hangunk és hangunk megtalálásához