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

Transkript

1 1 Tvorba high-fidelity prototypu X39NUR report D4 NA PŘEHRÁVAČ MÉDIÍ HIGH-FIDELITY prototyp Kryštof Valenta - valenkry@fel.cvut.cz 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 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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 Část Část Uživatel B Část Část Část 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

10 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

11 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

12 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

13 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