A7B39PDA. D3 Design I. Tomáš Poledný

Transkript

1 A7B39PDA D3 Design I Tomáš Poledný poledtom@fel.cvut.cz 2011/2012

2 Zadání [NA-SMART_TV] Televize na smartphone POPIS Navrhněte uživatelské rozhraní pro sledování televize na smartphone Máme množinu TV kanálů, pro každý kanál máme televizní program; máme internetové připojení a úložiště pořadů CÍLOVÁ SKUPINA nízká úroveň počítačové gramotnosti DESIGN I elektronický prototyp prezentující koncept ovládání televize DESIGN II funkční prototyp běžící na cílovém zařízení ZADAVATEL Jan Suchý, soutez@nangu.tv Přeformulované zadání Po schůzce se zadavatelem bylo zadání více upřesněno a nabídnuty dvě varianty. Z těchto variant jsem si vybral ovládání televize za pomocí smartphone. Ostatní aspekty jsou zachovány. Aplikací bude možno provádět běžné ovládání televize. Smartphone má připojení k internetu. Televize má množinu TV kanálů, pro každý kanál má televizní program a úložiště pořadů. 2

3 Deliverable D2 Uživatelé Uživatel aplikace je potencionálně každý kdo má televizi a smartphone. Cílová skupina uživatel ve věku let, který má nízkou počítačovou gramotnost. Který ovšem má zkušenosti se spotřební elektronikou a zároveň umí využívat základní funkce smartphone. Aktivity Hlavní aktivita je využití smartphonu jako ovladače televize. Nabízí se také prohlížení televizního obsahu s možností vybrat si z již odvysílaných (nahraných, archivovaných) pořadů, tento pořad si také bude moci uživatel archivovat. Dále může hodnotit pořad v některé z filmových databázích nebo naopak zjistit podle filmové databáze, jak je pořad hodnocen. K pořadu si uživatel může přehrát trailer. Běžné využití je, že uživatel si bude chtít přehrát například minulou epizodu svého oblíbeného pořadu nebo si jenom tak najít v televizním programu co by ho zaujalo. System support Uživatel bude muset vlastnit set-top-box, který toto ovládání bude podporovat. Tento set-top-box bude připojen k síti aby smartphone mohl získávat potřebná data (televizní program, archiv atp.). Vše musí být intuitivní, aby uživatel nebyl zmaten a mohl se v aplikaci jednoduše orientovat. Aplikace by měla být schopná fungovat na smartphonu se systému Android, který má připojení k síti. Spojením mezi set-top-boxem a smartphonem bude pomocí sítě. Aby uživatel mohl hodnotit pořady nebo získávat jejich hodnocení musí být propojení s některou filmovou databází nabízí se csfd.cz nebo imbd.com (podle toho z jaké země uživatel je). Kontext Předpokládané použití je při sledování televize. Tudíž bude nějak zajištěna konektivita připojení. Uživatel bude moci aplikaci používat oběma rukama avšak klasické ovládání televize bude navrženo tak, aby ho mohl používat i jednou rukou (v druhé ruce bude například držet nějaký pokrm). Možnosti nastavení budou díky cílové skupině minimální, aby se suplovala náhrada ovladače spotřebního zboží. 3

4 D3 Design I Popis designu Design jsem dělal za pomocí html, JavaScriptu a kaskádových stylů. Optimalizoval jsem na rozlišení smartphonu 480x854px, což je rozlišení mnou vlastněného smartphonu (Sony Ericsson Xperia Neo), který zároveň slouží jako testovací zařízení. Připojení k set-top-boxu bude prováděno automaticky při startu programu. Program si prohledá lokální síť a připojí se k nalezenému set-top-boxu. 1 Hlavní obrazovka Po spuštění aplikace se uživateli zobrazí hlavní obrazovka s vyobrazením ovladače. Inspiroval jsem se různými ovladači. Aby bylo ovládání co nejvíce intuitivní a dalo se ovládat poslepu, tak jsem vložil pouze nejvíce používané funkce. Důraz jsem kladl hlavně na ovládací kříž uprostřed obrazovky, protože přepínání kanálů a změna hlasitosti jsou dvě nejpoužívanější akce na dálkovém ovladači. Obr 2 Obr 3 Obr 4 Obr 9 Obr 5, 6 Obr 10 Obr 1: Hlavní obrazovka Obr 2: Výběr kanálu 4

5 Pokud uživatel klikne na tlačítko s číslem kanálu (zelené tlačítko) zobrazí se mu klávesnice pro možnost přímého zadání kanálu (Obr 2). Pokud klikne na tlačítko s ovládáním hlasitosti (světle modré), zobrazí se mu posuvník, s jehož posunutím si může přímo nastavit hlasitost (Obr 3). Další tlačítka, která mají vliv na zobrazení jiné obrazovky jsou EPG, Archiv, Plán a Info. 2 EPG Obr 3: Nastavení hlasitosti Pokud uživatel klikne na tlačítko EPG na hlavní obrazovce, zobrazí se mu obrazovka s EPG (elektronický průvodce). Tuto obrazovku jsem optimalizoval pro natočení telefonu na šířku z důvodů, že uživateli bude program lépe čitelný a také uvidí více následujících (respektive předcházejících) pořadů. Samozřejmostí je i zobrazení v poloze telefonu na výšku. Červená svislá čára označuje aktuální čas. Obr 1 Obr 4: Obrazovka EPG 5 Obr 5

6 Pokud uživatel klikne na program, který aktuálně běží nebo na název stanice, bude přesměrován na hlavní obrazovku (Obr 1) a na televizi bude přepnut vybraný kanál. Pokud bude vybrán program, který v současnosti nejde, bude uživatel přesměrován na Info obrazovku s podrobnostmi o programu (Obr 5). 3 Info Info obrazovka může být vyvolána mnoha způsoby, z Hlavní obrazovky, EPG, Archivu a Naplánovaných programů. Info obrazovka slouží k informaci o pořadu. Je zde také možnost publikovat informace o filmu na sociálních sítí Facebook a Google+ kliknutím na příslušná tlačítka. Pokud je obrazovka zobrazena na šířku, je obsah přiblížen a uživatel se musí posunout níže. Může zde také film ohodnotit, kliknutím na hvězdičky, poté se uživateli zobrazí dialog, v kterém si vybere počet hvězdiček, které filmu chce dát. Pokud klikne na jméno režiséra nebo herce bude mu nabídnuto otevření odkazu na profil vybraného člověka ve filmové databázi v jeho webovém prohlížeči. Odkaz na herce Publikovat na sociální sítí Obr 6: Info obrazovka na šířku Přidat pořad do plánu Sledování (Obr 10) Přehrát trailer Obr 5: Info obrazovka na výškua Uložit pořad do archivu (Obr 8) Obr 7: Info obrazovka na šířku posun Dále je zde také možnost přehrát si trailer k pořadu z filmové databáze. Přehrávání traileru spustíme kliknutím na černou obrazovku s tlačítkem play dole na obrazovce Info. Pokud chceme program uložit do archivu, stačí kliknout na tlačítko Uložit, po kliknutí bude uživatel přesměrován na obrazovku s archivem (Obr 9). Jestliže uživatel bude chtít nastavit připomenutí pořadu (respektive přepnutí na pořad), stačí kliknout na tlačítko Připomenout a bude přesměrován na obrazovku Naplánované programy (Obr 10). 6

7 4 Archiv Obrazovka Archiv slouží k přehledu uložených programů. Pokud se klikne na libovolný nahraný pořad, zobrazí se dialog s možnostmi (Obr 8), co lze s nahraným pořadem dělat. Můžeme si zobrazit Info o pořadu, přehrát si ho nebo smazat z archivu. Jestliže uživatel klikne na Delete bude dotázán, zda opravdu chce pořad z archivu smazat. Zobrazí dialog s možnostmi (Obr 8) Zobrazí info o pořadu (Obr 5) Přehraje pořad a přesměruje na hlavní obrazovku (Obr 1) Odstraní pořad z archivu Obr 9: Obrazovka Archiv pořadů Obr 8: Dialog vybraného pořadu 7

8 5 Plán pořadů Plán pořadů (Obr 10) slouží jako playlist pořadů, na které bude v čase vysílání na televizi přepnuto. Styl jsem zvolil stejný jako v archivu pořadů. Opět po kliknutí na pořad se zobrazí dialog s možnostmi. Konkrétně zde jsou možnosti Info, Upravit a Delete. Pokud se klikne na tlačítko Upravit, bude zobrazen dialog na změnu času naplánovaného pořadu. Jestliže uživatel klikne na Delete, bude dotázán, zda opravdu chce pořad z plánu odstranit. Zobrazení dialogu s možnostmi (Obr 11) Zobrazí info o pořadu (Obr 5) Zobrazí dialog s možnostmi upravit naplánovaný pořad Odstraní pořad z plánu Obr 10: Naplánované pořady Obr 11: Dialog s možnostmi 6 Dialog hodnocení Po kliknutí na hvězdičky v Hlavní obrazovce nebo v Info obrazovce se zobrazí dialog s hodnocením. Zde po kliknutí na hvězdičku bude hodnocení odesláno do filmové databáze. Obr 12: Dialog hodnocení pořadu 8

9 7 Poznámky k navigaci Jestliže se bude chtít uživatel vrátit na předchozí obrazovku, stačí stisknout hardwarové tlačítko zpět na svém smartphonu. Testování Testování probíhalo ve webovém prohlížeči Dolphin HD na smartphonu Sony Ericsson Xperia Neo. V prohlížeči jsem načetl svůj prototyp aplikace. Největší překážkou bylo přibližování (resp. oddalování), díky kterému se aplikace nechovala standardně. Některé věci nebylo možné v prototypu zachytit (např. nahrávání pořadu atp.) díky absenci set-top-boxu. Heuristic evaluation Pro testování jsem si ze slidů vybral otázky, na které jsem se pak snažil já a druhý expert najít odpovědi. Tyto otázky jsou: 1) Viditelnost stavu systému 2) Uživatelská kontrola a svoboda 3) Prevence chyb 4) Estetický a minimalistický design 1 Expert č. 1 Student ČVUT FEL STM obor SI věk 21 let. Jestliže jsem v EPG, Archivu nebo v Naplánovaných pořadech, tak po posunutí nadpisy nezůstávají na svých místech. Měla by být možnost nějak filtrovat nebo řadit pořady v Archivu a Naplánovaných pořadech. Při kliknutí na Uložit nebo smazat pořad by se měl zobrazit dialog (pozn. v návrhu je toto popsáno, avšak není implementováno). 2 Expert č. 2 Student ČVUT FEL STM obor SI věk 21 let. Tvůrce prototypu. Shledávám stejné problémy jako expert č. 1. Info o programu by mohlo být špatně čitelné na smartphonech s malým rozlišením nabízí se otázka toto rozdělit do více panelů. Uživatel si nemusí všimnout toho, že tlačítko kanálů nebo hlasitosti se dá zmáčknout. 9

10 User test 1 Scénář 1) Uložte si aktuálně vysílaný pořad 2) Zjistěte co aktuálně dávají na všech kanálech 3) Zjistěte co dávají 20:00 na programu Prima 4) U pořad z bodu 3) si nastavte přepnutí na tento pořad v čase jeho vysílání 5) Pořad z bodu 3) ohodnoťte 6) Přehrajte trailer k pořadu z bodu 3) 7) Smažte pořad Superman z archivu 8) Přejděte na kanál Testovaný subjekt č. 1 Testovaný subjekt je muž, 20 let. Student zdravotního lycea. Bez předchozích zkušeností s dotekovými smartphony. Bez zvláštních počítačových znalostí, pouze uživatel internetu. Na televizi umí zobrazit EPG a naplánovat si spuštění v době vysílání pořadu. Jinak má malé zkušenosti se spotřební elektronikou. 1) Ihned kliknul na tlačítko REC. 2) Kliknul na EPG a hned jmenoval pořady pod červenou čárou. 3) Automaticky dolistoval v EPG k požadovanému pořadu, měl výtku k tomu, že názvy programů nezůstávají, odsouvají se. 4) Nejprve kliknul na Uložit, po přečtení titulku Archiv pořadů se však vrátil zpět a dal připomenout. 5) Intuitivně kliknul na hvězdičky a dodal, že by místo Vote mělo být Ohodnotit nebo Hlasovat. 6) Automaticky kliknul na čtverec s trailerem. 7) Nejprve šel do plánu, ale nakonec se vrátil a vše provedl v Archivu. 8) Chvíli přemýšlel a pak ho napadlo kliknout na zelené tlačítko s číslem kanálu a zadal požadovaný kanál. 3 Testovaný subjekt č. 2 Testovaný subjekt je žena okolo 40 let. Zaměstnána jako asistentka v DPP. Bez jakýchkoliv zkušeností s dotekovými smartphony. Pouze základní znalosti počítačů a moc si nerozumí se spotřební elektronikou. Ovládání televize pouze základní činnosti (změna hlasitosti a přepnutí programu) 1) Nejprve dala menu, po té co jsem jí upozornil, že se zobrazilo pouze menu nastavení na televizi se vrátila a klikla na Archiv, zde chvíli tápala a opět se vrátila. Po prozkoumání tlačítek na úvodní obrazovce si všimla tlačítka REC a stiskla ho. 10

11 2) Bez problému klikla na EPG a ihned jmenovala pořady pod červenou čarou. 3) Našla hned a stejně jako subjekt dva upozornila, že se názvy programů odsouvají. 4) Chvíli tápala, ale po chvíli na to přišla. 5) Bez problémů splnila. 6) Po dotazu co je to trailer a mém vysvětlení jí hned napadlo kliknout na oblast traileru. Dodala, že by se to mělo jmenovat ukázka. 7) Bez problémů splnila. 8) Taktéž bez problémů ihned klikla na tlačítko s kanály a na klávesnici zadala požadované číslo kanálu. Subjekt dodal, že ovládání je intuitivní a že by se to naučil ovládat i on. 4 Subjekt č. 3 Žena 20 let, studentka Vysoké školy ekonomické. Se zkušenostmi s dotekovými smartphony. Na spotřební elektronice ovládá pouze základní ovládání. Bez zvláštních počítačových znalostí, pouze uživatel internetu a prací do školy. 1) Ihned dala REC 2) Klikla na EPG a opět jmenovala pořady pod červenou čarou jako předchozí subjekty. 3) V EPG dojela na požadovaný program. Stejně jako předchozí subjekty dodala, že se názvy programů odsouvají. 4) Chvíli hledala, kde nastavit nakonec opět vstoupila do EPG a našla program a u něho dala Připomenout. 5) Ihned klikla na hvězdičky. 6) Bez problému klikla na oblast traileru. 7) Hned klikla na Hlavní obrazovce na tlačítko Archiv a vybrala požadovaný program a dala Delete. 8) Nejprve držela P+ po chvíli jí napadlo kliknout na tlačítko s kanály a zadat číslo kanálu z klávesnice. 5 Shrnutí User test Podle skupiny subjektů, kteří nejsou nijak technicky založení posuzuji návrh jako celkem úspěšný. Všechny subjekty splnili všechny body testu bez nějakých větších problémů. Předpokládám, že kdyby aplikaci používali déle test by zvládli bez jakýkoliv problémů. Problém odsouvání názvů programů v EPG je závažný a měl by se v D4 opravit. Dále by se mohlo změnit Vote na Hlasovat nebo Hodnotit. Shrnutí testování Testování proběhlo úspěšně, řekl bych až nad očekávání. V D4 bych rozdělil Info o pořadu na karty, tak aby bylo lépe čitelné. Také se musí zafixovat hlavičky tabulek v EPG, Archiv a Naplánované pořady. Vytvořit lepší tlačítko pro změnu kanálů. 11