januari 24
RTL XL
2013
Dit document bevat het herontwerp van de site RTL XL. U vindt hierbij funnels, mental models, patterns, wireflows, flowcharts en onderbouwing van bepaalde keuzes.
Marijke Dekker 500636932
Inhoudsopgave Inleiding................................................................................................................................................... 3 1. Primair doel ........................................................................................................................................ 3 2.1 Ik zelf ............................................................................................................................................ 3 2.2 Nieuwe gebruiker ......................................................................................................................... 4 2.3 Toelichting verschillen ................................................................................................................. 4 2.4 Relatie tussen nieuw ontwerp en ontdekte mentale modellen ................................................ 4 3. Funnels – huidig ontwerp .................................................................................................................. 5 Primaire funnel/Secundaire funnel................................................................................................... 5 Funnels................................................................................................................................................ 5 4. Design patterns – Huidig ontwerp .................................................................................................... 7 4.1 Postural pattern ........................................................................................................................... 7 4.2 Behavioral pattern ....................................................................................................................... 7 4.3 Structural pattern ........................................................................................................................ 8 4.4 Dataontsluiting............................................................................................................................. 8 4.5 Navigatie-element ........................................................................................................................ 9 4.6 Feedbackvormen ......................................................................................................................... 9 4.7 Uitzonderingen ............................................................................................................................. 9 5. Flowcharts – huidig ontwerp ........................................................................................................... 11 5.1 Main navigation ......................................................................................................................... 11 5.2 Searchbox................................................................................................................................... 12 5.3 Uitzending bekijken ................................................................................................................... 13 6. Funnels – Nieuw ontwerp ................................................................................................................ 14 Primaire funnel/Secundaire funnel................................................................................................. 14 Funnels.............................................................................................................................................. 14 7. Design patterns – Nieuw ontwerp................................................................................................... 16 7.1 Postural pattern ......................................................................................................................... 16 7.2 Behavioral pattern ..................................................................................................................... 16 7.3 Structural pattern ...................................................................................................................... 17 7.4 Dataontsluiting........................................................................................................................... 17 7.5 Navigatie-element ...................................................................................................................... 17 7.6 Feedbackvormen ....................................................................................................................... 18 7.7 Uitzonderingen ........................................................................................................................... 18 8. Schermverloopdiagrammen ............................................................................................................ 20 9. Flowcharts ........................................................................................................................................ 26 9.1 Searchbox................................................................................................................................... 26
1
9.2 Main navigation ......................................................................................................................... 27 9.3 Icon menu .................................................................................................................................. 28 9.4 Footer items ............................................................................................................................... 29 9.5 Uitzending bekijken ................................................................................................................... 30 10. Sitemap .......................................................................................................................................... 31 Bijlagen Feedbackformulier ........................................................................................................................... 32 Resultaten van feedback ................................................................................................................. 33 Bronnen............................................................................................................................................. 34
2
Inleiding De RTL XL site waarop gebruikers een gemiste uitzending van tv terug kunnen bekijken heeft een redesign nodig. Daarvoor is het primaire doel geanalyseerd en de funnels van het huidige en nieuwe ontwerp opgesteld. Vervolgens zijn er mentale modellen geanalyseerd. Voor het huidige en nieuwe ontwerp zijn er design patterns gekozen per niveau: postural, behavoral en structual. Om de implementatie van de patterns duidelijk te maken bevat dit document wireframes, een schermverloopdiagram en flowcharts.
1. Primair doel Het primaire doel van de gebruikers van RTL XL is het (terug)kijken van een gemiste uitzending van tv.
Onderbouwing Je kunt op de site geen live uitzendingen bekijken, maar alleen uitzendingen die al op tv geweest zijn. Dit zie je ook aan het kopje ‘Gemist’ rechts bovenin het menu. Daarnaast is het eerste wat je ziet een groot scherm met allemaal uitzendingen van de dag ervoor of eerder.
2. Mentale modellen 2.1 Ik zelf
Doordat ik de RTL XL site heb geanalyseerd, weet ik wat ik kan verwachten bij het bezoeken van de site. Daardoor komen er weinig vragen bij mij op tijdens het interacteren met de site. Zo type ik gelijk de URL in mijn browser in en zoek ik gelijk op de juiste zoekterm in de searchbox. Vervolgens kies ik de juiste zender en datum, wanneer ik veel resultaten heb. Tenslotte kies ik de uitzending die ik wil kijken, check even snel of het de goede aflevering is en bekijk de uitzending op fullscreen. (Bron1 & 2)
3
2.2 Nieuwe gebruiker
De nieuwe gebruiker heeft de RTL XL site nog nooit gezien. Hij/zij komt er toevallig terecht via google door te zoeken op bijvoorbeeld uitzending gemist. De nieuwe gebruiker komt op de site en begint met het scannen van de pagina naar een manier om zijn doel te bereiken. Als de uitzending niet op de homepage staat, vult hij/zij het programma in de searchbox in. Als de nieuwe gebruiker te veel resultaten heeft, kiest hij/zij de juiste zender. Vervolgens scant de nieuwe gebruiker alle uitzendingen en kiest de goede uit. Voordat de hij/zij de uitzending gaat bekijken leest hij/zij de gegeven informatie over de uitzending. De nieuwe gebruiker heeft niet meteen door dat hij/zij de uitzending fullscreen kan kijken en doet dit in eerste instantie ook niet. (Bron1 & 2)
2.3 Toelichting verschillen Er zijn verschillen tussen het mentale model van de nieuwe gebruiker en van mijzelf, omdat ik in grote lijnen afweet van het conceptuele model en de nieuwe gebruiker niet. Een conceptueel model is het model dat getoond wordt aan de gebruiker met het interface van het product. Daarnaast zijn mijn eerste verwachtingen van de site bijgesteld doordat ik nu (meer) ervaring met de RTL XL site heb. De nieuwe gebruiker heeft nog geen ervaring met de RTL XL site, dus baseert zijn verwachtingen op ervaringen met andere sites die een soort zelfde situatie weergeven zoals Youtube. (Bron 3)
2.4 Relatie tussen nieuw ontwerp en ontdekte mentale modellen Doordat ik gewend ben om filmpjes online te bekijken op youtube heb ik gekozen voor een searchbox als belangrijkste element van de site. Omdat ik bij tv kijken gewend ben dat alle programma´s gekoppeld zijn aan bepaalde zenders, heb ik gekozen voor een Icon Menu met alle zenders, en als filter bij de zoekfunctie. Wanneer je ergens video’s bekijkt zie je altijd thumbnails, een titel en een kleine beschrijving. Deze video’s kan je in de meeste gevallen full screen bekijken. Dit heb ik dan ook in mijn nieuwe ontwerp verwerkt.
4
Huidig ontwerp 3. Funnels – huidig ontwerp Primaire funnel
Secundaire funnel
Funnels Zoeken met searchbox
Zoeken met Gemist
Zoeken met A-Z
5
Zoeken met Series
Zoeken met Films
Zoeken met Nieuws
Zoeken met Exclusief
6
4. Design patterns – Huidig ontwerp 4.1 Postural pattern Wat is een postural pattern? Een postural pattern zit op het niveau van het concept en helpt je om de positie van de site te bepalen tegenover de gebruiker. (Cooper 158) Welk postural pattern gebruikt RTL XL? RTL XL gebruikt een Sovereign posture. Een sovereign posture betekent dat de gebruiker de website/product/programma veel en langdurig gebruikt. Hierbij wordt de volledige aandacht van de gebruiker gevraagd. De gebruiker is tevens bereid om er tijd en moeite in te steken. Goede voorbeelden van programma´s met een sovereign posture zijn: word, powerpoint en outlook. Bij deze programma’s heb je het hele scherm nodig om er goed mee te kunnen werken en gebruik je voor een langere tijd aan een stuk door. (Cooper 158) Waarom gebruikt RTL XL dat pattern? Omdat het bekijken van een uitzending een groot scherm vergt en het voor een langere tijd je aandacht vasthoudt. Tijdens het kijken naar de uitzending ben je meestal niet met andere dingen bezig, maar alleen gefocust op de uitzending.
4.2 Behavioral pattern Wat is een behavioral pattern? Behavioral patterns zitten op het niveau van interactie met betrekking tot de functies en/of data op de site. Deze patterns helpen je bij het bepalen van het gedrag van de site tegenover de gebruiker. (Cooper 158) Welk behavioral pattern gebruikt RTL XL? RTL XL maakt gebruik van een Main navigation als behavioral pattern. Het pattern Main navigation is handig als de gebruikers weten op welke pagina zij iets kunnen vinden. Bijna elke sites hebben een Main navigation nodig. (Bron 5)
Waarom gebruikt RTL XL dat pattern? RTL XL gebruikt dit pattern om de gebruiker te helpen voor het vinden van een uitzending. Dit
7
hopen ze te bereiken door verschillende categorieën in de Main navigation te zetten als: Gemist, A-Z, Series, Films, Nieuws en Exclusief. (Bron 5)
4.3 Structural pattern Wat is een structural pattern? Een structural pattern zit op het structuurniveau van de site. Het helpt je met het rangschikken van de functie- en dataelementen op de site. (Cooper 158) Welk sturctural pattern gebruikt RTL XL? RTL XL heeft gekozen voor het pattern Thumbnails. Dit pattern laat data zien in de vorm van kleine afbeeldingen. Hierbij gaat het om video’s. (Bron 6) Waarom gebruikt RTL XL dat pattern? RTL XL gebruikt het pattern Thumbnails, omdat de gebruiker hierdoor beter weet wat hij/zij kan verwachten door het zien van een kleine afbeelding van een shot uit de uitzending. Zo vind de gebruiker sneller de uitzending die hij/zij zoekt. (Bron 6)
4.4 Dataontsluiting Welk pattern voor dataontsluiting gebruikt RTL XL? RTL XL gebruikt het pattern Collapsible Panels. Met dit pattern kan de gebruiker extra data ontsluiten wanneer hij/zij op het uitschuifpanel klikt. Dit lijkt op het pattern Accordion, alleen kan je bij Collapsible panels meerdere secties openhouden en bij een Accordion niet. Daarbij heeft het ook iets weg van het pattern On Demand, maar met dit pattern kan je alleen data ontsluiten per item en niet per sectie. (Bron 7)
Waarom gebruikt RTL XL dat pattern? RTL XL gebruikt het pattern om niet gelijk alle data op de site aan te bieden. Hierdoor blijft het
8
scherm ‘clean’ en is dus niet te chaotisch om naar te kijken. Ook geeft het de gebruiker meer overzicht en kan hij/zij meer data ontsluiten van de sectie die hij/zij wenst. (Bron 7)
4.5 Navigatie-element Welk pattern gebruikt RTL XL als navigatie element? De RTL XL site gebruikt het pattern Main Navigation. (Zie uitleg bij behavioral pattern).
4.6 Feedbackvormen Welk pattern gebruikt RTL XL als feedbackvorm? RTL XL gebruikt het Search pattern Autocomplete als feedbackvorm. Dit pattern zorgt ervoor dat de gebruiker tijdens het typen van zijn/haar zoekterm feedback in de vorm van zoekterm suggesties krijgt. (Bron 8) Waarom gebruikt RTL XL dat pattern? Omdat dit pattern de gebruiker helpt bij vinden van de juiste zoekterm. Als de gebruiker bijvoorbeeld niet meer de volledige naam van het programma weet, vult Autocomplete dit voor de gebruiker aan. (Bron 8)
4.7 Uitzonderingen Welke overige patterns gebruikt RTL XL? RTL XL gebruikt ook het pattern Home Link en Fat footer. Het pattern Home Link is een logo met een link naar de homepagina of een link met het label home in het menu. RTL XL maakt gebruik van beide. Het pattern Fat Footer geeft de gebruiker op een snelle manier toegang naar een bepaald gedeelte of functionaliteit van de site. (Bron 9 & 10)
Home Link
9
Fat Footer
Waarom gebruikt RTL XL deze patterns? RTL XL gebruikt de pattern Home Link om altijd een veilige uitweg aan de gebruiker te bieden. De gebruiker kan zo vanuit elke pagina weer teruggaan naar het startpunt: de homepagina. RTL XL gebruikt de pattern Fat Footer om andere pagina’s die buiten de hierarchie van de Main Navigation vallen onder de aandacht te brengen van de gebruiker, zoals: Veelgestelde vragen, adverteren en vacatures. (Bron 9 & 10)
10
5. Flowcharts – huidig ontwerp 5.1 Main navigation
11
5.2 Searchbox
12
5.3 Uitzending bekijken
13
Nieuw ontwerp 6. Funnels – Nieuw ontwerp Primaire funnel
Secundaire funnel
Funnels Zoeken via searchbox
14
Zoeken via menu items/main navigation (de funnel geldt voor elk menu item in de main navigation)
Zoeken via zenders/icon menu (de funnel geldt voor elke zender in het icon menu)
Zoeken via footer items
15
7. Design patterns – Nieuw ontwerp 7.1 Postural pattern Welk postural pattern heb ik gekozen? Ik heb net als de RTL XL site gekozen voor een Sovereign Posture. (Zie uitleg bij huidig ontwerp).
Waarom heb ik dat pattern gekozen? Ik heb voor het pattern Sovereign Posture gekozen omdat het primaire doel van de gebruiker het terugkijken van een gemiste uitzending is. Hierbij gebruikt de gebruiker het hele scherm en wordt voor een lange tijd zijn/haar aandacht vastgehouden.
7.2 Behavioral pattern Welk behavioral pattern heb ik gekozen? Ik heb gekozen voor het pattern Searchbox. Een searchbox is een zoekbalk met een dropdown list ernaast met categorieën waaruit gekozen kan worden om in te zoeken. (Bron 11)
Waarom heb ik dat pattern gekozen? Ik heb gekozen voor de Searchbox, omdat een gebruiker op deze manier sneller een specifieke uitzending kan vinden binnen een categorie (hierbij zijn dat verschillende zenders). (Bron 11)
16
7.3 Structural pattern Welk structural pattern heb ik gekozen? Net als het huidige ontwerp heb ik bij het nieuwe ontwerp ook voor het pattern Thumbnails gekozen. (Zie uitleg huidig ontwerp). Waarom heb ik dat pattern gekozen? Ik heb voor Thumbnails als structural pattern gekozen omdat de data om videobestanden gaan. Bij videobestanden draait het om het beeld, daarom zijn thumbnails van belang als zoekresultaat. Dit helpt de gebruiker de door hem gezochte uitzending snel te herkennen.
7.4 Dataontsluiting Welk pattern heb ik gekozen voor dataontsluiting? Ik heb voor het pattern Search Results gekozen als dataontsluiting. Dit zijn zoekresultaten met een korte beschrijving.
Waarom heb ik dat pattern gekozen? Ik heb voor dit pattern gekozen, omdat de gebruiker zo alleen data te zien krijgt dij hij/zij wenst te zien en niet overspoeld wordt met overbodige informatie. Hierdoor kan de gebruiker sneller, zonder afgeleid te worden, de juiste uitzending vinden.
7.5 Navigatie-element Welk pattern heb ik gekozen als navigatie-element? Hierbij heb ik gekozen voor het pattern Main Navigation. (Zie uitleg bij huidig ontwerp).
17
Waarom heb ik voor dat pattern gekozen? Ik heb voor een Main Navigation gekozen, omdat de gebruiker naast het gebruiken van de Searchbox ook via een andere manier de gewenste uitzending moet kunnen vinden. Wanneer de gebruiker de naam van de uitzending niet meer weet kan hij/zij in de Main Navigation uit een categorie kiezen en zo op de juiste uitzending uitkomen.
7.6 Feedbackvormen Welk pattern heb ik gekozen voor Feedbackvormen? Ik heb voor het pattern Autocomplete gekozen als feedbackvorm. (Zie uitleg bij huidig ontwerp). Waarom heb ik dat pattern gekozen? Ik heb voor Autocomplete gekozen, omdat het de gebruiker helpt bij het vaststellen van de juiste zoekterm, waardoor de gebruiker de bedoelde resultaten sneller te zien krijgt.
7.7 Uitzonderingen Welke overige patterns heb ik gekozen? Naast de genoemde patterns, heb ik ook de patterns: Icon Menu, Home Link, Fat footer, Carrousel en Tabs gekozen. (Zie uitleg van Home link en Fat footer bij huidig ontwerp). Een Icon menu is een menu met selecteerbare afbeeldingen, hierbij de herkenbare logo’s van de zenders. Een Carrousel is een representatie van items, in dit geval video’s, waarvan maar 1 tegelijk geselecteerd kan worden. Deze representatie verloopt in een soort cirkel, de video’s staan in een bepaalde volgorde waaruit je van beide kanten kan navigeren. (Bron 13) Tabs kan je zien als een soort Main navigation, wanneer je op een van de Tabs klikt zie je alle beschikbare informatie. De andere tabs blijven zichtbaar. (Bron 14)
Icon Menu/Home Link
Fat Footer
18
Carrousel
Tabs
Waarom heb ik deze patterns gekozen? De reden dat ik voor een Icon Menu heb gekozen, is dat de gebruiker zo gemakkelijk kan navigeren op zender. Alle zenders hebben namelijk een herkenbaar en onderscheidend logo. Daarnaast heb ik gebruik gemaakt van een Home link. Zo kan de gebruiker altijd terug naar de homepage vanaf elke pagina, als veilige uitweg. Ook heb ik het pattern Fat Footer gebruikt, omdat dit de gebruiker een vertrouwd gevoel geeft, door het zien van extra informatie over de site zelf. Maar ook om andere pagina’s van de site onder de aandacht te brengen. Het pattern Carrousel heb ik gekozen, omdat bij een pagina van een programma het voor de gebruiker handig is om alle uitzendingen op volgorde van datum te zien. Met de representatie van de Carrousel kunnen ze makkelijk de volgende of vorige uitzending vinden en bekijken. (Bron 13) Tenslotte heb ik het pattern Tabs gebruikt bij de pagina van het bekijken van de video. Dit heb ik gedaan, omdat ik op die pagina naast de informatie van de uitzending andere uitzendingen van hetzelfde programma wou laten zien aan de gebruiker. Zodat ze niet terug hoeven naar de vorige pagina. Ik wilde alleen zo min mogelijk ruimte in beslag nemen en kwam zo op dit pattern uit. (Bron 14)
19
8. Schermverloopdiagrammen
20
21
22
23
24
25
9. Flowcharts 9.1 Searchbox
26
9.2 Main navigation
27
9.3 Icon menu
28
9.4 Footer items
29
9.5 Uitzending bekijken
30
10. Sitemap
31
Bijlagen Feedbackformulier
32
Resultaten van feedback Ik heb met klasgenoten gesproken over funnels, om meer kennis op te doen. Vervolgens heb ik de funnels van het huidige ontwerp gemaakt. Deze heb ik niet onderbouwd, omdat het voor zich spreekt als je de site bekijkt. De funnels van mijn nieuwe ontwerp heb ik wel onderbouwd, door bij elke funnel een schermverloopdiagram te maken. Zo zie je in een oogopslag hoe de funnels werken. Eerst had ik een de designpatterns van mijn eigen ontwerp beschreven en toegelicht. Nu heb ik dit ook gedaan van het huidige ontwerp met visuals erbij. Ook heb ik uitgelegd wat elk pattern inhoudt. De schermverloopdiagrammen heb ik nu per funnel uitgewerkt en je ziet welke stappen de gebruiker maakt en welke design patterns te zien zijn. Tenslotte heb ik ook meer flowcharts gemaakt en een legenda en uitleg bij gedaan.
33
Bronnen 1. Byrom, Leann. How To Design Mental Models That Create a Superior User Experience. Blog.crazyegg.com. 24 september 2012. http://blog.crazyegg.com/2012/09/24/how-to-design-mental-models/ 2. Weinschenk, Susan. The Secret to Designing an Intuitive UX : Match the Mental Model to the Conceptual Model. Uxmag.com. 8 april 2010. http://uxmag.com/articles/the-secret-to-designing-an-intuitive-user-experience 3. Klein, Gary. Naturalistic Decision Making. Ise.ncsu.edu. 6 februari 2008. http://www.ise.ncsu.edu/nsf_itr/794B/papers/Klein_2008_HF_NDM.pdf 4. Cooper, Alan. About face 3. Wiley Publishing, Inc: Indianapolis. 2007. 5. Welie van, Martijn. Main navigation. Welie.com. 2008. http://welie.com/patterns/showPattern.php?patternID=main-navigation 6. Welie van, Martijn. Thumbnail. Welie.com. 2008. http://welie.com/patterns/showPattern.php?patternID=thumbnail 7. Welie van, Martijn. Collapsible Panels. Welie.com. 2008. http://welie.com/patterns/showPattern.php?patternID=collapsible-panels 8. Welie van, Martijn. Autocomplete. Welie.com. 2008. http://welie.com/patterns/showPattern.php?patternID=autocomplete 9. Welie van, Martijn. Home link. Welie.com. 2008. http://welie.com/patterns/showPattern.php?patternID=home 10. Toxboe, Anders. Fat footer. UI-Patterns.com. 2013. http://ui-patterns.com/patterns/FatFooter 11. Welie van, Martijn. Searchbox. Welie.com. 2008. http://welie.com/patterns/showPattern.php?patternID=search 12. Welie van, Martijn. Search results. Welie.com. 2008. http://welie.com/patterns/showPattern.php?patternID=search-results 13. Welie van, Martijn. Carrousel. Welie.com. 2008. http://welie.com/patterns/showPattern.php?patternID=carrousel 14. Welie van, Martijn. Tabs. Welie.com. 2008. http://welie.com/patterns/showPattern.php?patternID=tabbing
34
