Toto je objekt systému MBI.

MBI (Management Byznys Informatiky) je portál obsahující zobecněná řešení v řízení provozu a rozvoje IT, resp. podnikové informatiky.

Pokud máte zájem získat více informací o tomto objektu (vazby na další objekty, přílohy, apod.), ale i získat mnoho dalších užitečných materiálů, můžete tak učinit ZDE / (registrace je bezplatná).

Úloha : MA: Prototypování uživatelského rozhraní
MA: Prototypování uživatelského rozhraní
Kód úlohy

Standardní kód úlohy v MBI.

:
U466H
Autor návrhu úlohy

Jméno a příjmení autora úlohy

:
Franek, O. (etnetera)
Předpokládaná pravděpodobnost užití v praxi

Předpokládaná pravděpodobnost užití úlohy v praxi, hodnoty 0 - 1. Např. 0,7 - úlohu lze využít v 7 z 10 podniků. Hodnoty jsou průběžně testovány a upřesňovány na základě anket a průzkumů.

:
0.3
Charakteristiky úlohy

Charakteristiky úlohy

1. Obsah úlohy
  • Projekt vývoje nové mobilní aplikace má obvykle napjatý harmonogram , ve kterém je složité reagovat na stále se měnící požadavky uživatelů. Prototypování uživatelského rozhraní aplikace umožňuje rapidní ověřování hypotéz tvůrců aplikace.
  • Prototypování je proces tvorby modelu systému. Je to iterativní proces , který předchází vývoji aplikace. Tento proces vycházející z principů user-centered designu .
2. Účel prototypů
  • Prototypy pomáhají najít mezery v zadání , kterých si analytik v prostém textu nevšimne. Obvykle je obtížné s uživateli nebo zákazníkem ověřit, že tým připravující novou aplikaci správně pochopil jejich požadavky. Zároveň také platí, že většina uživatelů neví přesně , co chce, dokud výsledné řešení nevidí. Prototyp je formou specifikace požadavku, kterou uživatel může snadno validovat. Slouží také jako model finálního systému , který jeho tvůrcům umožňuje ověřit hypotézy pomocí uživatelského testování. Z pohledu specifikace požadavků na výslednou aplikaci přináší prototypy tři kategorie benefitů : zlepšení funkčních požadavků, zlepšení interakčních požadavků a jednodušší evoluci požadavků (Carey a Mason 1983). Zejména interakční požadavky se mnohem hůře specifikují, pokud si je zadavatel nedokáže dopředu představit. Protože uživatelské rozhraní hraje v případě mobilních aplikací kritickou roli, je příprava prototypu důležitým krokem při jejím návrhu.,
  • Dalším z benefitů používání prototypů je zlepšení komunikace mezi vývojáři, designery a také uživateli. Podobně jako technika mapování user stories, je i prototypování mobilních aplikací vizuální technikou , která nenabízí tolik prostoru pro odlišnou interpretaci, jako tomu je u prosté textové specifikace požadavků. Prototyp umožňuje jasnou komunikaci mezi skupinami s různými dovednostmi a zkušenostmi. Jedním ze zásadních benefitů prototypování je tedy částečné nahrazení této psané specifikace . Zadavatel aplikace má také mnohem lepší představu, jak bude výsledná aplikace fungovat. A díky dostupným nástrojům si může prototyp prohlédnout přímo na mobilním zařízení. I přestože je příprava prototypu pracná, a tedy i nákladná, snižuje ve svém důsledku pravděpodobnost zvýšených nákladů na vývoj z důvodu přepracovávání už hotových částí aplikace. Předělávat hotový kód je nákladnější než v několika iteracích uživatelského testování odladit prototyp.
3. Typy prototypů
  • V praxi jsou používány prototypy mnoha forem – od technicky nenáročných papírových prototypů až po propracované a z pohledu uživatele téměř funkční systémy. Mnoho organizací používá několik typů prototypů v různých fázích návrhu nové aplikace.
3.1. Prototypy podle věrnosti finálnímu systému
  • Prototypy mohou být obecně rozděleny do dvou kategorií: low-fidelity a high-fidelity . Věrnost (anglicky fidelity) prototypu znamená, jak blízko je prototyp podobě a chování finálnímu systému. Příklad třech různých stupňů prototypu podle vizuální věrnosti navrhované aplikaci ukazuje obrázek . Různé úrovně věrnosti můžeme dosáhnout v následujících oblastech prototypu (Pernice 2016):
    • Interaktivita,
    • Vizuální podoba,
    • Obsah a hloubka navigace.
  • Věrnost prototypu je závislá na jeho účelu . Oba typy prototypů mají v designovém procesu své místo. Pokud je účelem prototypu vizuálně komunikovat designová rozhodnutí do projektového týmu nebo zákazníkovi, bude stačit statický prototyp. Je-li prototyp určen pro uživatelské testování, je vhodné jeho obsah a funkčnost rozpracovat do většího detailu (Řezáč 2016).
  • Low-fidelity prototyp - mají většinou omezenou funkčnost a možnost interakcí. Jsou vytvářeny k ilustraci raných konceptů, designových alternativ a rozložení komponent na obrazovce spíše než k modelování interakce systému s uživatelem (Rudd et al. 1996). Tyto prototypy se mohou skládat ze série statických obrazovek, které mohou být prezentovány samostatně nebo v řadě za sebou a simulovat tak průchod uživatele aplikací. Low-fidelity prototypy mají velmi málo funkcionality – uživatelé mohou vidět, co má aplikace dělat, ale nemusí reagovat na vstupy uživatele. Low-fidelity prototyp obvykle není určen k ovládání uživatelem , ale je prezentován designerem, který umí prototyp řídit. Nejjednodušší forma low-fidelity prototypu je papírový model, který ilustruje obecný průchod jednotlivými obrazovkami a rozmístění ovládacích prvků. S rozvojem nových technologii je možné i takový prototyp udělat interaktivní, např. pomocí aplikace POP neboli Prototyping on paper od společnosti Marvel (Marvel 2017). Aplikací pro chytrý telefon s operačním systémem s Android nebo iOS stačí vyfotit skici navrhované aplikace. Ty je pak možné propojit a vytvořit tak interaktivní prototyp . Vytvoření takového modelu je jen otázka pár hodin. Navíc lze bez větších nákladů dělat zásadní změny v návrhu. Příprava low-fidelity prototypu má v procesu navrhovaném v této práci místo v aktivitě mapování user stories a také hned po ní.
  • High-fidelity prototyp - na opačném pólu v dimenzi věrnosti cílové aplikaci jsou high-fidelity prototypy. Ty jsou na rozdíl od low-fidelity prototypu plně interaktivní. Uživatelé s ním mohou pracovat téměř jako s reálnou aplikací . High-fidelity prototypy mají kompletní sadu obrazovek a umožňují tedy testování navigace a průchodu uživatele jednotlivými obrazovkami. High-fidelity prototypy umožňují testování použitelnosti a přípravu testovacích scénářů dlouho před tím, než je samotná aplikace vyvinuta (Rudd et al. 1996). High-fidelity prototyp může velmi dobře sloužit jako živoucí specifikace pro vývojáře. Kdykoliv vývojář potřebuje pomoc s důležitým designovým rozhodnutím, může situaci nasimulovat v prototypu. High-fidelity prototypy by měly být propracované do detailu , včetně návrhu mikrointerakcí. V procesu návrhu mobilní aplikace představeném v této práci vzniká high-fidelity prototyp na základě ověření low-fidelity prototypu se zástupci uživatelů a je určen pro další kolo uživatelského testování. Zároveň slouží jako hlavní výstup fáze návrhu a představuje živoucí specifikaci výsledné aplikace.
  • Srovnání low- a high-fidelity prototypů - výhody a nevýhody obou typů prototypů sumarizuje tabulka .
3.2. Statické a interaktivní prototypy
  • Statické prototypy - mohou obsahovat např. několik nákresů uživatelského rozhraní , které jsou doplněné šipkami ilustrujícími akce uživatele. Statický prototyp slouží zejména pro osobní prezentaci návrhu uživatelům nebo dalším zúčastněným stranám v projektu (Mark 2009). Statické prototypy fungují dobře u obrazovek, jejichž komponenty nenabízejí mnoho interakcí a nemají větší množství stavů (Bewley 2014). Moderní mobilní aplikace obvykle nemají rozvětvenou a statickou informační architekturu , která by šla dobře zachytit statickým prototypem. Naopak často obsahují mnoho interaktivních komponent. Použití statického prototypu má tedy při návrhu mobilní aplikace omezené možnosti a hodí se spíše do raných fází prototypování uživatelského rozhraní.
  • Interaktivní prototypy - umožňují, jak už název napovídá, interakci uživatele s návrhem aplikace. Interaktivní prototypy je možné nechat uživateli otestovat i bez přítomnosti testujícího (Bewley 2014). Nejen v případě mobilních aplikací interaktivní prototypy mnohem lépe zachycují plánovanou podobu systému. Interaktivní prototyp také dokáže lépe simulovat složitější vícestavové mikrointerakce.
3.3. Vertikální a horizontální a prototypy
  • Vertikální prototyp - je druhem high-fidelity prototypu , který se ovšem omezuje pouze na podmnožinu funkcí aplikace nebo konkrétní scénář. Vybraná část systému je ale kompletně implementována, od uživatelského rozhraní až po nejspodnější datové vrstvy. Tento druh prototypu je obvykle rozšířen o další části a použit jako stavební kámen nové aplikace (Carey a Mason 1983). Vertikální prototypy jsou používány k následujícímu:*
  • Ověření konceptu konkrétní funkcionality a nalezení cesty k její implementaci,*
  • Ukázka konkrétní části aplikace,*
  • Upřesnění návrhu datové vrstvy aplikace,*
  • Zjištění nároků vyvíjené aplikace na: Výpočetní výkon, Kapacitu úložiště, Propustnost sítě, Vstupní a výstupní rozhraní aplikace,
  • Horizontální prototyp - naopak obsahuje jen ty nejdůležitější funkce a nezachází do jejich detailů . Horizontální prototyp obvykle simuluje pouze jednu vrstvu výsledné aplikace, obvykle uživatelské rozhraní (Carey a Mason 1983). To umožňuje testovat uživatelské rozhraní, aniž by musela být hotová kompletní architektura aplikace. Takový prototyp je určen pouze pro účely testování a ověření designových hypotéz. Jeho části nejsou znovu použity při tvorbě aplikace samotné. Horizontální prototypy jsou nejčastěji používány k následujícímu :*
  • Definici rozsahu aplikace z pohledu funkcionality,*
  • Definici funkčního uspořádání ovládacích prvků aplikace,*
  • Představení plánovaného návrhu zákazníkovi,*
  • Podklad pro plánování a určení rozsahu projektu,*
  • Uživatelské testování.
4. Typy prototypovacích nástrojů
  • Prototypovací nástroje se dají rozdělit na dva základní typy – nástroje na bázi obrazovek a na bázi vrstev (Mat 2015). Oba typy nástrojů slouží k přípravě horizontálních prototypů modelujících interakce s uživatelským rozhraním.
  • Nástroje na bázi obrazovek - slouží k  propojení několika obrazovek aplikace. Designer může nadefinovat aktivní oblasti, tzv. hot spoty, které reagují na interakci uživatele . Po stisknutí aktivní oblasti je uživatel přenesen na předem definovanou obrazovku aplikace. Většina nástrojů umožňuje nadefinovat animaci při přechodu na jinou obrazovku. Takovéto nástroje umožňují rychlé prototypování a testování průchodu aplikací. Mezi výhody nástrojů na bázi obrazovek patří také nezávislost na nástroji , ve kterém je samotné uživatelské rozhraní navrženo. Je možné tedy pracovat se statickými obrázky vytvořené v široké paletě nástrojů.
  • Nástroje na bázi vrstev - Prototypovací nástroje na bázi vrstev umožňují animování různých objektů v rámci jedné obrazovky. Každá komponenta uživatelského rozhraní tvoří v prototypovacím nástroji samostatnou vrstvu a může reagovat na dotek uživatele . Příprava kompletního prototypu v takovém nástroji je pracnější než při pouhém propojování obrazovek, ale umožňuje otestovat pokročilejší interakce nebo vyladit načasování animace. Nástroje na bázi vrstev mají obvykle přímo integrované i nástroje na návrh uživatelského rozhraní . Při použití těchto nástrojů tedy můžeme být omezeni ve výběru grafického nástroje.
5. Poznámky, reference:
  • Franek, O. (etnetera): Proces tvorby zadání a správy požadavků pro vývoj mobilní aplikace, VŠE, Praha. 2018,
  • BEWLEY, Nick, 2014. How to Decide Between Static, Lo-Fidelity and Hi-Fidelity Prototypes. Web Design Envato Tuts+ [online] [vid. 2017-12-02]. Dostupné z: https://webdesign.tutsplus.com/articles/how-to-decide-between-static-lo-fidelity-and-hi-fidelity-prototypes--cms-21673
  • CAREY, T.T. a R.E.A. MASON, 1983. Information System Prototyping: Techniques, Tools, And Methodologies. INFOR: Information Systems and Operational Research [online]. 21(3), 177–191. ISSN 0315-5986, 1916-0615. Dostupné z: doi:10.1080/03155986.1983.11731897,
  • MARK, Henry, 2009. Using Prototypes to Improve UI Design - DZone Agile. dzone.com [online] [vid. 2017-12-02]. Dostupné z: https://dzone.com/articles/using-prototype-improve-ui ,
  • MARVEL, 2017. POP - Prototyping on Paper | Mobile App Prototyping Made Easy. Marvel Prototyping [online] [vid. 2017-12-02]. Dostupné z: https://marvelapp.com/
  • PERNICE, Kara, 2016. UX Prototypes: Low Fidelity vs. High Fidelity. Nielsen Norman Group [online] [vid. 2017-12-01]. Dostupné z: https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/
  • RUDD, Jim, Ken STERN a Scott ISENSEE, 1996. Low vs. High-fidelity Prototyping Debate. interactions [online]. 3(1), 76–85. ISSN 1072-5520. Dostupné z: doi:10.1145/223500.223514,
  • ŘEZÁČ, Jan, 2016. Web ostrý jako břitva: návrh fungujícího webu pro webdesignery a zadavatele projektů. ISBN 978-80-270-0644-1.