In dit document zijn de funnels, designpatterns, mentale modellen en het ontwerp van de redesign van RTL XL Gemist te vinden. Redesign RTL XL Gemist DFI Models & Processes Miranda Endhoven
Inhoudsopgave Primaire gebruikersdoel... 3 Funnel... 3 Sub- gebruikersdoelen... 3 Favoriet subdoel... 3 Funnels op favoriete subdoel... 3 Funnel 1... 3 Funnel 2... 4 Funnel 3... 4 Funnel 4... 4 Mijn mentale model... 5 Mentale model verse gebruiker... 6 Toelichting... 6 Vergelijking... 6 Designpatterns... 7 Behavioral pattern... 7 Navigation tabs... 7 Home link... 8 Autocomplete... 8 Postural pattern... 9 Slider... 9 Structural pattern... 10 Organize overview... 10 detail informatie... 11 Navigatie-element... 11 Multicon-page pagination... 11 Feedbackvormen... 12 Progress bars... 12 Ratings... 13 Ontwerp... 14 Wireflows... 14 Zoeken... 14 Pagina overzicht... 14 Uitzending overzicht... 15 1
Laden... 15 Test... 15 Flowchart... 16 Feedbackformulier... 17 Wat heb ik ermee gedaan?... 17 2
Primaire gebruikersdoel - Programma van RTL terug kijken Funnel Homepagina RTL XL gemist Programma zoeken Programma selecteren Programma fragment bekijken Sub- gebruikersdoelen - Programma terug kijken van donderdag 6 december - Nieuwste aflevering kijken van een programma - Favoriete serie volgen - Fragment laten zien aan iemand anders - Programma terug kijken van Wendy van Dijk Favoriet subdoel Ik heb één sub-gebruikersdoel uitgekozen om uit te gaan werken in mijn redesign. Bij dit subdoel zal ik patterns gaan zoeken, een mentaal model verse gebruiker op gaan stellen en wireflows gaan maken. Hierdoor zal de gebruiker tevreden zijn over het vinden van zijn doel en de weg daar naar toe. Het subdoel wat ik uit ga werken is: - Goede tijden Slechte tijden terug kijken van donderdag 6 december Funnels op favoriete subdoel Funnel 1 Homepagina RTL XL gemist Zoeken op: Goede tijden Slechte tijden Gewenste uitzending kiezen Programma fragment bekijken 3
Funnel 2 Homepagina RTL XL gemist Zoeken op: 6 december Programma kiezen Programma fragment bekijken Funnel 3 Homepagina RTL XL gemist Klinkt in programma-slider op het gewenste programma Programma fragment bekijken Funnel 4 Homepage RTL XL gemist Filteren op dagen Klik op 6 december Overzicht van alle programma s van 6 december Gewenste fragment selecteren Programma fragment bekijken 4
Mijn mentale model 5
Mentale model verse gebruiker Toelichting Ik heb de verse gebruiker gevraagd wat hij verwacht als hij denkt aan RTL XL. Alle antwoorden hiervan zijn hierboven te zien. De gebruiker dacht meteen aan een koppeling met facebook door middel van liken. Hij verwacht dat je op die manier meteen kan zien wanneer dat programma beschikbaar is om te kijken. Ook beschrijft hij de zoek balk eigenlijk zoals het op de huidige RTL site is. Hij denkt er niet over na om op enter te klikken of als er geen resultaten zijn. Hij heeft het alleen over programma s die op RTL te zien zijn, en is dus niet van plan om iets anders te gaan zoeken. Vergelijking De vergelijking tussen een verse gebruiker en mij is vooral dat de verse gebruiker meer dingen bij de site verzint. Hij kent de site natuurlijk nauwelijks en verwacht meteen dat het met facebook gelinkt zal zijn. RTL doet dit niet, daarom denk ik daar niet aan als lange gebruiker. Toch kan ik dit meenemen in mijn redesign van RTL XL. Blijkbaar hebben gebruikers behoefte aan een link met facebook. 6
Designpatterns Behavioral pattern Navigation tabs Tab gebaseerde navigatie bestaat uit knoppen of tabs uitgelijnd naast elkaar en bevindt zich doorgaans aan de bovenzijde van de pagina. Navigatie tabs laten de gebruikers weten waar ze zijn en zijn te zien over de hele website. Er zijn natuurlijke vele varianten van deze pattern. Hier een paar voorbeelden die ik zou kunnen gebruiken. Deze is redelijk standaard. Het kan ook speels. Of door middel van iconen. 7
Home link Elke website heeft het wel, als je op het logo klikt (meestal links boven in de pagina) kom je op de homepagina terecht. Facebook is misschien wel de meest gebruikte. Wanneer er op het facebooklogo wordt geklikt gaat de pagina naar jouw begin pagina, waar je alle berichten van je vrienden kan bekijken. Autocomplete Autocomplete helpt de gebruiker om geldige antwoorden te geven. Als de gebruiker iets invoert in het tekstvak, wordt een lijst met overeenkomende antwoorden weergegeven in een drop-down menu onder het tekstvak. De gebruiker kan vervolgens kiezen voor het juiste item uit de lijst in plaats van het typen van het gehele woord. 8
Postural pattern Slider Met behulp van diavoorstellingen of slider in een web design is een effectieve methode voor het markeren van uw producten of zelfs de belangrijkste plaats verwante berichten en informatie. Aangezien de huidige slider trend dicteert, zijn ze doorgaans te vinden boven de vouw op de homepage. Ea.com heeft ook een mooie slider op de website staan. 9
Structural pattern Organize overview Ik maak de website erg overzichtelijk, het is duidelijk voor de gebruiker wat zij kunnen doen. Bij uitzendinggemist.nl doen ze dit bijvoorbeeld goed. Zij geven duidelijk de datum, tijd en de aflevering. Ook geven zij een stukje informatie over de aflevering en onderaan zetten zij meer afleveringen van het betreffende programma. Omdat het een programma is van de VPRO geven ze ook nog meer programma s van die omroep weer. Ik vind het dus belangrijk dat op de pagina van een aflevering, meer afleveringen te zien zijn, informatie en het logo van die serie. Dit geeft een overzichtelijke indruk. 10
detail informatie Bij een aflevering wordt informatie gegeven, op die manier is het snel duidelijk voor de gebruiker of zij deze aflevering al bekeken hebben of nog moeten kijken. Op deze manier is er veel overzicht over de grogramma s. Bij uitzendinggemist.nl doen zij dit al erg goed. Ik vind dat een goed voorbeeld voor de redesign van RTL XL. Navigatie-element Multicon-page pagination Bij teveel zoekresultaten zijn er meerdere pagina s van hetzelfde programma. Denk bijvoorbeeld aan GTST, daar zijn heel veel afleveringen van, het is onhandig om steeds te moeten scrollen, daarom heb ik dit op deze manier opgelost. 11
Feedbackvormen Progress bars Deze bars wil ik gebruiken om te laten zien dat het programma bezig is met laden. Op deze manier wilt de gebruiker wachten omdat ze kunnen zien hoelang het nog duurt. 12
Ratings Gebruikers worden uitgenodigd om de programma s te beoordelen door een bepaalde tekst (bijvoorbeeld "Waardeer het programma!"). Het zijn aanklikbare sterren, als eroverheen gegaan wordt met de muis zullen deze veranderen van kleur zodat het duidelijk is dat ze klikbaar zijn. Uit mijn interview met een verse gebruiker bleek dat hij dacht dat RTL XL wel gekoppeld zou zitten aan facebook door middel van Liken. Dit is nog niet zo, maar blijkbaar verwachten mensen dat dus wel. Daarom zijn ratings ook goed te doen via een like. Als mensen een programma liken kunnen zij deze volgen via facebook en meteen zien wanneer de nieuwe uitzending beschikbaar is om te kijken. Op deze manier vangt RTL XL een breed publiek en komen zij waarschijnlijk sneller terug om een programma te kijken. 13
Ontwerp Wireflows Zoeken Zoeken zal gebeuren via de zoek balk. Ik ga in wireflows laten zien hoe deze zoek balk werkt en hoe hij reageert op handelingen van de gebruiker. Pagina overzicht 14
Uitzending overzicht Laden Test Ik heb deze wireflows aan een verse gebruiker laten zien, bij het zoeken vindt hij het handig dat als er een typefout gemaakt wordt dat er komt bedoelt u soms... Ook vindt hij de pagina s goed overzichtelijk en is hij blij met de like knop. Hij vindt dat de like knop niet te vaak op pagina s moet verschijnen, als dat zo zou zijn zou hij juist niet gaan liken, wel als hij de knop maar één of misschien twee keer ziet. Dan voelt de actie om te liken specialer voor hem. 15
Flowchart Ik heb een flowchart gemaakt van de zoekfunctie, zoals ik hem hier boven uitgewerkt heb in mijn wireframes. 16
Feedbackformulier Wat heb ik ermee gedaan? Door de feedback die ik de vorige keer gekregen heb ben ik meer in details gaan kijken. Ik heb gekeken waar RTL XL op kon verbeteren, ze gebruiken wel patterns, maar niet op een erg goede manier. Als zij dit beter zouden doen zou de website overzichtelijker worden. Dit heb ik dus gedaan. Ik heb de patterns opgezocht waarvan ik denk dat ze handig zijn voor deze website en verwerkt. Door de feedback heb ik meerdere voorbeelden van patterns gezocht die er volgens mij leuk en goed uitzagen. Mijn feedbackformulier is op de volgende pagina te vinden. 17