Prototypovanie výzoru webovej aplikácie

Publikoval Michal Kočí dňa 09.07.2008 o 18: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:

  • Microsoft Excel a Microsoft Word, sú si po stránke prototypovania veľmi podobné
  • Microsoft PowerPoint, áno, aj tento sa dá použiť na prototypovanie, a síce preskočím, ale priznám sa, že tento som finálne na prototyp použil
  • Microsoft Visio, nástroj určený na kreslenie diagramov aj prototypov obrazoviek, pre mňa najvačšie sklamanie
  • Visual Studio a konkrétne dizajn windows aj webových aplikácií
  • Papier, teda ručné kreslenie diagramov

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í:

  1. Grid, s dátami alebo bez, niekde pod gridom tlačítko s textom "Nový záznam". Tlačítko môže byť obyčajný obdĺžnik s textom, pretože nepotrebujete, aby sa správalo ako tlačítko. Jeho funkcionalitu síce ukážete ako klikntie na neho, reálne sa ale prezentácia po kliknutí presunie na ďaľší slajd bez ohľadu na to, kde na slajd kliknete. Prečo by ste však klikali inde, keď chcete navodiť atmosféru reálnej funkcionality?
  2. Po kliknutí na tlačítko teda dôjde k prechodu na ďaľší slajd, tento bude zobrazovať formulár na vkladanie dát. Nakreslite si formulár, teda popisky a TextBox-y alebo DropDownList-y alebo iné ovládacie prvky, jednoducho podľa Vašich potrieb. Ovládacie prvky nechajte prázne. Pri tomto slide-e jednoducho oboznámite zúčastnených, že sa užívateľovi zobrazí formulár, do ktorého môže zadať dáta.
  3. Po kliknutí sa predvyplnia vzorové dáta, čo je spôsobené tým, že hneď za predchádzajúci slide umiestnite ďaľší, identický, len s vyplnenými dátami. Ak by ste ilúzia vyplňovania chceli mať dokonalejšiu, môžete slide-ov za seba dať viac a každý ďaľší bude mať vyplnený o jeden prvok viac. Najprv nič, potom jeden TextBox, potom ďaľší, a ďaľší, ... Princíp je Vám teda asi už jasný. Prácu si samozrejme šetríte tým, že slide-y nekresíte znova a znova, ale tým, že vždy okopírujete ten, ktorého zmena je pre Vás najjednoduchšia - teda nakreslíte prázdny a jeho okopírovaním a doplnením dát dostanete slide zobrazujúci vyplnený formulár.
  4. Keď kliknete na tlačítko uložiť, ktoré si mimochodom umiestnite na slide formulára, zobrazí sa Vám opäť Grid, tento raz s jedným riadkom navyše a to so záznamom, ktorý ste práve pridali. Čiže, vezmete prvý slide, okopírujete ho a umiestnite ho za slide s vyplneným formulárom a pridáte do Gridu ďaľší riadok a dáta vyplníte rovnako, ako ste ich vyplnili vo vyplnenom formulári

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...

Mohlo by ťa tiež zaujímať

Páčil sa ti príspevok?

Zdieľaj príspevok alebo si ho odlož na neskôr

Sleduj ma

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.

Komentáre

K tomuto článku nie su pridané žiadne komentáre.

Pridať komentár

Máš niečo zaujímavé povedať k článku? Pridaj to k článku ako komentár. Spam, reklamu alebo inak nerelevantné komentáre okamžite mažem.

Pridanie komentára sa nepodarilo. Oprav si prosím chyby.