net-o-peer NUR Návrh uživatelských rozhraní

Transkript

1 NUR Návrh uživatelských rozhraní ČVUT FEL Ondřej Pánek, Tomáš Pastýřík, Daniel Princ (NTP-FSV) Zadavatel: Ing. Adam Sporka, Ph.D.

2 Obsah 1. Úvod Uživatelský průzkum Profil uživatele Interview Témata a otázky na interview Screener Shrnutí interview a požadavky dotazovaných Interpretace získaných informací Analýza HCI problémů Selekce snímků z velkého množství videozáznamů Organizace velkého množství vlastních snímků Způsob porovnání dvou videosnímků Případy užití Selektování videa Třídění videozáznamů Otagování, zveřejnění a sdílení videa Odstranění videa Porovnání videí NUR Návrh uživatelských rozhraní 2

3 1. Úvod net-o-peer je systém pro automatické natáčení videosnímků jezdců ve snow a wake parcích. Systém pracuje tak, že v několika částech parku jsou nainstalovány kamery snímající atraktivní prostor pod pevně danými úhly, které dokážou identifikovat jezdce v záběru, zaznamenat videosnímek jeho jízdy, ten opatřit základními informacemi jako identifikátor jezdce, místo a čas a odeslat jej na server. Jezdec má poté možnost třídit snímky svých jízd a vybrat ty, které si přeje zveřejnit a umožnit tak komukoliv si prohlédnout jeho jízdu. Na základě domluvy se zadavatelem máme v rámci tohoto projektu za úkol navrhnout uživatelské rozhraní pro mobilní telefony, jež umožní uživatelům jednoduchou a efektivní manipulaci se snímky, a to především jejich selekci a organizaci. Dalším cílem je navrhnout některé nové metody prezentace či interakce s aplikací, např. možnost simultánně porovnat dvě jízdy. Na první pohled zřejmé problémy, s nimiž se budeme muset během práce potýkat, vychází z toho, že denně můžou přibývat desítky nových, krátkých, navzájem si velmi podobných videozáznamů od každého jezdce. NUR Návrh uživatelských rozhraní 3

4 2. Uživatelský průzkum 2.1. Profil uživatele Cílovou skupinu tvoří v případě projektu net-o-peer především lidé aktivně navštěvující ski parky a wake parky. Jedná se tedy o snowboardisty a wakeboardisty, kteří na rozdíl od snowboardistů jezdí na vodě, nechajíc se táhnout po celou dobu tažným systémem. Do cílové skupiny tak řadíme uživatele, kteří takto sportují a mají zájem na tom, aby jejich sportovní výkony byly nahrávány za účelem okamžitého či pozdějšího rozboru. Obecně lze tak uživatele charakterizovat těmito body: o o o o sportovně aktivní člověk, resp. aktivně navštěvuje snow a wake parky věk přibližně let vlastník chytrého mobilního telefonu příležitostně využívá sociální sítě ke sdílení obsahu Vzhledem k možné komunitní povaze projektu je třeba do cílové skupiny zařadit také uživatele, kteří sami nesportují, ale chtějí si jen videa, která jim byla zpřístupněna prohlížet Interview Témata a otázky na interview A) Wakeboarding & snowboarding obecně B) Triky 1. Popište prosím stručně, v čem je wakeboarding/snowboarding specifický 2. Jak často tento sport provozujete? 3. Kolik jízd za jeden den obvykle stihnete? 4. Provozujete jej s přáteli? 5. Popište prosím, jak probíhají přípravy, samotné provozování, i závěr. 1. Chodíte si jen zajezdit, či zkoušíte i různé triky? Případně jaké? 2. Mluvíte o vašich výkonech provedených tricích s přáteli? 3. Jak získáváte znalosti o tom, jaký trik jste zrovna provedli? C) Využívání chytrých telefonů 1. Využíváte datové služby telefonu k přístupu na internet? 2. Jaké na vašem telefonu používáte nejčastěji aplikace? 3. Používáte váš telefon k prohlížení videí? 4. Používáte chytrý telefon ke sdílení obsahu na sociálních sítích? NUR Návrh uživatelských rozhraní 4

5 Screener A) Dotazník 1. Vyberte prosím, do jaké věkové skupiny se řadíte: Vyberte prosím vaše pohlaví: muž žena 3. Jste aktivním snowboardistou či wakeboardistou? ano ne vlastní odpověď: 4. Zajímáte se o výše uvedené sporty i pasivně? ano ne 5. Jste majitelem chytrého telefonu? * ano ne B) Požadovaní uživatelé Přestože bude uživatelské rozhraní navrhováno na platformě android, selekci dle uživatelů různých operačních systémů chytrých telefonů neprovádíme. Aplikaci by měl být schopen ovládat uživatel vlastnící kterýkoliv operační systém kteréhokoliv chytrého telefonu. Požadujeme alespoň dva uživatele, kteří by se interview zúčastnili, ideálně: o o o o 1 muž a 1 žena z navzájem nepřekrývajících se věkových kategorií 1 uživatel aktivní sportovec, 1 uživatel pasivní uživatel by měl být vlastníkem chytrého telefonu NUR Návrh uživatelských rozhraní 5

6 Shrnutí interview a požadavky dotazovaných A) Wakeboardista Dotazovaným byl muž ve věku let, který je co se týče wakeboardingu začátečník. Tento sport provozuje teprve druhým rokem, takže se stále hlavně učí základy. Přes léto provozuje sport obvykle jednou až dvakrát měsíčně jeden den nebo případně celý víkend. Za den stihne obvykle jízd, podle toho, jak se mu zrovna daří. Obvykle provozuje sport s kamarádem, se kterým se vzájemně sledují a snaží se upozorňovat druhého na chyby, které při jízdě provedli. Tyto informace si pak často vyměňují hned po jízdě, dokud je mají ještě v paměti. Jako problém hodnotí fakt, že je v podstatě samouk a tak často vůbec neví, kde udělal chybu a proč spadl. Dotyčný vlastní chytrý telefon s datovým tarifem, který běžně používá pro sdílení obsahu na facebooku, prohlížení videí na youtube.com i pro běžné surfování na webu. Neměl by moc zájem sdílet videa ze svých jízd na internetu, ale měl by velký zájem si videa hned po jízdě prohlížet, aby se mohl poučit ze svých chyb, případně zjistit, kde vlastně chybu udělal. B) Snowboardista Dotazovanou byla žena ve věkové kategorii let, jezdící na snowboardu zhruba 10 let. Oproti očekávaným odpovědím se lišily odpovědi především v následujících bodech. Dotyčná totiž má daleko raději velké u-rampy, které vypadávají z konceptu tohoto projektu. Dotazovaná totiž popsala, že setrvává většinu času na jedné atrakci bez potřeby mezi atrakcemi přejíždět, i když příležitostně si kolečko udělá. Dotyčná často jezdí s přáteli, kdy je jich na atrakci i více najednou, záběry tak mohou mít společné. Dotyčná tento sport provádí pouze v zimním období, v průměru každý třetí víkend. Dotazovaná vlastní chytrý telefon a je zvyklá si na něm prohlížet videa a komentovat je, především na youtube.com. Její telefon nepoužívá žádný datový tarif, připojena je tak jen tam, kde je bezdrátové připojení k internetu. Přestože je dotazovaná již zkušenou jezdkyní a skokanem, chybí jí možnost se podívat na konkrétní specifika některých triků. Dodává, že to není potřeba přímo na svahu, stačí v nějaké blízké restauraci, kde mobilní připojení je. S přáteli se často nahrávají na telefony a videa pak sdílejí přímo. Dotyčná by tak uvítala, kdyby aplikace obsahovala databázi veřejných videí, kde by byly ukázkově provedeny všechny nejznámější triky. Také by uvítala možnost nahrát na server video vlastní! Říká, že daleko zajímavější jsou videa, která jsou dynamická, z ruky jiného jezdce. Ale i těm statickým se nebrání, považuje je ale spíše za doplněk těch dynamických, se kterými zkušenosti má. NUR Návrh uživatelských rozhraní 6

7 Interpretace získaných informací A) Wakeboardista Wakeboardista by nejvíce ocenil, pokud by si hned po jízdě mohl prohlédnout svá videa, aby zjistil, kde při jízdě udělal chybu a mohl se z toho před následující jízdou poučit. Měl by tedy zájem hlavně o možnost rychle projít poslední nahraná videa. O sdílení videí nemá příliš zájem, ale to je dáno hlavně tím, že je začátečník, takže neprovádí triky, které by stály za sdílení s přáteli. B) Snowboardista Nejvýraznějším poznatkem z rozhovoru je rozdíl mezi snowboardisty a wakeboardisty. Snowboardista totiž není stále tažen kupředu, ale může se na některých atrakcích zastavovat a setrvávat zde déle. Dalším výrazným důsledkem tohoto poznatku je možnost více uživatelů na jedné atrakci a tudíž možné kolize a překryvy videí, které je ale nutné řešit na aplikační, nikoliv na prezentační vrstvě projektu. Zajímavým požadavkem je také nahrávat na server projektu také svá videa, dotyčná by nerada měla roztříštěná videa mezi několika službami. Sdílení videí požaduje za samozřejmost. NUR Návrh uživatelských rozhraní 7

8 3. Analýza HCI problémů 3.1. Selekce snímků z velkého množství videozáznamů Uživatel se potřebuje vyznat ve spoustě videozáznamů, které mohou každým dnem přibývat po stovkách (i desítky videií od jednoho uživatele denně) a navíc jsou si navzájem velice podobné. Na mobilním telefonu jde kvůli velikosti viditelné plochy o ještě citelnější komplikaci. Tento problém považujeme za naprosto zásadní pro celkovou použitelnost aplikace. Jak vyplynulo z interview, je nutné selekci co nejvíce usnadnit pro případy, kdy ji chce uživatel rychle využít přímo v terénu (např. prohlédnout si svou poslední jízdu ve frontě na vlek). Návrh řešení: Maximálně využít metadat videosnímků pro kategorizaci a filtrování. Poskytnout rychlou volbu pro zhlédnutí poslední jízdy s jejím případným porovnáním se stejným trikem jiné jízdy Organizace velkého množství vlastních snímků Tento problém úzce souvisí s prvním bodem a de facto slouží jako základ, na kterém může být vybudována rozumná selekce. Je třeba navrhnout efektivní způsob označování (tagování) a odstraňování videozáznamů, jež bude provádět samotný jezdec. Jak již bylo uvedeno výše, může se lehce stát, že uživatel bude určitým způsobem třídit desítky nových videozáznamů denně. Co se týče tagování, jezdec má za úkol označit své video názvem provedeného triku. Začínající jezdci často neznají správný název triku a mohou tak vznikat nepřehledné duplikace tagů pro stejný trik. V interview jsme se mimo jiné dozvěděli, že by uživatelé uvítali možnost rychlého organizování snímků přímo v terénu (zveřejnění poslední jízdy, odstranění x posledních jízd atd.). Je tak potřeba uživatelské rozhraní výrazně zjednodušit, ale zároveň dát uživateli zmíněné možnosti k dispozici a myslet na omezení dané vlastnostmi mobilních telefonů. Návrh řešení: Nabídnout začínajícím jezdcům pomoc při rozeznávání triků. Poskytnout možnost rychlého sdílení poslední jízdy na sociální síti a rychlého odstranění posledních x jízd. Případně nabídnout možnost další osobní kategorizace. NUR Návrh uživatelských rozhraní 8

9 3.3. Způsob porovnání dvou videosnímků Je potřeba navrhnout použitelný způsob simultánního porovnání dvou videosnímků a vyrovnat se při tom s velikostí a omezeními displeje mobilního telefonu. Návrh řešení: Prolnutí dvou videosnímků do sebe či horizontálně rozdělit displej na dvě části. NUR Návrh uživatelských rozhraní 9

10 4. Případy užití V této kapitole jsou rozebrány tři vybrané případy užití. Každý je v úvodu popsán, následuje HTA diagram mapující činnost uživatele a příslušný papírový prototyp Selektování videa Konkrétní scénář je takový, že uživatel si po několika jízdách chce najít nějaká konkrétní vlastní videa a s nimi provést nějakou další akci. Takto akce může být libovolná (mazání, přehrání, tagování, apod.), již není součástí tohoto scénáře. Scénář se zaměřuje zejména na to, jak z velkého množství pořízených videí vybrat několik konkrétních. Scénář očekává, že uživatel bude pravděpodobněji používat aplikaci jednou za několik jízd, než aby jí používal po každé jízdě. Nicméně uvažuje se, že uživatel je stále ještě v terénu (na svahu nebo u vody). HTA diagram k tomuto případu užití je zobrazen na obr. 3. Obr. 1: Zobrazení výchozího menu při procházení vlastních videí. Obr. 2: Vybereme možnost starší videa. NUR Návrh uživatelských rozhraní 10

11 Obr. 3: HTA diagram k případu užití 4.1. NUR Návrh uživatelských rozhraní 11

12 Obr. 4: Starší videa se řadí podle data. Při výběru konkrétního dnu se aplikace chová stejně jako při procházení "dnešních videí". Obr. 5: Vrátíme se zpět do menu. Obr. 6: Vybereme dnešní videa. Obr. 7: Zobrazí se nám seznam dnešních jízd, vždy s časem začátku konkrétní jízdy. Jízdy jsou řazené sestupně. NUR Návrh uživatelských rozhraní 12

13 Obr. 8: Druhou variantou je řadit videa podle jednotlivých překážek (kamer). Obr. 9: Zobrazí se nám seznam překážek a počet nasnímaných videí na dané překážce. Řazeno opět sestupně. Obr. 10: Vybereme si konkrétní překážku. Obr. 11: Zobrazí se nám seznam jízd, které jsou na této překážce nasnímány. NUR Návrh uživatelských rozhraní 13

14 Obr. 12: Zde už si můžeme vybrat konkrétní viedo, které nás zajímá. Obr. 13: Po výběru videa se nám zobrazí akce, které můžeme s videem provádět. To již není součástí tohoto scénáře. Obr. 14: Vrátíme se zpět na seznam překážek. Obr. 15: Přepneme se zpět na zobrazení jednotlivých jízd (jako na obr. 7) a vybereme si nějaké video druhým způsobem. NUR Návrh uživatelských rozhraní 14

15 Obr. 16: Ze seznamu jízd si vybereme jednu konkrétní jízdu. Obr. 17: Zobrazí se seznam překážek, na kterých jsme byli zaznamenáni. Po kliknutí na překážku se zobrazí obrazovka 12. Obr. 18: Druhou variantou je zobrazit si mapu, na které budou vyznačené nasnímané překážky a naše trasa. Obr. 19: Po kliknutí se nám zobrazí seznam překážek se zaznamenanými videi. Kliknutím na název zobrazíme opět obrazovku 12. NUR Návrh uživatelských rozhraní 15

16 Obr. 20: Obrazovku si můžeme libovolně posouvat a zobrazit jinou část jízdy. Obr. 21: Další část zobrazované jízdy. NUR Návrh uživatelských rozhraní 16

17 4.2. Třídění videozáznamů Předpokládejme situaci, kdy má za sebou uživatel několik jízd a při čekání ve dlouhé frontě či při zastávce v bufetu si chce jízdy prohlédnout a roztřídit. Tříděním je zde myšleno buď videa odstranit nebo označit klíčovými slovy (otagovat), případně zveřejnit a následně sdílet na sociální síti. Tento scénář tedy rozdělíme na dvě části: a) Kompletní proces zveřejnění (otagování, zveřejnění, sdílení) b) Odstranění V obou případech již předpokládáme, že uživatel na základě případu užití 4.1 již vybral konkrétní snímky pro práci. HTA diagram k tomuto případu užití je zobrazen na obr. 22. Obr. 22: HTA diagram k případu užití NUR Návrh uživatelských rozhraní 17

18 Otagování, zveřejnění a sdílení videa Obr. 23: Scénář začíná ve chvíli, kdy již uživatel nalezl a vybral konkrétní video (viz případ užití 4.1). Obr. 24: Nejdříve si uživatel video přehraje. Obr. 25: Uživatel si prohlédne video. Obr. 26: Po prohlédnutí se vrátí zpět. NUR Návrh uživatelských rozhraní 18

19 Obr. 27: Uživatel nejdříve video označí tagy, a tak zvolí možnost Tagování. Obr. 28: Úvodní obrazovka tagování videa, které zatím nebylo otagováno. Obr. 29: Uživatel klikne na textové pole. Obr. 30: Aplikace přejde do psacího režimu s našeptávačem a zobrazí se klávesnice. NUR Návrh uživatelských rozhraní 19

20 Obr. 31: Uživatel začíná psát název triku Backflip, přičemž našeptávač zobrazuje již existující podobné tagy. Obr. 32: Uživatel pak může kliknout na příslušný tag, urychlit tak psaní a zároveň předejít duplikaci tagů. Obr. 33: Po vytvoření tagu se nový tag objeví na obrazovce Tagování. Obr. 34: Uživatel uloží změny. NUR Návrh uživatelských rozhraní 20

21 Obr. 35: Uživatel chce nyní zveřejnit video v rámci systému net-o-peer. Obr. 36: Aplikace poskytne feedback o prováděné akci. Obr. 37: Po zveřejnění videosnímku je položka Zveřejnit nahrazena položkou Sdílet. Obr. 38: Uživatel klikne na položku Sdílet pro sdílení videa na sociálních sítích. NUR Návrh uživatelských rozhraní 21

22 Obr. 39: Obrazovka Sdílení zobrazuje základní Info o videu, umožňuje vložit text zprávy a výběr sociální sítě. Obr. 40: Uživatel vybere Facebook. NUR Návrh uživatelských rozhraní 22

23 Odstranění videa Obr. 41: Uživatel zvolí možnost Odstranit v kontextové nabídce konkrétního videa. Obr. 42: Jelikož jde o kritickou operaci, aplikace požádá uživatele o potvrzení akce. Obr. 43: Aplikace poskytne uživateli feedback o probíhající akci. Obr. 44: Po odstranění videa se aplikace vrátí zpět na původní místo výběru snímku. NUR Návrh uživatelských rozhraní 23

24 4.3. Porovnání videí Tento scénář se zabývá především porovnáním dvou libovolných videí. Obecně můžeme rozlišovat, zda porovnáváme dvě libovolná veřejná videa, či jedno veřejné porovnáváme s videem svým, či zda porovnáváme dvě vlastní videa. Uživatel si tedy musí nejprve vybrat dvě videa a říci aplikaci, že chce právě tyto videa porovnat. Nyní je třeba vzít v potaz, že videa nemusí být synchronizována, tedy že například nájezd na totožnou překážku se bude většinou lišit. Uživatel si tak vybere začátek v každém z obou videí. Nyní může videa zároveň přehrát a ovládat je jako jedno video, tedy společně je přetáčet i zastavovat. V závislosti na tom, jaká videa si uživatel vybral a jaká k nim má práva, může dále učinit jednu z následujících akci: a) Nedělat s videi nic b) Sdílet jedno z videí c) Sdílet samotné porovnání!! d) Smazat jedno z videí, či obě. Scénář tak odhaluje novou možnou funkcionalitu aplikace, která by ale byla závislá na implementaci webové verze portálu. A to možnost odkázat se na konkrétní porovnání dvou libovolných videí. U každého takového porovnání by pak ale bylo třeba udělat vlastnosti porovnání - typicky synchronizaci, perzistentní napříč portálem, ne jen pro dosavadní sezení. HTA diagram k tomuto případu užití je zobrazen na obr. 45, storyboard na obr. 46. NUR Návrh uživatelských rozhraní 24

25 Obr. 45: HTA diagram k případu užití 4.3. Obr. 46: Storyboard k případu užití 4.3. NUR Návrh uživatelských rozhraní 25

26 Obr. 47: Uživatel se rozhoduje, že video H-pipe chce porovnat s jiným. Obr. 48: Kliká na levou část názvu atrakce (pravá spouští přehrávání) Obr. 49: Kontextové menu s možnostmi u daného videa Obr. 50: Přidání videa k porovnání NUR Návrh uživatelských rozhraní 26

27 Obr. 51: Aplikace dává najevo, že máme nějaké video připravené k porovnání. Je třeba vybrat druhé. Obr. 52: Uživatel volí atrakci, kterou chce přidat k porovnání. Stejná atrakce, jiná jízda. Obr. 53: Kontextové menu jízdy Obr. 54: Přidání videa k porovnání NUR Návrh uživatelských rozhraní 27

28 Obr. 55: Byly zvoleny dvě videa, aplikace otevírá rozhraní pro jejich prohlížení. Obr. 56: Přehrání horního videa Obr. 57: Nalezení místa, odkud chceme sledovat videa společně Obr. 58: Pozastavení videa NUR Návrh uživatelských rozhraní 28

29 Obr. 59: Posunutí ukazovátka na kýženou pozici = pozici, od které videa budou hrát společně. Obr. 60: Předchozí krok hotový Obr. 61: Aktuální stav aplikace Obr. 62: Přehrání dolního videa, k nalezení téhož bodu NUR Návrh uživatelských rozhraní 29

30 Obr. 63: Sledování videa Obr. 64: Zastavení videa Obr. 65: Aktuální stav aplikace Obr. 66: Posunutí ukazovátka start na pozici, která znamená start pro společné přehrávání v tomto videu NUR Návrh uživatelských rozhraní 30

31 Obr. 67: Předchozí krok hotový Obr. 68: Nyní chce uživatel přehrát obě videa zároveň Obr. 69: Tiskne tlačítko pro přehrávání Obr. 70: Sleduje obě videa zároveň NUR Návrh uživatelských rozhraní 31

32 Obr. 71: Pozastavuje přehrávání Obr. 72: Chce vědět, z jaké hodiny je horní video Obr. 73: Tiskne tlačítko s názvem horního videa Obr. 74: Čte si informace o tomto videu. Má zde i možnost vyměnit toto video za jiné. Rozhoduje se ale jinak, hardwarovým tlačítkem zpět se vrací na původní obrazovku. NUR Návrh uživatelských rozhraní 32

33 Obr. 75: Rozhoduje se horní video smazat Obr. 76: Čte si upozornění o trvalém smazání Obr. 77: Volí trvale smazat video Obr. 78: Horní video je smazáno, uživatel nechce vložit jiné na jeho místo. NUR Návrh uživatelských rozhraní 33

34 Obr. 79: Uživatel chce sdílet dolní video s přáteli Obr. 80: Čte si dialog o sdílení videa Obr. 81: Kliká do prostoru zprávy Obr. 82: Čímž vyvolává softwarovou klávesnici NUR Návrh uživatelských rozhraní 34

35 Obr. 83: Píše zprávu k videu Obr. 84: Dopisuje zprávu a rozhoduje se, kam video pošle Obr. 85: Rozhoduje se pro sociální síť Facebook, kam video sdílí. NUR Návrh uživatelských rozhraní 35