informace o nÁvrzÍch variantnÍch ŘeŠenÍch novÝch … příloha č. 8.pdf · 1.2...
TRANSCRIPT
INFORMACE O NÁVRZÍCH VARIANTNÍCH ŘEŠENÍCH NOVÝCH WEBOVÝCH PREZENTACÍ
1 Část 1: rozsah variant řešení webových prezentací
Návrh vybraných webových prezentací bude vyvíjen v úzké spolupráci se zadavatelem, zejména v oblasti výběru vzorové nebo vzorových webových prezentací. Výsledkem bude návrh minimálně dvou webových prezentací nebo dva návrhy jedné vybrané vzorové webové prezentace, které budou ještě rozděleny na informační a prezentační variantu webu.
1.1 Informační varianta webu
Informační varianta webu bude zaměřena na efektivní poskytování informací veřejnosti dotčené oblasti dle současných webových standardů. Primárně lze rozdělit uživatele a návštěvníky webu na tři skupiny: laická veřejnost, odborná veřejnost a resortní zaměstnanci. Na základě potřeb těchto skupin budou distribuovány informace na webových stránkách nebo aplikacích. Základními prvky webových stránek budou:
-‐ v hlavičce stránky vyplněné údaje specifické pro každou stránku: o titulek o popis o klíčová slova
-‐ konzistentní navigace na všech stránkách včetně drobečkové a bottom navigace -‐ korektně a sémanticky strukturovaný obsah -‐ obsahové bloky rozdělené do menších, výstižně nadepsaných celků -‐ poskytování informací srozumitelnou formou cílové skupině uživatelů -‐ jednoduché a rozšířené vyhledávání -‐ výstižně popsané odkazy -‐ možnost přepínání jazykové mutace (v závislosti na domluvě se zadavatelem) -‐ responzivní design včetně responsivních obrázků (v závislosti na koncovém zobrazovacím
zařízení)
1.2 Prezentační varianta webu
Prezentační varianta webu bude zaměřena na efektní prezentování resortní organizace nebo projektu odborné a laické veřejnosti. Návrhy budou odrážet potřeby a požadavky cílové skupiny uživatelů. Na základě potřeb těchto skupin bude distribuován obsah na webových stránkách. Základními prvky webových stránek budou:
-‐ v hlavičce stránky vyplněné údaje specifické pro každou stránku: o titulek o popis o klíčová slova
-‐ konzistentní navigace na všech stránkách včetně drobečkové a bottom navigace -‐ korektně a sémanticky strukturovaný obsah s důrazem na SEO -‐ návaznost na sociální sítě (Twitter, Facebook, YouTube, LinkedIn, Google+) -‐ rozsáhle obsahové bloky rozdělené do menších, výstižně nadepsaných celků -‐ jednoduché a rozšířené vyhledávání -‐ výstižně popsané odkazy -‐ možnost přepínání jazykové mutace -‐ responzivní design včetně responsivních obrázků (v závislosti na koncovém zobrazovacím
zařízení)
1.3 Využitelnost variant
Hlavními rysy informačního a prezentačního webu je jednoduchá a intuitivní orientace návštěvníka (uživatele) v obsahu, účelná distribuce a členění obsahu a logické a ergonomické vyřešení navigačních prvků. Uživatel si je v jakékoli chvíli vědom, kde se v hierarchii webu v daný okamžik nachází.
Informační varianta webu je orientována „interněji“ na efektivní poskytování často většího množství odborných informací. Prezentační varianta webu je určena zejména k prezentaci organizace nebo oddělení široké veřejnosti, obsah, kterého je méně, je i méně odborný. Tato varianta disponuje oproti informační variante vyšším podílem obrazového či audio-‐vizuálního materiálu a tím je i vhodná pro následnou propagaci a provázání se sociálními sítěmi.
1.4 Výstupy 1.4.1 Rámové modely
Soubor rámových modelů (wireframes) vybraných webových prezentací s nejdůležitějšími „podstránkami“ bude sloužit jako šablony pro vlastní realizaci webových prezentací a aplikací resortních organizací a projektů. Tyto rámové modely projdou z důvodu ergonomického rozložení ovládacích prvků a obsahu testováním UX (User eXperience – viz navrhované řešení ergonomie) a budou reflektovat potřeby uživatelů používající 3 typy zařízení:
-‐ desktopová a laptopová platforma (stolní počítač, laptop, notebook) -‐ tablet -‐ chytrý telefon (smartphone)
1.4.2 Statické webové stránky
Rámové modely budou ilustrativně převedeny do statických webových prezentací v HTML5 a CSS3 s implementací responsivního designu pro zabezpečení efektivního zobrazení výstupu v závislosti na typu koncového zařízení. Grafické prvky budou dodány ve formátech PNG (jednoduché kresby, loga, apod.) a JPEG (fotografie). Autorská práva formátu PNG budou převedena na objednatele, v případě JPEG se bude jednat o ilustrativní fotografie.
Další kritéria, která budou ilustrativní statické stránky splňovat jsou:
-‐ validní HTML5 kód dle doporučení konsorcia World Wide Web (W3C) -‐ plné formátování CSS3 -‐ korektní struktura obsahu s důrazem na sémantiku -‐ kódování UNICODE UTF-‐8 -‐ dostupnost stejných informací pro uživatele a roboty fulltextových vyhledávačů (např.
Google, Seznam, apod.) -‐ optimalizovaný výstup pro roboty fulltextových vyhledávačů pro snadné přirozené
vyhledávání (organic searching) -‐ přístupnost dle Vyhlášky č. 64/2008 Sb., která v současné době představuje platná a závazná
pravidla přístupnosti pro weby veřejné správy -‐ ergonomie a použitelnost (viz druhá část přílohy)
1.4.3 Ukázka rámových modelů
Platforma PC Tablet Smartphone
Zdroj: KIT PEF ČZU v Praze
1.4.4 Ukázka převedení rámových modelů do HTML a CSS
Platforma PC Tablet Smartphone
Zdroj: KIT PEF ČZU v Praze
2 Část 2: navrhované řešení ergonomie webových prezentací
Ergonomie webových prezentací bude založena na iterativním testování průběžných výstupů cílovou skupinou uživatelů a následné optimalizaci těchto výstupů. Testování bude probíhat ve specializované laboratoři použitelnosti (HUBRU – Human Behavior Research Unit/Laboratoře pro studium lidského chování).
V prvním kroku budou sestaveny rámové modely jednotlivých webových stránek, které budou otestovány na cílových skupinách cca 5 uživatelů. Na základě výsledků testování budou rámové modely upraveny tak, aby mohly být použity jako podklad pro tvorbu statických webových stránek v HTML5 a CSS3 vytvořených dle výše zmíněných kritérií.
Druhým krokem bude testování těchto statických webových stránek opět skupinami cílových uživatelů ve specializované laboratoři použitelnosti. Na základě výsledků budou statické webové stránky upraveny a následně opět otestovány pro ověření správné implementace změn. Dle finálních úprav budou zpětně upraveny i rámové modely, které budou sloužit jako výchozí podklad a materiál pro rozmístění prvků a obsahu resortních webových stránek a aplikací.
2.1 Metody, které budou použity pro návrh ergonomie
Focus group
Focus group (ohnisková/cílová skupina) je kvalitativní výzkumnou metodou, která se zaměřuje na analýzu chování a motivů jednání uživatelů. Metoda je realizována pomocí moderované skupinové diskuze, kdy jeden nebo více moderátorů diskutuje se skupinou respondentů ze zvolené cílové skupiny. Cílem je odhalit hlubší myšlenkové struktury, pochody, názory a postoje respondentů.
Think-‐aloud protocols
Think-‐aloud protocols (protokoly hlasitého myšlení) se provádí ve specializované laboratoři, kde je přítomen uživatel z cílové skupiny a moderátor. Uživatel provádí zadané úkoly a nahlas sděluje své pocity a postupy. Moderátor s uživatelem komunikuje a motivuje jej k popisování činností a pocitů.
Diagnostic evaluation
Cílem metody Diagnostic evaluation (diagnostické hodnocení) je zjistit a vystihnout, s čím mají uživatelé konkrétní problémy a proč. Toto hodnocení lze provést na základě dat získaných z metody Think-‐aloud protocols a lze ji řešit dle nastavených metrik či bez nich. Metriky se zaměřují především na chybovost a efektivitu.
A/B
V případě potřeby upřednostnění jedné z více podobných variant (zpravidla ze dvou), např. umístění ovládacího prvku, bude využita metoda A/B testování. Tím bude zabezpečen výběr efektivnější (ergonomičtější) varianty.
Eye tracking a oční fixace
Pro vyhodnocení dat získaných metodou sledování očních pohybů a fixací bude použito metod sektorového zobrazení, grafu fixací. Rovněž dojde k využití statistických ukazatelů, které budou získány ze surových dat.
Heatmapy pohybu očí a fixací
Jako základní vizuální metoda bude využito heat mapy (tepelných map). Jejich výstupem je grafické znázornění pohybu očí testovaných uživatelů. Pohyb uživatele po stránce bude rovněž na základě získaných dat vyobrazen formou Dome tree.
Clicktracking
Reálný pohyb uživatele po webové stránce bude sledován pomocí speciálního SW nástroje navrženého a vyvinutého Katedrou informačních technologií PEF ČZU v Praze. Získaná data mají formu 2-‐dimensionální matice a je možné je zpracovávat statistickými nebo vizualizačními metodami. Celkový výstup metody je obohacen o další analytická data, jako např. rozlišení obrazovky respondenta, koordináty myši ve chvíli kliknutí, URL webové stránky, typ objektů, apod. Tímto lze efektivně analyzovat a vyhodnotit chování uživatele ve smyslu využití myši při realizaci zadaného scénáře.
2.2 Ukázky testování a vybraných výstupů testování
Specializovaná laboratoř použitelnost (HUBRU)
Zdroj: KIT PEF ČZU v Praze
Ukázka heat mapy
Zdroj: KIT PEF ČZU v Praze
Ukázka výběru klíčových míst pro analýzu
Zdroj: KIT PEF ČZU v Praze