WIREFRAMES MET ANOTATIES

Inleiding
Wireframes
Om alle functies van de website goed uit te leggen zijn de wireframes handig. Wireframes zijn eigenlijk de
ontwerpen van de interface met annotaties die de functies en benodigde informatie uitleggen. Bij deze wire-
frames zal ik aan de hand van het ontwerp uitleggen hoe de user goals en vindstrategiën terugkomen in de
website.

User goals
de user goals die terug moeten komen in het ontwerp zijn:

1. De gebruiker wil een leuk verhaal kunnen vinden

2. De gebruiker wil input geven zodat anderen beter leuke verhalen kunnen vinden
3. De gebruiker wil aanbevolen/verrassende resultaten aangeboden krijgen.
4.De gebruiker wil tijdens de reis verhalen kunnen lezen.

De user goals herken je aan het gele rondje met daarin het nummer die er hierboven aan is gegeven. Er zal
ook een kleine uitleg gegeven worden hoe het doel terugkomt bij dat onderdeel.

voorbeeld: De gebruiker kan een leuk verhaal vinden doordat ze hier kunnen filteren op wat ze wel willen zien. Je ..

Vindstrategiën
De manieren hoe de user goals kunnen worden gerealiseerd zin:

1. Finding known items

2. Exploring
3. Refining and narrowing
4. Comparing
5. Getting a broad idea
6. Diving into detail
7. Discovering unknown things
8. Keeping up to date
9. Re-finding

De vindstrategiën herken je aan het lege rondje met een oranje rand met daarin het nummer die er hierboven
aan is gegeven. Indien nodig wordt hier nog extra informatie bij geschreven.

voorbeeld: Je sluit andere dingen uit en gaat verhalen verkennen.

User goals
Vindstrategiën
WIREFRAMES MET ANOTATIES
Mobiel
1. De zoekfunctie, Bij het klikken op het icoon komt de
16 15 14 13 12 zoekbalk tevoorschijn. Vervolgens kan je via het
keyboard intypen waar je naar op zoek bent. Je wordt
verwezen naar de resultaten pagina.

1 2 3 4

De gebruiker kan een leuk verhaal vinden doordat ze hier

5 kunnen zoeken naar sfeerwoorden die ze kunnen intypen. Als
U-OV verhalenwebsite ze een bepaald verhaal willen terugvinden kan dat ook op
deze manier natuurlijk.
99 Verhalen van Molovich
1
8 9
17
Verder lezen 1 6 9

6
Uitgelicht 2. Filterfunctie. Je kunt hier de verhalen filteren met
de opties hier rechts.
De gebruiker kan een leuk verhaal
vinden doordat ze hier kunnen
filteren op wat ze wel willen zien. Filteren op 21
Je kan hier dus kiezen wat je
persoonlijk leuk vind. Je sluit Alle verhalen (99)

andere dingen uit en gaat verhalen Artistieke vormgeving (34)

verkennen.
Grappige verhalen (56)

Politieke boodschap (8)

Vrije versvorm
1 3 Bevestig
10
Lees verder
2 6 3
7 11
Alle verhalen
3. Sorteerfunctie. Je kunt hier
de verhalen filteren met de
onderstaande opties. Sorteren op
De gebruiker kan een leuk verhaal Meest gewaardeerd 18
vinden doordat ze hier kunnen
Vaakst gelezen 19
sorteren. Je bepaalt de volgorde
Vrijdag de 13e waarop de verhalen worden Kortste leestijd
2011-05-04 Molovich 20
getoond. Je sluit andere dingen uit Langste leestijd

en gaat verhalen verkennen.

Bij het uitstappen van de bus waait mijn jas open, precies op het
Bevestig
moment dat de buschauffeur de deuren sluit. Terwijl ik de
kinderwagen waarin mijn zoon ligt te krijsen vasthoudt, ren ik mee
met de bus en schreeuw ik naar de buschauffeur dat hij moet...
1 3
Lees verder 2 6 3
4. De overige opties zijn hier te vinden. Bekijk opties hiernaast
De gebruiker kan een leuk verhaal
vinden doordat ze worden verrast
met resultaten (gebaseerd op hun
1 3 Aanbevolen
Aanbevolen verhalen
geschiedenis.) Je sluit andere voor jou
dingen uit en gaat verhalen 2 6 3 Willekeurig verhaal
verkennen.
Bevestig

5. De titel van de pagina

je krijgt een idee waar het over gaat. 5
6. Het uitgelichte verhaal. Dit verhaal is het populaire verhaal van de week. Elke week wordt door middel van
de hoeveelheid likes gegeven die week een verhaal uitgelicht.
De gebruiker kan een leuk verhaal
vinden doordat ze worden verrast
met resultaten (gebaseerd op hun 1 3
geschiedenis.) Je sluit andere
dingen uit en gaat verhalen
verkennen.
4

7. Titel van de section met alle verhalen.

8. De verhalen worden weergegeven op door middel van blokjes en afbeeldingen.

9. De verhalen worden weergegeven door middel van een lijst (alleen tekst)
De manier waarop de verhaal blokjes
worden weergegeven geeft een 5
overzicht van alle verhalen.

10. Door de lees verder knop wordt je verwezen naar een volgende pagina.
11. Naar de volgende pagina’s met de andere verhalen

12. Grootte van de tekst wordt aangepast (groter, 1em erbij)

13. De hele pagina wordt weergegeven in een groot zwart wit contrast.
De gebruiker kan tijdens haar reis het
verhaal lezen, ook als er vervelend 4
licht is voor haar scherm.

14. Hier vind je verhalen die je heb geliked terug.
Door middel van de likes kun je de
likes terugvinden. Als je iets snel
wil terugvinden of nog een keer
wilt lezen is dit extra handig. Je
kunt de likes terugvinden
15. Hier vind je verhalen die je hebt bewaard terug.
Door middel van bewaren kun je
3 makkelijk een verhaal wat je nog
wil lezen terugvinden of 3
verdergaan als je nog niet zo ver
9 was. Je kunt de bewaarde items
terugvinden
9

16. Door de lees verder knop wordt je verwezen naar een volgende pagina.

17. De optie om verder te gaan met een verhaal wat je aan het lezen was. Je wordt verwezen naar de pagina
van het verhaal wat je las of een pagina met meerdere verhalen als je meerdere verhalen aan het lezen was.

18. Meest gewaardeerd is gebasseerd op likes, je kunt een verhaal liken nadat je het heb gelezen.
19. Gebasseerd op aantal clicks, aantal keer dat de pagina is bezocht.
20. Gebasseerd op het aantal regels.
21. De verhalen zijn onder drie categorieën verdeeld, Als je er er één aanvinkt krijg je alleen nog maar verhalen die
onder die categorie valt. Je kan er meerdere aanvinken.
WIREFRAMES MET ANOTATIES
Desktop

U-OV verhalenwebsite
99 Verhalen van Molovich

Uitgelicht
blokken lijst

Verder lezen

Verrassing

Vrije versvorm
Nico Dijkshoorn die Mart..
Lees verder

Alle verhalen

Beroemd Vrijdag de 13e

2011-05-04 Molovich 2011-05-04 Molovich
4 likes 6 comments 15 minuten
Vlak voordat ik de bus uitstap bedank ik de buschauffeur via de Bij het uitstappen van de bus waait mijn jas open, precies op het
spiegel voor zijn diensten. Hij zwaait joviaal terug. ‘Mijn vrouw is moment dat de buschauffeur de deuren sluit. Terwijl ik de
een groot fan van u’, roept hij. ‘Doe haar de groeten’, zeg ik en kinderwagen waarin mijn zoon ligt te krijsen vasthoudt, ren ik
stap uit. Centraal Station. Ik duw mijn zoon voort. Hij slaapt. Z.. mee met de bus en schreeuw ik naar de buschauffeur dat...
Als je hovert over een verhaal komt dit
witte balkje met likes, comments en
Lees verder Lees verder
leesduur tevoorschijn. Je kunt dit
verder bestuderen als het verhaal
bekijkt.

Ronnie Flex Stoned

2011-05-04 Molovich
Ronnie Flex is bezig met de opnames van zijn tweede album. Het
valt ‘m zwaar. De onbevangenheid is weg. Hij wil laten zien wat hij
waard is. Denkt veel na. Over wie hij is en wat hij wil laten horen.
Hij blowt veel. De camera registreert hoe hij de ene na de ander...
Door middel van deze metadata kan de
2011-05-04 Molovich gebruiker snel dezelfde opties van het filter
Zodra ik de bus uitstap steek ik een dikke vette joint op. De derde
en sorteermenu zien. Het filteren en
van de dag al. Ik neem een lange haal, inhaleer diep, houd de
rook een tijdje binnen en blaas dan, de lippen gerond, het hoofd
sorteren helpt met het kiezen van een leuk
een beetje in de nek, een enorme stoomkegel de atmosfeer in...
verhaal en aanbevolen verhalen.

Lees verder Lees verder

1 3
Comments op verhalen

Dit verhaal is echt uniek vormgegeven echt...

Haiku is een grappig en kort verhaal, aanra...

Beroemd is zo herkenbaar!

Geen wonder dat “vrije versvorm” is uitgeli...

WIREFLOW
Multi device wireflow

Koppeling User scenario en Customer journey

De user scenario en de customer journey zijn gebaseerd op het tweede interview wat ik
hem gehouden met Lotte Janssen over haar treinreis. Tijdens deze hele “customer journey”
gebruikt ze 3 apparaten het meest: Mobiel, E-reader, en haar laptop. Haar reis heb ik opge-
deeld in 4 fases.
Thuis, treinreis heen, school en de trenreis terug

Lotte gebruikt haar e-reader om het verhaal te lezen. De e-reader maakt geen gebruik van
internet en is daarom geen apparaat wat we kunnen gebruiken voor de website. U-OV orga-
niseert busreizen. Deze busreizen zijn binnen Utrecht dus er is altijd beschikking tot inter-
net. Daarom is er gekozen om de E-reader in deze context vervangen door een tablet. Het
formaat van de tablet en de E-reader komen overeen. Het belangrijkste voor de wireflow is
nu: De e-reader is de tablet geworden.

Herhaling van de fases en de bijbehorende kleuren.

Om de fases inzichtelijker te maken en te koppelen aan de user scenario en customer
journey zullen we hier dezelfde kleuren gebruiken om de fase van de gebruiker tijdens de
wireflow uit te leggen. Hieronder een herhaling van de fases. De kleur van de zin is de kleur
van de fase

thuis is de eerste fase, hier wordt de mobiel gebruikt.

De trein is de tweede fase, hier wordt de E-reader gebruikt.

Op school is de derde fase, hier wordt de desktop gebruikt.

De terugreis met de trein is de vierde fase, de E-reader wordt hier weer voornamelijk
gebruikt.

3C’s Framework

Er is al een kleine introductie geweest van de 3C’s bij de user scenario/customer journey.
Bij de terugreis was er namelijk sprake van continuïteit. In de wireflow wordt gebruik
gemaakt van de website op de apparaten die ook worden gebruikt in het user scenario.
Omdat de website op meerdere apparaten wordt gebruikt komen de 3c’s hier beter in terug.
Als deze worden benoemd in de annotaties zou dat er ongeveer zo uitzien:
1.0 homepage 1.1 zoeken 1.2 filteren 1.3 sorteren 1.4 aanbevolen 2.0 homepage gefilterd 3.0 verhaal 4.0 verhaal uitgezoomd

Filteren op Sorteren op Aanbevolen

U-OV verhalenwebsite U-OV verhalenwebsite U-OV verhalenwebsite U-OV verhalenwebsite U-OV verhalenwebsite
99 Verhalen van Molovich 99 Verhalen van Molovich 99
AlleVerhalen
verhalen van Molovich 99 Verhalen van Molovich
Meest gewaardeerd Aanbevolen verhalen 99 Verhalen van Molovich
voor jou
Artistieke vormgeving Vaakst gelezen
Willekeurig verhaal
Grappige verhalen Kortste leestijd
Uitgelicht Uitgelicht Uitgelicht Uitgelicht Uitgelicht
Politieke boodschap Langste leestijd
Verhalen
Bevestig Bevestig
Vrije Versvorm Vrije Versvorm Vrije Versvorm Vrije Versvorm Vrije Versvorm
2011-05-04 Molovich 2011-05-04 Molovich 2011-05-04 Molovich 2011-05-04 Molovich 2011-05-04 Molovich

Gemeenteblik
Vrije Versvorm
Gemeenteblik Gemeenteblik Gemeenteblik Gemeenteblik
Draaiende wielen stoppen Draaiende wielen stoppen Draaiende wielen stoppen Draaiende wielen stoppen
Draaiende wielen stoppen
Schimmen lopen van en naar Schimmen lopen van en naar Schimmen lopen van en naar Schimmen lopen van en naar 2011-05-04 Molovich
Schimmen lopen van en naar
Zoonlief droom Zoonlief droom Zoonlief droom Zoonlief droom
Zoonlief droom

Gemeenteblik
Draaiende wielen stoppen

Lees verder Lees verder Lees verder Lees verder Lees verder Lees verder Lees verder Lees verder Lees verder Lees verder
Schimmen lopen van en naar
Zoonlief droom

Alle verhalen Alle verhalen Alle verhalen Alle verhalen Alle verhalen Lees verder Lees verder

Vrijdag de 13e Vrijdag de 13e Vrijdag de 13e Vrijdag de 13e Het verhaal wordt Om het later terug te
Paranoia
getoond. Het is vrij groot kunnen vinden voegt de
2011-05-04 Molovich 2011-05-04 Molovich 2011-05-04 Molovich 2011-05-04 Molovich
2011-05-04 Molovich

en daardoor moeilijk gebruiker het toe aan

Gemeenteblik Gemeenteblik Gemeenteblik Gemeenteblik

Draaiende wielen stoppen Draaiende wielen stoppen Draaiende wielen stoppen Draaiende wielen stoppen
Gemeenteblik
Schimmen lopen van en naar Schimmen lopen van en naar Schimmen lopen van en naar Schimmen lopen van en naar

scanbaar. De gebruiker “bewaren”.

Draaiende wielen stoppen
Zoonlief droom Zoonlief droom Zoonlief droom Zoonlief droom
Schimmen lopen van en naar
Zoonlief droom

Lees verder Lees verder Lees verder Lees verder zoemt uit.
Lees verder

De opties boven aan de De zoekbalk schuift uit.De Het filter menu schuift Er wordt gesorteerd op De overige opties voor Op de overzichtspagina
pagina zorgen ervoor dat gebruiker is nieuw en uit. De gebruiker sorteert vaakst gelezen. het uitkiezen van een leuk nu alleen de resultaten te
de gebruiker verhalen kan weet nog niet wat voor op artistieke vormgeving. verhaal. Er wordt hier zien waarop de gebruiker
sorteren/filteren verhalen er zijn en dus geen optie van gekozen. heeft gefiltert.
ook niet wat hij/zij hier
kan intypen.

1.0 homepage 2.0 verhaal 1.0 verhaal zwart wit

Lijn om de weg tussen

schermen aan te geven

Swipen

U-OV verhalenwebsite
continuïteit
99 Verhalen van Molovich Tap
Van fase 1 naar fase 2 is
er sprake van
Uitgelicht continuïteit. Op haar Pinchen
telefoon heeft ze het
verhaal geopend.
Vervolgens op haar Animatie

tablet gaat het verhaal

Vrije versvorm verder waar het op de Transitie
Lees verder telefoon gebleven was.
Fase 1 mobiel
Alle verhalen Verder lezen
consistentie Fase 2 tablet
Vrije versvorm
Fase 3 tablet
Dezelfde content en flow
Nico Dijkshoorn die Mart..
wordt getoond op de Fase 4 desktop
tablet als op de mobiel.
Uitleg over 3C
Op de opstartpagine zie je gelijk dat je Je bent nu terug bij het verhaal Er is veel licht en de helderheid kan niet
verder kunt lezen. De gebruiker klikt op de verder omhoog. Om de tekst leesbaarder te
titel van het verhaal wat werd gelezen. maken is er de optie om het contrast hoger
te maken door middel van zwart en wit.
1.0 homepage 1.1 homepage gescrollt 1.2 grote letters 2.0 verhaal

U-OV verhalenwebsite
99 Verhalen van Molovich
U-OV verhalenwebsite U-OV verhalenwebsite
99 Verhalen van Molovich 99 Verhalen van Molovich
1 2 3 1 2 3
Uitgelicht 2011-05-04 Molovich
2011-05-04 Molovich
Gemeenteblik
Draaiende wielen stoppen
Gemeenteblik
Schimmen lopen van en naar
Zoonlief droom
Draaiende wielen stoppen

Lees verder Lees verder

Vrije versvorm
Lees verder
Haiku
2011-05-04 Molovich
Haiku
2011-05-04 Molovich
Gemeenteblik

Alle verhalen Verder lezen Draaiende wielen stoppen

Schimmen lopen van en naar
Gemeenteblik
Zoonlief droom Draaiende wielen stoppen
Beroemd Beroemd
Vrije versvorm 2011-05-04 Molovich Lees verder Lees verder
2011-05-04 Molovich
Gemeenteblik
Draaiende wielen stoppen
Gemeenteblik naar beneden
Nico Dijkshoorn die Mart.. Schimmen lopen van en naar
Draaiende wielen stoppen
Zoonlief droom

De gebruiker heeft het verhaal uitgelezen De gebruiker scrollt naar beneden. De letters zijn best wel klein en de Er is een nieuw verhaal uitgekozen.
en wil een nieuw verhaal uitkiezen. gebruiker is zijn bril vergeten. Hij drukt op
de optie om de letters te vergroten

1.0 homepage 1.1 homepage lijst 2.0 verhaal 2.0 verhaal

continuïteit
Het verhaal wat op de
tablet is geliked is terug
te vinden in de likes op
de desktop.
4 likes 6 comments 15 minuten

Haiku

consistentie
Dezelfde content en flow
wordt getoond op de
desktop als op de mobiel
en tablet (responsive
design).

De gebruiker heeft het verhaal terugge- Dit verhaal wordt toegevoegd aan de
vonden op de desktop. favorieten

Eenmaal op een locatie aangekomen wilt de De gebruiker switcht naar de lijst vorm
gebruiker het verhaal waar ze net in begonnen om een beter overzicht te hebben *de lay-out van sommige pagina’s in ondertussen een klein beetje veranderd.
waren verder te lezen. Op de overzicht pagina Alle features zijn echter nog hetzelfde dus inhoudelijk is het niet van belang.
wordt er doorgeklikt naar 2.