Web SIGCHI komunity. Bc. Tomá² Höger

Transkript

1

2 ii

3 ƒeské vysoké u ení technické v Praze Fakulta elektrotechnická Katedra po íta ové graky a interakce Diplomová práce Web SIGCHI komunity Bc. Tomá² Höger Vedoucí práce: Ing. Míkovec Zden k, Ph.D. Studijní program: Otev ená informatika, Navazující magisterský Obor: Po íta ová graka a interakce 10. kv tna 2012

4 iv

5 v Pod kování Na tomto míst bych cht l pod kovat Ing. Zde kovi Míkovcovi za vedení diplomové práce, za cenné podklady, nápady a p ipomínky. Rovn º bych cht l pod kovat mým rodi m a bratr m za p ipomínky k dokumentaci projektu a za gramatickou korekturu. D kuji taky svému pastorovi Ond ejovi Sobotkovi za povzbuzování v pr b hu práce. Mé pod kování dále pat í v²em participant m, kte í se ú astnili uºivatelských test.

6 vi

7 vii Prohlá²ení Prohla²uji, ºe jsem práci vypracoval samostatn a pouºil jsem pouze podklady uvedené v p iloºeném seznamu. Nemám závaºný d vod proti uºití tohoto ²kolního díla ve smyslu Ÿ60 Zákona. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o zm n n kterých zákon (autorský zákon). V Praze dne

8 viii

9 Abstract This diploma thesis concerns analysis, design and testing of web pages of SIGCHI community. The thesis bases on systematic approach of designing user interfaces by using modern methods of HCI (application of cognitive walkthrough and heuristic evaluation, creating personas, designing prototypes, usablity testings etc.). An output of this thesis is a functional web built on CMS Drupal which is designed by methods of user research and usability testings. Results of the thesis show that methods of testings without user can never replace methods of testings with user. Results show as well that the process of designing UI needs at least several iteraction of a design. One of the last conclusions is a fact that administration interface of CMS Drupal has few usability problems. Abstrakt Tato diplomová práce se zabývá analýzou, návrhem a testováním webových stránek komunity SIGCHI. Práce vyuºívá systematického p ístupu k vytvo ení návrhu uºivatelského rozhraní za pouºití moderních metod z oblasti HCI (vyuºití kognitivního pr chodu a heuristické evaluace, tvorby person, navrhování prototyp, testování pouºitelnosti aj.). Výstupem práce je funk ní web postavený na CMS Drupal, který je navrºen na základ uºivatelského výzkumu a usability testování. Výsledky práce poukazují na skute nost, ºe metody testování pouºitelnosti bez uºivatele nikdy zcela nenahradí metody testování s uºivatelem. Dále, ºe v procesu tvorby uºivatelského rozhraní je nutné po ítat hned s n kolika iteracemi návrhu. Záv ry testování rovn º odhalují nedostatky administra ního rozhraní systému Drupal z hlediska pouºitelnosti. ix

10 x

11 Obsah 1 Úvod 1 2 Analýza Specikace zám r webu Cílová skupina Analýza sou asného stavu webu (testování bez uºivatele) Cíle testování Popis testování P ípady uºití (use-cases) Pr b h testování P ehled nález v testech a návrh jejich e²ení Funk ní poºadavky Obecné poºadavky Uºivatelské role systému Tvorba person Denice uºivatelských skupin Skeletony a persony Analýza uºivatelského rozhraní HTA diagramy Návrh Návrh Rozloºení prvk Koncept e²ení jednotlivých ástí systému Náhled návrhu Návrh Vybrané zm ny v návrhu Náhled návrhu Návrh Vybrané zm ny v návrhu Gracký vzhled Náhled výsledného návrhu xi

12 xii OBSAH 4 Implementace Pouºité prost edky a technologie PHP XHTML a CSS JavaScript Databáze MySQL CMS Drupal Pouºití modul Pouºití funkcí HOOK Implementace jednotlivých ástí systému Registrace lenství Registrace lenství Autorizace k systému Systém p ístupových práv Systém pro management len Statistiky uºivatel Knihovna Jobhall Bezpe nost a zaji²t ní kompatibility Kontrola vstupních dat formulá e Validita kódu Organizace zdrojových soubor Testování pouºitelnosti s uºivateli Testovací kongurace Pr b h testování P ehled úkol P ihlá²ení k odb ru zpravodaje P ihlá²ka remního lenství Potvrzení lenství ze strany administrátora Podání ºivotopisu v sekci Jobhall Rezervace knihy Výp j ka knihy Vytvo ení nové stránky Editace stránky Screener Pretest Posttest Test Executive summary Rozsah úkol P ehled vybraných uºivatel Pretest Posttest Pozorování a vybrané citace Nálezy

13 OBSAH xiii 5.8 Test Executive summary Rozsah úkol P ehled vybraných uºivatel Pretest Posttest Nálezy Test Executive summary Rozsah úkol P ehled vybraných uºivatel Pretest Posttest Nálezy Záv r 63 A Uºivatelská p íru ka 67 A.1 Instalace a kongurace A.2 Umíst ní projektu na internetu A.3 Základní struktura systému A.4 Uºivatelská p íru ka pro leny sdruºení A.4.1 P ihlá²ení do systému A.4.2 Rezervace v knihovn A.4.3 Vytvo ení náhradní rezervace A.4.4 Prodlouºení rezervace A.4.5 Podání ºivotopisu v Jobhallu A.5 Uºivatelská p íru ka pro správce jobhallu A.6 Uºivatelská p íru ka pro knihovníka A.6.1 Vytvo ení rezervace za jiného uºivatele A.6.2 Správa knihovny A.7 Uºivatelská p íru ka pro administrátora A.7.1 Vytvo ení obsahu A.7.2 Administrace obsahu A.7.3 Nastavení lenství A.7.4 Nastavení modul B Seznam pouºitých zkratek 71 C Obsah p iloºeného CD 73

14 xiv OBSAH

15 Seznam obrázk 2.1 Registrace lenství (U1) - kognitivní pr chod P ihlá²ení odb ru zpravodaje (U2) - kognitivní pr chod ƒtení novinek blogu (U4) - heuristická evaluace Nep ihlá²ený uºivatel ƒlen Administrátor Registrace lenství a jeho prodlouºení Vyp j ení knihy P idání ºivotopisu v sekci Jobhall Rozloºení prvk Náhled návrhu Základní barvy T etí barevný odstín Pozadí stránek Náhled výsledného návrhu C.1 Obsah p iloºeného CD xv

16 xvi SEZNAM OBRÁZK

17 Seznam tabulek 2.1 Vstup do sekce ƒlenství Odeslání p ihlá²ky Odeslání p ihla²ovacího formulá e Vstup do sekce About Us Podání p ihlá²ky P ehled vybraných uºivatel testu P ehled vybraných uºivatel testu P ehled vybraných uºivatel testu xvii

18 xviii SEZNAM TABULEK

19 Kapitola 1 Úvod Tvorba webových aplikací dnes vytvá í velice rozsáhlé odv tví IT, ve kterém se vyuºívá celá ada r zných technologií. Mnoho lidí se ale asto myln domnívá, ºe záruka dobrých stránek bude n jakým zp sobem p ímo úm rná moderním technologickým trend m. ƒasto je v²ak opomíjena stránka uºivatelského rozhraní a jeho d myslného návrhu. Tímto zp sobem poté vzniká mnoho web, které jsou sice funk ní, ale z hlediska pouºitelnosti siln zaostávají. Nevhodn navrºené uºivatelské rozhraní m ºe lehce zp sobit, ºe uºivatel stránky p ed- asn opustí a ºe nebude mít zájem se vrátit. Návrh m ºe být vytvo en k na²emu obrazu, ale p itom m ºe míjet pot eby cílové skupiny. Stejn tak se m ºe stát, ºe se návrh bude sna- ºit uspokojit naprosto v²echny, ale nikoho vlastn po ádn. Klí k vhodnému uºivatelskému rozhraní vede skrze návrh ve spolupráci s uºivatelem (User Centered Design). Je pot eba uºivatele poznat co nejlépe a mít na pam ti, ºe Uºivatel produktu nejsme my. Nevypadá jako my, nep emý²lí jako my, ned lá v ci jako my, nemá na²e o ekávání nebo domn nky. Pokud by je m l, tak by uº nebyl uºivatelem na²eho produktu, ale na²ím konkurentem [9]. V této diplomové práci bych cht l uplatnit v²echny své dosavadní poznatky, které jsem získal studiem na ƒvut - FEL v p edm tech Tvorba uºivatelského rozhraní, Návrh uºivatelského rozhraní, Psychologie v HCI a Testování uºivatelského rozhraní. Tyto získané zku- ²enosti chci vyuºít p i analýze a návrhu uºivatelského rozhraní pro web ob anského sdruºení Prague ACM SIGCHI. P i práci bych cht l postupovat systematickým p ístupem k návrhu za pouºití moderních metod z oblasti HCI (Human Computer Interaction). Rád bych tak v praxi vyzkou²el uºivatelské testování jak s uºivatelem, tak i bez n j a výsledky tohoto zkoumání zapracoval do nální implementace webu. Cíle práce: Má diplomová práce má celkem t i st ºejní cíle: 1. Provést analýzu sou asných webových stránek a pot eb komunity SIGCHI. 2. Na základ analýzy vytvo it nový návrh webu s poºadavky na roz²í ení za pouºití postup z oblasti HCI. 3. Nový návrh webu podrobit uºivatelskému testování a zhodnotit jeho funk nost z hlediska pouºitelnosti. 1

20 2 KAPITOLA 1. ÚVOD

21 Kapitola 2 Analýza 2.1 Specikace zám r webu Prague ACM SIGCHI je sdruºení, které spojuje lidi se zájmem o návrh a testování uºivatelských rozhraní. Hlavním cílem jeho webu je p inést základní informace o této komunit, podat p ehled o po ádaných akcích a pro leny sdruºení poskytnout r zné druhy webových sluºeb. 2.2 Cílová skupina Cílovou skupinou jsou lidé, kte í se zajímají o uºivatelský výzkum a o návrh aplikací ve spolupráci s uºivatelem. Jedná se o jednotlivce (a rmy), jejichº innost se alespo z ásti dotýká návrhu uºivatelského rozhraní. Tito uºivatelé jsou obvykle velice zdatní v pouºívání nových technologií a velmi dob e se orientují v problematice uºivatelské pouºitelnosti. Jedná se o náro né uºivatele, kte í budou zkoumat, zda stránky SIGCHI opravdu odpovídají hodnotám, které se toto sdruºení snaºí obhajovat a prezentovat ve ejnosti. 2.3 Analýza sou asného stavu webu (testování bez uºivatele) Analýza se bude zabývat sou asnými internetovými stránkami které budou podrobeny metodám testování bez uºivatele 1. Na sou asných stránkách najdeme informace o aktivitách komunity a o moºnostech lenství. Web dále nabízí i ur ité sluºby jak pro registrované leny, tak pro ²irokou ve ejnost. Jedná se zejména o odebírání pravidelných zpravodaj a moºnost výp j ky odborné literatury. Stránky jsou postaveny na CMS Drupal 6.22 a nabízejí administrátorské rozhraní pro správu webu. Uºivatelská sekce je p ístupná pouze administrátorovi a lidem, kte í spravují jednotlivé ásti webu (knihovník, blogger atd.). Ostatní uºivatelé svou sekci nemají a do systému se nemohou p ihlásit. 1 Testování není realizováno pozorováním osoby cílové skupiny, ale je samostatn provád no odborníkem. 3

22 4 KAPITOLA 2. ANALÝZA Cíle testování Testování si klade za cíl odpov d t na tyto otázky: Budou uspokojeny nároky cílové skupiny na pouºitelnost webu (viz oddíl 2.2)? Bude moºné webové stránky SIGCHI bez problém zobrazit v prohlíºe i Google Chrome, Mozilla Firefox, Opera a Safari? Popis testování K testování bez uºivatele jsem se rozhodl pouºít dv základní metody: kognitivní pr chod a heuristickou evaluaci. Kognitivní pr chod je metoda, p i které se prochází aplikace krok za krokem podle daného scéná e a kdy se na základ otázek hledají problémy spojené s pouºitelností [19]. Tato metoda je vhodná pro testování pouºitelnosti rozhraní pro nové uºivatele (rst-look test) a pro úlohy, které mají jasnou strukturu [20]. Heuristická evaluace je metoda, která zahrnuje testování aplikace odborníky na základ p edem denovaných heuristik (kritérií) [21]. Metodu je vhodné pouºít pro vyhodnocení pouºitelnosti rozhraní z hlediska r zných aspekt jeho návrhu (design-informed evaluation) a pro mén strukturované úlohy [22]. Pro testování budu pr b ºn pouºívat r zné druhy vý²e zmín ných internetových prohlíºe tak, abych poté mohl vyhodnotit, zda se stránky zobrazují na v²ech prohlíºe ích korektn. Otázky pro kognitivní pr chod [17]: Otázka 0: Jakého cíle chce uºivatel dosáhnout? Otázka 1: Je uºivateli z ejmý následující krok? Otázka 2: Spojí si uºivatel popisek akce s jeho cílem? Otázka 3: Dostane uºivatel dostate nou zp tnou vazbu? Heuristická evaluace (kritéria) [18]: 1. Viditelnost stavu systému systém by m l vºdy dát uºivateli v d t, co se práv odehrává. 2. Spojení mezi systémem a reálným sv tem komunikace systému s uºivatelem by se m la realizovat uºivatelsky p íjemným zp sobem (srozumitelný jazyk bez odborných termín ). 3. Uºivatelská kontrola a svoboda uºivatelé p i práci se systémem d lají chyby a pot ebují proto moºnost úniku pro návrat do p edchozího stavu. 4. Konzistence a standardizace uºivatelé by nem li být nuceni p emý²let, jestli r zné termíny mají stejný význam, proto se doporu uje dodrºovat obecné zásady. 5. Prevence chyb vyvarovat se chybovým hlá²ením bezpe ným designem, který bude preventivn p sobit proti problém m.

23 2.3. ANALÝZA SOUƒASNÉHO STAVU WEBU (TESTOVÁNÍ BEZ UšIVATELE) 5 6. Rozpoznání místo vzpomínání uºivatel by nem l být nucen vzpomínat si na provád ní operací v systému, instrukce by m ly být v systému vºdy viditeln umíst ny. 7. Flexibilní a efektivní pouºití umoºn ní zrychlení práce se systémem pro pokro ilé uºivatele. 8. Estetický a minimalistický design bez nepot ebných informací. 9. Pomoc uºivatel m poznat, pochopit a vzpamatovat se z chyb chybové hlá²ky by m ly být uvád ny v p irozeném jazyce a m ly by navrhovat e²ení. 10. Nápov da a návody v²echny informace se musí dát lehce vyhledat, nápov da by m la být snadno dostupná a obsahovat postupy v jednotlivých krocích P ípady uºití (use-cases) Registrace lenství (U1) Je jedním ze základních use-cas stránek SIGCHI. Pokud uºivateli nebude zcela jasné, jakým zp sobem se dá podat p ihlá²ka pro lenství ve sdruºení, nem ºe se stát jeho sou ástí. Pokud jeho registraci bude provázet ada komplikací a nejasností, jeho mín ní o sdruºení zna n poklesne. ƒastým problémem p i registraci nového uºivatele na webových stránkách je skute nost, ºe odkaz pro registraci není umíst n viditeln. Dále uºivatel asto neví, jaké kroky budou p i registraci následovat a jakým zp sobem bude probíhat platba. Pro tento p ípad uºití jsem zvolil testování kognitivním pr chodem z d vodu, abych mohl krok za krokem systematicky projít kompletním procesem registrace a zaznamenat v²echny p ípadné problémy, s kterými se m ºe setkat nový uºivatel. P ihlá²ení odb ru zpravodaje (U2) Jedná se o dal²í pom rn frekventovanou operaci na stránkách SIGCHI. Pro tento p ípad uºití jsem zvolil testování pomocí kognitivního pr chodu. P ihlá²ení ke zpravodaji je innost, kterou uºivatel obvykle neprovádí opakovan a cht l bych tak otestovat pouºitelnost zejména pro nové uºivatele. Vytvo ení rezervace v knihovn (U3) P ístup do knihovny Prague ACM SIGCHI je jedna ze základních výhod len sdruºení (knihovna obsahuje tituly, které v ƒesku nebyly vydány). Vytvá ení rezervací v knihovn je p ístupné pouze len m sdruºení. Pro testování pouºitelnosti tohoto use-case jsem zvolil heuristickou evaluaci. D vodem této volby je zám r vyhodnotit r zné aspekty rozhraní z hlediska jeho návrhu.

24 6 KAPITOLA 2. ANALÝZA ƒtení novinek blogu (U4) Náhled novinek blogu je zobrazen hned na úvodní stránce webu SIGCHI. P i testování se chci zam it na to, jak moc je tento náhled itelný a p ehledný. Tyto kritéria bych cht l otestovat na základ heuristické evaluace. Registrace lenství v angli tin (U5) Webové stránky SIGCHI mají rovn º záloºku About us, která reprezentuje informace o sdruºení v anglickém jazyce. Pomocí kognitivního pr chodu zkusím otestovat podání p ihlá²ky v anglickém jazyce Pr b h testování Registrace lenství (U1) - kognitivní pr chod (obr. 2.1) Otázka 0: Jakého cíle chce uºivatel dosáhnout? Podání p ihlá²ky pro lenství nového uºivatele. Výchozí stav: Úvodní stránka webu SIGCHI. Obrázek 2.1: Registrace lenství (U1) - kognitivní pr chod

25 2.3. ANALÝZA SOUƒASNÉHO STAVU WEBU (TESTOVÁNÍ BEZ UšIVATELE) 7 Krok 1: Vstup do sekce ƒlenství (viz tabulka 2.1). Otázka Odpov Poznámka Je uºivateli z ejmý následující krok? ANO. Uºivatel má moºnost kliknout na záloºku ƒlenství a nebo kliknout na odkazy v nabídce Sta te se lenem SIGCHI. Spojí si uºivatel popisek akce s jeho cílem? Dostane uºivatel dostate nou zp tnou vazbu? M ºe zde nastat problém. ANO. Záloºka ƒlenství v hlavním menu je zcela v po ádku. Problematická je nabídka Sta te se lenem SIGCHI. Uºivatel má zde moºnost kliknout na Individuální lenství a Firemní lenství. Uºivatel si m ºe myslet, ºe pod jednotlivými odkazy se dostane pouze k p ihla²ovacímu formulá i pro daný typ lenství a ºe uº nebude moci p ejít k dal²ímu (v p ípad, ºe se je²t nerozhodl, který typ lenství zvolí). Uºivatel dostane dostate nou zp tnou vazbu: dostane se k informacím o lenství a k p ihla²ovacímu formulá i. Krok 2: Odeslání p ihlá²ky (viz tabulka 2.2). Tabulka 2.1: Vstup do sekce ƒlenství. Otázka Odpov Poznámka Je uºivateli z ejmý následující krok? NE. V p ípad studentského a individuálního lenství je postup jednozna ný. Komplikace mohou nastat p i - remním lenství. Firemní lenství zahrnuje 3 individuální lenství a není zcela jasné, jak se tyto informace mají vyplnit (zda se mají odeslat 3 jednotlivé p ihlá²ky nebo zda se mají údaje napsat jen jako poznámka i je²t jiným zp sobem). Dále zde chybí informace o tom, jakým zp sobem bude probíhat platba. Spojí si uºivatel popisek akce s jeho cílem? ANO. Uºivatel ode²le formulá tla ítkem P ihlásit. Dostane uºivatel dostate nou zp tnou vazbu? NE. Uºivatel je informován o tom, ºe jeho ºádost byla úsp ²n odeslána a ºe má zaplatit poplatek na daný ú et. Chybí zde v²ak informace o tom, ºe jsou mu tyto informace zaslány taky na a ºe si je tedy nemusí zna it. Kone ný stav: P ihlá²ka je odeslána. Tabulka 2.2: Odeslání p ihlá²ky.

26 8 KAPITOLA 2. ANALÝZA P ihlá²ení odb ru zpravodaje (U2) - kognitivní pr chod (obr. 2.2) Otázka 0: Jakého cíle chce uºivatel dosáhnout? P ihlá²ení k odb ru zpravodaje. Výchozí stav: Úvodní stránka webu SIGCHI. (Obrázek stavu se nachází na CD v adresá i text/screenshots/analyza.) Krok 1: Odeslání p ihla²ovacího formulá e (viz tabulka 2.3). Obrázek 2.2: P ihlá²ení odb ru zpravodaje (U2) - kognitivní pr chod Otázka Odpov Poznámka Je uºivateli z ejmý ANO. Uºivatel vyplní pole pro . následující krok? Spojí si uºivatel popisek akce s jeho cílem? NE. Tla ítko má zde popisek P ihlásit/odhlásit, a tak není zcela jednozna né, co se stane po jeho zmá knutí. Dostane uºivatel dostate nou zp tnou vazbu? NE! Uºivatel nedostane ºádnou zp tnou vazbu (informace o úsp ²ném odeslání je zcela nelogicky ve spodní ásti stránek, kde uºivatel musí sjet my²í). Tabulka 2.3: Odeslání p ihla²ovacího formulá e. Kone ný stav: Zpravodaj je p ihlá²en. (Obrázek stavu se nachází na CD v adresá i text/screenshots/analyza.)

27 2.3. ANALÝZA SOUƒASNÉHO STAVU WEBU (TESTOVÁNÍ BEZ UšIVATELE) 9 Vytvo ení rezervace v knihovn (U3) - heuristická evaluace (Obrázek pro tento use-case se nachází na CD v adresá i text/screenshots/analyza.) Poru²ené heuristiky:. 3 - Uºivatelská kontrola a svoboda. Knihovna SIGCHI neumoº uje zru²it rezervaci. Lze o ekávat, ºe uºivatelé p i práci b ºn d lají chyby a je tak proto d leºité, aby zde existoval zp sob, jak dané chyby napravit. V opa ném p ípad se m ºe stát, ºe uºivatel omylem vytvo í rezervaci na ²patný titul, kterou poté nebude moci zru²it a titul bude zbyte né rezervován (a nedostupný) Flexibilní a efektivní pouºití. P i kaºdé rezervaci je zapot ebí neustále vypl ovat znova ovou adresu. Tato skute nost zpomaluje a zmen²uje efektivnost systému Pomoc uºivatel m poznat, pochopit a vzpamatovat se z chyb. P i nevypln ní pole p i rezervaci, systém komunikuje chybovou hlá²kou je vyºadováno, která není gramaticky správn Nápov da a návody. V knihovn SIGCHI chybí jakákoliv nápov da i informace o tom, jak se rezervace ru²í nebo prodluºuje a kde se má rezervovaná kniha vyzvednout. ƒtení novinek blogu (U4) - heuristická evaluace (obr. 2.3) Obrázek 2.3: ƒtení novinek blogu (U4) - heuristická evaluace Poru²ené heuristiky:. 8 - Estetický a minimalistický design. Náhled novinek blogu je na první pohled nep ehledný a je t ºké ur it stá í jednotlivých p ísp vk.

28 10 KAPITOLA 2. ANALÝZA Registrace lenství v angli tin (U5) - kognitivní pr chod Otázka 0: Jakého cíle chce uºivatel dosáhnout? Podání p ihlá²ky pro lenství nového uºivatele v anglickém jazyce. Výchozí stav: Úvodní stránka webu SIGCHI. (Obrázek stavu se nachází na CD v adresá i text/screenshots/analyza.) Krok 1: Vstup do sekce About Us (viz tabulka 2.4). (Obrázek stavu se nachází na CD v adresá i text/screenshots/analyza.) Otázka Odpov Poznámka Je uºivateli z ejmý ANO. Uºivatel klikne na záloºku About Us. následující krok? Spojí si uºivatel ANO. Anglická vlajka dostate n napomáhá k tomu, popisek akce abychom si popisek akce spojili s jeho cílem. s jeho cílem? Dostane uºivatel dostate nou zp tnou vazbu? ANO. Zobrazí se stránka s anglickými informacemi. Tabulka 2.4: Vstup do sekce About Us. Krok 2: Podání p ihlá²ky (viz tabulka 2.5). (Obrázek stavu se nachází na CD v adresá i text/screenshots/analyza.) Otázka Odpov Poznámka Je uºivateli z ejmý následující krok? NE. Chybí zde informace, jakým zp sobem se má o lenství poºádat. Spojí si uºivatel NE. Chybí zde prvek, na kterém by se dala akce provést. popisek akce s jeho cílem? Dostane uºivatel dostate nou zp tnou vazbu? NE. Není na em provést akci a tedy se nedá získat ani zp tná vazba. Tabulka 2.5: Podání p ihlá²ky. Kone ný stav: Registrace lenství v anglickém jazyce se nezda ila. (Obrázek stavu se nachází na CD v adresá i text/screenshots/analyza.)

29 2.3. ANALÝZA SOUƒASNÉHO STAVU WEBU (TESTOVÁNÍ BEZ UšIVATELE) P ehled nález v testech a návrh jejich e²ení Nálezy s vysokou prioritou: Nevhodný formulá pro registraci remního lenství (viz tabulka 2.2) Návrh e²ení: Formulá by se mohl dynamicky m nit podle typu lenství. P i zvoleném remním lenství by pak mohl obsahovat i poloºky pro jednotlivé leny rmy. Nevhodný formulá pro p ihlá²ení odb ru zpravodaje (viz tabulka 2.3) Návrh e²ení: Nechat zde pouze formulá pro p ihlá²ení zpravodaje a v bec to nekombinovat s odhla²ovacím formulá em (odkaz pro odhlá²ení bude v kaºdém zaslaném zpravodaji). P i p ihlá²ení odb ru zpravodaje nedostane uºivatel zp tnou vazbu (viz tabulka 2.3) Návrh e²ení: P i p ihlá²ení zpravodaje dát uºivateli na v domí, ºe akce prob hla úsp ²n a ºe mu byl zaslán potvrzující . Uºivatel nem ºe zru²it svou rezervaci v knihovn (viz Vytvo ení rezervace v knihovn U3) Návrh e²ení: Vytvo it uºivatelskou sekci webu, kde bude moci uºivatel spravovat své vlastní rezervace. Nálezy se st ední prioritou: Chyb jící informace p i registraci lenství (viz tabulka 2.2) Návrh e²ení: Bude vhodné doplnit informaci o tom, jakým zp sobem bude probíhat platba a p i odeslání formulá e informovat uºivatele o tom, ºe mu byly pot ebné informace poslány na . Uºivatel musí p i kaºdé rezervaci v knihovn psát sv j (viz Vytvo ení rezervace v knihovn U3) Návrh e²ení: Vytvo it uºivatelskou sekci webu, kde bude moci uºivatel spravovat své vlastní rezervace Chyb jící nápov da v knihovn SIGCHI (viz Vytvo ení rezervace v knihovn U3) Návrh e²ení: Mít v knihovn SIGCHI k dispozici nápov du a doplnit informace o tom, jak se dané rezervace ru²í, prodluºují, i kde se rezervované knihy vyzvedávají.

30 12 KAPITOLA 2. ANALÝZA Nemoºnost registrace lenství v angli tin (viz tabulka 2.5) Návrh e²ení: Umístit zde p ihla²ovací formulá v angli tin nebo alespo kontaktní pro zájemce o lenství. Nálezy s nízkou prioritou: Nevhodný popisek v nabídce Sta te se lenem SIGCHI (viz tabulka 2.1) Návrh e²ení: V nabídce Sta te se lenem SIGCHI by mohla být pouze obecná informace o tom, ºe je moºné mít jak individuální, tak remní lenství a mohl by zde být odkaz dozv d t se více. Nevhodná zp tná vazba p i nevalidní rezervaci v knihovn (viz Vytvo ení rezervace v knihovn U3) Návrh e²ení: Dát uºivateli zp tnou vazbu, která bude srozumitelná. Nevhodné uspo ádání náhledu novinek blogu (viz ƒtení novinek blogu U4) Návrh e²ení: Zvolit uspo ádání nad sebou podle asové posloupnosti. 2.4 Funk ní poºadavky Pro stanovení funk ních poºadavk byl proveden uºivatelský výzkum v podob konzultací s lidmi z p edsednictva pobo ky SIGCHI v Praze. Na základ t chto konzultací byly stanoveny ty i oblasti roz²í ení stávajících www stránek: privátní sekce, systém pro management len, knihovna a sekce pro inzerci pracovních pozic. Privátní sekce Privátní sekce bude p ístupná po p ihlá²ení do systému pomocí u a hesla. Uºivatelský ú et na webu SIGCHI se vytvo í p i podání elektronické p ihlá²ky. Zp ístupn n bude v²ak aº po zaplacení lenského poplatku. šádajícímu uºivateli bude tato skute nost oznámena em (ºe má zaplatit i to, ºe uº je ú et aktivován). Platnost ú tu se bude dát prodlouºit, zru²it i zkrátit. ƒlenství se vºdy prodluºuje od data vypr²ení p vodního lenství, nebo od data zaplacení (podle toho, co nastane pozd ji). O kaºdém uºivateli budou vedeny následující údaje: - (povinné), - heslo (povinné),

31 2.4. FUNKƒNÍ POšADAVKY 13 - jméno (povinné), - p íjmení (povinné), - datum narození, - rma, - telefon, - ulice, m sto, PSƒ, - typ lenství, - poznámka, - datum zaloºení ú tu, - datum zaloºení a ukon ení lenství (pokud jich bylo více, které na sebe nenavazovaly, budou uvedena v²echna data). O kaºdé rm budou vedeny následující údaje: - název rmy (povinné), - (povinné), - jméno kontaktní osoby, - p íjmení kontaktní osoby, - adresa, - telefon, - webové stránky, - datum zaloºení ú tu, - datum zaloºení a ukon ení lenství (pokud jich bylo více, které na sebe nenavazovaly, budou uvedena v²echna data). Vytvo ení systému pro management len, remních len, prodluºování registrací, ových notikací, statistik apod. V administrátorské roli bude p ístupné rozhraní pro management len. Pod tímto rozhraním se budou dát vytvá et, upravovat a mazat uºivatelské ú ty a m nit jejich nastavení. Dále se zde budou vytvá et, zkracovat a prodluºovat registrace. Rozhraní pro management len bude umoº ovat zobrazit leny, kte í se registrovali a nezaplatili a seznam t ch, kte í své lenství neprodlouºili. Toto zobrazení bude slouºit pro snadné vytvo ení/prodlouºení lenství po zaplacení lenského p ísp vku. Zde budou taky k dispozici statistiky o lenech (kolik len pro daný typ lenství byl v daném roce apod.) a moºnost rozeslání hromadné mailové korespondence. Zlep²ení systému knihovny a vytvo ení systému pro management výp j ek Elektronická knihovna bude p ístupná v²em len m sdruºení. Knihy se budou moci rezervovat na zvolenou dobu (nejdéle v²ak na dobu k tomu ur enou i do konce trvání lenství). Pokud bude uºivatel chtít rezervovat knihu na del²í dobu,

32 14 KAPITOLA 2. ANALÝZA bude si moci rezervaci jednou prodlouºit. Délka doby ur ená pro výp j ku se bude dát nastavit v administrátorském rozhraní. Kdyº si n kdo knihu rezervuje a do týdne si ji nevyzvedne, jeho rezervace propadne. Systém bude umoº ovat vytvo ení náhradní rezervace, pokud bude daný termín obsazen. Postupuje se p i ní stejn jako p i normální rezervaci, jen s tím rozdílem, ºe se nevybírá volný termín, ale jiº zarezervovaný. Pokud bude p vodní rezervace zru²ena, náhradník bude em informován o tom, ºe si knihu m ºe zarezervovat. V posledním 14 dnech rezervace bude uºivateli em oznámeno, ºe se jeho rezervace blíºí ke konci a ºe je zapot ebí knihy vrátit. Pokud daná osoba knihu v as nevrátí, bude kaºdý týden po ukon ení rezervace em vyzvána k tomu, aby tak u inila. Systém bude v administrátorském reºimu nabízet taky sekci pro management výp j- ek, kde se jednotlivé rezervace budou dát vypsat dle zadaných parametr a tyto rezervace editovat i mazat. Vytvo ení sekce pro inzerci pracovních pozic Systém bude nabízet sekci pro inzerci pracovních pozic. Do podsekce Hledám práci budou moci p idat sv j ºivotopis v²ichni lenové. Do podsekce Nabídka práce budou moci p idávat pracovní nabídky jen zástupci rem. Jednotlivé inzeráty bude schvalovat administrátor. Formulá pro p idání ºivotopisu bude obsahovat tyto pole: - ºivotopis v PDF (povinné), - popis poºadavk (povinné), - o ekávané platové ohodnocení (nepovinné), - neºádoucí nabídky (nepovinné). Formulá pro p idání pracovní pozice bude obsahovat tyto pole: - název pozice (povinné), - obecný popis (povinné), - pracovní nápl (povinné), - informace o rm (nepovinné), - poºadované schopnosti (nepovinné), - nabízené podmínky (nepovinné), - kontakt (nepovinné). Kaºdý p ísp vek v jobhallu bude zobrazen 4 týdny. Na konci této doby bude autorovi inzerátu zaslán s informací, ºe m ºe dobu zobrazení prodlouºit o dal²í 4 týdny. V p ípad nezájmu o prodlouºení bude p ísp vek automaticky vymazán. Autor inzerátu m ºe zobrazení kdykoli pozastavit.

33 2.5. OBECNÉ POšADAVKY Obecné poºadavky 1. Bezpe ná registrace nových len. 2. Bezpe né p ihlá²ení. 3. Uchování kompletní historie v²ech d leºitých informací. 2.6 Uºivatelské role systému Systém rozli²uje celkem sedm uºivatelských rolí. Jeden uºivatelský ú et m ºe mít sou asn n kolik rolí najednou. Nep ihlá²ený uºivatel Obrázek 2.4: Nep ihlá²ený uºivatel Nep ihlá²ený uºivatel nemá v systému sv j vlastní ú et (tzn. je náv²t vníkem, který není lenem sdruºení nebo uºivatelem, který se je²t nep ihlásil). Nep ihlá²ený uºivatel m ºe voln procházet stránky, ale nemá p ístup k privátní sekci a k ºádné z lenských výhod. M ºe v²ak podat p ihlá²ku k lenství a nebo se p ihlásit. Jednotlivé use-casy pro tuto roli jsou znázorn ny na obr ƒlen (student nebo individuální osoba) ƒlen sdruºení SIGCHI. Má zaplacený lenský p ísp vek. Je mu p ístupná privátní sekce, elektronická knihovna atd. Kaºdý len má v daném systému sv j vlastní ú et (tzn. má zaplacený lenský p ísp vek a má své p ístupové údaje k ú tu).

34 16 KAPITOLA 2. ANALÝZA Obrázek 2.5: ƒlen Je mu p ístupná privátní sekce, elektronická knihovna, jobhall a dal²í lenské výhody. Dále m ºe spravovat sv j uºivatelský ú et, své rezervace a p ísp vky. Jednotlivé use-casy pro tuto roli jsou znázorn ny na obr Firemní zástupce Firemní zástupce m ºe provád t stejné úkony jako b ºný len. Navíc je mu v²ak p ístupné rozhraní pro p idávání inzerce pracovních pozic. Blogger Blogger m ºe provád t stejné úkony jako b ºný len. Navíc je mu v²ak p ístupné rozhraní pro p idávání a editaci blogových novinek a akcí. Správce jobhallu Správce jobhallu m ºe provád t stejné úkony jako b ºný len. Navíc je mu v²ak p ístupné rozhraní pro editaci pracovních poptávek a nabídek.

35 2.6. UšIVATELSKÉ ROLE SYSTÉMU 17 Knihovník Knihovník m ºe provád t stejné úkony jako b ºný len. Navíc má v²ak p ístup ke v²em rezervacím v knihovn SIGCHI, které m ºe libovoln upravovat i vytvá et. Knihovník dále m ºe p idávat nové knihy a upravovat údaje t ch stávajících. Administrátor Obrázek 2.6: Administrátor

36 18 KAPITOLA 2. ANALÝZA Administrátor je role s nejvy²²ími právy v systému, která není asov omezená. Administrátor má v²echny pot ebná práva pro správu obsahu webu, uºivatelských ú t a zm n nastavení systému. Jednotlivé use-casy pro tuto roli jsou znázorn ny na obr Tvorba person Persona je detailní popis hypotetického uºivatele, který je vytvo en na základ sesbíraných dat o skute ných lidech. Uºití persony p i návrhu umoº uje snáze vytvo it uºivatelské rozhraní, které vychází z reálných pot eb cílové skupiny a zvy²uje tak jeho pouºitelnost [12]. P i tvorb person jsem vycházel z rozhovor a poznatk o dvou absolventech ƒvut FEL (kte í tvo í cílovou skupinu podle oddílu 2.2) a jejich manºelek. Na základ sesbíraných dat (faktoid ) jsem vytvo il skeletony pro primární a dopl kovou personu Denice uºivatelských skupin Aktivní skupina Aktivní skupinu tvo í uºivatelé cílové skupiny, pro které jsou stránky primárn ur eny. Podrobn j²í popis cílové skupiny lze nalézt v oddíle 2.2. Jedná se o náro né uºivatelé, kte í mají vysoké o ekávání na uºivatelské rozhraní a na rychlou a efektivní práci s ním. Up ednost ují moºnost pokro ilých nastavení a p izp sobení si aplikace dle svých vlastních pot eb a zájm. Pasivní skupina Pasivní skupinu tvo í v²ichni uºivatelé, kte í nespadají do cílové skupiny, ale kte í se n jakým zp sobem dostanou se stránkami do styku. Jedná se zejména o ²irokou ve ejnost, která stránky nav²tíví jen ze zajímavosti a nebo za ú elem získat n jakou konkrétní informaci. Pro tyto uºivatelé je d leºité, aby stránky p sobily d v ryhodn a seriózn (tak, aby i konzervativn j²í uºivatel m l o sdruºení vysoké mín ní) Skeletony a persony Skeletony jsou krátké seznamy specikací pro jednotlivé kategorie uºivatel, které pomáhají se zam it na konkrétní vlastnosti skupiny a vytvá ejí tak podklad pro tvorbu person [13].

37 2.7. TVORBA PERSON 19 Primární skeleton Uºivatelská skupina: Aktivní. Pohlaví: Muº. V k: Dal²í charakteristiky: Pracuje v IT. Zabývá se tvorbou web. Je ºenatý. Bydlí se svou ºenou ve v t²ím m st. Nemá p íli² volného asu. Jeho zdravotní stav je relativn dobrý. Pro nápov du vyºaduje jen krátký popis. Primární persona Jméno: Pavel. V k: 29. Pohlaví: Muº. Bydli²t : Praha. Pavel je editelem men²í softwarové rmy, která nabízí sluºby v oblasti internetového podnikání. Jeho rma se zabývá programováním na zakázku, tvorbou www stránek, grackými pracemi a SEO optimalizací. Pavel je ºenatý a otec dvou syn (dvouro ního Martina a p lro ního Luká²e). Jeho ºena Dominika je momentáln na mate ské, ale jinak je zam stnána jako ú etní na m stském ú ad. Spole n bydlí v jejich vlastním byt na Jiºním M st na okraji Prahy.

38 20 KAPITOLA 2. ANALÝZA Mezi Pavlovy záliby pat í zejména fotografování. Vlastní digitální zrcadlovku, kterou fotí r zné momentky a v sou asné dob hlavn své dva malé syny. Pavel má taky rád hudbu a sport, ale nyní je vytíºen prací a rodinou natolik, ºe mu na tyto koní ky nezbývá as. Pavel je odborníkem v oblasti návrhu a tvorby web. Své zku²enosti získal hlavn praxí ve rm, kde d íve pracoval. Postupem asu se v²ak rozhodl, ºe by si cht l zaloºit svou vlastní rmu. Pavel o tom íká: Dlouho jsem p emý²lel, jestli tento krok mám ud lat a nebo ne. Za ínal jsem postupn a p i práci jsem d lal zakázky na ºivnostenský list. Nakonec se mé podnikatelské aktivity rozjely natolik, ºe jsem se rozhodl ukon it práci ve rm, kde jsem byl zam stnám a jít na full time. V sou asné dob je v jeho rm zam stnáno jiº i p t dal²ích lidí. Na otázku, zda pouºívá manuály, Pavel odpovídá: Jak kdy. Obecn v²ak postupuji tak, ºe n co nejprve vyzkou²ím a aº kdyº nevím jak dál, tak se podívám do manuálu. Pavel nosí brýle a jeho zrak se za poslední dobu nepatrn zhor²il. To je moºná i jeden z d vod, pro se mu líbí design, který dokáºe pracovat s volným místem a který má své prvky velké a výrazné. Dopl kový skeleton Uºivatelská skupina: Pasivní. Pohlaví: šena. Age: Dal²í charakteristiky: Rodinný p íslu²ník cílové skupiny. Má vzd lání netechnického sm ru. Má mnoho zálib a koní k. Má ráda spole nost. Pot ebuje del²í popis. Dopl ková persona

39 2.8. ANALÝZA UšIVATELSKÉHO ROZHRANÍ 21 Jméno: Zuzana. V k: 29. Pohlaví: šena. Bydli²t : Praha. Zuzana pracuje v personálním odd lení v nadnárodní spole nosti, která podniká v oblasti bankovnictví. Má ráda svou práci a stejn tak i kolektiv, ve kterém pracuje. Je to pracovitý lov k, který nevypíná ani p i p íchodu z práce dom. Zuzana bydlí se svým muºem Petrem v novostavb na severu Prahy. Její manºel Petr je zam stnán jako UX specialista v softwarové rm. Petr je rovn º aktivn zapojen v p edsednictvu pobo ky Prague ACM SIGCHI. Zuzana o innostech svého muºe íká následující: Petr svou prací doslova ºije. Vnímá, ºe je to více neº jen zam stnání... bere to spí² jako ur ité poslání. Mám pocit, ºe to n kdy trochu p ehání. Zuzana se ve svém volném ase v nuje hraní na klavír, b hu a plavání. Ráda taky nav²t vuje svou rodinu a p átelé. Velice ji t ²í, kdyº se m ºe vid t ze starými známými ze základní i st ední ²koly. Zuzana studovala vysokou ²kolu ekonomického sm ru a není p íli² technický typ. Kdyº n emu nerozumí, v t²inou se ptá svého muºe. íká o tom: Není nijak neobvyklé, ºe volám Petrovi z práce i n kolikrát za den. ƒasto n co nefunguje a já nevím, co s tím. Já s po íta i nejsem moc velký kamarád. Kdyº jsem doma, rad ji ho v bec nepou²tím. Zuzana nerada pouºívá nový software a nebo se u í nové technologie. Je ráda, kdyº v ci fungují podle ur itého standardu a kdyº se p íli² nem ní. 2.8 Analýza uºivatelského rozhraní HTA diagramy HTA (Hierarchical task analysis) je hierarchické rozloºení úlohy na pod-úlohy, které umoº uje analyzovat díl í kroky daného úkolu (task ow). Jednotlivé ásti diagramu jsou pak dopln ny scéná em, který ur uje v jakém po adí a za jakých podmínek se budou pod-úlohy provád t [11]. Pomocí HTA jsem provedl dekompozici hlavních úloh, které uºivatelský systém nabízí jedná se o registraci a prodlouºení lenství, vyp j ení knihy v knihovn a p idání ºivotopisu v sekci Jobhall.

40 22 KAPITOLA 2. ANALÝZA Registrace lenství a jeho prodlouºení (obr. 2.7) Obrázek 2.7: Registrace lenství a jeho prodlouºení Vyp j ení knihy (obr. 2.8) Obrázek 2.8: Vyp j ení knihy

41 2.8. ANALÝZA UšIVATELSKÉHO ROZHRANÍ 23 P idání ºivotopisu v sekci Jobhall (obr. 2.9) Obrázek 2.9: P idání ºivotopisu v sekci Jobhall

42 24 KAPITOLA 2. ANALÝZA

43 Kapitola 3 Návrh Návrh p edstavuje základní etapu tvorby uºivatelského rozhraní a vytvá í podklad pro následnou implementaci a vyhodnocení. Tento celý proces se poté dále cyklicky opakuje, kde se jednotlivé poznatky z vyhodnocení zahrnují do p í²tí iterace návrhu [16]. Web SIGCHI postupn pro²el t emi návrhovými iteracemi, které byly zakon eny uºivatelským testováním (viz. kapitola 5). Na základ nález v t chto testech byly provedeny pat i né zm ny v uºivatelském rozhraní a byla testována vhodnost tohoto e²ení. Jednotlivé implementace t chto iterací p edstavují High-Fidelity prototyp, který je svou funk ností blízký nální verzi stránek [1]. Tyto prototypy byly postaveny na kost e p vodních stránek SIGCHI, b ºících na CMS Drupal. Poºadavky na roz²í ení byly implementovány formou p ídavných modul. O napojení na systém Drupal se dále podrobn ji zmi uji v oddíle Návrh 1 Návrh 1 vychází z p vodních stránek SIGCHI, které byly upraveny na základ analýzy sou asného stavu webu (viz oddíl 2.3) a roz²í eny o poºadované funk ní poºadavky (viz oddíl 2.4) Rozloºení prvk Základní rozloºení je rozd leno do p ti ástí (viz obr. 3.1): 1. Záhlaví: Obsahuje odkazy pro p ihlá²ení, správu uºivatelského ú tu a rezervací v knihovn. 2. Hlavi ka: Obsahuje titulní logo a panel pro vyhledávání. 3. Hlavní menu: Obsahuje odkazy pro jednotlivé sekce stránek. 4. Obsah: Tato ást obsahuje hlavní nápl stránek. V levém horním rohu se nachází navigace a název p íslu²né stránky. Na n kterých stránkách je zde k dispozici i sekundární menu. 25

44 26 KAPITOLA 3. NÁVRH 5. Zápatí: Obsahuje vý et remních len. Obrázek 3.1: Rozloºení prvk V administra ním módu je rozd lení prvk roz²í eno je²t o administra ní menu za levým okrajem stránky Koncept e²ení jednotlivých ástí systému Privátní sekce Privátní sekce je p ístupná po p ihlá²ení do systému na základ vypln ní u a hesla. Odkaz pro p ihlá²ení se nachází v pravé horní ásti stránek v záhlaví. Management len, výp j ek a statistik Management len, výp j ek a statistik je p ístupný administrátorovi v levém administra ním menu. Jednotlivá rozhraní jsou navrºena tak, aby spl ovala zadané funk ní poºadavky a aby zachovala jednotnou koncepci administra ního rozhraní CMS Drupal. Sekce pro inzerci pracovních pozic Sekce pro inzerci pracovních pozic se nachází pod záloºkou Jobhall v hlavním menu. Tato sekce je rozd lená do dvou ástí: Hledám práci a Nabídka práce.

45 3.1. NÁVRH 1 27 Registrace lenství P ihlá²ka k lenství se nachází pod záloºkou ƒlenství v hlavním menu. Registra ní formulá se dynamicky m ní podle zvoleného typu lenství (Individuální, Studentské nebo Firemní). Vytvo ení rezervace v knihovn Rezervaci knihy lze provést v sekci Knihovna. Tato funkce je p ístupná pouze p ihlá²eným uºivatel m Náhled návrhu 1 Náhled návrhu 1 lze vid t na obr Obrázek 3.2: Náhled návrhu 1

46 28 KAPITOLA 3. NÁVRH 3.2 Návrh 2 Návrh 2 vychází z p ede²lého návrhu, který je upravený na základ nález z Testu 1 (viz pododdíl 5.7.7) s výjimkou t ch, které jsou spojeny s konstrukcí systému Drupal Vybrané zm ny v návrhu Zp tná vazba p i p ihlá²ení k odb ru zpravodaje Zp tná vazba po p ihlá²ení k odb ru je nyní zvýrazn na ráme kem s podbarvením. D vod zm ny: Testování prokázalo, ºe zp tnovazební oznámení nebylo dostate n výrazné a ºe ho uºivatelé lehce p ehlédnou. Seznam rezervací je dostupn j²í V sekci Knihovna p ibylo sekundární menu s t emi záloºkami (Knihovna, Mé rezervace a Nápov da). D vod zm ny: Testování prokázalo, ºe uºivatelé nemohli najít seznam svých rezervací v pravé horní ásti stránek a ºe ho o ekávají v sekci Knihovna. Oprava omyl ve správ knihovny Správa knihovny umoº uje opravu omyl p i zm n stavu rezervace (v kaºdém kroku je moºnost vrátit provedenou akci zp t). Sekce pro inzerci pracovních pozic je opravena Formulá pro p idání nového ºivotopisu byl opraven. Sekce pro p idání souboru byla upravena tak, aby zde bylo pouze jedno tla ítko. D vod zm ny: Testování prokázalo, ºe tla ítko Nahrát soubor je ve formulá i navíc a ºe p sobí zmate n. Opravená privátní sekce P ihla²ovací stránka byla opravena. Pole s popisem Uºivatelské jméno bylo p ejmenována na . Dále p ibyl nový p ihla²ovací formulá na úvodní stránce, který je moºné rovn º vyuºít pro p ístup do privátní sekce. D vod zm ny: Testování prokázalo, ºe uºivatelé nev d li, kde se nachází p ihla²ovací formulá a jak ho mají vyplnit Náhled návrhu 2 Náhled návrhu 2 se nachází na CD v adresá i text/screenshots/navrh2.

47 3.3. NÁVRH Návrh 3 Návrh 3 vychází z p ede²lého návrhu, který je upravený na základ nález z Testu 2 (viz oddíl 5.8.6) s výjimkou t ch, které jsou spojeny s konstrukcí systému Drupal. Návrh 3 je dále roz²í en o nový gracký vzhled Vybrané zm ny v návrhu Opravený registra ní formulá Registra ní formulá byl opraven a byla p ed lána jeho struktura pro remní lenství. V²echna povinná pole byla ozna ena hv zdi kou. Rovn º byl p ed lán zp sob validace formulá e a p i ²patném zadání dostane uºivatel pat i nou zp tnou vazbu. Opravená knihovna V sekci Knihovna se vyskytla chyba p i vytvá ení rezervace z náhledu dané knihy. V²echny chyby spojené s tímto problémem byly opraveny. Zm n n náhled novinek blogu Náhled novinek blogu na úvodní stránce byl zm n n. D vod zm ny: Testování prokázalo, ºe náhled novinek je nep ehledný a ºe mají uºivatelé problém s ur ením stá í jednotlivých p ísp vk. Popis formulá e pro p ihlá²ení k odb ru zpravodaje Popisek Zpravodaj SIGCHI u formulá e pro p ihlá²ení k odb ru zpravodaje byl upraven na P ihlaste se k odb ru zpravodaje SIGCHI. D vod zm ny: Testování prokázalo, ºe n kte í uºivatele si nejsou jistí, k emu daný formulá slouºí (nespojí si popisek s danou akcí) Gracký vzhled P i tvorb nového grackého vzhledu stránek jsem se nechal inspirovat designerskými pravidly, popsanými v knize Gracký design [14]. Hlavním cílem bylo navrhnout vzhled, který by uspokojil cílovou skupinu popsanou v oddíle 2.2. Pro tyto ú ely jsem si nejprve vyty il, ºe by vzhled stránek m l spl ovat následující vlastnosti: Atraktivnost Gracký návrh by m l na první pohled zaujmout náv²t vníka a vyzvat ho k p ezkoumání obsahu stránek.

48 30 KAPITOLA 3. NÁVRH Profesionalita Návrh by m l p sobit profesionáln a d v ryhodn. M l by vyvolávat dojem serióznosti. Sou asnost Design by m l odpovídat aktuálním trend m a m l by vyuºívat sou asné motivy. Preciznost Návrh by m l vyvolávat dojem pe livosti a d myslnosti. V dal²ím kroku jsem si up esnil výb r grackého motivu pro úvodní stránku. Stanovil jsem si, ºe by m l motiv obsahovat tyto prvky: Dotyková obrazovka s uºivatelským rozhraním. Osoba, která s tímto rozhraním interaguje. Výb r kone ného motivu jsem provedl ve fotobance Fotolia ( Barvy Barvy mají v grackém sd lení st ºejní význam. M ly by být vybírány s ur itým zám rem a m ly by zachovávat jednotnou vizuální identitu spole nosti i sdruºení [15]. P i tvorb grackého návrhu jsem vycházel ze dvou základních barev, které se nacházejí v logu SIGCHI a jejich odstín (viz obr. 3.3). Obrázek 3.3: Základní barvy T etím barevný odstín vychází z barvy nápisu Prague ACM SIGCHI v hlavi ce stránek (viz obr. 3.4). Obrázek 3.4: T etí barevný odstín

49 3.3. NÁVRH 3 31 Pozadí stránek je vytvá eno jemným p echodem tmavých a sv tle ²edých odstín (viz obr. 3.5). Obrázek 3.5: Pozadí stránek Náhled výsledného návrhu Náhled výsledného návrhu lze vid t na obr Obrázek 3.6: Náhled výsledného návrhu

50 32 KAPITOLA 3. NÁVRH

51 Kapitola 4 Implementace 4.1 Pouºité prost edky a technologie PHP V²echny dynamické ásti na stran serveru jsou napsány v jazyku PHP verze 5.2. Jazyk PHP jsem zvolil zejména z toho d vodu, ºe je na n m postavený samotný CMS Drupal a ºe v n m lze psát moduly pro n j [4]. Dal²ími výhodami PHP je to, ºe je multiplatformní a ºe má velkou podporu ze strany b ºných webových sever. Poslední výhodou je pak i jeho snadná integrace s HTML a MySQL databází [8] XHTML a CSS Strukturu stránek a jejich gracká podoba je navrºená pomocí XHTML kódu verze 1.0 Transitional v kombinaci s kaskádovými styly CSS, které jsou odd leny v externím souboru. XHTML jazyk jsem zvolil z toho d vodu, ºe je standardn podporován v²emi druhy prohlíºe (bez nutnosti instalace dal²ích aplikací) a ºe jde lehce propojit s jazykem PHP. Odd lenost kaskádových styl od samotného (X)HTML kódu umoº uje snadn j²í údrºbu stránek, sdílení jednotlivých styl nap í webem a p izp sobení stránky pro odli²ná prost edí [2] JavaScript Dynamické ásti systému, které se provád jí na stran klienta, jsou napsány v skriptovacím jazyce JavaScript. Jazyk JavaScript jsem v systému pouºil z d vodu, ºe dokáºe poskytnout rychlej²í zp tnou vazbu neº jazyk PHP, který se zpracovává na stran serveru. JavaScript má v²ak i jednu velkou nevýhodu a tou je skute nost, ºe ho klient m ºe mít ve svém prohlíºe i vypnutý [3]. Z tohoto d vodu jsem tento jazyk pouºil spí² jen okrajov tak, aby nebyla ohroºena funk nost systému (jednalo se pouze o p ípad dynamické zm ny formulá e, kontroly vypln ní povinných polí a p i potvrzení rezervace v knihovn ). 33

52 34 KAPITOLA 4. IMPLEMENTACE Databáze MySQL Ve²keré údaje systému jsou uloºeny v MySQL databázi verze Databázi MySQL jsem zvolil z t chto d vod : Je na ní postavený CMS Drupal. MySQL se lehce integruje s PHP. Je zdarma. Snadno se s ní pracuje díky aplikace PhpMyAdmin pro správu databáze. 4.2 CMS Drupal CMS Drupal je open source redak ní systém, který staví na n kolika základech, které jsou d leºité pro jeho funk nost i dal²í vývoj [4]: Modularita Drupal má malé jádro, které je stabilní a rychlé. V²echna dal²í roz²í ení jsou postavena na p ídavných modulech. Kvalita Jádro Drupalu má dob e navrºenou strukturu, do které se nedostávají neov ené nadstavby. Tyto vlastnosti z n j vytvá í stabilní a bezpe ný systém. Open source Drupal funguje na licenci GNU/GPL, vyuºívá programovací jazyk PHP a databázi MySQL. Více informací o Drupalu lze nalézt na nebo na Pouºití modul Funk ní roz²í ení pro stránky SIGCHI je navrºeno formou p ídavných modul. Jedná se celkem o 4 mnou vytvo ené samostatné moduly: Registrace modul pro zpracování registrací a správu lenství. Knihovna modul pro zpracování rezervací a pro správu knihovny. Jobhall modul pro realizaci moderace sekce pro inzerci pracovních pozic. Statistiky modul pro zpracování údaj o lenech a zobrazení statistických výstup. Finální implementace dále vyuºívá adu jiº vytvo ených modul, které se dají nalézt na stránkách Mezi ty hlavní pat í nap.: Simplenews modul, který zaji² uje tvorbu a zasílání zpravodaj. Charts modul pro grackou vizualizaci vstupních dat. AutoExpire modul, který zaji² uje automatickou expiraci uzl 1. 1 Uzly (nodes) jsou základní struktury Drupalu, ve kterých je uloºen ve²kerý obsah (v²echny stránky, lánky, nové témata ve fóru atd.).