Bankovní institut vysoká škola Praha Katedra informatiky a kvantitativních metod

Bankovn´ı institut vysoká ˇskola Praha Katedra informatiky a kvantitativn´ıch metod

Inovace studijn´ıho informaˇ cn´ıho syst´ emu Diplomová práce

Autor:

Bc. Jan Murin Informaˇcn´ı technologie a management

Vedouc´ı práce:

Praha

Ing. Vladim´ır Beneˇs, Ph.D.

28. dubna 2015

Prohl´ aˇ sen´ı Prohlaˇsuji, ˇze jsem diplomovou práci zpracoval samostatnˇe a v seznamu uvedl veˇskerou pouˇzitou literaturu. Sv´ ym podpisem stvrzuji, ˇze odevzdaná elektronická podoba práce je identická s jej´ı tiˇstˇenou ˇ a verz´ı, a jsem seznámen se skuteˇcnost´ı, ˇze práce se bude archivovat v knihovnˇe BIVS dále bude zpˇr´ıstupnˇena tˇret´ım osobám prostˇrednictv´ım intern´ı databáze elektronick´ ych vysokoˇskolsk´ ych prac´ı.

V Praze, 28. dubna 2015

..........................

Bc. Jan Murin

Podˇ ekov´ an´ı Dˇekuji vedouc´ımu diplomové práce Ing. Vladim´ıru Beneˇsovi, Ph.D. za nasmˇerován´ı a cenné rady, které mi pomohly pˇri psané této práce. Dále dˇekuji rodinˇe a pˇrátel˚ um za jejich neutuchaj´ıc´ı podporu bˇehem mého celého studia.

Anotace Prvn´ı ˇca´st práce je zamˇeˇrena na popis metod, které se pouˇz´ıvaj´ı pro anal´ yzu a následn´ y návrh uˇzivatelského rozhran´ı. Souˇcást´ı práce je struˇcn´ y popis tohoto nového a stále se vyv´ıjej´ıc´ıho oboru. V dalˇs´ı jsou teoretické poznatky a metody aplikovány na vylepˇsen´ı uˇzivatelského rozhran´ı univerzitn´ıho studijn´ıho informaˇcn´ı sytému. Kl´ıˇ cov´ a slova: user-centered design, informaˇcn´ı architektura, uˇzivatelsk´ y v´ yzkum, prototyp, webdesign.

Annotation In the first part of this thesis we concentrate on describing methods are used for analysis and design of user interface. This part includes brief summary of this new and developing field. In the second part we apply theoretical knowledge and methods are applied to improving user interface of college information system. Key words: user-centered design, information architecture, user research, prototype, webdesign

Obsah ´ 1 Uvod

8

2 Konkurenˇ cn´ı ˇ reˇ sen´ı ˇ ˇ 2.1 Informaˇcn´ı systém CZU a VSE . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Vysoká ˇskola ekonomie a managementu . . . . . . . . . . . . . . . . . . . . .

9 9 10

3 User Experience Design 3.1 Interakˇcn´ı design . . . . . . . . . . . . . . . 3.2 Informaˇcn´ı architektura . . . . . . . . . . . . 3.3 Pouˇzitelnost . . . . . . . . . . . . . . . . . . 3.4 Pˇr´ıstupnost . . . . . . . . . . . . . . . . . . 3.5 Psychologie . . . . . . . . . . . . . . . . . . 3.6 Implentaˇcn´ı model versus Mentáln´ı model . 3.7 Kognitivn´ı zátˇeˇz . . . . . . . . . . . . . . . . 3.8 D˚ uvody selháván´ı digitáln´ıch produkt˚ u . . . 3.9 Základn´ı axiomy o lidech . . . . . . . . . . . 3.10 Popis procesu návrhu uˇzivatelského rozhran´ı

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

11 14 14 15 15 16 19 20 20 21 23

4 Anal´ yza 4.1 C´ılové skupiny . . . . . . . . . . . . . . . . . 4.2 Rozhovory . . . . . . . . . . . . . . . . . . . 4.2.1 Proveden´ı rozhovor˚ u . . . . . . . . . 4.3 Potˇreby uˇzivatel˚ u . . . . . . . . . . . . . . . 4.3.1 Definice c´ıl˚ u a uˇzivatelsk´ ych pˇr´ıbˇeh˚ u 4.4 Testován´ı stávaj´ıc´ıho IS bez uˇzivatele . . . . 4.4.1 Nielsenovy heuristiky . . . . . . . . . 4.4.2 Popis Nielsenov´ ych heuristik . . . . . 4.4.3 Aplikace Nielsenov´ ych heuristik . . . 4.5 Test pouˇzitelnosti stáváj´ıc´ıho IS . . . . . . . 4.5.1 V´ ystup z testován´ı pouˇzitelnosti . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

26 26 27 28 30 31 32 32 33 34 36 37

. . . .

39 39 40 42 44

5 Informaˇ cn´ı architektura 5.1 Anal´ yza obsahu webu . . . . . . ˇ 5.1.1 Anal´ yza obsahu IS BIVS 5.2 Card Sorting . . . . . . . . . . 5.2.1 Proveden´ı cardsortingu .

. . . .

. . . .

. . . .

5

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

5.2.2 5.2.3

Statistické zpracován´ı dat . . . . . . . . . . . . . . . . . . . . . . . . V´ ysledné seskupen´ı poloˇzek . . . . . . . . . . . . . . . . . . . . . . .

6 N´ avrh nov´ eho uˇ zivatelsk´ eho rozhran´ı 6.1 C´ıle návrhu . . . . . . . . . . . . . . 6.2 Skicován´ı . . . . . . . . . . . . . . . 6.3 Wireframy . . . . . . . . . . . . . . . 6.4 Mockups . . . . . . . . . . . . . . . . 6.5 Prototypy . . . . . . . . . . . . . . . 6.6 Grafick´ y návrh . . . . . . . . . . . . 6.6.1 Typografická mˇr´ıˇzka . . . . . 6.6.2 B´ılé m´ısto . . . . . . . . . . . 6.6.3 Rozloˇzen´ı prvk˚ u na formuláˇri 6.6.4 Zápat´ı webu . . . . . . . . . . 6.6.5 Pˇr´ımá manipulace s objekty . 6.6.6 Navigace . . . . . . . . . . . .

45 48

. . . . . . . . . . . .

49 50 50 51 51 52 53 53 54 54 55 56 56

7 Tree testing 7.1 Technika Tree testingu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7.2 Proveden´ı Tree testingu . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

59 59 60

8 Testov´ an´ı pouˇ zitelnosti 8.1 Proˇc testovat pouˇzitelnost . . 8.2 Jak testovat pouˇzitelnost . . . 8.2.1 Typické ˇca´sti testován´ı 8.2.2 Prostˇred´ı testován´ı . . 8.3 Recruiting . . . . . . . . . . . 8.4 Pr˚ ubˇeh testován´ı . . . . . . . 8.5 Nálezy . . . . . . . . . . . . . 8.6 Doporuˇcen´ı . . . . . . . . . .

62 62 63 63 63 64 64 65 65

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . . . . . .

. . . . . . . .

. . . . . . . .

9 Z´ avˇ er

66

Literatura

67

Seznam pˇ r´ıloh

77

A Seznam pouˇ zit´ ych zkratek

1

B Karty s uˇ zivatelsk´ ymi pˇ r´ıbˇ ehy

1

C Zadan´ı pro testov´ an´ı

1

D Tabulka podobnosti

1

E V´ ysledn´ e dendrogramy

1

F Nehierarchick´ e shlukov´ an´ı

1

6

G Uk´ azky dr´ atˇ en´ ych model˚ u

1

H Uk´ azky v´ ysledn´ ych obrazovek

1

I

1

Obsah CD

7

Kapitola 1 ´ Uvod V dneˇsn´ım globalizovaném svˇete má vˇetˇsina digitáln´ıch produkt˚ u velice podobné technické ˇreˇsen´ı. R˚ uzná ˇreˇsen´ı se liˇs´ı hlavnˇe v tom, jak´ y uˇzivatelsk´ y záˇzitek1 poskytuj´ı sv´ ym uˇzivatel˚ um. Mnohdy právˇe tato zkuˇsenost urˇcuje u ´spˇech nebo ne´ uspˇech produktu. D˚ uvodem je to, ˇze se nikomu nechce dlouhodobˇe pracovat s nˇeˇc´ım, co v nˇem vyvolává frustraci a jiné negativn´ı emoce. Toto si uvˇedomuje stále v´ıce spoleˇcnost´ı, protoˇze vˇed´ı, ˇze konkurence je vzdálená jenom jeden klik myˇs´ı. Prvn´ım c´ılem této práce je zhodnotit stávaj´ıc´ı uˇzivatelské rozhran´ı studijn´ıho informaˇcn´ıho systému z hlediska jeho uˇzivatelské pˇr´ıvˇetivosti. Druh´ ym c´ılem je aplikace v´ ysledk˚ u anal´ yz na návrh a tvorbu nového prototypu a jeho následné otestován´ı. Tato práce je rozdˇelena do dvou celk˚ u a to teoretické a praktické ˇca´sti. V teoretické ˇca´sti se vˇenuji u ´vodu do mladého oboru zab´ yvaj´ıc´ıho se anal´ yzou a návrhem uˇzivatelského rozhran´ı. Dále v praktické ˇca´sti aplikuji teorii a best practice v rámci anal´ yzy stáváj´ıc´ıho IS a návrhu nového uˇzivatelského rozhran´ı. V´ ystupem práce je standardn´ı soubor návrh˚ u postupnˇe se rod´ıc´ıho rozhran´ı. Od anal´ yzy souˇcasného stavu, sbˇeru poˇzadavk˚ u, tvorby drátˇen´ ych prototyp˚ u, anal´ yzy informaˇcn´ı architektury aˇz po testován´ı pouˇzitelnosti v´ ysledného prototypu. Jelikoˇz se má práce dot´ yká velice mladého oboru, budu ve své práci ˇcasto pouˇz´ıvat anglické názvy. V ˇceˇstinˇe pro nˇe totiˇz zat´ım nevznikl obecnˇe uznávan´ y pˇreklad. PV situac´ıch, kdy ˇcesk´ y pˇreklad term´ınu jiˇz existuje, jej vˇzdy uvedu souˇcasnˇe s anglick´ ym term´ınem. 1

Neboli anglicky User Experience.

8

Kapitola 2 Konkurenˇ cn´ı ˇ reˇ sen´ı Porovnán´ı stavu prostˇred´ı s konkurenc´ı je vhodná metoda, jak z´ıskat aktuáln´ı pˇrehled o rozsahu ˇreˇsen´ı dostupn´ ych na trhu. Souˇca´st´ı auditu konkurenˇcn´ıho ˇreˇsen´ı je vhodné pouˇz´ıt expertn´ı ohodnocen´ı jako napˇr. Heuristickou evaluaci, porovnán´ı interakˇcn´ıho, vizuáln´ıho designu, siln´ ych a slab´ ych stránek konkurenˇcn´ıho ˇreˇsen´ı. [16] Oslovil jsem nˇekolik sv´ ych kamarád˚ u, aby mi dovolili analyzovat informaˇcn´ı systém a následnˇe s nimi probrat, jak s jim s n´ım pracuje.

2.1

ˇ ˇ Informaˇ cn´ı syst´ em CZU a VSE

ˇ e zemˇedˇelské univerzity v Praze proˇsel v akademickém Studijn´ı informaˇcn´ı systém Cesk´ roce 2014/2015 zásadn´ı zmˇenou. Univerzita pˇreˇsla na zcela nov´ y IS, kter´ y kompletnˇe nahradil pˇredchoz´ı IS Hroch. Implementace tohoto IS (firmou IS4U1 ) je realizována na jin´ ych vysok´ ych ˇskolách napˇr.: Vysoké ˇskole ekonomické v Praze a Mendelovˇe univerzitˇe v Brnˇe. Aktuáln´ı ˇreˇsen´ı vypadá velice robustnˇe a ˇreˇs´ı celou ˇskálu studijn´ı, provozn´ı a vˇedecké agendy na univerzitách. Pˇresto je bˇehem rozhovoru a prob´ırán´ım se aktuáln´ı implementac´ı IS vidˇet, ˇze stávaj´ıc´ı systém trp´ı pˇrehlcen´ım informacemi, nerespektován´ım aktuáln´ıch standard˚ u a obrovsk´ ym mnoˇzstv´ım funkc´ı, které stejnˇe studenti ve velkém nevyuˇzij´ı. 1

http://www.is4u.cz

9

´ Obrázek 2.1: Uvodn´ ı rozcestn´ık IS. Zdroj: vlastn´ı.

2.2

Vysok´ aˇ skola ekonomie a managementu

ˇ IS VSEM je o poznán´ı jednoduˇsˇs´ı a obsahuje znatelnˇe ménˇe funkcionality neˇz studijn´ı ˇ a CZU ˇ ˇ informaˇcn´ı systémy BIVS nebo VSE. Smˇerem ke studentovi je prezentována pˇredevˇs´ım funkˇcnost, která se ho nezbytnˇe dot´ yká. Kaˇzd´ y pohled zobrazuje oˇcekávaná data bez zbyteˇcného popisuj´ıc´ıho textu, kter´ y v ostatn´ıch IS pouze zab´ırá m´ısto a ruˇs´ı uˇzivatele. Jak uvedu v dalˇs´ıch kapitolách, studie z praxe ukazuj´ı, ˇze takové texty na webu ˇcte pouze zlomek lid´ı. Zaj´ımavá je u ´roveˇ n grafického zpracovan´ı, nen´ı u ´plnˇe konzistentn´ı v celém systému. Nav´ıc vˇetˇsina informac´ı je zobrazována pouze v´ yˇctem v tabulce a to je napˇr´ıklad pro rozvrh hodin nevhodné a nepˇrehledné. Tuto informaci mi i potvrdila participantka, která mi IS pˇredstavovala.

´ Obrázek 2.2: Uvodn´ ı rozcestn´ık IS a pˇrehled známek. Zdroj: vlastn´ı.

10

Kapitola 3 User Experience Design

Obrázek 3.1: Nˇekolik discipl´ın t´ ykaj´ıc´ıch se User Experience Designu. Zdroj: upraveno z autorem z [17].

User experience jako souslov´ı1 bylo poprvé pouˇzito Dr. Donaldem Normanem, v´ yzkumn´ıkem v oblasti kognitivn´ı psychologie, kter´ y jako prvn´ı popsal d˚ uleˇzitost user centered designu (UCD). UCD vycház´ı z potˇreb a poˇzadavk˚ u koncov´ ych uˇzivatel˚ u. 1

V ˇceˇstinˇe se lze setkat s pˇrekledem term´ınu jako uˇzivatelsk´ y proˇzitek“. ”

11

Uˇzivatelsk´ y proˇzitek, popisuje jak se lidé c´ıt´ı pˇri interakci s nˇejak´ ym systémem (webovou stránkou, aplikac´ı, softwarem). Proˇzitkem je zde myˇsleno, jak jednoduˇse je systém pouˇziteln´ y, jakou má hodnotu pro uˇzivatele, jeho uˇziteˇcnost, jak s n´ım dá efektivnˇe pracovat atd. [47] V dneˇsn´ı dobˇe, kdy vˇetˇsina produkt˚ u, reáln´ ych tak hlavnˇe digitáln´ıch, je na srovnatelné technické u ´rovni, je v´ıce neˇz nutné se zamˇeˇrovat na dalˇs´ı faktory, které maj´ı na u ´spˇech daného produktu vliv. Protoˇze odliˇsen´ı uˇz dnes nacház´ıme pˇredevˇs´ım v pˇridan´ ych sluˇzbách. Jedn´ım z d˚ uvod˚ u, proˇc se zab´ yvat uˇzivatelsk´ ym proˇzitkem resp. pouˇzitelnost´ı naˇseho produktu, je mˇeˇritelné sn´ıˇzen´ı chybovosti vstupn´ıch dat pˇri jeho souˇcasném zrychlen´ı zadáván´ı. Pokud náˇs produkt tzv. lad´ı oku“, uˇzivatelé jsou s n´ım spokojenˇejˇs´ı a jsou ” tolerantnˇejˇs´ı k chybám. To nám v d˚ usledku zvyˇsuje loajalitu v˚ uˇci produktu resp. naˇs´ı znaˇcce.

Obrázek 3.2: Prvky IS. Zdroj: upraveno autorem z [3].

Stejnˇe jako u bˇeˇzného aplikaˇcn´ıho softwaru je zapotˇreb´ı ˇreˇsit ergonometrickou kvalitu a pouˇzitelnost u IS, jelikoˇz informaˇcn´ı systémy, které nerespektuj´ı omezen´ı sv´ ych uˇzivatel˚ u, jsou ˇcasto odsouzeny k ne´ uspˇechu. Proto je nezbytné potˇreby uˇzivatel˚ u respektovat jiˇz v pr˚ ubˇehu samotného návrhu IS a upozorˇ novat dodavatele IS na moˇznosti zv´ yˇsen´ı efektivity práce s jeho dodávan´ ym ˇreˇsen´ım. ˇ ek (uˇzivatel) je ned´ılnou souˇcást´ı IS. V rámci návrhu nelze opom´ıjet ani jednu Clovˇ sloˇzku: reáln´ y svˇet, uˇzivatele a informaˇcn´ı technologie. Uˇzivatel jako ˇclovˇek je velice r˚ uznorod´ y od jeho znalost´ı IT, znalosti dané problematiky aˇz po rychlost a zp˚ usobu vlastn´ı práce. Pˇresto lze definovat, jak je uvedeno v [3], nˇekolik následuj´ıc´ıch spoleˇcn´ ych charakteristik:

12

ˇ ek potˇrebuje pocit svobody a samostatnosti. • Clovˇ ˇ ek má potˇrebu pracovat sv´ • Clovˇ ym tempem. ˇ ek neustále rozv´ıj´ı svoji osobnost. • Clovˇ ˇ ek potˇrebuje pro rozhodován´ı optimáln´ı mnoˇzstv´ı informac´ı. • Clovˇ ˇ ek chybuje. • Clovˇ Správnˇe navrˇzené uˇzivatelské rozhran´ı respektuj´ıc´ı uˇzivatelovy potˇreby pomáhá zvyˇsovat efektivitu práce s IS.

Obrázek 3.3: Nyn´ı jiˇz pˇrekonan´ y proces návrhu. Zdroj: upraveno autorem z [47].

I kdyˇz se dnes m˚ uˇze zdát jasné, proˇc vyuˇz´ıvat metodiky z UCD, pˇresto v oblasti v´ yvoje webov´ ych a klasick´ ych softwarov´ ych produkt˚ u stále pˇrevládá zp˚ usob redukovan´ y pouze na dvˇe poloˇzky: • Co povaˇzuje programátor za dobré, designuj´ı, respektive programuj´ı pro sebe. • Co uspokoj´ı a l´ıb´ı se klientovi, nikoliv co skuteˇcnˇe pom˚ uˇze jeho zákazn´ık˚ um, zamˇestnanc˚ um a nebo jeho byznysu. V posledn´ı dekádˇe lidé zaˇcali ve velkém pouˇz´ıvat pro pˇripojen´ı do Internetu r˚ uzná mobiln´ı zaˇr´ızen´ı, chytré mobiln´ı telefony, tablety, ˇcteˇcky a jiné. Kaˇzdé z tˇechto zaˇr´ızen´ı má jinak velkou zobrazovac´ı plochu a pˇristupuje ke stránkám jinou rychlost´ı. Dalˇs´ı obrovskou

13

zmˇenou bylo zlepˇsen´ı pˇr´ıstupu pro lidi se speciáln´ımi poˇzadavky, jako jsou napˇr´ıklad ˇcteˇcka obrazovky nebo speciáln´ı vstupn´ı zaˇr´ızen´ı (jiné neˇz tradiˇcn´ı klávesnice a myˇs). V´ıce o problematice pouˇzitelnost viz kapitola n´ıˇze. Závˇerem je d˚ uleˇzité zd˚ uraznit, ˇze UXD nen´ı a nebude spásou pro vˇsechny, nebot’ jako lidé jsme kaˇzd´ y jin´ y, tak co p˚ usob´ı na nˇekoho velmi ˇspatnˇe, m˚ uˇze na druhého p˚ usobit právˇe opaˇcnˇe. Asi nikdy nebudeme schopni zaruˇcit stejn´ y proˇzitek vˇzdy a pro vˇsechny. [47] [3]

3.1

Interakˇ cn´ı design

Pod interakˇcn´ı design spadá celé spektrum obor˚ u, které v dneˇsn´ı dobˇe promlouvaj´ı do tvorby digitáln´ıch produkt˚ u, a to od informaˇcn´ı architektury, tvorby uˇzivatelsk´ ych rozhran´ı, pouˇzitelnosti, pˇr´ıstupnosti, HCI, copywritingu apod. Tyto obory na následuj´ıc´ıch stránkách struˇcnˇe pˇredstav´ım.

3.2

Informaˇ cn´ı architektura

Obrázek 3.4: Informaˇcn´ı architektura propojuje lidi, obsah a jejich kontext. Zdroj: upraveno autorem z [5].

14

C´ılem Informaˇcn´ı Architektury (IA) je podat pomocnou ruku uˇzivatel˚ um pˇri hledán´ı a plnˇen´ı jejich u ´kol˚ u. Nezbytn´ ym pˇredpokladem je pochopen´ı jednotliv´ ych ˇca´st´ı systému a jejich vzájemn´ ych vazeb v kontextu uˇzivatel˚ u [5]. Informaˇcn´ı architektura je pˇredevˇs´ım o: • Organizaci obsahu a objekt˚ u (jak je kategorizovat a strukturovat) • jejich správn´ ym popisem (jak je reprezentovat), • a umoˇznˇen´ı lidem je snadno naj´ıt (jak lidé informace vyhledávaj´ı). Jak ukazuje následuj´ıc´ı obrázek, ke správnému pochopen´ı systému informac´ı je nezbytné chápat vzájemnou provázanost lid´ı, obsahu a kontextu tzv. informaˇcn´ı ekologie [35].

3.3

Pouˇ zitelnost Pouˇzitelnost pˇrece znamená, ˇze nˇeco dobˇre funguje a ˇze osoba s pr˚ umˇernými (ba dokonce podpr˚ umˇernými) schopnostmi a zkuˇsenostmi m˚ uˇze urˇcitou vˇec – at’ uˇz se jedná o webovou stránku, bojový st´ıhac´ı letoun nebo otoˇcné dveˇre – k u ´ˇcelu, ke kterému je urˇcena, aniˇz musela být beznadˇejnˇe muˇcena. Steve Krug, Web design: nenut’te uˇzivatele pˇrem´ yˇslet! [18].

Pouˇzitelnost´ı rozum´ıme, zda s produktem nebo systémem naˇsi uˇzivatelé dobˇre intuitivnˇe pracuj´ı a nebo maj´ı problém na nˇem vˇeci naj´ıt. Správnˇe navrˇzen´ y web uˇzivatele nefrustruje a umoˇzn ˇuje mu zvládat snadno a rychle c´ıle, za kter´ ymi na dan´ y web pˇriˇsel. Pouˇzitelnost a UX jsou nˇekdy mylnˇe chápané jako synonyma, ale UX se zab´ yvá t´ım, jak´ y maj´ı uˇzivatelé záˇzitek z daného produktu nebo sluˇzby, a to po celou dobu jejich ˇzivotnosti. Naproti tomu pouˇzitelnost je o uˇzivatelské pˇr´ıvˇetivosti a efektivitˇe. [47]

3.4

Pˇ r´ıstupnost

Pˇr´ıstupn´ y web se snaˇz´ı co nejv´ıce ulehˇcit pohyb a zobrazen´ı jednotliv´ ych stránek uˇzivatel˚ um, kteˇr´ı jsou nˇejak´ ym zp˚ usobem handicapovan´ı, at’ se jedná o zrakové, motorické nebo

15

jiné postiˇzen´ı. Takov´ yto web by mˇel m´ıt dostateˇcnˇe kontrastn´ı barvy, velikost p´ısma a logick´ y sled objekt˚ u, které m˚ uˇze uˇzivatel procházet pomoc klávesnice a nebo pomoc´ı ˇcteˇcky obrazovky. Z dobré pˇr´ıstupnosti m˚ uˇze profitovat i bˇeˇzn´ y uˇzivatel2 , pokud na web bude pˇristupovat napˇr. z mobiln´ıho telefonu. Takov´ yto web je ve svém d˚ usledku snadnˇeji ovladateln´ y na malém displeji a uˇzivatel m˚ uˇze bez vˇetˇs´ıch problém˚ u vyˇreˇsit sv˚ uj problém a provozovateli webu dojde k tzv. konverzn´ı akci. Takovou konverzn´ı akc´ı m˚ uˇze b´ yt napˇr´ıklad nákup v e-shopu. Pˇr´ıstupnost je jiˇz nˇekolik let zavedena i v naˇsem právn´ım ˇrádu to zákonem. Zákon 365/2000 Sb. O informaˇcn´ıch systémech veˇrejné správy, které definuje poˇzadavky na vznikaj´ıc´ı systémy. V dneˇsn´ı dobˇe m˚ uˇzeme za nejkomplexnˇejˇs´ı pohled na pˇr´ıstupnost povaˇzovat metodiku Web Content Accessibility Guidelines 2.0 [45], která zahrnuje nˇekolik základn´ıch doporuˇcen´ı pro tvorbu rozhran´ı. Je d˚ uleˇzité zd˚ uraznit, ˇze v koneˇcném d˚ usledku zab´ yván´ı se pˇr´ıstupnost´ı pˇrináˇs´ı pozitiva vˇsem bez ohledu na jejich moˇzné postiˇzen´ı. Podle jedné studie provedené spoleˇcnost´ı Microsoft zlepˇsen´ı pˇr´ıstupnosti webu m˚ uˇze prospˇet aˇz 57 % dospˇelé populace.[39] [9]

3.5

Psychologie

Psychologie jako jeden z obor˚ u, kter´ y je ned´ılnou souˇcást´ı UCD, se snaˇz´ı pochopit a popsat ˇclovˇeka z hlediska jeho vazeb na pouˇz´ıván´ı reáln´ ych nebo digitáln´ıch pˇredmˇet˚ u resp. aplikac´ı.

Obrázek 3.5: Gestalt. Zdroj: pˇrevzato z [11].

2

Ch´ apejme uˇzivatel bez vˇetˇs´ıch zdravotn´ıch dysfunkc´ı.

16

Gestalt psychologie Gestalt psychologie, nebo-li celostn´ı psychologie, je zaloˇzena na myˇslence, ˇze jednotlivé entity nejsou atomizovatelné, ale jsou strukturnˇe uspoˇra´dané odpoˇca´tku. Proto nelze anal´ yzou, dekompozic´ı, u ´pravou a následnou syntézou problému vymyslet produkt, pokud o nˇem nebudeme pˇrem´ yˇslet v kontextu okoln´ıho svˇeta. Toto má obrovsk´ y dopad pˇredevˇs´ım na naˇse pojet´ı a chápán´ı zrakov´ ych vjem˚ u. Gestalt principy vysvˇetluj´ı, jak ˇclovˇek chápe vizuáln´ı objekt a jak je toto chápán´ı ovlivnˇeno uspoˇra´dán´ım, velikost´ı a perspektivou. [16] [12] Gestalt principy lze s v´ yhodou vyuˇz´ıt pˇri návrhu interakc´ı v digitáln´ıch produktech [12] [44]: Podobnost Podobné objekty chápeme jako skupinu nebo vzor. Jako pˇr´ıklad m˚ uˇzeme uvést mikroblogovac´ı platformu Tumblr3 , kde pomoc´ı podobnosti série ikon a jejich popisk˚ u je naznaˇceno, ˇze kaˇzdá z tˇechto sedmi variant vede k vytvoˇren´ı nového pˇr´ıspˇevku na blogu. Podobnost zde vid´ıme ve dvojici ikon a popisk˚ u, které maj´ı vˇzdy stejnou velikost a uspoˇra´dán´ı v prostoru.

Obrázek 3.6: Podobnost. Zdroj: upraveno autorem z [44].

N´ avaznost vyhledáváme v r˚ uzn´ ych objektech a umoˇzn ˇuje nám dobˇre rozpoznávat obrysy v r˚ uznorodém prostˇred´ı. Tento princip lze velice dobˇre vyuˇz´ıt v navigac´ıch stránek, kde lze na prvn´ı pohled dobˇre poznat podle horizontáln´ıho rozdˇelen´ı, ˇze se jedná o jiné skupiny odkaz˚ u.

Obrázek 3.7: Ohraniˇcen´ı. Zdroj: upraveno autorem z [44].

Ohraniˇ cen´ı nám dovoluje chápat objekty jako celky, které spolu nˇejak souvis´ı. Pˇr´ıklad je pˇr´ıspˇevek na Facebooku4 , kter´ y obsahuje hned tˇri ohraniˇcen´ı. Pˇr´ıspˇevek je na 3 4

https://www.tumblr.com/ https://www.facebook.com/

17

b´ılém podkladˇe s ˇsed´ ym rámeˇckem na svˇetle ˇsedém pozad´ı. Odkaz, jeho obrázek a popis jsou také seskupeny k sobˇe. Takˇze tuto skupinu snadno vid´ıme a v´ıme, ˇze patˇr´ı k sobˇe. Posledn´ı skupinu tvoˇr´ı vlast´ı sociáln´ı interakce jako komentáˇre a like“. ”

Obrázek 3.8: Ohraniˇcen´ı. Zdroj: upraveno autorem z [44].

Uzavˇ ren´ı Pokud máme dostatek informac´ı o objektu, naˇse mysl snadno dopln´ı chybˇej´ıc´ı zbytek. Tento princip je dobˇre vidˇet na pˇr´ıchoz´ı notifikaci na webu Twitteru5 , kde ˇc´ıslo znaˇc´ıc´ı poˇcet upozornˇen´ı pˇrekr´ yvá vˇetˇsinu zvonku, ale pˇresto ho snadno poznáme.

Obrázek 3.9: Uzavˇren´ı. Zdroj: upraveno autorem z [44].

Bl´ızkost. Objekty, které jsou bl´ızko u sebe, chápeme jako souˇca´st skupiny. Napˇr´ıklad profil na sociáln´ı s´ıti Twitter sdruˇzuje avatara, jméno a uˇzivatelské jméno dohromady. To samé o pár pixel˚ u n´ıˇze je vidˇet se souhrnn´ ymi statistikami u ´ˇctu.

Obrázek 3.10: Bl´ızkost. Zdroj: upraveno autorem z [44] .

5

https://twitter.com/

18

3.6

Implentaˇ cn´ı model versus Ment´ aln´ı model

V následuj´ıc´ı sekci pop´ıˇsi dva základn´ı modely a to konceptuáln´ı (mentáln´ı) a implementaˇcn´ı model. Problematika a d˚ usledky v rozporu tˇechto model˚ u jsou popsány v dnes jiˇz legendárn´ı publikaci zab´ yvaj´ıc´ı se pˇredmˇety kaˇzdodenn´ıho ˇzivota Donalda A. Normana Design pro kaˇzdý den [1] a jiˇz ˇctvrtém vydan´ı About face: the essentials of interaction design Alana Coopera [16], které problematiku rozv´ıj´ı na poli digitáln´ıch produkt˚ u. V kaˇzdodenn´ıch ˇzivotn´ıch situac´ıch lidé pˇricházej´ı do kontaktu s r˚ uzn´ ymi systémy, at’ uˇz pˇrirozen´ ymi nebo umˇele vytvoˇren´ ymi. Takovéto systémy kaˇzd´ y ˇclovˇek poznává pomoc´ı sv´ ych smysl˚ u a snaˇz´ı se pochopit, jak funguj´ı, tedy vytváˇr´ı si vlastn´ı modely fungovan´ı jin´ ych systém˚ u. Takov´ yto mentáln´ı model se v´ıce ˇci ménˇe bl´ıˇz´ı ve skuteˇcnosti tomu, jak modelovan´ y systém funguje. Systémov´ y ˇci implementaˇcn´ı model nám popisuje, jak dan´ y umˇele vytvoˇren´ y systém skuteˇcnˇe funguje. Budeme se bavit o fyzick´ ych zaˇr´ızen´ıch jako napˇr´ıklad ruˇcn´ım ml´ ynku na kávu, kter´ y mele celá zrnka kávy podle nastaven´ı na menˇs´ı ˇca´sti. Jsme schopni témˇeˇr bez problému popsat, ˇze tak se dˇeje pomoc´ı mlec´ıch kamen˚ u, které uvád´ıme v pohyb otáˇcen´ım kliˇcky, káva se mele v zásobn´ıku pro zrnka a do spodn´ı pˇrihrádky nám propadává ˇcerstvˇe namletá káva. Velice podobnˇe lze brát v u ´vahu nˇejakou aplikaci. Zde mluv´ıme o jednotlivém sledu ˇra´dk˚ u programového kódu, které vykonávaj´ı napˇr´ıklad sloˇzité matematické v´ ypoˇcty. Taková aplikace pro komunikaci s uˇzivatelem vyuˇz´ıvá nejˇcastˇeji umˇele vytvoˇreného grafického uˇzivatelského rozhran´ı. Na rozd´ıl od ml´ ynku na kávu, kter´ y jiˇz na prvn´ı pohled neumoˇzn ˇuje o moc v´ıce jasn´ ych vyuˇzit´ı neˇz mlet´ı kávy. Takto jasné signály, co máme dˇelat, nám grafická rozhran´ı nemusej´ı dávat. Proˇc se zab´ yvat jednotliv´ ymi modely? Protoˇze jak uvád´ı Alan Cooper ve své knize [16], správnˇe navrˇzené uˇzivatelské rozhran´ı je vybudováno právˇe na mentáln´ım modelu a nikoliv implementaˇcn´ım. Základn´ı pravidla, která napomáhaj´ı správnˇe vytváˇret oba dva zm´ınˇené mentáln´ı modely [1]: ´ celovost a viditelnost je schopnost nebo vlastnost pˇredmˇetu, která nám naznaˇcuje, Uˇ jak dan´ y pˇredmˇet vyuˇz´ıvat. Donald Norman této vlastnosti ˇr´ıká a↵ordance [1].

19

Mapov´ an´ı je velice podstatnou ˇca´st´ı designu produktu. Správné mapován´ı nám umoˇzn ˇuje pochopit akci a zároveˇ n rozpoznat, v jakém stavu se produkt nebo systém zrovna nacház´ı. Zpˇ etn´ a vazba uˇzivatel má nepˇretrˇzitou zpˇetnou vazbu, co se dˇeje na základˇe jeho akc´ı.

3.7

Kognitivn´ı z´ atˇ eˇ z

Kognitivn´ı zátˇeˇz m˚ uˇzeme chápat jako m´ıru schopnosti ˇclovˇeka zvládat zpracován´ı v´ıce informac´ı najednou [24]. Jako pˇr´ıklad si uved’me webové stránky, kde uˇzivatel mus´ı pochopit strukturu stránky a obsah menu v kontextu d˚ uvodu, proˇc na web pˇriˇsel. Jelikoˇz takováto studnice energie je jednoznaˇcnˇe omezena a kaˇzd´ y individuáln´ı ˇclovˇek ji má na jiné u ´rovni, mus´ı b´ yt naˇs´ım c´ılem kognitivn´ı zátˇeˇz co nejv´ıce minimalizovat. Nutno podotknout, ˇze z podstaty vˇeci nem˚ uˇze a nebude nikdy nulová. Jak Kathryn Whitetenton dále ve svém ˇclánku [24] uvád´ı, kognitivn´ı zátˇeˇz lze sn´ıˇzit pomoc´ı následuj´ıc´ıch bod˚ u: • Odstranˇen´ım veˇskerého zbyteˇcného vizuáln´ıho balastu. Uˇzivatel by mˇel vidˇet jen to, co mu skuteˇcnˇe pom˚ uˇze vyˇreˇsit jeho problém. • Stavˇet na osvˇedˇcen´ ych mentáln´ıch modelech. Lidé, co pˇrecházej´ı na naˇse stránky, jiˇz maj´ı základn´ı mentáln´ı model, jak funguj´ı stránky a co by mˇeli oˇcekávat. • Minimalizovat veˇskeré u ´kony, které vyˇzaduj´ı, aby si uˇzivatel nˇeco pamatoval, rozm´ yˇslel nebo ˇcetl. Tohoto lze dosáhnout chytr´ ym zvolen´ım implicitn´ıch hodnot, obrázk˚ u nebo opakován´ım jiˇz vloˇzen´ ych informac´ı.

3.8

D˚ uvody selh´ av´ an´ı digit´ aln´ıch produkt˚ u Nenut’te mˇe pˇremýˇslet. Steve Krug, Web design: nenut’te uˇzivatele pˇrem´ yˇslet![20].

20

Jedn´ım ze základn´ıch d˚ uvod˚ u, proˇc vˇetˇsina digitáln´ıch produkt˚ u selˇze, je ˇspatnˇe nastaven´ y proces v´ yvoje, protoˇze se nedostateˇcnˇe zamˇeˇruje na skuteˇcné potˇreby lid´ı. Tyto potˇreby lid´ı nelze zpravidla stanovit bez kvalitn´ıho uˇzivatelského v´ yzkumu. Absenci poˇca´teˇcn´ıho v´ yzkumu a nevhodnˇe nastaven´ ymi procesy lze shrnout, jak uvád´ı Alan Cooper ve své knize, následovnˇe [16]: Nevhodnˇ e zvolen´ e priority jak produktov´ ym tak i v´ yvojov´ ym t´ ymem. Ignorace re´ aln´ ych uˇ zivatel˚ u produktu a jejich základn´ıch potˇreb. Konflikt z´ ajm˚ u v´ yvojáˇr˚ u, kteˇr´ı maj´ı na starost design a vlastn´ı v´ yvoj. Chybˇ ej´ıc´ı designov´ y proces a jeho d˚ usledek v neznalosti uˇzivatelsk´ ych potˇreb a anal´ yz, které by vedly v´ yvoj správn´ ym smˇerem. Dále je potˇreba si uvˇedomit, ˇze kl´ıˇcové je zamˇeˇren´ı na to, aby aplikace umoˇzn ˇovala efektivnˇe vyˇreˇsit uˇzivatelovy problémy a nejednalo se jen o zmˇet’ r˚ uzn´ ych funkc´ı ˇreˇs´ıc´ıch pˇri troˇse ˇstˇest´ı jen d´ılˇc´ı kroky. Je zapotˇreb´ı pohl´ıˇzet abstraktnˇe na c´ıle a neskonˇcit jen u souboru individuáln´ıch u ´kol˚ u. Tento posun od jednotliv´ ych u ´kolu nebo krok˚ u k c´ıl˚ um má dlouhodob´ y praktick´ y dopad, nebot’ c´ıle uˇzivatel˚ u maj´ı násobnˇe delˇs´ı ˇzivotnost neˇz jejich kroky. Dobr´ ym pˇr´ıkladem c´ıle m˚ uˇze b´ yt napˇr´ıklad to, ˇze si student chce zjistit term´ıny zkouˇsek ze zapsan´ ych pˇredmˇet˚ u. Tento c´ıl je stejn´ y jak pro dneˇsn´ı studenty tak i pro studenty pˇred dvaceti, tˇriceti a v´ıce lety. Jediné, co se zmˇenilo, jsou jednotlivé kroky, kter´ ymi toho student m˚ uˇze dosáhnout. Dnes je naprosto bˇeˇzné, ˇze si student zjist´ı term´ıny zkouˇsek z tepla domova pomoc´ı IS, dˇr´ıve se musel zaj´ıt pod´ıvat na nástˇenku nˇekde v budovˇe ˇskoly. Jak je vidˇet, c´ıl je stejn´ y, ale jen doˇslo k radikáln´ı zmˇenˇe krok˚ u, které mus´ı uˇzivatel podniknout, aby dosáhl svého c´ıle.

3.9

Z´ akladn´ı axiomy o lidech

Pˇri návrhu uˇzivatelského rozhran´ı je zapotˇreb´ı m´ıt na pamˇeti nˇekterá základn´ı pravidla o lidech z´ıskaná z psychologie, marketingu atd. Jejich respektován´ım a správn´ ym vyuˇzit´ım je náˇs digitáln´ı produkt nebude zbyteˇcnˇe mást a stresovat. [12] [19] [11]

21

Uˇzivatelé se chovaj´ı a budou chovat jinak, neˇz si ze zaˇcátku mysl´ıme. Mezi dobˇre známá fakta patˇr´ı nˇekolik základn´ıch skuteˇcnost´ı: Str´ anky neˇ cteme. Dobˇre znám´ ym faktem je, ˇze lidé stránky neˇctou6 . Jen v rychlosti oˇcima pátraj´ı po kl´ıˇcov´ ych slovech a nebo skenuj´ı v´ yrazné prvky jako nadpisy, obrázky atd. Toto tvrzen´ı dokazuje i v´ yzkum[30] skupiny NN/g7 . Kde v´ yzkumn´ıci za pomoci oˇcn´ıch kamer na 232 participantech zkoumali jejich chován´ı na tis´ıci webov´ ych stránkách. Jejich zjiˇstˇen´ı je, ˇze lidé skenuj´ı stránky nejˇcastˇeji v hrubém tvaru p´ısmene F nebo v jeho tvarov´ ych mutac´ıch p´ısmene E ˇci L: • Lidé zaˇc´ınaj´ı skenován´ı dlouhou horn´ı linkou p´ısmene F. • Dále pokraˇcuj´ı kratˇs´ı horizontáln´ı linkou, kde lidé skuteˇcnˇe pˇreˇcetli kratˇs´ı ˇcást neˇz pˇri prvn´ı horizontáln´ım skenován´ı. • Posledn´ı ˇca´st´ı je vertikáln´ı skenován´ı, které podle uvedené studie b´ yvá pomalejˇs´ı a systematiˇctˇejˇs´ı.

Obrázek 3.11: Tepelné mapy vzniklé na základˇe sledován´ı oˇcn´ı kamerou Zdroj: pˇrevzato z [30].

6 7

Mimo zpravodajské port´ aly apod. Nielson Norman group (http://www.nngroup.com/).

22

Tento fakt má jednoznaˇcnˇe v´ yznamn´ y dopad na zp˚ usob návrhu web˚ u: • Lidé nebudou ˇc´ıst na webové stránce vˇsechen text. • V prvn´ıch dvou odstavc´ıch mus´ı b´ yt napsáno to nejd˚ uleˇzitˇejˇs´ı, protoˇze je zde nejvˇetˇs´ı pravdˇepodobnost, ˇze právˇe tomuto textu budou vˇenovat nejv´ıce u ´sil´ı. • Nadpisy, odstavce ˇci odráˇzkové seznamy jsou záchytné body, kter´ ych si uˇzivatel m˚ uˇze nejpravdˇepodobnˇeji vˇsimnout. Neoptimalizujeme v´ ybˇ er. Uˇzivatelé sázej´ı na tzv. prvn´ı dobrou“. Vol´ıme tuto stra” tegii z velice prostého d˚ uvodu, jelikoˇz je nejlevnˇejˇs´ı, co se t´ yˇce pˇrem´ yˇslen´ı. Jako jeden ze zaj´ımav´ ych d˚ uvod˚ u uvád´ı Steve Krug ve své knize, ˇze Hádán´ı je zábavnˇejˇs´ı.“ a dovoluje ” nám objevit nové vˇeci, na které bychom jinak nenarazili. Nezaj´ım´ a n´ as, jak vˇ ec´ı funguj´ı. Lidé prostˇe pouˇz´ıvaj´ı prvn´ı zp˚ usob, kter´ y funguje, a po lepˇs´ım uˇz nepátraj´ı. Na základˇe této skuteˇcnosti si lidé vytváˇrej´ı nesprávné mentáln´ı modely o fungovan´ı daného systému.

3.10

Popis procesu n´ avrhu uˇ zivatelsk´ eho rozhran´ı

User Centered Design (UCD) proces popisuje návrh uˇzivatelského rozhran´ı, kter´ y se soustˇred´ı pˇredevˇs´ım na potˇrebu a c´ıle uˇzivatele, prostˇred´ı, kontext a workflow. K tomu vyuˇz´ıvá technik a best-practice pro anal´ yzu, design a testován´ı hardwarov´ ych, softwarov´ ych nebo webov´ ych produkt˚ u. [46] C´ılem User Centered Designu je vytváˇret produkty, které splˇ nuj´ı následuj´ıc´ı body dle Je↵rey Rubina [46]: Uˇ ziteˇ cnost – produkt podporuje a pomáhá uˇzivatel˚ um v plnˇen´ı c´ıl˚ u, kter´ ych chtˇej´ı dosáhnout. Efektivita – mˇeˇren´ı kvantitativn´ıch metrik jako je rychlost a chybovost. Nauˇ citelnost – schopnost pracovat s produktem po absolvovaném ˇskolen´ı a nebo po urˇcité dobˇe pouˇz´ıván´ı.

23

Estetiˇ cnost – pocity a názory na vlastn´ı produkt.

Obrázek 3.12: Proces v rámci UCD. Zdroj: upraveno autorem z vlastn´ı [46].

Anal´ yza a v´ yzkum Je naprosto nezbytnou souˇca´st´ı procesu UCD. V rámci jej´ı ˇcásti je zapotˇreb´ı pochopit a správnˇe definovat jednotlivé c´ıle, a to v kontextu: uˇzivatel˚ u, byznys c´ıl˚ u a prostˇred´ı, ve kterém se bude produkt nacházet. Designov´ an´ı je ˇca´st, kdy pˇretváˇr´ıme v´ ysledky anal´ yzy a v´ yzkumu. Vzniká velké mnoˇzstv´ı skeˇc˚ u, drátˇen´ ych model˚ u, model˚ u navigace atp. V této fázi je co nejlepˇs´ı vygenerovat velké mnoˇzstv´ı nápad˚ u a ty následné syntetizovat do nˇekolika málo v´ ysledn´ ych ˇreˇsen´ı. Prototypov´ an´ı V rámci této ˇcásti se vytváˇr´ı postupnˇe prototypy, které se liˇs´ı svoj´ı hloubkou detail˚ u. Tyto detaily jsou postupn´ ym iterován´ım zpˇresˇ novány s t´ım, v jak pokroˇcilé fázi v´ yvoje se zrovna nacház´ıme. Od velice hrub´ y rys˚ u aˇz po prototypy na prvn´ı pohled nerozeznatelné od jiˇz fináln´ı aplikace. Je vhodné pr˚ ubˇeˇznˇe testovat prototypy. Na takovouto pr˚ ubˇeˇznou kontrolu, jak doporuˇcuje Steve Krug [20], lze s klidem pouˇz´ıt i kolegy z jin´ ych oddˇelen´ı (v rámci urˇcit´ ych limit˚ u).

24

Vyhodnocen´ı I kdyˇz testován´ı jeho vyhodnocen´ı je vhodné zaˇradit jiˇz od fáze designován´ı, tak je vhodné pˇred zaˇca´tkem vlastn´ı implementace provést celkov´ y test pouˇzitelnosti stáváj´ıc´ıho prototypu, kter´ y bude slouˇzit jako reference pro programátory. Implementace a spuˇ stˇ en´ı Posledn´ı ˇcást´ı je vlastn´ı implementace a spuˇstˇen´ı produktu. Po spuˇstˇen´ı je nutné sledovat pˇredem stanovené metriky v produkˇcn´ım prostˇred´ı.

25

Kapitola 4 Anal´ yza Sbˇer dat a v´ yzkum v oblasti UCD lze rozdˇelit do dvou skupin, a to na v´ yzkum kvalitativn´ı a kvantitativn´ı. Oba druhy v´ yzkum˚ u maj´ı své v´ yhody a nev´ yhody a v mnoha pˇr´ıpadech se skvˇele doplˇ nuj´ı, proto je vhodné z kaˇzdé oblasti zkombinovat vˇzdy pro dan´ y projekt vhodnou metodu. Kvalitativn´ı v´ yzkum dává pˇrednost malému vzorku participant˚ u, ale o to jejich zevrubnˇejˇs´ımu pochopen´ı. Kvalitativn´ım v´ yzkum je vhodné zaˇc´ıt, pokud si potˇrebujeme zmapovat a nahlédnout do jednotliv´ ych oblast´ı zkoumané domény a vytyˇcit si základn´ı v´ yseˇc, kter´ ym oblastem se budeme vˇenovat. Kvantitativn´ı v´ yzkum je, jak sám název napov´ıdá, o velkém zkoumaném vzorku. Pro zpracován´ı velk´ ych vzork˚ u jsou proto vhodné metody, které umoˇzn ˇuj´ı automatické zpracován´ı dat. Proto se z takového v´ yzkumu velice tˇeˇzko dozv´ıme nové informace, a proto nám slouˇz´ı pˇredevˇs´ım k ovˇeˇrován´ı naˇsich hypotéz, které jsme vyslovili na základˇe kvalitativn´ıho v´ yzkumu. V podstatˇe m˚ uˇzeme ˇr´ıct, ˇze kvalitativn´ı v´ yzkumem ˇr´ıkáme, proˇc je nˇeco dobˇre. Naopak kvantitativn´ım v´ yzkumem lépe dokáˇzeme, která naˇse hypotéza je správná.[14]

4.1

C´ılov´ e skupiny

Abychom mohli správnˇe popsat, vyv´ıjet a pochopit produkt, mus´ıme nejdˇr´ıve poznat a popsat c´ılovou skupinu, která má uˇz´ıvat náˇs IS. Je d˚ uleˇzité si uvˇedomit, ˇze se nikdy nelze

26

zavdˇeˇcit vˇsem, proto je v´ıce neˇz vhodné designovat alespoˇ n pro jej´ı nˇejakou ˇca´st. Mezi oˇcekávané uˇzivatele studijn´ıho informaˇcn´ıho systému patˇr´ı: Studenti jsou pˇredevˇs´ım pasivn´ımi odbˇerateli informac´ı, jako jsou známky nebo pˇrehledy pˇredmˇet˚ u. Ve specifick´ ych dnech se zapisuj´ı na zkouˇsky a nebo si tvoˇr´ı rozvrh. Uˇ citel´ e Jsou pedagogiˇct´ı pracovn´ıci zodpovˇedn´ı za pˇrednáˇsen´ı, cviˇcen´ı a nebo garantován´ı jednotliv´ ych pˇredmˇet˚ u. Z titulu jejich funkce se mˇen´ı i jejich rozsah práv. IS vyuˇz´ıvaj´ı pˇredevˇs´ım k podpoˇre a komunikaci se studenty. Ve specifick´ ych ˇcástech AR vypisuj´ı zkouˇsky a zadávaj´ı známky. Referentky studijn´ıho oddˇ elen´ı jsou pravideln´ı uˇzivatelé IS. Dokáˇz´ı vyhledávat jednotlivé informace velice rychle a efektivnˇe. Jsou typick´ ymi tzv. super uˇzivateli. IS by s nimi mˇel poˇc´ıtat a umoˇzn ˇovat jim pracovat zrychlenˇe napˇr. pomoc´ı klávesov´ ych zkratek. Aplikaˇ cn´ı spr´ avce Specificky se jedná o uˇzivatele maj´ıc´ı ˇcásteˇcné znalosti o procesech a datech, které ostatn´ı uˇzivatelé nevˇedomky pouˇz´ıvaj´ı. Jsou typick´ ymi tzv. super uˇzivateli. Znaj´ı r˚ uzná zákout´ı IS. V rámci své diplomové práce jsem rozhodl po konzultaci s vedouc´ım práce zamˇeˇrit se na u ´zkou v´ yseˇc c´ılové skupiny. To pˇredevˇs´ım proto, ˇze v rámci své práce potˇrebuji dostatek osob, které se budou ochotny z´ uˇcastnit r˚ uzn´ ych testován´ı a anal´ yz. Do této ˇ nebo jin´ v´ yseˇce spadaj´ı studenti at’ uˇz studenti z BIVS ych vysok´ ych ˇskol.

4.2

Rozhovory

C´ılem rozhovor˚ u s uˇzivateli je pˇredevˇs´ım pochopen´ı jejich c´ıl˚ u a motivac´ı pro pouˇz´ıván´ı IS. Protoˇze jejich motivace, skuteˇcné c´ıle jsou zpravidla naprosto odliˇsné od toho, co vˇetˇsina v´ yvojáˇr˚ u zam´ yˇsl´ı. Pˇ r´ıprava rozhovor˚ u Na základˇe sv´ ych zkuˇsenost´ı a doporuˇcen´ı [13] jsem zvolil strukturované rozhovory, tj. stanovil jsem si základn´ı oblasti, kter´ ych jsem se bˇehem rozhovor˚ u chtˇel dotknout, ale skuteˇcn´ y vlastn´ı pr˚ ubˇeh jsem nechal vˇzdy situaci, abych nebyl pˇr´ıliˇs svázán pˇredepsan´ ym scénáˇrem.

27

M´ısto proveden´ı jsem nechal vˇzdy na u ´ˇcastn´ıkovi sezen´ı, aby mˇel moˇznost si zvolit známé prostˇred´ı a t´ım nebyl v tak velkém stresu a sezen´ı mohlo probˇehnout tváˇr´ı v tváˇr. Aby bylo dosaˇzeno validn´ıch zjiˇstˇen´ı, je bˇehem rozhovor˚ u nutné dodrˇzovat nˇekolik následuj´ıc´ıch princip˚ u [13], které jsem doplnil o vlastn´ı zkuˇsenosti: Zamˇ eˇ rovat se na pˇ r´ıtomnost lidé umˇej´ı dobˇre popsat, jak vˇeci pouˇz´ıvaj´ı v souˇcasné dobˇe. Otázky t´ ykaj´ıc´ı se budoucnosti patˇr´ı sp´ıˇse do oblasti marketingové v´ yzkumu a lidé nemohou vˇedˇet, jak budou pouˇz´ıvat vˇeci, které jeˇstˇe neexistuj´ı, protoˇze nov´ y produkt m˚ uˇze kompletnˇe zmˇenit jejich dosavadn´ı chován´ı. B´ yt konkr´ etn´ı a ptát se do hloubky. Je vhodné nespokojit se s jednoduchou odpovˇed´ı, ale vyˇz´ıt tzv. The Five Whys [10]. Jedná se o techniku, která se snaˇz´ı prozkoumat vztahy mezi pˇr´ıˇcinou a následkem. B´ yt otevˇ ren´ y a nev´ est tj. pokládat otevˇrené otázky a nenavádˇet k odpovˇedi. Parafr´ azovat a nechat si potvrdit je vhodné vˇzdy urˇcité celky zopakovat a nechat si od participanta potvrdit, ˇze jste je parafrázovali správnˇe. Nevym´ yˇ slet ˇ reˇ sen´ı, protoˇze v tuto chv´ıli nejste v roli designera je vhodné si vˇeci jen zapisovat a následnˇe zesumarizovat. Neb´ yt sebestˇ redn´ y a ptát se podrobnˇe na vˇse. Participanti jsou v roli experta a oni maj´ı vysvˇetlovat nám. Projektivn´ı techniky Projektivn´ı techniky nám slouˇz´ı k hlubˇs´ımu pochopen´ı, jak lidé pˇrem´ yˇsl´ı, chovaj´ı se a vn´ımaj´ı. Tato technika rozˇsiˇruje a doplˇ nuje klasické rozhovory. ˇ Casto potˇrebujeme znát odpovˇed’ na otázky, o kter´ ych lidé vˇedomˇe nepˇrem´ yˇslej´ı. V pˇr´ıpadˇe takovéhoto dotazu zaˇc´ınaj´ı odpovˇed’ fabulovat. [8]

4.2.1

Proveden´ı rozhovor˚ u

V´ ysledky rozhovor˚ u jsem shrnul do následuj´ıc´ıch bod˚ u. Kaˇzd´ y tento bod sumarizuje nˇejakou oblast, o které se participant vyjadˇroval. Tyto v´ ysledky mi budou slouˇzit jako ˇ podklad pro dalˇs´ı ˇcást procesu zlepˇsen´ı uˇzivatelského rozhran´ı IS BIVS.

28

Kladnˇ e hodnocen´ eˇ c´ asti IS • Pracovnice studijn´ıho oddˇelen´ı bˇehem uznáván´ı pˇredmˇet˚ u mohou a vyuˇz´ıvaj´ı jiˇz zadan´ ych pˇredmˇet˚ u v systému. • Vlastn´ı jazyk pro dotazy do databáze. Pˇredevˇs´ım pro pokroˇcil´ y v´ ybˇer seznam˚ u. • Byt’ lehce nepˇrehledná notifikace zmˇen t´ ykaj´ıc´ı se uˇzivatele. Tuto volbu si mus´ı uˇzivatel explicitnˇe povolit. • Souborov´ y manaˇzer pouze pro pˇrihláˇsené. Z´ apornˇ e hodnocen´ eˇ c´ asti IS • Nepˇrehlednost systému. Studenti maj´ı problém nacházet i pravidelnˇe navˇstˇevované ˇca´sti jako napˇr. rozvrh a zapsané práce. Bˇehem rozhovoru jsem vyzval jednoho participanta, jestli by mi mohl naj´ıt jeho zapsanou práci z minulého roku. Zadán´ı své práce naˇsel po nˇekolika minutách bloudˇen´ı. • Mezi ˇcasto zmiˇ novan´ ymi v´ ytkami byla pˇrem´ıra informac´ı resp. textu na vˇsech stránkách. • Jako kaˇzdo-semestráln´ı boj studenti uvedli tisk rozvrhu. Jakoˇzto studenti dálkového

studia je jejich rozvrh sv´ ym zp˚ usobem specifick´ y, nebot’ nemá opakuj´ıc´ı se ˇcásti. D´ıky tomuto specifiku se implicitnˇe zobrazuje vypsan´ y v jednom t´ ydnu s poznámkami pod ˇcarou.

• Jako velice nepˇrehledn´ y dále uvedli i souborov´ y manaˇzer, pomoc´ı kterého si mohou stahovat materiály k pˇredmˇet˚ um. • Jako velice zmateˇcné povaˇzuj´ı pˇrep´ınán´ı mezi jednotliv´ ymi semestry. I dalˇs´ı uˇzivatelé ˇr´ıkali, ˇze v pˇr´ıpadˇe pˇrepnut´ı se jim ˇspatnˇe udrˇzuje kontext. • Od správce IS jsem se dozvˇedˇel, ˇze nˇekteˇr´ı pedagogové maj´ı problémy s nˇekter´ ymi kroky a obracej´ı se na nˇej, aby jim tyto informace pomohl zadat do systému. • Pˇri generován´ı diplom˚ u a jejich dodatk˚ u je potˇreba manuáln´ı kontrola. V pˇr´ıpadˇe chyby vˇse znova vygenerovat.

29

• V hromadn´ ych e-mailech nejde pˇridávat pˇr´ılohy. • Absence synchronizace kalendáˇre s mobiln´ımi zaˇr´ızen´ımi. Vizualizace V rámci zbylého ˇcasu bˇehem rozhovoru jsem vyuˇzil metody vizualizace a poˇzádal pár participant˚ u, aby si pˇredstavili, ˇze popisovan´ y IS je d˚ um. Následnˇe tento d˚ um popsali, jak vypadá, zdali by tam chtˇeli bydlet apod. Chata Postupnˇe nekonzistentnˇe dostavováno a vylepˇsováno bez vize do budoucna. Vhodné jen na pˇrespán´ı. Pouˇzité jen staré vˇeci, co se mi uˇz doma nehodily. Bytovka Mnoho neuspoˇrádan´ ych byt˚ u. Velké mnoˇzstv´ı schodiˇst’, kaˇzdé jen nˇekam a nˇekterá patra dostupná jen z urˇcit´ ych byt˚ u. Chyb´ı jedno centráln´ı schodiˇstˇe. Velk´ y star´ y d˚ um Participant popsal IS jako velk´ y tmav´ y star´ y d˚ um. Bylo by v nˇem hodnˇe podobn´ ych pokoj˚ u s dlouh´ ymi chodbami. Na základˇe tˇechto popis˚ u lze usuzovat, ˇze ˇs´ıˇre IS je pro uˇzivatele obrovská a ˇspatnˇe se jim v n´ı orientuje.

4.3

Potˇ reby uˇ zivatel˚ u

Pochopit a naj´ıt skuteˇcné potˇreby uˇzivatel˚ u je kritické pro u ´spˇech obecnˇe jakéhokoliv produktu. Jako vhodné zdroje uvád´ı [43] následuj´ıc´ı: • Proj´ıt si data z webové analytiky nad jiˇz existuj´ıc´ım obsahem. • Analyzovat logy hledan´ ych v´ yraz˚ u na stránce. • Promluvit si s lidmi, kteˇr´ı jsou v pˇr´ımém kontaktu s uˇzivateli jako helpdesk a call-centra. • Uˇzivatelsk´ y v´ yzkum a hloubkové rozhovory. Ostatn´ı c´ıle Jedná se o c´ıle daného systému, byznys c´ıle, technické apod. Tyto c´ıle je nutné brát pˇri designu v potaz, ale nesm´ı nám urˇcovat vlastn´ı smˇeˇrován´ı designového procesu. [16]

30

Uˇ zivatelsk´ e pˇ r´ıbˇ ehy nebo-li User Stories popisuj´ı: Akt´ er – osoba vyuˇz´ıvaj´ıc´ı produkt. Pˇ r´ıbˇ eh – k ˇcemu aktér potˇrebuje dan´ y produkt. C´ıle – proˇc aktér potˇrebuje dan´ y produkt. Uˇzivatelské pˇr´ıbˇehy jsou agiln´ım pˇr´ıstupem k popisu, uchopen´ı a udrˇzen´ı uˇzivatelsk´ ych potˇreb napˇr´ıˇc v´ yvojov´ ym t´ ymem v celém ˇcase v´ yvoje produktu. Jednotlivé pˇr´ıbˇehy se zapisuj´ı na kartiˇcky, které obsahuj´ı popisek a nˇekolik vˇet textu. Pˇri popisu je nutné správnˇe napsat pˇr´ıbˇeh, a to vˇcetnˇe vysvˇetlen´ı proˇc má aktér danou potˇrebu. [48] Struktura uˇzivatelsk´ ych pˇr´ıbˇeh˚ u: • titulka, • aktér, • pˇr´ıbˇeh, • c´ıl. Aktér: Pˇr´ıbˇeh: C´ıl:

Jako Já chci Abych

student vidˇet jednoduch´ y pˇrehled vypsan´ ych zkouˇsek. si mohl snadno naplánovat, kdy na kterou p˚ ujdu.

Tabulka 4.1: Karta s uˇzivatelsk´ ym pˇr´ıbˇehem. Zdroj: vlastn´ı.

4.3.1

Definice c´ıl˚ u a uˇ zivatelsk´ ych pˇ r´ıbˇ eh˚ u

Na základˇe pˇredchoz´ıch proveden´ ych rozhovor˚ u jsem sestavil následuj´ıc´ı uˇzivatelské pˇr´ıbˇehy, které popisuj´ı nejˇcastˇejˇs´ı problémy, které uˇzivatelé ˇreˇs´ı. Jedná se o rozsáhl´ y informaˇcn´ı systém, kter´ y mus´ı pokr´ yvat i jednorázové nucené akce ze strany uˇzivatele. Tuto agendu je nutné respektovat a proto jsem ji pˇri dalˇs´ım návrhu zapracoval do prototypu. Rozvrh – vytisknout si aktuáln´ı rozvrh

31

Zapsan´ e pˇ redmˇ ety zjistit popis pˇredmˇet˚ u. Zn´ amky zjistit jaké má známky za tento a ostatn´ı semestry. Osobn´ı u ´ daje zkontrolovat správnost. Zadan´ı DP naj´ıt oficiáln´ı zadan´ı DP. Zkouˇ sky zjistit a zapsat se na vhodn´ y term´ın zkouˇsky. Informace o pˇ redmˇ etu naj´ıt informace o pˇrednáˇseném pˇredmˇetu. Harmonogram AR aktuáln´ı harmonogram AR. Smˇ ernice na vypracov´ an´ı DP naj´ıt smˇernici pro vypracován´ı DP Faktury vytisknout posledn´ı fakturu za studium.

4.4

Testov´ an´ı st´ avaj´ıc´ıho IS bez uˇ zivatele

Testován´ı bez uˇzivatele (Expertn´ı ohodnocen´ı) patˇr´ı spoleˇcnˇe s metodami kompetitivn´ı studie, srovnávac´ı studie a mnoha dalˇs´ıch k tzv. rychl´ ym a levn´ ym metodám. Jedná se o metodiky, které v rané fázi v´ yvoje pomáhaj´ı v´ yvojáˇr˚ um a designer˚ um udrˇzet vyv´ıjen´ y produkt v zam´ yˇslen´ ych kolej´ıch. Jakákoliv zmˇena na prototypu je totiˇz ˇrádovˇe levnˇejˇs´ı neˇz zmˇena ve fináln´ı verzi. [31] V této kapitole pomoc´ı dvou metod ohodnot´ım urˇcité ˇcásti IS z hlediska obecnˇe pˇrij´ıman´ ych pravidel pouˇzitelnosti (Nielsenov´ ych heuristik) a pomoc´ı Etnografického v´ yzkumu. V´ ysledkem anal´ yzy bude soubor zjiˇstˇen´ı, na které bude vhodné se zamˇeˇrit v rámci redesignu v následuj´ıc´ı kapitole.

4.4.1

Nielsenovy heuristiky

Následuj´ıc´ıch 10 heuristik Jakoba Nielsena [26] jsou obecnˇe vyuˇzitelné principy pro návrh interakˇcn´ıho designu. Jejich definice je velice volná, a proto jsou velice snadno aplikovatelné v praxi. Jak p´ıˇse sám Jackob Nielsen [26], nen´ı u ´plnˇe vhodné provádˇet vyhodnocen´ı pouˇzitelnosti pomoc´ı heuristik pouze jedn´ım ˇclovˇekem, protoˇze ten nikdy nenajde

32

vˇsechny chyby v pouˇzitelnost. Nutno dodat, ˇze vˇsechny chyby nenajde ani vˇetˇs´ı mnoˇzstv´ı tester˚ u.

M´ıra nalezen´ ych problém˚ u [%]

P roblemsF ound(i) = N (1

(1

l)i )

100 80 60 40 20 0

0

2 4 6 8 10 12 14 Poˇcet odborn´ ych hodnotitel˚ u

16

Obrázek 4.1: Kˇrivka znázorˇ nuj´ıc´ı m´ıru nalezen´ ych chyb k poˇctu hodnotitel˚ u. Zdroj: upraveno autorem z [26].

Funkce P roblemsF ound(i), ˇr´ıká kolik r˚ uzn´ ych problém˚ u s pouˇzitelnost´ı bylo nalezeno agregován´ım report˚ u od i nezávisl´ ych odborn´ık˚ u. N znaˇc´ı celkov´ y poˇcet problém˚ u s pouˇzitelnost´ı a I znaˇc´ı m´ıru vˇsech problému nalezen´ ych individuálnˇe jednotliv´ ymi odborn´ ymi hodnotiteli. Jak lze identifikovat pohledem na vykreslenou kˇrivku, je jasné, ˇze testován´ı je nutno provést se tˇremi aˇz pˇeti testery, proto jsem poˇzádal dalˇs´ı kolegy, aby mi pomohli zhodnotit rozhran´ı pro uˇzivatelské scénáˇre.

4.4.2

Popis Nielsenov´ ych heuristik

Viditelnost stavu syst´ emu Systém v kaˇzdém okamˇziku informuje uˇzivatele o svém stavu vhodnou zpˇetnou vazbu v rozumném ˇcase. Shoda syst´ emu s re´ aln´ ym svˇ etem Systém mluv´ı sp´ıˇse jazykem uˇzivatele neˇz jazykem domény systému. Dále jsou dodrˇzovány zvyklosti a konvence z reálného svˇeta.

33

Uˇ zivatelsk´ a kontrola a svoboda Uˇzivatelé chybuj´ı a maj´ı m´ıt moˇznost u ńikového východu tedy odvolán´ı nechtˇené volby. Podpora zpˇet a vpˇred. Konzistence a standarty Uˇzivatelé by nemˇeli b´ yt nuceni pˇrem´ yˇslet o tom, jestli r˚ uzná slova, situace a nebo akce znamenaj´ı totéˇz. Prevence chyb Prevence pˇred vznikem chyb je lepˇs´ı neˇz jakákoliv chybová hláˇska. Kontrola na správnost zadávan´ ych u ´daj˚ u jeˇstˇe pˇred jejich odeslán´ım. Rozpozn´ an´ı pˇ red zapamatov´ an´ım Objekty a akce by mˇely b´ yt snadno rozpoznatelné. Uˇzivatelé by nemˇeli b´ yt nuceni pamatovat si informace v pr˚ ubˇehu pr˚ uchodu nˇejak´ ym dialogem. Flexibiln´ı a efektivn´ı vyuˇ z´ıv´ an´ı Systém by mˇel pamatovat jak na nové tak i zkuˇsené uˇzivatele. Nováˇcek by mˇel bez problém˚ u vyˇreˇsit sv˚ uj problém a naproti tomu zkuˇsen´ y uˇzivatel by mˇel u ´koly zvládat rychle a efektivnˇe (napˇr. pomoc´ı klávesov´ ych zkratek). Estetick´ y a minimalistick´ y design Dialogy by nemˇely obsahovat v´ıce informac´ı, neˇz je nezbytnˇe nutné, aby jimi uˇzivatelé nebyli pˇrehlceni. Chybov´ e hl´ aˇ sky Chybové hláˇsky by mˇely b´ yt napsané jako prost´ y text, kter´ y jednoznaˇcnˇe ˇr´ıká, co se stalo a co by uˇzivatel mˇel následnˇe udˇelat. N´ apovˇ eda a dokumentace Dokumentace by mˇela umoˇzn ˇovat snadné vyhledáván´ı, zamˇe-ˇrovat se na c´ıle uˇzivatele.

4.4.3

Aplikace Nielsenov´ ych heuristik

Za pomoci v´ yˇse uveden´ ych heuristik jsem s pomoc´ı dvou dalˇs´ıch zkuˇsen´ ych koleg˚ u jsme provedli nezávisle ohodnocen´ı na nˇekolik uˇzivatelsk´ ych pˇr´ıbˇeh˚ u. Dle svˇetovˇe uznávané autority Jakoba Nielsena, kter´ y v ˇclánku1 pojednávaj´ıc´ım o zmiˇ nované heuristice uvád´ı jako vhodn´ y poˇcet hodnotitel˚ u tˇri aˇz pˇet, kde pomˇer cena a v´ ykon je nejv´ıce bl´ıˇz´ı k optimu. A to z toho d˚ uvodu, ˇze pˇri tomto poˇctu dojde na nalezen´ı zhruba 70 % nejzávaˇznˇejˇs´ıch chyb. V následuj´ıc´ıch odstavc´ıch proberu nˇekolik zjiˇstˇen´ ych chyb. 1

http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/

34

Viditelnost stavu syst´ emu a Konzistence a standardy Pˇri pohledu na tento prav´ y panel lze vidˇet poruˇsen´ı hned dvou r˚ uzn´ ych heuristik. Prvn´ı je viditelnost a stav systému. Z obrázku nen´ı jasné, jestli mám napˇr. prázdnou e-mailovou schránku a nebo zda ji mám v˚ ubec zprovoznˇenou. Uˇzivatel nemá ˇsanci poznat, proˇc se mu tam nic nezobrazuje. Dalˇs´ı poruˇsené pravidlo je konzistence a standardy. O kousek n´ıˇze je vidˇet, ˇze na Vývˇesce nemám ˇzádné nové zprávy. Tedy zde IS jiˇz správnˇe informuje o nulovém stavu v porovnán´ı se sekc´ı e-mailové schránky v pˇredchoz´ım odstavci.

Obrázek 4.2: Systém nijak nezobrazuje nulové stavy. Zdroj: vlastn´ı.

Viditelnost stavu syst´ emu Menu nezobrazuje, která poloˇzka je právˇe aktivn´ı. Uˇzivatel mus´ı pˇresunout pozornost aˇz tam, kde se nacház´ı drobeˇcková navigace. Estetick´ y a minim´ aln´ı design a Shoda syst´ emu s re´ aln´ ym svˇ etem V pˇr´ıpadˇe ankety za právˇe skonˇcen´ y semestr se na spodku stránky nacház´ı rozsáhl´ y návod na vyplnˇen´ı ankety. Takové návody ˇcte opravdu málo lid´ı. V´ıce se této problematice vˇenuji v pˇredchoz´ı kapitole. Tento text zbyteˇcnˇe zaplˇ nuje obsah stránky.

35

Obrázek 4.3: Z menu nen´ı jasné, kde se aktuálnˇe nacház´ım. Zdroj: vlastn´ı.

Dále hned v u ´vodu stránky lze naj´ıt pokyn, aby uˇzivatel sescroloval dol˚ u a v´ yˇse popsan´ y návod si pˇreˇcetl. Dle zvyklost´ı v západn´ıch civilizac´ı kaˇzd´ y oˇcekává postupné uspoˇrádán´ı informac´ıch zleva doprava a ze shora dol˚ u.

4.5

Test pouˇ zitelnosti st´ av´ aj´ıc´ıho IS

Testován´ı pouˇzitelnosti, v´ıce o testován´ı pouˇzitelnosti dalˇs´ıch kapitolách, jsem provedl s pˇeti participanty v jejich domác´ım prostˇred´ı s jejich poˇc´ıtaˇci, abych co nejv´ıce eliminoval vliv stresu z ciz´ıho prostˇred´ı a ciz´ı techniky. Kaˇzd´ y dostal stejné zadan´ı, které se pokusil splnit. Bˇehem spoleˇcného testován´ı jsem vyuˇzil tzv. techniky myˇslen´ı nahlas. Bˇehem této techniky uˇzivatel nahlas ˇr´ıká o ˇcem pˇrem´ yˇsl´ı a co dˇelá. D´ıky tˇemto komentáˇr˚ um je jednoduˇsˇs´ı pochopit jeho jednotlivé

36

Obrázek 4.4: Minimum lid´ı skuteˇcnˇe ˇcte návody pˇred prvn´ım pouˇzit´ım. Zdroj: vlastn´ı.

mentáln´ı pochody. Bˇehem testován´ı se ukázalo, ˇze zkuˇsen´ı uˇzivatelé maj´ı problém opakovanˇe naj´ıt vˇeci ve struktuˇre IS.

4.5.1

V´ ystup z testov´ an´ı pouˇ zitelnosti

Rozvrh Zde se participanti ˇcasto pot´ ykali s t´ım, ˇze hledali rozvrh v ˇca´sti Student, ale v zobrazovaném dashboardu nevidˇeli odkaz rozvrh. Dalˇs´ım ˇcast´ ym problém bylo, ˇze ´ nedokázali na Uvodn´ ı obrazovce rozliˇsit mezi Rozvrh a M˚ uj rozvrh. Dále jako velice nepˇrehledn´ y hodnotili v´ ypis pˇredmˇet˚ u pro kombinované studenty. Rozvrh je zde vypsán po dnech v t´ ydnu s odkazy, ve kterém datu se vyuˇcuje. Zapsan´ e pˇ redmˇ ety zjistit popis pˇredmˇet˚ u. Zde participanti zvolili dvˇe strategie, bud’ si pˇredmˇety zobrazovali z pˇrehledu známek a nebo z dashboardu pro aktuáln´ı semestr, ale nutno podotknout, ˇze toto zobrazen´ı hodnotili jako velice nepˇrehledné. Zn´ amky tento problém vˇsichni zvládli.

37

Osobn´ı u ´ daje zobrazen´ı popisu osobn´ıch u ´daj˚ u v sekci Personáln´ı bylo pro vˇsechny participanty pˇrekvapuj´ıc´ı. Kaˇzd´ y z nich hledal tyto u ´daje sp´ıˇse v sekci Student, nebot’ oˇcekávali, ˇze studenti jsou oni a tam o nich budou informace. T´ ema DP participanti naˇsli po krátkém hledán´ı. Nejvˇetˇs´ım problémem se ukázala volba Moje témata a Rozpis témat. Informace o pˇ redmˇ etu hledaj´ı participanti r˚ uznˇe bud’ z rozvrhu, z pˇrehledu známek a nebo ze zapsan´ ych pˇredmˇet˚ u. Harmonogram AR Po chv´ıli hledán´ı se harmonogram povedlo naj´ıt jednomu particiˇ Ostatn´ı hledán´ı vzdali a hledali ho pomoc´ı funkce pantovi (aktuáln´ı student BIVS). Vyhledat. Smˇ ernice na vypracov´ an´ı DP Po chv´ıli hledán´ı se harmonogram povedlo naj´ıt jedˇ nomu participantovi (aktuáln´ı student BIVS). Faktury Faktury po chv´ıli hledan´ı v dashboardu naˇsli vˇsichni participanti. Nutno podotknout, ˇze dva z nich nejprve zam´ıˇrili do sekce Personáln´ı.

38

Kapitola 5 Informaˇ cn´ı architektura Zbavte se poloviny slov na kaˇzdé stránce. A potom se zbavte poloviny toho, co zbylo. Steve Krug, Krug˚ uv tˇret´ı zákon pouˇzitelnosti [20]. Na základˇe pˇredchoz´ıch rozhovor˚ u a testu pouˇzitelnosti jsem se rozhodl vˇenovat jednu kapitolu ˇcistˇe o Informaˇcn´ı architektuˇre (IA) jakoˇzto jednomu z nalezen´ ych celkov´ ych problém˚ u. Nebot’ participanti popisovali IS jako velice zmaten´ y systém, ve kterém se jim velice ˇspatnˇe orientuje. Tento fakt jsem si ovˇeˇril i bˇehem testován´ı pouˇzitelnosti, kdy byly chv´ıle, kdy se participanti dostali do stavu, kdy jen náhodnˇe“ klikali a doufali, ˇze ” najdou poˇzadovanou informaci.

5.1

Anal´ yza obsahu webu

Hned na u ´vod je d˚ uleˇzité zd˚ uraznit, ˇze obsah webu tvoˇr´ı vlastn´ı slova, obrázky, audio, video a soubory. Anal´ yza obsahu webu nám pomáhá k pochopen´ı pˇredmˇetu webu, k novém pohledu na známou problematiku, ke snazˇs´ımu vyˇciˇstˇen´ı od starého obsahu apod. M´ıra pochopen´ı obsahu webu závis´ı na mnoˇzstv´ı obsahu a metodˇe poznán´ı, kterou zvol´ıme dle [5]: ´ Upln´ a inventura obsahu prozkoumává veˇsker´ y dostupn´ y obsah, tedy vˇsechny webové stránky, stáhnutelné objekty (PDF, tabulkové seˇsity, programy apod.), vloˇzen´ y obsah (audio a video), komentáˇre a diskuze. Tato poznávac´ı metoda je velice ˇcasovˇe

39

nároˇcná, a proto ne vˇzdy moˇzná. Jej´ı obrovskou v´ yhodou je kompletn´ı pochopen´ı IA. ˇ asteˇ C´ cn´ a inventura obsahu se zamˇeˇruje na urˇcitou v´ yseˇc a hloubku informac´ı. Tato poznávac´ı metoda je vhodná pro obrovské stránky, kde i pochopen´ım ˇca´sti z´ıskáte solidn´ı pˇrehled o IA. Audit obsahu sb´ırá nejménˇe informac´ı v porovnán´ı s pˇredchoz´ımi dvˇema metodami. Bˇehem auditu obsahu jsou sb´ırány informace napˇr´ıˇc stránkami do n´ızké u ´rovnˇe s detaily r˚ uzn´ ych stránek v kaˇzdé sekci. Takto lze dosáhnout detailn´ı informac´ı urˇcit´ ych celk˚ u. Jaké informace sb´ırat: • Popisky link˚ u, • názvy stránek, • typ obsahu, • stáhnutelné zdroje, • status, • datum zmˇeny, • vlastn´ık.

5.1.1

ˇ Anal´ yza obsahu IS BIVS

V nˇekolika následuj´ıc´ıch odstavc´ıch pop´ıˇsi jednotlivé kroky provedené anal´ yzy obsahu. ˇ pˇredstavuje informaˇcn´ı systém s obrovsk´ Jelikoˇz IS BIVS ym mnoˇzstv´ım informac´ı a ˇ asteˇcné inventury obsahu. Tedy ˇsel jsem ve vybran´ vazeb, zvolil jsem proveden´ı C´ ych sekc´ıch1 , pokud to bylo potˇreba, aˇz do druhé u ´rovnˇe odkaz˚ u. Pro vypracován´ı anal´ yzy jsem zvolil strukturovan´ y zápis do tabulky. Pro jej´ı velk´ y rozsah je dostupná na pˇriloˇzeném DVD. Sb´ıral jsem napˇr. informace o popisku, odkazu, 1

Takové, které jsou v souladu s uˇzivatelsk´ ymi c´ıli.

40

titulce c´ılové stránky, jej´ıho obsahu atd. V´ ysledná tabulka mˇela necel´ ych 140 poloˇzek a z toho u ´vodn´ı stránka obsahuje cel´ ych 99 odkaz˚ u. Zde je vidˇet, ˇze v takovém mnoˇzstv´ı odkaz˚ u nen´ı moˇzné se zorientovat, jak potvrdili i sami uˇzivatelé bˇehem hloubkov´ ych rozhovor˚ u a testován´ı pouˇzitelnosti. Následoval krok redukce jednotliv´ ych ˇra´dk˚ u. Postupoval jsem v následuj´ıc´ımi kroky: • Odstranil jsem vˇsechny duplicity, na n´ıˇze uvedeném obrázku znázornˇeny ˇcervenˇe. • Namapoval jsem si jednotlivé ˇrádky na stanovené c´ıle uˇzivatel˚ u. Ty, které jsem nedokázal pˇriˇradit a nebo nebyly nutnou agendou, jsem odstranil.

Obrázek 5.1: V´ ystup anal´ yzy obsahu. Zdroj: vlastn´ı.

41

5.2

Card Sorting

Jedná se o metodu z oblasti User Centered design, pomoc´ı n´ıˇz lze efektivnˇe zv´ yˇsit ˇsanci nalezen´ı informac´ı v systému. Jedná se o levnou a spolehlivou metodu, která pomáhá návrháˇri informaˇcn´ı architektury z´ıskat data a pochopit uˇzivatel˚ uv mentáln´ı model, a to jak klasifikuje data. Tato byla metoda p˚ uvodnˇe vytvoˇrená psychology pro studii jak lidé tˇr´ıd´ı a organizuj´ı své znalosti. Pˇrestoˇze proveden´ı studie je velice levné a rychlé, m˚ uˇzeme pˇri vlastn´ım vyhodnocován´ı dat narazit na následuj´ıc´ı nev´ yhody: jelikoˇz metoda nebere v potaz uˇzivatel˚ uv u ´kol, v´ ysledky nás mohou zavádˇet ˇspatn´ ym smˇerem; vyhodnocen´ı v´ ysledk˚ u nás m˚ uˇze stát mnoho ˇcasu; nemus´ıme zachytit hlubˇs´ı charakteristiky zkouman´ ych dat. Popis metody Card Sortingu. V rámci sezen´ı participanti dostanou kartiˇcky napˇr. s názvy poloˇzek v menu a ty pˇriˇrad´ı do jednotliv´ ych skupin, jak jim to pˇrijde logické. D´ıky tomu lze lépe pochopit a uvˇedomit si, jak uˇzivatelé pˇrem´ yˇslej´ı nad jednotliv´ ymi informacemi v naˇs´ı aplikaci nebo webu. [28] [4] [27] Existuj´ı dva základn´ı druhy zp˚ usoby, jak provést sezen´ı v rámci Card sortingu: Otevˇ ren´ e V rámci tohoto sezen´ı participanti vytváˇrej´ı vlastn´ı skupiny obsahu a pˇriˇrazuj´ı i tˇemto skupinám vlastn´ı pojmenován´ı. Uzavˇ ren´ e Participanti pˇriˇrazuj´ı jednotlivé informace jiˇz do pˇredem pˇripraven´ ych skupin.

Poˇ cet pozorov´ an´ı. Dalˇs´ı d˚ uleˇzit´ ym faktem je, kolik je zapotˇreb´ı participant˚ u, aby ˇslo povaˇzovat v´ ysledky testu za validn´ı. Touto otázkou se zab´ yvala studie Toma Tullise a Larryho Wooda prezentovaná v roce 2004 na konferenci Usability Professionals Association [25]. Jejich studie se z´ uˇcastnilo 168 participant˚ u, kteˇr´ı mˇeli seˇradit 46 karet t´ ykaj´ıc´ıch se IA intranetov´ ych stránek. Následn´ ym vyhodnocen´ım doˇsli k závˇeru, ˇze dostateˇcn´ y poˇcet participant˚ u je mezi 20-30. Nicménˇe Jakob Nielsen [29] ve svém ˇclánku navrhuje, ˇze jiˇz 15 participantech korelace v datech dosahuje 0,9 oproti 0,95 pˇri 30 participantech. Nielsen povaˇzuje právˇe korelaci 0,9 jako dostateˇcnou2 . 2

N´ aklady na testov´ an´ı tj. pˇredevˇs´ım odmˇena participant˚ um za u ´ˇcast na v´ yzkumu.

42

Obrázek 5.2: Korelaˇcn´ı koeficient pro r˚ uzné velikosti vzork˚ u s vyznaˇcnou chybou. Zdroj: pˇrevzato z [25]

Zpracov´ an´ı v´ ysledk˚ u Po ukonˇcen´ı anal´ yzy pomoc´ı Card Sortingu nasb´ıráme obrovské mnoˇzstv´ı dat, které je nutno zpracovat nejlépe poloautomaticky nebo automaticky zpracovat. Velice vhodnou metodou na zpracován´ı dat je vyuˇzit´ı shlukové anal´ yzy dat z matematické statistiky. Hierarchick´ a clusterov´ a anal´ yza. Iteraˇcn´ım postupem shlukuje jednotlivé clustery dle pˇredem zvolené metody (metriky). Postupnˇe vznikaj´ıc´ı dendrogram (strom) nám znázorˇ nuje jednotlivé kroky shlukován´ı. Jednou z takov´ ych metod je Average Linkage, která ˇr´ıká, ˇze vzdálenost dvou cluster˚ u je pr˚ umˇerná vzdálenost vˇsech dvojic prvk˚ u (prvn´ı prvek z prvn´ıho clusteru a druh´ y vˇzdy z druhého clusteru). Vzdálenost cluster˚ u A a B s vzdálenostn´ı metrikou d je v metodˇe Average linkage

43

definována jako [2]:

XX

d(a, b)

a2A b2B

(5.1)

|A| · |B|

Dalˇs´ım zástupcem je Complete Linkage, kter´ y vzdálenost dvou cluster˚ u definuje jako vzdálenost jejich dvou nejvzdálenˇejˇs´ıch prvk˚ u:

D(X, Y ) =

max

x2X, y2Y

d(x, y)

(5.2)

Nebo single-linkage clustering, kter´ y jako vzdá-lenost dvou cluster˚ u definuje jako vzdálenost jejich dvou nejbliˇzˇs´ıch prvk˚ u:

D(X, Y ) =

min

x2X, y2Y

d(x, y)

(5.3)

Nehierarchick´ a clusterov´ a anal´ yza. Na základˇe poˇzadovaného poˇctu cluster˚ u iteraˇcnˇe najde nejvhodnˇejˇs´ı rozdˇelen´ı prvk˚ u do daného poˇctu cluster˚ u. [37] Algoritmus 1 K-Medoid algortimus 1: Inicializace: N´ ahodnˇe zvol k prvk˚ u (medoidy) z celkov´ ych n dat. 2: Pˇ riˇ razen´ ı: Pˇriˇrad’ kaˇzd´ y prvek k nejbliˇzˇs´ımu medoidu. 3: Aktualizace: Pro kaˇ zd´ y medoid m a kaˇzd´ y prvek o pˇriˇrazen´ y k m (obsaˇzen´ y v clusteru s medoidem m) zamˇen ˇ m a o a spoˇcti celkovou cenu konfigurace (tj. pr˚ umˇernou vzdálenost o a vˇsech prvk˚ u z cluster˚ u m. Vyber medoid o s nejniˇzˇs´ı cenou konfigurace. 4: Opakuj: kroky 2 a 3 dokud se konfigurace mˇ en´ı.

5.2.1

Proveden´ı cardsortingu

Jako vstupn´ı data jsem pouˇzil v´ ysledek pˇredchoz´ı anal´ yzy obsahu. V´ ysledkem bylo 44 karet, které jsem zaˇradil do testu pomoc´ı online nástroje Concept Codify3 . Test by nastaven následovnˇe, participant musel provést otevˇren´ y cardsorting ˇ a dále jsem a rozˇradit vˇsech 44 karet. O vyplnˇen´ı jsem poˇza´dal kolegy z ITaM BIVS selektivnˇe oslovil o pomoc své kamarády, kteˇr´ı spadaj´ı do c´ılové skupiny. 3

https://conceptcodify.com

44

Poˇcet participant˚ u Celkov´ y poˇcet skupin Pr˚ umˇernˇe skupin Maximum skupin Minimum

21 146 6,95 14 4

Tabulka 5.1: Shrnut´ı v´ ysledk˚ u testován´ı. Zdroj: vlastn´ı.

5.2.2

Statistick´ e zpracov´ an´ı dat

Pˇred vlastn´ı zpracován´ım dat je vhodné data tzv. vyˇcistit. Tedy proj´ıt si data a hledat na prvn´ı pohled r˚ uzné anomálie jako napˇr. odpovˇed’ s poˇctem skupin, která je silnˇe mimo pr˚ umˇer, zavádˇej´ıc´ı názvy skupin apod. Pˇresto je potˇreba m´ıt na pamˇeti, ˇze expert v dané oblasti m˚ uˇze správnˇe rozdˇelit karty do mnoha skupin, protoˇze má lepˇs´ı pˇrehled, a taková odpovˇed’ je pro nás ˇza´douc´ı. Pˇri zpracován´ı dat v ˇceském jazyce je potˇreba také vˇenovat pozornost interpunkci a nebo jen obyˇcejn´ ym pˇreklep˚ um. [6] Matici podobnosti a hrubá data jsem zpracoval pomoc´ı kombinac´ı skript˚ u4 v Ruby, programu R pro statistické v´ ypoˇcty a nebo pomoc´ı tabulkového procesoru Excel.

4

Datové soubory a veˇskeré skripty jsou elektronicky pˇriloˇzeny na DVD.

45

Obrázek 5.3: Vizualizace jednotliv´ ych spojen´ı pomoc´ı chord diagramu. Zdroj: vlastn´ı.

46

Podobnost 0.00

0.50

0.75

1.00

Cluster Dendrogram

Vypsané témata závěrečných prací Přehled témat závěrečných prací Termíny státní závěrečné zkoušky Závěrečná zkouška Můj rozvrh Předběžné rozvrhy Vyhledávání rozvrhu Vypsané zkoušky Přihlásit se na zkoušku Vypsané semináře Vypsané seminární témata Předměty Zápis předmětů Známky za celé studium Známky za aktuální semestr Moje záverečná práce Moje témata prací Studijní materiály mých předmětů Moje faktury školného Nastavení veřejného profilu Změna přezdívky Změna hesla Moje e−mailová schránka Můj profil Moje karta BIVŠ Můj ISIC/ALIVE Kontrola a změny osobních údajů Moje osobní údaje Moje číslo účtu Dokumenty Metodické pokyny Formuláře a žádosti studijního oddělení Výhlášky Harmonogram AR Přijímací řízení Ubytovací stipendium Stipendia Vložit na Vývěsku Vývěska Anketa studia E−volby Lidé na BIVŠ Správce vložených souborů v IS Nápověda

0.25

Obrázek 5.4: V´ ysledn´ y strom pˇri generovan´ y pomoc´ı Avarage linkage Zdroj: vlastn´ı.

47

5.2.3

V´ ysledn´ e seskupen´ı poloˇ zek

Pˇredchoz´ı v´ ystupy z anal´ yz nelze u ´plnˇe bezmyˇslenkovitˇe pouˇz´ıt. Proto jsem si vzal pˇredchoz´ı v´ ystupy jako nult´ y krok a iterativnˇe postupem doˇsel k následuj´ıc´ımu v´ ysledku. Jako podklady jsem pouˇzil a porovnal v´ ysledky generován´ı stromu pomoc´ı metody Average linkage, Single linkage a Complete linkage, nehierarchická clusterové anal´ yzy a matici podobnosti. Porovnával r˚ uzné ˇrezy v jednotliv´ ych stromech a hledal jsem dalˇs´ı spojitosti v datech. Bˇehem celého procesu jsem vyuˇz´ıval pˇredevˇs´ım post-it lep´ıc´ı pap´ırky a myˇslenkové mapy, které se v praxi ukazuj´ı jako velice vhodn´ y nástroj pro vizualizace vlastn´ıch myˇslenek.

Obrázek 5.5: Postupn´ y návrh... Zdroj: vlastn´ı.

48

Kapitola 6 N´ avrh nov´ eho uˇ zivatelsk´ eho rozhran´ı Proces návrhu uˇzivatelského rozhran´ı se u kaˇzdého designéra lehce liˇs´ı. Je bˇeˇzné, ˇze nˇekteré fáze jsou vypuˇstˇené a nebo se kaˇzdé fázi vˇenuje r˚ uzné mnoˇzstv´ı ˇcasu. Z vlastn´ı zkuˇsenosti se vyplat´ı vˇenovat velké u ´sil´ı v u ´vodn´ı fázi k pochopen´ı potˇreb uˇzivatele a v rané fázi prototypován´ı, kdy je potˇreba vymyslet a následnˇe syntetizovat velké mnoˇzstv´ı nápad˚ u. Naopak v závˇereˇcn´ ych fáz´ıch je dát pˇrednost efektivitˇe a produktivitˇe pˇri dokonˇcován´ı fináln´ıho prototypu. Je bˇeˇzné, ˇze r˚ uzné fáze v´ yvoje pouˇz´ıvaj´ı r˚ uzné druhy u ´rovnˇe prototyp˚ u od nejjednoduˇsˇs´ıch aˇz po ty na prvn´ı pohled nerozeznatelné od fináln´ıho produktu. Jsou to následuj´ıc´ı dle [7]: Skeˇ ce rychlé hrubé nákresy nápad˚ u uˇzivatelského rozhran´ı. Wireframy pˇredstavuj´ı hrubou kostru postavenou ze základn´ıch objekt˚ u. Mockups detailn´ı statické zobrazen´ı vˇcetnˇe veˇskeré grafiky, font˚ u a obrázk˚ u. Prototypes vznikaj´ı pˇridán´ım interaktivity ˇc´ı animac´ı do mockup˚ u. Kaˇzd´ y druh umoˇzn ˇuje se soustˇredit na jin´ y problém v dané fázi v´ yvoje, kdy skeˇce jsou vhodné k rychlému generován´ı obrovského mnoˇzstv´ı nápad˚ u a naproti tomu fináln´ı prototyp je v´ yborn´ y pro kontrolu a ladˇen´ı jednotliv´ ych detail˚ u. Prototypován´ı umoˇzn ˇuje

49

ve velice mal´ ych nákladech z´ıskat lepˇs´ı pˇredstavu a zpˇetnou vazbu o vyv´ıjeném produktu a uˇsetˇrit nemalé finanˇcn´ı náklady na zmˇenu jiˇz vypuˇstˇeného produktu. V následuj´ıc´ı kapitole postupn´ ymi iteracemi vytvoˇr´ım drátˇené modely a klikac´ı highfidelity prototyp1 v aplikaci Sketch 3 a UXPin.

6.1

C´ıle n´ avrhu

• Odstranˇen´ı zbyteˇcn´ ych prvk˚ u a textu. • Vyuˇz´ıvat standardn´ı elementy a rozvrˇzen´ı stránky. • Zachovat stáváj´ıc´ı základn´ı agendu IS. • Lépe strukturovat web. • Zv´ yˇsit pˇrehlednost a moˇznost nalezen´ı informac´ı v aplikaci.

6.2

Skicov´ an´ı

Obrázek 6.1: Ukázka skeˇce. Zdroj: vlastn´ı.

Základn´ı a jeden z nejjednoduˇsˇs´ıch a nejefektivnˇejˇs´ıch zp˚ usob˚ u pro hrub´ y návrh uˇzivatelského rozhran´ı. Pomoc´ı obyˇcejné tuˇzky, pap´ıru a nebo fixy a b´ılé tabule lze 1

Prototyp na prvn´ı pohled nerozeznateln´ y od fináln´ıho produktu

50

snadno konzultovat s osobami zainteresovan´ ymi do projektu, které se ale nepod´ılej´ı na jeho návrhu. Bˇehem v´ yvoje jsem vytvoˇril nˇekolik r˚ uzn´ ych skic navrhovaného uˇzivatelského rozhran´ı. Tyto skici jsem pr˚ ubˇeˇznˇe prob´ıral s r˚ uzn´ ymi lidmi a na základˇe jejich zpˇetné vazby postupnˇe upravoval, aˇz vznikly podklady, ze kter´ ych jsem vytvoˇril drátˇené modely.

6.3

Wireframy

Drátˇené modely, neboli wireframy, pˇridávaj´ı vznikaj´ıc´ımu designu aplikace dalˇs´ı kus podrobnosti, a to pˇredevˇs´ım pomoc´ı zástupn´ ych element˚ u, které pˇredstavuj´ı konkrétn´ı obsah. D´ıky této ˇca´steˇcné abstrakci se lze lépe soustˇredit, na to zda jsou prvky vhodnˇe logicky rozm´ıstˇeny na ploˇse aplikace. V této ˇcásti designován´ı se nevˇenuje pozornost v´ ysledné grafické podobˇe prvk˚ u a proto je vhodné wireframy vytváˇret jen ve stupn´ıch ˇsedi.

Obrázek 6.2: Wireframe u ´vodn´ı obrazovky IS. Zdroj: vlastn´ı.

6.4

Mockups

Jsou jiˇz témˇeˇr doladˇené statické pohledy na aplikaci. Obsahuj´ı témˇeˇr pln´ y a nebo pln´ y vizuáln´ı design vˇcetnˇe barev a typografii. Mockupy jsou velice obl´ıbené u zaintereso-

51

van´ ych osob2 , protoˇze pˇredstavuj´ı v´ ystupy velice podobné fináln´ımu produktu. Jako nástroje pro tvorbu mockup˚ u jsem si zvolil program Sketch 3, kter´ y umoˇzn ˇuje snadno a efektivnˇe vytvoˇrit sled obrazovek.

Obrázek 6.3: Mockup návrhu obrazovky s v´ ypisem faktur ˇskolného. Zdroj: vlastn´ı.

6.5

Prototypy Prototyp = nejlevnˇejˇs´ı investice. Pavel Zima, seznam.cz.3

Pˇridán´ım interakce mockup˚ um vznikaj´ı prototypy, které nám umoˇzn ˇuj´ı proj´ıt si a otestovat interakci na v´ ystupu, kter´ y b´ yvá na prvn´ı pohled nerozeznateln´ y od fináln´ıho produktu. V této fázi je vhodné provést kompletn´ı test pouˇzitelnosti a odhalit chyby v pouˇzitelnosti jeˇstˇe pˇred vlastn´ım v´ yvojem produktu. Pro pˇridán´ı interakce a následné vzdálené testován´ı pouˇzitelnosti jsem zvolil komplexn´ı ˇreˇsen´ı dostupné pomoc´ı webové aplikace UXPin. Do té lze naimportovat hotové mockupy z aplikace Sketch a doplnit o nutnou logiku a pˇrechody. 2 3

stakeholders Pˇredn´ aˇska na Business IT Club, 10. 4. 2013.

52

6.6 6.6.1

Grafick´ y n´ avrh Typografick´ a mˇ r´ıˇ zka

V grafické designu mˇr´ıˇzka, neboli anglicky grid, pomáhá vhodnˇe rozloˇzit jednotlivé elementy jako text a obrázky. Mˇr´ıˇzka se postupnˇe z Konstruktivistického umˇen´ı kolem roku 1930 dostala do oblasti typografie a komerˇcn´ıho designu. Vhodn´ ym zvolen´ım reáln´ ych pomˇer˚ u 1:2 a 2:3 nebo iracionáln´ıho 1:1,414 (pomˇer A4). Správnou kombinac´ı lze vytvoˇrit jednoduchou mˇr´ıˇzku, se kterou lze pak i vytvoˇrit harmonickou kompozici. Jak p´ıˇse Mark Boulton ve své sérii ˇclánk˚ u, [32] volbou správného pomˇeru lze doc´ılit nejen vizuálnˇe estetického rozloˇzen´ı, ale také velice pouˇzitelného produktu. K tuto velice odváˇznou myˇslenku bych rád konfrontoval s volnˇe interpretovan´ ym ˇ v´ yrokem Mgr. Jakuba France, Ph.D., pedagoga na UK a CVUT a senior UX manager v AVG technologies, na jedné z pˇrednáˇsek Psychologie uˇzivatelského rozhran´ı. S produkty, které se nám l´ıb´ı, máme vˇetˇs´ı trpˇelivost. Tedy, ˇze nejsou de facto pouˇzitelnˇejˇs´ı, ale naˇse m´ıra tolerance jejich nepouˇzitelnosti je vyˇsˇs´ı neˇz u produkt˚ u, které nejsou tak esteticky pˇritaˇzlivé. [15]

Obrázek 6.4: Typografická mˇr´ıˇzka. Zdroj: vlastn´ı.

53

6.6.2

B´ıl´ e m´ısto

B´ılé m´ısto, negativn´ı prostor, nebo moˇzná lépe anglicky white space nebo negative space. Je metoda jak správnˇe vyuˇz´ıvat prázdné nebo b´ılé m´ısto. I kdyˇz se na prvn´ı pohled m˚ uˇze zdát, ˇze prázdné nebo b´ılé m´ısto je potˇreba nˇeˇc´ım vyplnit, tak opak je zde pravdou. Jeho u ´ˇcelem je pˇredevˇs´ım pˇrivést pozornost, tam kam designér zam´ yˇsl´ı. [11] Rozliˇsujeme nˇekolik základn´ıch typ˚ u b´ıl´ ych m´ıst: Vizu´ aln´ı b´ıl´ e m´ısto které obklopuje grafiku, ikon a obrázky. B´ıl´ e m´ısto v rozloˇ zen´ı tedy okraje a v´ yplnˇe. B´ıl´ e m´ısto v textu tedy vzdálenost p´ısmen a ˇrádk˚ u. B´ıl´ e m´ısto v obsahu tedy kolik m´ısta máme mezi sloupci text.

6.6.3

Rozloˇ zen´ı prvk˚ u na formul´ aˇ ri

Pro uspoˇrádán´ı prvk˚ u (popisky a vlastn´ı ovládac´ı prvek) ve formuláˇri lze vyuˇz´ıt nˇekolik zp˚ usob˚ u zarovnán´ı. Pˇredstav´ım zde tˇri základn´ı.

Obrázek 6.5: Formuláˇr s r˚ uzn´ ym zarovnán´ım. Zdroj: upraveno autorem z [41].

Zarovn´ an´ı nahoˇ re. Popisek ovládac´ıho prvku se nacház´ı nad vlastn´ım ovládac´ım prvkem. Toto uspoˇra´dán´ı má tendenci sniˇzovat dobu vyplnˇen´ı formuláˇre, protoˇze vyˇzaduje pouze jednu oˇcn´ı fixaci zároveˇ n na popisek a ovládac´ı prvek. Nev´ yhodou tohoto zarovnán´ı je jeho vˇetˇs´ı spotˇreba vertikáln´ıho prostoru.[40] [38] [41]

54

Zarovn´ an´ı vpravo. Popisky ovládac´ıch prvk˚ u jsou zarovnány zprava k ovládac´ımu prvku. Zarovnán´ı zprava trvá o nˇeco málo déle ˇcasu vyplnit neˇz pˇri zarovnán´ı nahoˇre, ale v´ yhodou je, ˇze lze uˇsetˇrit trochu vertikáln´ıho m´ısta. Tento systém nen´ı vhodné pouˇz´ıvat pro vˇetˇs´ı a sloˇzitˇejˇs´ı formuláˇre, nebot’ zarovnán´ı doprava sniˇzuje ˇcitelnost a uˇzivatel˚ um se v takovém h˚ uˇre formuláˇri orientuje. [40] [38] [41] Zarovn´ an´ı vlevo. Popisky ovládac´ıch prvk˚ u jsou zarovnány doleva. V porovnán´ı s pˇredchoz´ımi je toto uspoˇrádán´ı nejpomalejˇs´ı, protoˇze vyˇzaduje nejv´ıce oˇcn´ıch fixac´ı. Nicménˇe je dobré ho pouˇz´ıvat pro rozsáhlé formuláˇre, kde zpomalen´ı uˇzivatele je ˇza´douc´ı, aby vˇenoval náleˇzitou pozornost vyplˇ nován´ı.[40] [38] [41] Bez popisku. Dalˇs´ı moˇznost´ı je, ˇze ovládac´ı prvky neobsahuj´ı ˇza´dn´ y extern´ı popisek, ale jejich popisek se nacház´ı pouze pˇr´ımo v nich. Tento popisek zmiz´ı, kdyˇz uˇzivatel do nich zadá nˇejak´ y vstup. Jsou vhodné pro opravdu malé formuláˇre a nebo pokud je zapotˇreb´ı velice ˇsetˇrit m´ıstem.[40] [38] [41]

6.6.4

Z´ apat´ı webu

Dle vˇetˇsiny modern´ıch studi´ı napˇr. [30] je vhodné umist’ovat veˇsker´ y d˚ uleˇzit´ y obsah do levého horn´ıho rohu stránky. Smˇerem dol˚ u klesá ˇsance, ˇze mu budou lidé vˇenovat pozornost. Moˇzná proto patiˇcky stránek ˇcasto zej´ı prázdnotou, ale trendy posledn´ıch let ukazuj´ı, ˇze tomu tak nemus´ı b´ yt. [33] [36] Patiˇcku stránky lze s pˇrehledem vyuˇz´ıt napˇr´ıklad následuj´ıc´ım zp˚ usobem: Mapa str´ anek. Um´ıstˇen´ım mapy stránek vede snadno ke zlepˇsen´ı pouˇzitelnosti. Kontakt. Do patiˇcky lze s u ´spˇechem také vloˇzit kontakt. Kontaktn´ı formul´ aˇ r. Pˇredchoz´ı moˇznost lze posunout jeˇstˇe o kousek dál a vloˇzit do patiˇcky pˇr´ımo kontaktn´ı formuláˇr. Já jsem se rozhodl do patiˇcky vloˇzit ˇca´st mapy stránek. Tedy pˇredevˇs´ım odkazy na hlavn´ı stránky, které pln´ı c´ıle, za kter´ ymi studenti vyuˇz´ıvaj´ı IS.

55

Obrázek 6.6: Patiˇcka webu. Zdroj: vlastn´ı.

6.6.5

Pˇ r´ım´ a manipulace s objekty

Bˇehem rozhovor˚ u si vˇetˇsina lid´ı stˇeˇzovala na aktuáln´ı rozhran´ı souborového manaˇzeru, kter´ ym lze ovládat u ´loˇziˇstˇe. Jelikoˇz je plné ikon bez jak´ ykoliv popisk˚ u. Tomuto tématu pouˇzitelnosti ikon se vˇenuje Aurora Bedford ve svém ˇclánku [34], kde velmi dobˇre shrnuje svoje poznatky. Ikony jsou lidé schopni rozeznat na základˇe své pˇredchoz´ı zkuˇsenosti. Bohuˇzel dobr´ ym a asi i jedin´ ym standardem v pouˇz´ıván´ı ikon je lupa pro hledán´ı. Proto dále doporuˇcuje k ikonám vˇzdy pˇriˇradit textov´ y popisek.

ˇ Zdroj: vlastn´ı. Obrázek 6.7: Ovládac´ı prvky v souborové systému BIVS.

Proto jsem zvolil ve svém prototypu jin´ y pˇr´ıstup k jak pracovat se souborov´ ym manaˇzerem na webu. Jako velice zaj´ımav´ ym a vhodn´ ym zp˚ usobem je interakce pˇr´ımou manipulac´ı [1], která se dnes naprosto bˇeˇznˇe pouˇz´ıvá snad ve vˇsech operaˇcn´ıch systémech s grafick´ ym uˇzivatelsk´ ym rozhran´ım. V dneˇsn´ı dobˇe jiˇz nen´ı zas tak velk´ y problém implementovat funkce Drag&Drop i do internetového prohl´ıˇzeˇce.

6.6.6

Navigace Lidé nebudou pouˇz´ıvat váˇs web, pokud se v nˇem nezorientuj´ı. Steve Krug, Web design: nenut’te uˇzivatele pˇrem´ yˇslet! [20].

Hlavn´ım u ´kolem navigace je nasmˇerovat naˇse uˇzivatele tam, kam potˇrebuj´ı a neustále je informovat, kde zrovna jsou. Dalˇs´ımi u ´koly navigace jsou ˇr´ıkat nám, co vˇsechno najdeme na stránkách. Tohoto dosahuje odkryt´ım pˇr´ısluˇsné u ´rovnˇe navigace. Pochopen´ım navigace chápeme i hierarchii

56

Obrázek 6.8: Pohled na souborov´ y manaˇzer. Zdroj: vlastn´ı.

a t´ım i rozum´ıme obsahu webu. Dozv´ıdáme se, jaké stránky máme pouˇz´ıvat a v neposledn´ı ˇradˇe správnˇe navrˇzená navigace vzbuzuje d˚ uvˇeru. [20]

Obrázek 6.9: Primárn´ı a kontextová navigace prototypu. Zdroj: vlastn´ı.

Prim´ arn´ı navigace Na vrchu stránky um´ıstˇená horizontáln´ı navigace je vhodn´ ym, ˇcasto velice vhodn´ ym ˇreˇsen´ım. Jej´ı v´ yznamná nev´ yhoda a souˇcasnˇe m˚ uˇze b´ yt jej´ı obrovskou v´ yhodou. Jelikoˇz je silnˇe limitována svoj´ı délkou, nut´ı designéry redukovat poˇcet poloˇzek v menu. Tento fakt se ve svém pomáhá uˇzivateli, kter´ y má ˇsanci si správnˇe vybrat z menˇs´ıho poˇctu lépe pojmenovan´ ych voleb. [16] Sekund´ arn´ı navigace Sekundárn´ı navigace odhaluje dalˇs´ı u ´roveˇ n zanoˇren´ı v hierarchii informac´ı. Takov´ ych to dalˇs´ıch hlubˇs´ıch zanoˇren´ı by nemˇelo b´ yt pˇr´ıliˇs. Uˇzivatelé jsou si schopni v pr˚ umˇeru zapamatovat dvˇe aˇz tˇri patra. V´ yhodou sekundárn´ı navigace je, ˇze se m˚ uˇze zobrazovat jenom modálnˇe a t´ım nezab´ırat bˇehem bˇeˇzného brouzdán´ı m´ısto. To nám umoˇzn ˇuje do této navigace vepsat v´ıce informac´ı a toho vyuˇz´ıvaj´ı tzv. mega menu nebo fat navigation. [16]

57

Obrázek 6.10: Mega menu jakoˇzto sekundárn´ı navigace. Zdroj: vlastn´ı.

Drobeˇ ckov´ a navigace Abychom zajistili neustálou zpˇetnou vazbu uˇzivatel˚ um, kde se na webu nacházej´ı, je vhodné k tomu pouˇz´ıt nˇekolik nástroj˚ u. Prvn´ım a naprosto samozˇrejm´ ym je, ˇze by vlastn´ı navigace sama o sobˇe mˇela neustále dávat najevo, kde uˇzivatel je. Dalˇs´ı dobr´ ym principem je pouˇz´ıt tzv. drobeˇckovou navigaci, která napov´ıdá hloubku a cestu, kde se uˇzivatel nacház´ı. Jako velice uˇziteˇcné se ukazuje, ˇze jednotlivé kroky v drobeˇckové navigaci by mˇely b´ yt klikatelné, aby mˇel uˇzivatel moˇznost se rychle vrátit ve struktuˇre, kterou právˇe proˇsel. [16]

Obrázek 6.11: Drobeˇcková navigace v dokumentovém manaˇzeru. Zdroj: vlastn´ı.

Vyhled´ av´ an´ı I kdyˇz se to tak nemus´ı na prvn´ı pohled nemus´ı zdát jedná se o velice d˚ uleˇzitou navigaˇcn´ı metodu. Zv´ yˇsit komfort, efektivitu a rychlost hledán´ı lze pomoc´ı doplˇ nován´ı psaného v´ yrazu. Rychlost hledán´ı se dá zv´ yˇsit i kategorizac´ı jednotliv´ ych v´ ysledk˚ u, napˇr. v internetovém obchodˇe Amazon vám napov´ıdaj´ı v´ yrazy i rozˇrazené do kategori´ı jako knihy, zdrav´ı, potraviny aj. [16]

58

Kapitola 7 Tree testing Tuto kapitolu jsem se rozhodl zaˇradit, protoˇze je zaj´ımavé porovnat existuj´ıc´ı stav s novˇe vytvoˇrenou strukturou informaˇcn´ı architektury a m´ıt moˇznost exaktnˇe vidˇet m´ısta zlepˇsen´ı ˇci zhorˇsen´ı. C´ılem této kapitoly je provést Tree testing, kde proti sobˇe budou stát IA aktuáln´ıho IS a mnou navrˇzená IA. Tato metoda se také nˇekdy naz´ yvá card-based classification nebo reverse card sorting.

7.1

Technika Tree testingu

Participant dostane nˇejak´ y c´ıl a jeho u ´kolem je proj´ıt stromem stránek a nalézt u ´roveˇ n (m˚ uˇze se zanoˇrovat nebo vynoˇrovat), která podle nˇej ˇreˇs´ı zadan´ yu ´kol. Bˇehem testován´ı se sleduj´ı následné u ´daje: • Cestou, kterou participant proˇsel, resp. poˇcet krok˚ u. • Jestli participant správnˇe oznaˇcil c´ılovou u ´roveˇ n. • Kde participant váhal a nebo se vracel. Dále je zapotˇreb´ı zd˚ uraznit, ˇze tato metoda nereflektuje dalˇs´ı faktory, které maj´ı v koneˇcném d˚ usledku dopad na nalezitelnost informac´ı: • Vizuáln´ı design a vzhled stránek. • Odkazy napˇr´ıˇc stránkami. 59

• Vyhledáván´ı. Do vyhodnocen´ı je vhodné zavést následuj´ıc´ı v´ ysledné metriky: ´ eˇ Uspˇ snost tedy kolik participant˚ u naˇslo a oznaˇcilo správné m´ısto. Rychlost jak dlouho trvalo participantovi proklikat se stromem. Spr´ avn´ e zam´ıˇ ren´ı k oˇcekávanému m´ıstu tj. jak moc participant bloudil. Tato metoda je pˇredevˇs´ım vhodná pro testován´ı nˇekolika málo r˚ uzn´ ych návrh˚ u, porovnán´ı nového a starého návrhu, testován´ı u ´prav jednotliv´ ych iterac´ı v´ yvoje a nebo zamˇeˇren´ı se na konkrétn´ı problém v nalezitelnosti. [42]

7.2

Proveden´ı Tree testingu

K proveden´ı testován´ı jsem vyuˇzil vytisknut´ ych kartiˇcek s pˇr´ısluˇsn´ ym seznamem uzl˚ u nebo list˚ u v dané u ´rovni stromu, které jsem ruˇcnˇe zamˇen ˇoval participant˚ um. Jejich u ´kolem bylo vˇzdy oznaˇcit m´ısto, kde si mysl´ı, ˇze by naˇsli poˇzadovanou informaci. Seznam jednotliv´ ych u ´kol˚ u je uveden v pˇr´ıloze. Testován´ı jsem provedl s 20 participanty. Jelikoˇz testován´ı bylo obsluhováno ruˇcnˇe, tak jsem nemˇeˇril ˇcas, ale pouze jeho u ´spˇeˇsnost.

60

Zad´ an´ı u ´ kolu 1. Za chv´ıli zaˇcne nov´ y semestr a chce vˇedˇet, kdy zaˇc´ıná ZS, LS, do kdy mus´ıte odevzdat DP, kde tuto informaci zjist´ıte? 2. Zaˇcal nov´ y semestr a chcete zjistit, na které dny máte naplánovanou v´ yuku. 3. Zaj´ımá Vás jaké pˇredmˇety Vás ˇcekaj´ı tento semestr, kde zjist´ıte co Vás ˇceká? 4. Máte pˇred státnicemi a chcete se kouknout na celkov´ y pˇrehled vaˇsich známek. Jaké jsou vaˇse studijn´ı v´ ysledky? 5. Studijn´ı oddˇelen´ı Vás vyzvalo, aby jste si zkontrolovali u ´daje, které o vás vede ˇskola. Kde najdete tyto informace? 6. V práci Vám hoˇr´ı term´ıny a proto nem˚ uˇze pˇrij´ıt na cviˇcen´ı z databáz´ı a chcete se omluvit z hodiny. Kde najdete e-mail na vyuˇcuj´ıc´ıho? 7. Zaˇcali jste psát DP, kde najdete pokyny, jak má b´ yt správnˇe naformátována. 8. Nejste si stoprocentnˇe jisti doslovn´ ym názvem Vaˇs´ı DP, kde ho najdete? 9. Pˇred nˇekolika dny jste zaplatili ˇskolné, kde zjist´ıte, ˇze vaˇse platbu ˇskola pˇrijala?

P˚ uvodn´ı IA

Nov´ a IA

94,74%

100,00%

89,47%

94,74%

21,05%

84,21%

100,00%

100,00%

0,00%

73,68%

89,47%

94,74%

78,95%

57,89%

57,89%

100,00%

89,47%

42,11%

Tabulka 7.1: Tabulka v´ ysledk˚ u Tree testingu. Zdroj: vlastn´ı.

Obrázek 7.1: V´ ysledek Tree testingu. Zdroj: vlastn´ı.

61

Kapitola 8 Testov´ an´ı pouˇ zitelnosti K testován´ı pouˇzitelnosti jsem zvolil kvalitativn´ı testován´ı s nˇekolika uˇzivateli, protoˇze se jedná o velice efektivn´ı a levnou metodu pro zjiˇstˇen´ı nejvˇetˇs´ıch nedostatk˚ u v pouˇzitelnosti webu.

8.1

Proˇ c testovat pouˇ zitelnost

Jelikoˇz pˇri v´ yvoji aplikace se sami stáváme odborn´ıky na danou oblast a mnoho vˇec´ı nám postupnˇe zaˇcne pˇripadat jako samozˇrejmé, proto je v´ıce neˇz vhodné do kaˇzdé iterace vloˇzit alespoˇ n ˇca´steˇcn´ y test pouˇzitelnosti kusu nové funkcionality. Pro takovéto ad-hoc ˇ uˇzivatelské testován´ı lze dle doporuˇcen´ı Steva Kruga [20] pouˇz´ıt pouze tˇri lidi. Cerstv´ y pohled nezainteresovan´ ych lid´ı nám, jako odborn´ık˚ um, m˚ uˇze jeˇstˇe v prav´ y ˇcas otevˇr´ıt oˇci. Dále argumentuje t´ım, ˇze pr˚ ubˇeˇzné testován´ı pomáhá udrˇzovat v´ yvoj ve správn´ ych kolej´ıch. Zaj´ımavou Krugovou u ´vahou a doporuˇcen´ım je, ˇze nen´ı nezbytnˇe nutné testovat celou dobu jen s naˇs´ı c´ılovou skupinou, nebot’ opravdu kritické chyby v pouˇzitelnosti nám je schopn´ y odhalit i pr˚ umˇern´ y uˇzivatel. C´ılem testován´ı je nás správnˇe nasmˇerovat v naˇsem v´ yvoji. Je nezbytné m´ıt stále na pamˇeti, ˇze v´ ysledek testu nen´ı ˇcerno-b´ıl´ y“, ” ale pomáhá nám formulovat naˇse myˇslenky, resp. nás dalˇs´ı postup. [20] [18]

62

8.2 8.2.1

Jak testovat pouˇ zitelnost Typick´ eˇ c´ asti testov´ an´ı

L´ am´ an´ı led˚ u“ je prvn´ı ˇca´st´ı testován´ı, zde je zapotˇreb´ı uvolnit participant˚ uv poˇca´” teˇcn´ı stres a navázat tzv. raport. Instrukˇ cn´ı ˇ c´ ast je zde naprosto kl´ıˇcové ubezpeˇcit participanta, ˇze on testuje náˇs produkt a ne my jeho a ˇze veˇskeré chyby jsou problémem naˇseho produktu. Dále je nutného se domluvit, ˇze bˇehem testován´ı bude vyuˇz´ıvat tzv. myˇslen´ı nahlas. Myˇslen´ı nahlas znamená, ˇze participant nám komentuje, nad ˇc´ım pˇrem´ yˇsl´ı a co dˇelá. Toto nám pomáhá lépe chápat, proˇc a jak pˇrem´ yˇsl´ı nad naˇs´ı aplikac´ı. Bˇehem této ˇcásti je vhodné podepsat pˇr´ıpadné smluvn´ı náleˇzitosti a dohodu o mlˇcen´ı. Pˇ redtestov´ y rozhovor nám pomáhá se ujistit, ˇze participant skuteˇcnˇe zapadá do naˇs´ı c´ılové skupiny a je vhodné mu poskytnout nezbytnˇe nutn´ y kontext k testován´ı. Zde je zapotˇreb´ı dát pozor, abychom neprozradili pˇr´ıliˇs moc informac´ı, které by mohly ohrozit validitu testován´ı. Vlastn´ı testov´ an´ı a sbˇer dat. Zamˇeˇrujeme se pˇredevˇs´ım participantovo mluven´ı nahlas a spontánn´ı chován´ı a reakce. Snaˇz´ıme se ho co nejménˇe naruˇsovat, abychom nenaruˇsovali jeho workflow. Potestov´ y rozhovor slouˇz´ı k celkovému zhodnocen´ı nebo pˇr´ıpadnému projit´ı kl´ıˇcov´ ych událost´ı bˇehem testu. Z´ avˇ erem je vhodné strávit s participantem neformáln´ı chv´ıli, vysvˇetlit d˚ uvody studie a vyslechnout jeho pocity. [22] [20] [18]

8.2.2

Prostˇ red´ı testov´ an´ı

Testován´ı pouˇzitelnosti jde provést prakticky nˇekolika zp˚ usoby. Bud’ testován´ı ve specia´ln´ı laboratoˇri, která sn´ımá a nahrává uˇzivatele a nebo vzdálenˇe pˇr´ımo u uˇzivatele doma. Kaˇzdá z tˇechto metod má svoje v´ yhody a nev´ yhody.[21]

63

Vzd´ alen´ e testov´ an´ı prob´ıhá v domác´ım prostˇred´ı participanta za pomoci jeho poˇc´ıtaˇce. Velkou v´ yhodnou jsou nesrovnatelnˇe menˇs´ı náklady neˇz proveden´ı tohoto samého testu ve specializované laboratoˇri. Dalˇs´ı v´ yhodou je rychlost a snazˇs´ı proveden´ı na vˇetˇs´ım vzorku lid´ı a vlastn´ı ekologická validita testu, nebot’ uˇzivatel je v prostˇred´ı, kde bude nakonec pouˇz´ıvat naˇsi aplikaci. Mezi nev´ yhody patˇr´ı pˇredevˇs´ım menˇs´ı kontrola nad celkovou situac´ı a pr˚ ubˇehem testu, vˇetˇs´ı hluk a horˇs´ı vizuáln´ı vazba. Testov´ an´ı ve specializovan´ e laboratoˇ ri umoˇzn ˇuje m´ıt kontrolu nad cel´ ym testem. Testován´ı je provádˇeno na pˇredem pˇripraveném poˇc´ıtaˇci a uˇzivatel m˚ uˇze b´ yt nahráván z libovolného u ´hlu. Takovéto testován´ı je draˇzˇs´ı pˇredevˇs´ım o náklady spojené s poˇr´ızen´ım a nebo pronájmem laboratoˇre. Dále do testu se mohou zavést chyby zp˚ usobené pˇr´ıliˇsnou sterilnost´ı prostˇred´ı.

8.3

Recruiting

Pro recruiting jsem zvolil metodu pˇr´ımého osloven´ı sv´ ych koleg˚ u, kteˇr´ı jeˇstˇe studuj´ı, a to ˇ a nebo na nˇekteré z jin´ bud’ pˇr´ımo na BIVS ych praˇzsk´ ych vysok´ ych ˇskol. Struˇcné shrnut´ı demografick´ ych charakteristik: Pr˚ umˇ ern´ y vˇ ek: 24. Pohlav´ı: 3 muˇzi a 2 ˇzeny. Nejvyˇ sˇ s´ı dosaˇ zen´ e vzdˇ el´ an´ı: vysokoˇskolské bakaláˇrské a nebo u ´plné stˇredoˇskolské. Bydliˇ stˇ e: Praha a nebo Stˇredoˇcesk´ y kraj.

8.4

Pr˚ ubˇ eh testov´ an´ı

Kaˇzdé takovéto sezen´ı s uˇzivatelem má nˇekolik fáz´ı a liˇs´ı se hlavnˇe ve formálnos-ti pˇr´ıstupu. Jelikoˇz jsem testován´ı provádˇel se sv´ ymi kolegy, tak jsem upustil od podepisován´ı smlouvy a slibu mlˇcenlivosti. I pˇresto jsem vˇsechny participanty ujistil, ˇze veˇskeré zpracován´ı bude anonymizováno.

64

Testován´ı prob´ıhalo vˇzdy na poˇc´ıtaˇci participanta u nˇej doma. Z celkového poˇctu pˇeti lid´ı jsem provedl dva testy vzdálenˇe a tedy 3 pˇr´ımo s fyzicky s participantem. Testován´ı trvalo mezi 30 aˇz 45 minutami.

8.5

N´ alezy

Nyn´ı uvedu shrnutá zjiˇstˇen´ı z testován´ı pouˇzitelnosti. • V´ıc jak polovinu participant˚ u prvnˇe hledala um´ıstˇen´ı informac´ı o AR v Povinnos” tech semestru“. • Dále se ukázalo, ˇze participanty lehce mate, jestli si maj´ı vybrat pˇredbˇeˇzn´ y a nebo uˇz fináln´ı rozvrh, kdyˇz jim systém nab´ız´ı obˇe moˇznosti. • Participanti nechápali následuj´ıc´ı oznaˇcen´ı u pˇredmˇet˚ u, zda se jiˇz maj´ı pˇredmˇet ukonˇcen´ y a nebo jeˇstˇe ne.

Obrázek 8.1: Problematické ikony. Zdroj: vlastn´ı.

8.6

Doporuˇ cen´ı

V dalˇs´ı iteraci v´ yvoje bych dodal hlaviˇcku k ikonám znázorˇ nuj´ıc´ı stav ukonˇcen´ı pˇredmˇetu. Za zváˇzenou stoj´ı také, jak lépe znázornit, zda se jedná uˇz fináln´ı podobu rozvrhu a nebo zat´ım pracovn´ı podobu.

65

Kapitola 9 Z´ avˇ er ˇ Abych Jedn´ım z c´ıl˚ u této práce bylo zhodnotit stávaj´ıc´ı uˇzivatelské rozhran´ı IS BIVS. toho mohl dosáhnout, bylo nezbytné jako prvn´ı provést hloubkové rozhovory s uˇzivateli. Na základˇe zjiˇstˇen´ı z rozhovor˚ u jsem sestavil základn´ı uˇzivatelské pˇr´ıbˇehy pomoc´ı kter´ ych jsem následnˇe otestoval stávaj´ıc´ı IS a pouˇz´ıval je pro dalˇs´ı testy. Zhodnocen´ı aktuáln´ıho stavu IS jsem provedl pomoc´ı dvou metod, a to ovˇeˇren´ım v˚ uˇci vˇseobecnˇe uznávan´ ym deseti Nielsenov´ ym heuristikám a testován´ım pouˇzitelnost, resp. uˇzivatelsk´ ym testován´ım. Jelikoˇz se z test˚ u pouˇzitelnosti ukázal jako velk´ y problém informaˇcn´ı architektura webu, provedl jsem redukci jednotliv´ ych poloˇzek (pohled˚ u) v IS. Pro jejich nové uspoˇrádá-n´ı jsem vyuˇzil metody cardsorting, kde uˇzivatelé sami rozdˇeluj´ı jednotlivé poloˇzky do skupin a pomáhaj´ı lépe pochopit, jak uˇzivatelé pˇrem´ yˇslej´ı nad jednotliv´ ymi skupinami. Následnˇe novˇe vytvoˇrenou strukturu jsem zpˇetnˇe porovnal se stávaj´ıc´ım ˇreˇsen´ım a ve vˇetˇsinˇe pˇr´ıpad˚ u vyˇsla lépe. Následnˇe jsem vyuˇzil tzv. skeˇcován´ı pro generován´ı mnoha rychl´ y nápad˚ u a skic nového rozhran´ı. Poté jsem tyto skici pˇretavil do drátˇen´ ych model˚ u a nakonec pomoc´ı nástroje pro tvorbu prototyp˚ u Sketch do v´ ysledné podoby. Prototypu jsem dodal nezbytnou logiku pomoc´ı nástroje UXPin, kter´ y zároveˇ n umoˇzn ˇuje provést vzdálené testován´ı pouˇzitelnosti. Posledn´ım c´ılem moj´ı diplomové práce bylo ovˇeˇrit mnou vytvoˇren´ y prototyp. Vyuˇzil jsem opˇet testován´ı pouˇzitelnosti se stejn´ ym zadán´ım jako pˇri testován´ı aktuáln´ıho rozhran´ı IS. V rámci testován´ı jsem zjistil d´ılˇc´ı nedostatky, které mohou b´ yt odstranˇeny v dalˇs´ı iteraci.

66

Literatura [1] NORMAN, Donald A. Design pro kaˇzdý den. 1. vyd. v ˇceském jazyce. Praha: Dokoˇrán, 2010, s. 39-59. ISBN 978-80-7363-314-1. [2] JOHNSON, Richard A. a Dean W. WICHERN. Applied multivariate statistical analysis. 6th ed. Upper Saddle River, N.J.: Pearson Prentice Hall, 2007, s. 671-739. ISBN 9780131877153. ´ Milena. Lidsk´ [3] TVRDÍKOVA, y faktor a kontrola kvality jeho oˇsetˇren´ı v projektech ˇ ˇ ˇ informaˇcn´ıch systém˚ u. HORAVA, Editovali Alena Cervenkov´ a a Michal HORAVA. Uˇzivatelsky pˇr´ıvˇetivá rozhran´ı. Vyd. 1. Praha: Horava, 2009, s. 27-40. ISBN 978-80254-5295-0. [4] WOOD, Jed R. a Larry E. WOOD. Card Sorting: Current Practices and Beyond. Journal of usability studies. Bloomingdale, IL: Usability Professionals’ Association, 2008, roˇc. 4, ˇc. 1, s. 6. Dostupné z: http://uxpajournal.org/issue/volume-4-issue-1/ [5] SPENCE, Donna. A Practical Guide to Information Architecture [online]. 2. vyd. Australia: UX Mastery, 2014 [cit. 2015-01-20]. ISBN 978-0-9925380-2-6. Dostupné z: http://uxmastery.com/practical-ia [6] RIGHI, Carol, Janice JAMES, Michael BEASLEY, Donald L. DAY, Jean E. FOX, Jennifer GIEBER, Chris HOWE a Laconya RUBY. Card Sort Analysis Best Practices. Journal of usability studies [online]. Bloomingdale, IL: Usability Professionals’ Association, 2013, roˇc. 3, ˇc. 8 [cit. 2015-04-06]. Dostupné z: http://uxpajournal.org/card-sort-analysis-best-practices-2/ [7] Prototyping. In: CAO, Jerry. UXPIN. The Ultimate Guide to Prototyping: The best prototyping methods, tools and processes [online]. 2014 [cit. 2015-02-08]. Dostupné z: http://www.uxpin.com/guide-to-prototyping.html

67

ˇ ´ Hana. Pouˇzit´ı projektivn´ıch technik pro hlubˇs´ı pochopen´ı chován´ı a [8] KOPICKOV A, vn´ımán´ı uˇzivatele. 2014. ˇ [9] PAVLÍCEK,

Radek.

Pˇr´ıstupnost

nen´ı

charita.

2012.

Dostupné

z:

http://www.slideshare.net/radlicek/pristupnost-nenicharita [10] SERRAT, The

Five

Olivier Whys

D.

ASIAN

Technique.

DEVELOPMENT

Philippines,

2009.

BANK.

Dostupné

z:

http://www.adb.org/sites/default/files/publication/27641/five-whys-technique.pdf [11] ZIEBA, Kamil, Krzysztof STRYJEWSKI a Matt ELLIS. UXPIN. Web UI Design for the Human Eye: Colors, Space, Contrast. 2015. [12] WEINSCHENK, Susan. 100 vˇec´ı, které by mˇel kaˇzdý designér vˇedˇet o lidech. 1. vyd. Brno: Computer Press, 2012, 240 s. ISBN 978-80-251-3649-2. [13] TRAVERS, Andrew. A Pocket Guide to Interviewing for research. Penarth: Five Simple Steps, 2013. ISBN 978-1-907828-15-7. [14] LEECH, Joe. A Pocket Guide to Psychology for designers. Penarth: Five Simple Steps, 2013. ISBN 978-1-907828-11-9. [15] BOULTON, Mark. A Practical Guide to Designing for the Web. Penarth: Mark Boulton Design Ltd, 2009. ISBN 978-0-9561740-7-9. [16] COOPER, Alan. About face: the essentials of interaction design, 4th edition. 4th edition. Indaianapolis: John Wiley & Sons, Inc., 2014, pages cm. ISBN 11-1876657-1. [17] SAFFER, Dan. Designing for interaction: creating innovative applications and devices. 2nd ed. Berkeley, CA: New Riders, 2010, xv, 223 p. Voices that matter. ISBN 03-216-4339-9. [18] KRUG, Steve. Nenut’te uˇzivatele pˇremýˇslet!: praktický pr˚ uvodce testován´ım a opravou chyb pouˇzitelnost [sic] webu. Vyd. 1. Brno: Computer Press, 2010, 165 s. ISBN 978-80-251-2923-4. [19] WARE, Colin. Visual Thinking: for Design. San Francisco: Elsevier’s Science and Technology, 2008. ISBN 0123708966. [20] KRUG, Steve. Web design: nenut’te uˇzivatele pˇremýˇslet!. 2. aktualiz. vyd. Pˇreklad ˇ ril. Brno: Computer Press, 2006, 167 s. ISBN 80-251-1291-8. Jan Skvaˇ

68

´ CVUT. ˇ [21] FRANC, Jakub. FAKULTA ELEKTROTECHNICKA PUR – Current Trends in User Research: 6th lecture. Praha, 2013. ´ CVUT. ˇ [22] FRANC, Jakub. FAKULTA ELEKTROTECHNICKA PUR – Research Methods II: 4th lecture. Praha, 2013. [23] NIELSEN,

Jakob.

How

to

Conduct

a

Heuristic

Evaluation.

In:

Niel-

sen Norman Group: Evidence-Based User Experience Research, Training, and Consulting [online]. 1995, 1. 1. 1995 [cit. 2015-02-07]. Dostupné z: http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation [24] WHITETENTON, Kathryn. Minimize Cognitive Load to Maximize Usability. In: Nielsen Norman Group [online]. 22. 12. 2013. 2013 [cit. 2015-01-21]. Dostupné z: http://www.nngroup.com/articles/minimize-cognitive-load/ [25] TULLIS, Tom a Larry WOOD. How Many Users Are Enough for a CardSorting Study?. In: Usability Professionals Association (UPA) 2004 Conference. Minneapolis: UXPA, 2004, s. 9. Dostupné z: http://home.comcast.net/ tomtullis/publications/UPA2004CardSorting.pdf [26] NIELSEN, Jakob. 10 Usability Heuristics for User Interface Design. Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting [online]. 1995, 1. 1. 1995 [cit. 2015-02-07]. Dostupné z: http://www.nngroup.com/articles/ten-usability-heuristics/ [27] Card Sorting. Usability.gov: Improving the User Experience [online]. 2012 [cit. 201502-08]. Dostupné z: http://www.usability.gov/how-to-and-tools/methods/cardsorting.html [28] SPENCER, Donna. Card sorting: a definitive guide. Boxes and Arrows [online]. 2004 [cit. 2015-04-07]. Dostupné z: http://boxesandarrows.com/card-sorting-a-definitiveguide/ [29] NIELSEN, Jakob. Card Sorting: How Many Users to Test. NIELSEN, Jakob. Nielsen Norman Group [online]. 2004 [cit. 2015-04-02]. Dostupné z: http://www.nngroup.com/articles/card-sorting-how-many-users-to-test/ [30] NIELSEN, sen

Jakob.

Norman

F-Shaped

Group

Pattern

[online].

2006

For

Reading

[cit.

Web

2015-04-04].

Content.

Dostupné

http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

69

Nielz:

[31] NIELSEN. Fast, Cheap, and Good: Yes, You Can Have It All. Nielsen Norman Group: Evidence-Based User Experience Research, Training, and Consulting [online]. 2007, 1. 2. 2007 [cit. 2015-02-08]. Dostupné z: http://www.nngroup.com/articles/fast-cheap-and-good-methods/ [32] BOULTON, Preface.

Mark.

Mark

Five

Boulton

simple

steps

to

[online].

2005

[cit.

designing

grid

2015-04-16].

systems Dostupné

z:

http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-gridsystems-preface [33] LENNARTZ, Sven. Footers In Modern Web Design: Creative Examples and Ideas. SMASHING MAGAZINE. Smashing Magazine [online]. 2008 [cit. 2015-04-16]. Dostupné z: http://www.smashingmagazine.com/2008/04/08/footers-in-modern-webdesign-creative-examples-and-ideas/ [34] BEDFORD, Aurora. Icon Usability. NORMAN NIELSEN GROUP. Norman Nielsen Group: Evidence-Based User Experience Research, Training, and Consulting [online]. 2014 [cit. 2015-04-16]. Dostupné z: http://www.nngroup.com/articles/iconusability/ [35] Information Architecture Basics. U.S. DEPARTMENT OF HEALTH & HUMAN SERVICES. Usability.gov: Improving the User Experience [online]. 2013 [cit. 2015-01-20]. Dostupné z: http://www.usability.gov/what-and-why/informationarchitecture.html [36] Informative And Usable Footers In Web Design. CRONIN, Matt. SMASHING MAGAZINE. Smashing Magazine [online]. 2009 [cit. 2015-04-16]. Dostupné z: http://www.smashingmagazine.com/2009/06/17/informative-and-usablefooters-in-web-design/ [37] GORBAN, Alexander. K-Means and K-Medoids algorithm. UNIVERSITY OF LEICESTER. Department of Mathematics [online]. 2011 [cit. 2015-04-06]. Dostupné z: http://www.math.le.ac.uk/people/ag153/homepage/KmeansKmedoids/ Kmeans Kmedoids.html [38] PENZO, Matteo. Label Placement in Forms. UX Matters [online]. 2006 [cit. 2015-04-12]. Dostupné z: http://www.uxmatters.com/mt/archives/2006/07/labelplacement-in-forms.php

70

[39] New Research Study Shows 57 Percent of Adult Computer Users Can Benefit From Accessible Technology. MICROSOFT. Microsoft: News Center [online]. 2004 [cit. 2015-04-26]. Dostupné z: http://news.microsoft.com/2004/02/02/new-researchstudy-shows-57-percent-of-adult-computer-users-can-benefit-from-accessibletechnology/ [40] The Definitive Guide to Form Label Positioning. ENDERS, Jessica. Design & UX: HTML & CSS [online]. 2014 [cit. 2015-04-12]. Dostupné z: http://www.sitepoint.com/definitive-guide-form-label-positioning/ [41] Top, Right or Left Aligned Form Labels. WROBLEWSKI, Luke. LukeW:

ideation+design

[online].

2007

[cit.

2015-04-12].

Dostupné

z:

http://www.lukew.com/↵/entry.asp?504 [42] O’BRIEN, Dave. Tree Testing. Boxes and Arrows [online]. 2009 [cit. 2015-04-07]. Dostupné z: http://boxesandarrows.com/tree-testing/ [43] User needs: How to focus a service on users. Government Service Design Manual [online]. 2014 [cit. 2015-04-02]. Dostupné z: https://www.gov.uk/service-manual/usercentred-design/user-needs.html [44] BONNER, Carolann. Using Gestalt Principles for Natural Interactions. Giant Robots Smashing into Other Giant Robots [online]. 2014 [cit. 2015-04-15]. Dostupné z: https://robots.thoughtbot.com/gestalt-principles [45] Web Content Accessibility Guidelines (WCAG) 2.0. THE WORLD WIDE WEB CONSORTIUM. W3C [online]. 2008, 11. 12. 2008 [cit. 2015-02-07]. Dostupné z: http://www.w3.org/TR/WCAG20/ [46] KIM, Daniel. What is User Centered Design?. Online Hub of Daniel Kim [online]. 2013 [cit. 2015-04-05]. Dostupné z: http://danielikim.com/what-is-user-centereddesign/ [47] GUBE, Jacob. What Is User Experience Design? Overview, Tools And Resources. Smashing Magazine [online]. 2010 [cit. 2015-04-05]. Dostupné z: http://www.smashingmagazine.com/2010/10/05/what-is-user-experience-designoverview-tools-and-resources/

71

[48] Writing user stories: How to write a useful user story. Government Service Design Manual [online]. 2013 [cit. 2015-04-03]. Dostupné z: https://www.gov.uk/servicemanual/agile/writing-user-stories.html

72

Seznam obr´ azk˚ u 2.1

´ Uvodn´ ı rozcestn´ık IS. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . .

10

2.2

´ Uvodn´ ı rozcestn´ık IS a pˇrehled známek. Zdroj: vlastn´ı. . . . . . . . . . .

10

3.1

Nˇekolik discipl´ın t´ ykaj´ıc´ıch se User Experience Designu. Zdroj: upraveno z autorem z [17]. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

3.2

Prvky IS. Zdroj: upraveno autorem z [3]. . . . . . . . . . . . . . . . . . .

12

3.3

Nyn´ı jiˇz pˇrekonan´ y proces návrhu. Zdroj: upraveno autorem z [47]. . . . .

13

3.4

Informaˇcn´ı architektura propojuje lidi, obsah a jejich kontext. Zdroj: upraveno autorem z [5]. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.5

Gestalt. Zdroj: pˇrevzato z [11]. . . . . . . . . . . . . . . . . . . . . . . . .

16

3.6

Podobnost. Zdroj: upraveno autorem z [44].

. . . . . . . . . . . . . . . .

17

3.7

Ohraniˇcen´ı. Zdroj: upraveno autorem z [44]. . . . . . . . . . . . . . . . .

17

3.8

Ohraniˇcen´ı. Zdroj: upraveno autorem z [44]. . . . . . . . . . . . . . . . .

18

3.9

Uzavˇren´ı. Zdroj: upraveno autorem z [44].

. . . . . . . . . . . . . . . . .

18

3.10 Bl´ızkost. Zdroj: upraveno autorem z [44] .

. . . . . . . . . . . . . . . . .

18

3.11 Tepelné mapy vzniklé na základˇe sledován´ı oˇcn´ı kamerou Zdroj: pˇrevzato z [30]. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

3.12 Proces v rámci UCD. Zdroj: upraveno autorem z vlastn´ı [46]. . . . . . . .

24

4.1

Kˇrivka znázorˇ nuj´ıc´ı m´ıru nalezen´ ych chyb k poˇctu hodnotitel˚ u. Zdroj: upraveno autorem z [26]. . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

4.2

Systém nijak nezobrazuje nulové stavy. Zdroj: vlastn´ı. . . . . . . . . . . .

35

4.3

Z menu nen´ı jasné, kde se aktuálnˇe nacház´ım. Zdroj: vlastn´ı. . . . . . . .

36

4.4

Minimum lid´ı skuteˇcnˇe ˇcte návody pˇred prvn´ım pouˇzit´ım. Zdroj: vlastn´ı.

37

5.1

V´ ystup anal´ yzy obsahu. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . .

41

73

5.2

Korelaˇcn´ı koeficient pro r˚ uzné velikosti vzork˚ u s vyznaˇcnou chybou. Zdroj: pˇrevzato z [25] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

5.3

Vizualizace jednotliv´ ych spojen´ı pomoc´ı chord diagramu. Zdroj: vlastn´ı. .

46

5.4

V´ ysledn´ y strom pˇri generovan´ y pomoc´ı Avarage linkage Zdroj: vlastn´ı. . .

47

5.5

Postupn´ y návrh... Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . . . .

48

6.1

Ukázka skeˇce. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . . . . . .

50

6.2

Wireframe u ´vodn´ı obrazovky IS. Zdroj: vlastn´ı. . . . . . . . . . . . . . .

51

6.3

Mockup návrhu obrazovky s v´ ypisem faktur ˇskolného. Zdroj: vlastn´ı.

. .

52

6.4

Typografická mˇr´ıˇzka. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . .

53

6.5

Formuláˇr s r˚ uzn´ ym zarovnán´ım. Zdroj: upraveno autorem z [41]. . . . . .

54

6.6

Patiˇcka webu. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . . . . . .

56

6.7

ˇ Zdroj: vlastn´ı. . . . . . . . . Ovládac´ı prvky v souborové systému BIVS.

56

6.8

Pohled na souborov´ y manaˇzer. Zdroj: vlastn´ı. . . . . . . . . . . . . . . .

57

6.9

Primárn´ı a kontextová navigace prototypu. Zdroj: vlastn´ı. . . . . . . . . .

57

6.10 Mega menu jakoˇzto sekundárn´ı navigace. Zdroj: vlastn´ı. . . . . . . . . . .

58

6.11 Drobeˇcková navigace v dokumentovém manaˇzeru. Zdroj: vlastn´ı. . . . . .

58

7.1

V´ ysledek Tree testingu. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . .

61

8.1

Problematické ikony. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . .

65

E.1 Dendrogram sestroj´ı pomoc´ı metody Complete Linkage. Zdroj: vlastn´ı. .

1

E.2 Dendrogram sestroj´ı pomoc´ı metody Single Linkage. Zdroj: vlastn´ı. . . .

2

´ G.1 Uvodn´ ı stránka. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . . . . .

1

G.2 Souborov´ y manaˇzer dalˇs´ı návrh. Zdroj: vlastn´ı. . . . . . . . . . . . . . . .

1

G.3 Detail vyuˇcovaného pˇredmˇetu. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . .

2

G.4 Souborov´ y manaˇzer. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . .

2

´ H.1 Uvodn´ ı stránka. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . . . . .

1

H.2 Detail vyuˇcovaného pˇredmˇetu. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . .

2

H.3 Souborov´ y manaˇzer. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . .

2

H.4 Pˇrehled vystaven´ ych faktur. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . .

3

74

H.5 Profil pedagoga. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . . . .

3

H.6 Zapsané pˇredmˇety. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . . . . . . .

4

H.7 Chybnˇe vyplnˇené pole ve formuláˇri. Zdroj: vlastn´ı. . . . . . . . . . . . . .

4

75

Seznam tabulek 4.1

Karta s uˇzivatelsk´ ym pˇr´ıbˇehem. Zdroj: vlastn´ı. . . . . . . . . . . . . . . .

31

5.1

Shrnut´ı v´ ysledk˚ u testován´ı. Zdroj: vlastn´ı. . . . . . . . . . . . . . . . . .

45

7.1

Tabulka v´ ysledk˚ u Tree testingu. Zdroj: vlastn´ı. . . . . . . . . . . . . . . .

61

76

Seznam pˇ r´ıloh Tiˇstˇené pˇr´ılohy A. Seznam pouˇzit´ ych zkratek B. Karty s uˇzivatelsk´ ymi pˇr´ıbˇehy C. Zadan´ı pro testován´ı D. Tabulka podobnosti E. V´ ysledné dendrogramy F. Nehierarchické shlukován´ı G. Ukázky drátˇen´ ych model˚ u H. Ukázky v´ ysledn´ ych obrazovek I. Obsah CD

77

Pˇ r´ıloha A Seznam pouˇ zit´ ych zkratek HCI Human-Computer Interaction UX User Experience IA Information Architecture UCD User Centered Design IS Informaˇcn´ı systém

1

Pˇ r´ıloha B Karty s uˇ zivatelsk´ ymi pˇ r´ıbˇ ehy Aktér:

Jako

student

Pˇr´ıbˇeh:

Já chci

vidˇet sv˚ uj aktuáln´ı rozvrh hodin.

C´ıl:

Abych

vˇedˇel, kdy mám pˇrij´ıt do ˇskoly.

Aktér:

Jako

student

Pˇr´ıbˇeh:

Já chci

vidˇet pˇrehled faktur a jejich stav.

C´ıl:

Abych

mˇel si ovˇeˇril pˇrijet´ı penˇez.

Aktér:

Jako

student

Pˇr´ıbˇeh:

Já chci

vˇedˇet jak´ y je harmonogram na tento semestr.

C´ıl:

Abych

vˇedˇel, kdy se na co mám pˇripravit.

Aktér:

Jako

student

Pˇr´ıbˇeh:

Já chci

vidˇet jednoduch´ y pˇrehled vypsan´ ych zkouˇsek.

C´ıl:

Abych

si mohl snadno naplánovat, kdy na kterou p˚ ujdu.

Aktér:

Jako

student

Pˇr´ıbˇeh:

Já chci

m´ıt dostupné informace, jak kontaktovat vyuˇcuj´ıc´ıho.

C´ıl:

Abych

ho mohl kontaktovat.

Aktér:

Jako

student

Pˇr´ıbˇeh:

Já chci

vˇedˇet, jaké náleˇzitosti má splˇ novat moje závˇereˇcná práce.

C´ıl:

Abych

mˇel svoji práce v souladu s metodikou.

Aktér:

Jako

student

Pˇr´ıbˇeh:

Já chci

m´ıt soupis pˇredmˇet˚ u, které jsem absolvoval a nebo teprv absolvuji.

C´ıl:

Abych

vˇedˇel, co mˇe ˇceká.

1

Pˇ r´ıloha C Zadan´ı pro testov´ an´ı 1. Za chv´ıli zaˇcne nov´ y semestr a chcete vˇedˇet, kdy zaˇc´ıná AR, ZS, LS, do kdy mus´ıte odevzdat DP, na kter´ y den je vyhláˇseno rektorské volno apod., kde tyto informace zjist´ıte? 2. Zaˇcal nov´ y semestr a chcete zjistit, na které dny máte naplánovanou v´ yuk, aby jste si mohl/a vz´ıt dovolenou. Které dny to jsou? 3. Zaj´ımá Vás jaké pˇredmˇety máte tento semestr, kde zjist´ıte co Vás ˇceká? 4. Máte pˇred státnicemi a chcete se kouknout na celkov´ y pˇrehled vaˇsich známek. Jaké jsou vaˇse studijn´ı v´ ysledky? 5. Studijn´ı oddˇelen´ı Vás vyzvalo, aby jste si zkontrolovali u ´daje, které o vás vede ˇskola (bydliˇstˇe, datum narozen´ı, dosavadn´ı vzdˇelán´ı, apod.). Kde najdete tyto informace? 6. V práci Vám hoˇr´ı term´ıny a proto nem˚ uˇze pˇrij´ıt na cviˇcen´ı z databáz´ı a chcete se omluvit z hodiny. Kde najdete e-mailovou adresu na vyuˇcuj´ıc´ıho? 7. Zaˇcal/a jste psát DP, kde najdete pokyny, jak má b´ yt správnˇe naformátována? 8. Nejste si stoprocentnˇe jist´ y/á doslovn´ ym názvem Vaˇs´ı DP, kde ho najdete? 9. Pˇred nˇekolika dny jste zaplatili ˇskolné, kde zjist´ıte, ˇze vaˇse platbu ˇskola pˇrijala?

1

1,000

Moje karta BIVŠ

0,750

0,680

0,615

0,750

1,000

Můj profil

Můj profil

0,750

0,680

0,615

0,680

0,556

1,000

Moje e-mailová schránka


0,750

0,680

0,615

0,615

0,556

0,556

1,000

Změna přezdívky

Změna přezdívky

0,615

0,680

0,750

0,500

0,448

0,556

0,448

1,000

Změna hesla

Změna hesla

0,680

0,750

0,826

0,556

0,500

0,615

0,500

0,909

1,000

Nastavení veřejného profilu


0,556

0,615

0,680

0,448

0,500

0,500

0,400

0,750

0,826

1,000

Moje faktury školného


0,500

0,500

0,448

0,556

0,556

0,400

0,400

0,313

0,355

0,313

1,000

Správce vložených souborů v IS


0,050

0,077

0,050

0,050

0,077

0,050

0,050

0,105

0,077

0,077

0,135

1,000

Nápověda

Nápověda

0,050

0,050

0,050

0,024

0,077

0,024

0,050

0,077

0,050

0,050

0,050

0,135

1,000

Předběžné rozvrhy


0,000

0,000

0,000

0,024

0,000

0,000

0,000

0,000

0,000

0,000

0,077

0,050

0,000

1,000

Vyhledávání rozvrhu


0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,050

0,077

0,000

0,909

1,000

Můj rozvrh

Můj rozvrh

0,105

0,077

0,077

0,105

0,077

0,105

0,105

0,077

0,077

0,077

0,167

0,050

0,000

0,400

0,400

1,000

Ubytovací stipendium


0,105

0,105

0,105

0,105

0,167

0,105

0,105

0,077

0,105

0,135

0,135

0,024

0,077

0,024

0,024

0,024

1,000

Stipendia

Stipendia

0,050

0,050

0,050

0,105

0,105

0,077

0,050

0,024

0,050

0,077

0,167

0,024

0,050

0,050

0,024

0,024

0,826

1,000

Harmonogram AR

Harmonogram AR

0,000

0,000

0,000

0,050

0,024

0,000

0,000

0,000

0,000

0,000

0,050

0,077

0,077

0,167

0,135

0,077

0,235

0,313

1,000

Formuláře a žádosti studijního oddělení


0,000

0,000

0,000

0,050

0,077

0,024

0,000

0,024

0,000

0,050

0,050

0,167

0,077

0,050

0,024

0,000

0,355

0,448

0,448

1,000

Výhlášky

Výhlášky

0,024

0,024

0,024

0,024

0,105

0,024

0,024

0,050

0,024

0,077

0,024

0,167

0,167

0,000

0,000

0,000

0,355

0,355

0,313

0,680

1,000

Metodické pokyny

Metodické pokyny

0,000

0,000

0,000

0,024

0,050

0,000

0,000

0,024

0,000

0,024

0,024

0,200

0,167

0,000

0,000

0,000

0,235

0,273

0,313

0,500

0,556

1,000

Dokumenty

Dokumenty

0,000

0,000

0,000

0,000

0,024

0,024

0,000

0,024

0,000

0,000

0,050

0,273

0,235

0,024

0,024

0,050

0,135

0,167

0,313

0,355

0,448

0,400

1,000

Vložit na Vývěsku


0,000

0,000

0,000

0,000

0,024

0,024

0,024

0,024

0,000

0,024

0,050

0,135

0,135

0,000

0,024

0,024

0,273

0,313

0,167

0,313

0,355

0,273

0,235

1,000

Vývěska

Vývěska

0,000

0,000

0,000

0,024

0,077

0,024

0,024

0,024

0,000

0,050

0,024

0,105

0,105

0,000

0,024

0,000

0,313

0,355

0,200

0,400

0,500

0,313

0,273

0,750

1,000

E-volby

E-volby

0,000

0,000

0,000

0,024

0,024

0,024

0,024

0,024

0,000

0,024

0,050

0,077

0,167

0,050

0,024

0,000

0,273

0,355

0,200

0,355

0,355

0,273

0,235

0,556

0,448

1,000

Lidé na BIVŠ

Lidé na BIVŠ

0,000

0,000

0,000

0,024

0,050

0,000

0,024

0,024

0,000

0,050

0,050

0,050

0,167

0,050

0,024

0,000

0,235

0,313

0,273

0,313

0,273

0,235

0,273

0,448

0,448

0,556

1,000

Anketa studia

Anketa studia

0,000

0,000

0,000

0,024

0,000

0,024

0,024

0,024

0,000

0,024

0,077

0,077

0,050

0,167

0,135

0,050

0,235

0,313

0,313

0,355

0,273

0,167

0,200

0,355

0,355

0,556

0,400

1,000

Přijímací řízení


0,000

0,000

0,000

0,050

0,050

0,000

0,000

0,024

0,000

0,050

0,024

0,077

0,167

0,050

0,024

0,000

0,235

0,313

0,400

0,355

0,313

0,273

0,313

0,235

0,313

0,355

0,500

0,355

1,000

Známky za celé studium


0,050

0,024

0,024

0,050

0,050

0,050

0,050

0,024

0,024

0,024

0,135

0,077

0,000

0,135

0,135

0,235

0,024

0,024

0,050

0,000

0,000

0,024

0,050

0,024

0,000

0,000

0,000

0,077

0,024

1,000

Známky za aktuální semestr


0,050

0,024

0,024

0,050

0,050

0,077

0,050

0,024

0,024

0,024

0,135

0,077

0,000

0,135

0,135

0,273

0,024

0,024

0,050

0,000

0,000

0,000

0,077

0,024

0,000

0,000

0,000

0,077

0,024

0,826

1,000

Moje témata prací

Moje témata prací

0,077

0,050

0,050

0,077

0,050

0,105

0,077

0,050

0,050

0,050

0,105

0,105

0,000

0,050

0,050

0,273

0,000

0,000

0,000

0,000

0,000

0,024

0,077

0,024

0,000

0,000

0,000

0,024

0,000

0,400

0,400

1,000

Vypsané zkoušky

Vypsané zkoušky

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,024

0,077

0,000

0,167

0,167

0,050

0,000

0,000

0,050

0,024

0,000

0,000

0,050

0,000

0,000

0,000

0,000

0,077

0,050

0,235

0,273

0,313

1,000

Přihlásit se na zkoušku


0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,050

0,050

0,000

0,077

0,077

0,105

0,000

0,000

0,024

0,000

0,000

0,024

0,050

0,024

0,024

0,024

0,024

0,077

0,024

0,313

0,355

0,400

0,680

1,000

Vypsané semináře

Vypsané semináře

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,000

0,050

0,024

0,200

0,200

0,050

0,000

0,000

0,050

0,024

0,000

0,024

0,024

0,024

0,000

0,024

0,024

0,050

0,050

0,167

0,167

0,273

0,448

0,273

1,000

Vypsané seminární témata


0,000

0,000

0,000

0,000

0,000

0,024

0,000

0,000

0,000

0,000

0,024

0,077

0,000

0,200

0,200

0,077

0,000

0,000

0,050

0,024

0,000

0,000

0,077

0,000

0,000

0,000

0,000

0,077

0,050

0,200

0,273

0,400

0,556

0,355

0,680

1,000

Předměty

Předměty Zápis předmětů Studijní materiály mých předmětů Termíny státní závěrečné zkoušky Závěrečná zkouška Vypsané témata závěrečných prací Přehled témat závěrečných prací Moje záverečná práce

0,000 0,000 0,050 0,000 0,000 0,000 0,000 0,077

0,000 0,000 0,024 0,000 0,000 0,000 0,000 0,050

0,000 0,000 0,024 0,000 0,000 0,000 0,000 0,050

0,000 0,000 0,050 0,024 0,000 0,000 0,000 0,077

0,000 0,000 0,050 0,024 0,000 0,000 0,000 0,050

0,050 0,000 0,077 0,000 0,000 0,000 0,000 0,077

0,000 0,000 0,050 0,000 0,000 0,000 0,000 0,077

0,000 0,000 0,024 0,000 0,000 0,000 0,000 0,050

0,000 0,000 0,024 0,000 0,000 0,000 0,000 0,050

0,000 0,000 0,024 0,000 0,000 0,000 0,000 0,050

0,024 0,050 0,105 0,000 0,024 0,024 0,024 0,105

0,050 0,077 0,135 0,000 0,024 0,050 0,077 0,077

0,000 0,000 0,000 0,000 0,000 0,000 0,000 0,000

0,355 0,355 0,167 0,050 0,077 0,077 0,077 0,050

0,355 0,355 0,167 0,050 0,077 0,077 0,105 0,050

0,200 0,200 0,400 0,000 0,024 0,024 0,024 0,235

0,024 0,000 0,000 0,050 0,024 0,024 0,024 0,000

0,024 0,000 0,000 0,050 0,024 0,024 0,024 0,000

0,105 0,105 0,077 0,105 0,050 0,050 0,050 0,000

0,050 0,024 0,024 0,077 0,050 0,050 0,050 0,000

0,024 0,000 0,024 0,050 0,024 0,024 0,024 0,000

0,000 0,024 0,024 0,105 0,077 0,105 0,105 0,077

0,050 0,024 0,105 0,050 0,077 0,077 0,077 0,050

0,024 0,000 0,024 0,024 0,024 0,024 0,050 0,024

0,024 0,000 0,000 0,050 0,024 0,024 0,050 0,000

0,024 0,000 0,000 0,024 0,024 0,024 0,024 0,000

0,000 0,000 0,000 0,024 0,024 0,024 0,024 0,000

0,105 0,077 0,050 0,050 0,077 0,077 0,077 0,024

0,050 0,024 0,024 0,077 0,050 0,050 0,050 0,000

0,135 0,200 0,313 0,077 0,105 0,077 0,077 0,313

0,167 0,167 0,355 0,050 0,077 0,050 0,050 0,235

0,273 0,313 0,500 0,105 0,135 0,167 0,167 0,500

0,355 0,313 0,200 0,313 0,400 0,200 0,167 0,135

0,200 0,273 0,273 0,235 0,313 0,135 0,105 0,200

0,556 0,556 0,235 0,135 0,135 0,200 0,200 0,135

0,556 0,448 0,313 0,135 0,167 0,273 0,273 0,135

1,000 0,680 0,400 0,105 0,135 0,167 0,167 0,105

1

1,000 0,448 0,050 0,077 0,105 0,105 0,167

1,000 0,024 0,050 0,077 0,077 0,273

1,000 0,826 0,556 0,500 0,273

1,000 0,615 0,556 0,313

1,000 0,909 0,400

1,000 0,400

Moje záverečná práce

0,680

Moje karta BIVŠ

Přehled témat závěrečných prací

Můj ISIC/ALIVE

0,750

Vypsané témata závěrečných prací

1,000

0,826

Závěrečná zkouška

Kontrola a změny osobních údajů

0,909

Můj ISIC/ALIVE

Termíny státní závěrečné zkoušky

1,000

0,826

Studijní materiály mých předmětů

0,909


Zápis předmětů

1,000

Moje číslo účtu

Moje osobní údaje Moje osobní údaje

Moje číslo účtu

M atice podobnosti

1,000

Pˇ r´ıloha E V´ ysledn´ e dendrogramy Podobnost 0.00

0.50

0.75

1.00

Cluster Dendrogram

Moje záverečná práce Vypsané témata závěrečných prací Přehled témat závěrečných prací Termíny státní závěrečné zkoušky Závěrečná zkouška Harmonogram AR Přijímací řízení Dokumenty Metodické pokyny Formuláře a žádosti studijního oddělení Výhlášky Ubytovací stipendium Stipendia Anketa studia Vložit na Vývěsku Vývěska E−volby Lidé na BIVŠ Můj rozvrh Předběžné rozvrhy Vyhledávání rozvrhu Vypsané semináře Vypsané seminární témata Předměty Zápis předmětů Vypsané zkoušky Přihlásit se na zkoušku Známky za celé studium Známky za aktuální semestr Moje témata prací Studijní materiály mých předmětů Moje faktury školného Nastavení veřejného profilu Změna přezdívky Změna hesla Moje e−mailová schránka Můj profil Kontrola a změny osobních údajů Moje osobní údaje Moje číslo účtu Můj ISIC/ALIVE Moje karta BIVŠ Správce vložených souborů v IS Nápověda

0.25

Obrázek E.1: Dendrogram sestroj´ı pomoc´ı metody Complete Linkage. Zdroj: vlastn´ı.

1

Podobnost 0.00

0.50

0.75

Cluster Dendrogram

Nápověda Správce vložených souborů v IS Dokumenty Harmonogram AR Ubytovací stipendium Stipendia Přijímací řízení Metodické pokyny Formuláře a žádosti studijního oddělení Výhlášky Anketa studia Lidé na BIVŠ E−volby Vložit na Vývěsku Vývěska Moje faktury školného Moje e−mailová schránka Můj profil Moje karta BIVŠ Nastavení veřejného profilu Změna přezdívky Změna hesla Můj ISIC/ALIVE Kontrola a změny osobních údajů Moje osobní údaje Moje číslo účtu Vypsané témata závěrečných prací Přehled témat závěrečných prací Termíny státní závěrečné zkoušky Závěrečná zkouška Známky za celé studium Známky za aktuální semestr Předměty Zápis předmětů Vypsané zkoušky Přihlásit se na zkoušku Vypsané semináře Vypsané seminární témata Moje záverečná práce Moje témata prací Studijní materiály mých předmětů Můj rozvrh Předběžné rozvrhy Vyhledávání rozvrhu

0.25

Obrázek E.2: Dendrogram sestroj´ı pomoc´ı metody Single Linkage. Zdroj: vlastn´ı.

2

N ehierarchické shlukování k=4

k=5

k=6

k=7

k=8

k=9

Moje osobní údaje

1

1

1

1

1

1

1

1

1

1

1

Moje číslo účtu

1

1

1

1

1

1

1

1

1

1

1


1

1

1

1

1

1

1

1

1

1

1

Můj ISIC/ALIVE

1

1

1

1

1

1

1

1

1

1

1

Moje karta BIVŠ

1

1

1

1

1

1

1

1

1

1

1

Můj profil

1

1

1

1

1

1

1

1

1

1

1


1

1

1

1

1

1

1

1

1

1

1

Změna přezdívky

1

1

1

1

1

1

2

2

2

2

2

Změna hesla

1

1

1

1

1

1

2

2

2

2

2


1

1

1

1

1

1

2

2

2

2

2


1

1

1

1

1

1

1

1

1

1

1


2

2

2

2

2

2

3

3

3

3

3

Nápověda

2

2

3

3

2

2

3

4

4

4

4


3

3

4

4

3

3

4

5

5

5

5


3

3

4

4

3

3

4

5

5

5

5

Můj rozvrh

3

3

4

4

3

3

4

5

5

5

5


2

2

2

2

4

4

5

6

6

6

6

Stipendia

2

2

2

2

4

4

5

6

6

6

6

Harmonogram AR

2

2

2

2

4

4

5

6

6

7

7


2

2

2

2

2

2

3

3

7

8

8

Výhlášky

2

2

2

2

2

2

3

3

7

8

8

Metodické pokyny

2

2

2

2

2

2

3

3

7

8

8

Dokumenty

2

2

2

2

2

2

3

3

7

8

8


2

2

3

3

5

5

6

7

8

9

9

Vývěska

2

2

3

3

2

2

3

3

7

8

8

E-volby

2

2

3

3

5

5

6

7

8

9

9

Lidé na BIVŠ

2

2

3

3

5

5

6

7

8

9

9

Anketa studia

2

2

3

3

5

5

6

7

8

9

9


2

2

2

2

5

5

6

7

8

7

7


3

4

5

5

6

6

7

8

9

10

10


3

4

5

5

6

6

7

8

9

10

10

Moje témata prací

3

4

5

5

6

7

8

9

10

11

11

Vypsané zkoušky

3

4

5

6

7

8

9

10

11

12

12


3

4

5

5

6

7

8

9

10

11

12

Vypsané semináře

3

4

5

6

7

8

9

10

11

12

13


3

4

5

6

7

8

9

10

11

12

13

Předměty Zápis předmětů Studijní materiály mých předmětů Termíny státní závěrečné zkoušky Závěrečná zkouška Vypsané témata závěrečných prací Přehled témat závěrečných prací Moje záverečná práce

3 3 3 4 4 4 4 4

4 4 4 5 5 5 5 5

5 5 5 6 6 6 6 6

6 6 5 7 7 7 7 7

7 7 6 8 8 8 8 8

8 8 7 9 9 9 9 7

9 9 8 10 10 10 10 8

10 10 9 11 11 11 11 9

11 11 10 12 12 12 12 10

12 12 11 13 13 13 13 11

13 13 11 14 14 14 14 11

1

k=10 k=11 k=12 k=13 k=14

Pˇ r´ıloha G Uk´ azky dr´ atˇ en´ ych model˚ u

´ Obrázek G.1: Uvodn´ ı stránka. Zdroj: vlastn´ı.

Obrázek G.2: Souborov´ y manaˇzer dalˇs´ı návrh. Zdroj: vlastn´ı.

1

Obrázek G.3: Detail vyuˇcovaného pˇredmˇetu. Zdroj: vlastn´ı.

Obrázek G.4: Souborov´ y manaˇzer. Zdroj: vlastn´ı.

2

Pˇ r´ıloha H Uk´ azky v´ ysledn´ ych obrazovek

´ Obrázek H.1: Uvodn´ ı stránka. Zdroj: vlastn´ı.

1

Obrázek H.2: Detail vyuˇcovaného pˇredmˇetu. Zdroj: vlastn´ı.

Obrázek H.3: Souborov´ y manaˇzer. Zdroj: vlastn´ı.

2

Obrázek H.4: Pˇrehled vystaven´ ych faktur. Zdroj: vlastn´ı.

Obrázek H.5: Profil pedagoga. Zdroj: vlastn´ı.

3

Obrázek H.6: Zapsané pˇredmˇety. Zdroj: vlastn´ı.

Obrázek H.7: Chybnˇe vyplnˇené pole ve formuláˇri. Zdroj: vlastn´ı.

4

Pˇ r´ıloha I Obsah CD / Anal´ yza obsahu – tabulka s analýzou obsahu IS Data – matice podobnosti a vˇsechna sezen´ı Card Sortingu Mockup – soubor s mockupem a jeho export v pdf Prototyp – export prototypu z aplikace UXPin Skripty – skripty na zpracován´ı dat z Card Sortingu V´ ystupy – výstupy ze statistického zpracován´ı Card Sortingu Wireframy – export wirefram˚ u v pdf

1

Bankovní institut vysoká škola Praha Katedra informatiky a kvantitativních metod

Recommend Documents