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