MASARYKOVA UNIVERZITA

FAKULTA INFORMATIKY

}w���������� ������������� !"#$%&'()+,-./012345<yA|Návrh GUI komunitního webu

BAKALÁRSKÁ PRÁCE

Ondrej Válka

Brno, jaro 2010

Prohlášení

Prohlašuji, že tato bakalárská práce je mým puvodním autorským dílem, které jsem vypra-coval samostatne. Všechny zdroje, prameny a literaturu, které jsem pri vypracování použí-val nebo z nich cerpal, v práci rádne cituji s uvedením úplného odkazu na príslušný zdroj.

Vedoucí práce: doc. Ing. Jirí Sochor, CSc.

ii

Shrnutí

Cílem práce je prostudovat proces návrhu uživatelského rozhraní webu a vybrané postupypredvést pri návrhu cásti GUI krest’anského komunitního serveru www.signaly.cz.

Práce popisuje tvorbu použitelného uživatelského rozhraní, zabývá se metodikami uži-vatelského pruzkumu, objasnuje návrh pomocí drátených modelu, prototypu a dalších tech-nik vcetne popisu a zduvodnení výsledného vzhledu webu. Vybraná cást je implemento-vána ve forme HTML/CSS/JS šablon.

iii

Klícová slova

interakcní design, user experience, uživatelský pruzkum, uživatelské rozhraní, informacníarchitektura, drátené modely, prototypy, HTML, CSS, GUI, webdesign, komunitní web

iv

Obsah

1 Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Interakcní design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Úvodní dokument . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3.1 Obcanské sdružení signály.cz, o. s. . . . . . . . . . . . . . . . . . . . . . . . . . 43.2 Soucasný stav webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43.3 Cíl sdružení: nová verze webu . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.4 Cílová skupina webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.5 Moje role pri vývoji nové verze webu . . . . . . . . . . . . . . . . . . . . . . . 6

4 Analýza webu a potreb uživatelu . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74.1 Kvalitativní pruzkum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

4.1.1 Rozhovory se cleny realizacního týmu . . . . . . . . . . . . . . . . . . . 74.1.2 Etnografické rozhovory s uživateli . . . . . . . . . . . . . . . . . . . . . 84.1.3 Analýza požadavku uživatelu . . . . . . . . . . . . . . . . . . . . . . . 94.1.4 Expertní analýza GUI webu . . . . . . . . . . . . . . . . . . . . . . . . . 9

4.2 Kvantitativní pruzkum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.2.1 Neúspešne zaregistrovaní uživatelé . . . . . . . . . . . . . . . . . . . . 104.2.2 Autorizovaní uživatelé . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.2.3 Vek uživatelu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104.2.4 Návštevnost webu a aktivita uživatelu . . . . . . . . . . . . . . . . . . 104.2.5 Neaktivní uživatelé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4.3 Shrnutí aktuálního stavu webu . . . . . . . . . . . . . . . . . . . . . . . . . . . 114.3.1 Pozitiva webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114.3.2 Negativa webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

5 Návrh GUI webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135.1 Mentální modely: jak lidé chápou uživatelská rozhraní . . . . . . . . . . . . . 135.2 Cíl: návrh GUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145.3 Shrnutí požadavku na nový web a nové GUI . . . . . . . . . . . . . . . . . . . 145.4 Popis procesu návrhu nového GUI . . . . . . . . . . . . . . . . . . . . . . . . . 145.5 Techniky použité pri návrhu GUI . . . . . . . . . . . . . . . . . . . . . . . . . . 145.6 Mapa webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

6 Popis návrhu vybraných obrazovek . . . . . . . . . . . . . . . . . . . . . . . . . . . 176.1 Nástenka akcí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176.2 Profil akce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186.3 Formulár pro pridání nové akce . . . . . . . . . . . . . . . . . . . . . . . . . . . 196.4 Úvodní strana . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196.5 Úvodní strana (prihlášený uživatel) . . . . . . . . . . . . . . . . . . . . . . . . 216.6 Další obrazovky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

7 Zasazení obrazovek do kontextu webu . . . . . . . . . . . . . . . . . . . . . . . . . 237.1 Záhlaví a navigace na webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237.2 Zápatí webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

v

7.3 Administracní lišta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247.4 Kontextové funkce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247.5 Úvodní obrazovky a pruvodci . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

8 Výsledná podoba GUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268.1 Vizuální styl webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

8.1.1 Typografická mrížka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288.1.2 Písmo a typografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288.1.3 Barvy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298.1.4 Ikony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

9 Framework: základ HTML/CSS/JS šablon . . . . . . . . . . . . . . . . . . . . . . . 309.1 HTML5 a mikroformáty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309.2 CSS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309.3 Písma na webu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319.4 Architektura CSS souboru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319.5 Flexibilní kód . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

10 Záver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33A Obrazová príloha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34B Hodnotící anketa pro vyhodnocení dvou let provozu webu . . . . . . . . . . . . . 49C Obsah CD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57Literatura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

vi

Kapitola 1

Úvod

Existuje mnoho dílcích postupu a technik [20] [2], více ci méne ucelených metodik [5], popi-sujících proces návrhu uživatelského rozhraní webu. Jako designér a vývojár uživatelskýchrozhraní webu jsem mel možnost vyzkoušet si nekteré z nich.

V tomto textu si kladu za cíl prostudovat proces návrhu webu dukladneji a vybrané po-stupy predvést pri návrhu cásti GUI1 krest’anského komunitního serveru www.signaly.cz.Nastinuji základní kroky vedoucí ke vzniku použitelného uživatelského rozhraní, zabývámse metodikami uživatelského pruzkumu, objasnuji návrh pomocí drátených modelu, proto-typu a dalších technik. Popisuji a zduvodnuji výsledný vzhled webu.

Primárním výsledkem mé práce jsou skicy obrazovek (príp. drátené modely nebo pro-totypy) nového GUI webu. Sekundárním výsledkem je základ HTML/CSS/JS frameworkupro tvorbu šablon webu.

1. grafické uživatelské rozhraní (graphical user interface) <http://en.wikipedia.org/wiki/Graphical_user_interface>

1

Kapitola 2

Interakcní design

In the same way that industrial designers have shaped our everyday life throughobjects that they design for our offices and for our homes, interaction design isshaping our life with interactive technologies—computers, telecommunications,mobile phones, and so on. If I were to sum up interaction design in a sentence,I would say that it’s about shaping our everyday life through digital artifacts—for work, for play, and for entertainment.

—Gillian Crampton Smith

Interakcní design je obor zabývající se komplexním návrhem vzhledu a fungování uži-vatelských rozhraní digitálních výrobku. Hlavní pilíre oboru tvorí design uživatelských roz-hraní, informacní architektura, komunikacní design a interakcní design jako takový [20]. Jeho potreba pri návrhu všech elektronických zarízení, se kterými lidé pracují nebo jejich pro-strednictvím komunikují. Interakcní design se stal nepostradatelnou soucástí prumyslovéprodukce elektronických výrobku, podobne jako tomu bylo v minulosti u designu prumys-lového.

Webdesign je obor zabývající se návrhem webových stránek. Jedná se o komplexní sou-stavu cinností: cást disciplín uplatnovaných pri návrhu webu sdílí práve s interakcním de-signem, jiné s grafickým designem, typografií ci marketingem. Díky ruznorodosti webde-signu je tak presná hranice s uvedenými obory obtížne definovatelná. Webdesign se s nimiprekrývá do takové míry, jakou vyžaduje povaha konkrétního projektu.

Behem návrhu GUI komunitního webu jsem se pohyboval práve na rozhraní interakc-ního designu a webdesignu s cílem dosáhnout co nejlepšího uživatelského dojmu. Designs durazem na dojem uživatele (user experience design) produkuje atraktivní a použitelnáuživatelská rozhraní, dbá na jejich ergonomii a rychlost, vhodnou komunikaci s uživatelemapod.

Práci interakcního designéra vidím predevším v provedení uživatelského pruzkumu aaplikaci principu efektivních uživatelských rozhraní. Práci webdesignera pak ve zohlednenítechnických omezení daných prostredím World Wide Webu a následné implementaci cástirozhraní.

2

2. INTERAKCNÍ DESIGN

designkomunikace

design

design

Obrázek 2.1: Diagram vztahu interakcního designu a s ním souvisejích disciplín [20].

3

Kapitola 3

Úvodní dokument

Predpokladem úspešného dokoncení libovolného projektu je dobre pripravený úvodní do-kument. Slouží jako základní odrazový mustek napríc celým procesem realizace projektu.Úvodní dokument plní predevším dve základní funkce: predstavuje rešený problém a na-pomáhá utrídení myšlenek zadavatele projektu [20].

Dobre napsaný úvodního dokument obsahuje: shrnutí projektu a jeho kontextu, defi-nice rešeného problému, popis cílové skupiny, cíle projektu, požadavky zadavatele a sou-hrn omezení pri realizaci. K temto základním informacím lze pridat mnohé další, nicménevšechny výše uvedené informace jsou nezbytné a má-li být projekt úspešný, neobejde se bezjejich jasného vymezení.

3.1 Obcanské sdružení signály.cz, o. s.

Privést Krista blíž k moderním mladým lidem.

—motto signály.cz, o.s.

Obcanské sdružení signály.cz, o. s., je neziskové sdružení, jehož hlavní cinností je pro-vozování webu www.signaly.cz. Hybnou silou sdružení je realizacní tým složený ze 7 lidí,který koordinuje spolupráci více než 100 dobrovolníku z celé republiky. Sdružení má vlastníkancelár v centru mesta Brna.

Web www.signaly.cz je dlouhodobe známý mezi krest’anskou (zejména katolickou) mlá-deží po celé Ceské republice. Jedná se o otevrený komunitní systém primárne zamerenýna podporu setkávání mladých verících lidí v reálném svete na akcích, které nejsou zame-reny pouze na zábavu. Mezi hlavní služby webu patrí nástenka akcí, systém blogu, posílánívzkazu, sdílení fotek a sdružování se do skupin [12].

První verze webu byla spuštena již v roce 2001 jako reakce na poptávku po míste, kteréby sloužilo jako prehled akcí pro mládež porádaných jednotlivými organizacemi v Rímsko-katolické církvi. Behem let se web postupne rozrustal a v roce 2007 byl transformován dopodoby komunitního systému.

3.2 Soucasný stav webu

Od zárí 2009 zaznamenal web mírný pokles návštevnosti (a to i pres vzrustající pocet re-gistrovaných uživatelu). Dosavadní provoz webu (od jeho nového spuštení v roce 2007) byl

4

3.3. CÍL SDRUŽENÍ: NOVÁ VERZE WEBU

úspešný. Pro své další fungování si však vyžaduje provedení patricných zmen.

• Web trpí nedomyšleným uživatelským rozhraním. Uživatelé si stežují na nepohodl-nou práci se systémem posílání vzkazu, nahrávání fotografií nebo psaní blogovýchpríspevku. Úvodní stránka nereflektuje zámer webu a samotné prohlížení webu je ne-prívetivé (obsahem jsou casto jen dlouhé seznamy odkazu).

• Stav kódu systému nedovoluje nasazení nových funkcí, které uživatelé vyžadují. Jednáse napr. o komentování fotografií, možnost nastavení vyšší ochrany soukromí nebojednodušší sdílení obsahu. Uživatelé by soucasne uvítali propojení s ostatními webo-vými službami (napr. Twitter nebo Google Calendar) a sociální sítí Facebook.

Obrázek 3.1: Soucasný stav www.signaly.cz: vlevo hlavní strana, vpravo nástenka akcí.

Další požadavky a omezení ze strany sdružení vcetne technické specifikace nové verzewebu podrobne popsal Bc. Jan Šedo1 ve své bakalárské práci Webový komunitní systém[12].

3.3 Cíl sdružení: nová verze webu

Cílem sdružení je vrátit webu pozici na ceském Internetu prostrednictvím nové verze webu.Udržet web zajímavým pro soucasné mladé verící, aby se i nadále jeho prostrednictvím rádisdružovali a sdíleli žití svého krest’anství i bežného života.

3.4 Cílová skupina webu

Cílovou skupinu webu tvorí mladí krest’ané ve veku 15-27 let, zejména studenti stredních avysokých škol.

1. Bc. Jan Šedo je v soucasnosti koordinátorem sdružení signály.cz, o. s.

5

3.5. MOJE ROLE PRI VÝVOJI NOVÉ VERZE WEBU

3.5 Moje role pri vývoji nové verze webu

Na tvorbe webu www.signaly.cz se dlouhodobe podílím. Jako dobrovolný clen vývojovéhotýmu pracuji pro signály.cz, o. s., od podzimu 2007. Jsem aktivním uživatelem webu i clenemsdružení.

Mojí úlohou pri realizaci nové verze webu bylo provést pruzkum mezi uživateli a odhalitpríciny poklesu návštevnosti a všeobecného zájmu o web. Poté navrhnout nové GUI, kterénapomuže vyrešení soucasných problému webu.

6

Kapitola 4

Analýza webu a potreb uživatelu

Once the problem was stated, its solution came to me in a flash.

—Anton Fokker

Dobrý návrh uživatelského rozhraní predpokládá nejen znalost technologie, s níž se pra-cuje, ale predevším pochopení lidí, pro které je rozhraní navrhováno. Sotva by bylo možnésprávne navrhnout slunecní brýle v prípade, že bychom neznali tvar lidské hlavy ani rysyobliceje. Dobrý designér nejen zná potreby, zvyky, zkušenosti a schopnosti uživatelu, aleumí je také prezentovat ve vhodné forme.

Analýza webu a potreb uživatelu spadá do oblasti uživatelského pruzkumu. Provedenýve vetším ci menším rozsahu, v závislosti na dostupných prostredcích a složitosti zkoumanéproblematiky, poskytuje pruzkum relevantní informace o stávajících i potenciálních uživa-telích. Jedná se o aplikovaný interdisciplinární obor spojující metodologie sociálních ved,znalosti kognitivní psychologie, interakcního designu a informacních technologií vubec.

Vyšel jsem z potreby pochopit aktuální stav webu a provedl jsem dva druhy uživatel-ského pruzkumu (tak, jak jej aplikuje interakcní design): kvalitativní a kvantitativní pru-zkum [5].

4.1 Kvalitativní pruzkum

Kvalitativní pruzkum se zabývá zkoumáním jednotlivých subjektu. Snaží se o získání po-drobných informací na malém vzorku uživatelu. Jde do hloubky, všímá si individuálníchzvláštností. Zkoumá subjekty pri interakci s jejich prirozeným prostredím. Nevýhodou jepredevším casová nárocnost a riziko neadekvátního provedení, protože instrumentem jesám výzkumník.

Rozhovor a pozorování jsou základní techniky kvalitativního pruzkumu. Jejich složeníma následnou úpravou pak vznikají další metody [20] [2].

Vzhledem k dostupným prostredkum a neformálnosti zkoumaného prostredí jsem po-važoval za vhodné použít níže popsané techniky.

4.1.1 Rozhovory se cleny realizacního týmu

K dispozici jsem mel hlavního koordinátora a cleny realizacního týmu sdružení. Mým cílembylo pochopit jejich vize a proniknout hloubeji do fungování webu. Zjistit, do jaké míry je

7

4.1. KVALITATIVNÍ PRUZKUM

možné prizpusobit stávající web, aby i nadále zustal pro uživatele prínosný.Provedené rozhovory se ruznily délkou a zamerením. Pri delších úvodních interview

(v rádu desítek minut) jsem se snažil o získání celkového nadhledu. Kratší rozhovory (v ráduminut) byly zamereny na konkrétní problém a využity i posléze behem návrhu GUI.

Prípravu k rozhovorum jsem neformalizoval. Vždy jsem si pouze ujasnil problém, o je-hož vyrešení se jednalo. Získané poznatky jsem zachycoval ve forme komentovaných skic(obrázky A.8 a A.9), prípadne pak jako strukturované poznámky.

Obrázek 4.1: Fotografie z rozhovoru. Cílem bylo pochopit cílovou skupinu webu a jeho ty-pické uživatele. Zachyceno formou profilu uživatelu.

4.1.2 Etnografické rozhovory s uživateli

Kombinace rízeného rozhovoru a soubežného nenápadného pozorování se oznacuje jakotzv. etnografický rozhovor. Jedná se o nejefektivnejší techniku analýzy potreb uživateluvubec. Výzkumník pozoruje subjekt v prirozeném prostredí. Získává o nem pomerne re-levantní informace. Faktorem výrazne ovlinujícím úspešnost rozhovoru je vztah mezi vý-zkumníkem a zkoumaným subjektem [5].

Podle predem vytipovaných otázek jsem se snažil získat (v rádu minut) názor uživatelena daný problém. Napríklad:

• jak uživatel používá posílání vzkazu a co mu na této funkci vadí,

• jaké webové služby uživatel používá ke sdílení fotek a proc k tomuto nepoužívá webwww.signaly.cz.

Utrídené informace jsem zachycoval opet formou komentovaných skic (obrázek A.11) no-vých obrazovek.

8

4.1. KVALITATIVNÍ PRUZKUM

4.1.3 Analýza požadavku uživatelu

Dobrým zdrojem informací mi byla Hodnotící anketa pro vyhodnocení dvou let provozuwebu. Sber dat jejím prostrednictvím provedlo sdružení v srpnu 2009. Pres 375 respondentuhodnotilo dosavadní web prostrednictvím multiple-choice dotazníku. Otázky a souhrnnévýsledky ankety prikládám (príloha B).

Obrázek 4.2: Príklad otázky z dotazníku.

Za dobu provozu webu prišlo i od samotných uživatelu mnoho požadavku, stížností ahodnocení fungování webu. Jako další zdroj informací mi proto sloužily rozsáhlá diskuznívlákna prímo na webu: diskuzní témata Našel jsem chybu, nefunguje mi; Nevím si rady, jakudelám, aby...? a Navrhuji vylepšení.

Závery vyplývající z techto zdroju uvádím dále v textu (kapitola 4.3).

4.1.4 Expertní analýza GUI webu

Expertní analýza je zhodnocení webu po všech stránkách [5] (použitelnost, informacní ar-chitektura, kvalita a relevance obsahu atd.).

• Primárne jsem aplikoval heuristiky použitelnosti Jakoba Nielsena. Tyto heuristiky jsoujakási doporucení založená na zkušenostech [13]. GUI vyhovující Nielsenovým heuris-tikám predchází chybám, umožnuje efektivní ovládání, je ergonomické, dbá na konzis-tenci, aplikuje návrhové vzory, je návodné a samovysvetlující. Vyznacuje se minima-listickým a estetickým designem, pracuje se stavem systému, zpetnou vazbou apod.

• Sekundárne jsem srovnával rozhraní webu vuci scénárum. Scénáre jsou popisy sku-tecných situací, vzniklých pri používání systému. Pomáhají odhalit úzká místa v pou-žitelnosti GUI webu. Príklad scénáre: „Jana se po 14denní dovolené prihlásila na web.Prišlo jí nekolik vzkazu, které si prohlédla, ale už nemá cas na ne odpovedet. Ráda byproto bud’ ponechala vzkazy jako neprectené nebo si je nejak jinak oznacila.“

Scénáre jsem vzhledem k casové nárocnosti neformalizoval. Analýzu jsem provádel ad-hoca výsledky jsem zachycoval formou strukturovaných poznámek.

9

4.2. KVANTITATIVNÍ PRUZKUM

4.2 Kvantitativní pruzkum

Protipólem kvalitativního pruzkumu je pruzkum kvantitativní. Slouží k overování hypotéz(vytvorených behem kvalitativního pruzkumu) a formulaci obecných poznatku na základeinformací získaných prostrednictvím hromadného sberu. Jeho techniky spocívají v získá-vání statistických informací o velkém vzorku uživatelu.

Kvantitatvní pruzkum jsem založil na datech dostupných za více než dva a pul rokuprovozu serveru. Hlavními zdroji byla data o samotných uživatelích uložená v databáziwebu a statistické informace o návštevnosti webu z nástroje Google Analytics.

4.2.1 Neúspešne zaregistrovaní uživatelé

Web má v soucasnosti cca 20 tisíc registrovaných uživatelu. Alarmující je císlo neúspešnýchpokusu o registraci. Jedná se o více než 7 tisíc potenciálních uživatelu.

4.2.2 Autorizovaní uživatelé

Web nabízí uživatelum tzv. autorizaci. Jedná se o proces overení, zda je s úctem na webuspojena konkrétní osoba. Pri autorizaci je overena profilová fotografie uživatele, jeho po-hlaví, jméno a vek. Jakékoliv zmeny techto údaju (zejména fotografie) pak musí schválitpoverený administrátor.

Autorizace uživatelu má za úkol posílit bezpecnost webu. Soucasne prispívá ke zvýšeníduveryhodnosti uživatelu a urcitým zpusobem je zvýhodnuje (napr. ve hlavním prehledublogových príspevku se zobrazují pouze príspevky autorizovaných uživatelu).

V soucasnosti je autorizováno již pres 5 tis. uživatelu, tedy asi ctvrtina všech uživatelu.

4.2.3 Vek uživatelu

Z údaju o autorizovaných uživatelích víme, že 84 % z nich je ve veku 15-27 let. Celkem 64% neautorizovaných uživatelu se pak nachází v témže veku. Z toho lze soudit, že zhruba trictvrtiny uživatelu spadají do primární cílové skupiny webu.

4.2.4 Návštevnost webu a aktivita uživatelu

Každý týden navštíví www.signaly.cz celkem 20 tis. uživatelu. Z toho se pouze petina ná-vštevníku prihlašuje, aktivne využívá služby webu a tvorí vlastní obsah.

Za mesíc se tak ke svému úctu prihlásí celkem tretina všech registrovaných uživatelu.Do pul roku se pak postupne prihlásí další tretina všech registrovaných. Poslední tretinauživatelu je neaktivní (tj. na web se prihlásili pouze jednou nebo dvakrát za dobu existencejejich úctu).

10

4.3. SHRNUTÍ AKTUÁLNÍHO STAVU WEBU

0

100

200

300

400

500

600

2 13 15 19 21 25 27 31 33 38 40 44 46 50 52 58 64 72

Obrázek 4.3: Vekové rozložení autorizovaných uživatelu www.signaly.cz.

4.2.5 Neaktivní uživatelé

Z celkového poctu uživatelu je více než tretina uživatelu neaktivních.

4.3 Shrnutí aktuálního stavu webu

Provedení úvodní analýzy1 mi tedy umožnilo pochopit stav projektu a prícinny jeho sou-casných problému.

4.3.1 Pozitiva webu

• Težište webu leží v jeho vlastním obsahu. Zde nemá web v prostredí ceského Inter-netu konkurenci. Uživatele zajímá nejvíce nástenka akcí a redakcí vybírané blogovépríspevky nejen na duchovní témata.

• Webu se darí naplnovat své zamerení na konkrétní cílovou skupinu. Aktivní komu-nita je ze 3/4 složena z mládeže ve veku 15-18 let. Další relevantní spolecný atributuživatelu je krest’anství.

• Uživatelé využívají web pro udržení kontaktu s verícími práteli. Využívají sledováníaktivity prátel prostrednictvím služby Co se deje. Pro cást uživatelu je web význam-ným prostredkem ke sledování dení v krest’anském svete.

• Za dobu fungování webu se povedlo úspešne zavést2 autorizacní systém. Sami uživa-telé autorizaci aktivne vyhledávají.

1. Rozhodl jsem se nepoužít žádný formální uživatelský model [5] s ohledem na skutecnost, že všechna dule-žitá fakta o uživatelích, jejich chování, motivacích a cílech jsem shrnul v textu této kapitoly.2. Napríc Ceskou republikou funguje tým více než 130 autorizátoru, kterí mají právo autorizaci provést.

11

4.3. SHRNUTÍ AKTUÁLNÍHO STAVU WEBU

4.3.2 Negativa webu

• Uživatelum vadí nízká použitelnost nekterých cástí webu (napr. posílání vzkazu nebonahrávání fotografií).

• Více než 7 tisíc pokusu o registraci nebylo nikdy dokonceno. Systém potvrzovacíche-mailu je špatne navržen (krátká doba platnosti aktivacního odkazu), ochrana protipreklepum pri vyplnování registracního formuláre není dostatecná. Obcas se projevítechnické problémy (napr. nedorucení potvrzovacího e-mailu).

• Tretina (cca 6 tisíc) uživatelských úctu je neaktivních. Problém lze videt ve špatnémpochopení webu, ztráte zájmu o web a nedostatecne podporené motivaci k jeho po-užívání. Na webu chybí jakékoliv úvodní obrazovky, pruvodci nebo kontextová ná-poveda. Rozhraní webu není vyvážené: prihlášenému uživateli neprináší výraznoupridanou hodnotu (tudíž ho k prihlášení nemotivuje).

• Uživatelé mají špatnou predstavu o službách webu (napr. více než jedna tretina všechzaložených blogu neobsahuje žádný príspevek).

• Cást uživatelu neví, jakým zpusobem je možné podporit web (at’ už financne nebojinak). Pres 25 % uživatelu neví, jak se aktivne zapojit do fungování webu.

• Nedokonalý systém uživatelské podpory (ve forme diskuzních vláken) klade pre-kážky pri rešení problému. Uživatelé neví napr. jak zrušit blog nebo vlastní uživa-telský úcet, jak se nechat autorizovat apod.

• Uživatelé by uvítali propojení webu s okolními webovými systémy (napr. sociálníslužby Facebook, Twitter, aplikace Google Calendar aj.).

• Uživatelé by uvítali lepší možnosti nastavení zobrazení osobních údaju.

12

Kapitola 5

Návrh GUI webu

An indicator has a value when it’s indicating something. But if it’s not indicatingsomething, it shouldn’t be there.

—Jonathan Ive

5.1 Mentální modely: jak lidé chápou uživatelská rozhraní

Mentální modely jsou základním konceptem interakcního designu. Poznatky o nich pub-likoval poprvé v roce 1943 skotský psycholog Kenneth Craik. Vysvetlil, že lidská mysl sivytvárí vlastní obraz reality, na jehož základe usuzuje, ocekává události a vytvárí si svá vy-svetlení. Tento obraz reality se pak nazývá mentální model uživatele. V interakcním designuse jedná o predstavu uživatele o tom, jak uživatelské rozhraní funguje [5] [24].

V kontrastu s mentálním modelem stojí model implementacní. Jedná se o presný popistoho, jak veci fungují. V prípade pocítacového programu je to jeho zdrojový kód, v prípadetelevizoru jsou to napr. technické výkresy prístroje a komplexní specifikace. Je zrejmé, žepro pohodlné sledování televizních programu nepotrebujeme znát, jak televizor funguje.Potrebujeme pouze vedet, jak prístoj efektivne ovládat. Potrebujeme dobrý zástupný model.

Obrázek 5.1: Vývoj uživatelských rozhraní resp. zástupných modelu.

Zástupný model je alternativní (a casto zjednodušená) reprezentace implementacníhomodelu. V praxi se jedná o uživatelské rozhraní, napr. dálkový ovladac k televizoru neboGUI aplikace. Je mnohem snazší navrhnout zástupný model tak, aby byl podobný imple-mentacnímu modelu. To se pak projevuje množstvím špatne navržených rozhraní a frustracíuživatelu z jejich používání.

13

5.2. CÍL: NÁVRH GUI

5.2 Cíl: návrh GUI

Kompletní GUI webu je jeho zástupným modelem a se skládá ze trí cástí: vzhled obrazovek,jejich fungování a struktura webu.

5.3 Shrnutí požadavku na nový web a nové GUI

Nový web by mel lépe reflektovat duležitý obsah a reagovat na potreby uživatelu i sdruženísamotného.

• Nový web zachová služby stávajcího webu. Klícovým obsahem webu je nástenka akcía blogové príspevky.

• Nové GUI bude navrženo jak s durazem na prihlášené uživatele (snadná tvorba ob-sahu a sledování prátel), tak na neprihlášené uživatele (pasivní príjem obsahu).

• Nové GUI odstraní nedostatky v použitelnosti a lépe web strukturuje. Bude vytvo-rena cást webu informující uživatele o webu samém. Doplneni budou pruvodci a ná-poveda, která umožní snáze web pochopit.

• Nové GUI aplikuje vznikající jednotný vizuální styl sdružení.

• Nový web umožní sdílet videa a odkazy. Umožní propojení s okolními webovýmisystémy (napr. sociální služby Facebook, Twitter, aplikace Google Calendar aj.).

• Nový web umožní vyšší ochranu soukromí.

5.4 Popis procesu návrhu nového GUI

Proces návrhu GUI se skládá z mnoha navzájem se prolínajících iterací. Jednotlivé postupynelze presne oddelit a vymezit. Designér se v iteracích vrací k návrhum obrazovek, srovnáváje, navzájem vyvažuje a upravuje jejich funkcionalitu tak, aby zapadly informacní architek-tury webu.

V prípade redesignu GUI webu www.signaly.cz jsem se zameril na návrh jednotlivýchobrazovek webu [1], promyšlení funkcionality a následne informacní architektury webu.

Obrazovky jsem zachytil formou komentovaných skic (príp. drátených modelu neboprototypu). Poté jsem navrhl finální vizuální podobu GUI a vytvoril z ní základ HTML/CSS/JSframeworku pro vlastní tvorbu šablon GUI webu.

5.5 Techniky použité pri návrhu GUI

Nejduležitejší technikou návrhu bylo skicování. Jedná se o efektivní nástroj – kreslení a psanírukou je pro cloveka prirozené – umožnující rychlý a presný návrh [20]. Skicy doplnené

14

5.5. TECHNIKY POUŽITÉ PRI NÁVRHU GUI

o anotace jsem konzultoval s koordinátorem sdružení a vznikaly i behem uživatelskéhopruzkumu. Uchováváním všech vytvorených skic jsem je mohl snadno porovnávat mezis sebou a efektivne hledat správná rešení.

V nekterých prípadech jsem použil drátené modely (wireframes) a prototypy1 (obrázekA.7) vytvorené v pocítaci. Toto zpracování podává lepší predstavu o skutecných proporcíchprvku layoutu.

Prototypy i drátené modely jsem vytvárel cernobílé, aby nedošlo k zámene za finální gra-fiku webu. Pri tvorbe drátených modelu jsem vyzkoušel radu softwarových nástroju: Pro-toshare, Balsamiq Mockups, iPlotz, OmniGraffle. Prototypy jsem vytvárel v jazyce HTMLpomocí CSS frameworku Blueprint a kaskádových stylu (CSS). Tyto prototypy pak mohlvyužít vývojový tým sdružení pri implementaci prvních funkcí nového webu.

Obrázek 5.2: Ukázka drátených modelu vytvorených v nástrojích Protoshare, Balsamiq Moc-kups a iPlotz.

Dále jsem pri návrhu použil ruzné diagramy (obrázek A.3) [20] a myšlenkové mapy,príp. ad-hoc analýzy konkurence [3].

Obrázek 5.3: Ukázka diagramu použitého pri pruzkumu implementacního modelu akcí.

1. Prototyp je skica doplnená o interaktivní prvky, simulující skutecné GUI.

15

5.6. MAPA WEBU

5.6 Mapa webu

Mapa webu popisuje informacní architekturu webu: strukturu obsahu a vztahy mezi ním.Má obvykle podobu grafu [3]. Mapa nového GUI www.signaly.cz popisuje strukturu webu:pet hlavních obsahových sekcí, podružný obsah webu (registrace, prihlášení, profil uživa-tele aj.) a funkcionalitu dostupnou pouze prihlášenému uživateli. Obsahuje také seznamypredpokládaných obrazovek webu.

Akce Blogy Fotky Videa Odkazy

WWW.SIGNALY.CZ

úvodní strana

vyhledávání infocentrum

profily

registrace

zapomenuté heslo

druhy kvalitní

akce blogy

kvalitní

blogy

kvalitní kvalitní kvalitní

Akce

profil akce

archiv

Blogy

archiv

Fotky

fotoalbum, fotka

nahrávání fotek

editace (fotoalbum, fotka)

Videa

archiv

Odkazy

archiv

úvodní strana

vzkazy

nastavení

základní informace

profilová fotografie

kontaktní údaje

zájmy a záliby

registrace

zapomenuté heslo

vyhledávání

chyba 404

chyba 503

schvalování fotek

Obrázek 5.4: Mapa webu www.signaly.cz.

16

Kapitola 6

Popis návrhu vybraných obrazovek

6.1 Nástenka akcí

Nástenka akcí slouží jako prehled akcí, které se konají (nejen) v krest’anském prostredí pocelé Ceské republice.

Cílem návrhu bylo identifikovat duležité atributy jednotlivých akcí a tomu prizpusobitjejich výpis. Pri konzultaci s koordinátorem jsem vytvoril diagram akcí (obrázek 5.3). Tenzachycuje strukturu akcí a jejich relevantní atributy: délku trvání, místo konání, typ akce,hodnocení akce, pocet a druh úcastníku. Diagram sloužil jako podklad pro úvahy1, skico-vání a ad-hoc testování nové podoby obrazovky.

Obrázek 6.1: Vlevo skica nástenky akcí, vpravo výsledný layout.

V soucasnosti je prehled akcí pouhým seznamem (obrázek A.2). Navrhl jsem proto jako

1. Príklad úvahy: akce je možné rozdelit podle délky konání na jednodenní, vícedenní a víkendové. Pri pozo-rování uživatelu jsem však zjistil, že témer nikdo nehledá akci podle tohoto kritéria. Uživatelé vetšinou hledajíakci, která se koná v konkrétní den. Tuto možnost explicitního filtrování jsem tedy odebral.

17

6.2. PROFIL AKCE

tabulku, umožnující pohodlné „skenování“ obsahu [21]. Pridal jsem pomucky (vizuální zá-chytné body) jako napr. zobrazení délky trvání akce (je-li vícedenní), zobrazení dne v týdnu,kdy akce zacíná nebo zda ji redakce doporucuje.

Akce jsem rozdelil do kategorií. Doplnil jsem možnost zobrazení míst konání akcí namape. Mapa po priblížení zobrazí jednotlivé akce. K dispozici je prepínac razení akcí podlecasu/místa. Místo mapy lze zobrazit kalendár a dostat se tak ke starším akcím. Prihlášenýuživatel v prehledu akcí vidí, na které akce se chystají jeho prátelé.

Všechny tyto úpravy mají za cíl uživateli usnadnit a urychlit výber akce.

6.2 Profil akce

Profil akce prezentuje základní informace o akci. Má za cíl uživatele motivovat k úcastina akci. Soustredil jsem se proto na oddelení oficiálních informací o akci od obsahu pripoje-ného uživateli. Návrh prošel radou iterací, behem kterých jsem vyzkoušel ruzné usporádáníprvku (obrázek A.6) na obrazovce.

Do horní2 cásti obrazovky jsem nakonec umístil název, datum, místo konání a popis akce.Predstavu o míste konání akce podává náhled mapy CR, který je soucasne odkazem na vetšímapu. Jako duležité kritérium pri rozhodování o úcasti na akci se (po rozhovorech s uživa-teli) ukázala informace o úcastnících akce. Proto jsem umístil seznam úcastníku umísten dostejné úrovne, jako oficiální informace o akci.

Obrázek 6.2: Vlevo prvotní drátený model profilu akce, vpravo výsledný layout.

Ve spodní cásti stránky se pak nachází obsah tvorený uživateli: fotky, videa, odkazy a

2. Studie ukazují, že pozornost uživatelu je nejvetší práve pri prohlížení této oblasti [19].

18

6.3. FORMULÁR PRO PRIDÁNÍ NOVÉ AKCE

komentáre k akci. Je tak zamezeno zámene za oficiální informace o akci. Škálování tohotoobsahu je zajišteno možností jeho výpisem v modálním okne.

6.3 Formulár pro pridání nové akce

Po vytvorení množství skic (obrázek A.5) a úvah jsem navrhl jednokrokový rozbalovacíformulár.

Obsahuje pouze nekolik vstupu, aby zdánlivá mohutnost neodradila uživatele od pou-žívání. Tento prístup následuje Teslerovo pravidlo o komplexnosti uživatelských rozhraní(nepožadovat po uživatelích více interakce, než je nezbytne nutné) [20].

Pokrocilé funkce jsou uživateli nadále k dispozici. Zadávání data usnadnuje kalendár,pro presné zadání místa se v prípade potreby objeví mapa.

Obrázek 6.3: Vlevo formulár pro pridání nové akce, vpravo zobrazený vcetne dalších (pri-márne skrytých) funkcí.

6.4 Úvodní strana

Úvodní strana je nejnavštevovanejší obrazovkou webu. Informuje o hlavních službách ajeho obsahu. Podává predstavu o webu jako celku.

Stávající úvodní strana je vizuálne i obsahove nevyvážená. Atraktivní obsah je špatneumísten a strukturován: redakcní sloupek má nejasný název Z jedné ~ vlny3 a rozsah tipu na

3. Motto webu www.signaly.cz zní: „Na jedné ~ vlne.“

19

6.4. ÚVODNÍ STRANA

akce je velmi malý. Podle click stream analýzy (obrázek A.1) stránka obsahuje nepoužívanéodkazy.

Obrázek 6.4: Úvodní strana.

Stránku jsem proto rozdelil na 3 cásti. V souladu s analýzou potreb uživatelu jsem dalhlavní prostor vybraným blogovým príspevkum, tipum na akce a redakcnímu sloupku.

K narušení linearity a nastavení jasných vizuálních priorit jsem použil místy vetší písmo,perexy clánku a reklamní proužky (sloužící at’ už komercním partnerum webu nebo jehovlastním projektum). Tyto prvky soucasne slouží jako tzv. call-to-action elementy [4].

Do spodní cásti jsem umístil pruh, který obsahuje chronologicky razené informace o no-vém obsahu na webu. K této funkci jsem navrhl zrízení skupiny redaktoru. Tito editori bu-dou sami vybírat kvalitníh obsah, který smí být na úvodní strane zobrazen.

Na zacátek stránky jsem pridal úvodní text o webu www.signaly.cz, odkazy vedoucík registraci a informacím o webu samém. Cílem je snížit pocet nedokoncených registrací,neaktivních uživatelu a zvýšit povedomí o zámeru webu.

Návrh stránky jsem provedl pomocí rucních skic a následne dokoncil jako HTML/CSS/JSšablonu.

20

6.5. ÚVODNÍ STRANA (PRIHLÁŠENÝ UŽIVATEL)

6.5 Úvodní strana (prihlášený uživatel)

V soucasné dobe má prihlášený uživatel k dispozici stránku Moje signály.cz, která mu sloužíjako rozcestník po prihlášení. V praxi to však znamená nutnost sledovat 2 úvodní stránky(pro prihlášeného a neprihlášeného). Tento koncept je neúcelný a matoucí.

Sloucil jsem proto stránku Moje signály.cz a úvodní stranu v jedinou tak, aby na ní pri-hlášený uživatel videl vše, co potrebuje. Obsah úvodní strany zustává, je presunut do pravécásti a vizuálne potlacen.

Nejduležitejší místo zaujímá chronologicky razený prehled aktivity prátel. Tato služba(známá nyní pod názvem Co se deje) je mezi uživateli velmi oblíbená i pres nesporné chybyv použitelnosti soucasného zpracování.

Obrázek 6.5: Skica úvodní strany prihlášeného uživatele.

Puvodní redakcní obsah stránky Moje signály.cz, tj. Slovo na den a Událost dne jsempo konzultaci s koordinátorem projektu odstranil, ve zpusobu jeho další propagace zatímsdružení nemá jasno. Sledované blogy a diskuze jsem presunul do prehledu aktivity prá-tel. Odstranil jsem tím nutnost sledovat nekolik míst4 na obrazovce a usnadnil sledovánínovinek na webu.

4. Zaznamenal jsem námitky uživatelu proti sloucení aktivity prátel a sledovaného obsahu. Uživatelské tes-tování však potvrdilo prínos tohoto rozhodnutí, zejména pri castém používání webu. Možnost sledovat obsahwebu oddelene pritom stále zustává: prostrednictvím vhodne upravených hlavních sekcí webu.

21

6.6. DALŠÍ OBRAZOVKY

6.6 Další obrazovky

Ukázky dalších obrazovek jsem ponechal soucástí obrazové prílohy (príloha A).

22

Kapitola 7

Zasazení obrazovek do kontextu webu

Pri návrhu GUI je vhodné hledat funkcne podobné prvky GUI. Sjednocením vzhledu ta-kových prvku vznikají opakující se cásti GUI, které již uživatel zná. Pomáhají tím snižovatkognitivní zatížení uživatelu [32]. Usnadnují také vývoj a umožnují urcitou míru znovupo-užitelnosti – jak na úrovni kódu systému, tak na úrovni šablon nebo vizuální podoby [17].

Nekolik takových prvku jsem proto vybral a popsal jejich zaclenení do GUI webu.

7.1 Záhlaví a navigace na webu

Plnobarevný pruh záhlaví obsahuje logo, hlavní navigaci a vyhledávání. Konzistentní na-vigace (stejne jako napr. obsah v knize) ukazuje na hlavní obsah webu. Podává informacio tom, kde jsem a kam mohu pokracovat [15].

Do pravého horního rohu (v souladu se zažitým návrhovým vzorem [8]) jsem umístilvyhledávání, které je na stávajícím webu potlaceno (nachází se pouze na úvodní strane astránce Moje signály.cz).

Obrázek 7.1: Záhlaví webu.

7.2 Zápatí webu

V prípade nekterých webu se jedná o zbytecne nevyužitou cást obrazovky. Šel jsem opacnoucestou a vytvoril zápatí podobné mape webu [10]. Díky tomu je mapa k dispozici na každéstránce webu pro prípad, že je uživatel zmaten a hledá pomoc1.

1. Praxe ukazuje, že se tomu tak deje [26].

23

7.3. ADMINISTRACNÍ LIŠTA

Obrázek 7.2: Zápatí webu.

7.3 Administracní lišta

Administracní lišta (obrázky A.8 a A.9) slouží ke administrátorum ke správe obsahu webu.Její obsah se mení tak, aby se vztahoval k práve prohlížené stránce. Napr. na profilu akcemuže správce pomocí lišty schválit zobrazování akce na nástence akcí, oznacit ji jako dopo-rucovanou nebo (v prípade zamítnutí) poslat autorovi akce komentár.

Lišta svým umístením nenarušuje layout obrazovek a po skrytí správci umožnuje videtweb tak, jak ho vidí jako bežní uživatelé.

7.4 Kontextové funkce

V prubehu návrhu jednolivých obrazovek vyšlo najevo, že prakticky na každé stránce sevyskytuje nejaká funkce, vztahující se k dané stránce. Jedná se napr. o možnost poslat vzkazuživateli (na profilu uživatele), vytvorit novou akci (v prehledu akcí) nebo upravit vlastnífotoalbum pri jeho zobrazení.

Inspirován rešením podobného problému na Facebooku jsem rezervoval prostor pra-vého horního rohu pro ovládací tlacítka. Po navržení asi tuctu obrazovek jsem dospel k zá-veru, že pri dostatecne promyšleném návrhu se na každé obrazovce mohou objevit nejvýšedve podobná tlacítka. Pakliže tlacítka potreba nejsou, vzniká tzv. bílé místo [28].

Obrázek 7.3: Ukázka prostoru pro tlacítka.

7.5 Úvodní obrazovky a pruvodci

Úvodní obrazovky ukazují novým uživatelum obsah a služby webu. Dobre navržený pru-vodce pro tzv. prázdný stav systému pomáhá uživateli pri orientaci v dosud neznámémprostredí [1]. Pruvodce se po nekolika zobrazních sám skryje, aby nedocházelo k obtežo-vání stredne pokrocilých uživatelu informacemi pro zacátecníky [5].

24

7.5. ÚVODNÍ OBRAZOVKY A PRUVODCI

Navrhul jsem také implementaci systému tzv. „pripomínacích funkcí“. Napr. opetovnéodeslání potvrzovacího e-mailu po uplynutí casového úseku od registrace nebo prubežnéposílání vzkazu informujících o uživatelem nevyužívaných službách webu.

Nasazení obou funkcionalit zvyšuje nároky na implementaci. Pomáhá však uživateluma motivuje k používání webu.

Obrázek 7.4: Ukázka pruvodce.

25

Kapitola 8

Výsledná podoba GUI

You can clean up a pig, put a ribbon on it’s tail, spray it with perfume, but it isstill a pig.

—Lipstick on a pig

Vizuální styl webu www.signaly.cz vychází z jednotného vizuálního stylu sdružení. Vy-užívá plných barevných ploch, modré a zelené barvy a mnoha ilustrací, které se vizuálnístylizací blíží komiksu. Základem rady vizuálních prvku stylu je komiksová bublina, vy-cházející z loga sdružení1. Bublina symbolizuje komunikaci jak mezi lidmi navzájem, takmezi lidmi a Bohem. Neprehlédnutelným prvkem stylu je „smajlík“, stylizovaná podobaobliceje cloveka. Vizuální styl sdružení se snaží vyjádrit mládí a radost ze života ve víre.

www.signaly.cz/diskuze/taize

www.signaly.cz/taize

na zemi31

taize.signaly.cz

Obrázek 8.1: Ukázka jednotného vizuálního stylu sdružení: propagacní leták. Další ukázkyjsou soucástí obrazové prílohy.

Jednotný vizuální styl sdružení byl vrele prijat vetšinou uživatelu webu. Postupné zave-dení a vytvorení tohoto komplexního systému vyžadovalo moji soustavnou práci od brezna

1. Logo sdružení navrhl v roce 2007 designér Marián Brchan.

26

8.1. VIZUÁLNÍ STYL WEBU

2009. V soucasné dobe je web posledním místem, kde nebyl jednotný vizuální styl sdruženívýrazneji aplikován.

8.1 Vizuální styl webu

Design není dekorace. Vizuální podoba webu by mela podporovat jeho obsah. Vizuální stylsdružení jsem proto vhodne aplikoval na GUI webu. Využil jsem predevším sílu barev atypografie. Podporil jsem tím presvedcivost a použitelnost webu, který s uživateli komuni-kuje prostrednictvím jednotného vizuálního jazyka.

Obrázek 8.2: Hlavní strana nové verze webu www.signaly.cz.

27

8.1. VIZUÁLNÍ STYL WEBU

8.1.1 Typografická mrížka

Mrízka je nástroj sloužící k organizaci množství informací v ploše. Tvorí se na míru da-nému projektu. Vhodne nastavená mrížka usnadnuje rozmist’ování vekého množství ob-sahu v ploše. Vnáší do návrhu rád a vizuální rytmus [11].

Navrhl jsem modulární typografickou mrížku se 14 sloupci. Šírka sloupce je 50 pixelu,mezera mezi sloupci je 20 pixelu. Rozmery jsem zvolil s ohledem na umístení standard-ního reklamího proužku [29] tak, aby zabíral na šírku místo presne 2 sloupcu, tj. 120 pixelu.Dvanáct sloupcu pro obsah lze díky jejich vhodnému poctu libovolne rozdelit na poloviny,tretiny, nebo ctvrtiny a layout se tak stává vysoce flexibilním.

Layout webu nepresáhne šírku 960 pixelu. Vejde se tudíž na monitor jak starších osob-ních pocítacu, tak na soucasná mobilní zarízení.

Obrázek 8.3: Typografická mrížka webu www.signaly.cz.

8.1.2 Písmo a typografie

Vizuální styl využívá písmo Droid Sans2. To bylo navrženo pro použití na obrazovce ma-lých mobilních zarízení. Na webu ho používám pro nadpisy príp. call-to-action prvky. Jakochlebové písmo3 pak používám bezserifový Arial.

Protože nejduležitejší obsah webu je textový [27] (blogové príspevky, informace o ak-cích), venoval jsem zvýšenou pozornost zvládnutí typografie.

2. Písmová rodina Droid <http://en.wikipedia.org/wiki/Droid_(font)>3. Jako chlebové písmo se v typografii oznacuje základní rez písma urcený pro bežnou sazbu [25].

28

8.1. VIZUÁLNÍ STYL WEBU

8.1.3 Barvy

Krome cerné a jejich odstínu využívá vizuální styl sdružení dve další barvy: modrou a zele-nou. Stejné barvy jsem použil pro GUI webu.

Modrá barva je primární. Na webu je použita predevším jako barva odkazu. Zelenábarva je doplnková. Používám ji na odlišení tlacítek, práve aktivních prkvu a dalších tzv.call-to-action prvku [4]. Díky omezenému používání této barvy je snadné upoutat na zelenýprvek pozornost.

Celkové barevné pojetí webu je strídmé, což umožnuje dobré jasné vyznacování napr.informacních a chybových hlášení systému pomocí jiných barev (cervená, žlutá).

8.1.4 Ikony

Použití ikon zvyšuje návodnost GUI a usnadnuje orinetaci na webu. Zpusob a míra stylizaceikon (v rámci jedné sady ikon) musí být stejná a v souladu s vizuálním stylem GUI.

Pri návrhu ikon jsem vyšel z ilustrací, které doplnují jednotný vizuální styl sdružení.Zjednodušením a úpravou nekterých z nich jsem vytvoril sadu ikon, které nové GUI vhodnedoplnují.

28Abc

Obrázek 8.4: Ikony hlavních sekcí webu.

29

Kapitola 9

Framework: základ HTML/CSS/JS šablon

We aren’t designing photocopies of web pages, we’re designing web pages.

—Andy Clarke

Nové GUI jsem implementoval ve forme HTML/CSS/JS šablon. Pro kód GUI webu pou-žívám znackovací jazyk HTML doplnený o mikroformáty. K vizuálnímu formátování webupoužívám kaskádové styly (CSS). Interaktivitu zajišt’uji skriptovacím jazykem JavaScript ajavascriptovým frameworkem jQuery1.

Mým cílem bylo vytvorit základ CSS frameworku2, který usnadní tvorbu množství ša-blon. Díky frameworku lze efektivne psát kód srozumitelný, udržovatelný a škálovatelný.V následujících odstavcích popisuji prístup k tvorbe frameworku, nejzajímavejší problémypsaní moderních HTML/CSS/JS šablon a jejich rešení.

9.1 HTML5 a mikroformáty

Specifikace znackovacího jazyka HTML je v nové verzi známa jako HTML5. Zavádí novésémantické znacky, zabývá se API, fungováním aplikací offline aj. Ackoliv je specifikacevelmi rozsáhlá (její úplná implementace se ocekává až v roce 2022), má smysl HTML5 zacítpoužívat již dnes: zpetná kompatitbilita je zajištena, moderní internetové prohlížece ve stálevetší míre HTML5 implementují a podporují tak využití nových funkcí [14].

Mikroformáty jsou sady tríd, kterými lze oznacit HTML elementy a explicitne tak vy-jádrit, jaký obsah daný prvek nese [30]. Takto oznacená data umožnují snadnejší strojovézpracování. Mikroformáty jsou prvním výrazneji používaným krokem k dosažení séman-tického webu [22].

9.2 CSS 3

V kaskádových stylech využívám nekteré vlastnosti ze vznikající specifikace CSS verze 3. Taobsahuje celkem 41 modulu a cást z nich již dnešní prohlížece podporují. Web zobrazený vestarším prohlížeci (napr. Internet Explorer 6) je stále plne funkcní, uživatel je pouze ochuzeno cást vizuálních detailu/efektu (kulaté rohy, stíny aj.) [7].

1. jQuery <http://www.jquery.com>2. Framework je softwarová struktura, sloužící jako podpora pri vývoji a organizaci softwarových projektu[31]. Soucasné obecné CSS frameworky jsou však jen pouhými knihovnami znovupoužitelných komponent [6].

30

9.3. PÍSMA NA WEBU

Používat CSS 3 se již dnes vyplatí: vývoj je díky tomu rychlejší, snazší a uživatelé jsoumotivováni k používání moderních prohlížecu.

9.3 Písma na webu

Pri formátování webu kaskádovými styly je výber dostupných písem omezený. Je možnépoužít vlastní písmo pomocí @font-face – nativní konstrukce kaskádových stylu verze 3,kterou dnes již podporuje vetšina moderních prohlížecu. Komplikace pri použití @font-facespocívají v licencních omezeních a necitelnosti písma pri absenci anti-aliasingu (v prípadepísem neupravených pro použití na obrazovce). Ješte pred rozšírením @font-face vzniklynekteré alternativní nástroje (napr. sIFR, Cufón nebo Typeface.js), které umožnují použitívlastních písem a soucasne netrpí problémy s vyhlazováním písma. Jejich nasazení všakvyžaduje další podpurné technologie (JavaScript nebo Flash) [9].

Díky rostoucí podpore @font-face napríc prohlížeci jsem rozhodl pro tuto možnost. Re-šení je efektivní, dopredne kompatibilní a není závislé na podpurných technologiích. PísmoDroid Sans je soucasne navrženo pro použití na obrazovce a licencováno i pro použití nawebu.

9.4 Architektura CSS souboru

Zajímavou problematikou tvorby šablon GUI webu je organizace souboru a návrh systémutríd a identifikátoru tak, aby byl kód udržovatelný a snadno rozširitelný [6] [18] [16].

Inspirován výše zmínenými technikami a vlastní praxí jsem kaskádové styly rozdelil dotrí souboru. V souboru basic.css nastavuji vzhled všech základních HTML elementu. Sou-bor components.css jsem použil jako knihovnu znovu použitelných komponent. Poslednísoubor layout.css pak upravuje vlastnosti komponent v závislosti na tom, ve které šablonese nacházejí.

Jednotlivé šablony je možné kombinovat. Samotné komponenty oznacuji pomocí trídnebo jejich kombinací. Plochá struktura komponent umožnuje výhradní použití identifiká-toru pri oznacování unikátních prvku co se obsahu týce.

Jako formát pro komentáre jsem použil systém CSSDOC3. Syntaxe je podobná známénusystému JavaDoc4.

9.5 Flexibilní kód

Stejne jako pri programování, je možné pri používání kaskádových stylu dosáhnout vý-sledku více zpusoby. Neexistuje žádná univerzálne platná sada pravidel, jak dosáhnout po-žadovaného výsledku.

3. CSSDOC <http://cssdoc.net/>4. Javadoc <http://java.sun.com/j2se/javadoc/>

31

9.5. FLEXIBILNÍ KÓD

Vždy je treba pamatovat na zmeny, které mohou nastat (napr. text bude delší, místojednoho odstavce textu bude treba použít dva, uživatel si zvetší písmo, prohlížec nebudemít zapnutý JavaScript aj.). Držel jsem se proto rad a doporucení odborníku [23] a snažil seo flexibilní a „neprustrelný“ kód.

32

Kapitola 10

Záver

Ve své bakalárské práci jsem navrh GUI nové verze webu www.signaly.cz. Následne jsemnapsal základ HTML/CSS/JS frameworku urceného pro tvorbu šablon webu.

Nalezení optimálního rešení vyžadovalo pochopení mnoha disciplín, principu a záko-nitostí týkajících se nejen designu nebo psaní HTML dokumentu. Behem tvorby jsem siosvojil pokrocilé metody vedoucí k návrhu webu, který není postaven pouze na odhadecha domnenkách, nýbrž je podložen skutecnými potrebami a chováním uživatelu. Seznámiljsem se s radou technik a nástroju, které pomáhají zvýšit kvalitu, presvedcivost a celkovýdojem z finálního webu.

Dokoncením této práce jsem položil stabilní základ GUI nové verze webu www.signaly.cz.Nyní bude následovat vytvorení šablon jednotlivých obrazovek a nasazení GUI, ve spolu-práci se cleny vývojového týmu sdružení.

Verím, že hodnota mé práce bude zanedlouho plne využita pri spuštení webu.

33

Príloha A

Obrazová príloha

Obrázek A.1: Click stream analýza hlavní strany webu.

34

A. OBRAZOVÁ PRÍLOHA

Obrázek A.2: Puvodní nástenka akcí.

35

A. OBRAZOVÁ PRÍLOHA

Obrázek A.3: Návrh struktury webu.

36

A. OBRAZOVÁ PRÍLOHA

Obrázek A.4: Drátený model nástenky akcí.

37

A. OBRAZOVÁ PRÍLOHA

Obrázek A.5: Skica cásti formuláre pro vytvárení akcí.

38

A. OBRAZOVÁ PRÍLOHA

Obrázek A.6: Skica profilu akce.

39

A. OBRAZOVÁ PRÍLOHA

Obrázek A.7: Drátený model profilu akce.

40

A. OBRAZOVÁ PRÍLOHA

Obrázek A.8: Návrh administracní lišty.

41

A. OBRAZOVÁ PRÍLOHA

Obrázek A.9: Návrh administracní lišty.

42

A. OBRAZOVÁ PRÍLOHA

Obrázek A.10: Návrh prehledu blogu.

43

A. OBRAZOVÁ PRÍLOHA

Obrázek A.11: Komentovaná skica archivu blogu.

44

A. OBRAZOVÁ PRÍLOHA

Obrázek A.12: Skica výsledku vyhledávání.

45

A. OBRAZOVÁ PRÍLOHA

Obrázek A.13: Dílcí návrh úvodní strany prihlášeného uživatele.

46

A. OBRAZOVÁ PRÍLOHA

Obrázek A.14: Drátený model profilu uživatele.

47

A. OBRAZOVÁ PRÍLOHA

Obrázek A.15: Drátený model vzkazu.

48

Príloha B

Hodnotící anketa pro vyhodnocení dvou let provozu webu

Podrobné výsledky ankety sdružení nezverejnilo.

49

B. HODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU

Obrázek B.1: Souhrnné výsledky ankety.

50

B. HODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU

Obrázek B.2: Souhrnné výsledky ankety.

51

B. HODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU

Obrázek B.3: Souhrnné výsledky ankety.

52

B. HODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU

Obrázek B.4: Souhrnné výsledky ankety.

53

B. HODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU

Obrázek B.5: Souhrnné výsledky ankety.

54

B. HODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU

Obrázek B.6: Souhrnné výsledky ankety.

55

B. HODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU

Obrázek B.7: Souhrnné výsledky ankety.

56

Príloha C

Obsah CD

Priložený kompaktní disk obsahuje:

• zdrojový kód této práce ve formátu XML,

• zdrojový kód této práce ve formátu LATEX, vygenerovaný pomocí modulu xslt2,

• tuto práci ve formátu PDF, vygenerovanou pomocí modulu xslt2,

• otisky obrazovek puvodního webu,

• ukázku vizuálního stylu sdružení,

• skicy obrazovek nového GUI webu,

• drátené modely a prototypy nového GUI webu,

• ukázku HTML/CSS/JS šablon nového GUI webu.

57

Literatura

[1] 37signals: Getting Real, 2006, 37signals, <http://gettingreal.37signals.com/> . 5.4, 7.5

[2] Boulton, M.: A Practical Guide to Designing for the Web, 2009, Mark Boulton DesignLtd.. 1, 4.1

[3] Brown, D.: Communicating Design, 2007, New Riders Press, <http://www.communicatingdesign.com/> . 5.5, 5.6

[4] Gube, J.: Call to Action Buttons: Examples and Best Practices, 2009, Sma-shing Media GmbH, <http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/> . 6.4, 8.1.3

[5] Cooper, A. a Riemann, R. a Cronin, D.: About Face 3: The Essentials of InteractionDesign, 2007, Wiley Publishing, Inc.. 1, 4, 4.1.2, 4.1.4, 1, 5.1, 7.5

[6] Downe, N.: CSS Systems for writing maintainable CSS, 28. 9. 2008, <http://natbat.net/2008/Sep/28/css-systems/> . 2, 9.4

[7] Heilmann, C.: Graceful degradation versus progressive enhan-cement, 2009, <http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/> . 9.2

[8] Nielsen, J. a Pernice, K.: Eyetracking Web Usability, 2009, New Riders Press, <http://www.useit.com/eyetracking/> . 7.1

[9] Sládek, J.: Hon za fonty na webu, 2009, <http://www.slideshare.net/jansladek/hon-za-fonty-na-webu> . 9.3

[10] Cronin, M.: Informative And Usable Footers In Web Design, 2009, Sma-shing Media GmbH, <http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-web-design/> . 7.2

[11] Vinh, K. a Boulton, M.: Grids Are Good, <http://www.subtraction.com/pics/0703/grids_are_good.pdf> . 8.1.1

[12] Šedo, J.: Webový komunitní systém, 2009, Masarykova univerzita v Brne, Fakulta in-formatiky, <http://is.muni.cz/th/208068/fi_b/> . 3.1, 3.2

[13] Nielsen, J.: Ten Usability Heuristics, 2005, <http://www.useit.com/papers/heuristic/heuristic_list.html> . 4.1.4

[14] Keith, J.: A Brief History of Markup, A List Apart Magazine, 4. 5. 2010, <http://www.alistapart.com/articles/a-brief-history-of-markup/> . 9.1

[15] Krug, S.: Web design: nenut’te uživatele premýšlet!, 2006, Computer Press, a.s.. 7.1

58

[16] Michálek, M.: Udržovatelný stylopis: CSS kód, ze kterého nerozbolí hlava,18. 3. 2009, Internet Info, s.r.o., <http://zdrojak.root.cz/clanky/udrzovatelny-stylopis-css-kod-nerozboli-hlava/> . 9.4

[17] Bolton, J.: Make it modular, <http://www.netmag.co.uk/zine/opinion/make-it-modular> . 7

[18] Sullivan, N.: Object Oriented CSS, 16. 2. 2008, <http://wiki.github.com/stubbornella/oocss/> . 9.4

[19] Nielsen, J.: Scrolling and Attention, 4. 3. 2010, <http://www.useit.com/alertbox/scrolling-attention.html> . 2

[20] Saffer, D.: Designing for Interaction: Creating Smart Applications and Clever Devices,2007, New Riders Press, <http://www.designingforinteraction.com/> . 1,2, 2.1, 3, 4.1, 5.5, 5.5, 6.3

[21] Nielsen, J.: How Users Read on the Web, 1997, <http://www.useit.com/alertbox/9710a.html> . 6.1

[22] Holý, J.: Sémantický web, <http://www.webexpo.cz/prednaska/semanticky-web/> . 9.1

[23] Cederholm, D. a Marcotte, E.: Handcrafted CSS: More Bulletproof Web Design, 2009,New Riders Press, <http://www.handcraftedcss.com/> . 9.5

[24] SYMBIO Digital, s. r. o.: Mental models (mentální modely), SYMBIO Digital, s. r.o., <http://www.symbio.cz/slovnik/mental-models-mentalni-modely.html> . 5.1

[25] Beran, V.: Typografický manuál, 2000, Beran. 3

[26] Lash, J.: More Than Just a Footer, 2004, Digital Web Magazine, <http://www.digital-web.com/articles/more_than_just_a_footer/> . 1

[27] Information Architects, Inc.: Web Design is 95% Typography, InformationArchitects, Inc., 19. 10. 2006, <http://informationarchitects.jp/the-web-is-all-about-typography-period/> . 8.1.2

[28] Boulton, M.: Whitespace, A List Apart Magazine, 2007, <http://www.alistapart.com/articles/whitespace/> . 7.4

[29] Wikipedia contributors: Web banner, Wikipedia, The Free Encyclopedia, 11. 5. 20102.20, <http://en.wikipedia.org/wiki/Web_banner> . 8.1.1

[30] Wikipedia contributors: Microformat, Wikipedia, The Free Encyclopedia, 7. 5. 201010.40, <http://en.wikipedia.org/wiki/Microformat> . 9.1

59

[31] Wikipedia contributors: Software framework, Wikipedia, The Free Encyclopedia, 2. 5.2010 13.13, <http://cs.wikipedia.org/wiki/Framework> . 2

[32] Wikipedia contributors: Cognitive load, Wikipedia, The Free Encyclopedia, 4. 5. 201020.00, <http://en.wikipedia.org/wiki/Cognitive_load> . 7

60