Functioneel Ontwerp. Tv-guide Widget. Fenna van Kesteren CMD3IIB

Functioneel Ontwerp Tv-guide Widget Fenna van Kesteren CMD3IIB

Inhoudsopgave

Functionaliteit ...................................................................................................... Schetsen ...................................................................................................... Informatiearchitectuur............................................................................................ Interactief Concept ................................................................................................. Functionaliteiten met hun objecten, properties, behaviours en relations..............

3 4 6 8 10

2

Functionaliteit Een widget is een kleine applicatie die snel toegang geven tot veelgevraagde informatie. Het zijn kleine brokjes kernfunctionaliteit die internetsites beschikbaar stellen1. Er zijn tegenwoordig talloze voorbeelden te bedenken, zoals een mini-buienradar of een Nu.nl-nieuwsoverzichtje. Ze worden ook wel gadgets genoemd en er wordt voorspeld dat widgets de browser van nu zullen gaan verstoten. Mensen zullen steeds meer op hun eigen manier het internet benaderen, en zelf hun informatie verzamelen en organiseren2. Deze widgets zijn terug te vinden op Apple’s Dashboard, SuperKaramba (KDE) en op DesktopX van Microsoft Windows. De widgets kunnen ook in een weblog geplakt worden of op Hyves- of MySpace-profielen. Wat nog niet genoemd is en wel in ontwikkeling is eenzelfde soort applicatie, een kleine internetinformatiebron, is de widget/gadget voor op een mobiele telefoon. Omroep.nl is een veelgebruikte website voor het opvragen van bijvoorbeeld de televisiegids. Op de homepagina staat een klein overzicht van wat er nu op televisie te zien is en wat “straks”. Om aan de razende widget-ontwikkeling te voldoen heeft Omroep.nl gevraagd om een widget te ontwikkelen die bepaalde functionaliteiten bevat. De widget moet op een dashboard, sidebar of in Konfabulator/Yahoo! Widgets geplaatst kunnen worden, maar moet ook op een mobiele applicatie gebruikt kunnen worden. De functionaliteiten die de widget bevatten zijn: • De widget geeft de programma’s van de publieke omroepen (Nederland 1, Nederland 2 en Nederland 3) weer. • De widget geeft een overzicht van wat er nu te zien en wat er straks (binnen een uur) te zien is. • De widget geeft een overzicht van alle programma’s per zender en per dag weer. • De widget geeft een overzicht van alle programma’s voor de komende week weer. • De widget heeft een mogelijkheid van een alert-functie voor een door de gebruiker gekozen programma. • De widget heeft één eigen extra functionaliteit, namelijk een lifestreaming TV-widget van programma’s die op dit moment bezig zijn. • De widget wordt gevisualiseerd in een prototype (papier en/of Flash/HTML) en functioneel ontwerp. • De widget voor op een dashboard, sidebar of in Konfabulator/Yahoo! Widgets heeft een schermafmeting van 400 bij 400 pixels. • De widget voor op een mobiele applicatie heeft een schermafmeting van 240 x 320 pixels. Voor zover algemene zaken over de widget. Ik ga nu in op inhoudelijke ontwerpkeuzes en functionaliteiten van de widget. Deze zijn te vinden in de volgende hoofdstukken. Let op: de widget die gebruikt kan worden op Apple’s Dashboard, SuperKaramba, DesktopX, Konfabulator en Yahoo! Widgets zal ik in de rest van dit document beschrijven als “widgets voor computergebruik”.

1 Wikipedia 2 Emerce: Widget-war

3

Schetsen

4

5

Informatiearchitectuur Om de informatiearchitectuur duidelijk weer te geven van de widget heb ik een flowchart van de widget gemaakt. Ik heb geen onderscheid gemaakt tussen de informatiearchitectuur van de mobiele applicatie en de widget voor op een dashboard. De reden waarom, is dat ik heb gekozen voor telefoongebruikers met een touchscreen. Dit wordt uigebreid beschreven in een ISGVO-model, een model die het interactief concept beschrijft. De informatiearchitectuur is te vinden op de volgende pagina, weergegeven in een flowchart.

6

Informatiearchitectuur

7

Interactief Concept Het Interactief Concept maak ik duidelijk aan de hand van een ISGVO-analyse. Het ISGVO-model kan mij helpen om op basis van vijf categorieën het gehele interactieve concept van de widget uit te leggen. Alle elementen die in de widget voorkomen worden hierin kort en bondig beschreven. De vijf categorien zijn opeenvolgend: Inhoud, Structuur, Gedrag, Vormgeving en Omgeving. Inhoud Omroep.nl wil vanwege de opkomende widget-ontwikkeling zich bewijzen met een originele televisiegids als widget. Deze moet niet alleen beschikbaar zijn via computergebruik, maar ook via de mobiele telefoon. De widget voor de mobiele telefoon is in mijn geval alleen te bekijken met een mobiele telefoon die beschikt over touchscreen en live-streaming televisie. Dit laatste is echter niet van belang als de extra functionaliteit niet meetelt. Het principe van een telefoongids bestaat ook zonder het live-televisie kijken. Met mijn ontwerp heb ik geprobeerd om veel informatie in een overzichtelijke widget te plaatsen. Er is direct te zien wat er nu op televisie is en straks, maar het is ook heel gemakkelijk om te kijken wat er over de rest van de dag te zien is of nog te zien valt. Door het gebruik van een scroll-rad kan er gemakkelijk worden genavigeerd tussen een lange lijst van programma’s. Wat mijn ontwerp tevens uniek maakt is het gebruik van layers, waardoor de gebruiker in staat is zelf zijn eigen structuur in te delen. Ook de mogelijkheid om de widget groter of kleiner te maken maakt het voor de gebruiker ideaal om zijn eigen schermweergave te bepalen. Tot slot de mogelijkheid om live de programma’s te bekijken die er nu te zien zijn is voor de gebruiker ideaal om ‘even snel’ zijn programma live, via de computer of via de telefoon, te bekijken. Structuur Het navigeren door de telefoongids is makkelijk gemaakt door het gebruik van een scroll-rad. De gebruiker is op deze manier in staat om zelf de hoeveelheid informatie, wanneer hij maar wil, op zich te nemen. Het scroll-rad draait aan de hand van de recente tijd. Zo is er altijd te zien wat er op dit moment voor programma bezig is en kan er snel bekeken worden hoelang een programma is en wanneer het volgende programma begint. In het weekoverzicht is de structuur opdezelfde manier opgebouwd. Altijd is er te zien wat er nu te zien is, hoelang dit programma duurt en wat er straks te zien is. In het weekoverzicht is dit echter ook te zien van andere dagen. De gebruiker kan dieper in het systeem komen door een programma aan te klikken. Als het programma nu bezig is zal er live-televisie kunnen worden gekeken. Als het programma niet bezig is kan er algemene informatie worden opgevraagd en een alarmfunctie worden ingesteld. Bij computergebruikers zal dit in de vorm zijn van een alert op de desktop, bij telefoongebruikers door een sms. Gedrag Feedback door de widget wordt altijd gegeven. Het scroll-rad draait met de klok mee en geeft informatie welk programma er nu te zien is en welk programma er over een uur te zien is. De gebruiker beschikt dus altijd over informatie maar kan zijn hoeveelheid informatie naar eigen gelangen aanpassen. Het scroll-rad zorgt voor een overzicht van programma’s over de hele dag. Hij kan links-om worden gedraaid, maar ook

8

rechts-om. Er kan op programma’s worden geklikt en layers kunnen worden verplaatst. De interactiviteit met verschillende objecten wordt bij de computerwidget geactiveerd door het muisgedrag, bij de mobiele telefoon door het gebruik van 1 vinger. Het scroll-rad, de scrollbalk naast de zenders, en het verplaatsen van layers maakt gebruik van een sleeptechniek. Andere objecten bevatten mouse-overs (alleen bij de computerwidget), en brengen de gebruiker door 1 simpele klik dieper in de hiërarchie. Uitgebreide gedragingen van objecten uit de gehele widget staan beschreven en vooral gevisualiseerd in het volgende hoofdstuk. Vormgeving Ik heb gekozen voor een vormgeving die past in de stijl van Omroep.nl. De kleuren oranje, blauw, grijs en wit zijn hier vooral ondersteunend aan. Ik heb gekozen voor een 3D object (het scroll-rad) om de gebruiker het gevoel te laten geven van het echt ronddraaien van een rad Ik heb gekozen om weinig tekst te gebruiken, maar vooral iconen. De widget is klein, maar moet overzichtelijk blijven. Door het gebruik van kleuren, contrasten en iconen blijft deze overzichtelijke structuur bestaan. Meer over de uiterlijkheden is gevisualiseerd in het volgende hoofdstuk. Omgeving De widget is voor twee platformen ontworpen. Enerzijds is de widget ontworpen voor pc/mac-gebruik. De televisiegids is op elk moment van de dag beschikbaar en wordt elke minuut ge-update, door het met de klok mee draaiende scroll-rad. Natuurlijk is er voor deze widget een computer nodig, maar voor mobiele telefonie is er ook een mogelijkheid om deze widget te gebruiken. Ik richt me op de doelgroep die een telefoon heeft met een touchscreenscherm. Als de gebruiker ontdekt dat zijn favoriete programma begonnen is kan er live televisie worden gekeken, achter de pc, maar ook via de telefoon (mits deze beschikt over live-streaming beelden). Met de mogelijkheid om een alert-functie aan een programma te koppelen kan de gebruiker op iedere lokatie worden herinnerd aan het feit dat zijn favoriete programma begint. Er kan direct live-televisie worden gekeken. Programma’s zullen nooit meer worden gemist.

9

Functionaliteiten met hun objecten, properties, behaviours en relations. In dit hoofdstuk ga ik per functionaliteit verschillende elementen beschrijven. In elke functionaliteit wordt met een wireframe de interface duidelijk gemaakt, worden de objecten beschreven en gevisualiseerd, worden de properties (kenmerken) van deze objecten beschreven en gevisualiseerd, worden de behaviours (het gedrag) van deze objecten beschreven en gevisualiseerd en tot slot worden de relations (relaties) tot andere objecten en functionaliteiten beschreven en gevisualiseerd. De functionaliteiten die ik opeenvolgend ga bespreken zijn: - De opstartinterface van de widget - Het verplaatsen van de hiërarchie van de zenders - Het vergroten of verkleinen van de widget - Een programma live bekijken - Informatie opvragen van een programma en het alarm instellen - Bekijken van het dagoverzicht van meerdere zenders - Bekijken van een weekoverzicht van 1 zender

10

De opstartinterface van de widget Wanneer de gebruiker de widget opstart krijgt hij het volgende te zien:

Screen Layout 22:00

23:00

Raymann is laat

Journaal

Nova

KRO detect iv

es

Junior Eurovisie Songfestival

RTL V oetbal

zes re Ha d n A t In duet me

Ik heb gekozen om de kleuren en vormen van omroep.nl over te nemen. De zenders heb ik met iconen aangegeven, want ik ben van mening dat geschreven zenders zoals: Ned 1, overbodig zijn. Zoals te zien is zijn er vele soorten objecten waar de gebruiker mee geconfronteerd wordt. Elk object zal ik beschrijven met hun kenmerken, gedrag en relaties. Eerst heb ik op de volgende pagina een wireframe gezet van de opstartinterface om aan te geven waar alle s gepositioneerd is en wat het precies is.

11

Wireframe opstartinterface Tijd van nu in uren en minten

Scrollbalk voor het navigeren door lijst van alle zenders

Stilstaand object. Zenders op een rij

Tijd over een uur in uren en minten

Scroll-rad met overzicht programma’s per zender. Draait per minuut een tikje verder naar links

Zender, aanklikbaar voor weekoverzicht

Alarm icoon Programma (aanklikbaar)

Layer televisiezender individueel verplaatsbaar

Donker; programma = bezig Middel; programma moet nog beginnen (niet in opstartfase: licht; programma is al geweest)

12

Het verplaatsen van de hiërarchie van de zenders Een layer ziet er als volgt uit:

De layer heeft een donkerblauwe of lichtblauwe achtergrondkleur. Dit om de verschillende layers overzichtelijk weer te geven. Ze staan om en om, om de logische structuur van zenders weer te geven. Midden in de layer staat het icoon van de televisiezender. De layers kunnen door de gebruiker verplaatst worden. Als de gebruiker de hiërarchie van de zenders wil veranderen dan ziet dat er als volgt uit: Als de gebruiker klikt en de muisknop ingedrukt houdt op de layer wordt hij oranje. Raymann is laat

Journaal

Nova

KRO detect iv

es

Junior Eurovisie Songfestival De gebruiker beweegt naar de desbetreffende layer die hij wil verplaatsen

RTL V oetbal

H Andre t e m t e u d n I

s aze

De gebruiker sleept de layer naar de desbetreffende plek en de layer “snapt” tijdens het slepen tussen twee andere layers in.

13

Er verschijnt een oranje highlight tussen de twee layers om aan te geven waar de layer terechts komt.

Journaal

Wanneer er losgelaten wordt door de gebruiker verspringt de layer naar de plek. naal Jour

Raymann is laat

Nova

KRO detect iv

s aze H e r d An In duet met

KRO d

etect ives


es


RTL V oetbal

Nova

Raymann is laat RTL V oetbal

H Andre t e m t e u d In

s aze

Zoals te zien is verplaatst niet alleen de layer met de zender, maar verplaatst ook de vastgekoppelde layer met programma’s.

14

Het vergroten of verkleinen van de widget Hierin verschilt de widget van de mobiele applicatie met die van de widget voor computergebruik. Omdat het scherm van een mobiele applicatie maar zeer klein is, kan de widget niet veel groter worden dan hoe hij nu ontworpen is. Daaromkan er bij de widget voor de mobiele telefoon alleen door de scrollbalk genavigeerd worden. De grootte van de widget op de mobiele applicatie staat dus vast. De widget voor computergebruik is wel groter of kleiner te maken.

22:00

23:00

22:00

22:00

23:00

Raymann is laat Journaal

Nova

Raymann is laat

KRO detect iv

es

De cursor van de muis verandert in een uitschuifpijltje.

Journaal

Junior Eurovisie Songfestival RTL V oetbal

And In duet met

Nova

KRO detect iv

es


zes re Ha

RTL V oetbal

And In duet met

zes re Ha

De volgende zender zal nu ook in het aanzicht te zien zijn met de bijbehorende zenders. De scrollbalk verandert uiteraard ook van grootte. De cursor zal tijdens het slepen van de rand van de widget “snappen” bij het onderste punt van de volgende zender (in dit geval RTL5). Verkleinen gebeurt op dezelfde manier (zie volgende pagina). De cursor zal ook hier snappen bij de onderste rand.

15

De gebruiker sleept met de cursor naar boven.

22:00

23:00

22:00

Nova


23:00

Raymann is laat

Raymann is laat

Journaal

De cursor “snapt” naar de onderkant van Nederland 3.

KRO detect iv

es

Journaal

Nova

KRO detect iv

es


16

Een programma live bekijken Als extra functionaliteit heb ik ervoor gekozen om de gebruikers live televisie te laten kijken. Dit kan tegenwoordig ook bij mobiele applicaties. Ik richt me daarom ook alleen op telefoons met deze mogelijkheid. Het bekijken van een programma live gebeurt op de volgende manier: Klikt de gebruiker op het programma dan verschijnt er een pop-upvenster. Als de gebruiker de muis over een programma beweegt (alleen in de widget voor computergebruik) wordt het programma donkerder.

22:00

23:00

22:00 22 2:0 00

23:00 23 3:0

Raymann is laat

Journaal

Nova

Raymann is laat KRO detect iv

es

Journaal


RTL V oetbal

s aze H e r d An In duet met

Nova

KRO detect iv

es


RTL V oetbal

H Andre In duet met

s aze

17

Dit is het pop-up venster met verschillende elementen. Wederom heb ik een wireframe van dit venster gemaakt.. Afsluitknop van programma live bekijken

Raymann is laat

Wireframe live programma bekijken

Icoon zender

Programmanaam

Beeldvenster

Beschrijving programma

Latenightshow. Bij Tante Es vandaag Frans Bauer. In de rubriek Rood Wit Blauw is te gast Frank Heemskerk, staatssecretaris van Economische Zaken. Verder een optreden van zangeres Berget Lewis.

Streaming balk

Play, pauze en stop-functie

18

Het pop-upvenster is door de computergebruikers dragable. Voor de mobiele gebruikers niet. De muiscursor verandert in een handje op de plekken waar het pop-upvenster dragble is (het oranje gedeelte).

Als de gebruiker de muis ingedrukt houdt wordt de cursor een dichtgeknepen handje totdat de gebruiker hem loslaat.

Raymann is laat

Raymann is laat



19

Mouse over op andere knoppen zoals sluiten, play, pauze en stoppen maken de knop lichtoranje (alleen voor de computerwidget.

Raymann is laat


20

Informatie opvragen van het programma en het alarm instellen Als de gebruiker informatie wilt hebben over een programma wat nog komen gaat kan de gebruiker dit doen door er simpelweg op te drukken. Er verschijnt weer een pop-upvenster, maar dit keer met uitgebreide informatie en de mogelijkheid om een alarm in te stellen. Een alarm instellen kan alleen voor de programma’s die nog moeten beginnen. Programma’s die al geweest zijn zijn alleen te bekijken met een informatievenster. Klikt de gebruiker op het programma dan verschijnt er een pop-upvenster. Als de gebruiker de muis over een programma beweegt (alleen in de widget voor computergebruik) wordt het programma donkerder.

22:00

23:00

22:00 22 2:0 00

23:00 23 3:0

Raymann is laat

Journaal

Nova

Raymann is laat KRO detect iv

es

Journaal


RTL V oetbal


Nova

KRO detect iv

es


RTL V oetbal


21

Nu met uitgebreide informatie over het programma en de mogelijkheid om een alarm in te stellen. Het aflsuitknopje werkt op dezelfde manier als bij het live tv kijken.

RTL Voetbal: Eredivisie 23:50

Als de gebruiker er op drukt heeft de gebruiker een keuze tussen twee tijdstippen.

22:30 -


22:30 -

Alarm instellen

Alarm instellen

RTL Voetbal: Eredivisie De vandaag gespeelde wedstrijden uit de Nederlandse Eredivisie. O.a. Willem II - Ajax, Excelsior NAC Breda, Heracles Almelo - De Graafschap, Vitesse - FC Twente. Presentatie: Humberto Tan.

RTL Voetbal: Op de tijdEredivisie zelf De vandaag gespeelde wedstrijden uit de Nederlandse Eredivisie. Willem II - Ajax, Excelsior Ander tijdstip O.a. 1 kwartier van te voren NAC Breda, Heracles Almelo - De Graafschap, Vitesse - FC Twente. Presentatie: Humberto Tan.

22

Als de gebruiker een keuze maakt verschijnt er een donkerblauw keuze bolletje en het icoontje voor de alarmfunctie.


22:30 -

Bij ander tijdstip kan met het uitschuifpijltje gebruiken om meerdere keuzes te zien.


Alarm instellen

Alarm instellen

Op de tijd zelf

Op de tijd zelf

Ander tijdstip

1 kwartier van te voren

Ander tijdstip

22:30 -

1 kwartier van te voren 1 kwartier van te voren 1 half van te voren 1 uur van te voren 2 uur van te voren

23

Via een mouseover (alleen bij de computerwidget) krijgt de gebruiker feedback over welk tijdstip hij kiest.


22:30 -

Alarm instellen Op de tijd zelf Ander tijdstip

1 kwartier van te voren 1 kwartier van te voren 1 half van te voren 1 uur van te voren 2 uur van te voren

23

Bekijken van het dagoverzicht van meerdere zenders Ik heb bij mijn ontwerp gebruik gemaakt van een groot scroll-rad. De werking ervan heb ik geprogrammeerd met flash. Dit prototype is te vinden op: www.fennavankesteren.nl/cmd/gids2.html Helaas is het niet gelukt om een 3d-effect erin te krijgen. Deze moet er eventjes bij worden gevisualiseerd, zoals op de bovenste plaatjes zichtbaar is. Het effect wat er overheen zou komen is een “Fish-eye”-effect. Hierdoor lijkt het rad 3 dimensionaal rond te gaan. Door middel van het slepen met de muis kan het rad worden rondgedraaid. Er kan hard worden rondgedraaid, maar ook zacht. Als je het rad echt een zet geeft (slepend een lijn trekkend) dan blijft het rad draaien tot je ergens op het rad nog een keer op drukt. Dan stop het rad onmiddelijk. De tijd loopt mee met de snelheid waarin het rad draait en zijn gekoppeld aan de programma’s. Als je terug wilt gaan naar het tijdstip van nu kan er op de knop “terug naar het overzicht van nu”. Deze interactie is ook door te voeren in een mobiele telefoon (in plaats van de muis, een vinger) als ik me richt op gebruikers die een mobiele telefoon hebben met een touchscreen.

22:00

23:00

Terug naar overzicht nu

Raymann is laat

Journaal

Nova

KRO detect iv

Slide to spin

es


RTL V oetbal

H Andre t e m t e u d In

s aze

24

Bekijken van het weekoverzicht van 1 zender Voor m ijn ontwerp heb ik ervoor gekozen om maar van 1 zender het weekoverzicht te kunnen bekijken. Ik ben van mening dat het anders erg onoverzichtelijk wordt Je komt hier door simpelweg op het icoontje van de zender te klikken. In principe werkt het scroll-rad precies hetzelfde als bij het dagoverzicht van alle zenders. Dit keer zijn de layers geen zenders, maar dagen. Ik heb het gevisualiseerd in een scherm-layout

22:00

23:00

WED THU FRI SAT SUN

De dag die boven aanstaat is de dag van vandaag. Ook de tijd is de tijd van nu. Als de gebruiker terug wilt kijken wat er gisteren of eergisteren was kan hij naar boven scrollen met de scrollbalk links. Als de gebruiker wilt weten wat er voor de andere dagen te zien is kan er naar de andere layers gekeken worden. Voor andere tijdstippen kan het scroll-rad worden gedraaid. De interactie van het scroll-rad werkt opdezelfde manier als bij het dagoverzicht. Eigenlijk werkt alles opdezelfde manier, alleen is hier een weekoverzicht te zien van alle programma’s die op een bepaalde zender te zien zijn.

25

Functioneel Ontwerp. Tv-guide Widget. Fenna van Kesteren CMD3IIB

Recommend Documents