Ako prototypovať používateľské rozhrania v nástroji Microsoft PowerPoint. Ako môžeme prototypy prezentovať používateľom ako keby to bola reálna aplikácia s využitím animácií, prechodov medzi oknami, reakcií na kliknutia a pod.
Používateľské rozhranie
Používateľské rozhranie poskytuje človeku priamy kontakt s daným systémom alebo technológiou. Ponúka mu možnosti, ako daný systém ovládať a využívať jeho služby. Práve používateľské rozhranie predstavuje pre človeka prvý kontakt s produktom a má funkciu rozhrania medzi reálnym svetom používateľa a virtuálnym svetom systému.
Prečo prototypovať používateľské rozhrania?
Pre bežného používateľa má práve rozhranie aplikácie alebo systému najväčší význam. Používateľ nevidí do “vnútra” aplikácie, nevníma procesy, ktoré sa dejú na pozadí, on vníma len jej vstupy a výstupy sprostredkované rozhraním. Práve kvalitne navrhnuté rozhranie vie do značnej miery kladne ovplyvniť názor človeka na výsledný produkt. Ako píše Martin Dostál v knihe Základy tvorby používateľského rozhrania, dobré riešenia bývajú zároveň jednoduché. Kvalitné používateľské rozhranie ponúka človeku cestu ako dosiahnuť požadovaný výsledok jednoducho a rýchlo. Malo by byť prehľadné, čisté, bez zbytočných položiek a najmä intuitívne.
A tu vzniká problém. To, čo pre tvorcu aplikácie môže byť jednoduché a samozrejmé, nemusí platiť aj pre zákazníka. Preto je takmer nemožné navrhnúť kvalitné používateľské rozhranie hneď na prvý pokus. Vtedy sa hlási k slovu prototypovanie. Prototypovaním vznikajú jednoduchšie modely používateľského rozhrania, ktoré je možné ukázať zákazníkom alebo testovacím osobám, skúmať ako ho vedia ovládať a diskutovať o možných zmenách a vylepšeniach. Od základných prototypov zobrazujúcich napríklad len jednoduchý sled obrazoviek, ktoré môžu byť len nakreslené na papieri vo forme skíc sa postupne dostaneme k interaktívnym prototypom s fungujúcimi tlačidlami a s približným rozložením ovládacích prvkov, následne k detailnejším prototypom, ktoré sa zaoberajú už aj farebnosťou, písmom a presným rozložením, až kým nevznikne finálne rozhranie, nasaditeľné v produkčnej verzii.
Prečo práve PowerPoint?
V súčastnosti je na trhu množstvo nástrojov určených primárne pre prototypovanie používateľských rozhraní. Ako príklad môžeme uviesť JustInMind, Balsamiq Mockups, Pencil alebo Pidoco (ktorý je predstavený v ďalšom článku tohto čísla Magazínu KPI). Prečo sa teda budeme zameriavať na PowerPoint — nástroj, ktorý nie je primárne určený pre prototypovanie? Podobne, ako uvádza web PowerMockup, môžeme rozhodujúce argumenty zhrnúť do nasledujúcich bodov:
- Je rozšírený, pretože je súčasťou kancelárskeho balíka Microsoft Office.
- Má jednoduché používateľské rozhranie, ktoré je väčšine ľudí známe.
- Je možné vytvárať prototypy bez znalosti programovania.
- Má široké možnosti importu a exportu.
- Podpora animácií a prechodov.
Tieto a ďalšie vlastnosti robia z PowerPoint-u vhodný nástroj na rýchle prototypovanie jednoduchých modelov, ale aj zložitejších a plne funkčných prototypov používateľských rozhraní.
Ako prototypovať v programe PowerPoint
V nasledujúcich častiach si ukážeme základy, ako vytvoriť jednoduché prototypy používateľských rozhraní v prostredí aplikácie PowerPoint rôznymi spôsobmi. Základným predpokladom je samozrejme inštalácia programu Microsoft PowerPoint, ktorý je súčasťou plateného kancelárskeho balíka Microsoft Office. Pre nasledujúci tutoriál som využíval PowerPoint vo verzii 2010, ale vzhľadom na podobnosť aj so staršími či novšími verziami, je možné ho využiť aj pri práci s nimi. Jednotlivé návody sú doplnené obrázkami, videom, prípadne aj výslednými prototypmi, ktoré je možné stiahnuť a vyskúšať si ich.
Jednoduché prototypy s kreslením v PowerPoint-e
Prvý spôsob, ako vytoriť prototyp v PowerPoint-e, je využiť jeho nástroje na kreslenie. Ponúka nám možnosti kresliť a vkladať rôzne tvary, symboly alebo tlačidlá, ktoré v našom prototype budú predstavovať jednotlivé prvky aplikácie. Ako príklad vytvoríme prototyp rozhrania aplikácie, ktorá bude predstavovať diár — bude obsahovať kontakty (ich zoznam, pridávanie nových, editovanie, vymazanie), kalendár a poznámky. Keďže ide o jednoduchý prototyp, nie všetky tlačidlá a ponuky musia byť aktívne, ide len o prvotný návrh, ktorý môžeme prezentovať zákazníkovi. Po otvorení aplikácie PowerPoint si ako prvé zvolíme rozloženie snímky Prázdna. Je to pre nás najvýhodnejšie rozloženie, pretože neobsahuje žiadne predvolené bloky pre text či multimédiá.
Povedzme, že rozhranie našej aplikácie bude mať na boku lištu s menu a vo vnútornej časti okna sa bude zobrazovať obsah jednotlivých obrazoviek. Lišty vytvoríme pomocou vloženia tvaru Obdĺžnik. Jeho farba, prípadne ohraničenie nie sú pri takomto jednoduchom prototype dôležité. Menu bude obsahovať tri tlačidlá — Kontakty, Kalendár a Poznámky. Tieto tlačidlá vytvoríme vložením tvaru Zaobleného obdĺžnika. Samozrejme, ovládacie prvky nemusia byť tvorené len jednoduchými tvarmi. Poslúžiť nám môžu aj rôzne symboly ako napríklad šípky alebo nejaké obrázky. Tlačidlá rozmiestnime do bočnej lišty, pričom môžeme využiť možnosti automatického rozloženia prvkov, ktoré nám PowerPoint ponúka. Jednotlivým tlačidlám pridáme textové popisy vložením Bloku textu. Teraz máme vytvorenú základnú kostru, ktorá bude súčasťou každej obrazovky, preto si ju môžeme pár krát nakopírovať.
Následne vytvoríme jednotlivé obrazovky kontaktov, kalendára a poznámok. Opäť nie je dôležité ísť do detailov, preto na obrazovke kontakty stačí nakresliť tabuľku s pár údajmi o kontaktoch, pridať tlačidlá (pomocou vloženia tvaru) na editovanie, zmazanie kontaktu a vytvorenie nového. Na obrazovke kalendára stačí použiť tabuľku symbolizujúcu kalendár a tlačidlo na pridanie udalosti. Obrazovku poznámok môžeme znázorniť pomocou obdĺžnikov symbolizujúcich papieriky s poznámkami a pridať tlačidlo pre novú poznámku.
Obsah obrazoviek prototypu je v tejto fáze hotový. Teraz je potrebné pridať do prototypu funkčnosť. Najprv je potrebné vypnúť na záložke Prechody voľbu Po kliknutí myšou aby sa používateľ pri náhodnom kliknutí nedostal na ďalšiu obrazovku. Je to veľmi dôležitý krok, ktorý zabezpečí správne fungovanie prototypu. Ďalej je potrebné pridať prepojenia jednotlivým tlačidlám. Klikneme prvým tlačidlom myši napríklad na tlačidlo kalendár a zvolíme možnosť Prepojenie.
Tam si vyberieme možnosť Miesto v tomto dokumente a vyberieme snímku (obrazovku), na ktorú by sa mal používateľ dostať po kliknutí na tlačidlo. Už je vám asi jasné, že princíp prototypov v PowerPoint-e spočíva vo vytvorení jednej snímky pre každú obrazovku aplikácie, presnejšie pre každý krok alebo situáciu, ktorá môže nastať pri používaní aplikácie a chceme ju zahrnúť do prototypu.
Takto postupujeme pri všetkých tlačidlách v menu na jednotlivých obrazovkách. Je vhodné udržiavať si poriadok v poradí obrazoviek aby nenastali zmätky pri nastavovaní prepojení. Funkčnosť prototypu si overíme v režime Prezentácia. Ak sme postupovali správne, na obrazovke sú aktívne len tlačidlá, ktorým sme priradili nejaké prepojenie a kliknutie na nich spôsobí prechod na inú obrazovku tak, ako by to bolo v reálnej aplikácii, pričom pri kliknutí do voľného priestoru by nemala nastať žiadna akcia. K dispozícii je aj video, v ktorom je použitý tento postup.
Ďalej môžeme prototyp dopĺňať o ďalšie funkcie, napríklad pridáme možnosť pridania kontaktu. Skopírujeme si preto základnú obrazovku kontaktov (spolu s aktívnymi prepojeniami) a dokreslíme na ňu okno pre pridávanie nového kontaktu. Tlačidlu Pridať kontakt následne nastavíme prepojenie na tento snímok a potvrdzovaciemu tlačidlu naopak prepojenie na základnú obrazovku kontaktov. Takto môžeme pridávať ľubovoľné rozšírenia prototypu rozhrania, až dokým nebude dostatočne detailný. K dispozícii je aj výsledný prototyp.
Prototypy s pripravenými obrazovkami
Ďalšou možnosťou je vytváranie prototypov s pripravenými obrazovkami. Táto varianta je výhodná vtedy, ak je grafické rozhranie aplikácie známe. Výhodou je, že človek zhotovujúci prototyp nemusí premýšľať nad grafickým vyhotovením. Táto časť práce sa prenáša na grafika. Výsledné obrazovky pripravené v grafických programoch sa len vložia ako obrázky do čistej prezentácie. Je potrebné zvoliť vhodný pomer strán prezentácie v sekcii Návrh→Nastavenie strany.
Ako sa teda zabezpečí funkčnosť prototypu, keď sa do obrazoviek nekreslia žiadne tlačidlá? Jednoducho — cez jednotlivé ovládacie prvky sa prekreslia tvary Obdĺžnik alebo Ovál, pričom sa im nastavia vlastnosti Bez výplne a Bez ohraničenia. Tým sa zabezpečí neviditeľnosť daných tvarov.
Následný postup je zhodný s vytváraním prototypu prvým spôsobom. Jednotlivým ovládacím prvkom sa nastavia prepojenia na konkrétne obrazovky a netreba zabudnúť na vypnutie prechodu po kliknutí myšou. Pre lepšie znázornenie je k dispozícii aj video ukážka. Ako príklad mi poslúžila mobilná aplikácia pre zariadenia s operačným systémom Android — Expozimeter. Tu je možné poukázať na jednu výhodu využívania PowerPoint-u — exportovanie do rozličných formátov. Prototyp je možné uložiť napríklad vo formáte PDF a tým zabezpečiť fungovanie aj na mobilných zariadeniach. Protoypy mobilných aplikácií si zákazníci môžu vyskúšať priamo na obrazovke telefónu či tabletu, pričom je potrebné využiť mód zobrazenia na celú obrazovku. Výsledný prototyp je dostupný na stiahnutie vo formáte PDF aj vo formáte PPTX.
Využitie dostupných galérií
Keďže prototypovanie v Powerpoint-e je pomerne obľúbené a výhodné pre rýchle a jednoduché prototypy, nájdeme na internete dostupné galérie s pripravenými objektami, zväčša vo forme skíc alebo čiernobielych návrhov. Tieto galérie obsahujú pripravené modely okien, ovládacích prvkov, dialógy, ktoré sa vyskytujú na mobilných aj desktopových platformách. Výhodou použitia týchto nástrojov je to, že nie je potrebné nič kresliť, stačí si vybrať požadované prvky, rozmiestniť ich na obrazovky, pridať prepojenia a prípadne poprepisovať textové elementy. Výsledný prototyp bude s použitím týchto šablón hotový za pár minút. Samozrejme musíme obetovať špecifické prvky, ktorými by sme chceli náš prototyp doplniť a odlíšiť ho tak od ostatných.
Výborným príkladom z týchto nástrojov je PowerMockup, ktorého trial verzia je stiahnuteľná na jeho webe. Hoci táto trial verzia neobsahuje veľa komponentov, je postačujúca na vytvorenie si prehľadu a odhadu možností, ktoré daný nástroj ponúka. PowerMockup funguje ako rozšírenie Powerpoint-u, takže je potrebná jeho inštalácia. Odmenou za zdĺhavejší proces inštalácie je naozaj kvalitné spracovanie. Jednotlivé prvky stačí premiestniť z palety nástrojov do našej obrazovky, pričom niektoré komponenty majú aj vlastné ovládacie prvky — napríklad pri použití prepínacích tlačidiel (radio button) máme k dispozícii ovládač, ktorým si rýchlo vyberieme ich počet bez toho, aby sme ich museli viackrát kopírovať po jednom.
Ešte robustnejšie riešenie prináša Keynotopia. Ponúka kompletné šablóny pre mobilné, desktopové aj webové aplikácie od skíc až po detailné farebné návrhy. Podobne ako pri PowerMockup ide o platené riešenie, ale balíček skíc je voľne dostupný v prípade, ak spravíte reklamu produktu vo forme tweetu. Šablóny sú vo forme prezentácií, takže jednotlivé prvky je potrebné kopírovať do vášho prototypu.
Toto bol jednoduchý tutoriál, ktorý by mal čitateľovi pomôcť s jeho začiatkami pri prototypovaní v PowerPoint-e. Princíp je pomerne jednoduchý. Dúfam, že tento tutoriál vám pomohol, prípadne vám ukázal alternatívne možnosti, ako postupovať pri prototypovaní používateľských rozhraní.