Uživatelská rozhraní. úvod. Eduard Sojka. Léto 20011/12 VŠB Technická univerzita Ostrava

Transkript

1 Uživatelská rozhraní úvod Eduard Sojka Léto 20011/12 VŠB Technická univerzita Ostrava

2 O čem předmět bude? (1) O rozhraní ( interfejsu ) mezi počítačovým programem a jeho obsluhou. O jeho vzhledu (jak by mělo vypadat) O jeho realizaci (jak jej naprogramovat) O jeho testování (jak zjistit, zda vyhovuje uživateli) 2

3 O čem předmět bude? (2) Hlavně o designu a konstrukci grafického rozhraní programů = GUI 3

4 O čem předmět bude? (3) Také ale trochu o designu www stránek 4

5 Co ponecháme více či méně stranou? (1) Dnes již poněkud historická rozhraní 5

6 Co ponecháme stranou? (2) Pro nás zatím poněkud speciální rozhraní 6

7 Co ponecháme úplně stranou? (3) Zatím poněkud futuristická rozhraní 7

8 Co ještě ponecháme stranou? (4) Další speciální rozhraní Komunikace mluvenou řečí Komunikace gesty A jiná 8

9 HCI: Historie (1) ENIAC (1943), IBM 9

10 HCI: Historie (2) Mark I (1944), Harvard University 10

11 HCI: Historie (3) Stretch (1961), IBM 11

12 HCI: Historie (4) Zuse Z11, D 1956/57 12

13 HCI: Historie (5) Univac, USA

14 HCI: Historie (6) Elektronkový klopný obvod (Univac) 14

15 HCI: Historie (7) Mainlufterl, Heinz Zemanek, Wien, 1957/8, tranzistory 15

16 HCI: Historie (8) Honeywell Bull, F

17 HCI: Historie (9) PDP 11, Digital, kolem roku

18 HCI: Historie (10) Analog,? 18

19 Dnešní situace při konstrukci GUI? Dnes pro konstrukci GUI máme: Velmi slušné vzory (programy) s nimiž denně pracujeme Velmi slušné knihovny prvků GUI (rozumně předvolené hodnoty, nativní vzhled, ) Důsledek: Nejhrubší chyby by se dnes už vyskytovat neměly. Přesto ale (Předpokládá se samozřejmě, že v implementaci chyby nejsou.) 19

20 Bývá GUI vždy v pořádku? (1) Komentář k následujícím ukázkám: Největší problémy vznikají tehdy, jestliže produkt neodpovídá stylu práce uživatele (např. často používané příkazy jsou schovány hluboko ve víceúrovňových menu, nelogická struktura menu, nelogická struktura dotazů, ). To ale nebylo možné zachytit na snímky Pro návrh GUI je typické říkat, co je špatně 20

21 Bývá GUI vždy v pořádku? (2) Barvy? 21

22 Bývá GUI vždy v pořádku? (3) Udělejte inventuru veškeré komunikace vašeho programu s uživatelem. Rozdělte komunikaci na části, které budou tvořit jednotlivá menu, dialogová okna, případně stránky. Obrázek ukazuje, proč nemůžete barvy z opačných konců spektra vidět ostře současně. 22

23 Bývá GUI vždy v pořádku? (4) 23

24 Bývá GUI vždy v pořádku? (5) Co se stane, když je pozadí složité: Vidíte bílé jezdce? Vidíte také černé? Daří se vám vidět bílé i černé najednou? Vidíte ptáka na obrázku vpravo? (M.C. Escher) M.C. Escher italský grafik 24

25 Bývá GUI vždy v pořádku? (6) Autor tohoto formuláře nechtěně realizoval přesně to, co M.C. Escher dělal záměrně (složité pozadí). 25

26 Bývá GUI vždy v pořádku? (7) Nekonzistentní vzhled ikon na tlačítkách, ikony špatně dešifrovatelné. 26

27 Bývá GUI vždy v pořádku? (8) 27

28 Bývá GUI vždy v pořádku? (9) MS Word 28

29 Bývá GUI vždy v pořádku? (10) Z N N PS 29

30 Bývá GUI vždy v pořádku? (10) 30

31 Bývá GUI vždy v pořádku? (11) MS Win 95 31

32 Bývá GUI vždy v pořádku? (12) KatIS VŠB MS Visual Basic

33 Bývá GUI vždy v pořádku? (13) Python,

34 Bývá GUI vždy v pořádku? (14) Barborka,

35 Grafický design GUI: Test Proč je auto vlevo? Proč je pozadí rozmazané? Proč jsou svodidla nahoru? Proč jde stín dopředu?

36 Bývá GUI vždy v pořádku shrnutí (1) Typický problém konstrukce UI / GUI: Naprogramováno bývá bezchybně (samozřejmé, ale jen to nestačí) Přesto se ale uživateli vůbec nemusí líbit. Nutí ho pracovat nepohodlně, pro něj nezvykle, nelogicky (Naštěstí pro autory produktu - si při tom uživatel dnes ještě často myslí, že chyba je na jeho straně.) 36

37 Bývá GUI vždy v pořádku shrnutí (2) Vývoj GUI vyhovujícího uživateli je obtížný. (Sledujte, jak se GUI postupem času měnilo u některých význačných produktů.) 37

38 Pohledy na konstruování GUI Eduard Sojka VŠB Technická univerzita Ostrava

39 Tři pilíře tvorby GUI GUI Design Realizace Testování Modely Algoritmy Experiment Výzkum 39

40 Člověk a UI/GUI Co při konstrukci rozhraní sledovat? 40

41 Člověk a UI/GUI Co při konstrukci rozhraní sledovat? 41

42 Několik slov o designu (detaily později) Studujte potřeby uživatele. Vy sami jím nejspíše nebudete! 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? To vše zjistit nemusí být ani rychlé ani levné. 42

43 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 Na pozdější úpravy Na návrh a realizaci Optimum Péče věnovaná návrhu 43

44 O realizaci rozhraní UI / 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ě.) 44

45 O realizaci rozhraní UI / GUI (2) Příklad: Vytvořme program řešící kvadratickou rovnici 2 a x b x c=0. Dobře víme, že platí 2 d=b 4 a c, b± d x 1,2=. 2a (Toto popisuje algoritmus řešení problému samotného.) 45

46 O realizaci rozhraní UI / 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; printf("zadej hodnoty a, b, c:\n"); scanf("%f %f %f", &a, &b, &c); getchar(); 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; printf("reseni: x1=%f x2=%f\n", x1, 2); return 1; } 46

47 O realizaci rozhraní UI / 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 ku podivu považovat ze vcelku dobrý. 47

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

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

50 O realizaci rozhraní UI / 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í.) 50

51 O realizaci rozhraní GUI (8) Jak tedy rozhraní realizovat? Kombinovat oba postupy! Řešení úlohy samotné konstruovat (co nejdéle) bez rozhraní. 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í. 51

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

53 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 53

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

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

56 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 56

57 Design GUI: Firemní pravidla

58 Design GUI: Firemní pravidla

59 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. 59

60 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ů. 60

61 K obsahu předmětu (1) Témata přednášek: O návrhu vzhledu a chování GUI. Tvorba GUI s využitím Qt 61

62 K obsahu předmětu (2) Témata cvičení: Tvorba GUI s využitím vyšších jazyků (skriptovacích) jazyků (Python, Tcl) Tvorba GUI v C++ a Qt Tvorba GUI v Java a Swing 62

63 K obsahu předmětu (3) Projekt: Zvolit zadání (nikoli složité, řešíme jen GUI). Provést návrh vzhledu rozhraní. Jeden exemplář realizovat ve vyšším jazyce {Python, Tcl} a jeden nižším jazyce {Java C} s využitím knihoven prvků GUI { Swing Qt }. 63

64 K obsahu předmětu (4) Materiály Poznámky k přednáškám (tyto slajdy ) Návody do jednotlivých cvičení a šablony Doplňková nepovinná literatura (manuály, knihy, články) Různé instalační soubory 64