Inhoud
0. Terugblik: wat hebben we geleerd
1. Wat is een functioneel ontwerp (FO)?
2. Waarom een functioneel ontwerp?
3. Waaruit bestaat een functioneel ontwerp?
4. Wat is het verschil tussen een functioneel ontwerp en een visueel ontwerp?
5. Wat zijn user story’s?
6. Wat is MoSCoW?
7. Waarom is een een user story belangrijk?
8. Opdracht 8: Studievragen user story’s
9. Opdracht 9: User story maken

Richard Slakhorst

---

Inleiding User Experience Design

User Experience Design (ook wel afgekort tot UX of UXD) 
Het uxd-vak houdt zich bezig met het ontwerpen van een prettige/bevredigende gebruikerservaring het gaat om zoals de term al doet vermoeden om de gehele ‘ervaring’ van het gebruik van een product, website of app. Het houdt zich daarbij sterk bezig met het gevoel of de emotie die het oproept bij een gebruiker..

User = De gebruiker.

Experience = Ervaring van de eindgebruiker.

Design = Vormgeving & Het concept

In het vak User Experience design leer je hoe je rekening moet houden met de gebruiker wanneer je een ontwerp maakt voor een website of applicatie. Natuurlijk geeft ook een tijdschrift of poster een “beleving”. Maar het vak uxd gaat vooral om de beleving van de gebruiker met een interactief apparaat. Interactieve apparaten reageren op handelingen van mensen: je klikt of swipet en er gebeurt wat. 
De experience is het gevoel dat een bezoeker meekrijgt bij het bezoeken van bijvoorbeeld een website of app. Een goed ontworpen gebruikerservaring geeft de bezoeker een positief gevoel en vaak een wow gevoel.

---

0. Terugblik: wat hebben we geleerd?

Inleiding User Experience Design
Wat is een doelgroep?
Wat is een gebruikersprofiel?
Wat is een persona?
Wat is een user journey (klantreis)?
Wat is user journey mapping?



Je hebt geleerd wat een gebruiker en een doelgroep is, en hoe je een gebruikersgroep weer kunt geven in een gebruikersprofiel en een persona. Je weet nu dat een gebruiker altijd een doel heeft wanneer hij/zij een visueel vormgegeven eindproduct of een app of website gebruikt.
Je weet nu: bij User Experience Design (UXD) staat de gebruiker altijd centraal.

---

1. Wat is een functioneel ontwerp (FO)?

Zoals je een bouwtekening nodig hebt voor het bouwen van een huis, zo heb je een functioneel ontwerp (FO) nodig voor het maken van een website, webshop of app. Een functioneel ontwerp is de ‘blauwdruk” of ‘bouwtekening’ van je website, webshop of app.

Er staat precies in beschreven hoe de website, webshop of app moet werken, welke functionaliteiten erin zitten en hoe de pagina’s eruit gaan zien.

---

2. Waarom maak je een functioneel ontwerp (FO)?

A. Functioneel ontwerp (FO) draagt bij aan een strakke planning, het halen van deadlines en zorgt er daarnaast ook voor dat een ontwerpproject binnen het budget blijft maar

B.Het zorgt er ook voor dat je de klant centraal zet in je ontwerp en vooral ook om een geweldige gebruikerservaring te ontwerpen voor je klant.

C. De investering in een functioneel ontwerp voorkomt ‘valkuilen’ binnen je ontwerpproces. Je kunt er op de tekentafel de meest voor de hand liggende foutjes mee voorkomen. Daarnaast is een functioneel ontwerp een waardevol communicatiemiddel. Bij een groot webapp-developmentproject komen vaak meerdere partijen en expertises kijken, bijvoorbeeld: de opdrachtgever, een online marketingbureau, de copywriter, de projectmanager, de designer, de programmeur en derden.

D. Het functioneel ontwerp (FO) is de blauwdruk, het centrale uitgangspunt van waaruit iedere betrokkene werkt. Dit bevordert de onderlinge communicatie en het reduceert de kans op ruis en dus fouten.

---

3. Waaruit bestaat een functioneel ontwerp?

A. Het is een methode om een aankoopproces of een dienst vanuit het perspectief van de klant te visualiseren.
B. Het beschrijft de ervaringen van een klant gedurende de reis die een klant maakt om zich te oriënteren of een product of dienst aan te schaffen, en beschrijft voor de rest alle functionaliteiten van de webapp-webshop.

Wel bestaat een functioneel ontwerp (FO) ten minste uit de volgende workflow deel elementen/opdrachten:
1. Persona. Doelgroep onderzoek
2. User story’s. Doelen van de website voor gebruikers en de onderneming
3. Flowchart. Structuur van website
4. Wireframes. Uitwerking functionaliteiten per pagina gedetailleerd
5. Styletile/Styleboard. Input voor design en techniek Interface design( UI) elementen Zoals knoppen, menu’s, en andere visuele componenten het zijn interactieve bouwstenen van een gebruikersinterface.
6. Prototype. Ideeën voor interactie (interaction design / interactive mock-ups) (Figma)

---

4. Wat is het verschil tussen een functioneel ontwerp en een visueel ontwerp?

• Visueel design is gebaseerd op aandachtspunten als smaak, schoonheid, ‘look and feel’. Het geeft uiting aan de creativiteit van de ontwerper, ook los van de doelgroepbehoefte etc.
  
• UXD design legt het accent op betekenisvolle en aangename gebruikersbehoeften en gebruikerservaring (maar ook de functionele behoeften van de gebruikers) en op de interactie met de gebruiker.

Een visueel ontwerp volgt altijd nadat het functionele ontwerp is gemaakt. Het functioneel ontwerp is een document waarin is beschreven hoe de nieuwe website-app er functioneel uit moet zien en wat die doet. Een visueel ontwerp (of design) is de visuele uitwerking daarvan. In een functioneel ontwerp leg je bijvoorbeeld vast welke blokken en elementen er op een pagina moeten komen (en in welke volgorde) en een designer werkt dat vervolgens uit tot een visueel ontwerp.

---

5. Wat zijn user story’s?

In de eerste periode heb je geleerd wat een gebruiker en doelgroep is hoe je een gebruikersgroep weer kunt geven in een gebruikersprofiel en een persona. Je weet nu dat een gebruiker altijd een doel heeft wanneer hij/zij een visueel vormgegeven eindproduct, app of website gebruikt. Omdat user experience design (UXD) betekent dat de gebruiker centraal staat, begin je het eindproduct (een webapp, site of webshop) met het beschrijven van de doelen van de gebruiker. Een user story beschrijft vanuit de gebruiker wat hij of zij op de website of app kan doen.

Een user story heeft altijd de volgende vorm:

Ik als < rol/gebruiker >
Dit eerste deel van de zin beschrijft de rol. Een interactief product kan meerdere gebruikersgroepen hebben. Denk bijvoorbeeld aan de verschillende doelgroepen, de beheerder van de site, enz. Je maakt dan voor elke rol een user story.

Wil < iets doen >
Dit tweede deel van de zin bestaat uit wat de gebruiker wil doen. Dit maak je zo concreet mogelijk, bijvoorbeeld: Ik als klant wil mij aanmelden voor de nieuwsbrief.

Zodat ik < er iets aan heb > (resultaat)
Dit laatste deel van de zin beschrijft het resultaat of het doel.

Voorbeeld uitwerking

Dus: Ik als een <rol/ gebruiker > Wil < iets doen > Zodat ik < er iets aan heb> resultaat. Prioriteit < Hoe belangrijk is het >

Nog meer voorbeelden van user story’s:
• Als bezoeker wil ik het programma van een dag zien, zodat ik een overzicht krijg van alle kunstenaars en een goede keuze kan maken.
• Als boekkoper wil ik de klantbeoordelingen van een boek lezen, zodat ik beter kan beslissen of ik het boek wil kopen.
• Als een geregistreerde gebruiker wil ik een nieuw wachtwoord kunnen aanvragen, zodat ik weer toegang kan krijgen als ik mijn wachtwoord vergeten ben.
• Als student wil ik mijn cijfers online bekijken, zodat ik sneller weet of ik het examen heb gehaald.
• Als blogger wil ik een blogartikel aanmaken, zodat ik mijn verhaal met anderen kan delen.

De laatste user story is heel groot. Deze story’s worden wel een epic genoemd. Een epic moet je weer opsplitsen in kleinere story’s:
1. Als blogger wil ik mijn verhaal opmaken, zodat ik mijn verhaal aantrekkelijk kan presenteren.
2. Als blogger wil ik mijn verhaal tussendoor opslaan, zodat ik later verder kan werken.
3. Als blogger wil ik foto’s uploaden, zodat ik mijn verhaal met beeldmateriaal kan ondersteunen.

50 tot wel 500 story’s
Alle user story’s samen geven aan wat de functionaliteit moet worden van een interactief product. Een eenvoudig project bestaat uit ongeveer 50 story’s. Bij een complex project kan dit oplopen tot 500 of zelfs meer. Zo ontstaat een zeer gedetailleerde beschrijving van het eindproduct Met als doel om de eindklant altijd goed te bedienen. Een tevreden klant is tenslotte een blijvende klant, en geen afhakende klant. 

---

6. Wat is MoSCoW?

Nadat je alle user story’s hebt beschreven, gebruik je de MoSCow om te beoordelen welke story het belangrijkst is voor de corebusiness van de organisatie. Je wilt namelijk beoordelen wat belangrijk en minder belangrijk is voor het voortbestaan van diezelfde organisatie.

MoSCoW staat voor:
• M – must haves: deze story’s moeten in het eindresultaat terugkomen; zonder deze eisen is het product niet bruikbaar.
• S – should haves: deze eisen zijn zeer gewenst, maar zonder is het product wel bruikbaar.
• C – could haves: deze eisen komen alleen aan bod als er tijd genoeg is.
• W – won’t haves (ook wel would haves genoemd): deze eisen zullen in dit project niet aan bod komen, maar kunnen in de toekomst, bij een vervolgproject, interessant zijn.

Een project wordt als gefaald gezien wanneer niet alle must-have-eisen in het eindproduct verwerkt zitten.

Voorbeeld M- must have:
De user story ‘Als vmbo-leerling wil ik een overzicht van alle opleidingen van het Mediacollege, zodat ik in één keer kan zien welke opleidingen er aangeboden worden’ is
een M- must have.

Voorbeeld C- could have of W-won’t have
De user story ‘Als jongere wil ik een virtuele wandeling maken door het hotel, zodat ik kennismaak met de voorzieningen van het hotel’ is leuk, maar niet noodzakelijk voor de site. Met de opdrachtgever beslis je of dit een C- could have of een W-won’t have wordt. Dit is ook afhankelijk van het budget van de opdrachtgever.

---

7. Waarom is een een user story belangrijk?

1. User story’s dwingen je om te denken vanuit de gebruiker.
2. User story’s beschrijven alle functies van het eindproduct.
3. User story’s maken het mogelijk om het project op te delen in kleinere delen. Je kunt het project per story gaan uitwerken of bij een groot project de user story’s verdelen over verschillende projectgroepen.
4. Door de user story’s te bespreken met de opdrachtgever, maak je duidelijk wat de omvang van het project is.

Wanneer je user story’s beschrijft, zorg er dan voor dat de story echt iets zegt over de behoefte van de gebruiker. Maak de user story dus niet te algemeen.
Voorbeeld: Jongere wil informatie over een reis zodat hij een reis kan kiezen.
Dit is een user story die meer vragen oproept dan het beantwoordt. Welke informatie heeft deze jongere nodig om een keuze te maken? Willen ze de prijs weten of alleen de accommodatie? Wil de jongere verschillende reizen kunnen vergelijken? enz.

---

8. Opdracht : Studievragen user story’s

9 Opdracht User story maken

De opdracht
Vormgevers die een app of website ontwerpen denken na over de mogelijke
doelen die belangrijk zijn voor de gebruiker. De doelen worden vast gelegd in user
story’s. Een user story is een korte beschrijving (story) van wat een gebruiker
(user) wil of kan binnen een app of website. Het lastige is dat user story’s je dwingen
om te denken vanuit de gebruiker. Als je dat lukt, krijg je tevreden klanten!

1. Lees en bestudeer deze theorie van de studiewijzer, leerweg 3.
2. Kies een groot museum in Nederland.(Google: museums nederland) Onderzoek de website van dat museum en maak 15 user story’s bij die website. Werk ze nauwkeurig uit in een Excel-bestand of met Word met gemaakte kolommen volgens het voorbeeld.

Gebruik hierbij de volgende vorm:
kolom 1
Ik als een<rol/ gebruiker >
kolom 2
Wil <iets doen (functie/actie)
kolom 3
Zodat ik < er iets aan heb> resultaat.
kolom 4
Prioriteit <MOSCOW

3. Vraag van tenminste 2 medestudenten de user story’s dus( 2x 15 ) die zij hebben gemaakt en neem die op in jouw tabel. Zet de naam van de student en de url van de website erbij. Vergelijk ze met elkaar en met die van jouzelf. Heb je dubbele user story’s? of juist heb jij een story die je medestudent niet heeft ? Bewaar dan de userstory die naar jouw idee het meest duidelijk of belangrijk is.

4. Ga nu alle punten af om te bepalen wat van belang is. Wat heeft prioriteit volgens jou en wat is minder belangrijk voor de website? Doe dit aan de hand van de MOSCOW-regel (Must, Should, Could en Won’t)

Tip:
Gebruik Excel

RESULTAAT
Een duidelijk beeld van de behoefte van de gebruiker.