Zpravodajský web pro televizi Michal Hanzlík

Transkript

1 Zpravodajský web pro televizi Michal Hanzlík Návrh a implementace uživatelského rozhraní (NUR)

2 Zadání Navrhněte webový výstup zpravodajského serveru pro televizní prostředí řešte zejména problematiku ovládání (klasický dálokový ovladač, speciální ovladače). Předpokládejte rozlišení HD ready a výše a použití prohlížeče Mozilla. Jako cílovou skupinu uvažujte seniory se zájmem o zprávy a IT gramotnost (U3V = Univerzita 3. věku). Screener Jméno: Kontakt ( ): 1) Věk: ) Jak sledujete zprávy? V televizi Na počítači Tisk Radio Nesleduju 3) Jak často sledujete zprávy? Několikrát denně Každý den Párkrát do týdne Výjimečně 4) Používáte televizor k jiným věcěm, než pro standardní TV vysílání? Ano Ne Neveřejná část: "V televizi", "Na počítači" 3. "Několikrát denně", "Každý den" 4. nejlépe "Ano" Pozn.: Tyto odpovědi nejsou striktní podmínkou pro přijetí do testování. Interview Příprava Okruhy otázek: A) Zprávy B) Zpravodajský portál C) Rubriky D) Televize E) Počítač F) Mobil

3 Otázky: A) Zprávy 1) Jakým způsobem sledujete zprávy? 2) Co vám vadí na zpravodajských webech? 3) Čeho si všímáte více u zpráv, obrázku nebo titulku? B) Zpravodajský portál 1) Kdy používáte zpravodajské portály (denné doba)? 2) Jak často používáte zpravodajské portály? 3) Proč používáte zpravodajské portály? C) Televize 1) Jak často máte zapnutý televizor? 2) Kdy máte zapnutý televizor (denní doba)? 3) Máte starší nebo novější televizor? Víte, co umí? 4) Jaký máte ovladač k televizoru? D) Rubriky 1) Které rubriky sledujete? 2) Co vás ve zprávách zajímá? E) Počítač 1) Jste začáteční nebo pokročilý s prací na PC? 2) Jaké programy používáte? F) Mobil 1) Jaký máte mobilní telefon? Tzv. Smartphone nebo klasický mobil? 2) Jak jste s ním spokojeni? Přepis interview Všichni uživatelé sledují TV zprávy denně vždy až večer. Vzhledem k jejich výuce s počítači na Univerzitě 3. věku se snaží využívat i zpravodajské portály na internetu. Z nedostatku času tyto portály nesledují pravidelně. Při dotazu, co jim vadí na zpravodajských portálech byla jednoznačná odpověď reklama. Další věcí byla špatná přehlednost (denního) archivu. Dva uživatelé stále kupují denní tisk a poslouchají rádio, kde jsou (dle slov uživatele) "kvalitnější informace". Televizor mají zapnutý valnou část dne. Jeden uživatel mívá zapnutý televizor jako kulisu, druhý ji zapne jen, když si v programu vyhlídně něco, co ho zajímá. Všichni dotázaní senioři mají moderní televozor s příslušným ("složitým") ovladačem. K přepínání používají také, na ovladači, dominantní "kříž" s šipkami a tlačítkem OK. Všichni vědí, že jejich televizor je schopen více služeb, než jen přijímat TV signál, ale oni sami ho jinak nepoužívají. Každou osobu zajímají jiné rubriky. U dotazovaných uživatelů je největší zájem o politiku, kulturu, domácí (lokální) zprávy a ekonomiku. Na počítači je nejpoužívanější program webový prohlížeč. Dále pak v minimální míře MS Word, případně MS Excel. Mobilní telefony mají všichni dotázaní uživatelé. Preferují jednoduchý klasický mobil. Jeden uživatel má smartphone. Na ovládání si zvykl, přičemž používá stylus. Pozn.: Interview probíhalo v tříčlenné skupině.

4 Analýza dat Televize je v životě seniora primární zařízení k příjmu informací. Jejich zájmy jsou rozdílné, ale o zprávy se zajímají všichni. Zprávy sledují ve všech formách mediích, každý preferuje jinou formu, která mu je bližší a příjemnější. Myslím, že se dá předpokládat, že alespoň 40% uživatelů z cílové skupiny mají moderní televizor. Pro přesnější data by byl zapotřebí větší počet dotázaných uživatelů. Jejich zkušenosti s jinými službami televize než s příjmem TV signálu jsou minimální až žádné. Počítačová gramotnost těchto seniorů je základní. Dokáží obsluhovat webový prohlížeč, ovou službu i zpravodajské portály, které navštěvují. Problémy Problém bude především v převodu znalostí z počítačového prostředí na televizní zařízení s - o proti klávesnici a myši jednodušším - televizním ovladačem. Pohybovat se na webových stránkách bez myši bude značně obtížné, zvláště pro tuto cílovou skupinu.

5 Případy použití Předpokladem je zapnutý televizor s prohlížečem a zobrazena hlavní stránka zpravodajského portálu. Přečíst článek Uživatel by si rád přečetl článek. Nejprve si uživatel vybere ze zobrazeného seznamu příslušnou kategorii (rubriku), která ho zajímá (nebo všechny). Po potvrzení se na obrazovce televizoru zobrazí nejnovější články z dané oblasti zájmu. Posunem nahoru a dolu se může uživatel pohybovat v seznamu článků a vybrat si ten, který ho zaujme. Na zobrazeném článku je rovněž možnost se pohybovat nahoru a dolů, dle potřeby. V případě, že se uživatelovi zdá velikost textu malá, je zde možnost si text zvětšit nebo zmenčit dle potřeby. HTA = Hierarchical Task Analysis Čtení článku 2.1 Výběr rubriky 2.2 Výběr článku 2.3 Změna velikosti textu 2.4 Zpět 2.5 Zavřít 3.1 Číslem 3.2 Kurzorem a potvrzením 3.5 Zvětšení textu 3.6 Zmenšení textu 3.3 Kurzorem a potvrzením 3.4 Další strana Výběr kategorie/podkategorie Výběr článku další strana (seznamu) čtení článku zvětšení/zmenšení textu zpět zavřít

6 Prostředí použití Co je požadováno? Vlastnosti Jednoduché ovládání Dobrá viditelnost Funkce Pohyb "kurzoru" a potvrzování Rychlá volba (čísla) Posouvání textu Změna velikosti textu Možnost návratu - o úroveň výše Ilustrace 1: Prostředí použití Ilustrace 2: Dálkový ovladač s minimem tlačítek Storyboard Konečně doma... Tak co se dneska dělo? Koukneme se na internet.

7 Low-fidelity prototyp Scénář Scénářem je v tomto případě jednoduchá úloha přečíst si článek, který uživatele právě zajímá. Předpokladem je zapnutý televizor se spuštěným prohlížečem na našem novém uživatelském rozhraní. Úkol: Přečíst článek 1. Vyberat ze seznamu rubriku "Kultura". 2. Vybrat v seznamu článků "Pražský koncert Rammstein..." 3. Přečíst článek pomocí šipek nahoru a dolů. 4. Vrátit se na seznam článků/rubrik. Expertní analýza Cíl Cílem expertní analýzy je nalezení problémových oblastí při navrhování uživatelského prostředí. Analýza nám poskytuje užitečnou zpětnou vazbu pro rozhodování, kterou volbu zvolit, aby se uživateli co nejlépe pracovalo a nemusel se soustředit na samotné ovládání. Hodláme zjistit, jestli se aplikace chová tak, jak uživatel očekává. Problémy by mohly nastat především při ovládání a nedostatečného informování uživatele, kde se právě nachází a jaké má možnosti. Nastavení testu Jelikož se zatím jedná o Low-fidelity prototyp, byl test prováděn na počítači s připojením do internetu. Počítač byl ve vlastnictví expertních analytiků (kolegů z předmětu NUR) a tak se mohli více soustředit na testování než na samotné ovládání počítače. Prototyp byl sprovozněn na webovém serveru volně dostupným z internetu. Průbeh testu 1. Výběr rubriku ze seznamu. Pro výběr je možné použít klácesu TAB/SHIFT+TAB (středový kříž na ovládači) Pro potvrzení vybraného článku je potřeba stisknout tlačítko ENTER. Ilustrace 3: Seznam rubrik

8 2. Výběr článku ze seznamu. Postup je stejný jako se vybírá rubrika. Ilustrace 4: Seznam článků 3. Čtení článku. Pro čtení samotného článku jsou použity šipky nahoru a dolů (P+ a P- na ovládači) Ilustrace 5: Zobrazený článek 4. Vrátit se na seznam článků/rubrik. Pomocí klávesy BACKSPACE (ZPĚT na ovládačí).

9 Nálezy a doporučení Expert 1 Problem 1: Popis: Chybí zvýrazní jednotlivých tlačítek při aktivaci. Pravidlo: Visibility of system status Návrh: Zvýraznit tlačítko Priorita: 2 Problem 2: Popis: Při čtení článku a na seznamu není možnost vybrat následující, nebo předchozí článek nebo seznam článků Pravidlo: User control and freedom Návrh: Přidat základní tlačítka pro navigaci - další, zpět a případně domu Priorita: 3 Problem 3: Popis: Datum, případě zvýraznit, že článek je nový/nepřečtený Pravidlo: Visibility of system status Návrh: Přidat ke každému článku alespoň datum vydaní Priorita: 3 Expert 2 Problem 1: Popis: Hned po výběru první rubriky chybí informace, kde se vlastně nachází. Chybí zpěztná vazba. Jak ví, že se nespletl? Pravidlo: Visibility of system status Návrh: Doplnit globálně cestu / zpětnou navigaci: idnes > kultura Problem 2: Popis: Chybí členění na podrubriky (Sport > Fotbal, Sport > hokej, ) Pravidlo: Match between system and the real world Návrh: Rozdělit rubriky na podkategorie. (ne však moc) Problem 3: Popis: Na detailu článku nelze provézt přímo Vrátit se na seznam článků/rubrik. Pravidlo: User control and freedom Návrh: Přidat navigaci.

10 Prototyp aplikace Prototyp byl vytvářen na počítači a jeho vyzkoušení na koncovém zařízení nebylo z technických důvodů možné. Bohužel se mi nepodařilo zajistit zařízení, pro testování prototypu skrze ovládač. Proto se budu vyjadřovat v souvislosti při používání počítače. Funkce prototypu V protoypu jsou implementovány nejdůležitější funkce pro procházení zpráv. Jedná se o výběr požadované rubriky, následné vybrání článku a přečtení. Pokud si uživatel neví rady, má k dispozici nápovědu. V případě, že uživatelovi nevyhovuje velikost písma, má možnost zvětšit nebo zmenšit písmo dle potřeby. Po přečtení článku nebo při volbě změny rubriky může použít tlačítko zpět. State-transition network Start Vstoupit na stránku Seznam rubrik Vybrat rubriku Zpět Seznam článků Vybrart článek Zpět Článek Použité HW a SW technologie Prototyp byl vytvořen s pomocí 4 klíčových technologií. Jedná se o PHP, HTML, CSS a JavaScript. Pomocí PHP jsou generovány HTML stránky a především zpracovány informace získané pomocí API od serveru idnes.cz. CSS je záležitostí pouze vizuální a tvoří značnou část uživatelského rozhraní. JavaScript má nastarost ovládání uživatelského prostředí. Modifikuje CSS a HTML, aby bylo uživateli zřejmá činnost, kterou provedl. Pomocí JavaScriptu se uživatel "pohybuje" po položkách a mezi stránkami. Protože bylo zadáno použití prohlížeče Mozilla, nebyl prototyp optimalizován a přizpůsoben pro jiné prohlížeče. Požadavky na Hardware vyplívají z použitého softwaru. Aplikace musí běžet na webovém serveru s podporou pro PHP a s připojením do sítě Internet. Na klientské straně je zapotřebí prohlížeč od společnosti Mozilla s povoleným JavaScriptem. Implementační problémy a triky Při implementnaci jsem narazil na řadu problémů. Vizuální pohyb po položkách jsem zajistil tak, že jsem pomocí JavaScriptu zachytil událost stisknuté klávesy a zpracoval. Podle toho, kterou klávesu uživatel stiskl, jsem změnil třídu u položky a tím zajistil vizuální zvýraznění. Následně jsem posunul prohlížeč na pozici, aby byla položka přibližně uprostřed obrazovky. Pohyb po položkách byl nejprve zajištěn pomocí šipek. Problém nastal při posunu, kdy se prohlížeč posunul na mnou definovanou pozici a ještě se posunul o několik řádků (funkce prohlížeče). Proto pohyb po položkách přesunut na jiné klávesy, které nemají v prohlížeči funkci.

11 Zajímavý trik, který jsem použil je získání seznamu položek, po kterých se uživatel bude pohybovat. Při použití funkce var kids = parent.childnodes získám i uzly, které neobsahují položky zobrazené uživateli. Proto jsem tyto položky odfiltroval a zbytek uložil do nového pole. Testování s uživateli Cíl testu Cílem testu je zjistit, jak moc je námi navržená aplikace v daných úlohách intuitivní a jestli je vše dostatečně srozumitelné pro uživatele z cílové skupiny. Případné nalezené nedostatky je nutno sepsat do hlášení spolu s návrhy pro zlepšení. V tomto případě je hlavní úlohou přečtení článku, změna velikosti textu a orientace v aplikaci. Nastavení testu Abych co nejméně časově omezoval uživatele, sešel jsem se s nimi před jejich výukou na U3V (Univerzita třetího věku). Při pokusu zajistit zařízení ovladače s přijímačem do počítače jsem neuspěl, protože byla všechna vypůjčena. To mělo dopad na testování. Uživatelé neměli pocit, že pracují s televizí, ale s počítačem, protože ovládali aplikaci skrze externí klávesnici připojenou k notebooku. Jako prostředí pro testování postačily prostory školy. Na počítači jsem spustil webový server s podporou PHP, připojil se na školní WiFi síť Eduroam a spustil prohlížeč Mozilla Firefox na drese localhost, kde běžela navržená a implementovaná aplikace. Prohlížeč jsem přepnul do režimu celé obrazovky, aby ostatní prvky OS nerušili testování a navodil tak iluzi televizoru. Průběh testu Uživatel 1 Délka testu: 45 min Uživateli jsem zadal úkol, aby si přečetl článek umístěný v rubrice "Sport" s názvem "Hokejisté nad Ruskem dlouho vedli, nakonec prohráli gólem v závěru". Vzhledem k tomu, že nebyl k disopzici ovládač, tak bylo nutné ovládat aplikaci skrze externí klávesnici. Tím pádem byl uživatel zmaten, protože pohyb nebyl zajištěn pomocí šipek, ale pomocí kláves W (nahoru), S (dolů), A (vlevo), D (vpravo).

12 Ilustrace 6: Úvodní obrazovka Po zobrazení a přečtení nápovědy se uživatel po chvíli zkoušení zorientoval v pohybu po položkých. Problém nastal při pokusu o vstupu do rubriky "Sport", která byla zakryta za nápovědou (viz Ilustrace 7). Pro opětovné zobrazení rubriky "Sport" bylo zapotřebí nápovědu opět vypnout. Pak už uživatel našlel potřebný článek. Ilustrace 7: Nápověda zakrývající některé rubriky Při čtení narazil na problém, jak posunout článek. Protože klávesy W, S, A a D již neměly funkci jako předtím. Pro posun v článku bylo zapotřebí využít šipky nahoru a dolů. Návrat na úvodní obrazovku a přečtení jiného článku už nebyl pro uživatele problém.

13 Uživatel 2 Délka testu: 60 min Ilustrace 8: Seznam článků 1 Uživateli jsem zadal stejný úkol, aby si přečetl článek umístěný v rubrice "Sport" s názvem "Hokejisté nad Ruskem dlouho vedli, nakonec prohráli gólem v závěru". Tentokrát jsem upozornil na nápovědu hned na začátku, protože problém u prvního uživatele byl způsoben absencí ovladače. Tentokrát už si uživatel nápovědu skryl a pokračoval v úkolu. Problém nastal při procházení seznamu článků. Uživatel přehlédl požadovaný článek a pokračoval dolů. Ilustrace 9: Seznam článků 2 Když dojel na konec seznamu a pokračoval v posunu, tak se objevil opět na začátku seznamu a nevšiml si toho. To je způsobeno, že seznam je implementován jako "nekonečný". Při čtení narazil na stejný problém jako první uživatel - jak posunout článek. Tentokrát jsem požádal uživatele, aby se pokusil zvětšit a potom zmenšit text. Po chvíli přemýšlení ho napadlo si zobrazit nápovědu a pomocí kláves "plus" a "mínus" na numerické klávesnici zvětšoval a zmenšoval velikost textu dle libosti. Návrat na úvodní obrazovku nebyl pro uživatele problém.

14 Nálezy a doporučení 1. Nález: Rozdíl ovládání pohybu v článku a mezi položkami nebo rubrikami. Řešení: Sjednotit pohyb po položkách a v článku na stejné klávesy (tlačítka na ovládači) 2. Nález: Nápověda zakrývající položky v seznamech. Řešení 1: Vymezit prostor na obrazovce pro nápovědu. Řešení 2: Zobrazit nápovědu na celou obrazovku. Vytvořit pro nápovědu novou stránku. 3. Nález: "Nekonečný" seznam položek. Řešení: Zrušit "nekonečný" seznam. Zamezit další přesun. 4. Nález: Špatně viditelný nadpis článku. Řešení 1: Oddělit nadpis vodorovnou čarou od obrázku a popisku. Řešení 2: Barevně odlišit nadpis. Dokumentace pro vývojáře Funkční požadavky 1. Aplikace bude zobrazena na televizi priorita 1 2. Aplikace bude funkční na prohlíči Mozilla Firefox priorita 2 3. Rozlišení HD ready a výšší priorita 3 Specifikace interakce návrhu 1. Ovladatalnost pomocí dálkového ovládání na TV Specifikace vzhledu: 1. Snadnost a jednoduchost ovládání 2. Dobrá čitelnost Projekt má v kořenovém adresáři "index.php", který se načítá jako první. Nejdříve si načte pomocné soubory v adresáři "lib", které definují, některé proměnné použité v souboru "index.php". Zárověň také načte soubor "json_parser.php", který se dotáže skrze API portálu idnes na články, které budeme zobrazovat. Index vloží další potřebné soubory, jako jsou kaskádové styly v adresáři "css" a soubor "ovladani.js", který zajišťuje veškeré ovládání aplikace klávesnicí, potažmo ovládačem. Adresář "inc" obsahuje jednotlivé stránky, které se vkládají do "index.php", což jsou seznamy článků jednotlivých rubrik a samotné články.