Design System: mint az ikeás bútor és a szerelési útmutató
Az már szinte köztudott, hogy az olyan cégek, mint az Airbnb, az Uber vagy az IBM megváltoztatták a digitális termékek tervezésének módját. Az viszont nem feltétlenül közismert, hogy egyik legmeghatározóbb eszközük ehhez a design system. De mi az, és egyáltalán szükséged van rá?
Nem tudom pontosan itthon mennyiben jelenik meg a hpye, de az angol nyelvű designer közösségekben egy-két éve a design systems kérdés rendszeresen téma. Miután a mi csapatunk is szállít időnként design systemet, gondoltam hasznos lehet megosztani ennek a rendszernek az előnyeit.
Mivel én valahol old-school UX-es vagyok – az a fajta, aki leginkább csak a drótvázig szállít, habár ezen én is éppen változtatni próbálok UI design felé – így elsősorban holisztikusan tudom ennek a rendszernek az előnyeit ismertetni, de főleg ez is a cikk célja.
Mi az a design system?
A design system kapcsán sokféle definíció él, de általánosságban elmondható, hogy egymáshoz kapcsolódó design elemek és gyakorlatok koherensen szervezett halmaza.
Az egyik nagy részét a patternek, az ismétlődő design elemek képezik, amelyek kombinálásával végül létrehozzuk az interfészt, ide tartoznak például a gombok, interakciók, szövegmezők, ikonok, színek, vagy a tipográfia.
A design system másik fontos része a guide, ami abban segít, hogy miként kell használni ezeket a design patterneket a gyakorlatban.
Még egyszerűbben a design system olyan, mint az ikeás bútor: benne vannak az elemek és a használati utasítás is. Ugyan elvben a használati útmutató nélkül is van rá esély, hogy összerakd a bútort, de elég nehéz dolgod lesz, és a végeredmény minősége is kétséges.
Amikor megjelent a web, a weboldalak struktúráját erősen a print ihlette, ez pedig azt eredményezi, hogy a mai napig gyakran oldalakban gondolkodunk. Pedig valójában nem oldalakat kell terveznünk, hanem komponenseket kell elrendeznünk. A webdesign munka erről szól, s a design systems egy erre adott helyes válasz.
Egy nagyon jó és okkal gyakran hivatkozott design system példa a Google Material Designja:
Ez a fajta design system egy referencia siteon érhető el aminek számos előnye van, de nyilván ez már legprofesszionálisabb szintet jelenti.
A design system ugyanaz, mint a style guide?
Könnyen össze lehet téveszteni a design systemet a style guideal, és néha össze is szokták.
A style guide a brand gyakorlati alkalmazásáról szól, arra ad útmutatót, hogyan kell a márka vizuális elemeit – logót, színeket – használni, és esetenként a tone of voicet is tartalmazza. Tipikus outputja egy branding projekteknek, és néha publikus anyag.
Ezzel szemben a design system elsősorban belső használatra, a cég UI és UX designerei számára készül, és megkönnyíti számukra a design koncepció következetes alkalmazását a digitális termékekben.
Például egy UX/product designer számára működhet úgy, hogy a kutatás után kialakított drótváz alapján a design system segítségével össze tudja rakni a prototípust a rendszer blokkjaiból, anélkül, hogy a design atomi szintű elemeivel foglalkoznia kellene, így könnyen és gyorsan iterálhat.
A design systems előnyei
Minden bizonnyal nem lehet véletlen, hogy tech ipar jelenlegi vezető vállalatai, mint például a Google, Uber vagy IBM masszív design systemeket építettek fel.
De először nézzük a fő előnyt a felhasználó szempontjából, ami lényegében egy konzisztensebb élmény. Ahogyan az emberek navigálnak a termék egyik oldaláról a másikra, vagy egyik termékből a másikba igen nagyra értékelik, ha az élmény mindenütt hasonló lesz.
Minden egyes alkalommal, ha felhasználónak újra kell tanulnia egy interfész elem működését, nagyon bosszús lesz. Ha például a termékeben három helyen lehet dátumot választani és mindhárom máshogy néz ki, az a felhasználónak eléggé rosszul fog esni.
Ha viszont a dátumválasztó mindenütt ugyanolyan, akkor a felhasználó könnyebben és gyorsabban fogja használni, ami nemcsak neki, hanem végső soron a biznisznek is jó lesz.
Szóval a design systems a felhasználó szempontjából is igen előnyös, de mégis a legtöbbet a cégek a belső működésük tekintetében profitálhatnak belőlük. A design team például gyorsabban és jobb minőségben tud dolgozni, mert a rendszer lecsökkenti a felesleges köröket. Nem kell ugyanazt a komponenst tizenötödjére is kitalálni. Azaz a design system abban segít, ami a cégnek az egyik legfontosabb: időt és pénzt takarít meg.
Ugyancsak elég nagy előny, hogy a design systems megteremti a közös nyelvet, ugyanis nélküle sajnos elég gyakori, hogy a design, a fejlesztés, és a product team ugyanazt a komponenst máshogyan hívja. Ha van egy design system, akkor rendelkezésre áll az a referencia pont, amit minden team használhat, és az újonnan érkezők is könnyen képbe kerülhetnek.
Hogyan kell strukturálni?
Ahány ház annyi szokás, ahány designer annyiféle rendszer. Így sztenderd felépítése nincs is a design systemeknek, de valószínűleg az alapséma nagyon hasonló mindenütt, például ahogyan az Atomic Design nevű elegáns modellben megjelenik. Hogy megértsük ezt a rendszert kanyarodjunk vissza az általános iskolai kémiához.
A legfontosabb alapismeret, hogy mindent a világon atomok alkotnak. Az atomok pedig különféle kombinációkban molekulákba rendeződnek, és ezekből jönnek létre a viszonylag összetett organizmusok.
Az atomic design szerint lényegében bármilyen interfészt le tudunk bontani atomi szintű elemekre, például labelekre, inputokra, gombokra. A modell szerint a UI-t összességében atomok, molekulák, templatek és oldalak alkotják.
Az atomok az alapvető blokkok a UI-ban, például a labelek, input mezők, gombok, tipográfia, képek, tehát a UI nyersanyagai.
A molekulák atomok blokkjaiból állnak, valamilyen konkrét cél érdekében. Például egy label, egy input és egy gomb közösen alkothatnak egy keresőmezőt.
Az organizmusok már viszonylag összetettebb UI komponensek, amelyek molekulákból és/vagy atomokból és/vagy más organizmusokból állnak. Tehát az interfész különálló részeit alkotják:
A következő szint a template, ami organizmusok kombinációja egy layouton.
Legvégül jutunk el a page szintre, ami lényegében valódi tartalmakkal benépesített templateket jelent. Nyilvánvalóan ez egy nagyon fontos pont, hiszen az oldallal fog találkozni végül a felhasználó.
Az atomic design tehát egy hasznos design és fejlesztési metódus, bár elsősorban egy mentális modell, ami design systemek esetén és a gyakorlati UI design során is remekül használható.
Hogyan kezdj hozzá egy design sytstem projekthez?
A kiszervezett design projekteknél – vállalat + besszállító cég/grafikus felállásban – általában a grafikai tervezés egyik minimum kimenete egy UI kit kell, hogy legyen. A kulcsképernyők megtervezése és jóváhagyása után válogatják le a designerek az elemeket, és ez képezi az alapját a design sytsemnek. Azaz már “csak” a gudieot kell kidolgozni, hogy rendszerről beszéljünk.
Egy in-house design csapat esetében viszont célszerű messzebbről indítani a projektet. A jelenlegi állapotot feltérképezése egy jó alapot adhat, ehhez van két egyszerű gyakorlat.
A CSS stats segítségével le lehet gyűjteni egy oldal összes CSS elemét. Érdemes ezt megejteni a saját oldalra is és hamar ki fog esni, ha oldal tele van felesleges stílusok tömegével.
A másik jó kezdés a interface inventory lehet. Némileg hasonló művelet mint a kontent inventory, csak a UI-ra, azaz screenshotok formájában összegyűjtjük a UI elemeket. Egy redesign projekt előtt például hasznos lehet, ha egy régi nagy weboldalról van szó, akkor nagyon szépen ki fogja adni az inkonzisztens elemek sokaságát. Ez pedig rámutat a jelenlegi UI struktúra hiányosságára és igazolhatja a design system szükségességét.
Referenciák
Az Atomic Design írója, Brad frost készített egy rövid kurzust a design sytstemekről.
A Figma egy külön weboldalt indított a témáról, számos forrással.
Ingyenesen letölthető az InVision egyébként eléggé részletes kézikönyve a design systemekről.
Számos design system egy helyen a GitHubon.
Habár inkább nyomtatott stlye guide gyűjtemény, zseniális inspiráció lehet ez az oldal, ahonnan amerikai klasszikus standards manualok, mint például a NASA design kézikönyvének újranyomtatása rendelhető meg.
Boros Norbert
Strategic Design Consultant | Executive Consultant | Facilitator
Cikkeimben elsődlegesen a designt mint szemléletmódot, különösképpen az emberközpontúságot igyekszem átadni.