Addig kell hibázni, amíg nem fáj. Kitekintés a mobilos és webes tervezésre.

Az alábbi cikket eredetileg a Computerworld-be írtam, így a szokásosnál hosszabb és több olyan témát is tárgyal, amit egyébként nem fejtenék ki ennyire.

Az Apple termékeivel kapcsolatban gyakran ámulatba esnek, hogyan lehet képes egy ekkora cég ilyen minőségű termékeket tervezni és gyártani. A szoftvereik minősége átlagon felüli kidolgozottságú, hogyan érik el, hogy a termékeik 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, 10 prototípusból 3 teljesen működőképes termék készül é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 abba, hogy ez a folyamat is hozzájárul ahhoz, hogy az Apple jelenleg a világ egyik legértékesebb cége, nem tűnik túl nagy áldozatnak.

A Microsoft-ot sokáig a kissé elnagyolt szoftveres intefészek és felhasználói élmény jellemezte. A cég akkor kezdett jelentősen fejlődni a felhasználói élmény tekintetében, amikor az egyik leghíresebb interakciós dizájner – Bill Buxton – segítségével elindult a tervezés vezérelt folyamatok irányába.

Vajon miért ölnek erőn felül időt és energiát ezek a cégek prototípusok előállítására és lehetséges termék koncepciók kipróbálásába? Valószínűleg azért, mert rájöttek arra, hogy a tervezés időszakába fektetett megfelelően stuktúrá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 már a gyártósor elindult, a termék pörög, a felhasználók vásárolnak, már 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.

A webes szolgáltatások tervezésével kapcsolatban nagyon a helyzet. Bár a büdzsé és az időkeret sokkal kissebb, 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áz tervezés?
A tervezés előkészítése, stratégiai gondolkodás azzal kapcsolatban, hogy szolgáltatásunk/alkalmazásunk milyen funkciókat milyen struktúrában fog megjeleníteni.

Amiben általában eltérés van, az, 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 pontos reprezentációja a felületen elhelyzett elemeknek, csupán alapvető sajátosságinak 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 – pl. photoshop – nem értékelik eléggé ezt a formátumot, ilyenkor érdemes megnézni, hogy más, akár ezer éves múltra vissszatekintő, tervezés vezé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.

Dubai –

Ahogy egy egyszerű kézirajz alapvető sajátosságokat tud megmutatni egy sok millió dolláros épületről, úgyanígy képes arra, hogy megindítsa a fantáziánkat webes/mobil projektekkel kapcsolatban.

Ha valaki ilyen típusú drótváz tervezésre adja a fejét, kezdésnek érdemes papírt és vastag markert használni, ami nem engedi a részletekbe bonyolódást, de mostanában az iPad térhódításával nagyon jó digitális eszközök is megjelentek, amik lehetővé teszik olyan kézirajzos felületek tervezését, amik egyben megőrzik a digitális formátum előnyeit.

Céleszközök iPad-re: Adobe Ideas, Penultimate, UiSketcher
Ezek közül is talán a legjobb az iPad-en elérhető Adobe Ideas alkalmazás, ami a kézirajzok rajzolása 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 vekoros rögzítésének lehetősége, konkrét tervezési folyamatot is támogat, amit a Design Studio Method és az Adaptive Path, két világhírű tervező cég módszereit hasznosítja, tudunk vele 6 féle verziót tervezni egy ötletből, majd ezekből egyet kiválasztva nagyobb formátumban is kidolgozni.  

Adobe Ideas: http://itunes.apple.com/us/app/adobe-ideas/id364617858?mt=8
Penultimate: http://itunes.apple.com/us/app/penultimate/id354098826?mt=8
UiSketcher: http://uisketcher.com/

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, adunk hozzá és veszünk el, hiszen az egész nem tart egy-két percnél tovább. Ugyanezt már egy grafikailag kidolgozott weboldalnál nem mondható el és egyben meg is mutatja ennek a formának az óriási előnyét. 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 hiánya a formátumnak, hogy nagy mennyiségű írásbeli, esetleg szóbeli kiegészítés kell az ügyfél irányába, 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áz készítési folyamatban a gyors iteráció talán a legfontosabb feladat, vagyis nem a kidolgozottság, hanem a tervező saját magának é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, az ügyfél saját ötleteit bevonva olyan terv készüljön, amit mindkét fél elfogad és ami sikeressé teheti a projektet.

Webes és táblás öszvér: Blasamiq, SketchyPad
Ha valaki nem szereti a kézirajzokat, a weben elérhetők olyan szoftverek is, amik imitálják a kézirazot, ugyanakkor digitális szerkesztéssel készíthetők, ezzel ötvözik a kézirajz 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, ami 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óla, a kézirajzos hatás pedig lehetővé teszi, hogy a résztvevő 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, például, hogy egyáltalán a felületnek van-e értelme és megfelelő konstrulcióban valósít-e meg egy funkciót.

Balsamiq: http://balsamiq.com/

Ipaden hasonló funkcót kínál a SketchyPad és az iMockups
SketchyPad: http://itunes.apple.com/app/id372049989
iMockups: http://itunes.apple.com/app/id364885913

Magas kidolgozottságú drótvázak
Ha tervezés egyik végén a kézirajzos tervek állnak, túloldalán pedig 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 tartalmaznak mindenféle olyan felületi elemet, ami a szoftverbe be lesz építve így pontos képet ad 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, ami prezentálja azt az élményt, amit 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 szoktak készíteni, 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ésre 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.

Néhány Link: 
- Axure http://www.axure.com/
- Visio http://office.microsoft.com/hu-hu/visio/
- Omnigraffle http://www.omnigroup.com/products/omnigraffle/

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 a megosztást. Ezek az alkalmazások lehetővé teszik, hogy megosszuk a készülő prototípust ügyféllel szinte élőben, 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észlő tervet.

Néhány link: 
https://pidoco.com/en 
http://www.protoshare.com/
http://iplotz.com/
http://www.hotgloo.com/

Svájcibicskák: Photoshop, Illustrator, Fireworks
A bevállt grafikai tervező programok gyakran szokták drótváz tervezésre használni, ezek közül is azokat amik lehetővé teszik vektoros formák mentését, másolását és biztosítanak rétegeket, vagyis gyorsan újrahasznosítható felületi elemeket adnak egyik oldalon, másrészt 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 iPad-en: 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ábla bará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 mobil kimeneteket iPad-en.:

Blueprint – http://itunes.apple.com/us/app/blueprint/id405203705?mt=8
OmniGraffle – http://www.omnigroup.com/products/omnigraffle-ipad/

A részletes drótvázak hátrányai
Mik 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 végzik a felületek grafikai tervezését. Ilyen nagy projekteknél az UX dizájnerek feladata, hogy 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, amit minden résztvevő elfogad és amibő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.

Kissebb projekteknél és kissebb csapatoknál a részletes drótváz tervezés sokszor dupla munkát eredményezhet, amely egyik oldalon a drótvázak kiré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 amelett é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 utána készítsünk grafikai terveket, vagy ha igazán radikálisak akarunk lenni, rögtön öntsük szoftver formátumba a terméket. 

Melyik megoldást válasszuk tervezésre egy átlagos hazai webes/mobilos projektnél?
Nehéz lenne objektív véleményt mondani, így meg sem próbálkozom vele, sok tucatnyi szolgáltatás, mobil alkalmazá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örbenézünk, a hazai tervezési gyakorlatnak leginkább több gondolkodásra és több ötlet tesztelésre lenne szüksége. 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.