Design rationale&productbiografieprojectinteractionmitchkappenv1.0.8

Design Rationale
Wijzer.Amsterdam
28-03-2021
Mitch Kappen (500758317)
Carla Mooij & Anne Marleen Olthof
Link naar prototype 0.1, 0.2 & 1.0:
https://xd.adobe.com/view/ab037739-2764-4f9b-8835-e594ab7581fa-fe50/?fullscreen&hints=off

Wijzer.Amsterdam Design Rationale Pagina 02
Het probleem
Onderzoek
Concurentie
Interview
Persona
Design Challenge
Deelvragen
HTA
Concept
Screenflow
Conclusie
Week 6 t/m 8
Planning
Onderzoek
Idee ontwikkeling
Expert review
Gekozen variant
Side by side 0.2 & 1.0
Meest effectief
Conclusie
Productbiografie
03
04
05
06
06
06
07
08
09
13
14
14
15
16
17
18
23
24
25
Individueel
Mitch Kappen - 500758317
Project
Project Interaction
Leerjaar 2, Blok 3
Carla Mooij & Anne Marleen
Klas 1
Document
Design Rationale 2
28 maart 2021
Opleiding
Hogeschool van Amsterdam
Communication & Multimedia Design
Design Rationale Inhoudsopgave

Pagina 03
Het probleem
Het probleem dat wij voorgelegd hebben gekregen komt via de Hogeschool van
Amsterdam en gaat over een chatbot op de website wijzer.amsterdam.
Het probleem
Wijzer.amsterdam maakt momenteel gebruik van een chatbot functie op hun website.
Hiermee willen ze gebruikers helpen zoeken naar informatie zonder zelf veel te zoeken
op de website. Nu blijkt uit verschillende beta-testen en onderzoek dat de huidige
chatbot te hoog gegrepen is voor hun doelgroep. Om toch deze doelgroep te kunnen
bereiken via een chatbot moet er een nieuwe chatbot worden ontwikkeld die een betere
benadering heeft voor deze doelgroep.
Wijzer.Amsterdam Design Rationale
Vraagstuk
Hoe maak ik een User Interface die begrijpbaar is voor mijn specifieke doelgroep
en die ervoor zorgt dat de doelgroep mijn ontworpen chatbot gaat gebruiken
om zijn/haar benodigde informatie te vinden?
Inhoud document
In dit document vindt u voorin de belangrijkste conclusies uit mijn onderzoek. In de
bijlagen (Productbiografie) is het proces en de bewijsvoering van alles wat u in de Design
Rationale leest, te vinden.
> Bekijk de Debriefing in de bijlagen op pagina 03
> De productbiografie begint vanaf pagina 10
Introductie
Wat is het probleem? Met welk vraagstuk
ben ik aan de gang gegaan?

Pagina 04
Onderzoek
Wat zijn de belangrijkste inzichten en
conclusies uit mijn onderzoek?
Huidige werking en Concurentie analyse
Door de huidige werking van de chatbot op wijzer.amsterdam te bestuderen,
wilde ik kijken waar de grootste knelpunten zaten. Na het bestuderen van de
chatbot zijn mij een aantal dingen opgevallen. Om te testen of deze bevindingen
ook door mijn doelgroep werden bevonden heb ik een User Task Flow gemaakt.
Deze UTF’s heb ik laten uitvoeren door Erwin Ouderland. Door deze testen heb
ik problemen kunnen valideren en ben ik gaan kijken hoe de concurentie deze
problemen oplost.
Inzichten
• De chatbot is een nieuwe functie voor vele digibeten
• Ouderen gebruiken zo min mogelijk technologie.
• Veel chatbots moet je activeren met een knop
• Chatbots zijn vaak verborgen
• Als de chatbot er niet uitkomt, schakelt het een echte medewerker is die vervolgens
de chatbot overneemt om met jou te communiceren
• Chatbots kunnen op de lange duur de medewerker overbodig maken
• Chatbots hebben eigen persoonlijkheid die meestal gericht is op het karakter dat het
bedrijf wilt uitstralen
Conclusie
Een chatbot is tegenwoordig erg interessant om te gebruiken en ze worden alleen
maar beter. De persoonlijkheid kan de chatbot aan laten voelen als een echt persoon.
Het communiceren naar een antwoord toe, kan een digibeet goed opweg helpen. Om
digibeten om te leren gaan met een chatbot moet de learningcurve zo laag mogelijk
zijn en moet er een creatieve oplossing komen voor als de chatbot en gebruiker er niet
uitkomen.
> Bekijk de UTF’s & Concurentie Analyse in de bijlagen op pagina 9 en 12

Interview
Voor het interview met Erwin heb ik bij hem thuis afgesproken en mij aan de
corona-richlijnen gehouden van het RIVM. Als voorbereiding heb ik alleen
de vragen opgeschreven die ik wil gaan stellen en mijn telefoon als recorder.
Voor dit interview wilde ik de antwoorden zo open mogelijk houden, daarom
heb geen specifieke signalen gegeven om een laptop of iPad te gebruiken als
zoekmiddel.
Inzichten
• Erwin zoekt de meeste informatie op via zijn laptop.
• Het liefst vraagt hij iemand anders als hij denkt dat hij het niet weet.
• Google chrome is zijn standaard browser zoals verwacht, hij kent ook geen andere.
• Wijzer.Amsterdam is nieuw voor hem.
• Hij heeft de chatbotfunctie voor het eerst ervaren.
• Als Erwin er niet meer uitkomt geeft hij de zoekopdracht op en vraagt de informatie
aan een ander.
Conclusie
Het interview met Erwin heeft veel inzichten opgeleverd. Wat bijvoorbeeld erg belangrijk
is, is dat de locatie ook een bepalende factor is. Als hij namelijk niemand in de buurt
heeft zal hij het zelf moeten uitvinden. Met behulp van de chatbot zou je dus al een
eind komen in die situatie. Helaas is de werking van de chatbot niet optimaal en vallen
de antwoorden en vragen zo in herhaling dat er gezocht wordt via de alternatieven
(zoekbalk en sidebar). Op deze manier lukt het Erwin om de informatie te vinden maar
vraagt constant naar confirmatie(zie Quotes rechts).
In het kort
• Een chatbot met de juiste communicatie is de oplossing voor Erwin
• De chatbot moet worden aangepast en groter gekaderd worden voor de laptop.
> Bekijk het Interview en de uitkomsten in de bijlagen op pagina 15
“En als ik op deze link klik, dan ga ik naar hetgene dat
ik zoek toch?”
- Erwin
““En als ik op deze link klik, dan ga ik naar hetgene
dat ik zoek toch?””
“Is dit een echt persoon of gaat hij nu echt iemand
erbij halen en kost dat geld?”
“Zit ik nog op de goede weg?”
- Erwin
- Erwin
- Erwin
Pagina 05

Persona’s Design Challenge
Deelvragen
De belangrijkste stakeholders zijn: 50-75 jarige digibeten en de Obenbare
Bibliotheek van Amsterdam(wijzer.amsterdam). Voor deze twee stakeholders heb
ik een persona gemaakt.
Aan de hand van mijn onderzoek en bevindingen daarbij heb ik mijn doelgroep
kunnen kiezen, namelijk 50-75 jarige digibeten. Vanuit hier heb ik een Design
Challenge opgesteld die luidt:
De twee belangrijkste deelvragen die ik heb kunnen beantwoorden:
• Hoe zorg ik ervoor dat mijn doelgroep de juiste informatie vindt met behulp van de
chatbot?
• Hoe zorg ik ervoor dat digibeten van 50-75 jaar de chatbot kunnen gebruiken
Tijdens deze 5 weken heb ik goed antwoord kunnen krijgen bovenstaande
deelvragen die hebben geleden tot mijn huidige prototype. De meeste
antwoorden kwamen van Erwin Ouderland die al mijn ontwerpen heeft getest.
Door Erwin eerst met de huidige chatbot van wijzer.amsterdam kennis te laten
maken, heb ik informatie kunnen verzamelen en nieuwe structuur in de Flow
kunnen creëren.
Erwin Ouderland | 58-jarige digibeet
“Het liefst gebruik ik geen technologie, maar als het moet dan gebruik ik mijn
laptop en een blaadje waar mijn kinderen de nodige informatie op hebben
geschreven om te kunnen internetten. Als ik er niet uitkom heb ik altijd nog
handige mensen om mij heen, al duurt hetgene wat ik wil doen wel wat langer en
ben ik afhankelijk van anderen.”
M. Vos | Medewerker bij de OBA
“Met deze digitale wegwijzer hopen we Amsterdammers online vanuit huis te
helpen voor contact, hulp en informatie zoeken. Ons platform biedt betrouwbare
ondersteuning bij digitale vragen. Ook tijdens deze moeilijke tijden willen we
voor de zwakkere doelgroep klaar staan, stel ons of onze chatbot al uw digitale
vragen.”
> Bekijk de persona’s in de bijlagen op pagina 52
> Lees verder op volgende bladzijde
Pagina 06
“Hoe maak ik een User Interface die begrijpbaar is voor digibeten tussen de
50-75 jaar die ervoor zorgt dat ze de chatbot op wijzer.amsterdam kunnen
gebruiken om zijn/haar benodigde informatie te vinden?”

Hiërarchische Taak Analyse (HTA)
Om specifieker te kunnen ontwerpen voor de doelgroep heb ik een HTA
opgesteld. Vanuit deze HTA ben ik gaan kijken naar een punt dat de grootste
belemmering veroorzaakt voor de 50-75 jarige digibeet.
Hier rechts staat het stuk van mijn HTA waar ik mijn focus op heb gelegd. Vanuit
dit stukje heb ik een User Task Flow(UTF) gemaakt voor Erwin om te testen.
De bevindingen heb ik opgenomen in mijn ontwerp en heb daarvoor al een
nieuwe UTF kunnen maken die werkt voor mijn doelgroep.
Inzichten
• De flow is te lang waardoor de gebruiker afhaakt
• De flow is te complex om te begrijpen voor de doelgroep
• De flow moet korter om de gebruiker zijn/haar aandacht te behouden
• De flow moet makkelijker zijn om te begrijpen
• De flow wordt telkens onderbroken omdat de chatbot alleen op de homepagina te
vinden is
• Als de gebruiker er niet meer uitkomt geeft hij de zoekopdracht op en vraagt de
informatie aan een ander.
User Task Flow
• Hier rechts staat de UTF van de huidige website van wijzer.amsterdam en mijn
verkozen stuk om verbetering aan te brengen.
Pagina 07
• 4. Informatie zoeken via Chatbot
4.1 Activeert chatbot door te begroeten
4.2 Typt groet in chat
4.3 Leest antwoord
4.4 Typt gewenste trefwoord
4.5 Leest antwoorden
4.6 Klikt op “Linkjes over dit onderwerp”
4.7 Bekijkt resultaat
4.8 Klikt op gewenste link
4.9 Bekijkt resultaat van link
4.10 Terug naar wijzer.amsterdam
4.11 Klikt op “Lees meer info”
4.13 Klikt op “Lees artikel”
4.14 Bekijkt het artikel
> Lees alles over de HTA en UTF in de bijlagen op pagina 10
Einde
4. Vervolg, Informatie zoeken via chatbot
Kies een thema
Lees antwoord
bekijk resultaat
Lees antwoord
Lees antwoord
Activeer chatbot
door te begroeten
“hallo” + Enter
Bekijk inhoud artikel
Beantwoord
reactie
Lees meer
info
Links naar
onderwerp
Andere vraag
Stel je vraag
Beantwoord
reactie
Stel je vraag
Klik op link
van artikel
Klik op één van
de andere links
Ga terug naar home
om de chatbot te
herzien
2x Max
Tot hier herhaling UTF 3
Vervolg UTF 3 (extra diepgang)
Stel nog een vraag
Klik op link
bekijk resultaat
bekijk resultaat
2
1

Pagina 08
Concept
In mijn huidige prototype (0.2) heb ik meer onderzoeksmethoden gebruikt om
betere ontwerpen te maken voor 50-75 jarige digibeten. Zo heb ik elementen
van de morfologische kaart meegenomen in het ontwerp. Het zijn geen
nieuwe uitvindingen maar uit mijn testresultaten van het interview is gebleken
dat features het beste werken als de persoon dezelfde handeling al vaker
heeft gedaan. Daarom heb ik de chatbot relatief standaard gehouden met
toetsaanslagen als input voor de vragen of zoekopdrachten.
Verder heb ik voor zo min mogelijk vlakken tekst gekozen om de gebruiker niet in
de war te brengen.
Inzichten Prototype 0.2
• De nieuwe flow is makkelijker te begrijpen voor de doelgroep
• De nieuwe flow heeft minder stappen nodig voor hetzelfde resultaat
• Je kunt nu vanaf elke pagina de chatbot gebruiken
• De chatbot geeft geen onduidellijke antwoorden via de chat
• Minder vlakken met tekst wat verwarring zal verminderen
UTF prototype 0.2
> Lees alles over de UTF van prototye 0.2 in de bijlagen op pagina 37

Screenflow prototype 0.2
Scherm 0.1 Home
Op de homepagina maak je direct kennis met de chatbot. De chatbot
staat centraal en heeft een Tone of Voice die is afgestemd op 50-75 jarige
digibeten.
Pagina 09

Scherm 0.1.1 Home
Als de bot merkt dat je voor een langere tijd niks aan het doen bent,
komt in het tekstvlak een stuk tekst erbij die indiceert dat je niet alleen
een vraag kunt stellen maar ook de mogelijkheid hebt om het tekstvlak te
gebruiken als zoekmachine.
Scherm 0.1.1.2 Home
Dit is hoe het eruit ziet als de gebruiker zijn/haar vraag typt in het
tekstvlak. De kleur is rood zodat de gebruiker weet dat je de tekst zelf
hebt getypt. Als er iets is getypt verschijnt er ook een verzend icon. Op
Enter klikken op het toetsenboard is ook altijd mogelijk.
Pagina 10

Scherm 0.1 .1.4 Home
De bot is aan het nadenken over het antwoord wat gegeven gaat worden. Om
de gebruiker te laten zien dat er nog wel iets gebeurt heb ik een loading state
toegepast.
Scherm 0.1.1.3 Home
Als je je vraag hebt ingetypt verschijnt je vraag in de chatbot. Jouw
tekst staat rechts en krijgt de kleur grijs. Deze layout associeert zich met
andere communicatie applicaties waardoor het makkelijk te begrijpen is
en de learningcurve laag wordt gehouden.
Pagina 11

Scherm 1.1 Alles over Phishing
Na enige tijd (c.a 5 seconden), vraagt de bot of dit wel hetgene is wat de
gebruiker zocht of wellicht nog andere vragen/zoekopdrachten heeft. Dit
is dezelfde miniflow als in scherm 0.1.1. en hiermee weet de gebruiker wat
hij kan doen. De functie is namelijk nog steeds hetzelfde.
Het deel onder de bot is een inframe pagina. De onderkant van de pagina
wordt ingeladen zodat het bovenste deel, in dit geval chatbot, gelijk
kan blijven. Het antwoord kan hierdoor gegeven worden in de chat en je
wordt erop gewezen dat je de informatie hieronder meteen kunt lezen.
Pagina 12

Conclusie onderzoek en prototype
Nadat ik vanuit de HvA opdracht hadden gekregen een oplossing te
bedenken voor de chatbot van wijzer.amsterdam, ben ik begonnen met een
interview en veel deskresearch. Uit mijn deskresearch kwamen een aantal
deelvragen naar voren waarvan ik 2 volledig heb kunnen beantwoorden. Deze
deelvragen heb ik kunnen beantwoorden middels interviews, observatie, User
Task Flows, Deskresearch, Paperprototyping en de schoolopdrachten met
brainstormopdrachten zoals de morfologische kaart.
Deelvragen
De drie deelvragen die ik in de loop van dit project nog wil behandelen:
chatbot?
• Met welke soort websites of communicatie- middelen kunnen ze nu mee overweg?
• Welke manier van communicatie, spraak of tekst, werkt het beste voor Nederlandse
digibeten van 70+ jaar?
Deze deelvragen heb ik nog niet volledig kunnen behandelen en hoop deze te
beantwoorden als ik de komende weken aan de slag ga met de iteratie op prototype 0.2.
Bij het itereren ga ik opzoek naar nieuwe testpersonen om diverse feedback te
verwerken en over 3 weken aan te zetten met prototype 1.0.
Conclusie
Aan het begin van dit onderzoek vroeg ik me vooral af waarom wijzer.amsterdam gebruik
maakte van een chatbot op een “non-profitable” informatie website. Al gauw kwam de
doorslag dat informatie zoeken op het internet niet alleen voor jongeren was en dat de
informatie op wijzer.amsterdam zeer handig kan zijn voor een oudere doelgroep.
Onderzoeksresultaten
Tijdens het uitvoeren van de interviews, werd ik met mijn neus op de feiten gedrukt, hoe
serieus het probleem is onder digibeten. Websites zoals wijzer.amsterdam zijn is voor
veel mensen een ruggengraat als zij geen hulp nabij kunnen krijgen. Met features zoals
de chatbot kan hulp voor digibeten persoonlijker uitvoeren en niet als een taak waar
het einde onzeker is, want hoe weet een digibeet of hij/zij de juiste informatie heeft
gevonden? Het probleem zit hem voornamelijk in de taal. Stappen zijn te groot in de
ogen van een digibeet en ze zijn bang dat ze iets verkeerds doen. Het internet is eng en
zit vol met mensen die misbruik van je kunnen maken.
De meest nuttige inzichten kwamen uit de interviews en de deskresearch. Zo bleek
uit de interviews dat het opweg helpen en iemand naast je te hebben die je goede
begeleiding kan geven voor veel rust kan zorgen. Zelf exploreren als digibeet is nou
eenmaal spannend, je moet vooral durven. Uit onze deskresearch kwamen de inzichten:
Door gebruikers opweg te helpen door een aantal vragen neer te zetten die relevant zijn
en vaak worden gesteld kun je een grote groep helpen op een eenvoudige manier. Toch
denk ik dat als je de digibeet wilt helpen op een langer termijn, dat je een learning-curve
moet inbouwen in de oplossing. Op een dag moeten ze het zelf kunnen en zullen ze zelf
opzoek gaan naar nodige informatie. Als ontwerper neem ik deze verantwoordelijkheid
en wil in de volgende iteraties een oplossing bedenken die voor de learning-curve zorgt.
Pagina 13

Pagina 14
Wijzer.Amsterdam Design Rationale Feedback
Feedback op Design Rationale Planning week 6 t/m 8
In week 6 heb ik feedback ontvangen op mijn Design Rationale. Hierin kwam
naar voren dat mijn onderzoek en ontwikkelingsproces, duidelijk omschreven
en goed navolgbaar is. Eën kritiek-puntje was dat ik in het verhaal van mijn
storyboard het plaatje apart kan nemen in plaats van het doorlopen als geheel.
Hieronder staat de feedback uit mijn beoordeling.
Feedback
• “Storyboard in video plaatje voor plaatje laten zien. Dan komt het beter tot zijn
recht.”
• “Het is meteen duidelijk welk probleem je gaat oplossen m.b.t. UTF & HTA”
• “Mooi en rustig ingesproken.”
• “Ik vind het heel nice hoe je je document hebt opgedeeld en vormgegeven. Alles is
goed navolgbaar en is gemakkelijk te lezen. Al je design keuzes zijn gebaseerd op
bevindingen van de interview.”
• “Die diagram van hoe de interactie gaat werken maakt het gelijk helemaal duidelijk
hoe je het probleem gaat oplossen. Verder is elk scherm duidelijk beschreven en
goed te volgen.”
Wat ga ik doen in week 6 t/m 8
Aan het einde van mijn conclusie in week 5 gaf ik aan dat ik nog 3 deelvragen
had die onbeantwoord waren. Om deze deelvragen te beantwoorden zal ik een
nieuw prototype maken die een extra functie zal krijgen. Door te kunnen zoeken
met “spraak” wil ik onderzoeken of mijn doelgroep het begrijpt en of ze er goed
mee uit de voeten kunnen komen. Hiernaast wil ik een flow van communicatie
uitwerken die ervoor zorgt dat de 50-75 jarige digibeet de juiste informatie kan
vinden op wijzer.amsterdam.
Voor de laatste sprint heb ik een planning gemaakt die mij gaat helpen om een
nieuw prototype te maken die meer diversiteit zal geven voor het zoeken van
informatie en tegelijkertijd begrijpbaar is voor 50-75 jarige digibeten.
Planning
Schetsen maken voor modes
Schetsen maken voor loops
2 loops uitwerken waarvan 1 in prototype komt loop kan zijn dat bot vraagt om
nieuwe vraag dus 1 met geluid en de ander met een pop-up bijvoorbeeld
1 mode die switched tussen spraak en typen de spraak uitwerken (en een happy
flow weergeven in het prototype gemaakt met Adobe XD)
Testen van prototype d.m.v. Interviews en een expert review
Nieuw Prototype maken
Laatste kleine aanpassingen doorvoeren
Conclusie van prototype HTA & UTF beargumentatie
DR aanvullen met nieuwe prototype en conclusies
Presentatie opnemen van Design Rationale
Film opnemen voor toelichten van Productbiografie

Idee ontwikkeling
Ontwikkeling van het onderzoek & belangrijkste
richting van het idee.
Loops & modes
Door loops en modes toe te voegen aan prototype 1.0, wil ik het de 50-75
jarige digibeet makkelijker maken om op wijzer.amsterdam te navigeren. Uit
onderzoeken zoals mijn concurentie-analyse heb ik kunnen opmaken welke
technieken het beste werken in de praktijk. Vanuit deze referentiepunten ben ik
gaan schetsen op welke manieren ik ze kan toevoegen aan prototype 1.0.
Door chatbots van andere websites goed te analyseren heb ik 9 varianten
gemaakt die ik vervolgens heb getest met mijn doelgroep. Daar kwamen de
volgende punten uit.
Uitkomsten
• De tijd krijgen om alles rustig door te kunnen nemen is belangrijk.
• De chatbot moet op elk scherm bereikbaar zijn om gemakkelijk vraag/zoek-
opdrachten uit te kunnen voeren.
• Er mag niet teveel informatie staan op 1 pagina om verwarring te voorkomen.
• Van te voren kiezen tussen typen of spraak schrikt af. Een keuze maken voordat er
een doel gesteld kan worden is een no go.
• De belangrijkste functie, in dit geval de chatbot moet altijd in het midde komen te
staan.
• Een loop of mode werkt het beste als de gebruiker hem herkend en dus al een keer
eerder heeft gebruikt op een andere website.
• Een kleur geeft een bepaalde associatie bij gegeven elementen zoals knoppen. Geef
dus duidelijk aan of iets klikbaar of geactiveert is.
Conclusie
Uit de loops & modes i.c.m. onderzoeksanalyses kwamen genoeg eerste ideeën
waarmee ik een second opinion kon opvragen bij een expert.
> Bekijk alle varianten van de loops & modes in de bijlagen op pagina 54
Pagina 15
Wijzer.Amsterdam Design Rationale (week 6 t/m 8)

Pagina 16
Expert review
Om een betere keuze te maken voor het implementeren van de mode en loop
om mijn huidige prototype te verbeteren heb ik besloten om een expert review
af te nemen. De schetsen van de loops & modes heb ik uitgewerkt in kleine
flows van prototype 0.2. Vervolgens heb ik de 9 soorten modes en loops samen
met de debrief voortgedragen aan 2 vierde jaars CMD-studenten. Hieruit kwam
de volgende feedback.
Feedback
• “Ik denk dat geen van alle varianten volledig zullen aansluiten op je doelgroep. Als
verbetering raad ik aan om een paar varianten te combineren zoals 4 & 5.”
• “Nummer 5 is eigenlijk de variant die zowel typen als spraak het beste weergeven in
een gecentreerde positie die meteen opvalt voor een 50-75 jarige digibeet.”
• “Ik zou de nacht-modus achterwegen laten aangezien dit misschien voor verwarring
kan zorgen, het is ook een knop meer dus misschien schrikt het af of brengt het
verwarring bij de doelgroep.”
• “De personagevorming(in dit geval een bot), zou ik pas gebruiken bij een volgende
iteratie, als de knoppen bijvoorbeeld nog niet duidelijk genoeg zijn.”
• “Probeer zoveel mogelijk informatie centraal te houden in chatbot zodat de
gebruiker weet waar hij/zij moet kijken voor het antwoord. Op deze manier voorkom
je dat de gebruiker teveel moet zoeken en het niet meer begrijpt waardoor hij/zij de
zoekopdracht niet meer willen voortzetten.”
> Bekijk de gekozen variant op de volgende pagina

Pagina 17
Gekozen variant
Met de resultaten van de expert reviews heb gekozen voor variant 5 en zal ik het
advies aanhouden om de focus van de gebruiker centraal te houden. Op deze
manier wil ik voorkomen dat de gebruiker afhaakt omdat er teveel informatie op
het scherm staat.
De loop die ik hierin zal verwerken is de gebruiker opweg te helpen als de vraag
niet begrepen wordt, inactiviteit plaats vind en geluid implementeren om de
gebruiker op de hoogte te brengen dat zijn/haar vraag beantwoord is.
De mode zal in dit geval de spraaktoeving zijn. Je zult straks kunnen kiezen
tussen het typen of inspreken van je vraag/zoekopdracht.
Hier links staat de variant waarop prototype 1.0 heb gebaseerd.
Op de volgende pagina heb ik een side by side vergelijking gemaakt om de
verschillen aan te tonen tussen prototype 0.2 en 1.0.
Variant 5
> Bekijk screenflow van prototype 1.0 in de bijlagen op pagina 65
https://xd.adobe.com/view/ab037739-2764-4f9b-8835-e594ab7581fa-fe50/?-
fullscreen&hints=off

Pagina 18
Side by side prototype 0.2 & 1.0
1. Vraag intypen (oud)
In deze state voert de gebruiker zijn/haar vraag in door te typen op het toetsenboard
van de computer of laptop. Zijn vraag wordt in het rood aangegeven in het typvlak.
Aanpassing
• Button toevoeging in typvlak met tekst bij de button om nog duidelijker te maken dat
je hierin kunt typen en je vraag versturen.
• Toevoegen spraak-functie. Je kunt nu ook je vraag/zoekopdracht inspreken in plaats
van typen door op de knop met de microfoon te klikken.
• Bij antwoorden van de chatbot krijg je nu een geluid te horen dat vergelijkbaar is met
het geluid bij het verkrijgen van een sms/whatsapp bericht. Door op het geluidsicoon
te klikken kun je ervoor kiezen om dit geluid wel/niet te horen.
1. Vraag intypen/inspreken (nieuw)
In deze state voert de gebruiker zijn/haar vraag in door te typen op het toetsenboard of
in te spreken in de microfoon van de computer of laptop.
Rood = Toevoeging/verandering

Pagina 19
2. Functie verduidelijken (oud)
In dit scherm krijgt de gebruiker uitleg over de functie in het typvlak.
Aanpassing
• Toevoeging van een button om nog duidelijker te maken dat je in dit vlak kunt typen
en vervolgens je vraag te verzenden.
2. Functie verduidelijken (nieuw)
In dit scherm krijgt de gebruiker uitleg over de functie in het typvlak en is het duidelijker
waar je op kunt klikken om de vraag te verzenden.

Pagina 20
3. Typen in tekstvlak (oud)
Tekst die de gebruiker typt verduidelijken met een rode kleur. Bij het typen van de
eerste letter verschijnt de verzend-knop.
Aanpassing
• Tekst kleurt niet langer rood omdat de verzend-button en loadingstates al genoeg
informatie geven bij het intypen of inspreken van een vraag/zoek opdracht.
• Loading state komt nu ook in beeld als de gebruiker zijn eigen vraag inspreekt of typt.
3. Typen en spraakverwerking (nieuw)
Tekst die de gebruiker typt verduidelijken met een rode kleur. De verzendknop is altijd
zichtbaar en wordt rood als er getypt is in het typvlak.

Pagina 21
4. Laden antwoord (oud)
Als de vraag is ingetypt komt de chatbot met een antwoord. Voordat er een antwoord
wordt gegeven zie je de loading state.
Aanpassing
• Bij het laden zie je niet alleen de drie puntjes die van kleur veranderen maar ook een
tekst die de gebruiker vertelt dat de chatbot opzoek is naar een antwoord.
• Als je je vraag hebt ingesproken kleurt de microfoon groen om te laten weten dat je
vraag succesvol is doorgekregen.
4. Laden antwoord (nieuw)
Als de vraag is ingetypt/ingesproken, komt de chatbot met een antwoord. De loading
state laat zich nu ook zien in het typvlak.

Pagina 22
5. Alert-check(oud)
Bij inactiviteit na het bekijken van de resultaten-pagina, krijg je een bericht van de
chatbot die vraagt of je de juiste informatie hebt gevonden.
Aanpassing
• De verzend-button kleurt rood en de tekst in het typvlak is korter en directer om te
voorkomen dat er teveel tekst zichbaar is.
• Het bericht van de chatbot kleurt nu lichtelijk rood op en je hoort een bericht-geluid
zodat de gebruiker weet dat er een nieuw antwoord/bericht in de chatbot staat.
• Je kunt nu kiezen om je vraag in te spreken.
• Je kunt geluiden bij het verkrijgen van een bericht dempen.
5. Alert-check(nieuw)
Bij inactiviteit na het bekijken van de resultaten-pagina, krijg je een bericht van de
chatbot die vraagt of je de juiste informatie hebt gevonden.

Pagina 23
Meest effectieve toepassing
Continuous state (scherm 0.2.3 - 3.0)
Dit is de belangrijkste state voor mijn doelgroep. Het is namelijk belangrijk dat
de gebruiker opweg wordt geholpen. Omdat ze vaak niet weten waar ze op
moeten zoeken weten ze ook niet welke informatie ze kunnen vinden of wat
handig is om te weten. Daarom heb ik deze “continuous” state geïmplemen-
teerd, die gerelateerde artikelen laadt. Zo kunnen ze hun vraag exploreren.
> Bekijk alle animaties van loops & modes van prototype 1.0 in de bijlagen op pagina 72

Pagina 24
Conclusie & Test Prototype 1.0
Met prototype 1.0 was mijn intentie om nieuwe functies te verwerken die 50-
75 jarige digibeten, het makkelijker maken om informatie op kunnen zoeken
op wijzer.amsterdam. Om te kunnen testen of prototype 1.0 een verbetering is
ten opzichte van prototype 0.2, heb ik op dezelfde manier getest als in week 5.
Hiervoor heb ik 2 verschillende “flows” gemaakt van prototype 1.0, namelijk een
flow die alleen werkt met spraak en een flow die alleen werkt met typen.
Uit mijn conclusie van week 5 kwam naar voren dat ik nog op 3 deelvragen
antwoorden moest zoeken om een een prototype te maken die beter aansluit op
mijn doelgroep. Met prototype 1.0 heb ik succesvol antwoord kunnen geven op
deze openstaande deelvragen en dus ook mijn Design Challenge in het geheel.
Deelvragen
De drie deelvragen die ik heb beantwoord in week 6 t/m8:
chatbot?
• Met welke soort websites of communicatie- middelen kunnen ze nu mee overweg?
• Welke manier van communicatie, spraak of tekst, werkt het beste voor Nederlandse
digibeten van 70+ jaar?
Design Challenge
“Hoe maak ik een User Interface die begrijpbaar is voor digibeten tussen de 50-75 jaar
die ervoor zorgt dat ze de chatbot op wijzer.amsterdam kunnen gebruiken om zijn/haar
benodigde informatie te vinden?”
Gebruiksgemak
Uit de reviews met mijn doelgroep kwam naar voren dat de oplossing helder en duidelijk
was. Het is nu mogelijk om via twee input-kanalen informatie te zoeken, namelijk spraak
en typen. Voor digibeten is inspreken vaak makkelijker dan typen omdat het typen
traag gaat en voor afleiding zorgt. Bij het typen kijkt de gebruiker namelijk teveel op
het toetsenbord en vervolgens weer naar het scherm. Elke keer wanneer dit gebeurt,
moet de gebruiker zich opnieuw focussen op de nieuw binnengekomen informatie. Die
informatie kan als teveel worden ervaren waardoor de gebruiker afhaakt en dus niet
zelfstandig de informatie kan vinden. De spraaktoevoeging verhelpt dit probleem en
maakt het zoeken gemakkelijker.
Conclusie
De laatste feature, de “Continuous state” was een succes. Voor deze doelgroep is het
namelijk erg belangrijk dat ze een goede sturing hebben. Uit mijn deskreasearch kwam
naar voren dat 50-75 jarige digibeten het moeilijk en eng vonden om zelf stappen te
ondernemen om informatie op te zoeken op het internet.
Door ze te begeleiden met behulp van tekst in de vlakken waar ze mee kunnen
interacteren en de chatbot informatie op te laten zoeken die gerelateerd is aan hun
vraag/zoek-opdrachten, haal je een hoop onzekerheid weg bij de gebruiker.
Het is namelijk vaak zo dat de gebruiker ook niet weet waar die verder op moet zoeken
omdat bijvoorbeeld de digitale kennis zelf al niet te nauw is.
Neem als voorbeeld dat de gebruiker iets zou kunnen opzoeken over Phishing en nu
weet wat het is. Het is goed dat hij/zij nu weet wat het is maar hoe voorkom je eigenlijk
phishing. En dit is dus waar de chatbot een grote rol in speelt, hij brengt de data naar
voren om de gebruiker beter te informeren en zo ervoor kunnen zorgen dat hij/zij nooit
een phishing-bericht in de email zou krijgen doordat ze nu gelezen hebben hoe je
cookies kunt verwijderen.
fullscreen&hints=off

Project Interaction
Product Biografie
07-03-2021
Mitch Kappen (500758317)
Anne Marleen Olthof, Carla Mooij, Ruben Logjes, Harm van Vugt, Michel Alders
https://xd.adobe.com/view/ab037739-2764-4f9b-8835-e594ab7581fa-fe50/?fullscreen&hints=off

Pagina 2
Project Interaction Productbiografie
Debrief
Deskresearch
Gebruiksgroep
Huiswerkopdracht 1
Hiërarchische Taak Analyse
User Task Flows
ToDo 3 patterns
Interview
LoFi schetsen
Goede en Slechte triggers
Design Challenge
Prototype 0.1
Storyboard
Morfologische kaart
Prototype 0.2
Screenflow 0.2
HTA en UTF
States
Frame by Frame
Trigger Rule Feedback
Week 6 t/m 8
Planning
Schetsen prototype 1.0
Loops & modes
Expert review en keuzes
Animaties & states
Test en conclusie
Nieuwe* HTA & UTF
03
04
04
06
08
09
12
15
17
20
22
23
26
27
31
32
36
38
48
48
52
52
53
54
63
65
72
79
84
85
Inhoudsopgave

Debriefing
Het probleem dat wij voorgelegd hebben gekregen komt via de Hogeschool van
Amsterdam en gaat over een chatbot op de website wijzer.amsterdam.
Het probleem
Wijzer.amsterdam maakt momenteel gebruik van een chatbot functie op hun website.
Hiermee willen ze gebruikers helpen zoeken naar informatie zonder zelf veel te zoeken
op de website. Nu blijkt uit verschillende beta-testen en onderzoek dat de huidige
chatbot te hoog gegrepen is voor hun doelgroep. Om toch deze doelgroep te kunnen
bereiken via een chatbot moet er een nieuwe chatbot worden ontwikkeld die een betere
benadering heeft voor deze doelgroep
De opdracht
Dankzij Flow.ai is het mogelijk om gemakkelijk een chatbot te maken die je kan
specificeren op een doelgroep. Met Flow.ai kun je snelle aanpassingen maken en direct
testen met je doelgroep. Aan ons is de taak om een nieuwe User Interface en een deel
van de flow voor een chatbot(conversational interface) te ontwerpen. De user interface
moet ontwikkeld worden voor een zelf gekozen gespecificeerde doelgroep die in staat is
om hulp te zoeken via de chatbot.
Motivatie
Als doelgroep heb ik gekozen voor de digibeet. Ik heb voor deze doelgroep gekozen
omdat ik zelf bij Student aan Huis(SAH) heb gewerkt en van dichtbij mee heb kunnen
maken hoe groot de vraag is naar ICT-hulp is. Het is niet altijd een gegeven dat
apparaten op dezelfde logische wijze werken bij gebruikers. Een digibeet is vaak heel
onzeker over de keuzes die hij/zij maakt op het apparaat. Daarom vragen zij vaak om
hulp. Met het implementeren van de chatbot wil ik deze richten op digibeten om de
“angst/vraag-drempel” te verlagen. Zo moet de chatbot persoonlijk zijn met duidelijke
taal zodat het uitnodigt om te gebruiken.
Op te leveren
De volgende items worden voor deze opdracht opgeleverd:
• Concept ontwerpen (Prototype chatbot + User Interface).
• Documentatie met onderbouwing (Design Rationale + Productbiografie).
• Presentatie voor de stakeholders
Vraagstuk
Hoe maak ik een User Interface die begrijpbaar is voor mijn specifieke doelgroep
en die ervoor zorgt dat de doelgroep mijn ontworpen chatbot gaat gebruiken
om zijn/haar benodigde informatie te vinden?
Pagina 3
Project Interaction Debrief

Gebruiksgroep OBA Chatbot
Gekozen doelgroep:
Digibeten met geringe kennis over gebruik van computers en tablets.
Wie is de gebruiker:
Ik kies voor een oudere doelgroep van 50-75 jaar die moeite heeft met het
gebruiken van technologie.
Wat weet ik van deze gebruiker:
Mijn doelgroep heeft geen specifieke leeftijd. Het gaat met name om mensen
die niet mee zijn gekomen met het digitale tijdperk en altijd hun papieren
schriften hebben vertrouwd.
Simpele dingen zoals het gebruiken van je telefoon tijdens het boodschappen
doen en daarmee betalen is een brug te ver voor de digibeet.
Dit geldt niet voor alle digibeten. Er zijn namelijk segmenten in de term
digibeet. De grootste groep van deze digibeten, zijn helemaal geen digibeet(K.
Visser, 2020). Deze doelgroep ziet technologie als een gegeven maar zal deze
niet willen omarmen. Bij simpele taakjes zoals het aansluiten van een extern
beeldscherm (wat niet meer is dan een kabel verbinden), gaat het al mis. Als
ze de ICT’er erbij roepen, zeggen ze vaak al “ik ben een digibeet, ik heb geen
verstand van computers”(A. Beunje, 2019). Het is niet de kennis die ontbreekt,
maar de angst of wil om het probleem op te lossen zonder iets fout te doen.
Dit relateert in lineaire mate aan het opzoeken van informatie. Een chatbot zou
een goed communicatie-middel zijn voor deze personen. Op deze manier zou-
den ze hun angst kunnen overwinnen.
Waarom kies ik voor deze doelgroep:
Ik heb voor de doelgroep digibeten gekozen omdat ik zelf bij
StudentAanHuis(SAH) heb gewerkt en van dichtbij mee heb kunnen maken hoe
groot de vraag naar ICT hulp is. Het is niet altijd een gegeven dat apparaten op
dezelfde logische wijze werken bij gebruikers. Een digibeet is vaak heel onzeker
over de keuzes die hij/zij maakt op het apparaat. Daarom vragen zij vaak om
hulp(Radar, 2020). Met het implementeren van de chatbot wil ik deze richten
op digibeten om de “angst/vraag-drempel” te verlagen. Zo moet de chatbot
persoonlijk zijn met duidelijke taal zodat het uitnodigt om te gebruiken.
Om nog meer van mijn doelgroep te weten te komen, wil ik digibeten gaan
interviewen. Deze digibeten bevinden zich in mijn kring en zal deze interviews
telefonisch afnemen.
Literatuurlijst staat op volgende bladzijde..
Pagina 4
Project Interaction Gebruiksgroep | 1/2 (deskresearch)

Literatuurlijst
Beunje, A. (2019). Digibeten bestaan niet! Geraadpleegd van https://digiweten.
nl/digibeten-bestaan-niet
Visser, K. (2020, 22 september). Rol niet met je ogen naar een digibeet! 10 tips
om met ze om te gaan. Geraadpleegd van https://www.managementsupport.nl/
digitaal-werken/tip/2020/09/rol-niet-met-je-ogen-naar-een-digibeet-10-tips-om-
met-ze-om-te-gaan-10118852?
Derksen, M. (2018, 24 december). Nederlandse overheid neemt digitale
vaardigheden burgers niet serieus. Geraadpleegd van https://koneksa-mondo.
nl/ 2018/12/24/nederlandse-overheid-neemt-digitale-vaardigheden-burgers-niet-
serieus/
Ministerie van Algemene Zaken. (2020, 25 juni). Nederlandse
Digitaliseringsstrategie 2020. Geraadpleegd van https://www.rijksoverheid.nl/
documenten/rapporten/2020/06/25/nederlandse-digitaliseringsstrategie-2020
Nieuwenburg, P. (2019, 13 januari). Digitale Inclusie: Iedereen moet kunnen
meedoen. Geraadpleegd van https://www.digitaleoverheid.nl/nieuws/digitale-
inclusie-iedereen-moet-kunnen-meedoen/
Radar. (2020, 17 januari). Hulp met computers en internet: waar kun je terecht
als digibeet? Geraadpleegd van https://radar.avrotros.nl/hulp-tips/hulpartikelen/
item/ hulp-met-computers-en-internet-waar-kun-je-terecht-als-digibeet/
Pagina 5
Project Interaction Gebruiksgroep | 2/2 (deskresearch)
Literatuurlijst

Pagina 6
Project Interaction Huiswerkopdracht 1 1/2
Vervelende interacties
Feedback:
- Ze zouden het zo moeten maken dat op elke
pagina de gewenste zoekresultaten kunt vinden
- Volgensmij krijg je inderdaad op de homepagina
alleen gebruikers en groepen. Ik weet niet wat er
gebeurd als je op de pagina’s van leden en filmpjes
zoekt. Het is in iedergeval geen fijne zoekmachine.
Feedback:
- Dit heb ik ook ondervonden, er zit volgensmij een
grote vertraging in de chatbot
- Inderdaad soms blijft hij maar laden en geeft late
reacties
- Bij 1 vraag krijg je heel vaak 3 antwoorden
Feedback:
- Dit is me nog niet opgevallen, ik wist niet dat je via
deze manier kon navigeren naar apps van google.
- Jammer dat het alleen zichtbaar is bij applicaties
van google en niet algemene sites die je vaak zou
gebruiken
Facebook zoeken Wijzer.Amsterdam chatbot Google Chrome
Op facebook zoeken kan soms frustrerend zijn. Stel
dat je iets wilt zoeken in de “Market”, dan moet je
eerst op de pagina van de Market staan om te
kunnen zoeken.
Bij het oproepen van chatbot kun je hulp krijgen om
informatie op te zoeken. Helaas werkt dit niet altijd
even goed en verdwijnt er veel informatie na het
stellen van vragen. Je moet vervolgens naar boven
scrollen om antwoorden terug te lezen en afentoe
verspringt alles.
Bij websites van Google krijg je rechtsbovenin altijd
de optie om te switchen naar een andere website
van Google.
Helaas krijg je op niet-Google-sites, deze optie niet
waardoor je uiteindelijk altijd de website zelf moet
opzoeken.
Dit is handig want je kunt in 1 goed overzicht zien
waar je naartoe kunt navigeren
Hierboven bevindt je je op de homepagina en kan je
niks vinden in de Market als je het zoekvlak gebruikt.
Je moet vervolgens eerst de Market selecteren om
objecten te kunnen zoeken i.p.v. gebruikers, groep-
en en pagina’s.
Pas op de pagina van de Market zelf kun je vinden
waar je naar zoekt en niet naar wie je zoekt..

Pagina 7
Project Interaction Huiswerkopdracht 1 2/2
Fijne interacties
Feedback:
- Inderdaad een fijne interactie, ik gebruik deze heel
vaak maar heb nooit stil gestaan bij het idee dat ik
dezelfde muziek aangeboden krijg.
- Inderdaad makkelijk om snel je liedjes toe te
voegen. Dit werkt ook vanaf mijn home-screen, als ik
nieuwe liedjes luister dan hoef ik niet helemaal mijn
telefoon te ontgrendelen om het lied toe te voegen
Feedback:
- Het is inderdaad handig om eerst antwoorden zelf
te zoeken voordat je het vraagt “aan iemand
anders”, toch is hun vorm van activeren wat verbor-
gen (misschien was dat hun intentie wel)
Feedback:
- Het opslaan van gesprekken wordt ook al gedaan
door de chatbot van wijzer.amsterdam, wat goed is,
is dat ze hier de keuze geven om verder te gaan met
een gesprek.
- De knop om een nieuwe chat te starten zou ik juist
groter maken.
Spotify liked songs Bol.com chatbot Bol.com chatbot
1. Door op de like button te drukken in de spotify
app, kun je het liedje snel toevoegen aan een
afspeellijst.
2. Als je hierop klikt zul je in de categorie “ontdek-
ken” meer van dit soort muziek vinden.
3. Eén probleem is dat als je dit niet vaak
aangeeft en er 1 keer gebruik van maakt.
Dat je als gevolg overwelmd wordt door
de muziek die hierop lijkt.
Als dus vaak hetzelfde soort genre leuk vindt, krijg je
alleen nog maar dat genre aangeboden.
Als je een vraag wilt stellen bij de klantenservice van
bol.com , krijg je eerst een overzicht waar je
antwoorden kunt vinden voor de meestvoor-
komende vragen.
Als je vraag er niet
tussen zit kun je een
gesprek starten en
vragen stellen aan de
chatbot.
Nog een feature van de bol.com chatbot is het
onthouden van gesprekken.
Als je al een lopend gesprek had met “Billie” kun je
deze hervatten of gewoon een nieuw gesprek
aangaan.

Hiërarchische Taak Analyse
HTA’s
• 1. Informatie zoeken over verbinden met internet
1.1 Een trefwoord intypen
1.2 Drukt enter op toetsenbord
1.3 Bekijkt resultaten
1.4 Klikt op gewenste zoekresultaat

• 2. Informatie zoeken via sidebar
2.1 Drukt op gewenst thema
2.3 Scrollt naar onder
2.4 Klikt op volgende pagina
2.6 Klikt op gewenste onderwerp
3.3 Leest antwoord
4.3 Leest antwoord
• 5. Informatie via telefoon
5.1 Klikt op “Liever telefonisch hulp?”
5.3 Drukt op bellen
5.4 Contact met medewerker

Pagina 8
Project Interaction Hiërarchische Taak Analyse (HTA)

Pagina 9
Project Interaction User Task Flow 1/3
User Task Flows
User Task Flows
Vul trefwoord in
Einde
Druk op enter
Klik op gewenst
resultaat
Scroll voor meer
info
Klik op gewenst
thema
Bekijk resultaat
Hieronder staan verschillende User Task Flows die gebasseerd zijn op de
HTA. Ik heb 5 verschillende flows uitgewerkt die op verschillende manieren
dezelfde resultaten laten zien op de website van Wijzer.Amsterdam.
De flow is adabtief waardoor testpersonen verschillende informatie kan
opzoeken bij de gegeven taak.
1. Informatie zoeken via zoekbalk 2. Informatie zoeken via sitebar
3. Informatie zoeken via chatbot
Kies een thema
Kies een thema
Bekijk resultaat
Lees antwoord
Lees antwoord
Lees antwoord
Activeer chatbot
door te begroeten
“hallo” + Enter
Bekijk resultaat
Klik en ga naar
volgende pagina
Beantwoord
reactie
Lees meer
info
Links naar
onderwerp
Andere vraag
Stel je vraag
Klik op artikel
Einde
Klik op link
van artikel
Einde
2x Max
2
1

Pagina 10
Einde
Einde
Kies een thema
5. Telefonisch informatie zoeken
Kijk rechtsboven op
wijzer.amsterdam
voor telefonische hulp
Lees antwoord
bekijk resultaat
Lees antwoord
Lees antwoord
Activeer chatbot
door te begroeten
“hallo” + Enter
Beantwoord
reactie
Lees meer
info
Links naar
onderwerp
Andere vraag
Stel je vraag
Beantwoord
reactie
Stel je vraag
Klik op tele-
fonische hulp
Bel Annuleer
Pak telefoon
Klik op link
van artikel
Klik op één van
de andere links
Ga terug naar home
om de chatbot te
herzien
2x Max
Lees de pop-up
Stel nog een vraag
Klik op link
Open telefoon-
oproep
Druk op Num-pad
Toets nummer in
Druk op bellen
bekijk resultaat
bekijk resultaat
2
1

Pagina 11
Conclusie UTF’s
De 5 flows afgeleidt van de HTA’s ben ik gaan testen met mijn testpersoon
Erwin. Bij UTF 1, 2 & 5 heb ik geen specifieke belemmeringen gevonden die
de opdracht niet haalbaar maakte. Bij elk van deze taken kon Erwin de nodige
informatie vinden. Bij UTF 3 en 4 gaf Erwin aan dat hij in de war raakte met
de stappen die hij van mij doorkreeg. De chatbot deed simpelweg niet wat hij
verwachtte.
UTF 3 en 4
Deze flows vormen een pijnpunt voor de opdrachtgever en functioneren minder goed
dan gedacht. Vanuit hier wil ik daarom verder onderzoeken wat er beter kan aan de
chatbotfunctie.
UTF 4 is een vervolging van UTF 3. UTF 3 beschrijft namelijk het zoekproces via de
chatbot en begint opbouwend naar de informatie die je wilt vinden. UTF 4 is eigenlijk
een flow voor als je in UTF 3 niet gevonden hebt wat je wilt vinden. Het namelijk ook
belangrijk dat als de informatie die je vind, niet de informatie is die je zocht, ook de
goede informatie zal vinden. De herleiding is dus eigenlijk UTF 4, vanuit hier wordt je
opnieuw opweg geholpen om de juiste informatie te vinden.
Gekozen deel van de UTF
Ik heb besloten om UTF 4 (Vervolg, informatie zoeken via chatbot) verder te
onderzoeken om mijn doelgroep en in dit geval Erwin beter te kunnen helpen.
Hier rechts staat UTF 4 en het gedeelte waar ik me op ga focussen. Voor de
duidelijkheid: de echte herhaling voor de gebruiker begint dus bij het teruggaan naar
“home”. Als je nieuwe informatie wilt vinden is dit namelijk de enige manier om opnieuw
gebruik te maken van de chatbotfunctie. Dit vormt een probleem die ik wil oplossen.
Einde
Kies een thema
Lees antwoord
bekijk resultaat
Lees antwoord
Lees antwoord
Activeer chatbot
door te begroeten
“hallo” + Enter
Beantwoord
reactie
Lees meer
info
Links naar
onderwerp
Andere vraag
Stel je vraag
Beantwoord
reactie
Stel je vraag
Klik op link
van artikel
Klik op één van
de andere links
Ga terug naar home
om de chatbot te
herzien
2x Max
Stel nog een vraag
Klik op link
bekijk resultaat
bekijk resultaat
2
1

Pagina 12
Project Interaction ToDo3 Patterns 1/3
Chatbot Billie van Bol.com
stelt zichzelf eerst voor bij
het activer en van de chat -
bot.
De klantenservice van
Bol.com laat weten dat ze
voor je klaar staan.
De chatbot is ingedeeld
zoals elke communicatie
applicatie. Boven in de hoek
van de tekst staat Bot Billie
afgebeeld met een icon .
Door het g roene stipje
links-boven, kun je zien dat
chatbot gelezen kan wo rden
door een echt persoon.
Visual :
De chatbot stelt zich voor en
vraagt hoe hij je kunt
helpen .
Functional:
De meest voorkomende
vragen staan al voor je klaar .
Je kunt de chatbot op 3
manier en activer en: door op
de button te drukken, iets te
typen of door op 1 van de
vragen te klikken.
Visual :
Door de klant meer dere
keuzes te geven, kun je de
klant sneller informatie ver -
strekken over wat hij/zij
zoekt.
Ook heeft de klant genoeg
keuzes om de interactie aan
te gaan.
Functional:
Om de chatbot te ber eiken
op de website staat hij
onderaan onder het kopje
service & contact.
De iconen van de chatbot
staat voor een glimlach van
Billie en jij die een vraag
hebt voor hem. Ook de tekst
vermeldt dat hij dag en
nacht voor je klaar staat.
Visual :
Door “Onze klantenservice”
te onderst repen, benadrukt
het dat je er op kunt klikken.
Verder duiden de iconen aan
op een gespr ek waar je als
klant naar opzoek bent .
Functional:

Pagina 13
Bij het kiezen van een voor g-
estelde vraag zoals op de
vorige pagina, zie je dat jij
de vraag steld en komt er
een tijd bij te staan.
Billie antwoor d en geeft je
de benodigte link om erach -
ter te komen waar je pakket -
je is. Hij laat je weten dat hij
als hij informatie aan het
ophalen is.
Visual :
De link naar de juiste pagina
om antwoor d te krijgen op je
vraag.
De gebruiker op de hoogte
brengen als hij informatie
aan het opbr engen is .
Functional:
Antwoo rden wor den
gegeven in het wit. De
linkjes waar op je kunt klikken
worden aangegeven in
blauw.
Door mee rdere antwoo rden
te geven in 1 kee r, leest het
makkelijker en wo rdt je niet
overladen met informatie in
een lang bericht .
Visual :
Je krijgt di rect een link met
de producten die je ooit
hebt besteld.
Door in te loggen kunnen ze
veel meer data van je ve r-
zamelen om je te helpen met
je vraag .
Functional:
Het gekozen pakket wor dt
beantwoo rd zonder dat je
zelf ziet dat je “de link” hebt
gekozen .
In tekst kun je teruglezen
wat je aangeklikt hebt.
Bij concr ete antwoor den zie
je het icoon van Billie er
links-boven.
Visual :
Bij het klikken op de vraag
krijg je di rect antwoor d en
zie je wanneer het pakketje
is binnen gekomen.
Billie vraagt door , hij vraagt
of je het wel ontvangen hebt
zo geeft hij je weer een
optie om het gespr ek voort
te zetten.
Functional:

Pagina 14
Niet alleen in de chatbot
krijg je antwoo rd op je
vraag. Bij het aanklikken van
een pr oduct verandert ook
de pagina mee.
Je ziet nu het p roduct waar
je informatie over hebt
gevraagd .
Visual :
Je kunt meteen het p roduct
zelf bekijken.
Je kunt het pr oduct in je
account bekijken om meer
informatie te krijgen.
Boven staan gegeven opties
wat je met de bestelling kunt
doen.
Functional:
Bij het klikken van het chat
icoon kun je de chat verbe r-
gen of her roepen.
Als je de chat weer her roept,
krijg je het laatst verstuu rde
bericht van Billie in een
andere tekstvorm .
Visual :
Laten zien dat de chatbot
nog steeds actief is en voor
je klaar staat .
Functional:
Deze opties staan op dezel f-
de pagina om een echte
medewerker te be reiken of
zelf iets te r egelen zoals
rourneren of volgen van een
pakket .
Visual :
Snelle linkjes naar informatie
of hulp.
Een ande re manier voor het
gebruiken van de chatbot .
Functional:
Bij lopende gesp rekken met
Billie, staat er op de pagina
of je ver der wilt gaan met
het gespr ek of een nieuw
gesprek wilt starten.
Visual :
Snel een nieuwe chat starten
of het gespr ek weer te her -
vatten.
Je gespr ek wor dt altijd
onthouden, zodat je ve rder
kan waar je gebleven was .
Functional:
Ook als je geen begruik wilt
maken van de chatbot, of als
de chatbot het antwoor d
niet heeft, kun je ook zelf
zoeken naar informatie.
De meest voor de hand
liggende categorieën staan
hier afgebeeld .
Visual :
Snel naviger en en de klant
helpen op dezelfde pagina
zonder informatie te verbe r-
gen of eerst naar een ande re
pagina te navige ren.
Functional:

Pagina 15
Project Interaction Interview 1/2
Interview
Na het kiezen van mijn doelgroep (digibeten van 50-75 jaar oud) ben ik opzoek
gegaan naar iemand die ik kon interviewen. Hier kwam ik bij Erwin Ouderland.
Erwin is iemand binnen mijn kring die makkelijk vragen kan stellen en waarvan ik
weet dat hij ook in deze doelgroep thuishoort.
Gestelde vragen
• Hoe vaak zoek je dingen op, op het internet?
• Heb je wel is hulp nodig bij het opzoeken van online informatie?
• Welke apparaten gebruik je wel eens om online wat op te zoeken?
• Heb je wel is gehoort van wijzer.amsterdam of ben je daar bekend mee?
• Van welke websites haal jij je informatie?
• Heb je geduld voor het vinden van de juiste informatie?
• Schakel je dan hulp in?
• Van wie krijg je deze hulp?
• Bel je wel eens iemand voor hulp?
• Welke internetbrowser gebruik je?
Aannames
Ik verwacht dat Erwin hulp krijgt van de mensen om hem heen en niet zo snel zal bellen
naar een hulplijn als hij er even niet uitkomt. Verder denk ik dat hij het meest online actief
is op zijn telefoon en laptop aangezien ik hem daar al een aantal keer mee geholpen
heb. Zijn browser zal dan ook Safari op zijn telefoon zijn en Google Chrome op de
laptop. Wijzer.Amsterdam zal een nieuwe site worden die hij goed kan gebruiken om
kleine dingen op te zoeken voordat hij het aan andere zal vragen. Geduld is niet altijd
een gegeven maar misschien dat de chatbot hem kan begeleiden. Verder verwacht ik dat
hij bij complexere zoekopdrachten de handdoek in de ring zal gooien aangezien de durf
om te klikken op een laag niveau ligt.
Opname
“Wat handig dat ik alles kan opzoeken op deze website
maar hoe werkt zo’n chatbot dan?”
“En als ik op deze link klik, dan ga ik naar hetgene dat
ik zoek toch?”
- Erwin
- Erwin
Pause/Play

Pagina 16
Project Interaction Interview 2/2
Interview
Voor het interview met Erwin heb ik bij hem thuis afgesproken en mij aan de
corona-richlijnen gehouden van het RIVM. Als voorbereiding heb ik alleen
de vragen opgeschreven die ik wil gaan stellen en mijn telefoon als recorder.
Voor dit interview wilde ik de antwoorden zo open mogelijk houden, daarom
heb geen specifieke signalen gegeven om een laptop of iPad te gebruiken als
zoekmiddel.
Inzichten
• Erwin zoekt de meeste informatie op via zijn laptop.
• Het liefst vraagt hij iemand anders als hij denkt dat hij het niet weet.
• Google chrome is zijn standaard browser zoals verwacht, hij kent ook geen andere.
• Wijzer.Amsterdam is nieuw voor hem.
• Hij heeft de chatbotfunctie voor het eerst ervaren.
• Als Erwin er niet meer uitkomt geeft hij de zoekopdracht op en vraagt de informatie
aan een ander.
Conclusie
Het interview met Erwin heeft veel inzichten opgeleverd. Wat bijvoorbeeld erg belangrijk
is, is dat de locatie ook een bepalende factor is. Als hij namelijk niemand in de buurt
heeft zal hij het zelf moeten uitvinden. Met behulp van de chatbot zou je dus al een
eind komen in die situatie. Helaas is de werking van de chatbot niet optimaal en vallen
de antwoorden en vragen zo in herhaling dat er gezocht wordt via de alternatieven
(zoekbalk en sidebar). Op deze manier lukt het Erwin om de informatie te vinden maar
vraagt constant naar confirmatie(zie Quotes rechts).
In het kort
• Een chatbot met de juiste communicatie is de oplossing voor Erwin
• De chatbot moet worden aangepast en groter gekaderd worden voor de laptop.
“Gaat het nog goed op deze manier?”
“Is dit een echt persoon of gaat hij nu echt iemand
erbij halen en kost dat geld?”
“Zit ik nog op de goede weg?”
- Erwin
- Erwin
- Erwin

Pagina 17
Project Interaction LoFi schetsen 1/3
Conclusie LoFi 1
De LoFi hier links afgebeeld is een oplossing gebasseerd op bevindingen van
mijn interview met Erwin. Erwin kwam voor het eerste keer op wijzer.amsterdam
en wist niet waar hij moest beginnen met zoeken behalve de zoekbalk met
de tekst “zoeken”. Omdat ik denk dat de chatbot de beste functie is voor
Erwin om zelfstandig informatie te vinden, wil ik die dan ook in mijn ontwerp
meenemen.
Doel
Mijn doel is om de gebruiker de chatbot te laten gebruiken om nodige
informatie te vinden. De huidige versie van de chatbot spreekt de gebruiker
niet goed genoeg aan en is daarom onduidelijk wat de mogelijkheden zijn.
Door de chatbot uitgesproken in het midden van de pagina weer te geven wil
het princiepe “keep the user in control” toepassen. Met duidelijke tekst die
aanspreekt tot de doelgroep 50-75 jarige digibeten, wil ik de gebruiker op weg
helpen zonder dat het afschrikt.
Testconclusie
Mijn testpersoon Erwin, herkende de site van zijn structuur. Dat is een
goed teken, ik heb namelijk zo min mogelijk aan de structuur proberen te
veranderen. De vorm qua vraagstelling was nog niet optimaal. De associatie
met het woord “persoonlijk” werd al gauw verkeerd opgevat. Het tekstvlak
helemaal links-boven beantwoorde wel 1 van de inzichten van het interview.
Het is namelijk gratis hulp waar niet voor betaald hoeft te worden.
Alleen de manier waarop hulp werd geboden werd steeds onduidelijker.
Rechtsboven staat namelijk “Liever telefonisch hulp?”, wat voor verwarring
zorgt.
Wat neem ik mee?
• Aanscherpen op communicatie.
• Minder informatie om verwarring te voorkomen.

Pagina 18
Conclusie LoFi 2
Ook LoFi 2 heb ik laten testen door Erwin. Testen met deze doelgroep is wel
lastig, ze snappen niet altijd hoe ze een tekening op papier moeten vertalen
naar de digitale versie van wijzer.amsterdam. Hier kwam dus veel begeleiding
aan te pas.
Doel
Mijn doel was om de chatbot weer als eerst te laten zien op de pagina.
Echter is het vlak waar je je vragen kunt stellen een stuk kleiner dan in
LoFi 1 en de huidige versie van wijzer.amsterdam. Wat mij inspireerde was
de chatbot van Bol.com die voor het activeren van de chatbot de meest
voorkomende vragen laat zien. Ook op deze manier wilde ik de gebruiker
dus eerst een vraag laten lezen een aanklikken en dan pas overgaan tot zelf
typen in het typvlak om je vraag je stellen aan de chatbot.
Testconclusie
In de test kwam naar voren dat de secties beter waren ingedeeld dan in
LoFi 1 en daarom ook een stukje duidelijker was. Misschien kwam dit omdat
Erwin bekend is met de weergave die op meerdere websites voorkomen.
Ook de subtitels werden als fijn ervaren, “Stel vragen zoals”, “Zoek
informatie per thema” en het kaderen van “telefonische hulp” hielp Erwin
dan ook enorm bij het begrijpen van de context.
Wat neem ik mee?
• Subtitels met een inleidend doelende functie.
• De gemaakte secties die zorgen voor duidelijkheid.
• Feed Forward, laat de gebruiker zien wat voor vragen hij kan stellen.
• Kaderen van informatie

Pagina 19
Conclusie LoFi 3
De LoFi hier links afgebeeld heb ik met dezelfde testpersoon doorlopen. Voor
de duidelijkheid: ik heb alle 3 LoFi’s gemaakt voordat ik ging testen om zoveel
mogelijk verschillende feedback te krijgen.
Doel
Mijn doel is nog steeds om de gebruiker de chatbot te laten gebruiken om
informatie te zoeken op wijzer.amsterdam. Het is dus belangrijk dat als je
op de homepagina komt, meteen de chatbot ziet. Door voorbeelden in de
chatbot te zetten zoals “Vraag dingen”, wil ik de gebruiker opweg helpen.
In mijn interview met Erwin kreeg ik als feedback dat het niet altijd duidelijk
was of je met een “robot” of echt persoon communiceerde. Daarom wil ik
met tekst duidelijk maken dat het gaat om een bot.
Testconclusie
De aandacht ging direct naar de gekaderde chatbot rechtsboven. De grote
tekst links, werd als 2e gelezen en daar kwam meteen het eerste probleem
naar boven. Erwin raakte namelijk in de war omdat er 2 vormen van “Stel je
vraag” in stond. Op welke zou je dan moeten klikken en waar moet ik dan
mijn vraag typen als ik op de linker knop druk, ingewikkeld dus. Als deze
doelgroep in verwarring komt, haken ze gauw af of vragen hulp ergens
anders. Het is dus belangrijk om duidelijke keuzes te maken en buttons met
dezelfde functie samen te voegen in 1 button. Wat wel duidelijk was, was
de grote “OF”. Dit maakt namelijk onderscheidt tussen het zelf zoeken en
zoeken met een chatbot wat Erwin begreep.
Wat neem ik mee?
• Onderscheidt maken tussen secties met taal en onderlijning
• Maximaal 1 button met dezelfde functie
• Vraag dingen zoals helpen de gebruiker goed op weg.

Pagina 20
Project Interaction Goede triggers wijzer.amsterdam 1/2

Pagina 21
Project Interaction Slechte triggers wijzer.amsterdam 1/2

Project Interaction Design Challenge
Design Challenge
Deelvragen
Hoe maak ik een User Interface die
begrijpbaar is voor digibeten tussen
de 50-75 jaar die ervoor zorgt dat
ze de chatbot op wijzer.amsterdam
kunnen gebruiken om zijn/haar
benodigde informatie te vinden?
1. Naar wat voor informatie zoeken
digibeten van 50-75 jaar oud?
2. Met welke soort websites of communicatie-
middelen kunnen ze nu mee overweg?
3. Hoe zorg ik ervoor dat mijn doelgroep de juiste
informatie vindt met behulp van de chatbot?
4. Hoe zorg ik ervoor dat digibeten van 50-75
jaar de chatbot kunnen gebruiken
5. Welke manier van communicatie, spraak of
tekst, werkt het beste voor Nederlandse digibet-
en van 70+ jaar?
Pagina 22

Project Interaction Prototype 0.1 Pagina 23
Inleiding Prototype 0.1
Dit prototype is gevormd uit informatie die ik heb opgehaald uit mijn interview,
User Task Flows en het testen van LoFi’s met Erwin Ouderland. Ik heb mij
gefocust op de welkomspagina en heb feedback gevraagt aan mijn ouders die
tot mijn verkozen doelgroep behoren (50-75 jarige digibeten).
Doel
Voor het eerste digitale prototype wilde ik het zo simpel mogelijk houden
om in volgende versies verder uit te bouwen. In deze versie heb ik dan
ook besloten om alleen te kunnen zoeken via de chatbot aangezien dat
mijn verkozen stuk van de HTA is. Als er dus op “Zoek in cetegorieën”
wordt geklikt, krijg je geen uitgewerkte flow te zien. Ik wil namelijk alleen
feedback krijgen om de chatbot te verbeteren.
Ik ben gaan testen of mijn doelgroep snapt waar ze moeten klikken om hun vraag
in te kunnen typen en de juiste informatie te kunnen vinden. In deze fase is het
dan ook meer een zoekfunctie dan een chatfunctie. Het gaat mij erom dat het
activeren van de chatbot namelijk ook zo zou kunnen werken en hiermee kan ik
testen of mijn doelgroep dat begrijpt.
Testconclusie
De simpliciteit is teug te vinden in het prototype, het is duidelijk wat de
gebruiker kan doen. Misschien is het handig om de chatbot en zoekfunctie
te combineren. Onbewust is dit namelijk een goed idee geweest om het zo
te testen. De chatbot kan namelijk ook pas actief worden als de gebruiker
er niet uitkomt en kan beginnen met het geven suggesties.
Wat neem ik mee?
• Chatbot en zoekfunctie combineren
• Oplossing vinden informatie/vlakken zo min mogelijk te verplaatsen
• Highlighten waar de tekst getypt wordt
• “Doe nog een poging” erin houden
“Kan ik hier ook gewoon zoeken?”
“Wel fijn dat de vraagstelling verandert”
“Waar ben ik nu aan het typen?”
- Eric
- Eric
- Marcia

Project Interaction Prototype 0.1
https://wijzer.amsterdam.nl
Detail Flow
Scherm 0.1
Op deze afbeelding zien we de startpagina
van de web-browser. In de URL is te zien dat
wijzer.amsterdam de site is die we willen bezoeken.
Scherm 1.1
Dit is de eerste kennismaking met wijzer.amsterdam. De gebruiker wordt
gevraagd om zijn vraag naar informatie in te typen. Mocht de gebruiker niet
weten waar hij/zij naar opzoek is, kan er met de rode button gezocht
worden in categoriën. In deze flow zal de gebruiker zich alleen bezig
houden met de typfunctie, om zijn informatie te vinden.
Scherm 1.2
In dit scherm zie je dat de gebruiker de vraag stelt in het
typ-vlak. Als getypt is in het vlak, verschijnt er een aanduiding
met de tekst “Druk op enter” erin om de functie te verduidelijken.
Pagina 24

Scherm 1.1.1
Na het drukken op “Enter” op het toetsenboard, verschijnd de
informatie waar de gebruiker naar op zoek is. In dit geval was de
gebruiker op zoek naar de betekenis van Phishing en krijgt de
nodige informatie te zien.
Mocht dit niet de informatie zijn die de gebruiker zocht, kan die
altijd nog een vraag typen in het tekst-vlak.

Storyboard Prototype 0.1
Erwin Ouderland wil weten wat phishing berichten zijn en besluit om
op wijzer.amsterdam informatie op te zoeken op haar laptop.
Erwin is niet zo handig met technologie maar hij heeft op een blaadje
de stappen opgeschreven om iets op te zoeken op het internet. Hij gaat
naar zijn internet browser en typt wijzer.amsterdam in en drukt
vervolgens op enter.
Hij komt op de homepagina en kijkt rond waar hij deze informatie
wellicht kan lezen.
Zijn oog valt op een tekst met groot lettertype. Hij leest het en besluit
om op deze manier zijn informatie te vinden.
Hij typt zijn vraag in de chatbot en krijgt een link naar de informatie. Hij kunt nu alle informatie vinden over Phishing berichten, dat ging
makkelijker dan gedacht!
Wat is Phishing?

Project Interaction Morfologische kaart 1/4 Pagina 27
Morfologische kaart
Hier rechts staan 2 morfologische kaarten, morfologische kaart 1.0 is de versie
die ik samen met 2 klasgenoten heb gemaakt. Morfologische kaart 2.0 is een
aanpassing en verdere uitwerking gericht op mijn HTA’s. In morfologische kaart
2.1 heb ik de laatste 2 kolommen apart genomen omdat dit het deel van mijn
gekozen stuk User Task Flow 4 is. De rood omcirkelde oplossingen wil ik gaan
verwerken in volgende prototypes. De inspiratie voor deze oplossingen komen
uit mijn concurentieonderzoek waar ik kennis heb opgedaan van bedrijven
zoals Bol.com. De goede triggers wil ik graag meenemen in concept 0.2 om
vervolgens te itereren en prototype 1.0 uit te kunnen rollen.
Doel
Door oplossingen te bedenken voor bestaande elementen die een pijnpunt
vormen voor wijzer.amsterdam ga ik opzoek naar creatieve alternatieven
die dezelfde functionaliteit hebben maar beter aanspreekt tot mijn
doelgroep(50-75-jarige digibeten). Om dit te testen zal ik deze oplossingen
in prototype 0.2 verwerken en testen met mijn ouders of Erwin die zich in
mijn bubbel bevinden zodat ik mij goed kan houden aan RIVM richtlijnen.
Met deze morfologische kaart is mijn doel de huidige chatbot van wijzer.
amsterdam te verbeteren en weer op een goede manier ingezet kan
worden.
Wat neem ik mee?
• Chatbot interactie via spraak
• Interactie door typen met toetsenboard
• Op een button/icon klikken om te activeren
• Een chatbot die terugpraat
Typen in de
zoekbalk
De “alles” knop
Losse categoriën
onder elkaar
Activeren chatbot
Antwoorden
krijgen van de
chatbot
Optie 1 Optie 2 Optie 3 Optie 4
Verduidelijken
Bring the data forward
Vragen-
lijst
Oproep naar actie
Traditioneel Menu
Tekst als button
Benadrukken
waar je cursor is
Filter
Schut heen en weer
voor activatie
Spraak Typen met
toetsenboard
Klik om te
activeren
Een figuur die je tips
geeft
Een bot die je
begeleidt Chatconversatie
De bot praat terug
met een stem
Alles
Links
Centreren
Typ hier uw
zoekopdracht:
Alle Artikelen Klik hier voor alles
Scroll naar
onder voor
alle artikelen
Activeren chatbot
Antwoorden
krijgen van de
chatbot
Schut heen en weer
voor activatie
Spraak Typen met
toetsenboard
Klik om te
activeren
geeft
Een bot die je
begeleidt
Chatconversatie
De bot praat terug
met een stem
Morfologische kaart 1.0
Bekijk de Morfologische kaarten in het groot op de volgende 3 bladzijdes

Typen in de
zoekbalk
De “alles” knop
Losse categoriën
onder elkaar
Activeren chatbot
Antwoorden
krijgen van de
chatbot
Verduidelijken
Bring the data forward
Vragen-
lijst
Oproep naar actie
Traditioneel Menu
Tekst als button
Benadrukken
waar je cursor is
Filter
Schut heen en weer
voor activatie
Spraak Typen met
toetsenboard
Klik om te
activeren
geeft
Een bot die je
begeleidt Chatconversatie
De bot praat terug
met een stem
Alles
Links
Centreren
Typ hier uw
zoekopdracht:
Alle Artikelen Klik hier voor alles
Scroll naar
onder voor
alle artikelen

Activeren chatbot
Antwoorden
krijgen van de
chatbot
Schut heen en weer
voor activatie
Spraak Typen met
toetsenboard
Klik om te
activeren
geeft
Een bot die je
begeleidt
Chatconversatie
De bot praat terug
met een stem
Korte toelichting
Met deze oplossingen wil het prototype 0.2
gaan maken. Ik zal niet alle elementen in
prototype 0.2 stoppen, maar beginnen met
een iteratie op prototype 0.1. Als ik zeker weet
dat de geïmplementeerde oplossingen naar
behoren werken en begrepen worden door
mijn doelgroep, zal ik steeds een oplossing
toevoegen. Wellicht dat ik meer toevoeg dan
hier staat aangezien er meer resultaten zullen
vormen als ik ga beginnen met het testen van de
protypes.
Hier rechts staat prototype 0.1 in het kort.
Op pagina 24 staat de detailflow
met uitleg.

Schetsen prototype 0.2
Korte toelichting
Voor het nieuwe prototype ben ik gaan
schetesen met de ideeën die ik heb opgedaan
met de morfologische kaart en resultaten uit
mijn onderzoek. In de schetsen is te zien hoe
ik nadenk over de indeling en manier waarop de
chatbot in beeld komt. Mijn doel is nog steeds
om de chatbot de hoofdfunctie te maken en wil
hem daarom goed laten opvallen.
Om te ontwerpen voor mijn doelgroep is het
van belang dat functies worden beschreven.
Daarom heb ik korte testjes gedaan met mijn
doelgroep of ze de functie op de geschtste
manieren begrepen.

Intro
In dit prototype heb ik elementen van de morfologische kaart
meegenomen in het ontwerp. Het zijn geen nieuwe uitvindingen maar
uit mijn testresultaten van het interview is gebleken dat features
het beste werken als de persoon dezelfde handeling al vaker heeft
gedaan. Daarom heb ik de chatbop relatief standaard gehouden met
toetsslagen als input voor de vragen of zoekopdrachten.
Verder heb ik voor zo min mogelijk vlakken tekst gekozen om de
gebruiker niet in de war te brengen. Hiernaast is de flow te zien van
mijn huidige prototype.
Scherm 0.1 Home
digibeten.

Project Interaction Prototype 0.2 screenflow Pagina 33
Scherm 0.1.1 Home
Scherm 0.1.1.2 Home
Dit is hoe het eruit ziet als de gebruiker zijn/haar vraag typt in het
tekstvlak. De kleur is rood zodat de gebruiker weet dat je de tekst zelf
hebt getypt. Als er iets is getypt verschijnt er ook een verzend icon. Op
Enter klikken op het toetsenboard is ook altijd mogelijk.

Scherm 0.1 .1.4 Home
De bot is aan het nadenken over het antwoord wat gegeven gaat worden. Om
de gebruiker te laten zien dat er nog wel iets gebeurt heb ik een loading state
toegepast.
Scherm 0.1.1.3 Home
Als je je vraag hebt ingetypt verschijnt je vraag in de chatbot. Jouw
tekst staat rechts en krijgt de kleur grijs. Deze layout associeert zich met
andere communicatie applicaties waardoor het makkelijk te begrijpen is
en de learningcurve laag wordt gehouden.

Na enige tijd (c.a 5 seconden), vraagt de bot of dit wel hetgene is wat de
gebruiker zocht of wellicht nog andere vragen/zoekopdrachten heeft. Dit
is dezelfde miniflow als in scherm 0.1.1. en hiermee weet de gebruiker wat
hij kan doen. De functie is namelijk nog steeds hetzelfde.
Het deel onder de bot is een inframe pagina. De onderkant van de pagina
wordt ingeladen zodat het bovenste deel, in dit geval chatbot, gelijk
kan blijven. Het antwoord kan hierdoor gegeven worden in de chat en je
wordt erop gewezen dat je de informatie hieronder meteen kunt lezen.

Project Interaction Prototype 0.2 HTA UTF Pagina 36
HTA prototype 0.2 UTF prototype 0.2
Met prototype 0.2 heb ik de HTA kunnen verbeteren ten opzichte van de
huidige HTA. Hierdoor is het mogelijk om dezelfde informatie te vinden met
50% van de stappen die je nu zou moeten uitvoeren. 50-75 Jarige digibeten
zullen hierdoor minder snel afhaken en meer de chatbot gaan gebruiken om
informatie te vinden.
Huidige HTA
4.3 Leest antwoord
Aangepaste HTA volgens prototype 0.2
4.1 Typ vraag of zoekopdracht
4.2 Lees het antwoord
4.3 Scroll naar onder
4.4 Lees informatie
4.5 Scroll naar boven
4.6 Typ vraag of zoekopdracht
Door het aanscherpen van HTA kan er ook een nieuwe User Task Flow worden
gemaakt. De huidige is namelijk complex en vereist dat de gebruiker eerst
terug gaat naar de homepagina om een nieuwe zoekopdracht uit te voeren via
de chatbot. Met prototype 0.2 wordt dit opgelost omdat de chatbot namelijk
altijd bovenaan de pagina staat en dus op ieder moment benadert kan worden.
Op deze manier vormt de UTF een korte loop waardoor de gebruiker altijd
gebruik kan maken van de zoek en vraag functie, de loop stopt als je de
browser of tabblad van wijzer.amsterdam sluit.
Op de volgende pagina staat de huidige UTF waar ik me op gefocust heb
tijdens het ontwerpproces. Naast de huidige versie staat de nieuwe versie.
Zie volgende pagina voor UTF’s

Project Interaction Prototype 0.2 UTF Pagina 37
Huidige UTF wijzer.amsterdam UTF prototype 0.2
Einde
Kies een thema
Lees antwoord
bekijk resultaat
Lees antwoord
Lees antwoord
Activeer chatbot
door te begroeten
“hallo” + Enter
Beantwoord
reactie
Lees meer
info
Links naar
onderwerp
Andere vraag
Stel je vraag
Beantwoord
reactie
Stel je vraag
Klik op link
van artikel
Klik op één van
de andere links
Ga terug naar home
om de chatbot te
herzien
2x Max
Stel nog een vraag
Klik op link
bekijk resultaat
bekijk resultaat
2
1

Project Interaction States Prototype 0.2 Pagina 38
Schetsen states
Voor het maken van de states heb ik mijn concurentie analyse gebruikt om
states te maken die aansluiten op de chatbot van wijzer.amsterdam.
Hieronder een aantal schetsen die mij geholpen hebben bij het concreet maken
van de loading state, blank state en error state in prototype 0.2.

Uitwerking van de states
1. Loading State 0.1.1.4 Home
Dit is de eerste uitwerking van de loadingstate voor als de gebruiker wacht op
een antwoord van de chatbot. De flow begint links-boven en eindigt rechts-
onderin. Het gaat hierbij om een bewegende animtie waarbij de kleuren van de
stipjes constant veranderen om de gebruiker te laten zien dat de bot nadenkt
over het antwoord op zijn/haar vraag.

Deze tweede variant is bedoeld om de gebruiker visueel te laten zien dat de
chatbot bezig is met het bedenken van een antwoord op de gestelde vraag.
De cirkel wordt steeds groter en kleiner en vormt aan het einde langzaam in de
vorm waarin in de tekst met het antwoord verschijnt.

De 3e variant is gevormd vanuit de 1e en 2e variant. 1 cirkel is statisch en de
2e cirkel draait om zijn as. Ook deze vormt aan het einde langzaam in de vorm
van het antwoord maar is eerst een andere kleur, namelijk dezelfde kleur als de
cirkel die om de as heen draait van de eerste cirkel.

1. Blank State 0.1 Home
(Verkozen variant) Deze blank state is bedoeld om de gebruiker opweg te
helpen. Bij de eerste kennismaking met wijzer.amsterdam heb ik mij gefocust op
het gebruik maken van de chatbot. Via deze chatbot is het de bedoeling dat alle
informatie gezocht en getoond kan worden.
Met de tekst probeer ik de gebruiker opweg te helpen om te voorkomen dat de
functie ondeuidelijk is en/of niet gebruikt wordt.

In deze blankstate is een extra pop-up toegevoegd als de gebruiker er helemaal
niet uitkomt. Als blijkt dat ik later deze blank state nodig heb om het mijn
gebruiker nog duidelijker uit te leggen zal ik deze inzetten, echter denk ik dat
het nu too much is en wellicht voor verwarring zal zorgen aangezien er twee
keer dezelfde informatie wordt weergegeven.

Als blijkt dat mijn gekozen variant niet voldoende informerend blijkt te zijn zal ik
deze (variant 3) gebruiken in mijn ontwerp als blank state. Uit mijn voorgaande
tests is nog niet gebleken dat er onduidelijkheid speelde bij het introduceren
van deze functie.
Het witte vlak “bounced” om de aandacht te trekken
bij de gebruiker in de hoop dat de informatie gelezen
wordt.

1. Error State voor scherm 0.1 - 1.1 (gekozen variant)
Deze variant geeft met tekst weer als het antwoord niet gevonden kan worden.
Hij zal altijd met gerelateerd resultaat komen (die verschijnt onder de chatbot),
maar mocht het niet de informatie zijn die je zocht, krijg je de vraag om je een
andere vraag of dezelfde vraag opnieuw te stellen. Aan het einde van de flow
wordt “of waar je naar opzoek bent” aan de alt-tekst toegevoegd. Hierdoor
wordt de gebruiker herinnert dat de chatbot ook werkt als zoekfunctie.
De punten in het typvlak, knipperen constant om de gebruiker opweg te
helpen. In het laatste gedeelte van de flow verschijnt de tekst, dat duurt circa
5 seconden en blijft daarna staan.

2. Error State voor scherm 0.1 - 1.1
Het kan voorkomen dat de ingevoerde vraag het woord of zin niet kent. In dit
geval komt er dan een error message en wordt de gebruiker gevraagt om een
andere vraag of dezelfde vraag opnieuw te stellen.

3. Error State voor scherm 0.1 - 1.1
Deze error state geeft direct een antwoord als hij geen antwoord weet op de
vraag. Hij komt met onderwerpen die associëren met de vraag en geeft dan
linkjes naar de informatie. Deze variant heb ik niet gekozen omdat ik voldoende
denk te hebben aan variant 1. Als dit niet zo blijkt te zijn zal ik variant 2 of 3
testen.

Project Interaction Frame by Frame Design Prototype 0.2 Pagina 48
Frame by Frame Design Trigger, Rule, Feedback
1. Eerste kennismaking (Home)
De gebruiker maakt hier voor het eerst kennis met wijzer.amsterdam.
Hij leest hier voor het eerst de chatbot functie en kijkt wat zijn volgende stap is.
Trigger
“Geluid van een ontvangen bericht”, het tekstbericht van de chatbot: “Maak kennis met
onze chatbot. Stel een vraan en wij antwoorden!”
Rule
Bij het lezen van het tekstbericht weet je dat het tekstvlak een functie heeft om je te
helpen bij het vinden van informatie.
Feedback
Feedback van het bericht zelf is een geluid dat indiceert dat je een bericht hebt
ontvangen en de gegeven informatie in het
Trigger
Inactiviteit van 5 seconden. Geen typ of muis input geconstateerd voor 5 seconden
De tekst die verschijnt in het typvlak: “of waar je naar opzoek bent”
Rule
Bij een inactiviteit van 5 seconden komt de tekst “of waar je naar opzoek bent” naar
voren in het typvlak.
Feedback
“of waar je naar opzoek bent”, om je opweg te helpen als je vastloopt. Nu weet je wat
je kunt doen om informatie te vinden.
2. Op weg helpen (Home)
In deze state wordt de activiteit van de gebruiker gecheckt. Als de gebruiker inactief is
voor 5 seconden, veranderdt de tekst in het typvlak om de gebruiker om weg te helpen.

3. Vraag intypen (Home)
In deze state voert de gebruiker zijn/haar vraag in door te typen op het toetsenboard
van de computer of laptop. Zijn vraag wordt in het rood aangegeven in het typvlak.
Trigger
Intoetsen van letters op het toetsenboard.
Rule
Bij het intypen van een toets op het toetsenboard wordt de getypte tekst rood gekleurd
en komen zijn toetsaanslagen zichtbaar in het typvlak en verschijnt de verzendknop.
Feedback
De gebruiker krijgt visueel zijn tekst te zien en kan nu op verzenden klikken.
Trigger
De verzendknop rechtsonderin.
Rule
Bij het drukken op de verzendknop verschijnt de tekst uit het typvlak in de chat aan de
rechterzijde en komt de tekst “Typ hier je vraag” op de plaats van je getypte tekst.
Feedback
De gebruiker activeert hiemee de loadingstate en de chatbot gaat opzoek naar een
antwoord op de ingetypte vraag.
4. Vraag verzenden (Home)
Na het verzenden van de vraag komt je getypte vraag in chatvorm aan de rechterkant
van de chat.

5. Loading state (Home)
Na het drukken op de verzendbutton activeer je de loading state. de Chatbot gaat
opzoek naar je antwoord. Dit is het gevolg van stap 4.
6. Vraag verzenden (informatiepagina)
De chatbot heeft het antwoord op je vraag gevonden en geeft dat aan in de chat. Hier
staat dat de informatie onder de chatbot te lezen is.
Trigger
Antwoord van de chatbot.
Rule
Bij het antwoord van de chatbot wordt de gevonden informatie onder aan de pagina
weergegeven.
Feedback
De gebruiker krijgt een bericht dat zijn vraag is beantwoord en er informatie is
gevonden die nu gelezen kan worden.

7. Nog een vraag stellen (informatiepagina)
Aan het einde van de flow wordt de gebruiker gevraagd of de juiste informatie is
gevonden en of de gebruiker nog andere vragen of zoekopdrachten heeft.
Trigger
Tijdsduur van 5 seconden.
Rule
5 seconden na het verkrijgen van je antwoord op je vraag krijg je de vraag of de
getoonde informatie juist was en of je nog andere zoekopdrachten of vragen hebt.
Feedback
De gebruiker krijgt een bericht van de chatbot en het tekstvlak verandert naar dezelfde
tekst als bij 5 seconden inactiviteit.

Project Interaction week 6 t/m 8 Pagina 52
Laatste sprint Planning week 6 t/m 8
In week 6 heb ik feedback ontvangen op mijn Design Rationale. Hierin kwam
naar voren dat mijn onderzoek en ontwikkelingsproces, duidelijk omschreven
en goed navolgbaar is. Eën kritiek-puntje was dat ik in het verhaal van mijn
storyboard het plaatje apart kan nemen in plaats van het doorlopen als geheel.
Hieronder staat de feedback uit mijn beoordeling.
Feedback
• “Storyboard in video plaatje voor plaatje laten zien. Dan komt het beter tot zijn
recht.”
• “Het is meteen duidelijk welk probleem je gaat oplossen m.b.t. UTF HTA”
• “Mooi en rustig ingesproken.”
• “Ik vind het heel nice hoe je je document hebt opgedeeld en vormgegeven. Alles is
goed navolgbaar en is gemakkelijk te lezen. Al je design keuzes zijn gebaseerd op
bevindingen van de interview.”
• “Die diagram van hoe de interactie gaat werken maakt het gelijk helemaal duidelijk
hoe je het probleem gaat oplossen. Verder is elk scherm duidelijk beschreven en
goed te volgen.”
Wat ga ik doen in week 6 t/m 8
Aan het einde van mijn conclusie in week 5 gaf ik aan dat ik nog 3 deelvragen
had die onbeantwoord waren. Om deze deelvragen te beantwoorden zal ik een
nieuw prototype maken die een extra functie zal krijgen. Door te kunnen zoeken
met “spraak” wil ik onderzoeken of mijn doelgroep het begrijpt en of ze er goed
mee uit de voeten kunnen komen. Hiernaast wil ik een flow van communicatie
uitwerken die ervoor zorgt dat de 50-75 jarige digibeet de juiste informatie kan
vinden op wijzer.amsterdam.
Voor de laatste sprint heb ik een planning gemaakt die mij gaat helpen om een
nieuw prototype te maken die meer diversiteit zal geven voor het zoeken van
informatie en tegelijkertijd begrijpbaar is voor 50-75 jarige digibeten.
Planning
Schetsen maken voor modes
Schetsen maken voor loops
2 loops uitwerken waarvan 1 in prototype komt loop kan zijn dat bot vraagt om
nieuwe vraag dus 1 met geluid en de ander met een pop-up bijvoorbeeld
1 mode die switched tussen spraak en typen de spraak uitwerken (en een happy
flow weergeven in het prototype gemaakt met Adobe XD)
Testen van prototype d.m.v. Interviews en een expert review
Nieuw Prototype maken
Laatste kleine aanpassingen doorvoeren
Conclusie van prototype HTA UTF beargumentatie
DR aanvullen met nieuwe prototype en conclusies
Presentatie opnemen van Design Rationale
Film opnemen voor toelichten van Productbiografie

Project Interaction Schetsen Prototype 1.0 Pagina 53
Schetsen nieuwe prototype
Voor het bedenken van nieuwe ideeën voor het nieuwe prototype heb ik
meerdere varianten op papier getekend die ik vervolgens heb voortgedragen
aan mijn ouders die ook tot de doelgroep 50-75 jarige digibeten behoren. Door
een kleine paper-protype te maken heb ik getest wat wel en niet werkt.
Met deze schetsen ben ik vervolgens gaan kijken welke loops en modes het
beste zouden werken. Op de volgende pagina staan een aantal schetsen
hiervan.

Project Interaction Loops and modes Prototype 1.0 Pagina 54
Schetsen loops modes
Door eerst een idee te krijgen van wat ik wil toepassen aan mijn laatste
prototype, ben ik gaan kijken naar handige loops en modes die een toevoeging
hebben om het gebruik van de website te verbeteren. Uit mijn paper prototype
is voortgekomen dat het fijn is om met een spraak-functie te werken.
Hieronder heb ik verschillende variaties toegepast voor het toevoegen van
de spraak-functie en het herroepen daarvan. De spraakfunctie zou een
automatisch gegenereerde loop en mode worden. De button van de microfoon
zou een actieve staat hebben bij herkennen van spraak.

Project Interaction Loops modes test Pagina 55
Uitwerking van de modes
1. Mode voor switchen tussen spraak en toetsenbord
Op deze mode heb ik 2 varianten gemaakt. In het midden staat de microfoon
met een tekst eronder die de gebruiker informeerd over de functie van de knop.
Bij het indrukken wordt de knop geactiveerd en kleurt de microfoon zwart om
de gebruiker op de hoogte te brengen dat de knop is ingeklikt.
Ter vervanging van de microfoon heb ik ook een versie gemaakt die de knop
letterlijk uitlegt. Hiermee hoop ik de gebruiker een directer beeld te geven van
de functie van de knop. Daaronder heb ik een tekst geschreven die indiceert dat
de vraag is gehoord en verwerkt wordt om vervolgens een antwoord te geven.
Variant 1 Variant 2

2. Mode voor switchen tussen spraak en toetsenbord
In deze mode wilde ik een duidelijker onderscheidt maken tussen spraak en
typen van je vraag/zoekopdracht. Ik heb er daarom voor gekozen om de
gebruiker van te voren de keuze te laten maken om de zoekopdracht via spraak
of typen te vervolgen.
Om extra aandacht te trekken en de interactie te verduidelijken heb ik in de
eerste versie bedacht om een personage in te zetten die je begeleidt door de
stappen te omschrijven zodat de gebruiker de juiste informatie kan vinden op
wijzer.amsterdam.
Variant 1 Variant 2

3. Positionering switchen tussen spraak en toetsenbord
De volgende 3 varianten heb ik toegepast op het huidige prototype. In dit
opzicht was het vooral de bedoeling om de knoppen zo duidelijk mogelijk weer
te geven met niet teveel uitleg. Deze schermen heb ik gebruikt voor het testen
van de kennis van een 50-75 jarige digibeet.
Variant 1 Variant 2 Variant 3

Uitwerking van de loops
4. Loop voor overbrengen alert-bericht
Deze twee varianten functioneren als loop om de gebruiker te informeren dat
de chatbot een antwoord heeft op je gestelde vraag. Het gaat om een geluid
dat afgespeeld wordt om de gebruikers aandacht te trekken. Deze loop kan ook
geactiveerd worden bij inactiviteit. Als de gebruiker bijvoorbeeld 5 seconden
inactief is kan er een bericht tevoorschijn komen die aanspoort om nog een
vraag te stellen.
Variant 1 Variant 2

Uitwerking van de modes Uitwerking van de loops
5. Mode stil of geluid
In de variant hieronder is er een geluids-icoon toegevoegd waarmee de
gebruiker kan kiezen of hij wel of geen geluid wilt horen als de chatbot met een
antwoord komt.
6. Chatbotweergave
Bij het vinden van een antwoord wordt direct de pagina geladen met het artikel.
De chatbot verschijnt nu boven het artikel terwijl de spraak-functie zich daar
nog boven bevindt. Als je op het toetsenbord zou drukken zou je ge-redirect
worden naar de chatbot daaronder.
Variant 1 Variant 1

7. Mode voor switchen tussen dag en nacht
Met de nachtmodus kun je zelf aangeven of je alleen donkere kleuren
met accenten wilt zien of juist de pagina in volle kleur (kleuren van wijzer.
amsterdam). Door op het maantje rechts-boven te klikken switch je dus tussen
de “dag/originele” en nacht-modus.
Variant 1

Uitwerking van de loops
8. Loop gebruiker-hints
Om de gebruiker opweg te helpen wil ik hints gaan implementeren in de vorm
van tekstwolken en alt-tekst in de zoekbalk weer te geven. Deze hints komen na
een verloopt van tijd in beeld. Als deze tijd is verstreken verandert in de geval
de alt-tekst in de zoekbalk en krijg je ook een hint om de vraag te typen. Bij
het klikken op het toetstenbord wordt je cursor automatisch naar de zoekbalk
gebracht.
Variant 1

9. Vormweergave van chatbot
De volgende 3 varianten zijn manieren waarop de chatbot kan worden weer-
gegeven nadat de gebruiker de zoekopdracht heeft voortgezet. In de eerste
variant kan de gebruiker de chatbot pas bereiken als hij boven aan de pagina is.
Hiervoor heb ik een knop gemaakt die de gebruiker herleidt naar de top van de
pagina. In variant 2 en 3 gaat de chatbot mee met het gezichtsveld, in variant 3
is het mogelijk om de chatbot te verplaatsen op het scherm. Het is dan ook te
vergelijken met een pop-up-scherm.
Variant 1 Variant 2 Variant 3

Project Interaction Expert review gemaakte keuze Pagina 63
Expert review
Om een betere keuze te maken voor het implementeren van de mode en
loop om mijn huidige prototype te verbeteren heb ik besloten om een expert
review af te nemen. Ik heb de 9 soorten modes en loops samen met de debrief
voortgedragen aan 2 vierde jaars CMD-studenten. Hieruit kwam de volgende
feedback.
Feedback
• “Ik denk dat geen van alle varianten volledig zullen aansluiten op je doelgroep. Als
verbetering raad ik aan om een paar varianten te combineren zoals 4 5.”
• “Nummer 5 is eigenlijk de variant die zowel typen als spraak het beste weergeven in
een gecentreerde positie die meteen opvalt voor een 50-75 jarige digibeet.”
• “Ik zou de nacht-modus achterwegen laten aangezien dit misschien voor verwarring
kan zorgen, het is ook een knop meer dus misschien schrikt het af of brengt het
verwarring bij de doelgroep.”
• “De personagevorming(in dit geval een bot), zou ik pas gebruiken bij een volgende
iteratie, als de knoppen bijvoorbeeld nog niet duidelijk genoeg zijn.”
• “Probeer zoveel mogelijk informatie centraal te houden in chatbot zodat de
gebruiker weet waar hij/zij moet kijken voor het antwoord. Op deze manier voorkom
je dat de gebruiker teveel moet zoeken en het niet meer begrijpt waardoor hij/zij de
zoekopdracht niet meer willen voortzetten.”
Gekozen variant toelichting op volgende pagina

Project Interaction Expert review gemaakte keuze Pagina 64
Gekozen variant
Met de resultaten van de expert reviews heb kunnen kiezen voor variant 5 en
zal ik het advies aanhouden om de focus van de gebruiker centraal te houden.
Op deze manier wil ik voorkomen dat de gebruiker afhaakt omdat er teveel
informatie op het scherm staat.
De loop die ik hierin zal verwerken is de gebruiker opweg te helpen als de vraag
niet begrepen wordt, inactiviteit plaats vind en geluid implementeren om de
gebruiker op de hoogte te brengen dat zijn/haar vraag beantwoord is.
De mode zal in dit geval de spraaktoeving zijn. Je zult straks kunnen kiezen
tussen het typen of inspreken van je vraag/zoekopdracht.
Hier rechts staat de variant waarop ik verder op ga om prototype 1.0 te maken.
Variant 5

Intro
In dit prototype ben ik verder gaan itereren op prototype 0.2. Om mijn
laatste 3 deelvragen te beantwoorden heb gebruik gemaakt van 2
expert reviews met vierde jaars CMD-leeringen die mij nieuwe inzichten
hebben gegeven om het ontwerp nog specifieker en relevanter te
maken voor de 50-75 jarige digibeet.
Zo heb ik in dit prototype gebruik gemaakt van technieken zoals “bring
the data forward”. Door de gebruiker informatie te geven die hem/haar
op weg te helpen om de vraag/zoek opdracht zelfstandig uit te kunnen
voeren op de website van wijzer.amsterdam.
Ook heb ik een nieuwe functie geïmplementeerd, namelijk spraak.
Je kunt nu in plaats van alleen typen nu ook je vraag inspreken dat
gemakkelijker is voor de doelgroep. Hierdoor hoeft de gebruiker
namelijk niet meer de ogen van het beeldscherm te halen en zal hij/zij
daardoor minder snel afgeleidt raken en daardoor wordt het proces van
de vraag/zoek opdracht eenvoudiger.
Scherm 0.1 Home
digibeten.
Link naar prototype 0.1, 0.2 1.0:
fullscreenhints=off

Scherm 0.1.1 Op de hoogte brengen van functies
Scherm 0.1.1.2 Activeren van microfoon
Als je ervoor kiest om de vraag/zoek opdracht te doen via spraak
verandert de achtergrond van de microfoon om te laten zien dat hij
geactiveerd is. Je kunt op dit moment de vraag inspreken.

Scherm 0.1.1.3 Spraak verwerken
Als je je vraag hebt ingesproken laat de chatbot weten dat hij de vraag
aan het verwerken is door middel van puntjes die van kleur veranderen.
Dit is ook een loadingstate. Het doel is om de gebruiker zoveel mogelijk
te informeren over actieve werking van de bot.
Scherm 0.1.1.4 Vraag weergeven
Na het laden, laat de chatbot zien wat je vraag was aan de rechterkant
en kleurt de microfoon groen om te laten weten dat het de opdracht
succesvol verwerkt is.

Scherm 0.1.1.5 Laden van antwoord
De chatbot heeft de vraag “gelezen” en gaat op zoek naar het antwoord.
De bot laat met dezelfde puntjes die van kleur veranderen, zien dat hij
bezig is om een antwoord op te halen.
Scherm 0.1.1.6 Antwoord op de vraag
De chatbot heeft een antwoord gevonden en laadt tegelijkertijd
de pagina van het artikel in onder de chatbot. Ook dit wordt weer
weergegeven met een loading state.

Scherm 0.2 Artikel
Het gevonden artikel wordt getoond op de pagina.
Scherm 0.2.1 Check-up “bericht-geluid”
Na een verstrek van tijd vraagt de chatbot of het gevonden artikel de
juiste informatie bevat, zo niet informeert de bot dat je een nieuwe
zoekopdracht kunt uitoefenen. Je kunt reageren op de chatbot met spraak
of door te typen.

Scherm 0.2.1.1 Chatbot beantwoorden
In dit geval wordt er antwoord gegeven door de chat-functie te
gebruiken. De gebruiker typt met zijn/haar toetsenbord het antwoord in
op de vraag, in dit geval is het antwoord kort samengevat “nee”.
Scherm 0.2.1.2 Chatbot response
De chatbot denkt vooruit en probeert in te spelen op de keuzes van de
gebruiker. Met de loading state laad hij zien dat hij terug komt met een
antwoord.

Scherm 0.2.1.3 Antwoord
Om de 50-75 jarige digibeet op weg te helpen werkt de chatbot actief
mee aan het vinden van gerelateerde informatie aan “Phishing”.
Scherm 0.3 Gerelateerde informatie
De artikelen die gerelateerd zijn aan phishing zijn nu leesbaar als je op 1
van de artikelen klikt.

Project Interaction Animaties Prototype 1.0 Pagina 72
Uitwerking van inactive state
1. Inactive state 0.1 - 3.0
Deze state heb ik gebruikt om de gebruiker een duwtje in de rug te geven.
Als de gebruiker niet weet wat hij moet doen op de pagina wordt dit vangnet
geactiveerd. De Alt tekst veranderd naar een tekst die de functionaliteit van de
zoekbalk in de chatbot beschrijft.

Uitwerking van hoover state
2. Hoover state 0.1 - 3.0
Als je je muis over de tekst met de microfoon plaatst, kleurt deze rood, ver-
dwijnt de tekst en wordt de microfoon groot en in het wit weetgegeven. Op
deze manier geef ik de gebruiker nog even de tijd om over zijn/haar zoek/vraag
opdracht na te denken zodat die rustig ingesproken kan worden als er op de
knop wordt gelikt.

Uitwerking van activated state
3. Activated state 0.1 - 3.0
Als de microfoon actief is (door op de microfoon te klikken), speel de anima-
tie hieronder af. Deze animatie laat de gebruiker weten dat alles wat hij/zij nu
inspreekt in de microfoon, opgenomen wordt.

Design rationale&productbiografieprojectinteractionmitchkappenv1.0.8

Design rationale&productbiografieprojectinteractionmitchkappenv1.0.8

Recommended

Recommended

More Related Content

Similar to Design rationale&productbiografieprojectinteractionmitchkappenv1.0.8

Similar to Design rationale&productbiografieprojectinteractionmitchkappenv1.0.8 (20)