Plné znění mé bakalářské práce

}w
!"#$%&'()+,-./012345<yA|
M ASARYKOVA UNIVERZITA
FAKULTA INFORMATIKY
Návrh GUI komunitního webu
BAKALÁ ŘSKÁ PRÁCE
Ondřej Válka
Brno, jaro 2010
Prohlášení
Prohlašuji, že tato bakalářská práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj.
Vedoucí práce: doc. Ing. Jiří Sochor, CSc.
ii
Shrnutí
Cílem práce je prostudovat proces návrhu uživatelského rozhraní webu a vybrané postupy
předvést při návrhu části GUI křest’anského komunitního serveru www.signaly.cz.
Práce popisuje tvorbu použitelného uživatelského rozhraní, zabývá se metodikami uživatelského průzkumu, objasňuje návrh pomocí drátěných modelů, prototypů a dalších technik včetně popisu a zdůvodnění výsledného vzhledu webu. Vybraná část je implementována ve formě HTML/CSS/JS šablon.
iii
Klíčová slova
interakční design, user experience, uživatelský průzkum, uživatelské rozhraní, informační
architektura, drátěné modely, prototypy, HTML, CSS, GUI, webdesign, komunitní web
iv
Obsah
1
2
3
4
5
6
7
Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Interakční design . . . . . . . . . . . . . . . . . . . . . . . . .
Úvodní dokument . . . . . . . . . . . . . . . . . . . . . . . .
3.1 Občanské sdružení signály.cz, o. s. . . . . . . . . . . . .
3.2 Současný stav webu . . . . . . . . . . . . . . . . . . . .
3.3 Cíl sdružení: nová verze webu . . . . . . . . . . . . . .
3.4 Cílová skupina webu . . . . . . . . . . . . . . . . . . . .
3.5 Moje role při vývoji nové verze webu . . . . . . . . . .
Analýza webu a potřeb uživatelů . . . . . . . . . . . . . . .
4.1 Kvalitativní průzkum . . . . . . . . . . . . . . . . . . . .
4.1.1 Rozhovory se členy realizačního týmu . . . . . .
4.1.2 Etnografické rozhovory s uživateli . . . . . . . .
4.1.3 Analýza požadavků uživatelů . . . . . . . . . .
4.1.4 Expertní analýza GUI webu . . . . . . . . . . . .
4.2 Kvantitativní průzkum . . . . . . . . . . . . . . . . . . .
4.2.1 Neúspěšně zaregistrovaní uživatelé . . . . . . .
4.2.2 Autorizovaní uživatelé . . . . . . . . . . . . . . .
4.2.3 Věk uživatelů . . . . . . . . . . . . . . . . . . . .
4.2.4 Návštěvnost webu a aktivita uživatelů . . . . .
4.2.5 Neaktivní uživatelé . . . . . . . . . . . . . . . . .
4.3 Shrnutí aktuálního stavu webu . . . . . . . . . . . . . .
4.3.1 Pozitiva webu . . . . . . . . . . . . . . . . . . . .
4.3.2 Negativa webu . . . . . . . . . . . . . . . . . . .
Návrh GUI webu . . . . . . . . . . . . . . . . . . . . . . . . .
5.1 Mentální modely: jak lidé chápou uživatelská rozhraní
5.2 Cíl: návrh GUI . . . . . . . . . . . . . . . . . . . . . . . .
5.3 Shrnutí požadavků na nový web a nové GUI . . . . . .
5.4 Popis procesu návrhu nového GUI . . . . . . . . . . . .
5.5 Techniky použité při návrhu GUI . . . . . . . . . . . . .
5.6 Mapa webu . . . . . . . . . . . . . . . . . . . . . . . . .
Popis návrhu vybraných obrazovek . . . . . . . . . . . . . .
6.1 Nástěnka akcí . . . . . . . . . . . . . . . . . . . . . . . .
6.2 Profil akce . . . . . . . . . . . . . . . . . . . . . . . . . .
6.3 Formulář pro přidání nové akce . . . . . . . . . . . . . .
6.4 Úvodní strana . . . . . . . . . . . . . . . . . . . . . . . .
6.5 Úvodní strana (přihlášený uživatel) . . . . . . . . . . .
6.6 Další obrazovky . . . . . . . . . . . . . . . . . . . . . . .
Zasazení obrazovek do kontextu webu . . . . . . . . . . . .
7.1 Záhlaví a navigace na webu . . . . . . . . . . . . . . . .
7.2 Zápatí webu . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1
2
4
4
4
5
5
6
7
7
7
8
9
9
10
10
10
10
10
11
11
11
12
13
13
14
14
14
14
16
17
17
18
19
19
21
22
23
23
23
v
7.3 Administrační lišta . . . . . . . . . . . . . . . . . . . . .
7.4 Kontextové funkce . . . . . . . . . . . . . . . . . . . . .
7.5 Úvodní obrazovky a průvodci . . . . . . . . . . . . . . .
8 Výsledná podoba GUI . . . . . . . . . . . . . . . . . . . . . .
8.1 Vizuální styl webu . . . . . . . . . . . . . . . . . . . . .
8.1.1 Typografická mřížka . . . . . . . . . . . . . . . .
8.1.2 Písmo a typografie . . . . . . . . . . . . . . . . .
8.1.3 Barvy . . . . . . . . . . . . . . . . . . . . . . . . .
8.1.4 Ikony . . . . . . . . . . . . . . . . . . . . . . . . .
9 Framework: základ HTML/CSS/JS šablon . . . . . . . . . .
9.1 HTML5 a mikroformáty . . . . . . . . . . . . . . . . . .
9.2 CSS 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
9.3 Písma na webu . . . . . . . . . . . . . . . . . . . . . . .
9.4 Architektura CSS souborů . . . . . . . . . . . . . . . . .
9.5 Flexibilní kód . . . . . . . . . . . . . . . . . . . . . . . .
10 Závěr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A Obrazová příloha . . . . . . . . . . . . . . . . . . . . . . . . .
B Hodnotící anketa pro vyhodnocení dvou let provozu webu
C Obsah CD . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Literatura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
24
24
24
26
27
28
28
29
29
30
30
30
31
31
31
33
34
49
57
60
vi
Kapitola 1
Úvod
Existuje mnoho dílčích postupů a technik [20] [2], více či méně ucelených metodik [5], popisujících proces návrhu uživatelského rozhraní webu. Jako designér a vývojář uživatelských
rozhraní webů jsem měl možnost vyzkoušet si některé z nich.
V tomto textu si kladu za cíl prostudovat proces návrhu webu důkladněji a vybrané postupy předvést při návrhu části GUI1 křest’anského komunitního serveru www.signaly.cz.
Nastiňuji základní kroky vedoucí ke vzniku použitelného uživatelského rozhraní, zabývám
se metodikami uživatelského průzkumu, objasňuji návrh pomocí drátěných modelů, prototypů a dalších technik. Popisuji a zdůvodňuji výsledný vzhled webu.
Primárním výsledkem mé práce jsou skicy obrazovek (příp. drátěné modely nebo prototypy) nového GUI webu. Sekundárním výsledkem je základ HTML/CSS/JS frameworku
pro tvorbu šablon webu.
1. grafické uživatelské rozhraní
Graphical_user_interface>
(graphical
user
interface)
<http://en.wikipedia.org/wiki/
1
Kapitola 2
Interakční design
In the same way that industrial designers have shaped our everyday life through
objects that they design for our offices and for our homes, interaction design is
shaping 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
Interakční design je obor zabývající se komplexním návrhem vzhledu a fungování uživatelských rozhraní digitálních výrobků. Hlavní pilíře oboru tvoří design uživatelských rozhraní, informační architektura, komunikační design a interakční design jako takový [20]. Je
ho potřeba při návrhu všech elektronických zařízení, se kterými lidé pracují nebo jejich prostřednictvím komunikují. Interakční design se stal nepostradatelnou součástí průmyslové
produkce elektronických výrobků, podobně jako tomu bylo v minulosti u designu průmyslového.
Webdesign je obor zabývající se návrhem webových stránek. Jedná se o komplexní soustavu činností: část disciplín uplatňovaných při návrhu webu sdílí právě s interakčním designem, jiné s grafickým designem, typografií či marketingem. Díky různorodosti webdesignu je tak přesná hranice s uvedenými obory obtížně definovatelná. Webdesign se s nimi
překrývá do takové míry, jakou vyžaduje povaha konkrétního projektu.
Během návrhu GUI komunitního webu jsem se pohyboval právě na rozhraní interakčního designu a webdesignu s cílem dosáhnout co nejlepšího uživatelského dojmu. Design
s důrazem 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živatelem
apod.
Práci interakčního designéra vidím především v provedení uživatelského průzkumu a
aplikaci principů efektivních uživatelských rozhraní. Práci webdesignera pak ve zohlednění
technických omezení daných prostředím World Wide Webu a následné implementaci části
rozhraní.
2
2. I NTERAK ČNÍ DESIGN
GHVLJQ]DPėʼnHQìQD
GRMHPXçLYDWHOH
SUśP\VORYì
design
LQIRUPDĀQt
DUFKLWHNWXUD
design
komunikace
LQWHUDNĀQtGHVLJQ
design
XçLYDWHOVNìFK
UR]KUDQt
OLGVNp
IDNWRU\
SRXçLWHOQRVW
LQWHUDNFHĀORYėND
VSRĀtWDĀHP
Obrázek 2.1: Diagram vztahů interakčního designu a s ním souvisejích disciplín [20].
3
Kapitola 3
Úvodní dokument
Předpokladem úspěšného dokončení libovolného projektu je dobře připravený úvodní dokument. Slouží jako základní odrazový můstek napříč celým procesem realizace projektu.
Úvodní dokument plní především dvě základní funkce: představuje řešený problém a napomáhá utřídění myšlenek zadavatele projektu [20].
Dobře napsaný úvodního dokument obsahuje: shrnutí projektu a jeho kontextu, definice řešeného problému, popis cílové skupiny, cíle projektu, požadavky zadavatele a souhrn omezení při realizaci. K těmto základním informacím lze přidat mnohé další, nicméně
všechny výše uvedené informace jsou nezbytné a má-li být projekt úspěšný, neobejde se bez
jejich jasného vymezení.
3.1
Občanské sdružení signály.cz, o. s.
Přivést Krista blíž k moderním mladým lidem.
—motto signály.cz, o.s.
Občanské sdružení signály.cz, o. s., je neziskové sdružení, jehož hlavní činností je provozování webu www.signaly.cz. Hybnou silou sdružení je realizační tým složený ze 7 lidí,
který koordinuje spolupráci více než 100 dobrovolníků z celé republiky. Sdružení má vlastní
kancelář v centru města Brna.
Web www.signaly.cz je dlouhodobě známý mezi křest’anskou (zejména katolickou) mládeží po celé České republice. Jedná se o otevřený komunitní systém primárně zaměřený
na podporu setkávání mladých věřících lidí v reálném světě na akcích, které nejsou zaměřeny pouze na zábavu. Mezi hlavní služby webu patří nástěnka akcí, systém blogů, posílání
vzkazů, sdílení fotek a sdružování se do skupin [12].
První verze webu byla spuštěna již v roce 2001 jako reakce na poptávku po místě, které
by sloužilo jako přehled akcí pro mládež pořádaných jednotlivými organizacemi v Římskokatolické církvi. Během let se web postupně rozrůstal a v roce 2007 byl transformován do
podoby komunitního systému.
3.2
Současný stav webu
Od září 2009 zaznamenal web mírný pokles návštěvnosti (a to i přes vzrůstající počet registrovaných uživatelů). Dosavadní provoz webu (od jeho nového spuštění v roce 2007) byl
4
3.3. CÍL SDRUŽENÍ: NOVÁ VERZE WEBU
úspěšný. Pro své další fungování si však vyžaduje provedení patřičných změn.
•
Web trpí nedomyšleným uživatelským rozhraním. Uživatelé si stěžují na nepohodlnou práci se systémem posílání vzkazů, nahrávání fotografií nebo psaní blogových
příspěvků. Úvodní stránka nereflektuje záměr webu a samotné prohlížení webu je nepřívětivé (obsahem jsou často jen dlouhé seznamy odkazů).
•
Stav kódu systému nedovoluje nasazení nových funkcí, které uživatelé vyžadují. Jedná
se např. o komentování fotografií, možnost nastavení vyšší ochrany soukromí nebo
jednodušší sdílení obsahu. Uživatelé by současně uvítali propojení s ostatními webovými službami (např. Twitter nebo Google Calendar) a sociální sítí Facebook.
Obrázek 3.1: Současný stav www.signaly.cz: vlevo hlavní strana, vpravo nástěnka akcí.
Další požadavky a omezení ze strany sdružení včetně technické specifikace nové verze
webu podrobně popsal Bc. Jan Šedo1 ve své bakalářské 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 českém Internetu prostřednictvím nové verze webu.
Udržet web zajímavým pro současné mladé věřící, aby se i nadále jeho prostřednictvím rádi
sdružovali a sdíleli žití svého křest’anství i běžného života.
3.4
Cílová skupina webu
Cílovou skupinu webu tvoří mladí křest’ané ve věku 15-27 let, zejména studenti středních a
vysokých škol.
1. Bc. Jan Šedo je v současnosti koordinátorem sdružení signály.cz, o. s.
5
3.5. MOJE ROLE P ŘI VÝVOJI NOVÉ VERZE WEBU
3.5
Moje role při vývoji nové verze webu
Na tvorbě webu www.signaly.cz se dlouhodobě podílím. Jako dobrovolný člen vývojového
týmu pracuji pro signály.cz, o. s., od podzimu 2007. Jsem aktivním uživatelem webu i členem
sdružení.
Mojí úlohou při realizaci nové verze webu bylo provést průzkum mezi uživateli a odhalit
příčiny poklesu návštěvnosti a všeobecného zájmu o web. Poté navrhnout nové GUI, které
napomůže vyřešení současných problémů webu.
6
Kapitola 4
Analýza webu a potřeb uživatelů
Once the problem was stated, its solution came to me in a flash.
—Anton Fokker
Dobrý návrh uživatelského rozhraní předpokládá nejen znalost technologie, s níž se pracuje, ale především pochopení lidí, pro které je rozhraní navrhováno. Sotva by bylo možné
správně navrhnout sluneční brýle v případě, že bychom neznali tvar lidské hlavy ani rysy
obličeje. Dobrý designér nejen zná potřeby, zvyky, zkušenosti a schopnosti uživatelů, ale
umí je také prezentovat ve vhodné formě.
Analýza webu a potřeb uživatelů spadá do oblasti uživatelského průzkumu. Provedený
ve větším či menším rozsahu, v závislosti na dostupných prostředcích a složitosti zkoumané
problematiky, poskytuje průzkum relevantní informace o stávajících i potenciálních uživatelích. Jedná se o aplikovaný interdisciplinární obor spojující metodologie sociálních věd,
znalosti kognitivní psychologie, interakčního designu a informačních technologií vůbec.
Vyšel jsem z potřeby pochopit aktuální stav webu a provedl jsem dva druhy uživatelského průzkumu (tak, jak jej aplikuje interakční design): kvalitativní a kvantitativní průzkum [5].
4.1
Kvalitativní průzkum
Kvalitativní průzkum se zabývá zkoumáním jednotlivých subjektů. Snaží se o získání podrobných informací na malém vzorku uživatelů. Jde do hloubky, všímá si individuálních
zvláštností. Zkoumá subjekty při interakci s jejich přirozeným prostředím. Nevýhodou je
především časová náročnost a riziko neadekvátního provedení, protože instrumentem je
sám výzkumník.
Rozhovor a pozorování jsou základní techniky kvalitativního průzkumu. Jejich složením
a následnou úpravou pak vznikají další metody [20] [2].
Vzhledem k dostupným prostředkům a neformálnosti zkoumaného prostředí jsem považoval za vhodné použít níže popsané techniky.
4.1.1 Rozhovory se členy realizačního týmu
K dispozici jsem měl hlavního koordinátora a členy realizačního týmu sdružení. Mým cílem
bylo pochopit jejich vize a proniknout hlouběji do fungování webu. Zjistit, do jaké míry je
7
4.1. KVALITATIVNÍ PR ŮZKUM
možné přizpůsobit stávající web, aby i nadále zůstal pro uživatele přínosný.
Provedené rozhovory se různily délkou a zaměřením. Při delších úvodních interview
(v řádu desítek minut) jsem se snažil o získání celkového nadhledu. Kratší rozhovory (v řádu
minut) byly zaměřeny na konkrétní problém a využity i posléze během návrhu GUI.
Přípravu k rozhovorům jsem neformalizoval. Vždy jsem si pouze ujasnil problém, o jehož vyřešení se jednalo. Získané poznatky jsem zachycoval ve formě komentovaných skic
(obrázky A.8 a A.9), případně pak jako strukturované poznámky.
Obrázek 4.1: Fotografie z rozhovoru. Cílem bylo pochopit cílovou skupinu webu a jeho typické uživatele. Zachyceno formou profilů uživatelů.
4.1.2 Etnografické rozhovory s uživateli
Kombinace řízeného rozhovoru a souběžného nenápadného pozorování se označuje jako
tzv. etnografický rozhovor. Jedná se o nejefektivnější techniku analýzy potřeb uživatelů
vůbec. Výzkumník pozoruje subjekt v přirozeném prostředí. Získává o něm poměrně relevantní informace. Faktorem výrazně ovliňujícím úspěšnost rozhovoru je vztah mezi výzkumníkem a zkoumaným subjektem [5].
Podle předem vytipovaných otázek jsem se snažil získat (v řádu minut) názor uživatele
na daný problém. Například:
•
jak uživatel používá posílání vzkazů a co mu na této funkci vadí,
•
jaké webové služby uživatel používá ke sdílení fotek a proč k tomuto nepoužívá web
www.signaly.cz.
Utříděné informace jsem zachycoval opět formou komentovaných skic (obrázek A.11) nových obrazovek.
8
4.1. KVALITATIVNÍ PR ŮZKUM
4.1.3 Analýza požadavků uživatelů
Dobrým zdrojem informací mi byla Hodnotící anketa pro vyhodnocení dvou let provozu
webu. Sběr dat jejím prostřednictvím provedlo sdružení v srpnu 2009. Přes 375 respondentů
hodnotilo dosavadní web prostřednictvím multiple-choice dotazníku. Otázky a souhrnné
výsledky ankety přikládám (příloha B).
Obrázek 4.2: Příklad otázky z dotazníku.
Za dobu provozu webu přišlo i od samotných uživatelů mnoho požadavků, stížností a
hodnocení fungování webu. Jako další zdroj informací mi proto sloužily rozsáhlá diskuzní
vlákna přímo na webu: diskuzní témata Našel jsem chybu, nefunguje mi; Nevím si rady, jak
udělám, aby...? a Navrhuji vylepšení.
Závěry vyplývající z těchto zdrojů 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, informační architektura, kvalita a relevance obsahu atd.).
•
Primárně jsem aplikoval heuristiky použitelnosti Jakoba Nielsena. Tyto heuristiky jsou
jakási doporučení založená na zkušenostech [13]. GUI vyhovující Nielsenovým heuristikám předchází chybám, umožnuje efektivní ovládání, je ergonomické, dbá na konzistenci, aplikuje návrhové vzory, je návodné a samovysvětlující. Vyznačuje se minimalistickým a estetickým designem, pracuje se stavem systému, zpětnou vazbou apod.
•
Sekundárně jsem srovnával rozhraní webu vůči scénářům. Scénáře jsou popisy skutečných situací, vzniklých při používání systému. Pomáhají odhalit úzká místa v použitelnosti GUI webu. Příklad scénáře: „Jana se po 14denní dovolené přihlásila na web.
Přišlo jí několik vzkazů, které si prohlédla, ale už nemá čas na ně odpovědět. Ráda by
proto bud’ ponechala vzkazy jako nepřečtené nebo si je nějak jinak označila.“
Scénáře jsem vzhledem k časové náročnosti neformalizoval. Analýzu jsem prováděl ad-hoc
a výsledky jsem zachycoval formou strukturovaných poznámek.
9
4.2. KVANTITATIVNÍ PR ŮZKUM
4.2
Kvantitativní průzkum
Protipólem kvalitativního průzkumu je průzkum kvantitativní. Slouží k ověřování hypotéz
(vytvořených během kvalitativního průzkumu) a formulaci obecných poznatků na základě
informací získaných prostřednictvím hromadného sběru. Jeho techniky spočívají v získávání statistických informací o velkém vzorku uživatelů.
Kvantitatvní průzkum jsem založil na datech dostupných za více než dva a půl roku
provozu serveru. Hlavními zdroji byla data o samotných uživatelích uložená v databázi
webu a statistické informace o návštěvnosti webu z nástroje Google Analytics.
4.2.1 Neúspěšně zaregistrovaní uživatelé
Web má v současnosti cca 20 tisíc registrovaných uživatelů. Alarmující je číslo neúspěšných
pokusů o registraci. Jedná se o více než 7 tisíc potenciálních uživatelů.
4.2.2 Autorizovaní uživatelé
Web nabízí uživatelům tzv. autorizaci. Jedná se o proces ověření, zda je s účtem na webu
spojena konkrétní osoba. Při autorizaci je ověřena profilová fotografie uživatele, jeho pohlaví, jméno a věk. Jakékoliv změny těchto údajů (zejména fotografie) pak musí schválit
pověřený administrátor.
Autorizace uživatelů má za úkol posílit bezpečnost webu. Současně přispívá ke zvýšení
důvěryhodnosti uživatelů a určitým způsobem je zvýhodňuje (např. ve hlavním přehledu
blogových příspěvků se zobrazují pouze příspěvky autorizovaných uživatelů).
V současnosti je autorizováno již přes 5 tis. uživatelů, tedy asi čtvrtina všech uživatelů.
4.2.3 Věk uživatelů
Z údajů o autorizovaných uživatelích víme, že 84 % z nich je ve věku 15-27 let. Celkem 64
% neautorizovaných uživatelů se pak nachází v témže věku. Z toho lze soudit, že zhruba tři
čtvrtiny uživatelů spadají do primární cílové skupiny webu.
4.2.4 Návštěvnost webu a aktivita uživatelů
Každý týden navštíví www.signaly.cz celkem 20 tis. uživatelů. Z toho se pouze pětina návštěvníků přihlašuje, aktivně využívá služby webu a tvoří vlastní obsah.
Za měsíc se tak ke svému účtu přihlásí celkem třetina všech registrovaných uživatelů.
Do půl roku se pak postupně přihlásí další třetina všech registrovaných. Poslední třetina
uživatelů je neaktivní (tj. na web se přihlásili pouze jednou nebo dvakrát za dobu existence
jejich účtu).
10
4.3. SHRNUTÍ AKTUÁLNÍHO STAVU WEBU
600
500
400
300
200
100
0
2
13
15
19
21
25
27
31
33
38
40
44
46
50
52
58
64
72
Obrázek 4.3: Věkové rozložení autorizovaných uživatelů www.signaly.cz.
4.2.5 Neaktivní uživatelé
Z celkového počtu uživatelů je více než třetina uživatelů neaktivních.
4.3
Shrnutí aktuálního stavu webu
Provedení úvodní analýzy1 mi tedy umožnilo pochopit stav projektu a příčinny jeho současných problémů.
4.3.1 Pozitiva webu
•
Težiště webu leží v jeho vlastním obsahu. Zde nemá web v prostředí českého Internetu konkurenci. Uživatele zajímá nejvíce nástěnka akcí a redakcí vybírané blogové
příspěvky nejen na duchovní témata.
•
Webu se daří naplňovat své zaměření na konkrétní cílovou skupinu. Aktivní komunita je ze 3/4 složena z mládeže ve věku 15-18 let. Další relevantní společný atribut
uživatelů je křest’anství.
•
Uživatelé využívají web pro udržení kontaktu s věřícími přáteli. Využívají sledování
aktivity přátel prostřednictvím služby Co se děje. Pro část uživatelů je web významným prostředkem ke sledování dění v křest’anském světě.
•
Za dobu fungování webu se povedlo úspěšně zavést2 autorizační systém. Sami uživatelé autorizaci aktivně vyhledávají.
1. Rozhodl jsem se nepoužít žádný formální uživatelský model [5] s ohledem na skutečnost, že všechna důležitá fakta o uživatelích, jejich chování, motivacích a cílech jsem shrnul v textu této kapitoly.
2. Napříč Českou republikou funguje tým více než 130 autorizátorů, kteří mají právo autorizaci provést.
11
4.3. SHRNUTÍ AKTUÁLNÍHO STAVU WEBU
4.3.2 Negativa webu
•
Uživatelům vadí nízká použitelnost některých částí webu (např. posílání vzkazů nebo
nahrávání fotografií).
•
Více než 7 tisíc pokusů o registraci nebylo nikdy dokončeno. Systém potvrzovacích
e-mailů je špatně navržen (krátká doba platnosti aktivačního odkazu), ochrana proti
překlepům při vyplňování registračního formuláře není dostatečná. Občas se projeví
technické problémy (např. nedoručení potvrzovacího e-mailu).
•
Třetina (cca 6 tisíc) uživatelských účtů je neaktivních. Problém lze vidět ve špatném
pochopení webu, ztrátě zájmu o web a nedostatečně podpořené motivaci k jeho používání. Na webu chybí jakékoliv úvodní obrazovky, průvodci nebo kontextová nápověda. Rozhraní webu není vyvážené: přihlášenému uživateli nepřináší výraznou
přidanou hodnotu (tudíž ho k přihlášení nemotivuje).
•
Uživatelé mají špatnou představu o službách webu (např. více než jedna třetina všech
založených blogů neobsahuje žádný příspěvek).
•
Část uživatelů neví, jakým způsobem je možné podpořit web (at’ už finančně nebo
jinak). Přes 25 % uživatelů neví, jak se aktivně zapojit do fungování webu.
•
Nedokonalý systém uživatelské podpory (ve formě diskuzních vláken) klade překážky při řešení problémů. Uživatelé neví např. jak zrušit blog nebo vlastní uživatelský účet, jak se nechat autorizovat apod.
•
Uživatelé by uvítali propojení webu s okolními webovými systémy (např. sociální
služby Facebook, Twitter, aplikace Google Calendar aj.).
•
Uživatelé by uvítali lepší možnosti nastavení zobrazení osobních údajů.
12
Kapitola 5
Návrh GUI webu
An indicator has a value when it’s indicating something. But if it’s not indicating
something, 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 interakčního designu. Poznatky o nich publikoval poprvé v roce 1943 skotský psycholog Kenneth Craik. Vysvětlil, že lidská mysl si
vytváří vlastní obraz reality, na jehož základě usuzuje, očekává události a vytváří si svá vysvětlení. Tento obraz reality se pak nazývá mentální model uživatele. V interakčním designu
se jedná o představu uživatele o tom, jak uživatelské rozhraní funguje [5] [24].
V kontrastu s mentálním modelem stojí model implementační. Jedná se o přesný popis
toho, jak věci fungují. V případě počítačového programu je to jeho zdrojový kód, v případě
televizoru jsou to např. technické výkresy přístroje a komplexní specifikace. Je zřejmé, že
pro pohodlné sledování televizních programů nepotřebujeme znát, jak televizor funguje.
Potřebujeme pouze vědět, jak přístoj efektivně ovládat. Potřebujeme dobrý zástupný model.
Obrázek 5.1: Vývoj uživatelských rozhraní resp. zástupných modelů.
Zástupný model je alternativní (a často zjednodušená) reprezentace implementačního
modelu. V praxi se jedná o uživatelské rozhraní, např. dálkový ovladač k televizoru nebo
GUI aplikace. Je mnohem snazší navrhnout zástupný model tak, aby byl podobný implementačnímu modelu. To se pak projevuje množstvím špatně navržených rozhraní a frustrací
uživatelů 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 tří částí: vzhled obrazovek,
jejich fungování a struktura webu.
5.3
Shrnutí požadavků na nový web a nové GUI
Nový web by měl lépe reflektovat důležitý obsah a reagovat na potřeby uživatelů i sdružení
samotného.
•
Nový web zachová služby stávajcího webu. Klíčovým obsahem webu je nástěnka akcí
a blogové příspěvky.
•
Nové GUI bude navrženo jak s důrazem na přihlášené uživatele (snadná tvorba obsahu a sledování přátel), tak na nepřihlášené uživatele (pasivní příjem obsahu).
•
Nové GUI odstraní nedostatky v použitelnosti a lépe web strukturuje. Bude vytvořena část webu informující uživatele o webu samém. Doplněni budou průvodci a nápověda, 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ými
systémy (např. 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é postupy
nelze přesně oddělit a vymezit. Designér se v iteracích vrací k návrhům obrazovek, srovnává
je, navzájem vyvažuje a upravuje jejich funkcionalitu tak, aby zapadly informační architektury webu.
V případě redesignu GUI webu www.signaly.cz jsem se zaměřil na návrh jednotlivých
obrazovek webu [1], promyšlení funkcionality a následně informační architektury webu.
Obrazovky jsem zachytil formou komentovaných skic (příp. drátěných modelů nebo
prototypů). Poté jsem navrhl finální vizuální podobu GUI a vytvořil z ní základ HTML/CSS/JS
frameworku pro vlastní tvorbu šablon GUI webu.
5.5
Techniky použité při návrhu GUI
Nejdůležitější technikou návrhu bylo skicování. Jedná se o efektivní nástroj – kreslení a psaní
rukou je pro člověka přirozené – umožňující rychlý a přesný návrh [20]. Skicy doplněné
14
5.5. TECHNIKY POUŽITÉ P ŘI NÁVRHU GUI
o anotace jsem konzultoval s koordinátorem sdružení a vznikaly i behěm uživatelského
průzkumu. Uchováváním všech vytvořených skic jsem je mohl snadno porovnávat mezi
s sebou a efektivně hledat správná řešení.
V některých případech jsem použil drátěné modely (wireframes) a prototypy1 (obrázek
A.7) vytvořené v počítači. Toto zpracování podává lepší představu o skutečných proporcích
prvků layoutu.
Prototypy i drátěné modely jsem vytvářel černobílé, aby nedošlo k záměně za finální grafiku webu. Při tvorbě drátěných modelů jsem vyzkoušel řadu softwarových nástrojů: Protoshare, Balsamiq Mockups, iPlotz, OmniGraffle. Prototypy jsem vytvářel v jazyce HTML
pomocí CSS frameworku Blueprint a kaskádových stylů (CSS). Tyto prototypy pak mohl
využít vývojový tým sdružení při implementaci prvních funkcí nového webu.
Obrázek 5.2: Ukázka drátěných modelů vytvořených v nástrojích Protoshare, Balsamiq Mockups a iPlotz.
Dále jsem při návrhu použil různé diagramy (obrázek A.3) [20] a myšlenkové mapy,
příp. ad-hoc analýzy konkurence [3].
Obrázek 5.3: Ukázka diagramu použitého při průzkumu implementačního modelu akcí.
1. Prototyp je skica doplněná o interaktivní prvky, simulující skutečné GUI.
15
5.6. MAPA WEBU
5.6
Mapa webu
Mapa webu popisuje informační architekturu webu: strukturu obsahu a vztahy mezi ním.
Má obvykle podobu grafu [3]. Mapa nového GUI www.signaly.cz popisuje strukturu webu:
pět hlavních obsahových sekcí, podružný obsah webu (registrace, přihlášení, profil uživatele aj.) a funkcionalitu dostupnou pouze přihlášenému uživateli. Obsahuje také seznamy
předpokládaných obrazovek webu.
vzkazy
SʼnLMDWp
QRYìY]NDW]
registrace
zapomenuté heslo
XçLYDWHOpVSROHĀHQVWYt
SURILOXçLYDWHOH
SURILOVSROHĀHQVWYt
QiVWėQNDVSROHĀHQVWYt
vyhledávání
chyba 404
chyba 503
XçLYDWHO
zapomenuté heslo
SʼnLKOiåHQt
schvalování fotek
DGPLQLVWUDĀQtOLåWD
úvodní strana
SʼnLKOiåHQìQHSʼnLKOiåHQì
VSROHĀHQVWYt
QiVWėQNDSURĀOHQ\
nastavení
základní informace
profilová fotografie
kontaktní údaje
Y]GėOiQtD]DPėVWQiQt
zájmy a záliby
úvodní strana
VOHGRYiQtDNWLYLW\SʼniWHO
profily
SʼniWHOp
ĀOHQVWYtYHVSROHĀHQVWYt
registrace
Y]ND]\
vyhledávání
QDVWDYHQt
infocentrum
SʼnLKOiåHQìXçLYDWHO
WWW.SIGNALY.CZ
VOHGRYiQtREVDKXSʼniWHOYNDçGp]HVHNFt
Akce
NDPMHGRXSʼniWHOp
Blogy
FRStåRXSʼniWHOp
SURILODNFH
druhy
kvalitní
akce
Akce
SʼnHKOHGDNFt
profil akce
archiv
Y\WYRʼnHQt~SUDYDDNFH
Fotky
QRYpIRWN\SʼniWHO
SʼntVSėYHN
EORJ
QHMQRYėMåt
SʼntVSėYN\
UHGDNĀQt
blogy
Blogy
SʼnHKOHGEORJś
SʼnHKOHGSURSʼnLKOiåHQpKR
archiv
HGLWDĀQtQiVWURM
Videa
QRYiYLGHDSʼniWHO
IRWND
IRWRDOEXP
kvalitní
blogy
QHMQRYėMåt
kvalitní
Fotky
SʼnHKOHGIRWHN
SʼnHKOHGSURSʼnLKOiåHQpKR
fotoalbum, fotka
nahrávání fotek
editace (fotoalbum, fotka)
Odkazy
QRYpRGND]\SʼniWHO
RGND]QDYLGHR
QHMQRYėMåt
kvalitní
Videa
SʼnHKOHGYLGHt
SʼnHKOHGSURSʼnLKOiåHQpKR
archiv
RGND]
QHMQRYėMåt
kvalitní
Odkazy
SʼnHKOHGRGND]ś
SʼnHKOHGSURSʼnLKOiåHQpKR
archiv
Obrázek 5.4: Mapa webu www.signaly.cz.
16
Kapitola 6
Popis návrhu vybraných obrazovek
6.1
Nástěnka akcí
Nástěnka akcí slouží jako přehled akcí, které se konají (nejen) v křest’anském prostředí po
celé České republice.
Cílem návrhu bylo identifikovat důležité atributy jednotlivých akcí a tomu přizpůsobit
jejich výpis. Při konzultaci s koordinátorem jsem vytvořil diagram akcí (obrázek 5.3). Ten
zachycuje strukturu akcí a jejich relevantní atributy: délku trvání, místo konání, typ akce,
hodnocení akce, počet a druh účastníků. Diagram sloužil jako podklad pro úvahy1 , skicování a ad-hoc testování nové podoby obrazovky.
Obrázek 6.1: Vlevo skica nástěnky akcí, vpravo výsledný layout.
V současnosti je přehled akcí pouhým seznamem (obrázek A.2). Navrhl jsem proto jako
1. Příklad úvahy: akce je možné rozdělit podle délky konání na jednodenní, vícedenní a víkendové. Při pozorování uživatelů jsem však zjistil, že téměř nikdo nehledá akci podle tohoto kritéria. Uživatelé větš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žňující pohodlné „skenování“ obsahu [21]. Přidal jsem pomůcky (vizuální záchytné body) jako např. zobrazení délky trvání akce (je-li vícedenní), zobrazení dne v týdnu,
kdy akce začíná nebo zda ji redakce doporučuje.
Akce jsem rozdělil do kategorií. Doplnil jsem možnost zobrazení míst konání akcí na
mapě. Mapa po přiblížení zobrazí jednotlivé akce. K dispozici je přepínač řazení akcí podle
času/místa. Místo mapy lze zobrazit kalendář a dostat se tak ke starším akcím. Přihlášený
uživatel v přehledu akcí vidí, na které akce se chystají jeho přátelé.
Všechny tyto úpravy mají za cíl uživateli usnadnit a urychlit výběr akce.
6.2
Profil akce
Profil akce prezentuje základní informace o akci. Má za cíl uživatele motivovat k účasti
na akci. Soustředil jsem se proto na oddělení oficiálních informací o akci od obsahu připojeného uživateli. Návrh prošel řadou iterací, během kterých jsem vyzkoušel různé uspořádání
prvků (obrázek A.6) na obrazovce.
Do horní2 části obrazovky jsem nakonec umístil název, datum, místo konání a popis akce.
Představu o místě konání akce podává náhled mapy ČR, který je současně odkazem na větší
mapu. Jako důležité kritérium při rozhodování o účasti na akci se (po rozhovorech s uživateli) ukázala informace o účastnících akce. Proto jsem umístil seznam účastníků umístěn do
stejné úrovně, jako oficiální informace o akci.
Obrázek 6.2: Vlevo prvotní drátěný model profilu akce, vpravo výsledný layout.
Ve spodní části stránky se pak nachází obsah tvořený uživateli: fotky, videa, odkazy a
2. Studie ukazují, že pozornost uživatelů je největší právě při prohlížení této oblasti [19].
18
6.3. FORMULÁ Ř PRO P ŘIDÁNÍ NOVÉ AKCE
komentáře k akci. Je tak zamezeno záměně za oficiální informace o akci. Škálování tohoto
obsahu je zajištěno možností jeho výpisem v modálním okně.
6.3
Formulář pro přidání nové akce
Po vytvoření množství skic (obrázek A.5) a úvah jsem navrhl jednokrokový rozbalovací
formulář.
Obsahuje pouze několik vstupů, aby zdánlivá mohutnost neodradila uživatele od používání. Tento přístup následuje Teslerovo pravidlo o komplexnosti uživatelských rozhraní
(nepožadovat po uživatelích více interakce, než je nezbytně nutné) [20].
Pokročilé funkce jsou uživateli nadále k dispozici. Zadávání data usnadňuje kalendář,
pro přesné zadání místa se v případě potřeby objeví mapa.
Obrázek 6.3: Vlevo formulář pro přidání nové akce, vpravo zobrazený včetně dalších (primárně skrytých) funkcí.
6.4
Úvodní strana
Úvodní strana je nejnavštěvovanější obrazovkou webu. Informuje o hlavních službách a
jeho obsahu. Podává představu o webu jako celku.
Stávající úvodní strana je vizuálně i obsahově nevyvážená. Atraktivní obsah je špatně
umístěn a strukturován: redakční sloupek má nejasný název Z jedné ~ vlny3 a rozsah tipů na
3. Motto webu www.signaly.cz zní: „Na jedné ~ vlně.“
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 rozdělil na 3 části. V souladu s analýzou potřeb uživatelů jsem dal
hlavní prostor vybraným blogovým příspěvkům, tipům na akce a redakčnímu sloupku.
K narušení linearity a nastavení jasných vizuálních priorit jsem použil místy větší písmo,
perexy článků a reklamní proužky (sloužící at’ už komerčním partnerům webu nebo jeho
vlastním projektům). Tyto prvky současně slouží jako tzv. call-to-action elementy [4].
Do spodní části jsem umístil pruh, který obsahuje chronologicky řazené informace o novém obsahu na webu. K této funkci jsem navrhl zřízení skupiny redaktorů. Tito editoři budou sami vybírat kvalitníh obsah, který smí být na úvodní straně zobrazen.
Na začátek stránky jsem přidal úvodní text o webu www.signaly.cz, odkazy vedoucí
k registraci a informacím o webu samém. Cílem je snížit počet nedokončených registrací,
neaktivních uživatelů a zvýšit povědomí o záměru webu.
Návrh stránky jsem provedl pomocí ručních skic a následně dokončil jako HTML/CSS/JS
šablonu.
20
6.5. ÚVODNÍ STRANA (P ŘIHLÁŠENÝ UŽIVATEL)
6.5
Úvodní strana (přihlášený uživatel)
V současné době má přihlášený uživatel k dispozici stránku Moje signály.cz, která mu slouží
jako rozcestník po přihlášení. V praxi to však znamená nutnost sledovat 2 úvodní stránky
(pro přihlášeného a nepřihlášeného). Tento koncept je neúčelný a matoucí.
Sloučil jsem proto stránku Moje signály.cz a úvodní stranu v jedinou tak, aby na ní přihlášený uživatel viděl vše, co potřebuje. Obsah úvodní strany zůstává, je přesunut do pravé
části a vizuálně potlačen.
Nejdůležitější místo zaujímá chronologicky řazený přehled aktivity přátel. Tato služba
(známá nyní pod názvem Co se děje) je mezi uživateli velmi oblíbená i přes nesporné chyby
v použitelnosti současného zpracování.
Obrázek 6.5: Skica úvodní strany přihlášeného uživatele.
Původní redakční obsah stránky Moje signály.cz, tj. Slovo na den a Událost dne jsem
po konzultaci s koordinátorem projektu odstranil, ve způsobu jeho další propagace zatím
sdružení nemá jasno. Sledované blogy a diskuze jsem přesunul do přehledu aktivity přátel. Odstranil jsem tím nutnost sledovat několik míst4 na obrazovce a usnadnil sledování
novinek na webu.
4. Zaznamenal jsem námitky uživatelů proti sloučení aktivity přátel a sledovaného obsahu. Uživatelské testování však potvrdilo přínos tohoto rozhodnutí, zejména při častém používání webu. Možnost sledovat obsah
webu odděleně přitom stále zůstává: prostřednictvím vhodně upravených hlavních sekcí webu.
21
6.6. DALŠÍ OBRAZOVKY
6.6
Další obrazovky
Ukázky dalších obrazovek jsem ponechal součástí obrazové přílohy (příloha A).
22
Kapitola 7
Zasazení obrazovek do kontextu webu
Při návrhu GUI je vhodné hledat funkčně podobné prvky GUI. Sjednocením vzhledu takových prvků vznikají opakující se části GUI, které již uživatel zná. Pomáhají tím snižovat
kognitivní zatížení uživatelů [32]. Usnadňují také vývoj a umožňují určitou míru znovupoužitelnosti – jak na úrovni kódu systému, tak na úrovni šablon nebo vizuální podoby [17].
Několik takových prvků jsem proto vybral a popsal jejich začlenění do GUI webu.
7.1
Záhlaví a navigace na webu
Plnobarevný pruh záhlaví obsahuje logo, hlavní navigaci a vyhledávání. Konzistentní navigace (stejně jako např. obsah v knize) ukazuje na hlavní obsah webu. Podává informaci
o tom, kde jsem a kam mohu pokračovat [15].
Do pravého horního rohu (v souladu se zažitým návrhovým vzorem [8]) jsem umístil
vyhledávání, které je na stávajícím webu potlačeno (nachází se pouze na úvodní straně a
stránce Moje signály.cz).
Obrázek 7.1: Záhlaví webu.
7.2
Zápatí webu
V případě nekterých webů se jedná o zbytečně nevyužitou část obrazovky. Šel jsem opačnou
cestou a vytvořil zápatí podobné mapě webu [10]. Díky tomu je mapa k dispozici na každé
stránce webu pro případ, že je uživatel zmaten a hledá pomoc1 .
1. Praxe ukazuje, že se tomu tak děje [26].
23
7.3. ADMINISTRA ČNÍ LIŠTA
Obrázek 7.2: Zápatí webu.
7.3
Administrační lišta
Administrační lišta (obrázky A.8 a A.9) slouží ke administrátorům ke správě obsahu webu.
Její obsah se mění tak, aby se vztahoval k právě prohlížené stránce. Např. na profilu akce
může správce pomocí lišty schválit zobrazování akce na nástěnce akcí, označit ji jako doporučovanou nebo (v případě zamítnutí) poslat autorovi akce komentář.
Lišta svým umístěním nenarušuje layout obrazovek a po skrytí správci umožnuje vidět
web tak, jak ho vidí jako běžní uživatelé.
7.4
Kontextové funkce
V průběhu návrhu jednolivých obrazovek vyšlo najevo, že prakticky na každé stránce se
vyskytuje nějaká funkce, vztahující se k dané stránce. Jedná se např. o možnost poslat vzkaz
uživateli (na profilu uživatele), vytvořit novou akci (v přehledu akcí) nebo upravit vlastní
fotoalbum při jeho zobrazení.
Inspirován řešením podobného problému na Facebooku jsem rezervoval prostor pravého horního rohu pro ovládací tlačítka. Po navržení asi tuctu obrazovek jsem dospěl k závěru, že při dostatečně promyšleném návrhu se na každé obrazovce mohou objevit nejvýše
dvě podobná tlačítka. Pakliže tlačítka potřeba nejsou, vzniká tzv. bílé místo [28].
Obrázek 7.3: Ukázka prostoru pro tlačítka.
7.5
Úvodní obrazovky a průvodci
Úvodní obrazovky ukazují novým uživatelům obsah a služby webu. Dobře navržený průvodce pro tzv. prázdný stav systému pomáhá uživateli při orientaci v dosud neznámém
prostředí [1]. Průvodce se po několika zobrazních sám skryje, aby nedocházelo k obtěžování středně pokročilých uživatelů informacemi pro začátečníky [5].
24
7.5. ÚVODNÍ OBRAZOVKY A PR ŮVODCI
Navrhul jsem také implementaci systému tzv. „připomínacích funkcí“. Např. opětovné
odeslání potvrzovacího e-mailu po uplynutí časového úseku od registrace nebo průběžné
posílání vzkazů 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živatelům
a motivuje k používání webu.
Obrázek 7.4: Ukázka průvodce.
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 is
still a pig.
—Lipstick on a pig
Vizuální styl webu www.signaly.cz vychází z jednotného vizuálního stylu sdružení. Využívá plných barevných ploch, modré a zelené barvy a mnoha ilustrací, které se vizuální
stylizací blíží komiksu. Základem řady vizuálních prvků stylu je komiksová bublina, vycházející z loga sdružení1 . Bublina symbolizuje komunikaci jak mezi lidmi navzájem, tak
mezi lidmi a Bohem. Nepřehlédnutelným prvkem stylu je „smajlík“, stylizovaná podoba
obličeje člověka. Vizuální styl sdružení se snaží vyjádřit mládí a radost ze života ve víře.
3URVLQHF
3RXħGıYÝU\
na zemi
31
%ORJRPRGOLWE£FK
taize.signaly.cz
ZZZVLJQDO\F]SRXWGXYHU\SR]QDQ
)RWN\]H'QıGıYÝU\Y%UQÝ
6SROHÏHQVWY¯7DL]«
ZZZVLJQDO\F]GQ\GXYHU\EUQR
www.signaly.cz/taize
'LVNX]Q¯
W«PD7DL]«
www.signaly.cz/diskuze/taize
Obrázek 8.1: Ukázka jednotného vizuálního stylu sdružení: propagační leták. Další ukázky
jsou součástí obrazové přílohy.
Jednotný vizuální styl sdružení byl vřele přijat většinou uživatelů webu. Postupné zavedení a vytvoření tohoto komplexního systému vyžadovalo moji soustavnou práci od března
1. Logo sdružení navrhl v roce 2007 designér Marián Brchaň.
26
8.1. VIZUÁLNÍ STYL WEBU
2009. V současné době je web posledním místem, kde nebyl jednotný vizuální styl sdružení
výrazněji aplikován.
8.1
Vizuální styl webu
Design není dekorace. Vizuální podoba webu by měla podporovat jeho obsah. Vizuální styl
sdružení jsem proto vhodně aplikoval na GUI webu. Využil jsem především sílu barev a
typografie. Podpořil jsem tím přesvědčivost a použitelnost webu, který s uživateli komunikuje prostřednictví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á mřížka
Mřízka je nástroj sloužící k organizaci množství informací v ploše. Tvoří se na míru danému projektu. Vhodně nastavená mřížka usnadňuje rozmist’ování vekého množství obsahu v ploše. Vnáší do návrhu řád a vizuální rytmus [11].
Navrhl jsem modulární typografickou mřížku se 14 sloupci. Šířka sloupce je 50 pixelů,
mezera mezi sloupci je 20 pixelů. Rozměry jsem zvolil s ohledem na umístění standardního reklamího proužku [29] tak, aby zabíral na šířku místo přesně 2 sloupců, tj. 120 pixelů.
Dvanáct sloupců pro obsah lze díky jejich vhodnému počtu libovolně rozdělit na poloviny,
třetiny, nebo čtvrtiny a layout se tak stává vysoce flexibilním.
Layout webu nepřesáhne šířku 960 pixelů. Vejde se tudíž na monitor jak starších osobních počítačů, tak na současná mobilní zařízení.
Obrázek 8.3: Typografická mříž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 malých mobilních zařízení. Na webu ho používám pro nadpisy příp. call-to-action prvky. Jako
chlebové písmo3 pak používám bezserifový Arial.
Protože nejdůležitější obsah webu je textový [27] (blogové příspěvky, informace o akcích), věnoval 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 označuje základní řez písma určený pro běžnou sazbu [25].
28
8.1. VIZUÁLNÍ STYL WEBU
8.1.3 Barvy
Kromě černé a jejich odstínů využívá vizuální styl sdružení dvě další barvy: modrou a zelenou. Stejné barvy jsem použil pro GUI webu.
Modrá barva je primární. Na webu je použita především jako barva odkazů. Zelená
barva je doplňková. Používám ji na odlišení tlačítek, právě aktivních prkvů a dalších tzv.
call-to-action prvků [4]. Díky omezenému používání této barvy je snadné upoutat na zelený
prvek pozornost.
Celkové barevné pojetí webu je střídmé, což umožňuje dobré jasné vyznačování např.
informačních a chybových hlášení systému pomocí jiných barev (červená, žlutá).
8.1.4 Ikony
Použití ikon zvyšuje návodnost GUI a usnadňuje orinetaci na webu. Způsob a míra stylizace
ikon (v rámci jedné sady ikon) musí být stejná a v souladu s vizuálním stylem GUI.
Při návrhu ikon jsem vyšel z ilustrací, které doplňují jednotný vizuální styl sdružení.
Zjednodušením a úpravou některých z nich jsem vytvořil sadu ikon, které nové GUI vhodně
doplňují.
Abc
28
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 formě HTML/CSS/JS šablon. Pro kód GUI webu používám značkovací jazyk HTML doplněný o mikroformáty. K vizuálnímu formátování webu
používám kaskádové styly (CSS). Interaktivitu zajišt’uji skriptovacím jazykem JavaScript a
javascriptovým frameworkem jQuery1 .
Mým cílem bylo vytvořit základ CSS frameworku2 , který usnadní tvorbu množství šablon. Díky frameworku lze efektivně psát kód srozumitelný, udržovatelný a škálovatelný.
V následujících odstavcích popisuji přístup k tvorbě frameworku, nejzajímavější problémy
psaní moderních HTML/CSS/JS šablon a jejich řešení.
9.1
HTML5 a mikroformáty
Specifikace značkovacího jazyka HTML je v nové verzi známa jako HTML5. Zavádí nové
sémantické značky, zabývá se API, fungováním aplikací offline aj. Ačkoliv je specifikace
velmi rozsáhlá (její úplná implementace se očekává až v roce 2022), má smysl HTML5 začít
používat již dnes: zpětná kompatitbilita je zajištěna, moderní internetové prohlížeče ve stále
větší míře HTML5 implementují a podporují tak využití nových funkcí [14].
Mikroformáty jsou sady tříd, kterými lze označit HTML elementy a explicitně tak vyjádřit, jaký obsah daný prvek nese [30]. Takto označená data umožňují snadnější strojové
zpracování. Mikroformáty jsou prvním výrazněji používaným krokem k dosažení sémantického webu [22].
9.2
CSS 3
V kaskádových stylech využívám některé vlastnosti ze vznikající specifikace CSS verze 3. Ta
obsahuje celkem 41 modulů a část z nich již dnešní prohlížeče podporují. Web zobrazený ve
starším prohlížeči (např. Internet Explorer 6) je stále plně funkční, uživatel je pouze ochuzen
o část vizuálních detailů/efektů (kulaté rohy, stíny aj.) [7].
1. jQuery <http://www.jquery.com>
2. Framework je softwarová struktura, sloužící jako podpora při vývoji a organizaci softwarových projektů
[31]. Současné 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é jsou
motivováni k používání moderních prohlížečů.
9.3
Písma na webu
Při formátování webu kaskádovými styly je výběr dostupných písem omezený. Je možné
použít vlastní písmo pomocí @font-face – nativní konstrukce kaskádových stylů verze 3,
kterou dnes již podporuje většina moderních prohlížečů. Komplikace při použití @font-face
spočívají v licenčních omezeních a nečitelnosti písma při absenci anti-aliasingu (v případě
písem neupravených pro použití na obrazovce). Ještě před rozšířením @font-face vznikly
některé alternativní nástroje (např. sIFR, Cufón nebo Typeface.js), které umožňují použití
vlastních písem a současně netrpí problémy s vyhlazováním písma. Jejich nasazení však
vyžaduje další podpůrné technologie (JavaScript nebo Flash) [9].
Díky rostoucí podpoře @font-face napříč prohlížeči jsem rozhodl pro tuto možnost. Řešení je efektivní, dopředně kompatibilní a není závislé na podpůrných technologiích. Písmo
Droid Sans je současně navrženo pro použití na obrazovce a licencováno i pro použití na
webu.
9.4
Architektura CSS souborů
Zajímavou problematikou tvorby šablon GUI webu je organizace souborů a návrh systému
tříd a identifikátorů tak, aby byl kód udržovatelný a snadno rozšiřitelný [6] [18] [16].
Inspirován výše zmíněnými technikami a vlastní praxí jsem kaskádové styly rozdělil do
tří souborů. V souboru basic.css nastavuji vzhled všech základních HTML elementů. Soubor 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é šabloně
se nacházejí.
Jednotlivé šablony je možné kombinovat. Samotné komponenty označuji pomocí tříd
nebo jejich kombinací. Plochá struktura komponent umožňuje výhradní použití identifikátorů při označování unikátních prvků co se obsahu týče.
Jako formát pro komentáře jsem použil systém CSSDOC3 . Syntaxe je podobná známénu
systému JavaDoc4 .
9.5
Flexibilní kód
Stejně jako při programování, je možné při používání kaskádových stylů dosáhnout výsledku více způsoby. Neexistuje žádná univerzálně 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 třeba pamatovat na změny, které mohou nastat (např. text bude delší, místo
jednoho odstavce textu bude třeba použít dva, uživatel si zvětší písmo, prohlížeč nebude
mít zapnutý JavaScript aj.). Držel jsem se proto rad a doporučení odborníků [23] a snažil se
o flexibilní a „neprůstřelný“ kód.
32
Kapitola 10
Závěr
Ve své bakalářské práci jsem navrh GUI nové verze webu www.signaly.cz. Následně jsem
napsal základ HTML/CSS/JS frameworku určeného pro tvorbu šablon webu.
Nalezení optimálního řešení vyžadovalo pochopení mnoha disciplín, principů a zákonitostí týkajících se nejen designu nebo psaní HTML dokumentů. Během tvorby jsem si
osvojil pokročilé metody vedoucí k návrhu webu, který není postaven pouze na odhadech
a domněnkách, nýbrž je podložen skutečnými potřebami a chováním uživatelů. Seznámil
jsem se s řadou technik a nástrojů, které pomáhají zvýšit kvalitu, přesvědčivost a celkový
dojem z finálního webu.
Dokončením této práce jsem položil stabilní základ GUI nové verze webu www.signaly.cz.
Nyní bude následovat vytvoření šablon jednotlivých obrazovek a nasazení GUI, ve spolupráci se členy vývojového týmu sdružení.
Věřím, že hodnota mé práce bude zanedlouho plně využita při spuštění webu.
33
Příloha A
Obrazová příloha
Obrázek A.1: Click stream analýza hlavní strany webu.
34
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.2: Původní nástěnka akcí.
35
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.3: Návrh struktury webu.
36
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.4: Drátěný model nástěnky akcí.
37
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.5: Skica části formuláře pro vytváření akcí.
38
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.6: Skica profilu akce.
39
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.7: Drátěný model profilu akce.
40
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.8: Návrh administrační lišty.
41
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.9: Návrh administrační lišty.
42
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.10: Návrh přehledu blogů.
43
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.11: Komentovaná skica archivu blogů.
44
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.12: Skica výsledku vyhledávání.
45
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.13: Dílčí návrh úvodní strany přihlášeného uživatele.
46
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.14: Drátěný model profilu uživatele.
47
A. O BRAZOVÁ P ŘÍLOHA
Obrázek A.15: Drátěný model vzkazů.
48
Příloha B
Hodnotící anketa pro vyhodnocení dvou let provozu webu
Podrobné výsledky ankety sdružení nezveřejnilo.
49
B. H ODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU
Obrázek B.1: Souhrnné výsledky ankety.
50
B. H ODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU
Obrázek B.2: Souhrnné výsledky ankety.
51
B. H ODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU
Obrázek B.3: Souhrnné výsledky ankety.
52
B. H ODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU
Obrázek B.4: Souhrnné výsledky ankety.
53
B. H ODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU
Obrázek B.5: Souhrnné výsledky ankety.
54
B. H ODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU
Obrázek B.6: Souhrnné výsledky ankety.
55
B. H ODNOTÍCÍ ANKETA PRO VYHODNOCENÍ DVOU LET PROVOZU WEBU
Obrázek B.7: Souhrnné výsledky ankety.
56
Příloha C
Obsah CD
Přilož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 původního webu,
•
ukázku vizuálního stylu sdružení,
•
skicy obrazovek nového GUI webu,
•
drátěné 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 Design
Ltd.. 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, Smashing 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 Interaction
Design, 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
enhancement,
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, Smashing 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 Brně, Fakulta informatiky, <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 přemýš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ý
semanticky-web/> . 9.1
web,
<http://www.webexpo.cz/prednaska/
[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, Information
Architects, 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. 2010
2.20, <http://en.wikipedia.org/wiki/Web_banner> . 8.1.1
[30] Wikipedia contributors: Microformat, Wikipedia, The Free Encyclopedia, 7. 5. 2010
10.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. 2010
20.00, <http://en.wikipedia.org/wiki/Cognitive_load> . 7
60