Přehled a porovnání nástrojů pro prototypování uživatelského rozhraní

Transkript

1 Bankovní institut vysoká škola Praha Katedra informatiky a kvantitativních metod Přehled a porovnání nástrojů pro prototypování uživatelského rozhraní Bakalářská práce Autor: David Tomášek, DiS. Informační technologie, Správce informačních systémů Vedoucí práce: doc. Ing. Alena Buchalcevová, PhD. Praha 01/2014

2 Prohlášení Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a v seznamu uvedl veškerou použitou literaturu. Svým podpisem stvrzuji, že odevzdaná elektronická podoba práce je identická s její tištěnou verzí, a jsem seznámen se skutečností, že se práce bude archivovat v knihovně BIVŠ a dále bude zpřístupněna třetím osobám prostřednictvím interní databáze elektronických vysokoškolských prací. V Písku, dne podpis autora David Tomášek, DiS.

3 Poděkování Rád bych poděkoval vedoucí bakalářské práce doc. Ing. Aleně Buchalcevové, PhD., za její rady, ochotu a trpělivost při zpracování této práce.

4 Anotace Cílem této bakalářské práce je popsat účel a způsob prototypování uživatelského rozhraní a vyhledat a porovnat nástroje na jeho podporu. Práce se dělí na část teoretickou a praktickou. Teoretická část má za úkol přiblížit základní pojmy spojené s uživatelským rozhraním a dále objasnit problematiku prototypování uživatelského rozhraní. Praktická část popisuje a hodnotí vybrané nástroje pro prototypování uživatelského rozhraní, dle předem zvolených vlastností. Výsledkem je doporučení zhodnocených nástrojů. V práci jsou hodnoceny následující nástroje: ForeUI Prototyper Axure GUI Design Studio Klíčová slova uživatelské rozhraní, grafické uživatelské rozhraní, prototypování uživatelského rozhraní, nástroje, vlastnosti, hodnocení

5 Annotation The aim of this bachelor thesis is to describe the purpose and method of user interface prototyping and find and compare tools for its support. The thesis is divided into a theoretical and a practical part. The aim of the theoretical part is to describe the basic concepts associated with user interface and then to clarify the issue of user interface prototyping. The practical part describes and evaluates the selected tools for user interface prototyping according to preset features. The result is a recommendation of evaluated tools. In the thesis the following tools are evaluated: ForeUI Prototyper Axure GUI Design Studio Key words user interface, graphical user interface, user interface prototyping, tools, features, evaluation

6 Obsah OBSAH ÚVOD VYMEZENÍ TÉMATU PRÁCE A DŮVOD VÝBĚRU TÉMATU CÍLE PRÁCE METODA DOSAŽENÍ CÍLE PŘEDPOKLADY A OMEZENÍ PRÁCE STRUKTURA PRÁCE UŽIVATELSKÉ ROZHRANÍ ÚVOD DO UŽIVATELSKÉHO ROZHRANÍ TYPY UŽIVATELSKÝCH ROZHRANÍ Příkazový řádek Textové uživatelské rozhraní Grafické uživatelské rozhraní PRINCIPY NÁVRHU UŽIVATELSKÉHO ROZHRANÍ Jednoduchost Konzistence prvků a aplikace Umístění ovládacích prvků Vizuální prezentace funkcí Prázdné místo Fonty Barvy Důležité prvky PROTOTYPOVÁNÍ UŽIVATELSKÉHO ROZHRANÍ WIREFRAME VS. PROTOTYP Wireframe Prototyp ÚVOD DO PROTOTYPOVÁNÍ UŽIVATELSKÉHO ROZHRANÍ METODIKA HODNOCENÍ NÁSTROJŮ HODNOCENÍ VLASTNOSTÍ NÁSTROJE Přehlednost uživatelského rozhraní a funkcionalita Funkcionalita

7 4.1.3 Doplňkové funkce Dostupná podpora Typ distribuce a zkušební verze Lokalizace Cena POROVNÁNÍ A VYHODNOCENÍ NÁSTROJŮ FOREUI Popis nástroje Přehlednost uživatelského rozhraní Funkcionalita Přidané funkce Dostupná podpora Typ distribuce a zkušební verze Lokalizace Cena Vyhodnocení nástroje PROTOTYPER Popis nástroje Přehlednost uživatelského rozhraní Funkcionalita Přidané funkce Dostupná podpora Typ distribuce a zkušební verze Lokalizace Cena Vyhodnocení AXURE Popis nástroje Přehlednost uživatelského rozhraní Funkcionalita Přidané funkce Dostupná podpora Typ distribuce a zkušební verze Lokalizace Cena Vyhodnocení GUI DESIGN STUDIO

8 5.4.1 Popis nástroje Přehlednost uživatelského rozhraní Funkcionalita Přidané funkce Dostupná podpora Typ distribuce a zkušební verze Lokalizace Cena Vyhodnocení POROVNÁNÍ A VYHODNOCENÍ NÁSTROJŮ ZÁVĚR ZDROJE Webové stránky Knihy Obrázky TERMINOLOGICKÝ SLOVNÍK

9 1 Úvod S informačními technologiemi se v dnešní době setkáváme na každém kroku a postupem času hrají čím dál větší roli v moderním životě každého z nás. Z rozvoje informačních technologií plyne větší snaha, co nejvíce zpříjemnit a zjednodušit práci s danou technologií a způsobem, kterým ji ovládáme, tedy uživatelským rozhraním. Zlepšením uživatelského rozhraní se v raných fázích vývoje softwaru zabývá právě prototypování uživatelského rozhraní. 1.1 Vymezení tématu práce a důvod výběru tématu Bakalářská práce se zabývá prototypováním uživatelského rozhraní desktopových aplikací. V práci je též okrajově zmíněno prototypování i webových a mobilních aplikací. To je z důvodu, že velká část nástrojů pro podporu prototypování není zaměřena pouze na desktopové aplikace, ale umožňuje prototypování též webových a mobilních aplikací. Toto téma jsem si vybral z důvodu, že mě celkově proces vývoje aplikace zajímá. Ze zkušenosti s aplikacemi se špatně navrhnutým uživatelským rozhraním si myslím, že zrovna část vývoje uživatelského rozhraní je jedna z nejvíce opomíjených. I přes fakt, že uživatelsky přívětivá aplikace je pro uživatele mnohdy atraktivnější než ta, co nabízí větší funkčnost. 1.2 Cíle práce Hlavním cílem bakalářské práce je porovnat nástroje pro podporu prototypování uživatelského rozhraní. Výsledkem porovnání nástrojů je doporučit vybraný nástroj či nástroje z různých hledisek, kterými budou nástroje hodnoceny. K dosažení hlavního cíle vedou tři dílčí cíle. Prvním dílčím cílem je seznámit čtenáře s problematikou uživatelského rozhraní a samotného prototypování uživatelského rozhraní. Druhým dílčím cílem je definovat metodiku hodnocení, dle které budou vybrané nástroje hodnoceny. 4

10 Třetím dílčím cílem je vyhledat vhodné nástroje pro hodnocení. Dále provést hodnocení na každém nástroji a porovnat mezi sebou nástroje. 1.3 Metoda dosažení cíle K splnění prvního úkolu jsem čerpal informace primárně z internetových zdrojů, ale také z knih. Z těchto zdrojů jsem poté vybral důležité, relevantní informace. S pomocí též vlastní zkušenosti jsem vytvořil souhrn informací, které i čtenáři, jež se o toto téma nezajímá, pomohou pochopit danou problematiku. K splnění druhého úkolu jsem vytvořil hodnocení dle charakteristických vlastností nástroje. Při výběru vlastností jsem uvážil, které vlastnosti zajímají uživatele, kteří se rozhodují některý nástroj vyzkoušet či koupit. K splnění třetího úkolu jsem vybíral nástroje, které podporují prototypování uživatelského rozhraní desktopových aplikací a to jak nativně, tak pomocí doinstalování chybějících knihoven. Poté jsem provedl hodnocení a porovnání dle metodiky hodnocení. 1.4 Předpoklady a omezení práce Primárně je práce určena těm, kteří hledají vhodný nástroj pro podporu prototypování uživatelského rozhraní. Díky textovému popisu a několika hodnoceným kritériím si mohou zvolit nástroj, který se jim bude hodit při vývoji určitého druhu aplikace. Práce je také určena těm, kteří se začali zajímat o prototypování uživatelského rozhraní. 5

11 1.5 Struktura práce Bakalářská práce je rozdělena na část teoretickou a praktickou. Teoretická část obsahuje tyto kapitoly: Uživatelské rozhraní popisuje pojem uživatelské rozhraní a jeho účel. Přibližuje do dnešní doby, tři nejpoužívanější typy uživatelského rozhraní. Součástí této kapitoly je dále seznam doporučení, která by se měla dodržet při návrhu uživatelského rozhraní. Téma je úzce spojeno s prototypování uživatelského rozhraní. Prototypování uživatelského rozhraní definuje rozdíl mezi vytvořením wireframu a prototypu. Popisuje, co je prototypování uživatelského rozhraní a k čemu slouží. Praktická část obsahuje tyto kapitoly: Metodika hodnocení nástrojů popisuje strukturu hodnocení nástroje a definuje metodiku hodnocení. Porovnání a vyhodnocení nástrojů samotné hodnocení jednotlivých nástrojů, vyhodnocení a porovnání. 6

12 2 Uživatelské rozhraní Tato kapitola seznamuje čtenáře s pojmem uživatelské rozhraní. Dále popisuje tři nejpoužívanější typy uživatelského rozhraní, včetně grafického, o kterém tato práce pojednává. Poslední částí této kapitoly jsou principy návrhu uživatelského rozhraní, které jsou úzce spjaty s prototypováním uživatelského rozhraní. 2.1 Úvod do uživatelského rozhraní Popis uživatelského rozhraní vychází z následujících zdrojů: [1] Uživatelské rozhraní (User Interface (UI)) představuje prostor mezi člověkem a strojem, kde dochází k vzájemné interakci mezi nimi, v určitých mezích můžeme říci, že se jedná o prostředníka v oboustranné komunikaci. Uživatelské rozhraní může představovat například ovládání stroje v průmyslu nebo ovládání auta, tedy volant, pedály, řadicí páku, kterými auto řídíme a ukazatele rychlosti či skutečnost, kterou řidič vnímá kolem vozidla, tedy prvky, které nám poskytují zpětnou vazbu od ovládání. S uživatelským rozhraním se v dnešní době setkáváme na každém kroku. V současnosti je pojem uživatelské rozhraní převážně spojován s informačními technologiemi, kde postupem času prošel vývojem a pojmem uživatelské rozhraní dnes rozumíme hlavně grafické uživatelské rozhraní (GUI). Cílem dobře navrhnutého uživatelského rozhraní je usnadnit a zpříjemnit práci uživatele s danou aplikací či prostředím na počítači, mobilním telefonu, televizi či jinou elektronikou. Prvky zajišťující komunikaci s uživatelským rozhraním se dělí na vstupy a výstupy. Vstupy slouží k ovládání a zadávání příkazů, patří mezi ně myš, klávesnice, dotyková obrazovka, dálkové ovládání atd. Výstupy slouží k získávání odezvy od systému, mezi hlavní představitele patří monitor, nebo projektor. 7

13 2.2 Typy uživatelských rozhraní V této kapitole jsou popsána nejpoužívanější uživatelská rozhraní. Typy uživatelských rozhraní vyhází ze zdroje [1] Příkazový řádek Popis příkazového řádku vychází z následujících zdrojů: [5], [8] Příkazový řádek (Command Line Interface (CLI)) je jedno z nejstarších uživatelských rozhraní používaných u osobních počítačů pro komunikaci s programy či operačním systémem pomocí klávesnice. Pracovní plochu si můžeme představit jako tabulku v Excelu, která je členěna na rastr, přičemž každá buňka má stejnou šířku i délku a obsahuje jeden znak z dané tabulky znaků (např. ASCII). Rozhraní příkazového řádku je rozděleno na 2 hlavní části. První část tvoří řádek pro zadávání příkazů, přepínačů, parametrů a cest s přesně danou strukturou. Do řádku uživatel zadá příkaz a po potvrzení tlačítkem enter se začne příkaz vykonávat. Právě vykonávaný příkaz, popř. jeho výsledek se zobrazuje na druhé části obrazovky na několika řádcích. Pro zadání dalšího příkazu musí uživatel vyčkat na ukončení předchozího příkazu. I přesto, že je toto uživatelské rozhraní přes půl století staré, stále se využívá v operačních systémech Windows či Linuxových distribucí, nebo při konfiguraci síťových zařízení, např. routery a switche Cisco. Nativně příkazový řádek podporuje pouze práci s klávesnicí, avšak můžeme se setkat s podporou myší, např. již u výše zmíněném příkazovém řádku v operačním systému Windows. Ukázka příkazového řádku je na obrázku 2.1. Obrázek 2.1: Příkazový řádek 8

14 2.2.2 Textové uživatelské rozhraní Popis textového uživatelského rozhraní vychází z následujících zdrojů: [6], [9] Textové uživatelské rozhraní (Text User Interface (TUI)) je v podstatě mezistupeň mezi příkazovým řádkem a grafickým uživatelským rozhraním. Pracovní plocha je stejně jako u příkazového řádku rozdělena na buňky, dokonce i kurzor je zobrazen jako jedna buňka. Na rozdíl od příkazového řádku už ale není obrazovka rozdělena na dvě části, ale ovládací i informační prvky se prolínají. Dále oproti zmíněnému příkazovému řádku podporuje aktivní ovládací prvky jako tlačítka, posuvníky, nebo menu, které jsou tvořeny spojením několika buněk a také jak je vidět na obrázku dole, tak přibyla podpora barev i barevného pozadí buňky. Toto rozhraní používal například známý souborový manažer Norton Commander, běžící pod DOS. Dnes se s ním setkáme u teletextu televize či u počítačů při konfiguraci BIOSu, kde už také ubývá na popularitě a je postupně vytlačován uživatelsky atraktivnějším UEFI (GUI). Textové uživatelské rozhraní podporuje zadávání příkazů pomocí klávesnice, nebo či oproti příkazovému řádku ovládání myší. Ukázka textového uživatelského rozhraní je na obrázku 2.2. Obrázek 2.2: Textové uživatelské rozhraní - BIOS 9

15 2.2.3 Grafické uživatelské rozhraní Popis grafického uživatelského rozhraní vychází z následujících zdrojů: [7],[10] První plnohodnotné grafické uživatelské rozhraní (Graphical User Interface (GUI)) bylo představeno na mikropočítači Xerox 8010 v roce Od té doby se z něj stalo nejvíce rozšířené uživatelské rozhraní. Grafické uživatelské rozhraní umožňuje přímou interakci s grafickými prvky pomocí myši, klávesnice, dotykové obrazovky, touchpadu, joysticku, trackballu a jiných. Velká změna oproti příkazovému řádku a textovému uživatelskému rozhraní je, že obrazovka již není pěvně rozvrhnuta na části či buňky. Grafické uživatelské rozhraní dále nabízí více prvků v celé barevné škále, které mohou mít jakoukoliv podobu. Dohromady to dává daleko více možností designérům uživatelského rozhraní, o tom jak chtějí, aby uživatelské rozhraní vypadalo. Kvůli rozrůstajícímu trhu a novým technologiím se s grafickým uživatelským rozhraním setkáváme nejen u osobních počítačů, ale denně také u mobilních telefonů, televizí, herních zařízení, peněžních automatů a dalších. Ukázka grafického uživatelského rozhraní je na obrázku 2.3. Obrázek 2.3: Grafické uživatelské rozhraní MS Word 10

16 2.3 Principy návrhu uživatelského rozhraní Principy návrhu uživatelského rozhraní vychází z následujících zdrojů: [2], [3], [15], [16] Aby se uživatel dobře orientoval v uživatelském rozhraní již od spuštění aplikace a naučil se s ní rychleji a efektivněji pracovat, mělo by být při návrhu uživatelského rozhraní dodrženo několik principů Jednoduchost Uživatelské rozhraní by mělo být čisté bez nadbytečných prvků, aby se jednoduše dalo naučit a pracovat s ním. Správně navrhnuté uživatelské rozhraní nemá působit rušivě a pro uživatele má být takřka neviditelné. Více neznamená lépe, méně prvků na obrazovce neznačí menší funkcionalitu, ale snížení času učení a zvýšení efektivnosti a produktivity. Samotné prvky by měly být stručné a jednoduché, ale na první pohled pochopitelné. Například z ikony by měla být jasná její funkce a neměla by obsahovat zdlouhavé popisky, nejvíce 2-3 slova pro popis prvku. Pokud je popisek delší, nebo ikona není jasně rozlišitelná, je dobré umístit popisek do bubliny, která se zobrazí při najetí na prvek. U známých prvků jako jsou zaškrtávací políčka, seznamy, tlačítka a další by mělo být na paměti, že s těmito prvky uživatelé pracovali v jiných aplikacích a pokud mají odlišný vzhled, prodlužuje to čas učení aplikace. Skloubit tyto vlastnosti dohromady je jedna z nejtěžších věcí uživatelského rozhraní, výsledkem je však příjemnější práce uživatele. Ukázka jednoduchosti je na obrázku 2.4. Obrázek 2.4: Jednoduchost - MS Word 11

17 2.3.2 Konzistence prvků a aplikace Konzistence prvků je jedna z nejvíce důležitých vlastností uživatelského rozhraní. Nesladěný vizuální vzhled prvků může působit zprva nespolehlivým dojmem a také může být matoucí pro uživatele. Prvky by měly být konzistentní z hlediska umístění, tvaru, velikosti, dále pak v barvě a způsobu ovládání. Konzistenci aplikace je dobré dodržovat při vývoji uživatelského rozhraní pro podobnou aplikaci či modernizování starší aplikace. Pokud mají aplikace stejného vývojáře podobné rozmístění důležitých prvků a stejný vzhled, uživatel může nabyté zkušenosti z první aplikace použít u druhé, čímž se zkracuje doba učení a aplikace je atraktivnější pro uživatele. Takový uživatel poté například upřednostní koupi této aplikace než před aplikací jiného výrobce. Ukázka konzistence aplikací od Microsoftu je na obrázku 2.5, 2.6. Obrázek 2.5: Konzistence - MS Word 2007 Obrázek 2.6: Konzistence - MS Excel Umístění ovládacích prvků Důležité a častěji používané prvky by měly být umístěny u levého rohu aplikace, mezi tyto prvky patří otevírání/ukládání souborů, tlačítka zpět/vpřed atd. V pravém horním rohu se pod tlačítka pro ovládání okna umisťují pomocné prvky, například nápověda či hledání. Stavové prvky by měly být umístěny u dolního okraje a potvrzovací prvky u pravého dolního rohu. Pro zpřehlednění aplikace je dobré seskupovat prvky s podobnou funkčností, např. seskupení uspořádání prvků do jedné skupiny (obrázek 2.7) či do rozevíracího seznamu (obrázek 2.8). 12

18 Obrázek 2.7: Skupina prvků Obrázek 2.8: Rozevírací seznam Vizuální prezentace funkcí Grafické uživatelské rozhraní dává na výběr celou řadu možností jak zdůraznit, že určitý prvek vykonává nějakou činnost či funkci. Funkční prvky jako tlačítka lze zdůraznit například použitým fontem, přidáním kontrastního ohraničení, či použitím tří dimenzionálního efektu. Aby uživatel věděl, že toto je tlačítko, je možné dále přidat například animaci či změnu barvy, která se zobrazí při najetí, nebo při kliknutí na prvek. Světlé barvy vnímáme blíže k nám a tmavé naopak dále od nás, aplikováním těchto poznatků na tlačítka lze vytvořit tří dimenzionální dojem, tak že uživateli přijde, jako by opravdu stiskl tlačítko. Ukázka tlačítka na obrázku 2.9. Je toto tlačítko? Tlačítko Tlačítko Obrázek 2.9: Ukázka tlačítka Prázdné místo Při návrhu uživatelského rozhraní se zohledňuje i prázdné místo. S tím by se mělo nakládat strategicky. Pokud bude na pracovní ploše umístěno velké množství prvků, které se budou přímo dotýkat, uživatel se v ní bude špatně orientovat a zabere mu déle času, než najde požadovaný prvek. Pro lepší čitelnost by se měly prvky či skupiny prvků oddělovat prázdným místem a také by se nemělo zapomínat na zarovnání prvků v horizontální či vertikální rovině. 13

19 2.3.6 Fonty Fonty mají informační hodnotu v uživatelském rozhraní. Při výběru je potřeba zohlednit účel a pro jakou cílovou skupinu je aplikace určena. Fonty by se měly volit jednoduché a dobře čitelné, dobrými zástupci pro takové fonty jsou například patkové serif a bezpatkové sans serif. Pro jiné druhy textu je možné použít rozdílné fonty, aby text nesplýval a uživatel se v uživatelském rozhraní dobře orientoval, avšak měla by být zachována určitá konzistence v rámci prvků a aplikace. Serif Sans Serif Barvy Barvy stejně jako u fontů se volí podle účelu aplikace a cílové skupiny. U aplikace pro děti je možné si dovolit větší barevnou škálu, u aplikace např. pro státní úřad se volí méně barev decentnějšího vzhledu. Při výběru barev je dobré zohledňovat kontrast/komplementárnost barev. Různými kontrastními barvami lze přesunout pozornost uživatele na důležitou část uživatelského rozhraní nebo naopak, například na potvrzovací tlačítko. Stejně jako u fontů je důležité dodržet konzistenci Důležité prvky Při návrhu uživatelského rozhraní by mělo být na paměti, že uživatelé dělají a budou dělat chyby. Ty buď plynou z toho, že se mnohdy seznamují s novým prostředím pomocí stylu pokus a omyl, může se jednat o nevhodně zadaný příkaz či data, nebo pouhé překliknutí. V uživatelském rozhraní by měli být upozorněni na důležité položky a také pokud provádí akci, při které dochází ke změně či smazání dat. Vhodné je také viditelně umístit tlačítko pro vrácení poslední operace. 14

20 3 Prototypování uživatelského rozhraní Tato kapitola vysvětluje rozdíl mezi vytvořením wireframu (náčrt; doslovný překlad znamená drátěný model) a prototypu. Dále je v této kapitole úvod do prototypování uživatelského rozhraní. 3.1 Wireframe vs. Prototyp Popis rozdílu mezi wireframe a prototypem vychází z následujících zdrojů: [13], [14] Tyto pojmy jsou totiž často zaměňovány, někteří je dokonce vůbec nerozlišují. I když jsou tyto pojmy velice příbuzné a částečně se i překrývají, tak přesto jsou mezi nimi dosti podstatné rozdíly Wireframe Wireframe slouží k vizualizaci návrhu jedné stránky či obrazovky aplikace. Jeho hlavním účelem je rozvrhnout rozdělení obrazovky a umístit na obrazovku jednotlivé prvky. Wireframe může mít jednoduchou podobu tvořenou černobílými čtverci a obdélníky s textovým popisem na papíru. Může ale být komplexnější a výsledek vytvořený pomocí specializovaného softwaru je poté z pohledu k nerozeznání od naprogramované obrazovky aplikace. Klíčovou vlastností, která jej odlišuje od prototypu je však ta, že wireframe je statický model. Z této skutečnosti si lze představit a odvodit jeho výhody a nevýhody. Ukázka wireframu je na obrázku 3.1. Obrázek 3.1: Ukázka wireframu Hlavní výhody a nevýhody tvorby wireframu, dle [14] poupravené pro desktopové aplikace: Rychlé vytvoření a sdílení (export, obrázek/pdf, , hotovo). Počet dostupných, cenově-efektivních nástrojů. Pixel-perfect návrhy, kterým klient jednoduše rozumí. Klient se může cítit odsunutý od hierarchie a architektury aplikace. 15

21 Interaktivní prvky lze špatně vyjádřit ve statickém formátu Prototyp Dá se říci, že prototyp vychází z wireframu. Hlavním rozdílem je, že prototyp podporuje interaktivní prvky, tudíž je dynamický. Obrazovka už není řešena pouze z pohledu rozmístění prvků, ale také z jejich funkčnosti a provázanosti. To dává větší možnosti, zlepšuje se efektivita práce na aplikaci, účel či záměr aplikace je daleko více zřejmý a v neposlední řadě to vede k většímu zapojení klienta do vývoje softwaru. Ukázka interaktivního seznamu je na obrázku 3.2. Obrázek 3.2: Ukázka prototypu s dvěma stavy 16

22 3.2 Úvod do prototypování uživatelského rozhraní Popis prototypování uživatelského rozhraní vychází z následujících zdrojů: [11] Prototypování uživatelského rozhraní je důležitá technika při vývoji softwaru, která si klade za cíl snížit jak finanční, tak i časové náklady celého vývoje. Prototypování uživatelského rozhraní může být přirovnáno k architektovi či inženýrovi, který nejdříve vytvoří návrh či výkres a až poté se rozhoduje, zda se bude projekt realizovat. Zjednodušeně lze říci, že prototypování uživatelského rozhraní je převedení myšlenky o vizuálním vzhledu softwaru na papír, než započne samotný vývoj softwaru a s ním spojené investování do něj. Zmíněná úspora poté plyne ze získání ucelené představy a odstranění nedorozumění mezi zákazníkem a týmem, který bude vývoj realizovat o tom, jak by mělo uživatelské rozhraní vypadat. To má za následek bezproblémovější vývoj softwaru, méně úprav finálního produktu a samozřejmě i vyšší spokojenost zainteresovaných stran. Náklady na prototyp nejsou nulové, ale v porovnání se samotným vývojem softwaru jsou minimální. Prototypování nemusí být spojeno pouze s vývojem nového softwaru, ale i s vylepšením či změnou stávajícího. Prototypy mohou být vyžadovány kdykoliv během vývoje produktu, avšak nejčastěji se používají ve fázi plánování, než se do práce pustí programátoři. Při tvorbě prototypu by se měl brát ohled na několik aspektů prototypu. Částka vložená do vytvoření prototypu by měla být co nejmenší. To se docílí tím, že prototyp obsahuje pouze důležité části, které jsou potřebné pro samotný vývoj aplikace. Dále je možné cenu snížit vytvořením prototypu bez interaktivních prvků jako efekty při klikání tlačítek, popř. měnící se text. Každý prototyp, který je vytvořen při vývoji aplikace by měl mít přesně definovanou životnost. Ta může mít určené hranice například vytvořením produktu či završením některého zákazníkem určeného dílčího cíle, pro který byl právě ten prototyp určen. S příliš rozsáhlým prototypem, který obsahuje všechny prvky, je obtížné pracovat a upravovat jej, komplikovaný prototyp může působit negativně na členy týmu, které dle něj budou provádět realizaci. Takto obsáhlé prototypy, je rozumné rozdělit na více částí či na skupiny prvků. 17

23 4 Metodika hodnocení nástrojů Nástroje pro hodnocení jsem vybíral ty, které slouží k prototypování grafického uživatelského rozhraní desktopových aplikací. Jak je uvedeno v úvodu a další kapitole, tak část nástrojů pro podporu prototypování není zaměřena pouze na desktopové aplikace, ale umožňuje prototypování též webových a mobilních aplikací, proto je v práci též zmiňuji, avšak nejedná se o hlavní cíl práce. Hodnocení nástroje má tuto strukturu: Základní informace o nástroji Název Verze Výrobce Webové stránky Popis nástroje Popis obrazovky nástroje Popis vytvoření prototypu Hodnocení vlastností nástroje (vysvětleno v následující podkapitole) Vyhodnocení nástroje Při výběru nástrojů, jsem se zaměřil na ty, které podporují prototypování v plném rozsahu. To znamená, že je možné pomocí akcí odkazovat i na samotné prvky. Do výběru jsem však nezahrnul nástroje, které umožňují odkazování pouze na stránky (např. nástroj Pencil Project). Seznam hodnocených nástrojů: ForeUI Prototyper Axure GUI Design Studio 18

24 4.1 Hodnocení vlastností nástroje Nástroje hodnotím dle úrovně vlastností, které poskytují. Příkladem je např. vlastnost funkcionalita, která může být z hlediska úrovně dobrá či špatná. Pro přehlednost jsem vlastnosti nástrojů rozdělil do dvou skupin, podle vztahu k nástroji: První skupinu tvoří vlastnosti, které lze přiřadit k samotnému nástroji, který je již nainstalovaný a lze s ním tedy pracovat. Tyto vlastnosti poskytují uživateli informace o vzhledu a možnostech daného nástroje. Mezi takové vlastnosti patří: přehlednost uživatelského rozhraní funkcionalita přidané funkce Druhou skupinu reprezentují vlastnosti, které se vztahují k nástroji spíše z obchodního hlediska. Tyto vlastnosti hrají roli pro uživatele, jež se už rozhoduje, zda některý nástroj vyzkoušet či koupit. Mezi taková kritéria patří: dostupná podpora typ distribuce a zkušební verze lokalizace cena Hodnocení jednotlivých vlastností nástroje je tvořeno slovním popisem, který vychází z popisu aplikace a vlastní zkušenosti s aplikací. Celkové hodnocení nástroje je též popsáno slovně. 19

25 4.1.1 Přehlednost uživatelského rozhraní a funkcionalita První velice důležitou vlastností je přehlednost uživatelského rozhraní. S jistým odstupem se dá říci, že přehlednost uživatelského rozhraní nástroje hodnotíme dle kapitoly o principech návrhu uživatelského rozhraní. I přesto, že se hodnocení týká subjektivního pohledu uživatele, který nástroj hodnotí, dává čtenáři alespoň nahlédnutí, jak se s nástrojem pracuje a co od něj očekávat. Přehlednost uživatelského rozhraní zahrnuje: zda uživateli trvá dlouho, než se v nástroji zorientuje od jeho spuštění obtížnost nalezení požadovaného prvku či funkce Funkcionalita Další velice důležitou vlastností je funkcionalita nástroje. Funkcionalitu nástroje hodnotím z hlediska dostupných prvků a funkcí. Dále funkcionalitu hodnotím, dle obtížnosti vytváření prototypu. Funkcionalita zahrnuje: dostupné prvky a funkce možnosti úpravy prvků a funkcí obtížnost vytváření prototypu možnost výstupu aplikace (PDF, obrázky, ) Doplňkové funkce Kromě prototypování uživatelského rozhraní desktopových aplikací, mohou nástroje nabízet různé přidané funkce, které mohou být pro některé uživatele užitečné. Doplňkové funkce zahrnují: podporu prototypování uživatelského rozhraní webových aplikací podporu prototypování uživatelského rozhraní mobilních aplikací 20

26 další dostupné rozšíření nástroje Dostupná podpora Dále hodnotím nástroj dle dostupné podpory ze strany výrobce nástroje. Dostupná podpora zahrnuje: poskytnuté výukové materiály podpora poskytnutá zákazníkům pravidelnost aktualizací Typ distribuce a zkušební verze Typ distribuce zkoumá, zda je aplikace Freeware, Shareware, či jiná. To znamená, jestli si můžeme aplikaci volně stáhnout na stránkách výrobce, či za účelem jejího používání musíme nejdříve zaplatit licenční poplatek. U placených distribucí je velice důležité, zda nástroj nabízí zkušební verzi, aby bylo možné si zvolený nástroj vyzkoušet před tím, než do něj budeme investovat. Pokud je zkušební verze k dispozici, je dále důležité, zda ji lze jednoduše stáhnout z webových stránek výrobce a vědět jakým způsobem je zkušební verze omezena (dobou užívání, funkčně omezena, oboje zmíněné) Lokalizace Velká část nástrojů pro prototypování uživatelského, používá výchozí jazyk angličtinu. I když není podpora českého jazyka důležitá např. pro programátora, který se v technické angličtině orientuje dobře, tak na druhou stranu může být užitečná pro méně zkušeného uživatele. 21

27 4.1.7 Cena Cena je zmíněna mezi posledními vlastnostmi i přes to, že je pro většinu uživatelů na prvním místě. Jednotlivec, který se teprve seznamuje s problematikou prototypování uživatelského rozhraní má nastavené jiné limity, než firma zaměřující se na zakázkový vývoj softwaru. S cenou nástroje je též spojena kvalita vlastností, od aplikací s velkým cenovým rozdílem, nelze čekat funkčnost na stejné úrovni či totožnou podporu ze strany výrobce. 22

28 5 Porovnání a vyhodnocení nástrojů V následující kapitole provádím hodnocení na 4 nástrojích, kde struktury popsané v předešlé kapitole. 5.1 ForeUI Název: ForeUI Verze: 3.50 Výrobce: Webové stránky: EaSynth Solutions ForeUI slouží k vytváření náčrtů, wireframů a prototypů pro desktopové a webové a částečně i mobilní aplikace. Vývoj nástroje začal na začátku roku 2009 a je dodnes obohacován o nové aktualizace. Obrázek 5.1: Hlavní okno nástroje ForeUI 23

29 5.1.1 Popis nástroje Uživatelské rozhraní se skládá z několika částí, které dále popisuji dle směru čtení obrazovky: Horní lišta Na horní liště jsou umístěny prvky pro manipulaci se soubory, tlačítka na vracení operací a přepínače pro možnosti přichycení prvků. Posledními, avšak nejvíce zajímavými položkami na horní liště jsou tlačítka slideshow a spuštění simulace (Run Simulation). Levý panel Levá strana uživatelského rozhraní přísluší tabulce dostupných prvků a obrázků. Můžeme si zde též vyobrazit strukturu stran/obrazovek prototypu. Pracovní plocha Pracovní plocha se nachází uprostřed obrazovky, umisťujeme na ni všechny prvky. Pravý panel Pravý panel slouží primárně k úpravě vlastností prvků. Spodní lišta Na dolní liště jsou umístěny prvky pro stránkování a nastavení pracovní plochy. Dále tu nalezneme seznam pro změnu tématu prvků a tlačítko pro vytváření a editování chování/akcí. Popis vytvoření prototypu: Po spuštění nabídne ForeUI téměř 50 nejpoužívanějších prvků grafického uživatelského rozhraní. I když prvků není v základu velký počet, lze mezi nimi filtrovat dle tříd, nebo je možné vyhledat požadovaný prvek pomocí zadání slov. Prvky se umisťují na pracovní plochu tažením či kliknutím na prvek a následně na pracovní plochu. Pokud chceme umístěný prvek upravit, jednoduše jej označíme a nabídka s vlastnostmi prku se ihned zobrazí. Pomocí vlastností lze upravovat jeden či více prvků najednou a to z hlediska umístění ve vrstvách, zarovnání, pozice, rozměrů, barev, textu a dalších specifických vlastností pro daný typ prvku. Vzhled všech prvků na obrazovce můžeme modifikovat pomocí zvolení tématu na spodní liště, ten v základu nabízí témata Hand Drawn, Mac OS X, Windows 7, Windows XP a Wireframe. K vytvoření dynamického prototypu slouží tlačítko chování (behaviors) na spodní liště, které po kliknutí zobrazí pás ve spodní části pracovní plochy. Pomocí něho můžeme vytvářet akce, 24

30 které se provedou např. po stisku tlačítka. K vytvoření akce není potřeba žádný návod, celý proces je jednoduchý a má pouze 3 kroky 1. zvolení prvku, který spouští akci, 2. vytvoření události, kterým se akce aktivuje, 3. definování akce, která se má provést. Po vytvoření prototypu si jej můžeme dynamicky vyzkoušet pomocí spuštění simulace (run simulation), který vygeneruje prototyp v HTML Přehlednost uživatelského rozhraní Uživatelské rozhraní je velice příjemně a přehledně navrhnuto. K rozmístění prvků nemám žádnou výtku, vše potřebné, co by mělo být na obrazovce je přítomno, proto hledáním neztratíte žádný čas navíc. Uživatel s určitou znalostí angličtiny, který se doposud nesetkal s podobnými nástroji, nebude mít ve ForeUI problém s orientací Funkcionalita ForeUI nabízí dostatek prvků a funkcí pro vytvoření funkčního prototypu. Možností, jak upravit jednotlivé prvky či skupiny prvků je velké množství a jsou doslova po ruce. K vytvoření interaktivních prvků je k dispozici řada možností a práce s nimi je velice jednoduchá a přehledná. Nástroj umožňuje vygenerování prototypu v HTML5. Uložení prototypu je možné ve formátu *.4ui (ForeUI Plot File), který je specifický pouze pro tento nástroj. Kromě zmíněného uložení nabízí nástroj statický výstup pomocí obrázku či pdf Přidané funkce ForeUI se prezentuje, jako nástroj pro vytvoření prototypu pro jakoukoliv aplikaci či webovou stránku. Což hodnotím z části proveditelné, vzhledem k dostupným prvkům a funkcím. Funkcionalitu nástroje je možné rozšířit prvky, ikonami či tématy, které jsou ke stažení na webových stránkách nástroje. Nástroj lze také rozšířit o tvorbu vlastních témat. 25

31 5.1.5 Dostupná podpora Pro podporu nástroje je dostupný blog a fórum. Výukové materiály jsou dostupné na webových stránkách nástroje. Ty se skládají z dokumentace, která popisuje samotný nástroj a práci s ním. Dále z interaktivních ukázek prototypů aplikací, které byly vytvořeny právě v tomto nástroji. Nástroj je aktualizován zhruba jednou měsíčně, kdy sebou přináší nové funkce i opravu chyb Typ distribuce a zkušební verze Distribuce ForeUI je shareware s dostupnou zkušební verzí. Zkušební verzi je možné získat přes přímý odkaz na stránkách nástroje, není potřeba ani registrace. Zkušební verze je buď v podobě instalačního souboru či jako online demo, které lze spustit pomocí systému s podporou Javy. Omezení zkušební verze je pouze na 15 dní, po uplynutí této doby je možné se zkušební verzí stále pracovat, ale budete se muset obejít bez možnosti uložení práce, veškerého exportování, včetně spuštění simulace Lokalizace Český jazyk není v současné době podporován nástrojem. Na webových stránkách se lze dočíst, že česká lokalizace je částečně hotova. V době psaní práce hledali překladatele, kdo by v práci pokračoval Cena Cena jedné licence ForeUI začíná na přiměřených 150$ (v době psaní práce 3 033Kč při kurzu 20,22Kč/$). Je umožněna též koupě více licencí najednou, při koupi tří a více licencí dostáváte automaticky slevu. Při koupi deseti licencí sleva tvoří 10%, při koupi padesáti licencí je sleva 30%. Studentům je nabízena sleva 50%. Nakoupením licence dostanete jeden rok aktualizací spolu s permanentním používáním nástroje. To znamená, že jakmile skončí platnost licence, nebudete moci nahrát nejnovější 26

32 aktualizaci, ale nástroj budete moci dále používat ve verzi, která byla vydána před vypršením licence. Pro další aktualizace nástroje je nutné licenci obnovit Vyhodnocení nástroje Za cenu kolem 3000Kč dostanete nástroj, který je velice přehledný a nabízí dostatečnou funkcionalitu pro vytvoření náčrtů, wireframů a prototypů desktopových a webových aplikací. Práce s nástrojem je jednoduchá a celkově se mi s ním pracovalo pohodlně, takže jej doporučuji hlavně začátečníky. 27

33 5.2 Prototyper Název: Prototyper Verze: Pro Edition 5.6 Výrobce: Webové stránky: Justinmind Prototyper nativně podporuje vytváření wireframů a prototypů pro webové a mobilní aplikace. Nástroj i přesto dávám do porovnání, jelikož je velice zajímavý a knihovny se tématy Windows či Mac lze jednoduše doinstalovat přímo z oficiálních stránek nástroje. Obrázek 5.2: Hlavní okno nástroje Prototyper 28

34 5.2.1 Popis nástroje Uživatelské rozhraní se skládá z několika částí, které dále popisuji dle směru čtení obrazovky: Horní lišta Horní lišta se skládá ze skupin ovládacích prvků, které umožňují manipulaci se soubory, vrácení poslední akce, změnu text, zarovnání a další. Levý panel Levý panel nástroje slouží k zobrazení dostupných prvků pro vytvoření prototypu. Pracovní plocha Pracovní plocha se nachází uprostřed obrazovky, umisťujeme na ni všechny prvky. Pravý panel Pravý panel nástroje má 3 části. První část je seznam, kde jsou zobrazeny všechny stránky prototypu. Druhá část jsou 2 záložky, kde můžeme upravovat vlastnosti prvků a vytvářet či upravovat chování prototypu. Poslední částí je seznam všech použitých prvků na aktivní stránce prototypu. Popis vytvoření prototypu: Po spuštění aplikace a zvolení velikosti pracovní plochy, dle účelu prototypu, můžeme s nástrojem začít pracovat. V základu nástroj nabízí klasický počet prvků, které jsou rozděleny do skupin, dle jejich funkcionality. Mezi prvky můžeme i vyhledávat pomocí zadání slov. Prvky umisťujeme na pracovní plochu kliknutím a tažením na požadované místo. Pokud chceme umístěný prvek upravit, můžeme tak učinit uprostřed pravého panelu pod záložkou vlastnosti (properties). Zde lze upravovat velikost prvku, jeho umístění, pozadí, text, odsazení a další. Na rozdíl od předešlého ForeUI není možné změnit téma jednoho či více prvků. Vytvoření dynamického prototypu je umožněno přes záložku událostí (events), která je umístěna vedle záložky vlastnosti. Pro vytvoření události nejprve označíme požadovaný prvek na pracovní ploše, který bude spouštět událost a zvolíme přidání události (add event). Zobrazí se nám okno, kde můžeme nahoře zvolit typ události, který ji spouští, např. kliknutí. Na panelu vlevo si následně můžeme vybrat, co se stane po uskutečnění události. Zajímavé je tlačítko přidání podmínky (add a condition). Událost tak můžeme podmínit výrazem, např. pokud hodnota prvku bude v určitém rozmezí, nebo lze porovnávat i stav dvou a více prvků. 29

35 Po vytvoření prototypu jej spustíme pomocí tlačítka simulace (simulate), které nám zobrazí funkční prototyp v novém okně Přehlednost uživatelského rozhraní Uživatelské rozhraní je dobře navrhnuto, avšak kvůli velkému počtu prvků a funkcí na obrazovce, trvá chvíli, než se v ní uživatel zorientuje. Pro nalezení některých funkcí je nutno hledat nápovědu na internetu Funkcionalita Prototyper nabízí dostatek prvků a funkcí pro vytvoření funkčního prototypu. Nástroj nabízí mnoho možností jak prvky upravovat. Vytváření interaktivních prvků je jednoduché a nabízí mnoho variant. Přes funkci v nástroji je možné funkční prototyp vygenerovat v novém okně. Dynamický prototyp je možno ukládat pomocí HTML, či formátu *.vp, který je specifický pro tento nástroj. Statické obrázky prototypu lze ukládat do Wordu, PDF či ve formě jednotlivých obrázků Přidané funkce Jak už jsem zmínil, nástroj Prototyper slouží pro vytváření wireframů a prototypů pro webové a mobilní aplikace. Funkcionalitu nástroje je možné rozšířit knihovnami s prvky a ikonami, které jsou ke stažení na webových stránkách nástroje. 30

36 5.2.5 Dostupná podpora Pro podporu nástroje je dostupné fórum. Výukové materiály lze najít na webových stránkách nástroje, ty se skládají z několika návodů, které popisují práci s nástrojem. Z hlediska aktualizace nástroje se jedná o nepravidelné obsáhlé balíky nových funkcí a oprav Typ distribuce a zkušební verze Prototyper je distribuován dvěma typy aplikací. První typ je Pro Edition s dostupnou zkušební verzí. Zkušební verzi je možné bez registrace stáhnout na stránkách nástroje přes přímý odkaz. Zkušební verze je omezena používáním na 30 dní a nabízí kompletní funkcionalitu nástroje. Druhý typ je Free Edition, která je zdarma. Oproti prvnímu typu je z velké části omezena funkcionalita. Pokud se bavíme o distribuci tohoto typu, tak už se nedá říci, že podporuje prototypování uživatelského rozhraní, ale náčrty a wireframy Lokalizace Nástroj je dostupný pouze v anglickém jazyce. Podpora českého jazyka není plánována Cena Při koupi nástroje Prototyper Pro Edition je možno vybrat z dvou možností. První možností je licence na jeden rok aktualizací spolu s permanentním používáním nástroje. Tato licence stojí 495$ (v době psaní práce zhruba Kč při kurzu 20,22Kč/$). Druhá možnost je licence, kterou v sobě zahrnuje aktualizace, ale je možno ji používat pouze po určenou dobu. Tato licence stojí 29$ (586Kč) měsíčně a při koupi 12 měsíců pouze 19$ (384Kč). 31

37 5.2.9 Vyhodnocení S nástrojem Prototyper se mi pracovalo dobře, byl jsem až překvapen škálou nabízených možností v porovnání s ForeUI. Vzhledem k obsáhlé funkcionalitě, kterou nemusí někteří ocenit, a také vyšší ceně nástroje ( za roční licenci), jej doporučuji spíše pokročilým uživatelům. 32

38 5.3 Axure Název: Axure Verze: RP Pro 7.0 Výrobce: Webové stránky: Axure Software Solutions Nástroj Axure slouží k vytváření wireframů a prototypů pro desktopové, webové a mobilní aplikace. První verze Axure byla vydána v roce Speciální vlastnost Axure je široká nabídka funkcí pro práci v týmu. Obrázek 5.3: Hlavní okno nástroje Axure 33

39 5.3.1 Popis nástroje Uživatelské rozhraní se skládá z několika částí, které dále popisuji dle směru čtení obrazovky: Horní lišta Horní lišta se skládá z ovládacích prvků, které umožňují manipulaci se soubory, vrácení poslední akce, generování prototypu, úpravu textu, zarovnání a další. Levý panel Levý panel nástroje má dvě důležité části. První část je seznam stránek prototypu. Druhá část je seznam s dostupnými prvky, které můžeme umisťovat na pracovní plochu. Pracovní plocha Pracovní plocha se nachází uprostřed obrazovky, umisťujeme na ni všechny prvky. Pravý panel Pravý panel nástroje má tři části. První část slouží pro vytváření chování prvků. V druhé části můžeme upravovat vlastnosti jednotlivých prvků. Poslední část je seznam s prvky na zvolené stránce prototypu. Popis vytvoření prototypu: Nástroj Axure nabízí v základní verzi okolo 40 prvků, které jsou rozděleny do několika skupin dle vlastností. Prvky můžeme filtrovat dle knihoven či mezi nimi vyhledávat pomocí zadání slov. Prvky se umisťují na pracovní plochu pomocí stlačením levého tlačítka myši a tažením na požadované místo na pracovní ploše. Pro rozlišení prvků mezi sebou, což je důležité např. při vytváření událostí, doporučuji prvek vpravo nahoře nazvat, jelikož nástroj nepopisuje prvky automaticky. Umístěný prvek či skupiny prvků je možno upravit, pomocí vlastností v pravém panelu nástroje. Zde se nacházejí dvě záložky. Pomocí záložky styl (style) můžeme upravit prvek z hlediska umístění, velikosti a dalších vlastností, které se nacházejí také na horní liště. Pomocí druhé záložky vlastností (properties) můžeme změnit prvek z hlediska efektů, které se zobrazí při najetí na prvek myší, kliknutí prvku a zvolení či zrušení prvku. K vytvoření dynamického prototypu slouží záložka interakce (interactions) v pravém panelu. Zde se nám po zvolení prvku, který bude událost spouštět, zobrazí tři základní akce pro spuštění události, pro zobrazení dalších akcí slouží tlačítko více akcí (more events). Po zvolení spouštěcí akce se nám zobrazí okno. V tomto okně můžeme podmínit spuštění 34

40 události tlačítkem přidat podmínku (add condition). Z levého panelu poté volíme události, které se mají provést. Pokud chceme upravit vlastnosti zvolené události, můžeme tak učinit na pravém panelu. Vytvořený interaktivní prototyp je možno si zobrazit pomocí tlačítka ukázka (preview) na horní liště nástroje Přehlednost uživatelského rozhraní Uživatelské rozhraní se částečně podobá nástroji Prototyper. Mimo to je uživatelské rozhraní dobře a přehledně navrhnuto. Stejně jako u nástroje Prototyper, trvá nějaký čas, než se v nástroji zorientujete Funkcionalita Nástroj Axure nabízí dostatečné množství prvků a funkcí pro vytvoření interaktivního prototypu. Prvky lze jednoduše upravovat i z hlediska efektů, které se zobrazí např. při najetí na prvek. Jedinou výtku při vytváření prototypu bych měl k obtížnosti vytváření událostí, která je vyšší než u předchozích nástrojů Prototyp je možné vygenerovat ve webovém prohlížeči. Při spouštění událostí či procházení stránek v prototypu je nutno počítat s delší odezvou, než tomu je u předchozích nástrojů. Dynamický prototyp je možno ukládat pomocí HTML či formátu *.rp, který je specifický právě pro tento nástroj. Statickou verzi je možné uložit pomocí obrázků Přidané funkce Nástroj Axure dále slouží k vytváření wireframů a prototypů pro webové a mobilní aplikace. Funkcionalitu nástroje je možné rozšířit knihovnami s prvky či ikonami, které jsou dostupné přes odkazy na stránkách nástroje. Je nutno počítat s tím, že některé knihovny nejsou pro aktuální verzi 7.0 a jiné knihovny jsou i placené. 35

41 5.3.5 Dostupná podpora Pro podporu nástroje je dostupné fórum. Výukové materiály lze najít na webových stránkách nástroje, ty se skládají z psaných návodů a několika základních video tutoriálů, které popisují práci s nástrojem. Aktualizace nástroje jsou pomocí menších, ale častých opravných balících. Zhruba půlročně až ročně jsou vydávány větší aktualizace obsahující mnoho funkčních změn Typ distribuce a zkušební verze Axure je distribuován dvěma typy aplikací. První typ je Pro, která poskytuje veškerou funkcionalitu nástroje. Tento typ aplikace je doporučen pro větší týmy. Druhý typ je Standart, která neposkytuje oproti typu Pro několik funkcí. Mezi takové patří rozšířené možnosti dokumentace či týmové práce v projektu, kde jediný dokument může upravovat větší množství uživatelů, např. přes síťové úložiště. Oba zmíněné typy aplikace nabízí zkušební verzi, které lze stáhnout přes přímý odkaz na stránkách nástroje. Zkušební verze v obou typech aplikace vyprší po 30 dnech používání Lokalizace Nástroj je dostupný pouze v anglickém jazyce. Podpora českého jazyka není plánována. 36

42 5.3.8 Cena Koupí nástroje dostanete permanentní používání nástroje včetně nových aktualizací. Aplikace typu Pro začíná na ceně 589$ (v době psaní práce zhruba Kč při kurzu 20,22Kč/$). Při koupi 5 a více licencí je sleva 50$ na jednu licenci, tedy 539$ (10 900Kč) na licenci. Aplikace typu Standart začíná na ceně 289$ (5 844Kč). Při koupi 5 a více licencí je sleva 20$ na licenci, tedy 269$ (5 439Kč) na licenci Vyhodnocení Práce s nástrojem Axure byla příjemná a bezproblémová. Nástroj je přehledný a nabízí dostatečnou funkcionalitu pro vytváření prototypů. Cena nástroje se může zdát vyšší, ( za licenci) avšak licence není limitována ročními aktualizacemi jako podobné nástroje. Nástroj Axure bych doporučil spíše do práce v týmu, kvůli jeho specifickým vlastnostem. 37

43 5.4 GUI Design Studio Název: GUI Design Studio Verze: Výrobce: Webové stránky: Caretta Software Nástroj GUI Design Studio slouží k vytváření wireframování a prototypování desktopových, webových a mobilních aplikací. První verze GUI Design Studio byla vydána v roce Obrázek 5.4: Hlavní okno nástroje GUI Design Studio 38

44 5.4.1 Popis nástroje Uživatelské rozhraní se skládá z několika částí, které dále popisuji dle směru čtení obrazovky: Horní lišta Horní lišta se skládá z ovládacích prvků, které umožňují manipulaci se soubory, vrácení poslední akce, generování prototypu, úpravu textu, zarovnání a další. Dále je tu možné zobrazit stránky prototypu ve formě záložek. Pracovní plocha Pracovní plocha se nachází uprostřed obrazovky, umisťujeme na ni všechny prvky. Pravý panel Na pravém panelu nástroje je umístěno několik záložek. Tyto záložky obsahují zobrazení všech prototypů, dále seznamy prvků, ikon, poznámek a scénářů, které můžeme umisťovat na pracovní plochu. Popis vytvoření prototypu: Nástroj GUI Design Studio nabízí veliké množství prvků grafického uživatelského rozhraní. Prvky jsou rozděleny do skupin, dle funkcionality. Prvky se umisťují na pracovní plochu pomocí kliknutí levého tlačítka myši a tažením na pracovní plochu. Pokud chceme prvek či skupinu prvků upravit z hlediska pozice, můžeme tak učinit pomocí horní lišty. Pokud chceme provést změnu z hlediska samotného prvku, klikneme pravým tlačítkem myši na prvek a zvolíme vlastnosti (properties), či dvakrát klikneme na požadovaný prvek. Vytvoření interaktivních prvků prototypu je zcela odlišné od nástrojů, které jsem doposud popisoval. V nástroji GUI Design Studio nehledejte tlačítko chování či akcí. Veškeré interaktivní prvky se tvoří pomocí tlačítka režim vytváření propojení (make connection mode) a rozbalovacího seznamu vedle, který definuje typ propojení. Oba tyto prvky, lze nalézt na horní liště. Kliknutím na tlačítko vytváření propojení můžete vytvářet akce pomocí kliknutí na prvek, který akci spustí a následně na prvek, který akci dokončuje. Mezi těmito prvky se následně vytvoří šipka, která značí zmíněné propojení a jeho typ. Propojením můžeme vytvořit např. odkazování na jinou stránku či vytvoření rozbalovacího seznamu při kliknutí na prvek menu. 39

45 Vlastnosti propojení lze měnit stejně jako u prvků v okně, které se zobrazí po kliknutí pravého tlačítka myši a zvolení vlastností či pomocí dvojkliku levého tlačítka. Ve vlastnostech propojení jsou dva důležité atributy. Prvním je spouštěč akce, např. kliknutí levého tlačítka, či přejetí myši přes prvek. Druhým atributem je typ propojení, tedy, co se má stát s prvkem na který akce odkazuje, mezi takové atributy patří např. zobrazení vyskakovacího okna, či zobrazení a změnu okna. Spuštění interaktivního prototypu můžeme provést tlačítkem spuštění prototypu (run prototype) na horní liště Přehlednost uživatelského rozhraní Uživatelské rozhraní je jednoduché a dobře se s ním pracuje. Obrazovka není rozdělena na větší počet částí jako u ostatních nástrojů. Obsahuje pouze horní lištu, pracovní plochu a pravý panel. Díky této skutečnosti je uživatelské rozhraní přehledné Funkcionalita Nástroj GUI Design Studio nabízí celou řadu prvků a funkcí pro vytvoření funkčního prototypu. Vzhled a umístění prvků lze měnit dle několika vlastností. Vzhled celého prototypu lze změnit v nastavení. Vytvoření prototypu je odlišné od ostatních nástrojů. Mimo tvorby chování a akcí v okně je přístup GUI Design Studia více interaktivní, což má jako výhodu jednoduchost, na druhou stranu práce se složitou aplikací může pro někoho působit nepřehledně. Nástroj podporuje tvoření podmínek. Nástroj umožňuje vygenerování prototypu v novém okně. Uložení dynamického prototypu můžeme ve formátu *.gui, který je specifický pouze pro tento nástroj. Uložení statického prototypu je možný pomocí obrázků. 40