NA PŘEHRÁVAČ MÉDIÍ HIGH-FIDELITY

X39NUR – report D4

NA – PŘEHRÁVAČ MÉDIÍ HIGH-FIDELITY prototyp

Kryštof Valenta - [email protected]

1 Tvorba high-fidelity prototypu 1.1 Cíl Cílem tohoto prototypu je přímo navázat na low-fidelity prototyp. V mém případě se jedná o

implemetaci papírové formy a poučení se z rad testovaných uživatelů. Další nedostatky jsem odhalil sám, během tohoto testování. Požadavkem tohoto prototypu je věrné napodobení reálné aplikace.

1.2 Technologie Původně jsem chtěl prototyp naprogramovat pomocí html, nebo flashe, ale nakonec jsem se

rohodl zahrát si na „archeologa“ a aplikaci jsem udělal ve VRML. Bylo mi jasné, že nebudu mít nic ulehčeno a většina funkčních prvků bude muset být implementována velmi „tvrdě“, tedy veškeré cesty k

souborům do adresářové stuktury jsou přímo v kódu. Potenciál VRML, tedy zobrazení 3D scény jsem využít nemohl, jelikož televize je jen 2D.

1.3 Problémy při implementaci Problémů se vyskytla celá řada. Většina jich pramenila z toho, že jsem chtěl ohnout některé prvky

VRML, aby dělaly věci, pro které nebyly určeny. Jeden problém se ukázal až po delší době. Špatně jsem

odhadl rozsah zdrojového kódu finální aplikace. Používal jsem totiž sice poměrně dobrý editor VRML

(VRMLpad), ale verze dostupná zdarma je pouze shareware a limit na uložený soubor je 64KB. Aplikaci jsem od začátku směřoval do jednoho zdrojového souboru a když jsem později na tuto hranici narazil, bylo komplikovanější rozdělit stávající kód do více souborů. To proto, že většinu zdrojového kódu tvoří jeden masivní Javascript. Velké úskalí mne čekalo při implementaci přehrávače hudby. Uzel nepodporoval měnit čas přehrávání, na rozdíl od uzlu pro přehrávání videa. Problém jsem vyřešil tak, že soubory s hudbou jsou vlastně videa, jenž jsou přehrávána na skryté ploše.

Obecně jsem se setkal s problémy, které mi znemožnily udělat některé věci tak, jak jsem chtěl.

Uživatelé tak pak často poukázali na věci, které by předpokládali jinak, a to vesměs tak, jak jsem je původně zamýšlel implementovat. 1

2 Popis high-fidelity prototypu 2.1 Hlavní menu Protoyp se skládá z virtuální televize a dálkového ovladače, pomocí nějž je přístroj nutno nejprve

zapnout. Stisk tlačítka „Power“ vyvolá zobrazení hlavního menu. To obsahuje tři položky. Původně jsem předpokládal mnohem širší použití mojé aplikace a položek by bylo více, ale na radu zadavatelů z

NANGU-TV jsem se zaměřil pouze na tzv. media browser. Položka TV a NASTAVENÍ je zde jen proto, aby menu bylo názornější a aktivní je pouze položka uprostřed viz obrázek 1.

Ilustrace 1: Hlavní menu.

2.2 Prohlížeč médií Výběrem položky disk, se otevře prohlížeč médií. Obrazovka je rozdělena na tři části. Dole je

informační panel, který ukazuje funkce barevných tlačítek na ovladači. V levé části je adresářová struktura a v pravé části se zobraují informace o souborech. Adesářovou strukturu a jednotlivé části obrazovky je je vidět na mnoha obrázcích viz dále.

2.3 Filtry Prohlížeč šikovně umožňuje filtrovat jen určité typy soborů, pomocí filtrů: vše, hudba, obrrázky a video. Filtr zobrazuje vždy jen soubory daného typu a složky, ve kterých je tento typ média. Filtr pro hudbu viz obrázek 2.

2

Ilustrace 2: Filtr pro hudbu.

2.4 Fotky a obrázky Možnosti pro prohlížení obsahu s charakterem fotek je několik. Přímo z prohlížeče, kdy je náhlad

fotografie zobrazen v pravé části obrazovky viz obrázek 3. Další možností je zobrazení na celou obrazovku viz obrázek 4. Při tomto prohlížení lze aktivovat slideshow mód viz obrázek 5. Poslední mož-

Ilustrace 3: Prohlížení fotografií v prohlížeči. 3

Ilustrace 4: Prohlížení fotografií na celé obrazovce.

Ilustrace 5: Prohlížení fotografií - slideshow. ností, jak prohlížet fotografie, je v náhledovém módu viz obrázek 6. opět dostupném ze standardního prohlížení fotografií na celé obrazovce.

4

Ilustrace 6: Prohlížení fotografií - náhledový mód.

2.5 Videa Při výběru souboru typu video, se v prohlížečí v pravé části zobrazí několik snímků a pod nimi

textové informace (viz obrázek 7). Stiskem tlačítka OK se film spustí na celé obrazovce. Další stisk OK vyvolá ovladač videa viz obrázek 8. Ovladač vida umožňuje video pozastavit, přetáčet vpřed a vzad, měnit

Ilustrace 7: Informace o videu. 5

Ilustrace 8: Přehrávání videa - ovladač videa. hlasitost a zobrazit informační text o videu (viz obrázek 9).

Ilustrace 9: Přehrávání videa - informační text.

2.6 Hudba Prohlížeč médií umožňuje jednoduché přehrání souboru hudby pomocí tlačítka OK viz obrázek 10. Ovladač, velmi podobný tomu pro video, podporuje též posun hudby vpřed i vzad, 6

pozastavení, a ovládání hlasitosti. Stiskem modrého tlačítka se soubor hudby vloží do playlistu. Současně se automaticky aktivuje rozšířený filtr pro hudbu. Od toho standardní ho se liší tak, že přehrávač hudby

se zobrazeným playlistem zůstává v pravé části zobrazený, i když se pohybujeme v adresářové struktuře (viz obrázek 11).

Ilustrace 10: Přehrávání hudby.

Ilustrace 11: Přehrávání hudby - playlist.

7

2.7 Řazení Stiskem žlutého tlačítka lze měnit systém řazení souborů v adresářích. Standardně jsou soubory

řazeny podle abecedy, alternativou je řazení podle data vytvoření souboru, například viz obrázek 7.

8

3 Testování s uživateli 3.1 Cíle testování Toto testování by mělo zhodnotit, jestli se podařilo odstranit nedostatky z low-fidelity testování a

odhalit případné další nedostatky, které nebyly z interakcí uživatele s papírovým modelem patrné. Hlavní

důraz jsem kladl na test pohybu v adresářové struktuře a na práci s jednotlivými typy médií. Snažil jsem se odhalit, jestli prototyp obsahuje veškeré funkce, které uživatel potřebuje a jestli nejsou některé

implementované funkce nadbytečné. U prvního uživatele píšu průběh testů do podrobna, u uživatele B jen zhruba, neboť pokyny byly víceméně totožné.

3.2 Testovací rozložení Test jsem provedle se dvěma uživateli a rozdělil jsem ho do tří částí. První část měla za úkol seznámit s prostředím televize a s prohlížením obrázků (s nimi jsem zečal, jelikož to považuji za

nejjednodušší a nejintuitivnější médium na prohlížení). Druhá část se podobně věnuje filmům a ta poslední hudbě. Po každé dílčí části jsem s uživatelem probral jeho názor na to, co se mu nelíbilo, případně líbilo. Průběh testů jsem nahrával na video a je dostupný na následujících adresách: •

Uživatel A ◦ Část 1 - http://www.youtube.com/watch?v=0f8pLcfBjYA ◦ Část 2 - http://www.youtube.com/watch?v=a_FxnZAQcs4 ◦ Část 3 - http://www.youtube.com/watch?v=RTLFYDffTTg

•

Uživatel B ◦ Část 1 - http://www.youtube.com/watch?v=Ee9VxqxA5M8 ◦ Část 2 - http://www.youtube.com/watch?v=e77EKokqz3o ◦ Část 3 - http://www.youtube.com/watch?v=-ICcrwL4JFM

3.3 Test s uživatelem A – Adéla Koldová, 18 let, studentka V první části bylo cílem uživatele nejprve spustit televizi, což proběhlo bez nejmenšich problémů. Další krok, výběr prohlížeče médié v hlavním menu také nevedl k žádným potížím. Při přechodu do adresářové struktury se uživatel A poměrně rychle zorientoval a na pokyn zobrazit fotky z roku 2011

reagoval pohotově. Pro zobrazení fotografie na celou obrazovku vyzkoušel nejprve šipku doprava a

9

potom tlačítko OK, což vedlo k úspěchu. Přepínání fotografíí pomocí šipek doprava a doleva nebyl problém. Při pokynu zapnout slideshow uživatel poprvé lehce zaváhal. Nejprve chybně pomocí šipky nahoru zobrazil náhledový mód. Při návratu zpět již vyzkoušel poměrně rychůe jedinou další logickou

volbu, tlačitko OK. Čekal jsem delší váhání při pokynu prodloužení doby zobrazení fotografie při slideshow, ale překvapivě rychle uživatel pomocí šipky nahoru zvýšil čas ze 3s na 5s a volbu potvrdil pomocí OK. Zobrazení náhledového módu již byla formalita, neboť v něm uživatel již dříve byl. Při

pokynu pro návrat do adresářové struktury zvolil uživatel přechod do hlavního menu pomocí tlačítka EXIT, přičemž situaci komentoval, že se spletl a chtěl použít tlačítko BACK. Na konci byl uživatel seznámen s funkcemi řázení a jednotlivými filtry. •

Poznámky k části 1 ◦ Kladný ohlas na filtry. ◦ Nevyužíval by slideshow. ◦ Při ovládání délky zobrazení fotografie navrhuje ztmavit celou fotografii, aby byl patrnější fokus na právě ovládanou část. V duhé části dostal uživatel pokyn vybrat si nějaký film, na základě informaci, které o něm z

prohlížeče může zjistit a ten přehrát. Pohyb z menu a v adresářové struktuře byl již velmi jistý. Celkově

tento uživatel pro pohyb využíval intuitivně křížový volič. Pro přesun fokusu do prave části obrazovky šipku doprava, pro pohyb o úroveň výše v adresářové struktuře šipku doleva. Zobrazení informačního textu videa bylo bezomylné, i když se text neveše lcelý do políčka. Při přehrání filmu měl za úkol film

pozastavit, zobrazit znovu informační text, film přehrát rychle vpřed a vzat a změnit hlasitost. Vše proběhlo bez problémů. •

Poznámky k části 2 ◦ Vše proběhlo ze strany uživatele v pořádku a něměl výhrady a při dotazu, jestli něco nechybí či nepřibýva odpověděl, že ne. ◦ Z mojí strany se projevila chyba v kódu a nahrávání bylo nutno opakovat. I přes veškerou snahu se mi nepodařilo spolehlivě implementovat funci pozastavení. Ve třetí části měl uživatel přehrát soubor hudby ze složky „Ostatní“, modelovat na něm funkce

ovládání hlasitosti a pozastavení. Vše proběhlo bez vetšího zaváhání a uživatel dokonce sám od sebe

použil filtr pro hudbu. Potom jsem zadal úkol při sestavení playlistu z písniček ve složce „Hudba“. Uživatel si všiml volby pro přidání do playlistu pomocí modrého tlačítka a sestavení seznamu písniček nečinilo potíže. Pro spuštění pužil šipku doprava a následné spuštění pomocí play. Reakce na pokyny pro přeskok mezi písnničkami a přidání další písničky do seznamu byly opět relativně pohotové. V této části 10

se projevilo několik dalších chyb v kódu, které shrnu v závěru. •

Poznámky k části 2 ◦ Uživatel zhodnoti rozhraní jako dobré s jediným návrhem na úpravu, aby při přechodu zpět do adresářové struktury po pokynu přidat další písničku do playlistu zůstala hudba hrát.

3.4 Test s uživatelem B – Viktorie Knížková, 48 let, ředitelka ekonomie Oproti uživateli A, trvalo zde v první části prvotní rozkoukání a seznámení s adresářovou

strukturou déle. Když se uživatel dostal přes nutkání klikat myší do obrazovky reagoval již nadále poměrně pohotově. Hladce probělo zobrazení a přeskok mezi fotkami. I tento uživatel nechtěně

aktivoval náhledový mód a nejvíce času mu trvalo zapnutí slideshow. Zbytek proběhl bez problémů a při seznáméní s možností filtrů reagoval pozitivně. •

Poznámky k části 1 ◦ Pozitivní odezva na prvotní seznámení s rozhraním. ◦ Návrh a více nápovědy co jak ovládat – konkrétně u slideshow (současně aby nápověda na obrazovce nepřekážela navrhuje nastavení slideshow přesunout mimo fullscreen mód). V duhé části neměl uživatel žádné problémy s rozhraním. Zobrazení informací o filmu, následné

ovládání přehrávání a hlasitosti řešil pohotově. •

Poznámky k části 2 ◦ Podobně jako uživatel A by nic nepřidával a nic nubíral. ◦ Opět se projevil programátorská chyba. V poslední části uživatel asi nejvíce váhal při ovládání. Obecně používal více tlačítko BACK a OK

proti uživateli Am který upřednostňoval pohodlnější křížový volič. Spuštění hudby a ovládání hlasitosti proběhlo hladce, ale u rychlého posunu a přeskoku písniček zde a v playlistu si nebyl uživatel jistý, patrně proto, že si nebyl úplně jistý symboly na tlačítkách přehrávače hudby. •

Poznámky k části 3 ◦ Uživatel navrhuje u tlačítek pro přeskok mezi písničmami zvolit metodu podobnou té u ovládání hlaitosti (šipky do stran na ovladači televize přímo provedou přeskok a není potřeba je potvrdit pomocí OK).

◦ Dle erakce uživatele mne napadlo zobrazit někde nápovědu, co dělá aktuální tlačitko ovladače hudby, když na něm je fokus.

11

3.5 Shrnutí testování s uživateli Z reakcí uživatelů byl patrný nedostek nápovědy v prohlížeči. Vypavalo napovrch několik

programátorských chyb, o kterých sjem však věděl a neměl jsem čas je opravit. Následuje seznam chyb v prototypu a věci, které jsem přímo nestihl naprogramovat (alespoň těch, o kterých vím). •

Řazení – fuknční pouze ve složce „../Fotky/2011“

•

Vyhledávání je zcela neimplementováno

•

Pozastavení (pauza) jak při přehrávání videa, tak hudby nefunguje vždy správně

•

Přeskok na další písničku přeskočí vždy dvě písničky, pokud není aktivována pauza a současně nelze přeskočit na předchozí písničku, pokud není aktivována pauza.

•

Při ovládání délky zobrayení fotografie při slideshow nesmí uživatel stisknout šipku doprava či doleva, pak se prohlížeč dostane do nedefinovaného stavu.

•

Veškeré ovládání hlasitosti je jen názorné, fyzicky nešlo ve VRML hlasitost u požitých konstruktů ovlivnit.

12

4 Dokumentace pro vývojáře 4.1 Funkční požadavky •

Hlavní priorita ◦ rychlý a intuitivní pohyb v adresářové struktuře ◦ filtry ◦ vylepšit přehrávač hudby

•

Střední priorita ◦ nápověda všude, kde je možno ◦ dobře uživatele informovat o tom, ve které části obrazovky se pohybuje svým ovládáním

•

Nízká priorita ◦ možnost změnit rozhraní pomocí různých nastavení

4.2 Interakce uživatele Uživatel ovládá pomocí standarního dálkového ovladače html aplikaci na set-top boxu

připojenému k televiz. Důraz je třeba klást na ovládání zejména pomocí křížového voliče. Aplikace slouží

k procházení datového obsahu na připojeném paměťovém zařízení. Uživatel musí mít dobrou kontrolu nad daty a aplikace mu umožní jednoduše najít to, co potřebuje.

4.3 Design Co se týče grafické podoby, hlavní menu bych situoval do mřížky voleb. Samotný prohlížeč by měl mít oddělenou levou a pravou část. Ta levá pro adresářovou strukturu a pravou pro informace o souboru. Návíc oproti prototypu by se v pravé části mohly ukazovat náhledy do obsahu složek. Dolní lišta pro

volby barvených tlačít je také důležitá. Zejména informovat uživatele, který filtr je aktivní a jaký systém

řazení je právě aplikován je důležité. Některé operace by bylo vhodné animovat, a například u slideshow a prohlížení fotografií na celé obrazovce by se některé informace mohly po chvíli skrýt, aby nekazili požitek z fotografií.

13