Op reis met NS en haar nieuwe verhalenwebsite Op reis met NS en haar nieuwe verhalenwebsite Ontwerpdocument Project Web Bente Vonk - 500725055 17-01-2017 1
Inhoudsopgave Opdrachtbeschrijving 3 Stijlsheet NS 4 Moodboard NS 5 Schetsen overzichtspagina desktop en tablet 6 Digitale versie overzichtspagina 7 Schetsen overzichtspagina mobiel en digitale versie 8 Schetsen detailpagina desktop en tablet 9 Digitale versie detailpagina 10 Schetsen van detailpagina mobiel en digitale versie 11 Schetsen aanmeldpagina desktop en tablet 12 Digitale versie aanmeldpagina 13 Schetsen van aanmeldpagina mobiel en digitale versie 14 User story en multi-device wireflow 15 Job story - offline verhalen lezen 18 Job story - filteren en sorteren 20 Job story - later doorlezen 22 2
Opdrachtbeschrijving Zoals jullie weten was de opdracht een verhalenwebsite maken voor jullie: de NS! De verhalenwebsite moet voor, tijdens en na de reis gebruikt kunnen worden. Een van de eisen was dat de gebruiker makkelijk verhalen kan filteren en sorteren. Aan mij was het om goed te onderzoeken welke filter/- en sorteeropties de verhalen nodig hadden. Zo kan de gebruiker gemakkelijk verhalen vinden die bij haar interesses past. De pagina moet zowel directed search, als casual browsing ondersteunen. Ook moet de gebruiker op weg geholpen worden door de pagina heen, en alles in jullie huisstijl. De website moet meteen te herkennen zijn als een website van NS. Daarnaast willen gebruikers een reactie kunnen achterlaten onder het verhaal en het verhaal delen wanneer zij het goed vinden. Wanneer er geen internet is, moet het verhaal toch offline te lezen zijn. Kortom, een hoop eisen, maar met een goed doordacht resultaat. 3
Stijlsheet NS Stijlsheet NS Iconen Logo Concept - Duidelijk en overzichtelijk door gebruik maken van contrast in kleur. - Vriendelijk toegankelijk karakter door de grote foto van twee mensen. - Strak design door vierkanten vormen - Doel dat gebruiker snel zijn doel vindt (het plannen van een reis) met een paar klikken. Kleuren #223260 #2C75BA # F9C833 Buttons/Actie #E7E6E9 foto's #FFFFFF typografie vormen Plan reis NS Sans Vanaf 11 dec Frutiger Check planner Segoe UI CMD Blok 2 / Student Bente Vonk / 500725055 / V106 / 23 november 16 4
Moodboard NS Moodboard NS Plan uw reis CMD Blok 2 / Student Bente Vonk / 500725055 / V106 / 23 november 16 5
Schetsen van de overzichtspagina - desktop/ tablet (tablet wat minder witruimte en kleiner geschaald) Optie 1. Optie 2. Optie 3 Waarom heb ik optie 2 en 3gekozen? Ik heb optie 2 en 3 gekozen, omdat ik de gebruiker echt op gang wil helpen door de site heen, i.p.v. het gebruik van een normale filter button. Optie 2 is de versie wanneer een gebruiker nog niet is ingelogd. Optie 3 is de versie wanneer de gebruiker wel is ingelogd. Dan worden er speciaal geselecteerde verhalen voor de gebruiker geshowd, op basis van geschiedenis/kennis van de gebruiker. 6
Digitale versie van de overzichtspagina Mijn profiel 1 2 Annotaties 4 Later lezen Favorieten Offline Log in 3 1. Link naar het inloggen/aanmeldenpagina met een drop-down menu. Mijn profiel is een link naar de profielpagina. Later lezen zijn de verhalen die door de punaise bewaard zijn (hover effect over verhaal heen op overzichtspagina): deze verhalen zijn niet meteen offline, tenzij je deze offline switcht. Favorieten zijn de verhalen die door het hartje bewaard zijn (ook het hover effect). Offline verhalen zijn verhalen waarbij wel de button geswitcht is op de verhaalpagina. 2. Taal van de pagina instellen 3. Drop-down menu - sorteren (automatisch op best beoordeeld) 4. Categorie drama - per categorie zijn een aantal verhalen gegeven. 5. Verhalenblok - titel, datum, leestijd, designer, korte samenvatting, beoordeling en of het verhaal offline gedownload is wel of niet. 6.Call-to-action button naar het verhaal zelf. 7. Het verhaal kan d.m.v. de punaise bewaard worden om later te lezen, het hartje stuurt het verhaal naar favorieten, en er is een knop om het verhaal te delen op social media. 5 7 6 7
Schetsen van de overzichtspagina - mobiele versie Optie 1. Optie 2. Digitale versie. Waarom heb ik optie 1 gekozen? Waarom heb ik optie.. gekozen? Ik heb optie 1 gekozen, omdat een mobiele versie gaat om de echte kern van Ik heb een optie website... gekozen, Optie omdat 2 geeft... nog veel informatie wat onhandig is te vertonen op een mobiel device. Vandaar mijn keuze voor optie 1. 8
Schetsen van de detailpagina - desktop/ tablet (tablet wat minder witruimte en kleiner geschaald) Optie 1. Optie 2. Waarom heb ik optie 1 gekozen? Ik heb optie 1 gekozen, omdat mijn verhalen de gehele ruimte nodig hebben van het scherm voor een zo mooi mogelijk resultaat. Ook vind ik het goed dat de reacties pas worden weergegeven nadat de gebruiker zelf het verhaal heeft gezien/gelezen zodat zij zelf tijd heeft om een eigen mening te vormen. 9
Digitale versie van de detailpagina 1 Annotaties 3 2 1. Terug naar overzichtspagina 2. Switch-button om verhaal offline te zetten. 3. Het verhaal zelf. Scroll naar beneden en zie nog meer druppels tekst + het water stroomt op de achtergrond. 4. Onder het verhaal staat informatie over het verhaal zoals datum, designer en beoordeling. Reacties en een mogelijkheid zelf een reactie te plaatsen 4 10
Schetsen van de detailpagina - mobiele versie Optie 1. Optie 2. Waarom heb ik optie 1 gekozen? Ik heb optie 1 gekozen, omdat dit goed aansluit bij de detailpagina voor desktop/tablet. Deze keuze heb ik dus gemaakt uit het doorvoeren van consistentie door de website heen. 11
Schetsen van de aanmeldpagina - desktop/ tablet (tablet wat minder witruimte en kleiner geschaald) Optie 1. Optie 2. Waarom heb ik optie 1 gekozen? Ik heb optie 1 gekozen, omdat NS zelf ook een apart formulier heeft om in te loggen en ik dit overzichtelijk vind. De gebruiker wordt even van de site gepakt om de tijd te nemen om in te loggen. 12
Digitale versie van de aanmeldpagina 1 Annotaties 1. Link naar de overzichtspagina - Home. 2. Input velden om in te loggen. 3. Verstuur van formulier. 4. Registreren 2 2 3 Nog geen account? Registreer hier. 4 13
Schetsen van de aanmeldpagina - mobiele versie Optie 1. Optie 2. Waarom heb ik optie 2 gekozen? Ik heb optie 2 gekozen, omdat ik deze stijl ook toe pas bij de dekstop/ tablet versie. Deze keuze is dus gemaakt uit consistentie. 14
Multi-device wireflow Voor de reis Anna Kloppers Wie is Anna? Anna studeert sinds een jaar in Amsterdam. Haar vriendje woont in Utrecht, dus gaat ze een keer per week op en neer naar hem toe. Ook in het weekend gaat zij naar haar geboorteplaats Eindhoven. Hier werkt zij nog in een cafeetje en heeft zij veel vriendinnen wonen. Wat wilt Anna? Wanneer Anna in de trein zit, heeft ze vaak last van slechte wifi en wilt ze eigenlijk verhalen offline kunnen lezen. Wel heeft ze niet zoveel geheugen op haar telefoon, dus wilt ze het ook weer makkelijk kunnen weggooien. Wanneer Anna naar Eindhoven gaat, zit zij 1 uur en 12 min in de trein vanaf Amsterdam Amstel. Ze wilt dan een goed lang verhaal kunnen lezen. Wanneer Anna naar Utrecht gaat, zit zij maar een korte 20 minuten in de trein en wilt ze graag een aantal kortere verhalen. Vaak komt het voor dat Anna de trein uitstapt en nog niet klaar is met haar verhaal. Ze wilt graag dat dit verhaal gemakkelijk terug te vinden is na de reis, zodat ze het eventueel thuis nog kan verder lezen of de eerstvolgende keer dat ze in de trein zit. Conclusie Anna wilt offline verhalen kunnen lezen. Ze wilt een verschillend aanbod verhalen zien, en ze wilt dat het verhaal dat ze aan het lezen was, gemakkelijk te continueren is. 1. Anna wilt wat goede verhalen vinden voor onderweg naar haar vriendje. Ze zit nog thuis even aan de keukentafel om de verhalen te selecteren. Ze opent de overzichtspagina. 2. Op de overzichtspagina ziet ze verhalen voor, tijdens en na de reis. Ook leidt de pagina haar een bepaalde richting op. Anna kiest voor de categorie drama en ziet het verhaal Blind staan. De leestijd bedraagt 5 minuten. 3. Het verhaal ziet er goed uit en rechtsboven de pagina ziet Anna een offline beschikbaar switch button staan. Dit herkent ze en Anna switcht de button naar rechts. 4. Het verhaal krijgt een download-balkje dat een paar seconden duurt. Het verhaal is gedownload. 15
Multi-device wireflow Tijdens de reis Mijn profiel Later lezen Favorieten Offline Log uit 1. Anna zit in de trein en wilt snel haar gedownloade verhaal lezen. Ze opent de site en komt op de overzichtspagina. 2. Ze scrollt door de overzichtspagina en ziet aan het pijltje naast de beoordelingsterren dat het verhaal gedownload is. 3. Ook kan ze het verhaal gemakkelijk terugvinden in het drop-down menu, bij de tab offline beschikbaar. Hier ziet ze al haar gedownloade verhalen. 4. Anna klikt op het verhaal en heeft geen wifi nodig om haar verhaal goed te bekijken/lezen. 16
Multi-device wireflow Na de reis 1. Anna kon helaas het verhaal niet aflezen en moest snel de trein uit. Ze opent de site thuis vanuit de bank. Er komt een pop-up of zij verder wilt lezen. 3. Anna staat te wachten en denkt weer aan het verhaal waar ze mee bezig was. Ze opent haar telefoon en krijgt weer de pop-up. 2. Ze leest heerlijk het verhaal door. Opeens komt ze erachter dat ze moet haasten en wegmoet. Ze klapt haar laptop dicht. 4. Anna klikt weer op verder lezen en kan weer doorlezen op haar mobiel. 17
Job story - Verhalen offline lezen Als ik in de trein zit en de NS Wifi doet het niet, wil ik graag alsnog een verhaal offline kunnen lezen. Hieruit is het volgende ontwerpprobleem gekomen: Hoe kan de NS verhalenwebsite de functie aanbieden om verhalen offline te lezen, zodat Anna zorgeloos verhalen kan lezen? Patterns 1. Spotify 2. Apple 3. Youtube Twee variaties geinspireerd op het pattern van Spotify. Variatie 1 Uitleg over variatie 1: bij deze variatie staat de switch button op de overzichtspagina meteen naast de titel. De gebruiker kan tijdens het scrollen gemakkelijk een verhaal offline zetten. Variatie 2 Uitleg over variatie 2: bij deze variatie kan de gebruiker pas het verhaal offline lezen op de detailpagina. Bij dit pattern download je de liedjes door de switch button naar rechts te swipen. Met behulp van het pijltje zie je welke liedjes offline beschikbaar zijn. Bij dit pattern kan je webpagina s in je leeslijst zetten en later teruglezen. Bij dit pattern kan je via het + teken het liedje toevoegen aan een later bekijken lijst. Gekozen design pattern: Spotify Ik heb hiervoor gekozen omdat het een heel herkenbaar pattern is en ik hier zelf positieve ervaringen mee heb. Het is duidelijk welke gedownload zijn, en zoals Anna wilt, is het ook weer snel te verwijderen (namelijk een simpele swipe naar links). De twee andere patterns vond ik meer onduidelijk, en laat ook niet goed zien welke nou offline beschikbaar zijn. Gekozen richting: variatie 2 Ik heb hiervoor gekozen omdat Anna pas iets wil downloaden als zij het interessant vindt. Zij gaat niet al snel iets downloaden op de overzichtspagina. Downloaden kost veel geheugen, dus Anna wilt eerst zeker zijn of het verhaal haar boeit. Vandaar de keuze voor variatie 2. 18
Wireflow Hieronder zie je de wireflow van variatie 2. Mijn profiel Later lezen Favorieten Offline Log uit Op de pagina van het verhaal zelf zie je de optie met offline beschikbaar. Deze button kan je switchen naar rechts waarna het verhaal downloadt. Op de overzichtspagina zie je dat het verhaal gedownload is aan het download-symbool naast de sterren. Je kan zo het verhaal lezen en vinden, of je klikt op offline in de menubalk. Micro interactie Trigger De switch button. Rule Wanneer je deze switcht, wordt er een verhaal gedownload. Feedback Je ziet een balkje dat het verhaal wordt gedownload, en bij voltooiing komt er een symbool bij het verhaal te staan. Dit symbool is het roze rondje met roze pijl erin. Loop Als je de switch button gebruikt, gebeurt de micro interactie alleen. 19
Job story - Filteren en sorteren Als ik zit te wachten op de trein, wil ik een verhaal kunnen filteren en sorteren op o.a. categorie, beoordeling, zodat ik in de trein rustig al mijn gekozen verhalen kan lezen. Hieruit is het volgende ontwerpprobleem gekomen: Hoe kan de NS verhalenwebsite de functie aanbieden om snel te filteren en sorteren? Hoe kan de gebruiker op weg worden geholpen? Patterns 1. AirBnB 2. Oma weet raad 3. Asos Twee variaties geinspireerd op het pattern van Asos. Variatie 1 Uitleg over variatie 1: bij deze variatie wordt de filteroptie categorie aangeboden en een sorteerknop. Variatie 2 Bij dit pattern wordt er gesorteerd op populariteit dichtbij de gebruiker. Hierdoor kan je filteren op plaats. Bij dit pattern worden er duidelijk categorieen gegeven om te filteren. Er wordt niet gekeken naar sorteren. Bij dit pattern wordt er zowel gekeken naar filteren op c ategorie, als sorteren in de categoriepagina. Uitleg over variatie 2: bij deze variatie wordt de gebruiker meer geleidt door de titel: Welke leesrichting ga jij op vandaag?. De verschillende verhalen eronder zijn ingedeeld in categorieen. Zoals je ziet is het verhaal Blind, uit de categorie drama. Zo kan de gebruiker zoeken naar de categorie en er is een sorteeroptie. Gekozen design pattern: Asos Ik heb hiervoor gekozen omdat het voor zowel filter als sorteer goede opties biedt. Ik wil graag met behulp van blokken categorieen aan de gebruiker aanbieden, en een sorteerknop met dropdown menu vind ik ook een handig en overzichtelijke manier voor de gebruiker. Anna wordt goed op weg geholpen zo. Gekozen richting: variatie 2 Ik heb hiervoor gekozen omdat ik de titel Welke leesrichting ga jij op vandaag? ontzettend vind passen bij de NS. Het is speels en brengt de gebruiker wat interessanter op weg in zijn zoektocht naar een goed verhaal, dan een saaie button categorie. 20
Wireflow Hieronder zie je de wireflow van variatie 2 Met deze knop kan je de verhalen sorteren. Wanneer je naar beneden scrollt kom je op steeds meer verhalen. Per verhaal staat de categorie achter de titel aangegeven. Ook zie je de leestijd en beoordeling staan. Dit is de overzichtspagina. Hierbij zie je de titel die je op weg wijst. Micro interactie Trigger Button knop en scroll. Rule Sorteerknop is een drop-down. Wanneer je scrollt zie je meer verhalen. Feedback De sorteerknop klapt naar beneden uit en wanneer je een optie kiest, veranderen de elementen daaronder in gevraagde volgorde. Loop Elke keer wanneer je de knop weer indrukt of naar beneden scrollt. 21
Job story - Later doorlezen Als de trein aan komt rijden en ik zit te lezen op het perron, wl ik dat de site automatisch opslaat waar ik ben gebleven in het verhaal, zodat wanneer ik de app weer open ik op de pagina terechtkom waar ik ben geindigd. Hieruit is het volgende ontwerpprobleem gekomen: Hoe kan de NS verhalenwebsite aan de gebruiker laten zien dat het heeft onthouden in welk verhaal de gebruiker bezig is? Patterns 1. Netflix 2. Runkeeper 3. Garageband Twee variaties geinspireerd op het pattern van Runkeeper en Garageband. Variatie 1 Uitleg over variatie 1: bij deze variatie kom je als je de site weer opent, automatisch op dit scherm. Wil je doorlezen of niet? Variatie 2 Uitleg over variatie 2: bij deze variatie opent zich er een pop-up als je de site weer opent. Hierdoor zie je ook alweer waar je was op de site. Bij dit pattern zie je door de balk waar je bent geindigd met kijken. Via de play-knop speel je weer af. Bij dit pattern zie je twee grote buttons waardoor je kan stoppen met rennen of kan doorgaan. Bij dit pattern verwelkomen ze je weer in de applicatie en met de button ga je door. Gekozen design pattern: Runkeeper en Garageband Ik heb een mix gekozen van pattern 2 en 3. Verwelkomen aan de gebruiker is goede klantvriendelijke manier, en dit vind ik goed bij NS passen. Alleen bij Garageband krijgt de gebruiker maar een optie en dat is door gaan met het verhaal. In het geval van Anna is dit een goede oplossing, maar er moet ook een functie zijn dat de gebruiker toch kan stoppen en naar het homescherm kan gaan. Daarom wil ik beide patterns gaan gebruiken. Gekozen richting: variatie 2 Ik heb hiervoor gekozen omdat het een duidelijkere navigatie laat zien aan de gebruiker. De gebruiker ziet achter de pop-up het scherm waar zij was geindigd. Ook hoeft er zo niet een hele nieuwe pagina gemaakt te worden. 22
Wireflow Hieronder zie je de wireflow van variatie 2. Door op de knop terug naar home te klikken, komt Anna weer op de overzichtspagina. Door op de button Ja graag te klikken, komt Anna weer op het verhaal die zij aan het lezen was. De pop-up verschijnt bij het openen van het scherm. Bij dit pattern... Micro interactie Trigger Pop-up button Rule Het verhaal kan door op ja graag gecontinueerd worden. Feedback De gebruiker gaat bij Ja graag naar de desbetreffende verhaalpagina, en bij de andere button terug naar home. Loop Elke keer wanneer de site zich afsluit terwijl er een verhaal gelezen wordt en opnieuw geopend wordt, verschijnt de pop-up 23
24