Weet je nog?
Een user story is een korte beschrijving (story) van wat een gebruiker (user) wil. User story’s dwingen je om te denken vanuit de gebruiker.
Een user story beschrijft vanuit de gebruiker, wat hij of zij op de website of app kan doen. Een user story is altijd in de volgende vorm:
Als <rol/ gebruiker> wil ik <iets doen> zodat ik <er iets aan heb>.
Het eerste deel van deze 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 voor alle rollen aparte user story’s.
Het tweede deel van de zin bestaat uit wat de gebruiker wil doen. Dit maak je zo concreet mogelijk bijvoorbeeld: Als donor wil ik mij aanmelden voor de nieuwsbrief.
Het laatste deel van de zin beschrijft het resultaat of het doel. Als donor (=rol) wil ik mij aanmelden voor de nieuwsbrief (=functie of actie) zodat ik op de hoogte blijf van de projecten die uitgevoerd worden (=doel).
Voorbeelden van user story’s:
De laatste story is eigenlijk een epic. Meestal beschrijft een epic een afgebakende taak van de gebruiker. Een epic is een omvangrijke user story die nog moet worden uitgesplitst in een set kleinere user story’s.
Zo kun je de laatste epic splitsen in de volgende story’s:
Alle user story’s samen beschrijven de functionaliteit 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. Tijdens het hele ontwikkelproces van het product kunnen er story’s bijkomen of story’s veranderen.
Een voorbeeld van een complete lijst met user story’s vind je op de site www.mountaingoatsoftware.com
Oefening 1
Werk de oefening uit met 2 andere studenten!
| nr | als | kan ik | resultaat | prioriteit |
| 1 | redacteur | mijn verhaal tussendoor opslaan | ik het later verder kan werken | |
| 2 | redacteur | foto’s uploaden | verhaal met beeldmateriaal ondersteunen | |
| 3 | redacteur | mijn verhaal opmaken | ik het aantrekkelijk kan presenteren | |
Een user story is goed wanneer het INVEST is. INVEST staat voor:
Tip: kijk eerst of het geen epics zijn.
- Als koper wil ik de specificaties van een product kunnen bekijken, zodat ik weet wat ik ga kopen.
- Als a.s koper wil ik weten of de website gekeurd is, zodat ik kan kijken of de website betrouwbaar is
- Als koper wil ik weten wat anderen van het product vinden, zodat ik mijn mening op dat van een ander kan baseren.
- Als klant wil weten hoe ik contact kan opnemen met het bedrijf zodat ik vragen kan stellen over bepaalde producten
- Als klant wil ik weten wat de inhoud van het product is, zodat ik kan kijken of ik het product willen aanschaffen.
- Als nieuwe klant wil meer informatie over het bedrijf en de missie zodat ik kan beoordelen of het betrouwbaar is.
Een user story beschrijft hoe een klant of gebruiker verwacht van het product. Het is altijd geschreven vanuit het perspectief van de gebruiker.
Als je niet weet wie de gebruikers zijn en je weet niet met welk doel ze het product willen gebruiken, dan kun je geen user story’s schrijven. Om te voorkomen dat je een product maakt waar niemand gebruik van maakt, begint elk project met gebruikersonderzoek.
Een user story is een communicatie tool. User story’s ontwikkel je met het hele projectteam en met de opdrachtgever. Discussieer over de story’s. Je maakt dan gebruik van de creativiteit en de kennis van het team. Hierdoor krijg je betere user story’s.
Schrijf user story’s zodat ze gemakkelijk te begrijpen zijn. Houd ze eenvoudig en beknopt. Vermijd verwarrende en dubbelzinnige termen. De volgende user story roept veel vragen op:
Als klant wil ik productspecificaties zien van het product dat ik ga bestellen zodat ik weet of het product wel goed genoeg is en of de specificaties wel goed genoeg zijn.
Wanneer je begint met epics dan kun je de functionaliteit van het product schetsen, zonder je te verdiepen in de details. Het maakt het gesprek over de user story’s makkelijker. Je hoeft in het begin ook niet de strakke vorm voor user story’s te gebruiken.
Breek daarna de epics in kleinere, gedetailleerde story’s tot ze klaar zijn: helder, haalbaar en toetsbaar. Alle teamleden en de opdrachtgever moeten snappen wat er onder de story verstaan wordt.
Het werken op papier heeft een aantal voordelen:
Zelfs als je een online systeem gebruikt, is het de moeite waard om post-its te gebruiken om nieuwe verhalen te schrijven. Wanneer je de belangrijkste woorden op een kaartje onderstreept, verhoog je de leesbaarheid. Kies een groter formaat post-it dan het standaard vierkante blokje. Je hebt dan meer ruimte voor de tekst en je kunt makkelijk onderscheid maken tussen de post-its met de taken die horen bij de story.
User story’s zijn er om te communiceren over het product. Ze kunnen tijdens het project nog aangevuld of veranderd worden. Dit werkt beter wanneer ze zichtbaar zijn op bijvoorbeeld een scrumboard.
De voordelen van user story’s:
User story’s zijn niet erg geschikt om de technische vereisten te beschrijven, omdat ze het product vanuit de gebruiker beschrijven. De gebruiker maakt het niet uit in of een product ontwikkeld is met WordPress als het maar werkt. Als je de technische eisen moet beschrijven gebruik je andere tools.
Lees de volgende epic:
Als bedienend personeel wil ik makkelijk de totaalprijs van de bestelling weten zodat ik snel kan afrekenen met de gasten.
Hierbij gelden de volgende prijzen en items:
| frisdrank | 2,00 |
| bier van vat | 2,50 |
| speciaal bier | 3,50 |
| wijn | 3,00 |
| bittergarnituur | 3,50 |
|
happy hour van 17.00 uur tot 18.00 uur |
10% korting |
| btw hoog | 21% |
| btw laag | 6% |
Niet alle user story’s worden altijd uitgevoerd. Of ze worden uitgevoerd is afhankelijk van:
Om aan te geven hoe belangrijk een story is voor het behalen van het doel, gebruik je de MoSCow-methode.
De letters M, S,C, W in MoSCoW staan voor
Van die laatste wordt vaak gedacht dat die voor “Would Have”staat, een soort “Nice to have”. Dat is echt niet het geval, de “leuk om te hebben” categorie is al “Could Have”; de requirements waar we best zonder kunnen, maar als er tijd over is, is het een prettige toevoeging. Onderwerpen in de categorie Will not have worden gewoon niet gerealiseerd. Althans, en dat is het tweede misverstand, niet in deze fase.
Net als het schrijven van de user story’s, gebeurt het toepassen van MoSCow in overleg met het hele team en met de opdrachtgever. de belangen van de gebruiker moet hierbij ook centraal staan.
Oefening 3
User story’s worden gebruikt binnen scrum als een manier om de eisen (requirements) te beschrijven. Scrum is een werkmethode. In het volgende hoofdstuk wordt scrum verder uitgelegd.
Vanuit user story’s kun je een opsomming maken van wat er op de site moet komen. Dit noem je de inventarisatie.
Bij de inventarisatie maak je per user story een lijst met alle gewenste functionaliteiten en informatie (zowel input als output).
Als voorbeeld 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 aangeboden worden.’
Mogelijke inventarisatie:
Nog een voorbeeld:
User story: Als een geregistreerde gebruiker, wil ik een nieuw wachtwoord kunnen aanvragen zodat ik weer toegang kan krijgen als ik mijn wachtwoord vergeten ben.
Inventarisatie:
Wanneer je wilt dat de gebruiker het automatisch gegenereerde wachtwoord om kan zetten naar een eigen wachtwoord, dan wordt de inventarisatie nog langer.
Bij scrum maak je de inventarisatie van een user story pas in de sprint waarin aan de story gewerkt wordt.
Oefening 4
Wireframes zijn een visueel hulpmiddel bij het ontwikkelen van een website of -applicatie. Ze kunnen gezien worden als bouwtekeningen met een overzicht van de verschillende functies en elementen die op een website aanwezig zullen zijn. Wireframes zijn prototypes van de functionaliteit van een app of website.
In de wireframes worden zaken vastgelegd als navigatie, indeling en inhoud, zonder gebruik te maken van een grafisch ontwerp. Het grote voordeel is dat alleen op de inhoud gefocust wordt en niet op het grafisch aspect (en of het ‘mooi‘ is of niet).
Een wireframe geeft een idee over:
Hoe gedetailleerd je een wireframe tekent, is afhankelijk voor wie je het maakt:
Het mooie van wireframes is daarnaast dat je snel een concept kunt toetsten, niet alleen om te kijken of het idee goed is uitgewerkt, maar ook of het op het gebied van gebruiksvriendelijkheid voldoet.
Designing with the mind in mind is de titel van een boek geschreven door Jeff Johnson. Hij beschrijft hierin een aantal regels (design guidelines) die je kunt gebruiken bij het ontwerpen van een user interface.
Wie een college wil zien van Jeff Johnson kan deze video bekijken op Youtube (duur video 107 min). Het volledige e-book kun je hier downloaden.
In dit hoofdstuk worden de eerste guidelines behandeld. Alle richtlijnen zijn gebaseerd op hoe wij waarnemen.
Is dit serie plaatjes van platte gronden van gebouwen of is het een woord?
Is het middelste karakter een H of een A?
Wat mensen waarnemen heeft te maken met:
In onze cultuur worden wij omringd door beelden. We hebben van jongs af aan geleerd om deze beelden op een bepaalde manier te interpreteren. Deze koe lijkt niet op een echte koe en toch zal iedereen dit zien als koe.
Wat verwacht je wanneer je op de knop rechts onder in het scherm van pagina 4 klikt?
Wat zie je?
Wat is het verschil?
Zoek de laptop!
Heb je ook de muis gezien?
Hieruit komen de eerste design-regels:
Het experiment uitgevoerd in bovenstaande video was een inzending uit 2010 van de psycholoog en hoogleraar Daniel Simons voor The Best Illusion of the Year contest. Simons is een beroemd (experimenteel) psycholoog die onderzoek doet naar onder andere perceptie, geheugen en aandacht. Hij is onder meer bekend vanwege zijn onderzoek naar veranderingsblindheid. Veranderingsblindheid is het fenomeen dat mensen niet goed zijn in het opmerken van veranderingen. Zelfs wanneer het om iets opvallends gaat als een verwisseling van twee personen, hebben de meesten dat niet door.
In het experiment focus je je op de bal die over en weer wordt gegooid. Door die focus op de bal zien ongeveer de helft van de mensen die het filmpje bekijken, niet de gorilla die dwars door het beeld loopt. Als je later weer terugkijkt en bewust op de gorilla let, dan zie je de gorilla opeens wel. Zoals in de video wordt opgemerkt werkt het alleen als je deze video nog niet eerder hebt gezien en de gorilla daardoor ook niet verwacht.
Het experiment laat duidelijk zien dat als je ergens te veel de focus oplegt, je andere (relevante) zaken over het hoofd kunt zien. Je bent er als het ware blind voor.
Dit maakt dat een bezoeker aan een website niet alles ziet.
In het boek Designing with the mind in mind wordt gebruik gemaakt van Gestaltpsychologie. Het belangrijkste principe van Gestalt (de Duitse term voor ‘vorm’ of ‘geheel’) is dat je geen losse elementen waarneemt, maar dat je de losse elementen groepeert en als geheel ziet: het geheel is meer dan de som der losse delen. Het geheel zit in zowel vorm, kleur, afstand en beweging van elementen. Wat we zien is gebaseerd op bepaalde verwachtingen en eerdere ervaringen. De Gestalt zegt dat mensen dingen waarnemen en groeperen volgens een aantal wetten. Om tot een goede vlakverdeling te komen, is de Gestaltpsychologie een hulpmiddel. Gestaltpsychologen probeerden de wetten van de menselijke waarneming te ontdekken.
In dit document wordt meer uitleg gegeven over Gestaltpsychologie.
De Gestaltprincipes beschrijven hoe je hersenen omgaan met visuele informatie. In een aantal principes leggen zij uit hoe je hersenen snel, automatisch en onbewust dingen waarnemen. Hierbij gaat het er niet om of iets er daadwerkelijk staat, maar wat wij er zelf van maken. Wanneer je goed gebruik maakt van deze wetten op je website, zorg je ervoor dat gebruikers intuïtiever door je website bewegen.
Overzicht Gestaltprincipes
Hoe dichter elementen bij elkaar staan, hoe sneller we het als groep zien, terwijl dingen die ver van elkaar vandaan staan als aparte groepen worden waargenomen. In het figuur hieronder zie je vier sets van strepen in plaats van tien losse strepen.
Als tekst of figuren dicht bij elkaar geplaatst staan op een website, verwacht een bezoeker ook dat dit bij elkaar hoort en dat er dus een relatie tussen bestaat. Deze relatie wordt snel en automatisch gelegd, waardoor de site intuïtiever is. Maar wanneer tekst of een reeks linkjes te ver van elkaar zijn gescheiden doordat er te veel witruimte tussen staat, moet een bezoeker harder nadenken om te bepalen welke informatie waartoe behoort. Een mooi voorbeeld waarin de wet van nabijheid wordt toegepast, is bij de navigatie. De navigatie items die bij elkaar staan horen bij elkaar. Zorg dat er voldoende witruimte staat tussen de elementen die niet bij elkaar horen.
Elementen die op één doorgaande lijn liggen, laten ons denken dat er een continuïteit in de lijn is, ook als er eigenlijk helemaal geen continuïteit is. Ook worden de lijnen als één geheel gezien in een bepaalde flow. Zie het voorbeeld hieronder.
We volgen de flow. Onze hersenen vullen automatisch de ontbrekende informatie aan. Hierdoor zien we niet de losse stippen, maar een stippenpatroon in een golvende lijn. Een aantal punten hoort hier wel bij, en een aantal niet.
Je kunt de Wet van continuïteit gebruiken in design door:
In een eyetracking onderzoek is vastgesteld wat er gebeurt als de kijkrichting van de baby in onderstaande advertentie voor luiers wijzigt.
De rode gebieden zijn bekeken door 80 tot 100 procent van de mensen. In de eerste afbeelding kijkt de baby recht vooruit. Hierdoor kijken wij vooral naar het gezicht van de baby (“Oh, hoe schattig!). Voor de tekst is weinig aandacht, terwijl het de adverteerder daarom draait. Hij wil zijn boodschap overbrengen. Wanneer de baby richting de tekst kijkt, is de kijkrichting compleet anders. Niet alleen de tekst krijgt meer aandacht, ook de ‘kijkbreedte’ is veel groter. We volgen de blik van de baby, waarna slim de aandacht op de tekst wordt gelegd.
De suggestie van beweging kun je op een website gebruiken om de kijkrichting van websitebezoekers te sturen. Je hoeft hiervoor geen moeilijke animatiefilmpjes te laten maken met echte beweging, de suggestie dat iets beweegt of gaat bewegen is voldoende.
Adidas stuurt onze kijkrichting naar links met deze header op hun website, doordat de beweging die kant op gericht is. Wel nogal dom dat het logo en de tekst rechts staan, waardoor deze niet de gewenste aandacht krijgen. Deze sportieve man had beter naar rechts kunnen rennen, om het gewenste effect te behalen. Bij deze dus een tip voor Adidas om hun site te verbeteren!
De KLM pakt het beter aan dan Adidas. Door het vliegtuig richting de belangrijkste tekst op de pagina te laten vliegen, wordt de aandacht hier op gericht.
Dingen die op elkaar lijken worden gegroepeerd en als eenheid gezien. Hoe de elementen eruit zien, maakt niet uit. We groeperen op vorm, kleur, grootte, afstand, beweging of op andere overeenstemmende kenmerken. In het voorbeeld hieronder zie je rondjes en vierkanten. In het figuur zie je een kruis van vierkantjes.
Als iets altijd op een gelijke manier werkt op je website, verwacht je bezoeker dat het de volgende keer ook zo werkt. Zorg daarom dat elementen die hetzelfde werken op de site een consistente vorm of kleur hebben. Vooral gelijkheid van kleur leidt tot een sterk groeperingseffect, met name als er verder weinig kleuren zijn. Gelijkheid en consistent gebruik van vorm, kleur en grootte is bij een call to action (CTA) knop van cruciaal belang.
Deze wet gaat over bewegende objecten. Het stelt dat objecten die samen bewegen worden waargenomen als gegroepeerd of gerelateerde. Bijvoorbeeld, tonen in een aantal cirkels met pijlen.
Figuren, ook al zijn deze niet compleet, zien wij wel compleet, we denken automatisch het geheel erbij. Je ziet hieronder een pandabeer, maar eigenlijk staan er wat losse zwarte vlekken.
Onze hersenen hebben de neiging om visuele gaten te verbinden en op te vullen met een lijn, kleur of patroon. Als een deel van een website omkaderd is door een bijna gesloten geheel, begrijpt de bezoeker dat alle elementen daarbinnen bij elkaar horen. Daardoor kun je kiezen om elementen weg te laten. Door vormen niet helemaal te omkaderen is de website minder druk.
Deze wet houdt in dat mensen het fijn vinden als een beeld uit eenvoud bestaat. Denk hierbij aan het HEMA of IKEA logo. Het tegenovergestelde is bijvoorbeeld de telegraafpagina.
De wet van eenvoud leert ons dat we alleen het meest voor de hand liggende zien. Complexiteit in webdesign moet dan ook zoveel mogelijk worden vermeden.
Volgens Jakob Nielsen is eenvoud zelfs het belangrijkste gebruiksvriendelijkeidsprincipe. Des te minder je bezoekers laat zien, des te minder hoeven ze te scannen en te begrijpen en des te groter de kans dat ze de juiste keuze maken. Volgens hem wordt eenvoud niet bereikt door alles weg te halen, maar door enkel de juiste dingen over te houden.
Door voor- en achtergrond van elkaar te scheiden wordt onze waarneming georganiseerd. Het is daarbij moeilijk zo niet onmogelijk om zowel voor- als achtergrond waar te nemen. Hieronder te zien in het FedEx logo. Wat zie je eerst, de ‘E’ en de ‘x’ of de naar rechts wijzende pijl die gevormd wordt tussen deze letters door de witte restruimte?
Uit de Gestalt-principes komt de design-regel:
Om elementen te groeperen gebruik je de wetten voor Nabijheid, Gelijkenis, Gemeenschappelijk lot. Om losse elementen als een geheel te zien gebruik je de wetten Continuïteit, Geslotenheid, Eenvoud, Figuur/Grond
Door het waarnemen van structuur in onze omgeving kunnen we snel betekenis geven aan objecten en gebeurtenissen.
Hieruit komen de volgende guidelines:
Het spreken en luisteren doet de mensheid al zolang deze bestaat. Het menselijke brein heeft geen aangeboren vermogen om te leren lezen. Lezen is, wanneer je het vergelijkt met spreken, een relatieve nieuwe kunstmatige vaardigheid. Mensen leren lezen door systematische instructie en praktijk.
Lezen op het beeldscherm is lastig. Veel tekst schrikt af.
Gebruik bij tekst op een website of app de volgende design guidelines:
Oefening 3
|
1
2
|
|
|
|
3
|
|
4
|
|
5
|
|
6
|
/**
* Setup cards and eventlisteners
* @param {[type]} h boardHeight
* @param {[type]} w boardWidth
* @param {[type]} hs horizontalSpacing
* @param {[type]} vs verticalSpacing
* @param {[type]} ox OffsetX
* @param {[type]} oy OffsetY
* @param {[type]} sc
*/
// Declareer de benodigde variabelen
// Loop door de rows en columns en sla op in de cardList array
// Loop door de cols
// Loop door de rows positioneer de omgedraaide kaarten random
// Sla de index' op bij d
// Zet user input aan
// Maak voor elke kaart een event handler
// Verplaats de kaarten naar het speelveld
buildCards: function(h, w, hs, vs, ox, oy, sc) {
console.log('buildCards: function');
flippedCards = [];
facingCards = [];
cards = h * w;
// Create array of matched pairs and store in cardlist
for (var c = 0; c < w * h / 2; c++) {
cardList.push(c);
cardList.push(c);
}
// Loop thru cols and rows and setup and display cards
for (var i = 0; i < w; i++) {
// Cols
for (var t = 0; t < h; t++) {
// Rows
// Display card back and randomise
var card = this.game.add.sprite(i * hs + ox, 0, 'cardBack');
var r = Math.floor(Math.random() * cardList.length);
// Store index of card to simplify matching
card.value = cardList[r];
cardList.splice(r, 1);
card.anchor.setTo(0.5, 0.5);
// Enable user input
card.inputEnabled = true;
card.flipped = false;
// onInputDown Eventlistener to call start flip sequence
card.events.onInputDown.add(this.flip, this);
// Add to group
cardGroup.add(card);
// Tween back position from top to middle and bounce
tween = this.game.add.tween(card).to({
y: t * vs + oy
}, 100 + (i * 200.5), Phaser.Easing.Bounce.Out, false);
tween.start();
}
}
},project.onephp.weblocalhosttest.oneClick on Config -> Apache (httpd.conf) Or you find the file here C:\XAMPP\apache\conf\httpd.conf, C:\XAMPP\apache2\conf\httpd.conf or similar location. Make sure that httpd-vhosts.conf is included:
# Virtual hosts
Include conf/extra/httpd-vhosts.conf
Note: By default server documents are located on
C:\XAMPP\htdocsthat’s fine if you have only one project or many small test files. However, if you need to develop many projects then it suggested separating them by the virtual host, as mentioned earlier.
c:\vhost you can call it projects etc.c:\vhost folder we create a sub-folder domain1 or project1 or any other, it is up to you (c:\vhost\project1)httpd-vhosts.conf file C:\XAMPP\apache\conf\extra\httpd-vhosts.conf Add the following code in line depending on how many vhost you want to create:#this is the default address of XAMPP
<VirtualHost *:80>
DocumentRoot "C:/XAMPP/htdocs/"
ServerName localhost
</VirtualHost>
#this is the first vhost address in XAMPP
<VirtualHost *:80>
DocumentRoot "C:/XAMPP/htdocs/prj_001"
ServerName project.one
</VirtualHost>
#this is the second vhost address in XAMPP
<VirtualHost *:80>
DocumentRoot C:/xampp/htdocs/bit-academy/
ServerName php.web
</VirtualHost>
#this is the first vhost address in test
<Directory C:/test>
AllowOverride All
Require all granted
</Directory>
<VirtualHost *:80>
DocumentRoot C:/test
ServerName test.one
</VirtualHost>
Save and close the file
C:\windows\system32\drivers\etc you need Administrator privilege to edit the file.editor.127.0.0.1 localhost
127.0.0.1 php.web
127.0.0.1 project.one
127.0.0.1 test.one
To prevent a 403 Access forbidden error when you browse your site, you add this to your httpd.conf file:
<Directory "c:/test">
AllowOverride none
Require all granted
</Directory>
localhost
php.web
project.one
test.one
Note: Under your development process you might face a problem having a cache on because you can risk updating something in Laravel and it won’t appear in your browser. Therefore you might need to disable PHP cache under the development process in your local environment.
Open file php.ini under PHP folder in your Apache (XAMPP or WAMP) folder and change opcache.enable to 0 so it looks like this:
[opcache]
zend_extension=php_opcache.dll
; Determines if Zend OPCache is enabled
opcache.enable=0
Important: The following solution is not suitable to test Restful Api, canvas, heavy solutions, etc.it might give you some headaches, so I would suggest a virtual host solution with port 80 as default.
It is possible to deploy a temporary Virtual Server without necessarily configuring XAMPP/WAMP Virtual Host, start the CMD console, and run the following PHP command:
php -S localhost:8001 -t c:\vhost\Laravel-Project\public
c:\vhost\Laravel... path should be changed to whatever your project path.In your browser, you need only to write
http://localhost:8001/
Copyright © 2026 Prep Hard Win Easy