Het Tweede Scherm Ontwerpdocument Salahddin el Kawakibi 500667515 V1-06
Conceptbeschrijving Inleiding 2 Conceptbeschrijving 3 Doelgroep 3 TV-programma tijdlijn & keyscenario 4 Job story 1 5 Probleemdefinitie 5 Mental model 5 Patterns 5 Lofi wireframe - Schetsen 5 Job story 2 6 Lofi wireframe - Schetsen 6 Job story 3 7 Lofi wireframe - Schetsen 7 Interactie ontwerp 8 Visual inventory 10 Breakpoint graphs 11 Testresultaten 13 Conclusie 13 Inleiding In dit ontwerpdocument vind u het ontwerp voor het tweede scherm van het programma Rob s Grote Tuinverbouwing. Mensen gebruiken tijdens het tv-kijken van hun telefoon, the second screen, waarop ze facebooken, twitteren of internetten. Het doel van het tweede scherm is om een meerwaarde te bieden naast het TV programma. Als oplossing voor dit probleem heb ik een concept bedacht voor een tweede scherm. Deze oplossing vind u terug in dit ontwerpdocument. Daarnaast heb ik verschillende job stories gemaakt en een visual inventory opgesteld. 2
Conceptbeschrijving TAGLINE Zet jouw tuin in de spotlights! KERN IDEE BESCHRIJVING TV PROGRAMMA Robs grote tuinverbouwing is een makeover-programma voor tuinen. Rob en zjin team gaan iedere week bij iemand langs om zijn of haar tuin op te knappen. Tijdens het verbouwen van de tuin wordt er veel informatie gegeven over planten en bloemen, tuinmeubels, het bestraten van de tuin en afscherming manieren(hout, haag etc.). Daarbij worden er ook tips gegeven. Naast het tuin gedeelte wordt er ook aan de woonkamer gewerkt van de deelnemer en opgeknapt. CONCEPTBESCHRIJVING TWEEDE SCHERM Robs tweede scherm (de naam van het tweede scherm), lijkt op Tinder maar dan met tuinen. Het idee is dat de kijkers thuis foto s kunnen inzenden van zijn/haar tuin. Elke week wordt een thema uitgekozen en de tuinen moeten zich aan het thema houden. De producten kiezen 15 foto s die het meest bij het thema horen, het mooist en creatiefst zijn. De kijkers thuis kunnen tijdens de uitzending foto s liken, de deelnemer met de meeste likes wint een prijs aan het eind van de aflevering. Foto s kunnen ingezonden vóór de uitzending. Deelnemers kunnen ideeën voor thema s opsturen naar de producenten, aan het eind van de aflevering wordt het nieuwe thema bekend gemaakt. Naast het foto gedeelte is er ook een facebookfeed binnen het tweede scherm voor reacties over de aflevering. Doelgroep De doelgroep van Robs grote tuinverbouwing is een kruising tussen de Zorgzame duizendpoot en de Traditionele streekbewoner na het hebben gekeken naar de documentatie van stichting kijkonderzoek. Robs grote tuinverbouwing wordt vooral gekeken door vrouwen( ong. 80%) en minder mannen (ong. 20%). De leeftijd van de doelgroep is ongeveer 35+, deze mensen hebben vaak een gezin of zijn samenwonend met een partner. Het programma word gekeken door zowel hoogopgeleiden(die vaak zelf aan het programma mee doen) als laagopgeleiden. De doelgroep hecht veel waarden aan luxe en comfort. Naast al hun verplichtingen is ook genieten van het leven van groot belang voor deze groep. Belangstellingen en vrijetijdsbesteding: Het gezin, sociale contact, tuinieren, klussen, koken, dier en natuur, mode en shownieuws. Media gebruik: Media wordt voor deze doelgroep vaak in een sociale context gebruikt en voor de gezelligheid, televisie kijken met het gezin bijvoorbeeld. De doelgroep is een gemiddelde internetter, op internet wordt er gericht gezocht naar informatie en nieuws, redelijk vaak wordt er gekeken op social media(vooral Facebook) en er wordt gemaild. De 35 tot 50 jarige binnen de doelgroep bezitten vaker een smartphone dan de 50+ er. De doelgroep gebruikt de smartphone voor internet, facebook en whatsapp. BRON: NPO leefstijlonderzoek, http://www.ster.nl/uploads/media_ items/leefstijldoelgroepen-npo-2011.original.pdf 3
Tijdlijn & keyscenario TV-programma Tijdlijn CALL TO ACTION 00:15 00:27 38:40 39:56 Keypathscenario 4
1. Foto opsturen JOB STORY Als ik de foto-verzendpagina bezoek wil ik mijn vooraf gemaakte foto s uploaden vanaf mijn gallerij of zelf maken en deze verzenden naar het programma. PROBLEEMDEFINITIE De gebruikt wilt een foto kunnen selecteren vanuit de gallerij en daarnaast ook een foto kunnen maken en deze kunnen opsturen. Twitter Bij het plaatsen van tweets is het mogelijk een foto te tweeten. Er zijn twee verschillende knoppen bij het plaatsen van een tweet één voor gallerij en de andere voor de camera. Na het hebben gekozen van een foto verschijnt deze in klein onder het tekst-veld. Google+ Bij het plaatsen van posts op google plus kan er een foto gemaakt worden om bij te verzenden. Als er op Foto toevoegen geklikt wordt verschijnt een nieuw scherm met de gallerij -optie of camera-optie. De foto verschijnt in het groot onder het tekst-veld. MENTAL MODEL Ik verwacht dat ik een foto kan selecteren van mijn gallerij en deze moeiteloos kan opsturen. Als ik geen foto heb wil ik dat ik van mijn tweede scherm naar mijn camera applicatie kan gaan met de smartphone en tablet. Schetsen ONDERBOUWING WIREFRAMES Ik heb gekozen om de pattern van Twitter te gebruiken voor mijn fotoinstuurpagina. Het is gemakkelijker om op de pagina zelf al een keuze te kunnen maken tussen gallerij of camera i.p.v de Google+ manier waarbij je eerst naar een nieuwe pagina moet. De app werkt met een inlogsysteem op deze manier hoeft de gebruiker niet steeds de gegevens in te vullen. Bovenaan de pagina staat de gebruiker zijn gebruiksnaam. Na het hebben geüpload van de foto verschijnt er een kleine voorbeeld van de foto. Bij de foto kan de gebruiker ook een korte omschrijving zetten. 5
2. Foto s liken JOB STORY Als ik de foto s van de weekpagina bezoek wil ik een weergave van alle foto s zien, ik wil de foto s die ik mooi vind kunnen liken. PROBLEEMDEFINITIE De gebruiker wilt een duidelijke weergave van alle deelnemers en deze gemakkelijk kunnen liken. MENTAL MODEL Ik verwacht zoiets als facebook, dat de foto s onderelkaar staan met een like knopje onder elke foto. Schetsen Tinder Op Tinder is het mogelijk om foto s van personen te liken. Er verschijnt telkens één foto met daaronder een like en dislike knop. De gebruiker kan de person beoordelen, vervolgens verschijnt er een nieuwe foto. Als er op de i geklikt wordt verschijnt er meer informatie over de persoon. Secret Op secret staan verschillende foto s onder elkaar rechts-onderin de foto kan er op het hartje geklikt worden om de foto te liken. Als er op het tekstbox geklikt wordt verschijnen er reacties op de foto. ONDERBOUWING WIREFRAMES De pattern die ik gekozen heb voor de wireframes is de pattern van Secret. Secret laat een lijst van foto s zien onder elkaar, wat handiger is dan Tinder. Tinder geeft de foto s één voor één weer, de gebruiker heeft op deze manier geen idee hoeveel foto s er nog komen. De lijst onder elkaar geeft de hoeveelheid goed weer en zo kan de gebruiker ook makkelijk de foto s vergelijken. Rechts-onderin de foto is een like -icon die ingedrukt kan worden wanneer de gebruiker de foto leuk vindt. Daarnaast is er een tekstbox-icon die de gebruiker naar de reactiepagina brengt. 6
3. Reageren op foto s JOB STORY Als ik reactie-pagina bezoek wil ik opmerkingen kunnen plaatsen over de desbetreffende foto. PROBLEEMDEFINITIE De gebruikt wilt reacties kunnen plaatsen over de foto die ze te zien krijgen. Instagram Op de reactiepagina van een foto, staan alle reacties onder elkaar op de pagina. Als de gebruiker een reactie wilt geven moet er eerst op het tekstboxje geklikt worden. Secretfox Op de reactiepagina van Secretfox, staan de reacties onder de foto. Onderin de pagina is een fixed tekstveld waar een reactie geplaatst kan worden. Alle reacties van de persoon die de foto gemaakt heeft staan in rood. MENTAL MODEL Ik verwacht dat de foto bovenaan de pagina staat en dat er onder de foto reacties staan. Ik verwacht dat er een tekstveld boven de rectie staan net als bij facebook, zodat ik mijn eigen reacties kan geven. Schetsen ONDERBOUWING WIREFRAMES Voor de reactiepagina heb ik de pattern van Secretfox gebruikt. De fixed reactieveld onderaan de pagina van Secretfox is een makkelijke manier om snel een reactie te posten. Op Instagrams reactie-pagina, moet er eerst naar een nieuwe pagina worden gegaan. De reactiepagina van instagram is daarnaast ook erg slordig, Secretfox haar pagina is wat strakker en duidelijker. De foto-deelnemer zijn/haar reacties zijn in het rood weergegeven dit is een detail wat ik ook goed kan gebruiken voor de pagina. 7
Interactie ontwerp HOME FOTO S LIKEN REACTIES PLAATSEN FOTO S INSTUREN Op het homescreen zijn de gasten te vinden die diezelfde avond in het programma komen. De foto s die de gebuikers insturen kunnen op deze pagina geliket worden. Foto met de meeste likes aan het einde van de uitzending wint een prijs. Gebruikers kunnen reacties plaatsen over wat ze van de foto s vinden op deze pagina. Gebruikers kunnen hun eigen foto s insturen op deze pagina. 8
Interactie ontwerp THEMA INSTUREN Gebruikers kunnen een idee voor het thema van de volgende keer invullen. INLOGGEN Om foto s in te sturen en reacties te kunnen plaatsen kan er ingelogd worden via Facebook. FACEBOOK Gebruikers kunnen met behulp van de facebookfeed reacties plaatsen 9
Visual Inventory MOODBOARD Robs grote tuinverbouwing heeft opzichzelf niet echt een eigenhuisstijl behalve hun logo. Maar omdat ze veel met bloemen en planten werken heb ik een moodboard gemaakt, om een beetje een indruk te krijgen van de stijl die ik wil gebruiken. TONE OF VOICE De tone of voice van de presentatoren van het programma zijn over het algemeen redelijk formeel met een grapje hier en daar. De deelnemers zijn meestal van een wat oudere leeftijd 30 tot 50 jaar. De doelgroep waar ik me op richt is ook van deze leeftijd, daarom is het belangrijk een formele tone of voice te gebruiken de mensen aan spreken met u bijvoorbeeld. KLEUR Als je denkt aan het woord tuin, planten en bloemen dan denk je meteen aan het woord groen. Mijn kleurenpallete bestaat daarom ook uit groene tinten. Als achtergrond kleur koos ik voor een grijze tint en een donker grijze tint als secundaire kleur voor focus. De blauwe kleur hoort bij de huisstijl van Facebook. TYPOGRAPHY Robs grote tuinverbouwing gebruikt in de huisstijl een geometrisch lettertype waarschijnlijk Gill Sans. Het is belangrijk dat het lettertype leesbaar, duidelijk en aantrekkelijk voor het oog is. Ik ben voor de Roboto gegaan, deze lettertype is duidelijk en beschikt over verschillende varianten. Het is perfect voor de oudere doelgroep waar ik me op richt, het is belangrijk dat de tekst leesbaar is. Roboto Roboto Roboto 10
Breakpoint Graph Homepagina Fotopagina Mobiele scherm 480 x 720 De mobiele versie van het tweede scherm bevat een bottom-navigationbar. Via deze navigatie kan er gemakkelijk door de pagina s worden genavigeerd. Mobiele scherm 480 x 720 De mobiele versie van de foto-pagina heeft een lijst van foto s onder elkaar, op een mobiel kan hier gemakkelijk doorheen gescrolled worden. Tablet/desktop scherm 1024 x 768 1360 x 768 De tablet/desktop versie van het tweede scherm heeft weer een navigatie in de header. De facebook-feed verschijnt nu op de homepagina, er is genoeg ruimte dus hoeft deze niet op een aparte pagina te staan. Tablet/desktop scherm 1024 x 768 1360 x 768 De tablet/desktop versie van de foto-pagina bestaat uit een lijst in twee kolommen door de ruimte die er ontstaat kunnen de foto s verspreid worden in de style van een gallerij. 11
Breakpoint Graph Reactie pagina Mobiele scherm 480 x 720 De mobiele versie van het tweede scherm bevat een bottomnavigationbar. Via deze navigatie kan er gemakkelijk door de pagina s worden genavigeerd. Tablet/desktop scherm 1024 x 768 1360 x 768 De tablet/desktop versie van het tweede scherm heeft weer een navigatie in de header. De facebook-feed verschijnt nu op de homepagina, er is genoeg ruimte dus hoeft deze niet op een aparte pagina te staan. 12
Evaluatie Testresultaten Conclusie In de loop van dit project heb ik twee rondes aan tests gedaan en twee keer geitereerd. Ik heb daarom ook mijn concept moeten aanpassen in de loop van het project. Bij het maken van het eerste concept was het idee dat de gebruiker foto s in kon zenden, de producent koos er drie uit en de gebruikers konden tijdens een aflevering stemmen op de beste. De beste krijgt vervolgens een prijs. Daarnaast konden de gebruikers een prijsvraag beantwoorden en tips krijgen. Na de tests bleek dat er te weinig interactie is met de gebruiker met betrekking tot de hoofdfunctie, het stemmen van de foto s. Gebruikers wilden meer. Daarnaast vonden ze de prijsvraag en tips overbodig en vonden dat ik me beter kon richten op de hoofdfunctie. Na de tests heb ik het concept aangepast, de drie foto s werden er 10 tot 15. Gebruikers konden niet meer stemmen maar liken en reacties plaatsen op de foto s. Dit gaf het een wat meer social-media gevoel en meer interactie. Daarnaast ben ik verdergaan bouwen op de hoofdfunctie en heb ik een thema verbonden aan mijn foto-idee. Voor dit project heb ik de taak gekregen een tweede scherm te ontwikkelen voor het TV-programma Robs Grote Tuinverbouwing. Tijdens het proces en het kijken naar de kijkcijfers van het programma wordt er voornamelijk door vrouwen van 30 tot 50 jaar naar gekeken. Vervolgens heb ik onderzoek gedaan naar het TV-programma en doelgroeponderzoek. Aan de hand van dit onderzoek heb ik een conceptbeschrijving gemaakt. Dit concept heb ik verder uitgewerk met een scenario, interactie ontwerp en visual inventory. In de loop van het project heb ik meerdere male getest, dit heeft een grote rol gespeeld in de ontwikkeling van het concept. Met behulp van de testresultaten heb ik grote delen vna mijn concept moeten aanpassen. Van het uiteindelijke concept heb ik in een werkend HTML prototype gemaakt. De oplossing biedt een meerwaarde aan het programma. De gebruikers kunnen op het tweede scherm op een sociale manier interacteren met andere gebruikers. Winnaars van het tweede scherm worden teruggekoppeld naar het TV-programma 13