Rýchla tvorba spustiteľných prototypov

Prototypovanie ako metódu na overovanie prvých konceptov a získanie prvej spätnej väzby od používateľov poznáme z klasickej výroby už dávno. Dnes nás už neprekvapí, keď vidíme prvé prototypy áut (údajne) tajne odfotografované niekde v stepi či prototypy nových mobilných telefónov. Podobne ako iné overené praktiky aj prototypovanie prešlo do metód tvorby softvéru.

Nespokojnosť s dodaným systémom, v lepšom prípade veľké prečerpanie prostriedkov na zladenie očakávaní zákazníka s funkčnosťou, sú neustále problémy, ktorým musia softvérové spoločnosti čeliť. Stále veľa projektov je striktne rozdelená na etapu analýzy a implementácie. Výsledkom analýzy bývajú obsiahle wordové dokumenty o stovkách strán písaného textu, tabuliek a diagramov, ktoré sa nazývajú špecifikácia riešenia. Pred etapou implementácie musí zákazník takýto dokument podpísať a následne programátori začínajú podľa neho implementovať nový systém. Nedá sa však očakávať, že zákazníci budú rozumieť bez patričného tréningu a skúseností všetkým pojmom, výrazovým prostriedkom, schémam a diagramom, nehovoriac o tom, že na prečítanie stoviek strán nemá ani časový priestor. Na druhej strane často zákazníci nemajú jasnú predstavu, čo by mal systém robiť a presne akú funkčnosť by mal poskytovať. Výsledkom bývajú aj veľké sklamania po niekoľkých mesiacoch programovania.

Naučili sme sa, že najlepším dorozumievacím prostriedkom medzi zákazníkom a softvérovým tímom je rozhranie, ktoré zákazníci poznajú dôverne – používateľské rozhranie alebo „obrazovky“, teda najvrchnejšia úroveň softvérového systému. Prototypy tak ukazujú, ako bude používateľ vidieť nový systém. Tradičný prístup je rýchlo nakresliť alebo zostrojiť v programovacom nástroji štvrtej generácie (tzv. RAD – Rapid Application Development) návrhy obrazoviek, zosnímať ich a následne vložiť do špecifikácie ako statické obrázky. Zistili sme však dve nevýhody tohto prístupu:

• obrazovky sa nachádzajú v rozsiahlom dokumente špecifikácie ako obrázky, v ktorom sa strácajú, nie je možné reálne vidieť interakciu požívateľa so systémom (napríklad čo sa stane, keď klikne na tlačidlo vľavo dole) a nie je zrejmý tok obrazoviek (napríklad na akú obrazovku sa dostanem po stlačení tlačidla „Vybrať vozidlo“),
• obrazovky vyzerali priveľmi realisticky.

Druhý bod môže vyznieť paradoxne, ale priveľká realistickosť prototypov obrazoviek je na škodu, pretože u zákazníkov evokuje dojem finálnej aplikácie, a tak majú tendenciu komentovať dizajn obrazoviek („tu treba zväčšiť písmo“, „logo by malo byť posunuté o 2 cm doprava“ a podobne) na úkor konceptov samotných, nehovoriac o tom, že môžu nadobudnúť dojem, že aplikácia je takmer hotová alebo ju bude už čoskoro možné používať.

Aby prototypy obrazoviek vyzerali skutočne iba ako návrhy demonštrujúce aplikáciu, odporúča sa ich kresliť v špecializovaných nástrojoch na to určených, ktorých výstup vyzerá schválne akoby boli nakreslené rukou na papier. Nástroj, ktorý používame v Softecu, je Microsoft Expression Blend SketchFlow. Samotný produkt dostal názov podľa dvoch najvýznamnejších konceptov, ktoré reprezentuje – sketch („akoby kreslený rukou“) a flow(„tok“). Vyskúšať interaktívny prototyp si môžete aj vy.

Prototyp obrazovky Zoznam mostov

Na obrázku 1 je jasne vidieť, že línie a texty prototypu obrazovky sú akoby ťahané a kreslené rukou na papier. Takýmto prototypom zvykne hovoriť aj tzv. low fidelity (prototypy s nízkou vernosťou). Zákazník na prvý pohľad vidí, že sú to iba návrhy, atrapy, ktoré slúžia na komunikáciu s budúcimi používateľmi aplikácie. Pri pripomienkovaní takýchto prototypov zákazníci nezvyknú komentovať dizajnové aspekty, ale sústredia sa na obsahovú a vecnú stránku (napríklad „chýba mi možnosť filtrovať podľa počtu podpier“). Fakt, že nevidia reálne obrazovky, ich nevyzýva k tomu, aby si na základe rýchlosti vyhotovenia prototypov urobili nesprávny úsudok o možnej rýchlosti vývoja skutočnej aplikácie.

Pri vytváraní prototypov je nemej dôležitý tok obrazoviek. V skutočnosti je to jedna z vecí, ktorú majú prototypy odkomunikovať zákazníkom. V SketchFlowe sa preto prototypovanie začína práve definovaním toku obrazoviek (pozri obrázok 2). Analytik začne kresliť na mape toku obrazovky, ktoré pospája podľa možností prechodov medzi obrazovkami.

Tok obrazoviek v paneli SketchFlow map

Veľkou výhodou prototypovania v nástroji SketchFlow je, že takto vytvorené prototypy sú spustiteľné a živé. Do textových polí sa dá písať, rozbaľovacie polia sa rozbaľujú a je možné z nich vyberať položky, tlačidlá reagujú na kliknutie myšou a zobrazujú napríklad dialógové okná alebo presmerujú používateľa na inú obrazovku. Táto možnosť interaktivity prototypov skrýva neskutočnú silu pri spoznávaní požiadaviek zákazníka. Používatelia oveľa ľahšie spoznajú zámery vývojárov a ujasnia si svoje požiadavky.

Po vytvorení je možné prototyp vystaviť ako webovú aplikáciu na internet, prípadne priamo publikovať do SharePointu v rámci firmy. Zákazníci tak môžu veľmi jednoducho začať spoznávať prototyp. SketchFlow podporuje proces revízií prototypov a následné iterácie nových verzií. Zákazníci môžu v internetovej aplikácií vkladať textového poznámky alebo kresliť anotačné značky priamo na obrazovku. Takto vytvorenú spätnú väzbu následne zákazník vyexportuje vo forme XML súboru, ktorý pošle autorom na zapracovanie. Týmto spôsobom je možné iterovať proces ľubovoľne dlho, až pokým zákazník nie je s prototypom spokojný.
Technicky sú v SketchFlowe vytvorené prototypy klasické Silverlightové aplikácie, ktoré sú naštýlované špeciálnymi „sketch“ štýlmi – je to súčasne príklad flexibility renderovania v Silverlighte. Prvky, z ktorých sa skladajú obrazovky (napríklad textové alebo rozbaľovacie polia) sú rovnaké a rovnako sa správajú ako tie, ktoré poznáme z „ozajstných“ aplikácií. Jediný rozdiel je v ich výzore. Za týmto faktom sa skrývajú aj takmer neobmedzené možnosti a veľká rozširovateľnosť prvkov, ktoré sa dajú umiestniť na obrazovku.

Pomocou SketchFlowu sme tak schopní vytvoriť s minimálnymi nákladmi a veľmi rýchlo prototypy obrazoviek, ktoré môžeme ihneď ponúknuť zákazníkovi na interaktívnu revíziu a zozbierať elektronicky spätnú väzbu. Výsledkom je pochopenie obidvoch strán, ktorá je odmenená spokojnosťou zákazníka pri odovzdaní softvéru.

Obr.3 Prototyp obrazovky Zoznam mostov pri revízii zákazníkom