Publikoval Michal Kočí dňa 9.7.2008 o 20:52 v kategórii Ostatné
Či už pri vývoji internetovej alebo intranetovej aplikácie, často je vhodné pripraviť prototyp výzoru takejto aplikácie. Ukázať užívateľom, ako približne bude aplikácia vyzerať, ako na seba budú nadväzovať jednotlivé obrazovky či čo bude ich obsahom. V tomto príspevku sa skúsim pozrieť na niektoré aplikácie, ktoré su bežnou súčasťou .Net vývojára a skúsim porovnať ich možnosti prototypovania výzoru (pozor, nie dizajnu, na to si kludne použite Photoshop, alebo iný sofistikovaný nástroj).
Keď som sa už po niekoľký krát rozhodoval, aký že to nástroj zvolím na tvorbu prototypu aplikácie (pojmom prototyp budem v tomto príspevku považovať prototyp výzoru, nie funkcionality ani dizajnu), povedal som si, že by bolo na čase skúsiť použiť rôzne nástroje, ktoré mám k dispozícii a skúsim ich porovnať, aby som pri budúcom prototype nemusel zase tráviť čas výberom toho pravého orechového.
Ako štandardný vývojár pre platformu .Net mám samozrejme k dispozícii Visual Studio .Net. Tiež mám k dispozícii Microsoft Office (Word, Excel, PowerPoint, ...), vrátane Microsoft Visio. A v neposlednom rade mám k dispozícii dve zdravé ruky - nástroje, ktoré som používal pri predchádzajúcich prototypoch. Porovnával som teda nasledovné nástroje, respektíve ich časti:
Poďme sa teda pozrieť bližšie na uvedené nástroje, na to kde sú ich prednosti či naopak kde sú ich slabiny. A to pekne jeden po druhom.
Microsoft Excel a Microsoft Word
| Vlastnosť | Popis |
| Ovládacie prvky | Relatívne malá množina, chýba napríklad Grid |
| Rýchlosť | Rýchle prototypovanie |
| Naplnenie dátami | Je možné |
| Dynamika | Áno, ale treba ju naprogramovať |
| Tlač | Treba vytvoriť screenshot a ten vytlačiť |
| Zmeny | Jednoduché |
U Wordu a Excelu sa dá prototypovať tvorbou formulára vo Visual Basicu, spôsobom drag&drop. Toto je v zásade jednoduché a zvládne to aj neprogramátor, bohužiaľ množina ovládacích prvkom je docela malá a čo je najzávažnejším nedostatkom, ktorý tieto aplikácie vyradil z môjho zoznam nadobro je absencia Gridu. Dal by sa možno na formulár vložiť ActiveX komponent, ale už by to nebolo také pohodlné.
Microsoft PowerPoint
| Vlastnosť | Popis |
| Ovládacie prvky | Žiadne, všetko treba nakresliť pomocou tvarov (elipsy, štvorce, ...) |
| Rýchlosť | Formulár pomaly, jeho modifikácie relatívne rýchlo pri použití copy&paste |
| Naplnenie dátami | Áno, do tvarov sa dajú vpisovať texty |
| Dynamika | Áno, použitím hyperlinkových odkazov, ktoré prepínajú na iný slide |
| Tlač | Áno |
| Zmeny | Áno, niektoré sú pracné, niektoré naopak jednoduché |
Ako som spomenul vyššie, PowerPoint sa stal u mňa nakoniec víťazom. Dôvody pre jeho výber boli v zásade dva - možnosť dynamiky (alebo použitím hyperlinkových odkazov, alebo jednoducho prechodom na nasledujúci slide) a jeho nekonečné možnosti ovládacích prvkov.
Tým, že si ovládacie prvky vlastne kreslíte sami, nie je problém nakresliť si Grid, čo je v zásade len tabuľka, teda textové popisky usporiadané v riadkoch a stĺpcoch a naplniť si tento Grid ľubolnými dátami a vlastne aj ľubovolnými ovládacími prvkami. Potrebujete mať v Gride DropDownList? Nič jednoduchšie - nakreslite si biely štvorec s čiernym okrajom (tým vlastne nakreslíte TextBox) a do pravej časti vložte šipku ukazujúcu smerom dole. Potrebujete CheckBox? Vložte zase "TextBox", zmenšite ho a vpíšte do neho písmeno X. Vidíte kam smerujem? Musíte si síce ovládacie prvký nakresliť sami, ale ako náhle máte ovládací prvok nakreslený, tak ho už budete len kopírovať presne tam, kde ho chcete mať.
Potrebujete mať v Gride dáta? Alebo ho potrebujete mať bez dát? Jednoducho nakreslite jeho hlavičku, teda umiestnite za seba popisky s názvami stĺpcov a pod ne umiestnite popisky zarovnané rovnako ako nadpisy a do nich umiestnite dáta. Koľko riadkov vložíte, toľko záznamov máte. Na prvý pohľad to môže znieť pracne, ale verte mi, že po pr minútach si na takéto "dizajnovanie" tak zvyknete, že nové a nové obrazovky budete navrhovať rýchlosťou blesku.
Ako teda v PowerPointe funguje dynamika? V podstate máte dve možnosti. Prvá, jednoduchšia, je, ak výsledok, teda prototyp, budete prezentovať Vy, pričom scenár máte dopredu presne určený, krok za krokom. Potom si usporiadate slide-y v takom poradí, v akom potrebujete a na prezentácii prototypu len pustíte prezentáciu a spolu s Vaším komentárom ju predvetiete slide za slide-om.
Napríklad pridávanie položky do zoznamu (do Gridu) spravíte nasledovnými slide-ami v nasledovnom poradí:
Takýmto spôsobom pripravíte prezentáciu, prototyp, ktorému slabšie povahy naozaj uveria a budú mať pocit, ako keby ste pracovali priamo s nejakou aplikáciou (verte mi, naozaj sa to stalo). Cieľom však nie je presvedčiť užívateľov, že pracujete s reálnou aplikáciou. Cieľom je, aby si spravili čo najjasnejšiu predstavu o tom, ako bude aplikácia vyzerať, keď bude naprogramovaná.
Druhá možnosť dynamiky je, že sa nespoliehate na prechod zo slide-u na ďaľší, bezprostredne po ňom nasledujúci, ale dovolíte prejsť z jedného slajdu na iný, na ten na ktorý je to vhodné. Vtedy sa používajú na prechod medzi slide-ami hypertextové odkazy. Keď takýto prototyp spravíte a spravíte ho poriadne, môžete ho dať aj užívateľom na preklikanie. Samozrejme ale, tvorba takéhoto prototypu je trochu náročnejšia, nie však nemožná.
Prototyping v PowerPointe nie je niečim, na čo som došiel, je to docela používaná technika, o čom sa môžete presvedčiť ak trochu pohľadáte cez Google. Mne sa veľmi ľúbil článok Interactive Prototypes with PowerPoint, v ktorom nájdete aj ukážkou druhej možnosti prototypovania, teda tej, ktorá používa hyperlinky.
Microsoft Visio
| Vlastnosť | Popis |
| Ovládacie prvky | Primerané množstvo, ale iba Windows ovládacích prvkov |
| Rýchlosť | Rýchle prototypovanie |
| Naplnenie dátami | Áno, ale napríklad Grid nie |
| Dynamika | Nie |
| Tlač | Áno |
| Zmeny | Jednoduché |
Microsoft Visio je aplikácia, ktorá ma zo všetkých najviac sklamala. Mala by to byť aplikácia na kreslenie rôznych diagramov a teda aj UI, napriek tomu kreslenie formulárov je vo Visiu ako za trest. Navyše kresliť sa dajú iba Windows formuláre, čomu zodpovedá množina ovládacích prvkov a Grid sa nedá naplniť dátami, čo považujem za docela kritická (ne-)funkcionalitu.
Visual Studio - Dizajn windows formulára
| Vlastnosť | Popis |
| Ovládacie prvky | Široká množina windows ovládacích prvkov |
| Rýchlosť | Rýchle prototypovanie |
| Naplnenie dátami | Áno, niektoré ba v runtime |
| Dynamika | Áno, ale treba programovať |
| Tlač | Treba vytvoriť screenshot a ten vytlačiť |
| Zmeny | Jednoduché |
Síce je tento príspevok o návrhu prototypu UI webovej aplikácie, ak však netrváte na tom, aby prototyp naozaj vyzeral ako webvá aplikácia, potom rozhodne zvážte aj túto možnosť. Totižto, ak potrebujete do prototypu namodelovať Grid, ktorý by bol naplnený dátami, tak sa mu docela dosť podobá ListView, ktoré viete dátami naplniť aj v design móde a nemusíte tak programovať. Stačí ho prepnúť do Detail módu a potom vyšpecifikovať stĺpce a zadať dáta. Navyše s jednoduchým programovaním - otváranie nových formulárov - viete nasimulovať dynamiku. Ak teda netrváte na výzore podobnom webovej aplikácii, potom zvážte túto možnosť, v opačnom prípade ju hneď škrtnite zo zoznamu kadidátov.
Visual Studio - Dizajn web stránky
| Vlastnosť | Popis |
| Ovládacie prvky | Široká množina webových ovládacích prvkov |
| Rýchlosť | Rýchle prototypovanie |
| Naplnenie dátami | Áno, niektoré ba v runtime |
| Dynamika | Áno, ale treba programovať |
| Tlač | Áno |
| Zmeny | Jednoduché |
Toto riešenie je z hľadiska možností samozrejme najbližšie finálnemu výzoru webovej aplikácie. Bohužial však, na niektoré "funkcionality" prototypu sa Vám môže stať, že budete musieť programovať, napríklad na pridanie dynamiky. Ak chcete prototyp nezahodiť, ale ďalej použiť, potom je toto pre Vás možnosť ako stvorená. V opačnom prípade je pravdepodobné, že sa Vám iný spôsob bude hodiť viac, napríklad PowerPoint, najmä vďaka tomu, že pri nej nemusíte ani trochu programovať.
Ručné kreslenie
| Vlastnosť | Popis |
| Ovládacie prvky | Žiadne, všetko treba nakresliť, takže záleží len na Vašej šikovnosti a schopnosti kresliť |
| Rýchlosť | Rýchle prototypovanie |
| Naplnenie dátami | Áno |
| Dynamika | Nie |
| Tlač | Už je v papierovej podobe |
| Zmeny | Treba prekresliť |
Ručné kreslenie je moje obľúbené, na papier totiž nakreslíte všetko a keď nie ste extra nešikovný, tak to aj vyzerá dobre. Nevýhodou však je, že sa výzor nedá jednoducho zmeniť a treba ho prekresliť (alebo kresliť ceruzkou a používať gumu). Nevýhodou je tiež dynamika.
Zhrnutie
Tento príspevok si nekládol za cieľ za Vás rozhodnúť, pre ktorú metódu sa rozhodnúť, ale skôr porovnať niektoré ich črty. Rozhodnutie je len na Vás. Ako som sa priznal vyššie, momentálne sa mi najviac pozdáva použitie PowerPointu, pričom ja si najskôr výzor nakreslím na papier, ide to rýchlo a spravím si tak sám jasnejšiu predstavu o UI. Až následne to prekreslím do PowerPointu, kde sa s tým dá poriadne vyhrať.
A čo Vy? Robíte tiež prototypy? A aký nástroj používate? Aké máte skúsenosti? Ak máte chuť, podeľte sa s Vašimi praktikami v komentároch...
Ak nechceš premeškať príspevky ako je tento, sleduj ma na Twitteri, alebo ak máš RSS čítačku, môžeš sledovať môj RSS kanál.