Ontwerptechnieken. MyTV

Transcriptie

1 Ontwerptechnieken MyTV Naam: Mike Wolffgramm Student: Klas: V1CMD06 Vak: Ontwerptechnieken ( Herkansing ) Docent: Sonja Rouwhorst Datum: 17 januari 2012

2 Inhoudsopgave: - Inleiding pag. 3 - Sitemap pag. 4 - Uitleg pagina s pag. 5 - Usecases pag Wireframes pag. 14 Pagina s: - 0.0& 0.1 pag & 1.1 pag & 2.2 pag & / 3.1 pag & 3.3 pag & 5.1 pag & 5.4 pag & 5.6 pag & pag Schermontwerpen pag Landscape mode / Portrait mode pag. 23 Pagina s Home pag Menu MyTV pag Programma bekijken pag Programma bekijken > Programma informatie pag Programma bekijken > Nieuws pag Programma bekijken > Film pag Programma bekijken > Film > Genres pag Zoeken pag Zoeken > Zoekresultaten pag Zoeken > Geavanceerd zoeken pag Algemene instellingen pag Persoonlijk pag Persoonlijk > Persoonlijke aanbevelingen pag Persoonlijk > Persoonlijke TV-zender pag Persoonlijk > Geschiedens pag Persoonlijk > Playlist pag Persoonlijk > Playlist > Playlist maken pag Persoonlijk > Playlist > Playlist bekijken pag. 42 "

3 Inleiding In dit document staat mijn ontwerp voor de eindopdracht van het vak ontwerptechnieken. De opdracht is een applicatie ontwerpen voor op de tablet. Met deze applicatie moeten gebruikers TV programma s en films kunnen kijk op hun mobiele apparaat. Nieuw aan deze applicatie is de persoonlijke TV zender. Op deze TV zender zend de applicatie programma s of films. De programma s en films die worden uitgezonden op deze persoonlijke zender zijn uitgekozen aan de hand van het kijkgedrag van de gebruiker. In dit document vindt u de sitemap, de usecases, de wireframes en de schermontwerpen van mijn ontwerp. Mike Wolffgramm V1CMD06 #

4 Sitemap MyTV De sitemap laat u de structuur zien van de applicatie die ik heb ontworpen. Deze applicatie heet MyTV en zal verder in dit document worden toegelicht. "#$%&'()*#+$,'#$-.*"$/$*0(1"/$(234556,&%% 78898:;7<0(=>?1@89 A3%$ B,36,&%%& C$/"D/$* E3$/$* F46$%$*$ "*G#$44"*6$* B$,G33*4"D/ B$,G33*4"D/$ N=HM$*L$, '$4G.3+ E3$/H,$GI4#&#$* B$,G33*4"D/$ F&*O$K$4"*6$* '3,# J$G-."$L$*"G R"$I+G J$&K&*-$$,L M3$/$* B4&P4"G# B4&P4"G# %&/$* $,"$G B4&P4"G# O$/"D/$* S$&4"#P Q"4% Home J$*,$G - Home: Programma bekijken: Spelshow, Sport, Nieuws, Series, Reality en Film: Genres: Zoeken: Zoekresultaten: Geavanceerd zoeken: Algemene instellingen: Persoonlijk: Persoonlijke aanbevelingen: Persoonlijke TV zender: Geschiedenis: 5.5 "#$%&'()*' +,"$& -'()*'.'/$(",)$0*% $

5 - Playlist: Playlist maken: Playlist bekijken: Uitleg pagina s MyTV: Hier zal ik uitleggen wat er op welke pagina s zal gebeuren in deze applicatie. Ik zal uitleggen wat de gebruiker kan doen en daarbij verwijs ik naar de wireframes en schermontwerpen om deze uitleg te ondersteunen. Aan de hand van de sitemap zal ik pagina voor pagina met u doornemen om te beginnen bij het begin. Het home scherm zal het begin zijn van de uitleg net als het home scherm het beginpunt zal zijn van de gebruiker binnen de applicatie. Home 0.0: Op deze pagina komt de gebruiker terecht wanneer deze de applicatie opent. Op deze pagina ziet hij of zij drie blokken. 1. NU 2. STRAKS 3. Aanbevolen 1. NU Hier ziet de gebruiker een foto van de content ( programma of film ) dat nu te zien is op de persoonlijke zender van de gebruiker. 2. STRAKS Hier ziet de gebruiker een foto van de content ( programma of film) dat het eerst volgende is wat uitgezonden zal gaan worden op de persoonlijke zender van de gebruiker. 3. Aanbevolen In dit derde wat smallere blok aan de rechter kan van het scherm ziet de gebruiker drie voorbeelden van aanbevelingen. Deze aanbevelingen zijn door applicatie aan de hand van het kijkgedrag van de gebruiker zijn vastgesteld. De gebruiker kan zich verder door de applicatie verplaatsen aan de hand van het menu dat te openen valt door op het logo ( MyTV ) te drukken. Vervolgens opent zich dan een menu met vier keuzes. Ik heb voor dit menu gekozen, een menu wat openklapt om ruimte te besparen en zodoende ook de vormgeving strak en rustig te kunnen houden. ( Zie wireframe en schermontwerp 0.1 ) Programma bekijken 1.0: Op deze pagina zal de gebruiker een keuze kunnen maken uit 6 verschillende categorieën. %

6 1. Spelshow 2. Sport 3. Nieuws 4. Series 5. Reality 6. Film Wanneer men de keuze maakt om de categorie film te selecteren kan men vervolgens op pagina een keuze maken tussen verschillende filmgenres ( Zie wireframe en schermontwerp ) Wanneer de gebruiker meer informatie wenst over een programma of film dan selecteert deze het programma of film en komt hij terecht op een pagina zoals pagina 1.1. Op deze pagina krijgt de gebruiker uitgebreidere informatie over de content en ziet hij meer screenshots van het programma of de film. Hier heeft de gebruiker ook tevens de mogelijkheid om de desbetreffende content direct toe te voegen aan de gewenste playlist. ( Zie wireframe en scherm ontwerp 1.1 ) Spelshow, Sport, Nieuws, Series, Reality en Film 2.1: Op deze pagina ziet men een voorbeeld wanneer men de keuze maakt om te kiezen voor de categorie nieuws. De gebruiker krijgt naar deze keuze een lijst te zien met nieuwsprogramma s. De gebruiker kan zich verder en terug bewegen door de lijst met nieuwsprogramma s aan de hand van de pijltoetsen. De meest recente nieuwsprogramma s zullen zich voor in de lijst bevinden en hoe ouder het programma des te verder deze naar achteren in de lijst verschuift. ( Zie wireframe en schermontwerp 2.1 ) De pijl toetsten zijn zo geplaatst dat deze makkelijk zijn te bedien wanneer de applicatie word gebruikt in landscape mode. Wanneer de gebruiker beslist om het mobiele apparaat anders te gebruiken, portrait mode dan zal de lay-out van de applicatie veranderen maar de pijltoetsen zullen altijd goed te zijn bereiken met de vingers. ( Voor verschil in landscape mode en portrait mode zie de schermontwerpen. ) Genres 2.2.1: Op deze pagina kan de gebruiker na een keuze te hebben gemaakt voor de categorie film een keuze gaan maken voor zijn of haar filmgenre naar keuze. De gebruiker dient een van de genres te selecteren om alle films uit dit genre in een lijst te krijgen en vervolgens kan de gebruiken uit de lijst een keuze maken en zijn film naar keuze bekijken via de applicatie. ( Zie wireframe en schermontwerp ) &

7 Zoeken 3.1: Op deze pagina kan de een zoekactie invoeren in het daarvoor bestemde invoerveld. ( Zie wireframe en schermontwerp 3.1 ) De gebruiker kan zoeken via deze aparte zoekpagina, daarnaast kan de gebruiker ook altijd een zoekactie invoeren in de zoek balk boven in het menu. Zo hoeft de gebruiker niet eerst aar deze pagina. ( pagina 3.1 ) Zoekresultaten 3.2 De zoekresultaten van de uitgevoerde zoekactie zullen op deze pagina verschijnen. De gebruiker kan door middel van de pijltoetsen zich navigeren door de lijst met zoekresultaten. Wil de gebruiker een nieuwe zoekopdracht invoeren dan kan dit door een zoekterm in te vullen in de daarvoor bestemde zoek balk. Hiernaast kan de gebruiker beslissen om een uitgebreidere zoekactie uit te voeren en dan kan deze drukken op de knop geavanceerd zoeken drukken. Deze actie brengt de gebruiker vervolgens naar een vervolg pagina. ( pagina 3.3 ) ( Zie wireframe en schermontwerp 3.2 ) Geavanceerd zoeken 3.3: Op deze pagina komt men terecht nadat men heeft besloten om een uitgebreide zoekactie uit te voeren. Deze pagina kan op twee manieren worden bereikt. 1. de gebruiker voert eerst een gewone zoekactie uit en besluit na het zien van de zoekresultaten een uitgebreide zoekactie uit te voeren. Deze drukt dan op de pagina van de zoekresultaten op de knop geavanceerd zoeken. 2. De gebruiker kiest onder het menu zoeken direct voor de optie geavanceerd zoeken. De een uitgebreide zoekactie uit te kunnen voeren zijn meer dingen nodig dan alleen een zoekterm invoeren. De gebruiker moet op deze pagina nog steeds een zoekterm invoeren maar heeft daarnaast nog 4 mogelijkheden om zijn zoekopdracht te specificeren. Door middel van drop down menu s kan de gebruiker een keuze maken uit. 1. Datum 2. Genre 3. Zender '

8 Daarnaast kan de gebruiker ook nog tags invoeren in het daarvoor bestemde invoerveld. Deze tags moeten de zoekopdracht verder specificeren en dit moet de applicatie helpen om een beter zoekresultaat aan de gebruiker te kunnen aanbieden. ( Zie wireframe en schermontwerp 3.3 ) Algemene instellingen 4.1: Op deze pagina kan de gebruiker diverse instellingen van de applicatie aanpassen. Hier kunnen bijvoorbeeld; datum, tijd en taal worden aangepast. Net als bij het geavanceerd zoeken is hier gekozen voor het invoeren van gegevens aan de hand van drop down menu s. ( Zie wireframe en schermontwerp 4.1 ) Persoonlijk 5.1: Wanneer de gebruik op deze pagina is kan deze een keuze maken tussen 4 opties: 1. Persoonlijke aanbevelingen 2. Persoonlijke TV zender 3. Geschiedenis 4. Playlist De gebruiker kan verder navigeren door de applicatie door 1 van de 4 voor bovenstaande opties te selecteren. ( Zie wireframe en schermontwerp 5.1 ) Persoonlijke aanbevelingen 5.2: Op deze pagina kan de gebruiker zijn of haar persoonlijke aanbevelingen bekijken. De applicatie stelt aan de hand van het kijkgedrag van de gebruiker een lijst op met content ( programma s en films ) die voor de gebruiker interessant zouden moeten zijn gezien zijn kijkgedrag. Aan de hand van de pijl toetsen kan de gebruiker zich door de lijst van persoonlijke aanbevelingen bewegen. ( Zie wireframe en schermontwerp 5.2 ) Persoonlijke TV zender 5.4: Deze pagina is eigenlijk exact hetzelfde als de homepagina. Deze pagina is verdeeld in drie blokken: 1. NU 2. STRAKS 3. Aanbevolen. (

9 NU: Geeft een screenshot en informatie van wat er nu word uitgezonden op de persoonlijke TV zender van de gebruiker. STRAKS: Geeft een screenshot en informatie van wat er als eerstvolgende programma/film zal worden uitgezonden op de persoonlijke TV zender van de gebruiker. Aanbevolen: In dit blok zullen 3 persoonlijk aanbevelingen voor de gebruiker van de applicatie te zien zijn. ( Zie wireframe en schermontwerp 5.4 ) Geschiedenis 5.5: Op deze pagina kan de gebruiker zijn of haar geschiedenis bekijken. De geschiedenis zal bestaan uit alle door de gebruiker bekeken programma s en films. De gebruiker krijgt een lijst voor met alle programma s en film die hij of zij heeft bekeken met de meest recent bekeken content voor in de lijst. Om zich door de lijst te kunnen bewegen zal de gebruiker de pijl toetsen moeten gebruiken. Om deze uitgebreide lijst verder te specificeren kan de gebruiker 3 knoppen gebruiken. 1. Gisteren: Nu ziet de gebruiker enkel een lijst met programma s of films die de gebruiker de vorige dag heeft bekeken. 2. Laatste 7 dagen: Nu ziet de gebruiker een lijst met programma s of films die de gebruiker de afgelopen 7 dagen heeft bekeken. 3. Laatste maand: Nu ziet de gebruiker een lijst met programma s of films die de gebruiker de afgelopen maand heeft bekeken. ( Zie wireframe en schermontwerp 5.5 ) Playlist 5.6: Op deze pagina kan de gebruiker een keuze maken tussen de twee volgende opties: - Playlist maken - Playlist bekijken ( Zie wireframe en schermontwerp 5.6 ) Playlist maken 5.6.1: Op deze pagina kan de gebruiker zijn eigen playlist maken. De gebruiker dient zoekacties in te voeren om zo ui de zoekresultaten programma s of films toe te voegen aan de desbetreffende playlist. De gebruiker klikt op het kruisje bij het programma of de film die hij wil toevoegen aan de playlist en deze wordt vervolgens door de applicatie toegevoegd aan de playlist. )

10 De gebruiker kan zich door middel van de pijl toetsen door de lijst met zoekresultaten heen verplaatsten Wil de gebruiker een uitgebreidere zoekactie uitvoeren dan drukt deze op de knop geavanceerd zoeken. De playlist die de gebruiker aan het maken is ziet hij aan de rechterkant van het scherm. Zo kan hij zien welke programma s of films hij of zij al heeft toegevoegd. Door te scrollen kan de gebruiker zich door deze playlist heen verplaatsen Wil de gebruiker items verwijderen uit zijn of haar playlist dan drukt deze op het item in de playlist rechts in beeld. Het programma of film zal zichzelf dan verwijderen uit de lijst. Wanneer de gebruiker tevreden is over de door hem samengestelde playlist kan hij of zij deze opslaan door op de opslaan knop te drukken. ( Zie wireframe en schermontwerp ) Playlist bekijken 5.6.2: Op deze pagina kan de gebruiker de door hem of haar gemaakte playlists bekijken. Dit doet de gebruiker door een playlist te selecteren aan de rechterzijde van het scherm. Na het selecteren van de playlist kan de gebruiker deze bekijken en door middel van de pijl toetsen kan de gebruiker zichzelf door de playlist heen bewegen. ( Zie wireframe en schermontwerp ) Usecases MyTV Deze onderstaande usecase hebben mij geholpen bij het ontwerpen van deze applicatie. Ik heb deze usecases gebruikt om aan de hand van taken binnen de applicatie de interactie tussen het medium en de mens ( de gebruiker ) uit te kunnen leggen. Usecases applicatie MyTV: 1. Naam: Precondities: Actoren: Stappenplan: Uitbreidingen: Algemene instellingen veranderen N.v.t. TV kijker 1. De gebruiker kiest de optie algemene instellingen in het menu. 2. De gebruiker kiest een instelling die hij of zij wil veranderen. 3. De gebruiker verandert de instelling die hij of zij wil veranderen. 4. De gebruiker slaat de instelling op. N.v.t. *+

11 Uitzonderingen: 2. Naam: Precondities: Actoren: Stappenplan: Uitbreidingen: Uitzonderingen: 3. Naam: Precondities: Actoren: Stappenplan: Uitbreidingen: Uitzonderingen: 4. Naam: Precondities: Actoren: Stappenplan: N.v.t. Zoeken N.v.t. TV kijker 1. De gebruiker kiest de optie zoeken in het menu. 2. De gebruiker voert een zoekactie in. 3. De gebruiker drukt op zoeken. 4. De zoekresultaten worden weergegeven. 5. De gebruiker kan een van de zoekresultaten selecteren. 6. ( zie programma bekijken ) 4a. De gebruiker kan de keuze maken om een geavanceerde zoekactie uit te voeren. - Wanneer er geen zoekresultaten kunnen worden gevonden dan krijgt de gebruiker een foutmelding. - De gebruiker kan altijd een zoekactie invoeren in de zoek balk bij het menu, zo hoeft de gebruiker niet eerst naar deze pagina. ( pagina 3.1 ) Programma bekijken N.v.t. TV kijker 1. De gebruiker kiest de optie programma bekijken in het menu. 2. De gebruiker maakt een keuze uit 1 van de 6 categorieën. 3. De gebruiker kiest een programma uit de lijst van programma s. 4. De gebruiker selecteert een programma om dit programma te kunnen bekijken. 2a. Wanneer de gebruiker de categorie film kiest, kan de gebruiker ook nog tussen verschillende filmgenres kiezen. 3a. De gebruiker navigeert aan de hand van de pijlknoppen terug of verder door de lijst met programma s. 4a. De gebruiker maakt de keuze om het desbetreffende programma toe te voegen aan de playlist. N.v.t. Persoonlijke aanbevelingen bekijken Database met het kijkgedrag van de gebruiker. ( opgebouwde geschiedenis aan reeds bekeken content. ) TV kijker 1. De gebruiker kiest de optie persoonlijk in het menu. 2. De gebruiker kiest vervolgens voor de optie Persoonlijke aanbevelingen. **

12 Uitbreidingen: Uitzonderingen: 5. Naam: Precondities: Actoren: Stappenplan: Uitbreidingen: Uitzonderingen: 6. Naam: Precondities: Actoren: Stappenplan: Uitbreidingen: Uitzonderingen: 7. Naam: Precondities: Actoren: Stappenplan: 3. De gebruiker ziet aanbevelingen van programma s en films aangepast aan het kijkgedrag van de gebruiker. 4. De gebruiker selecteert een persoonlijke aanbeveling. 5. ( zie programma bekijken, usecase 3 ) 5a. De gebruiker navigeert aan de hand van de pijlknoppen terug of verder door de lijst van persoonlijke aanbevelingen. 3a. Wanneer de gebruiker nog geen geschiedenis heeft opgebouwd kunnen er geen persoonlijke aanbevelingen worden gedaan, de gebruik krijgt dan een foutmelding. Persoonlijke TV zender bekijken N.v.t. TV kijker 1. De gebruiker kiest de optie persoonlijk in het menu. 2. Vervolgens kiest de gebruiker de optie persoonlijke TV zender. 3. Vervolgens kan de gebruiker zien welk programma er nu is op zijn persoonlijke TV zender ( NU ). Tevens ziet hij welk programma er na het programma wat nu op de TV zender is te zien zal zijn ( STRAKS ). 4. Om de persoonlijke TV zender te bekijken selecteert de gebruiker het programma onder NU. N.v.t. 3a. Wanneer de gebruiker nog geen geschiedenis heeft opgebouwd zal er geen persoonlijke TV zender zijn om te bekijken, de gebruik krijgt dan een foutmelding. Geschiedenis bekijken N.v.t. TV kijker 1. De gebruiker kiest de optie persoonlijk in het menu. 2. De gebruiker kiest vervolgens de optie geschiedenis. 3. De gebruiker kiest een programma of film uit de geschiedenis. 3a. De gebruiker kan de geschiedenis filteren. De gebruiker kan kiezen voor: gisteren, laatste 7 dagen en laatste maand. Als er geen geschiedenis is opgebouwd dan krijgt de gebruiker een foutmelding. Playlist maken N.v.t. TV kijker 1. De gebruiker kiest in het menu de optie persoonlijk. 2. Vervolgens kiest de gebruiker voor de optie playlist. 3. Nu de gebruiker de optie playlist maken. *"

13 Uitbreidingen: Uitzonderingen: 8. Naam: Precondities: Actoren: Stappenplan: Uitbreidingen: Uitzonderingen: 4. De gebruiker vult een zoekactie in. 5. De gebruiker drukt op de zoeken. 6. De gebruiker kiest vervolgens uit de lijst met zoekresultaten welke programma s of films hij of zij wil toevoegen aan de playlist. 7. De gebruiker slaat de playlist op door op de knop opslaan te drukken. 3a. De gebruiker kan ook een uitgebreide zoekactie uitvoeren door op de knop geavanceerd zoeken te drukken. 5a. De gebruiker kan ook programma s of film direct uit de playlist verwijderen door op deze te drukken in de playlist. 4a. Wanneer de zoekactie geen zoekresultaten oplevert dan krijgt de gebruiker een foutmelding te zien. Playlist bekijken N.v.t. TV kijker 1. De gebruiker kiest in het menu de optie persoonlijk. 2. Vervolgens kiest de gebruiker voor de optie playlist. 3. Nu de gebruiker de optie playlist bekijken. 4. De gebruiker kiest een playlist door deze te selecteren. 5. De gebruiker kiest een item ( programma of film ) en de playlist begint vervolgens met afspelen. 5a. De gebruiker navigeert aan de hand van de pijlknoppen terug of verder door de lijst programma s of films die zich in de desbetreffende playlist bevinden. N.v.t. *#

14 Wireframes MyTV Hieronder vindt u de wireframes waar ik al in de uitleg van de pagina naar heb verwezen. Deze wireframes hebben zijn de basis geweest voor de schermontwerpen die verder op in de document te vinden zijn. *$

15 *%

16 *&

17 *'

18 *(

19 *)

20 "+

21 "*

22 ""

23 Schermontwerpen MyTV Hieronder vindt u de schermontwerpen. Deze schermontwerpen corresponderen met de wireframes. Landscape mode / Portrait mode De applicatie kan op twee manieren worden gebruikt. Dat wil zeggen in de landscape mode of de portrait mode. Landscape mode = liggend Portrait mode = Staand Het uiterlijk van de applicatie blijft gelijk in beide manieren de lay-out verandert enkel om dit zo goed mogelijk op het beeldscherm te laten passen: Voorbeeld: Landscape mode Home pagina: Portrait mode Home pagina: "#

24 Portrait mode Home pagina: Zoals u ziet zijn beide manieren qua vormen, kleurgebruik en content hetzelfde alleen de lay-out zal anders worden weergegeven vanwege de verandering van hoogte en breedte van het beeldscherm. Hieronder vindt u de rest van de schermontwerpen. Deze zijn ontworpen in de landscape mode. Deze voorgaande twee voorbeelden moeten u een idee geven over hoe alle pagina s veranderen wanneer deze in de portrait mode worden gebruikt. De schermontwerpen zijn uitgewerkt in de landscape mode omdat dit voor deze applicatie meer geschikt is. Dit in verband met bijvoorbeeld het afspelen van video s. "$

25 Schermontwerp 0.0 Home "#

26 Schermontwerp 0.1 Menu MyTV open "$

27 Schermontwerp 1.0 Programma bekijken "%

28 Schermontwerp 1.1 Programma bekijken > Programma informatie "&

29 Schermontwerp 2.1 Programma bekijken > Nieuws "'

30 Schermontwerp 2.2 Programma bekijken > Film ()

31 Schermontwerp Programma bekijken > Film > Genres (*

32 Schermontwerp 3.1 Zoeken ("

33 Schermontwerp 3.2 Zoeken > Zoekresultaten ((

34 Schermontwerp 3.3 Zoeken > Geavanceerd zoeken (+

35 Schermontwerp 4.1 Algemene instellingen (#

36 Schermontwerp 5.1 Persoonlijk ($

37 Schermontwerp 5.2 Persoonlijk > Persoonlijke aanbevelingen (%

38 Schermontwerp 5.4 Persoonlijk > Persoonlijke TV-zender (&

39 Schermontwerp 5.5 Persoonlijk > Geschiedenis ('

40 Schermontwerp 5.6 Persoonlijk > Playlist +)

41 Schermontwerp Persoonlijk > Playlist > Playlist maken +*

42 Schermontwerp Persoonlijk > Playlist > Playlist bekijken +"