Prototypovanie užívateľského rozhrania webových aplikácií

Matej Lauko

Bakalářská práce

Prototypování uživatelského rozhraní webových aplikací

Anotace:

Tématem této bakalářské práce je prototypování, které je část návrhu uživatelského rozhraní webových aplikací. Cílem práce je popsat možnosti prototypování, stejně jako popsat prototypovací proces a jeho výstupy, porovnat vybrané nástroje z nabídky nástrojů na prototypování a vybrat ten, který nejlépe splňuje autorem stanovená kritéria. Také je cílem vytvořit ukázku digitálního prototypu. Přínosem autora je hlavně zhodnocení vybraných nástrojů na prototypování a jejich porovnání, které může být užitečné při rozhodování, kterou aplikaci zakoupit. Dalším přínosem této práce je vytvoření přehledu v oblasti prototypování a návrhu uživatelských rozhraní a popsání vytvoření příkladového prototypu. V úvodní části práce se nachází popis uživatelského rozhraní a webové aplikace, protože tato práce se zaměřuje právě na návrh uživatelského rozhraní webových aplikací. Následuje popis procesu návrhu uživatelského rozhraní, uživatelského zážitku a jeho části použitelnosti, kvůli kterým je nutné prototypovat. V další kapitole je vysvětleno, co znamená prototyp a prototypování a popsány důvody prototypování. Dále je v práci uveden prototypovací proces a různé přístupy k tomuto procesu. V této kapitole jsou dále popsány různé charakteristiky prototypů a dva typy prototypů, papírové a digitální. Další kapitola se věnuje srovnávání vybraných prototypovacích nástrojů. Po stanovení metody porovnávání a formulování kritérií pro porovnávání následuje popis vybraných nástrojů podle zvolených kritérií a určení jejich hodnocení. Na závěr kapitoly je vybrán vítězný nástroj a zhodnoceny porovnávání. V poslední kapitole je uvedena praktická ukázka postupu a výsledku vytvoření digitálního prototypu.

Abstract:

The theme of this bachelor thesis is prototyping, which is a part of the user interface design of web applications. The objective is to describe the options and reasons for prototyping as well as describe the prototyping process and its outcomes, compare selected tools from the prototyping tools available on market and select one that meets the author's criteria the best. The last objective is to create a digital prototype demonstration. The main contribution is the evaluation of the selected tools for prototyping and comparison that can be helpful when deciding which application to purchase. Another contribution of this thesis is the creation of an overview in the field of prototyping and design of user interfaces and also describing the creation of example prototype. In the introductory part is a description of a user interface and web applications, since this thesis is precisely focused on user interface design of web applications. Following is a description of a user interface design process, user experience and its part usability, because of which prototyping is necessary. The next chapter explains what is a prototype and prototyping, and reasons for prototyping are described. Further in thesis a prototyping process is stated witch different approaches to this process. This chapter also describes various characteristics of the prototype and two types of prototypes, paper and digital. The next chapter is devoted to the comparison of selected prototyping tools. After setting out a method of comparison and formulating criteria for comparison a description of selected tools according to selected criteria and determination of their rank follows. Finally, the winning tool is selected the whole comparison is evaluated. In the last chapter a practical demonstration of process and outcome of creating digital prototype is shown.

Abstract:

Témou tejto bakalárskej práce je prototypovanie, ktoré je časť návrhu užívateľského rozhrania webových aplikácií. Cieľom práce je popísať možnosti prototypovania, rovnako ako popísať prototypovací proces a jeho výstupy, porovnať vybrané nástroje z ponuky nástrojov na prototypovanie a vybrať ten, ktorý najlepšie spĺňa autorom stanovené kritéria. Taktiež je cieľom vytvoriť ukážku digitálneho prototypu. Prínosom autora je hlavne zhodnotenie vybraných nástrojov na prototypovanie a ich porovnanie, ktoré môže byť užitočné pri rozhodovaní, ktorú aplikáciu zakúpiť. Ďalším prínosom tejto práce je vytvorenie prehľadu v oblasti prototypovania a návrhu užívateľských rozhraní a popísanie vytvorenia príkladového prototypu. V úvodnej časti práce sa nachádza popis užívateľského rozhrania a webovej aplikácie, keďže táto práca sa zameriava práve na návrh užívateľského rozhrania webových aplikácií. Nasleduje popis procesu návrhu užívateľského rozhrania, užívateľského zážitku a jeho časti použiteľnosti, kvôli ktorým je nutné prototypovať. V ďalšej kapitole je vysvetlené, čo znamená prototyp a prototypovanie a popísané dôvody prototypovania. Ďalej je v práci uvedený prototypovací proces a rôzne prístupy k tomuto procesu. V tejto kapitole sú ďalej popísané rôzne charakteristiky prototypov a dva typy prototypov, papierové a digitálne. Ďalšia kapitola sa venuje sa porovnaniu vybraných prototypovacích nástrojov. Po stanovení metódy porovnávania a formulovaní kritérií pre porovnávanie nasleduje popis vybraných nástrojov podľa zvolených kritérií a určenie ich hodnotenia. Na záver kapitoly je vybraný víťazný nástroj a zhodnotené porovnávanie. V poslednej kapitole je uvedená praktická ukážka postupu a výsledku vytvorenia digitálneho prototypu.

Klíčová slova

Prototypovací nástroj, Prototyp, Webová aplikace, Návrh uživatelského rozhraní, Uživatelské rozhraní

Keywords

Prototyping tool, Prototype, User interface, User interface design, Web application

Klíčová slova

Návrh užívateľského rozhrania, Užívateľské rozhranie, Webová aplikácia, Prototypovací nástroj, Prototyp

Jazyk práce: slovenština

Datum vytvoření / odevzdání či podání práce: 5. 1. 2012

Obhajoba závěrečné práce

• Obhajoba proběhla 26. 6. 2012
• Vedoucí: Jarmila Pavlíčková
• Oponent: Rudolf Pecinovský

Vysoká škola ekonomická v Praze

Bakalářský studijní program / obor:
Aplikovaná informatika / Informatika