Uživatelská rozhraní Průvodce problematikou konstruování GUI Eduard Sojka URO, Léto 2003/4 VŠB – Technická univerzita Ostrava

2 K čemu průvodce? Abychom už na samém začátku pochopili podstatu problému a koncepci předmětu.

3 Tři pilíře realizace rozhraní Design Reali- zace Testo- vání GUI Modely AlgoritmyExperiment Výzkum

4 „Několik slov“ o designu (detaily později) Vím dost o tom,  kdo bude uživatelem (věk, vzdělání, atd.)  co přesně potřebuje,  jak bude s produktem pracovat? Studujte potřeby uživatele. Vy sami jím nejspíše nebudete! To vše zjistit nemusí být ani rychlé ani levné.

5 Design - „ Úvaha o penězích“ Náklady na návrh a realizaci a náklady na pozdější úpravy jsou protichůdné! Náklady Péče věnovaná návrhu Na pozdější úpravy Na návrh a realizaci Optimum

6 Design - stavební prvky GUI (1) Okno Menu „Label“ Vstup

7 Design - stavební prvky GUI (2) Rámec (frame)

8 Design - stavební prvky GUI (3) Tlačítko „Check button“ „Radio button“

9 Design - stavební prvky GUI (4) Text Rolovací lišty

10 Design - stavební prvky GUI (5) „Listbox“ „Combo box“ „Spin box“

11 Design - stavební prvky GUI (6) Kartotéka („notebook“)

12 Design - stavební prvky GUI (7) Plátno („canvas“)

13 Design - stavební prvky GUI (8) „Obrázková tlačítka“

14 Design - stavební prvky GUI (9) Různé

15 Design - stavební prvky GUI (10)

16 Design - stavební prvky GUI (11)

17 Design - stavební prvky GUI (12) Prohlížeč HTML stránek

18 O realizaci rozhraní GUI (1) Dva krajní postupy realizace celého programu  Od algoritmu řešení problému samotného  Od rozhraní (zejména GUI) (Pozor, žádný z nich ale není správně.)

19 O realizaci rozhraní GUI (2) Příklad: Vytvořme program řešící kvadratickou rovnici Dobře víme, že platí (Toto popisuje algoritmus řešení problému samotného.)

20 O realizaci rozhraní GUI (3) Od algoritmu (zastaralé?): 1) Zapíšeme algoritmus 2) Doplníme vstupy a výstupy int main( void ){ float a, b, c, d, x1, x2; d = b*b - 4.0f*a*c; if (d < 0) return 0; x1 = 0.5f*(-b + sqrt(d))/a; x2 = 0.5f*(-b - sqrt(d))/a; return 1; } printf("Zadej hodnoty a, b, c:\n"); scanf("%f %f %f", &a, &b, &c); getchar(); printf("Reseni: x1=%f x2=%f\n", x1, 2);

21 O realizaci rozhraní GUI (4) Diskuse postupu od algoritmu:  Často použit tehdy, když je algoritmizace vlastního problému obtížná (matematika, fyzika, technické výpočty).  Program může mít dlouhou životnost (vstupy a výstupy jej nekomplikují)  UI vyhovuje zpravidla jen podmíněně. Program lze však na lepší UI/GUI snadno napojit dodatečně. Lze jej proto považovat ze vcelku dobrý.

22 O realizaci rozhraní GUI (5) Od rozhraní s využitím vizuálního nástroje – nové?

23 O realizaci rozhraní GUI (6) Od rozhraní s využitím vizuálního nástroje (2)

24 O realizaci rozhraní GUI (7) Diskuse postupu od rozhraní:  Zejména použití vizuálních nástrojů svádí k „promíchání“ algoritmu řešení vlastního problému s GUI. To je zpravidla nežádoucí.  S ohledem na předchozí bod může být obtížné takové programy udržovat. (Uvažte, že vizuální nástroj, v němž jste program vytvořili, nemusí být po čase dostupný. Uvažte také že, k programu bude možná po čase zapotřebí vytvořit zcela nové rozhraní.)

25 O realizaci rozhraní GUI (8) Jak tedy rozhraní realizovat?  Řešení úlohy samotné konstruovat (co nejdéle) bez rozhraní. Kombinovat oba postupy!  Rozhraní konstruovat (co nejdéle) bez řešení úlohy samotné.  Nakonec obojí propojit. Výjimka: Aplikace které kromě vstupů a výstupů skoro nic jiného nedělají.

26 ! Oddělte co nejvíce řešení problému od GUI ! (různí lidé, různý čas, různé soubory, …) Obrázky jsou ilustrační.

27 O realizaci rozhraní GUI (10) Kdy má maximální oddělení zejména smysl?  Když lze předpokládat delší životnost řešení problému samotného.  Rozhraní se může několikrát během doby vyměnit (požadavky na vzhled GUI se rychle vyvíjí)  Také nástroje pro konstruování GUI se mohou během doby vyměnit. Pak lze zpravidla očekávat následující:

28 Nástroje pro konstruování GUI (1)  Obecné programovací jazyky (C, Java) + knihovny pro vytváření GUI (MFC, Qt, wxWindows, Awt, Swing, …).  Skriptovací (scénařové) jazyky (Tcl, Python, Perl, …). Ty řeší navíc problém sestavování aplikací z částí. Navštivte prosím  

29 Proces realizace GUI (1) Hrubá specifikace funkcí (slovně) Nákresy na papíře Modely na počítači Realizace GUI a jeho vestavění do aplikace

30 Proces realizace GUI (2) Doopravdy i na papíře:

31 Testování GUI (1)  Kontrola expertem  Dotazování uživatelů  Testování s uživateli

32 Testování GUI (2) Kontrola expertem  Kontrola splnění obecně platných pravidel a pravidel platných v organizaci  Kontrola konzistence: Jednotný vzhled obrazovky, jednotná terminologie, formát vstupů, barevnost  Procházka: Simulace práce uživatele provedená expertem

33 Testování GUI (3) Dotazování uživatelů Dotazy typu:  V případě chyby mi chybové hlášení vždy pomohlo k lokalizaci chyby.  V menu jsem příkazy vždy nacházel na místech, kde jsem je očekával. …. Odpovědi od určitě ano do určitě ne.

34 Testování GUI (4) Testování produktu s uživateli Pro vzorek uživatelů se hodnotí:  Jak dlouho trvá, než se naučí provádět vybrané operace.  Jak dlouho jim pak provádění operací trvá.  Počet chyb (chybných pokusů).  Jak dlouho si naučený postup zapamatovali.  Subjektivní dojem uživatelů.