Atomic Design – digitális tervezés stabil alapokon 📏

Emlékszel még a kémia órák gyötrelmeire a molekulák atomok és organizmusok bűvöletében? Az Atomic Design módszertana a szoftverfejlesztést a kémia törvényeivel párosítja, hogy könnyen módosítható felhasználói felületeket hozzon létre. De, mi is ez és hogyan kell elképzelni a gyakorlatban?

Nézzük meg részletesen…

Atomic Design - A kezdetek

Ez a cím úgy hangzik, mint egy film címe… na de a lényeg! ✌😎

Bátran kijelenthetjük a piacot az vezeti, aki kész a megújulásra, ahol automatizálva működik a rendszer, ahol a vevő a legkevesebb erőfeszítésből juthat hozzá a vágyához. Ebben segíthet Brad Frost 2016-ban megjelent ATOMIC DESIGN könyve, amely azonnal felkerült a legjobb UX-könyvek listájára, megtalálható a honlapján, online elolvasható vagy e-book formájában is megrendelhető, és mindent lefed, ami a hatékony tervezési rendszerek létrehozásával és karbantartásával kapcsolatos.

Brad Frost neve sokaknak ismerős lehet, korábban a Google tervezője volt, de hírnevét nem csak ennek köszönheti, elismert webdesigner és tanácsadó, rengeteg workshopot tart webdesign és webfejlesztés témakörben is, mindemellett előadások tucatjait tartotta már meg, így aki kicsit is mozog a design világában, legalább egyszer biztosan találkozott már a nevével és munkásságával. Azonban az Atomic Design 2016-os megjelenése óta neve kétségtelenül összeforrt egy teljesen új, holisztikus szemléletű tervezési rendszerrel. 

Brad szerint a legtöbben elkövetik azt a hibát, hogy egy oldalt egységes, elszigetelt, számszerűsíthető dolognak gondolnak, holott a valóságban a web gördülékeny, interaktív, egymástól nagyon is függő médium. Véleménye szerint a leghatékonyabb webszerkesztési, fejlesztési eszköz a modularitás, mely messze megelőzi a modernkort. Már Henry Ford is alkatrészeire bontotta az autót, majd 1923-ban modularizálta az összeszerelési folyamatot, melynek hála egységesebb, megbízhatóbb és legfőképpen biztonságosabb autókat tudtak gyártani, nem mellesleg sokkal gyorsabban gördültek le egymásután a gyártósorról. A részekre bontás pedig ma, a felgyorsult világunkban fontosabb, mint valaha volt.

Miután nagy nehezen sikerült elérni azt, hogy a létrehozott weboldalak stabilan jelenjenek meg a különböző böngészőkben, most újabb feladat áll előttünk. A webes élményeket ugyanúgy tudni kell átadni telefonon, tableten, phableten, netbookon, notebookon, asztali számítógépeken, televízión, játékkonzolon és még jó ég tudja mi mindenen a közeljövőben. Ahhoz, hogy ez könnyebben sikerüljön Frost azt ajánlja, hogy tegyünk egy lépést hátra, és ahelyett, hogy a teljes egész megoldandó feladatra koncentrálnánk inkább bontsuk részeire, kisebb, kezelhetőbb darabokra.

Ezen a ponton már tökéletesen tisztában vagyunk a rendszer történelmével, most ássuk magunkat kicsit mélyebbre a témában és nézzük meg a rendszer alapjait.

A módszertan alapjai

Ehhez segítségül hozta létre az Atomic Design tervezési módszertant. A benne használt első három elnevezést – atomok, molekulák, organizmusok – a természet ihlette.  A kémiában az atomok minden anyag alapvető építőelemei, a molekulák kettő vagy több atomból álló csoportok és az organizmusok olyan molekulák együttesei, amelyek egységként működnek együtt.

Tehát az Atomic Design egy olyan tervezési módszertan amely egy könnyen értelmezhető  keretrendszert ad a már ipari standardnak mondható komponens alapú fejlesztés hatékonyabb rendszerezéséhez. Olyan moduláris minta, ami öt különböző szintből áll, melyek együttműködésével létrejön egy konzisztens rendszer (Design System), ezzel a képlettel megteremtjük az egyik legmodernebb módszertanát a felhaszánlói felületek tervezésének.  

A módszertan öt szintje

1. Atomok: Mint ahogy a kémiában is, olyan alapvető építőelemek, alapvető HTML tagek, mint az űrlapcímkék, buttonok, inputok, egy szövegmező, animációk, betűtípusok és minden olyan eszköz, amit már nem lehet tovább bontani anélkül, hogy működésképtelenek lennének.
2. Molekulák: UI-elemek viszonylag egyszerű csoportjai, melyek egységként működnek együtt. Például egy űrlapcímke, a button és az input összekapcsolható egy keresési űrlapmolekula létrehozásához.
3. Organizmusok: Viszonylag összetett UI-komponensek, melyek molekulák és/vagy atomok és/vagy más organizmusok csoportjaiból állnak. Egy interface különálló szakaszait alkotják. Például a fejléc, ahol már van egy logó, menü és az előbb említett keresési űrlapmolekula.
4. Sablonok: Ennél az elnevezésnél Brad már visszatért a megrendelő által is jobban érthető, köznyelvben használt kifejezéshez. Organizmusok halmaza, oldalszintű objektumok, melyek megfogalmazzák a terv mögöttes tartalomszerkezetét. Ez már majdnem a kész remekmű.
5. Oldalak: A sablonok konkrét példányai, felhasználói felület valódi reprezentatív tartalommal.
6. +1 Szekciók: A tapasztalataink alapján a fejlesztők és desginerek közötti könnyebb együttműködés és értelmezés jegyében létrehoztunk egy újabb szintet. Ezt szekciónak neveztük el. A szekciók organizmusokat és annál kisebb szinteket tartalmazó egységek, amelyek térbeli tulajdonságokat – mint például margin és padding távolságok és orientációk – és a gyerekeik egymáshoz viszonyított elrendezését határozzák meg.

Előnyei és hátrányai

Okay, szóval mire fel ez a nagy felhajtás? Mire jó ez az egész rendszer? Megtanulunk új fogalmakat és új struktúrákat, sőt még új logikára is váltunk. De miért? 🧐

Ezek jogos kérdések, tekintve, hogy már régóta építünk úgy UI rendszereket, hogy ezt az ötlépcsős módszert alkalmaznánk – és azok is működnek. Ez is jogos felvetés. Ez a módszertan egy tervezési formát biztosít, amely alapjaiban máshonnan közelíti meg a tervezés folyamatát, ezáltal segít hatékonyabb, átgondoltabb UI Design Sytem létrehozásában.

A módszer egyik legnagyobb előnye az absztrakt és konkrét közötti gyors váltás képessége. Egyszerre láthatjuk a UI elemeket atomi szintre bontva és azt is, hogy ezek az elemek hogyan kombinálhatóak egymással, és hogyan alkotják végső elképzelésünket, az oldalakat amelyeket végül szállítunk a megrendelőinknek.

Az ilyen módú körültekintő tervezés nem engedi, hogy hanyagul végezzük a munkánkat, amivel Design Dept-et halmozhatnánk fel. A keretrendszer rákényszerít minket, hogy hogyan, és miként haladjunk a tervezéssel.

Ez az elmélet elsőre furcsának, szokatlannak és bonyolultnak hathat, de ha ráérzünk és megértjük, akkor valójában sokkal gyorsabb lehet vele a munka. Lehet, hogy nem rögtön az első alkalommal leszünk gyorsabbak, sőt. Aki elsőre találkozik a rendszerrel, számítania kell majd azokra a kérdésekre, hogy:

• Mi számít egyáltalán atomnak? A szövegek például atomok?
• Ez az input field a rajta ülő labellel atom vagy molekula?
• A social gombok (amik atomok) azok egymás melletti felsorakoztatása az molekula? Ha igen, akkor micsoda a kártya, ami azokat tartalmazza?
• Egy adott szint – mondjuk az organizmusok – tartalmazhatnak magukhoz hasonló elemeket?

Igen, ilyenkor jönnek ezek a reakciók...

A lényeg, hogy nem kell aggódni! Ezek azok a dolgok, amelyek a maguk idejében a helyére kerülnek majd mindenki fejében. Persze elmondhatjuk a nagy titkot és a választ ezekre a kérdésekre: Nincs semmi sem kőbe vésve. Használd úgy, ahogy te és a csapatod minél jobban érteni tudja. 

Frost hangsúlyozza, hogy a módszert nem egy kőbevésett szabályként kell kezelni. Sokkal inkább egy elvként, ami azon alapszik, hogy ha már csinálod, csináld jól minden egyes elemét!

8 érv az Atomic Design mellett

Az elmúlt 2 évben 14 sikeres projektet valósítottunk meg atomic design alapokon, ezen tapasztalatok projektek és az ügyfeleink visszajelzése alapján az alábbi érveket szedtük össze a módszertan mellett. (Sikertelen projekt nem volt 😉)

1. Keverhetőek és párosíthatóak az elemek kedvünk szerint. Az elején szükséges némi idő- és munkabefektetés, amíg legyártjuk az atomokat, de a későbbiekben ez többszörösen megtérül.
2. Gyorsabbá válik a további weboldalak szerkesztése, hiszen gyorsan elővehetjük a már meglévő atomokat, molekulákat, amiket újra használhatunk, maximum egy kis módosítás, testre szabás lehet szükséges.
3. Egyszerű Style Guide készítés. Amennyiben egy webhelyet a kezdetektől ezen elv alapján készítünk, akkor az összes atom és molekula alapvető stílusvezetőként szolgálhat. Egyébként még más elven készített oldalak esetében is könnyen konvertálhatunk.
4. Könnyen érthető elrendezés. A weboldal kódja jellemzően sokkal könnyebben olvasható, mint más módon létrehozott webhely kódja. Ez nem csak a szerkesztés idejére igaz, hanem a későbbiekben is, amikor egy weboldalt módosítani szükséges, vagy referenciaként tekintünk rá vissza. 
5. Következetesebb kódok. Az Atomic Design segítségével előre definiált atomokat használunk a felhasználói felületekel rendezésének létrehozásához, így könnyen látható, hogy mely összetevőket alkalmaztuk a webhely különböző részein.
   Ez csökkenti a duplikált kód írásának valószínűségét is. Például, ha valaki egy piros gombot szeretne létrehozni, vagy átalakítani a kéket pirossá, akkor az egész oldalt át kell néznie, hogy van-e már ilyen piros gomb, ha van, akkor mennyi és hol, majd másolni vagy szerkeszteni az összes kódot. Atomic Design segítségével viszont könnyen visszaléphetünk az atomok listájára és megtaláljuk a piros gombot, vagy ha kék, akkor könnyen átszínezhetjük – az összeset egyszerre.
6. Hatékonyabb komponens alapú fejlesztéshez képest az atomic design a egy mankót ad, segít joban strukturálni a kódbázost.
7. Könnyebb és gyorsabb frissítés, vagy eltávolítás. Mivel egyszerre csak egy atomot, molekulát vagy organizmust módosítunk, könnyen biztosítható, hogy mindenhol ugyanaz a változás létrejöjjön.
8. Alacsonyabb learning curve. A Fejlesztő / Designer hamarabb meg tudja érteni a folyamatokat és a témát, a jól felépített rendszerben hamarabb lehet értéket teremteni.

Alkalmazási lehetőségek

Természetesen nem minden megrendelés esetén alkalmazható a módszer, de nem árt ismerni a már jól bevált eszközök mellett, hiszen nem a megszokott módon különíti el a szerkezeti egységeket, hanem eltérően, a kicsitől halad a nagyobb felé.

Magyarországon az egyik legismertebb atomic design alapú fejlesztése a MÁV csoport megújult online jegyvásárló rendszere, amely tökéletes példája annak, hogy mennyire felhasználóbaráttá szabható egy elavult és nem igazán működő rendszer.

A Kiflinél az elmúlt 2 évben minden felhasználói felületet atomic design felépítésben készítettünk el, ez idő alatt ügyfeleink visszaigazolták a módszer hozzáadott értékét, megbízhatóbb, konzisztensebb felületeket tudunk létrehozni és fenntartani rövid iterációs idő mellett. A legnagyobb kihívás és ezzel siker is, amikor ezt a folyamatot egy idősebb szervezetnél tesszük, mint ezt tettük az ELTE weboldalainál is.