UX, IA, UI — ezek a rövidítések nagyon zavaróak lehetnek. Designerként meg kell terveznünk a teljes felhasználói élményt (UX), az információk megfelelő logikai architektúrába történő rendezését (IA), valamint figyelembe kell vennünk a megfelelő felhasználói felületet (UI).
Az Útmutató a UX Design tervezéshez című cikkben, megvizsgáltam a felhasználói igények megértésének szükségességét, valamint a tervezés megvalósítását az emberi gondolkodásmóddal és az esztétikus alkotás kialakítását. Most azt fogom megvizsgálni, hogy hogyan tudunk olyan felületeket tervezni, amelyek konzisztensek és méretezhetők. A tervezési folyamatnak ebben a szakaszában a következőket használjuk és alkalmazzuk:
Ennek a cikknek az a célja, hogy egy olyan szempontból közelítsük meg a felhasználói felület tervezését, amely szélesköűen alkalmazható és méretezhető különböző projektekben. Egy designkeret létrehozásával, másoktól tanult dolgokat is felhasználhatunk, továbbfejleszthetjük a designt, a végeredmény pedig sokkal kedvezőbb lesz a felhasználók számára.
Felületi eszközök készítése (interface inventory)
Kezdhetjük egy új termékkel vagy pedig egy már létező termékkel, de ez szintén segítséget nyújt a felületi eszköz készítésében. A tartalom eszköz (content inventory) lehetővé teszi, hogy a különböző tartalmak (pld: szavak, képek, és egyéb tartalomtípusok) konzisztensek legyenek, a felületi eszköz (interface inventory) pedig biztosítja, hogy a felhasználói felületeket egy átfogó kereten belül fejlesszék.
Az eszköz használatával hosszútávon időt spórolhatunk meg olyan tervezőrendszerek létrehozásával, amelyek a csapattagok között konzisztensek és egyszerűen méretezhetők. A felületi eszköz segítségével az időre és a szükséges elemek elkészítésére koncentrálhatunk.
Mi is pontosan a felületi eszköz (interface inventory)? A kifejezés Brad Frosttól származik. Frost ezzel kapcsolatban a következőt mondja:
“A felületi eszköz hasonló a tartalom eszközhöz, csupán a tartalom kategorizálása és különválasztása helyett, megfogjuk az egész készletet és kategorizáljuk az összetevőket, amelyekből a weboldalunk [vagy termékünk] áll. A felületi eszköz egy átfogó gyűjtemény, amelyekből a felület áll."
Ha a meglévő termékünket szeretnénk áttervezni, a felületi eszköz elkezdi leképezni az összes összetevőt, így minden megfelelően lesz dokumentálva.
A felületi eszköz segít minden olyan dolog maghatározásában, amelyek szükségesek a felhasználói felülethez (UI). Brad Frost egy sablont is biztosított a használathoz.
A folyamat első részénél az elkészített dolgokról módszeresen képernyőmentéseket készítünk. Ha ennél a résznél — különösen, ha nagy design csapatunk van — amelyet elkezdenénk, ellentmondásokat tapasztalunk a különböző elemek tervezése során, akkor a felületi eszköz segít nekünk az elemek azonosításában, majd pedig kijavításában.
Nézzük meg az összes alkotóelemet, amelyekből a felhasználói felület áll:
A felületi eszköz célja, hogy megfelelő sorrendet biztosítson, ezálal pedig minden konziszens legyen.
A folyamat második része az elkészített képernyőképek kategorizálása. Azt javaslom, hogy a rendszerezéshez a Keynote-ot vagy a PowerPoint-ot használjunk. Ehhez Brad Frost egy sablont mellékelt, amit zip fájlként használhatunk.
Mintakönyvtár készítése
Valamennyi összetevő megfelelő rendszerezése után, fontos, hogy elkezdjük a gyakori tervezőmintákat azonosítani és körbeépíteni azokat. A felületi eszközünk valószínűleg ellentmondásban lesz a design-nal szemben, így a design folyamat célja az UI újjáépítése. Ebben az esetben nagy segítséget nyújt, ha egy LEGO-ra hasonló dologra gondolunk.
A LEGO-val kis alkotóelemekkből rendkívül bonyolult dolgokat építhetünk. A felületek nagyon hasonlóak. Bár első pillantásra, a felület rendkívül bonyolultnak tűnhet, alapvetően kisebb alkotóelemekből áll.
A mintakönyvtár azonosítja és osztályozza a design mintákat, amelyek ismétlődő megoldásokat tartalmaz a felmerülő design problémákra.
Ezek a következők lehetnek:
A mintakönyvtár a felületet kisebb részekre bontja, amelyek később újrafelhasználhatók. Ez a megközelítés a következő előnyöket biztosítja:
A felhasználói felület (UI) tervezésekor jó dolog, ha mások design mintáira hivatkozunk, így pontosan láthatjuk, hogy melyek működnek és melyek nem. A Felhasználói Felület Mintái egy nagyszerű megoldás ehhez, mellyel rengeteg design mintát összegyűjthetünk.
A felületi eszköz segítségével és a design minták azonosításával mindössze egyetlen lépésre vagyunk a design rendszerhez szükséges alkotóelemek létrehozásától. Ez biztosítja, hogy a felhasználói felület (UI) konzisztens és méretezhető legyen.
Atom design kiválasztása
Andy Clarke már régóta ír és beszél a különböző tervező rendszerekről.
Clarke megközelítése szerint az oldalak tervezése és elkülönítése helyett olyan rendszerek létrehozására kell koncentrálnunk, amelyekkel ilyen oldalakat tudunk készíteni.
Megjegyzés: Szerencsénk van, hogy számos tervező a kezébe vette a karmesteri pálcát és a tervezés egy mélyebb szintjén gondolkodik. Brad Frost "Atomic Design” és Alla Kholmatova “Design Systems” című könyvei rengeteg hasznos ötletet és tanácsot tartalmaznak. Mindkét könyv elolvasása erősen javasolt!
Frost könyvében külön kihangsúlyozza a tervszerű megközelítés fontosságát a felületek megtervezésekor:
“Rendívül érdekel, hogy pontosan miket tartalmaz a felhasználói felületünk, illetve hogyan hozhatunk létre tervező rendszereket egy sokkal tervszerűbb módon.
A hasonló ötletek keresése során, állandóan visszatértem a kémiához. […] Minden anyag atomokból épül fel. Ezek az atomok együtt molekulát alkotnak, amelyek pedig még összetettebb szervezetet alkotnak, ezekből épül fel az egész világegytem.
A felületek hasonlóan kisebb összetevőkből épülnek fel. Ez azt jelenti, hogy az egész felületet lebonthatjuk egészen az alapokig és onnan újra felépíthetjük. Ez az atom design lényege."
Frost módszertana öt szintet különböztet meg: atomok, molekulák, organizmusok, sablonok és oldalak. Az atom felépítésétől kezdve létrehoztunk különböző design blokkokat, amelyekből bármit építhetünk.
Brad Frost atom tervezési módszertana megfelelő alapot biztosít egy design rendszer létrehozásához. A legkisebb blokkokra öszpontosítva — majd pedig egy sokkal összetettebb design-nal — egy konzisztens és méretezhető rendszert hozhatunk létre.
A legfontosabb dolgok:
Röviden, létrehozunk egy kicsi felületet blokkok segítségével, ezeknek az egyesítésével pedig egy sokkal bonyolultabb dolgot alkotunk. Az atom design előnyei közé tartozik, hogy biztosíthatjuk a konzisztenciát az alkotóelemek egyesítésével.
Az UI kitek használata
Tervezőként hihetetlenül nagy szerencsénk van, hogy egy olyan közösség tagja lehetünk, amely a munkavégzés egy különleges megközelítését alkalmazza. Láttuk az UI kitek berobbanását az utóbbi évek során, elősegítve, hogy az életünk egy kicsit könnyebb legyen.
Nincs értelme az UI alkotóelemek újrarajzolásának, mivel ez az UI kit segítségével gyorsan és egyszerűen megvalósítható. A megfelelően megtervezett UI kit a digitális termékünk sarokköve lehet, ezáltal pedig gondoskodik a megfelelő kinézetről és érzékelésről, valamint a vizuális azonosításról.
Az Adobe XD UI kitek mobilra (bal oldali kép) és webre (jobb oldali kép) nagyszerű lehetőséget biztosítanak egy projekt elkezdéséhez. A jellemző összetevők biztosításával (regisztráció, űrlapok, profilok) jelentős időt spórolhatunk meg, nem beszélve arról, hogy nem kell újra megrajzolnunk a gyakran használt összetevőket.
Az Adobe együttműködésre lépett néhány vezető tervezővel, annak érdekében, hogy Adobe XD UI kiteket hozzanak létre. Ezen kívül oktatóanyagokat is készítettek a tervezés UI kitekkel történő elkezdéséhez.
A fentieken kívül ingyenes ikongyűjteményeket valamint ingyenes UI kiteket is készítettek webes és mobilos projektekhez.
Az UI kitek hihetetlenül nagy segítséget nyújtanak és jelentős mennyiségű időt takaríthatunk meg a használatukkal, hiszen nem kell a gyakran használt elemeket újra megtervezni. Más kitekhez hasonlóan itt is beleeshetünk a sablon vezérelt megközelítés hibájába, melynek során az egyik design nagyon hasonlít a másikra. Fontos, hogy a kitet mindig kiindulópontként használjuk, annak a rétegnek a megjelenítésére, amelyet létre kívánunk hozni a létrehozott elemekből.
Figyelem! A tartalom legalább 2 éve nem frissült! Előfordulhat, hogy a képek nem megfelelően jelennek meg.