Kezdjünk egy közös projektet!

Neved Add meg a neved! (minimum 4 karakter) Örömmel válaszolunk neked 24 órán belül.
Telefon Add meg a telefonszámodat! Lehet, hogy telefonon egyeztetsz szívesen.
Email Add meg az email-címedet! Vagy egy gyors emailnek jobban örülsz.
Üzenet
  Küldés folyamatban...

branding, arculattervezés és user interface design

Így készült az OTP Bank User Interface Styleguide-ja

Így készült az OTP Bank User Interface Styleguide-ja

Minap azon törtem a fejemet amikor a portfoliónk fejlesztésén dolgoztam, hogy vajon mitől sikeres egy projekt? 

Hogy sokat fizettek érte, vagy hogy gyors volt, vagy kevés konfliktust generált? Ezek nem a fontos tényezők közé tartoznak, hiszen ezek csak a projektek kis részét befolyásolják. Arra jutottam, hogy a legfontosabb az, hogy a létrejött termék értéket teremtsen. Ehhez pedig az kell, hogy a résztvevők érdekei –bármelyik oldalon is állnak– egymást erősítve hozzák létre az eredményt.

Így nem is a projekten dolgozók profitálnak belőle a legtöbbet, hanem azok akik a végén használják a terméket. Az OTP Bank esetében pedig itt nagyon sok emberről beszélünk, napi több százezerről.

Tavaly év folyamán elkészült Magyarország legnagyobb kereskedelmi bankjának online megjelenését szabályozó guideja. Ennek tapasztalatait szeretnénk most megosztani.

Miért van egyáltalán szükség guidera?

2015 közepe óta dolgozik az OTP Bank online arculati feladatainak egy részén a made by zwoelf UI csapata. A korai időszakban három fő projekten dolgoztunk:

Mindhárom projekt tervezését ugyanaz a tervezőcsapat egy-egy tagja végezte – igaz térben és időben eltérően, talán ez az oka, hogy annak ellenére, hogy törekedtünk az egységességre mégsem alakult ki tökéletesen egységes look and feel.

Összevetettük a projektek terveit és az láttuk, hogy arculatban, tipográfiában, UI elemekben hasonlítanak ugyan, de nem egységesek.

Nehézségek

Az eltérések egyik fő forrása: az onsite munkavégzés. Ugyanis ezeket a projekteket a bank war roomokban vezeti. Ez egy kiemelkedően hatékony formája az agilis fejlesztésnek: minden résztvevő, legyen az üzleti oldal, stratégia, marketing, frontend/backend fejlesztő, UX design, UI design egy helyszínen, akár egy teremben dolgozik a projekt ideje alatt. Ez segíti az információk áramlását: nem kell emailekre várni, csak oda kell sétálni a másikhoz és tisztázni a problémánkat.

Ellenben számunkra, tervezők számára egyben problémát is jelent:

  • a megszokott kreatív stúdiókörnyezet hiánya,
  • ahány projekt, annyi war room, így a csapat szétszabdalt, a közösen gondolkodás, gyors feedback kérés erejét nem tudjuk kamatoztatni.

A fent kifejtettek indukálták egy UI styleguide létrehozását. Mindenképp előnyös, hogy az OTP Bank online marketing és termékfejlesztés osztálya is támogatta a szabálykönyv létrehozását. 

Lássuk milyen workflow szerint dolgoztunk. 

UI homokozó

Első lépésként létrehoztunk egy virtuális játszóteret, homokozót, aminek az volt a célja, hogy az elkészült három felület jellemző UI elemeit összegyűjtsük és egymás mellé téve összehasonlíthatóvá tegyük.

Látszik, hogy a választott betűtípus egységes, a UI elemek mérete szinte egységes, viszont a lekerekítési sugarak, a betűvastagságok és színárnyalatok kisebb-nagyobb eltérést mutatnak.

Következő lépésként a tipográfiát vettük górcső alá. Azt láttuk, hogy a különböző projektekben a tipográfiai hiearchia más-más elemekből épül fel. Ez egy olyan eltérés ami markáns különbséget produkál UI felületeken.

 

A UI-t felépítő kártya elemek megjelenése is markáns eltérést mutatott. Lekerekítési sugár, szín, árnyékvetés mértéke mind-mind apró mértékben eltértek. Ezek az apró eltérések összeadódva viszont jelentősen csökkentik az egységességet.

A fenti témákat elemezve kialalult javaslatunk az ideális UI irányról, viszont a döntést a bankkal közösen kellett meghozni.

Közösen leülve is értékeltük az eddig elkészült UI felületeket majd ez alapján meghatároztuk, a követendő irány tulajdonságait: 

  • a három elkészült UI közül a leginkább a Vállalati számlanyitás áll távol a kívánt irányból, így annak elemeit szinte teljesen eldobtuk. 
  • A végső irány a vagyontervező és a lakossági személyi kölcsön hibridjéből alakult ki, amelyben a vagyontervező felület elemei a meghatározóak.

Metodika: Atomic Styleguide

A kezdeti összehasonlítás logikája indukálta a végeremény rendszerét is: először szétszedtük a screeneket darabjaira, lebontottuk a legapróbb elemi részecskékig: ezekből következtettünk a végleges UI irányra. Így kézenfekvő volt, hogy a styleguide kövesse Brad Frost által kidolgozott Atomic webdesign logikáját, felépítését.

Ennek lényege, hogy a UI-t először a legapróbb atomi részecskéig bontjuk: tipográfia, gombok, alap UI elemek stb.

A következő szint a molekulák szintje, amelyek több atomból álló UI elemek. Ilyen lehet például egy login box, ami áll két input fieldből és egy gombból.

Az organizmusok aztán olyan UI amelyek molekulákból állnak. A fenti logika szerint ez lehet például egy nyitólapon lévő kártya amin van egy login box és egy regisztrációs panel is.

Az organizmusok aztán templateket alkotnak amelyek már könnyen újrahasznosítható teljes screeneket képeznek.

A fenti logika szerint felépített styleguideok ajánlott formátuma html+css blokkok amelyek a fejlesztést is nagyban gyorsíthatják. Az OTP Bank döntése szerint mi első körben viszont inkább egy offline anyagot dolgoztunk ki, ami elsősorban a tervezést segíti elő.

Sketchben hoztuk létre, hisz minden OTP UI projekt tervezése Sketchben történik. Így a szabályrendszeren túl egy olyan asset library is létrejött, amelyet a tervezők copy&paste-el könnyen tudnak használni a mindennapokban.

Guide részletek

Teljes terjedelmében nem mutatjuk be a styleguide-ot, de néhány érdekesebb részletet most ismertetünk. 

Alapvető szabályok

Az atomi elemek rögzítése előtt alapvető UI/grafikai szabályokat is lefektettünk. Ilyenek például:

  • vonakultúra, lekerekítések rendszere,
  • gridrendszer, eltartás rendszere,
  • árnyékok rendszere.

Az arculat része a UI-nak

A guide kidolgozásakor nem csak a bankkal egyeztettünk, hanem több ponton együtt dolgoztunk az OTP Bank arculati ügynökségével a Café Communications munkatársaival. Jellemzően az alábbi témákban:

  • tipográfia: online és offline felületek egységesítése,
  • színek: meghatározni az OTP UI zöld szín RGB kódját,
  • CTA gombok: az egységes UI céljából a bannerek gombjainak is illszkednie kell az oldalak arculatához.

Atomok: tipográfia

A tipográfia egységesítése folyamán kialakultak a megfelelő hangsúlyok, az oldalakon belüli hierarchia. Sok időt töltöttünk a megfelelő betűtípus kiválasztásán. Az OTP Bank arculati betűtípusa a DIN Pro, mely a tesztelés során kiderült, hogy UI felületeken is kiválóan működik. Sokáig úgy tűnt, hogy a teljes online felület is átveszi az offline világ betűtípusát, de egy licencelési probléma miatt végül a Source Sans Pro-ra váltottunk. 

Ezáltal sajnos nem valósult meg az egységes offline/online tipográfia. A válaszott ingyen elérhető google font kiválóan működik screen felületeken, csak a vastag metszetek “csukódnak be” alacsony felbontású screenen, így a legvastagabb a Semibold (bizonyos esetben bold) metszet amit az online arculatban használunk.

Atomok: színek

Az OTP Bank arculati kézikönyvéből átvettük az offline színeket, de ezeket ki kellett olyan színekkel egészíteni amelyek UI specifikusak:

  • be kellett vezetni 3 féle szürke árnyalatot,
  • be kellett vezetni accent, highligh színeket,
  • meg kellett határozni a Bank zöld arculati színének RGB kódját amely működik a UI felületen.

Már a korai UI tervezési fázisban kialakult, hogy az OTP arculati zöldjét használjuk a primary action színének. Ezáltal folyamatosan jelen tud lenni az elsődleges brandszín.

Az OTP Bank UI zöld meghatározásakor számtalan árnyalatát teszteltük az offline arculati színnek. Ráadásul mivel screen színekről van szó, egyáltalán nem mindegy, hogy milyen a megjelenítő felület (TFT, IPS, AMOLED, OLED stb). Ennek megfelelően beszereztünk számos kijelzőt és azokon teszteltük a kiválasztott árnyalatokat. 

Atomok: gombok

Gombok esetén rögzítettük a különböző állapotokat, belső szerkesztési alapokat, valamint a CTA gombok estén számos arculati szín hover és onclick állapotait. Külön rögzítettük itt is a mobilos megjelenési formákkal.

Számos további UI atomot rögzítettünk: input típusok, adat specifikus inputok, mobil kontrollok, ikonok, tabok, akkordion stb. Különös figyelmet fordítottunk, hogy bizonyos UI elemek reszponzív működésére. 

Molekulák

Az atomok rögzítése után számos molekulát definiáltunk:

  • táblázatok és táblázatok kártyán (mobilon),
  • sliders/steppers,
  • popupok, 
  • Alapadatok, termékkártyák stb.

A molekulák definiálásán túl nem haladtunk a styleguideban. Úgy ítéltük meg, hogy a folyamatok sokszínűsége nem indokolja, hogy nagyobb szerkezeti egységeket is rögzítsünk. Mivel az új felületek a régi a weboldal keretrendszerébe (fejléc, lábléc) illeszkednek, így ez a döntés jól indokolható.

Végeredmény

A styleguide első verziója összesen 3 hónapnyi munka után hatályba lépett 2016 május végén. A végeredmény egy 45 oldalas dokumentum, ami egy jó alapnak tekintehtő a további bővítésékhez, frissítésekhez. 

Több olyan felület van jelenleg a csőben amely már az új rendszer szerint kerül tervezésre. Sőt van olyan amely már élőben is elérhető: ez lakossági számlanyitási folyamat.

Takeaway

Olyan nagy szervezeteknek, ahol párhuzamos projekteket futnak és szeretnének egységes online megjelenést elengedhetetlen, hogy rendelkezzenek styleguide-dal. Ebben rögzített szabályok nem kőbe vésett intelmek. Nyilvánvalóan a szabályok betartása biztosítja az egységességet, viszont egy élő styleguide a tervezési tapasztalatok szerint folyamatosan fejlődik, finomodik és bővül. Minden újabb alkalmazás hozzátesz valamit.

Az OTP UI stílus megalkotásakor törekedtünk arra, hogy a UI megjelenése friss legyen, de mégse üljön fel a jelenlegi trendeknek, hogy legalább 5–6 évig alkalmazható legyen anélkül hogy elévülne. 

Hogy siker vagy sem azt az idő eldönti, de visszagondolva a tervezési időszakra jó érzések töltenek el: minden résztvevő azon dolgozott, hogy a végén a felhasználóknak legyen a legjobb, és azt hiszem, hogy ez a legjobb motiváció egy UX/UI projekten.

Közreműködtek

made by zwoelf UI: Serfőző Péter — lead designer, Gerő Elektra, Bercsek Orsolya, Kovács Mónika, Csutorás Lajos — UI designer, 
Ergomania UX: dr. Rung András, Jankó Gergely, Tárkány-Kovács Balázs.

Papp Ildikó, Dolezsai Gergely, Kálosi Gergely (OTP), Kórusz Bea, Varga Gábor (Café Communications) Szalontai András (Flohr Design)

Serfőző Péter
Írta: Serfőző Péter CEO, design lead

Beszéljünk?

Indítsunk egy projektet