Hirdetés
. Hirdetés

A UI-tervezés eszközei

|

Vendégszerzőnk, Dobó "Doranszky" Mátyás webes szolgáltatások kiépítésében vesz részt, mobilfejlesztésekkel foglalkozó céget vezet, mindemellett pedig a Smartmobil konferencia egyik fő szervezője. Cikkében bemutatja a felhasználói felületek tervezéséhez alkalmazható legjobb eszközöket.

Hirdetés

Gyakran ámulatba esünk az Apple termékeivel kapcsolatban: hogyan lehet képes egy ekkora cég ilyen minőségű termékeket tervezni és gyártani. A szoftvereik minőségének kidolgozottsága átlagon felüli. Mégis hogyan éri el ez a cég, hogy a termékei ilyen jól célzottan szolgálják a végfelhasználókat anélkül, hogy túl sok felesleges vagy rosszul megvalósított funkciót implementálnának?

Az egyik trükk biztosan az, hogy jobban terveznek, mint mások. Az Apple-nél - ha lehet hinni a pletykáknak - minden megvalósítandó funkcióból 10 prototípust készítenek, a tízből három teljesen működőképes termék készül el, és végül ebből a 3-ból egyet választanak ki gyártásra. Ez a 10-3-1 modell rendkívül sok prototípust jelent és nagyon sok tervezésre szánt időt és energiát. De ha belegondolunk, hogy ez a folyamat is hozzájárul ahhoz, hogy az Apple-nek épp több pénzügyi tartaléka van, mint az Egyesült Államoknak, akkor nem tűnik túl nagy áldozatnak.

A Microsoftot sokáig a kissé elnagyolt szoftveres interfészek és a felhasználói élmény jellemezte. A cég akkor kezdett jelentősen fejlődni a felhasználói élményt illetően, amikor az egyik leghíresebb interakciós dizájner - Bill Buxton - alatt újraszervezte magát, és mára erőteljesen tervezésvezérelt céggé vált.

Vajon miért ölnek erőn felül időt és energiát ezek a cégek prototípusok előállításába és lehetséges termékkoncepciók kipróbálásába? Mert rájöttek arra, hogy a tervezés időszakába fektetett megfelelően strukturált energia sokszorosan megtérül, ha a végső siker valószínűségét növelni tudja.

Egy elkészült terméken változtatásokat eszközölni ugyanis sokkal költségesebb. Amikor a gyártósor már elindult, a termék pörög, a felhasználók vásárolnak, minden apró változtatás sok-sok millió dollárba kerülhet. Amíg a tervezőasztalon van a termék, addig olcsó, gyors és könnyű változtatni rajta. A webes szolgáltatások tervezésével kapcsolatban nagyon hasonló a helyzet. Bár a büdzsé és az időkeret sokkal kisebb, ezeknél a szolgáltatásoknál is egyre jobban előtérbe kerül a prototípusok tervezése.

Mi is a drótváztervezés?
A tervezés előkészítése tulajdonképpen stratégiai gondolkodás azzal kapcsolatban, hogy szolgáltatásunk/alkalmazásunk milyen funkciókat milyen struktúrában fog megjeleníteni. Az eltérés általában abban a kérdésfeltevésben van, hogy milyen szinten érdemes drótvázakat tervezni és milyen eszközökkel. A következőkben kissé öncélúan két szintet vizsgálunk majd részletesebben. Az alacsony és a magas kidolgozottságú formátumokat.

Skiccek
Az alacsony kidolgozottságú drótváz a skicc, a funkciót csak vonalaiban megmutató tervezési eszköz. Alacsony kidolgozottságú drótváz rajzolásakor a cél nem a felületen elhelyezett elemek pontos reprezentációja, csupán alapvető sajátosságaik jelzése. Ilyenkor lehet a szövegeket vonalakkal jelezni, a gombokat egy négyzettel és benne egy vonallal, egy képet egy keretbe helyezett x-szel.

Sokan a fejlett grafikai eszközök miatt - például Photoshop - nem értékelik eléggé ezt a formátumot, ilyenkor érdemes megnézni, hogy más - akár ezeréves múltra visszatekintő - tervezésvezérelt mesterségek hogyan működnek, ahol a tervezési hiányosságok nagyon drága hibákhoz vezethetnek. Az építészeknél például teljesen természetes módon kezdik a tervezést papíron ceruzával, pusztán egyszerű vonalak húzogatásával. A Dubai híres vitorla alakú Burj Al Arab szálloda skicce tökéletesen példázza, hogyan tud elképesztő mennyiségű információt megmutatni egy épületről néhány egyszerű vonal.

burj al arab

Ahogy egy egyszerű kézi rajz alapvető sajátosságokat tud megmutatni egy sok millió dolláros épületről, ugyanígy képes arra, hogy megindítsa a fantáziánkat webes/mobil projektekkel kapcsolatban. Ha valaki ilyen típusú drótváztervezésre adja a fejét, kezdésnek érdemes papírt és vastag markert használni, ami nem engedi a részletekbe bonyolódást. Mostanában az iPad térhódításával már nagyon jó digitális eszközök is megjelentek, ezek lehetővé teszik olyan kézi rajzos felületek tervezését, amelyek megőrzik a digitális formátum előnyeit.

Céleszközök iPadre
Adobe Ideas, Penultimate, UiSketcher - ezek közül is talán a legjobb az iPaden elérhető Adobe Ideas alkalmazás, amely a kézi rajzok készítése mellett lehetővé teszi, hogy rétegeket hozzunk létre - egymás fölé független lapokra rajzoljunk -, a rajzokat pedig vektoros, bármeddig nagyítható formátumban megosszuk.

Az UiSketcher - bár hiányzik belőle a rajzok vektoros rögzítésének lehetősége - konkrét tervezési folyamatot is támogat, a Design Studio Method és az Adaptive Path, a két világhírű tervező cég módszereit hasznosítja. Hatféle verziót tervezhetünk vele egy ötletből, majd ezekből egyet kiválasztva nagyobb formátumban is kidolgozhatjuk.

Előnyök és hátrányok
Az alacsony kidolgozottságú drótvázak legnagyobb előnye a gyorsaság. Az itt meghozott tervezési döntésekkel kapcsolatban nincs komoly problémaérzetünk és elköteleződésünk, rögtön könnyedén javítunk, hozzáadunk és elveszünk, hiszen az egész nem tart egy-két percnél tovább. Ugyanez egy már grafikailag kidolgozott weboldalnál nem mondható el, ami egyben meg is mutatja az említett forma óriási előnyét: előbbi komolyabb vérveszteség nélküli vizuális kísérletezést tesz lehetővé. A webes tervezésben az utóbbi időben reneszánszát élik a kézzel készített drótvázak.

A formátum hiánya, hogy nagy mennyiségű írásbeli, esetleg szóbeli kiegészítésre van szüksége az ügyfélnek, hogy a drótváz értelmezhető legyen; ilyenkor érdemes a drótvázakat digitális formátumban egy prezentációs szoftverben feliratozni és ellátni annyi extra információval, hogy az ügyfél számára is érthető legyen.

A drótvázkészítési folyamatban a gyors iteráció talán a legfontosabb feladat. Vagyis nem a kidolgozottság, hanem az, hogy a tervező és az ügyfél közötti gyors kommunikációs időszakban a lehetőségek, problémák, innovációk gyorsan felszínre hozhatók legyenek, s az ügyfél saját ötleteit bevonva olyan terv készüljön, amelyet mindkét fél elfogad és amely sikeressé teheti a projektet.

Webes és táblás öszvér
Blasamiq, SketchyPad. Ha valaki nem szereti a kézi rajzokat, a weben elérhetők olyan szoftverek is, amelyek imitálják a kézi rajzot, ugyanakkor digitális szerkesztéssel készíthetők, ezzel ötvözik a kézi rajz hatását - utalását arra, hogy tervről van szó - a digitális tervezőeszközökkel. Több olyan szoftver is elérhető a piacon, amely ilyen opciót kínál a felhasználóinak. Ezek közül a Blasamiq az egyik legegyszerűbb és legkönnyebben használható ilyen szoftver, amely reprodukálja a skiccelés élményét, az elkészített terveket mégis könnyű megosztani és véleményt kérni róluk, a kézi rajzos hatás pedig lehetővé teszi, hogy a részt vevő felek ne apró-cseprő problémákkal foglalkozzanak - például, hogy a gomb színe lehetne egy kicsit világosabb -, hanem a tervezés korai szakaszában sokkal lényegesebb kérdésekkel. Ilyen például, hogy a felületnek egyáltalán van-e értelme és megfelelő konstrukcióban valósít-e meg egy-egy funkciót.

Ipaden hasonló funkcót kínál a SketchyPad és az iMockups.

Magas kidolgozottságú drótvázak
Ha a tervezés egyik végén a kézi rajzos tervek állnak, túloldalán pedig a grafikai tervek, akkor a kettő között valahol félúton helyezkednek el a magas kidolgozottságú drótvázak. Ezek a drótvázak mindenféle olyan felületi elemet tartalmaznak, amelyeket majd beépítenek a szoftverbe, így pontos képet adnak a felületről, gyakran linkek, képek, részletes szövegek szintjén reprezentálják a felületet, ezekből már konkrét grafikai tervek készíthetők. Ezeket a drótvázakat gyakran össze is kötik és interaktív formátumban prezentálják, vagyis az ügyfél már egy kattintható felületet kap, az prezentálja azt az élményt, amelyet a végleges termék fog produkálni. A nagy kidolgozottságú drótvázakat általában erre a célra készített szoftverekkel készítik, vagy bevált grafikai tervező alkalmazásokkal.

Céleszközök
Axure, Visio, Omnigraffle. A céleszközöket kifejezetten részletes drótváz tervezésére szokás használni. Nagy mennyiségű előre elkészített sablont tartalmaznak és professzionális drótváztervezést tesznek lehetővé.

Nincs értelme túl sok különbséget tenni ezek között, különböző platformokon mindegyik egy célt szolgál, meglévő sablonokból gyors tervezést.

Céleszközök webes kistestvérei
Pidoco, Protoshare, iPlotz, Hotgloo. A professzionális drótváztervező piac új versenyzői a tisztán webes drótváztervező szolgáltatások. Ezek elsősorban azzal próbálják magukat megkülönböztetni, hogy a drótváztervezés mellett egyéb, weben megvalósítható funkciókat implementálnak, például kollaborációs modulokat és megosztást. Ezek az alkalmazások lehetővé teszik, hogy a készülő prototípust szinte élőben osszuk meg az ügyféllel, aki akár bele is nyúlhat a készülő tervbe, de ha ettől szívgörcsöt kapunk, akkor csak kommentekkel szúrhatja tele a készülő tervet.

Svájcibicskák
Photoshop, Illustrator, Fireworks. A bevált grafikai tervező programokat gyakran szokták drótváztervezésre használni, különösen azokat, amelyek lehetővé teszik vektoros formák mentését, másolását és rétegeket biztosítanak. Vagyis egyfelől gyorsan újrahasznosítható felületi elemeket adnak, másfelől szeparálják a felület egyes részeit, így a tervező egyes blokkokon tud dolgozni anélkül, hogy a felület többi eleme bezavarna a tervezésbe.

Céleszközök iPaden
Omnigraffle, Blueprint. Az iPad a részletesebb drótvázak tervezéséhez is biztosít eszközöket, ezekről többségében elmondható, hogy nem túlzottan táblabarát megoldások. Mivel az iPad a digitális szerkesztést nem támogatja különösebben, az érintőképernyő kevéssé optimális nagy mennyiségű digitális objektum mozgatására és részletezésére. Ha mégis erre a kényelmetlen érzésre vágyunk, az OmniGraffle és a Blueprint jó választás lehet, mindkettő lehetővé teszi, hogy gyorsan tervezzünk webes és mobilkimeneteket iPaden.

A részletes drótvázak hátrányai
Melyek a hátrányai ennek a formátumnak? Részletes drótvázakat nagy projekteknél érdemes igazán használni, ahol a specifikációs részt és a grafikai tervezést külön szakemberek végzik - UX-dizájnereknek is szokták hívni őket -, és mellettük külön dizájnerek foglalkoznak a felületek grafikai tervezésével. Ilyen nagy projekteknél az UX-dizájnerek feladata, hogy a résztvevők igényeit és elképzeléseit vizuális formába öntve folyamatosan és gyors iterációs folyamatokon keresztül finomítva olyan felületet hozzanak létre, amelyet minden résztvevő elfogad, és amelyből már a grafikai tervező úgy dolgozhat, hogy tudja, nem fog még egy kék hirdetés kerülni a felület közepére, vagy egy új blokk az oldal aljára.

Kisebb projekteknél és kisebb csapatoknál a részletes drótváztervezés sokszor dupla munkát eredményezhet - ez egyik oldalon a drótvázak részlétezését jelenti, másik oldalon ezeknek a drótvázaknak a grafikai tervekké formálását. Gyakran nincs is erre szüksége az ügyfélnek, pénze meg pláne...

Sok webes szolgáltatástervező, köztük a 37Signals egyik vezetője, Jason Fried is amellett érvel, hogy a részletgazdag drótvázak helyett az ötleteken, aztán minél gyorsabban a konkrét terméken kell dolgozni. Vagyis tervezzünk minél alacsonyabb szinten minél többet, gondolkodjunk a készülő terméken, van-e értelme, hogyan fog működni, mire van szüksége a piacnak, ügyfélnek, jussunk konszenzusra a funkciókkal kapcsolatban, és csak azután készítsünk grafikai terveket, vagy ha igazán radikálisak akarunk lenni, rögtön öntsük szoftverformátumba a terméket.

Melyik megoldást válasszuk?
A kérdésre, hogy melyik megoldást válasszuk tervezésre egy átlagos hazai webes/mobilos projektnél, nehéz lenne objektív választ adni. Így meg sem próbálkozom vele; soktucatnyi szolgáltatás, mobilalkalmazás projekt tanulságait leszűrve egy biztos: itthon viszonylag kevés mozgástér van a projektek költségvetésében a drótvázak készítésére.

Mégis, ha körülnézünk, a hazai tervezési gyakorlatnak leginkább több gondolkodásra és több ötlet tesztelésére lenne szüksége. A hazai piac tele van jól megírt, de rosszul megtervezett szolgáltatásokkal. A drótvázak pedig pont ennek orvoslásában segíthetnek ötletek gerjesztésével és gyors vizsgálattal. Ennek hiányában naponta érkeznek a piacra halva született szolgáltatások.

Hardverek, szoftverek, tesztek, érdekességek és színes hírek az IT világából ide kattintva!

Hirdetés
0 mp. múlva automatikusan bezár Tovább az oldalra »

Úgy tűnik, AdBlockert használsz, amivel megakadályozod a reklámok megjelenítését. Amennyiben szeretnéd támogatni a munkánkat, kérjük add hozzá az oldalt a kivételek listájához, vagy támogass minket közvetlenül! További információért kattints!

Engedélyezi, hogy a https://computerworld.hu értesítéseket küldjön Önnek a kiemelt hírekről? Az értesítések bármikor kikapcsolhatók a böngésző beállításaiban.

A Project029 Magyarország Kft. közleménye
Bezár