Opdracht omschrijving Doel van de website Context Zoekopties User goals Wat verwachten gebruikers? Mijn mentale model: Het mentale model verse gebruiker Toelichting mentale modellen: Waarom zijn deze hetzelfde/anders Patterns op alle niveau’s Ontwerp Funnels Flowchart Schermverloop diagram Wireframes Conceptueel model Onderbouwing feedback Onderbouwing ontwerpen Conclusie en advies Bijlage Feedback formulier Bronnen
Opdracht omschrijving Ontwerp een nieuwe interface voor het uitzending gemist van RTL.nl. Er zijn 3 stappen die we hierbij moeten volgen. We moeten bij stap 1 het primaire gebruikersdoel bepalen. Bij dit gebruikersdoel moeten we procesfunnels maken. Bij stap 2 gaan we aan de hand van design patterns de onderbouwing schrijven die het gebruikersdoel ondersteund. Als laatste bij stap 3 zal het uitgewerkt worden in een wireflow en de uitgewerkte procesfunnels zullen in de vorm van een flowchart beschreven worden.
Doel van de website Als eerste moet dus een doel worden vastgesteld voor uitzending gemist van RTL. Ik ben zelf een gebruiker van uitzending gemist van rtl dus dit moet niet zo moeilijk zijn. Ik ga naar uitzending gemist van RTL als ik een aflevering van GTST wil terug kijken. Hieruit kan ik dus opmaken dat het gebruikersdoel van de website is: “Het terugkijken van een gemiste aflevering van de serie GTST.” Om dit doel te bereiken zijn er meerdere zoekopties mogelijk zodat de gebruiker op zo’n makkelijk mogelijke manier tot zijn gebruikersdoel kan komen. Maar bij elke aflevering zit er ook een stuk reclame voor. Dit is het business doel: omzet genereren door advertenties voor de programma’s te plaatsen. Dit genereert de mogelijkheid tot betaalde content.
Context Sence mist bijna geen aflevering van GTST alleen moet Sence soms trainen zoals op de woensdag dus mist ze wel eens een aflevering. Deze wil ze natuurlijk wel terug kijken dus zal ze dit op de website moeten doen. Om haar een zo makkelijk mogelijke manier te geven om dit terug te kunnen kijken wil ik dat je een account nodig hebt waarin je je favoriete series kunt zetten (alleen wil ik dit niet verplichten voor als je 1x iets terug wilt kijken). Zodat je als eerste kan kiezen voor de serie die je terug wilt kijken. Bij deze is dat dus GTST. Maar ik wil ook de optie hebben dat ze kan zoeken naar een andere serie. Hiervoor zijn zoekopties nodig. Hiervoor wil ik dat je kan filteren op alfabetische volgorde, zenders en dagen.
Zoekopties Laten we aanhouden dat Sence GTST wilt toevoegen aan haar favorieten en ze dus op zoek is naar GTST. De zoekmanieren die ze kan gebruiken zijn dus: Op specifieke titel zoeken Video’s op de homepage Via een filter de aflevering vinden Op je account in favorietenlijst vinden Deze zoekopties heb ik weergegeven in funnels. 3
User goals
Voor het gemak geef ik de gebruiker de naam Sence. Sence heeft een aantal goals waarom ze naar Uitzending Gemist van RTL gaat. - Ze wil een uitzending van GTST terug kijken die ze heeft gemist door een training - Ze wilt wel blijven trainen - Ze wilt dit lekker thuis doen waarbij ze lekker ontspannen kan terug kijken - Ze wil worden entertaint - Ze wil niet teveel handelingen moeten doen
Wat verwachten gebruikers? Mijn mentale model:
4
Het mentale model verse gebruiker
Toelichting mentale modellen: Waarom zijn deze hetzelfde/anders De mentale modellen verschillen voor een gedeelte maar niet veel. Je weet namelijk dat een serie op een zender wordt afgespeeld en dat je de naam van de serie moet weten. Tegenwoordig moet je voor veel dingen een account hebben dus lijkt me de vraag of het voor dit ook handig zou zijn niet zo raar.
Patterns op alle niveau’s Design patterns
Posture Pattern 2 Sovereign Het is een verzameling van functies die voor langere tijd worden gebruikt. Het is volledig schermbedekkend en wordt gebruikt door de intermediate user. RTL gemist gebruik je voor langere tijd omdat je een aflevering zoekt en deze wilt kijken. Daarnaast ga je ondertussen niet andere dingen zitten doen omdat je een specifiek programma terug wilt kijken en er dan de tijd voor hebt. De intermediate user is een gebruiker die weet wat hij doet maar geen expert is.(het grootste gedeelte van de gebruikers). 1,2 Transient o A-Z zoekfilter gebruik je alleen als het nodig is het is dan ook eenvoudig te gebruiken en je hoeft er niet speciaal vertouwt mee te zijn. 1,2
5
Structural pattern Hier wordt een structuur van informatie op het scherm weergegeven. 1
6
o
Main Navigation dit is gewoon het hoofdmenu wat je bij elke website terug vind en nodig hebt. 2
o
Site Index deze wordt weergegeven in het A-Z zoekfilter. 2
Behavioral pattern Je hebt hierbij een specifieke interactie met elementen. o Searchbox dit is een navigatie element 2
o
Autocompletion hierbij krijg je een vorm van feedback 2
Overige patterns o Newsbox zorgt dat er altijd nieuwe updates zijn van de afleveringen en dat deze bovenaan staan. 2
7
o
Thumnails kleine weergave van foto/aflevering. 2
o
Immediate feedback zorgt dat gebruiker direct feedback krijgt op zijn/haar acties bij bijvoorbeeld fouten bij het inloggen. 3 Feedback Bij het laden van een aflevering krijg je een laad icoon te zien. 3
Sence komt op RLT gemist pagina en voert bij zoek de titel GTST in. Ze selecteert het programma en komt op de GTST Pagina terecht. Hier hoeft ze dan alleen nog de aflevering te selecteren op datum om de aflevering te kunnen bekijken.
8
Funnel 2 -
Video’s op de homepage
Sence komt op RTL gemist pagina. Ze ziet hier gelijk de uitzending van GTST staan. Ze klikt op de uitzending en word doorgestuurd naar de pagina van GTST en kan vanuit hier gelijk de uitzending bekijken. Funnel 3 -
Via een filter de aflevering vinden
Sence komt op de RTL Gemist pagina. Ze gebruikt de filter functie A-Z en/of Zender en/of dag. Hier kiest ze dan voor GTST waardoor ze vervolgens op de GTST pagina komt om de aflevering te bekijken.
9
Funnel 4 -
Op je account in favorietenlijst vinden
Sence komt op de RTL Gemist pagina en logt in voor haar eigen account. Ze ziet hier een lijst met haar favorieten. Ze selecteert uit deze lijst GTST. Ze komt op de GTST pagina en selecteert de datum van de aflevering die ze wil zien en kan nu die aflevering kijken. Flowchart
10
Schermverloop diagram
Wireframes
11
12
13
Conceptueel model
Onderbouwing feedback In week 4 hebben we feedback gehad. Ik dacht dat alles op 1 A3 moest dus had ik het niet heel diep uitgewerkt. Dat was dan ook mijn feedback dat het nog niet diep genoeg was. Funnels zaten op niveau 1, Design patterns kon ik wel goed uitleggen en hij had het idee dat ik het wel snapte maar moest het op papier gaan uitschrijven en dieper uitwerken dit zat op niveau 2 en het ontwerp moest ik ook dieper uitwerken dit was nog niet goed genoeg. In bovenstaande pagina’s kun je de diepere uitwerkingen zien. Dit heeft meer duidelijkheid geschept en meer mogelijkheden gegeven. Het ontwerp moet zo eenvoudig mogelijk zijn zodat de eind gebruiker er goed mee overweg kan en het voor een goede gebruikerservaring moet zorgen.
Onderbouwing ontwerpen 1. Ontwerp principes Ik heb voor het ontwerp gekeken naar design Values. De design Values bestaan weer uit verschillende onderdelen zoals Ethical interaction design, Purposeful design, Pragmatic design en elegant interaction design. Ik heb op een aantal van deze punten gelet zoals bij Ethical interaction design heb ik gelet dat het mensen niet kan beledigen en ze zo min mogelijk frustraties kunnen oplopen door te zorgen dat ze feedback krijgen. Daarnaast heb ik aan de hand van bovenstaande tools geprobeerd de Purposeful interaction design zo goed mogelijk te doen aan de hand van de gebruikersdoelen zo goed mogelijk te begrijpen zodat het design daarop gericht kon worden. Bij Elegant interaction design heb ik gelet op het less 14
is more begrip zodat je geen grote website krijgt maar alleen de belangrijkst dingen wat weer zorgt dat er minder snel frustraties ontstaan en dus voor een betere gebruikerservaring zorgt. (Alan Cooper, 149)1 2. Patterns, postures Dit kunt u terug vinden bij de Patterns. 3. Usergoals Kun je vinden bij de mental models en bij de user goals. 4. Experience levels Er zijn drie verschillende groepen van gebruikers. De Experts, de intermediates en de beginners. De experts zijn degene die er verstand van hebben de Beginners weten nog helemaal niks en de intermediate users weten wel wat maar niet extreem veel. Intermediate users zijn de grootste groep gebruikers. Daarom heb ik gezorgd dat de website voor intermediate users goed is. De beginners gaan vaak zo snel door naar inetermediate users dat dit geen groot probleem zal zijn en de intermediates gaan eigenlijk bijna niet door naar experts. Vandaar de intermediate users als hoofdgebruikers. Maar je moet wel zorgen dat alle drie de groepen er gebruik van kunnen maken en niet dat je ze tegen gaat werken. (Alan Cooper, 44)1 5. Form en behaviour Als formulier heb je het inloggen/registreren. Hierbij wordt gezorgd dat je goede feedback krijgt. Ook bij de filters is het belangrijk dat je goede feedback krijgt. Welke patterns ik hiervoor gebruik zie je bij de patterns. (Alan Cooper, 141)1 6. Usabilitytesting Aan de hand van usability testing kun je erachter komen wat fouten zijn in je design of waar nog verbeter punten zijn. Ook kan je erachter komen of je vormgeving wel goed werkt of dat deze afleidt. Je kan zo ontdekken of je gebruikers overweg kunnen met je design of dat je toch nog frustraties tegenkomt die je eigenlijk wilt vermijden, en of het einddoel wordt bereikt. (Alan Cooper, 142)1
Conclusie en advies Mijn conclusie die ik kan trekken uit al het bovenstaande is dat je aan de hand van DFI een goed design neer kan zetten wat simpel is en is te gebruiken voor elk soort gebruiker dat er is. Zorg wel altijd dat je een goed inzicht hebt in je eindgebruiker zodat je je wel op zijn/haar einddoelen richt. En aan de hand van alle tools krijg je inzicht in hoe het in elkaar zit.
15
Bijlage
Feedback formulier
16
Bronnen 1
Cooper, Alan and the co-authors. About Face 3 The Essentials of Interaction Design. Indiana: Wiley Publishing Inc 2007. Print 2 NB. “Welie” Welie.com/patterns. NB., 23 januari 2013 om 13.14. http://www.welie.com/patterns/index.php. Web 3 ‘t Hooft, Sanne en de Swart, Myrna. Human Computer Interaction. Amsterdam: HVA, 2010. Print
