6 H5 Het ontwerpproces: het detailontwerp

H5 Het ontwerpproces: het detailontwerp

Het globaal ontwerp: hoe nu verder?

Je hebt voor het restaurant een globaal ontwerp gemaakt voor het instrument waarmee de obers bestellingen kunnen opnemen. Je hebt in hoofdstuk 4 een methode gezien waarmee je zo'n globaal ontwerp kunt vormgeven: het opstellen van storyboards. In het detailontwerp ga je bedenken hoe je werkelijke schermen eruit gaan zien. In de storyboards was nog geen kleur gekozen en was de precieze tekst nog niet geformuleerd. De storyboards waren bedoeld om de dialoogstructuur helder te krijgen: hoe wordt de gebruiker door de verschillende schermen geleid. Het doel van het detailontwerp is

  • het precieze uiterlijk van de schermen vast te stellen
  • de dialoogspecificatie verder uit te werken

Het precieze uiterlijk wordt bepaald door tekst en kleur. De dialoogspecificatie heeft betrekking op de communicatie tussen mens en machine. Bieden de schermen de juiste keuzemogelijkheden om verder te gaan?

We nemen eerst weer de kaartjesautomaat van de NS onder de loep

5.1 Het uitwerken van de schermen

Bij het maken van het globaal ontwerp in DENIM heb je nog geen kleur aan de schermen van het nieuwe bestellingssysteem gegeven. Voor de NS is de kleurkeuze duidelijk. Ze hebben de standaardkleuren van de NS gekozen: blauw en geel.

Klik hier voor de opdracht over het uiterlijk van de schermen.

5.2 Het rapporteren van de evaluatie

In de NS film uit hoofdstuk 2 hoor je een geluidsopname van iemand die een kaartje koopt voor een rondreis. Het maken van een audio-opname is één van de manieren om een ontwerp te testen. Op die manier hoor je waar een tekst niet logisch is, of een knop niet doet waarvoor hij bedoeld was.
Eigenlijk is de NS film een combinatie van twee manieren om te testen. Je hoort aan de aarzeling van de proefpersoon of iets duidelijk is. Je ziet aan de beweging van de cursor of de navigatie binnen het systeem duidelijk is. Wil je de bewegingen van de cursor registreren, dan heb je daarvoor speciale software nodig. Je kunt echter ook met een videocamera de bewegingen van de proefpersoon registreren. Ook dan wordt duidelijk wanneer de proefpersoon aarzelt of zich verbaast wanneer een knop toegang geeft tot een scherm dat hij of zij niet verwachtte.

Als je niet in de gelegenheid bent om een audio- en/of video-opname te maken, kun je ook met pen en papier registreren hoe je proefpersoon reageert. In alle gevallen moet je van te voren goed bedenken hoe je de reacties gaat vastleggen. Omdat je meer dan één proefpersoon wilt laten testen, moet je ervoor zorgen dat je een overzichtelijk geheel houdt.

In het voorbeeld van de NS heeft de proefpersoon de opdracht gekregen een rondreis te kopen. Het vertrekstation was gegeven, als ook de zogenaamde via-stations. Je hebt aan een de audio-weergave gehoord dat niet alle schermen voor zich spraken. Hoe ga je de reactie nu registreren? Je kunt natuurlijk je eigen systeem ontwerpen. In dit voorstel wordt het taakmodel uit hoofdstuk 3.3 als uitgangspunt genomen. De kolomnamen komen overeen met de tekst in de rechthoekjes van het taakmodel.

In dit taakmodel zie je welke schermen door de proefpersoon zijn bekeken. In bijgaand evaluatieformulier kun je nu per proefpersoon noteren welk scherm een bepaalde reactie oproept.

Open bestand Evaluatieformulier

In dit formulier zijn alleen die schermen opgenomen waar de proefpersoon in de film moeite mee had. Je zult meer formulieren en meer kolommen nodig hebben, afhankelijk van de situatie die je proefpersonen laat naspelen. Zo'n situatie noemen we een scenario.

5.3 Een scenario voor Kiriakos

Bij het testen van je ontwerp kun je een proefpersoon gewoon zijn gang laten gaan met het systeem. Je kunt ook een scenario bedenken waarin je extra lastige situaties test.
Je hoeft het scenario niet zelf te bedenken. Als je je ontwerp voor het restaurant wilt testen kun je een ober vragen om een moeilijke situatie te bedenken. De ober herinnert zich vast wel een klant die allerlei extra dingen wilde of niet wilde bij zijn dessert: geen aardbeiendessertsaus, wel verse aardbeien, extra slagroom, een wafeltje en twee chocolaatjes.

Klik hier voor de opdracht om je ontwerp te testen.

5.4 Het bijstellen van het globaal ontwerp

Na de test met de kaartjesautomaat waren geen grote aanpassingen nodig. Grote blunders zitten er niet meer in, want dit systeem is door de NS ongetwijfeld ook al vaak getest. Is jouw globaal ontwerp ook zo goed door de test gekomen?
Stel dat jij de proefpersoon was. Wat zou jij zeggen als je de eerste twee schermen van een ontwerp moest testen met het scenario dat je net hebt gezien?
 

Klik op de knop met de tekst volgende om te zien wat het volgende scherm is.

Open bestand volgende

In dit geval moet je waarschijnlijk een aantal dingen bijstellen. Je kunt immers maar één gerecht of drank per tafel bestellen. Misschien kun je je beperken tot het aanpassen van het taakmodel.

Klik op de knop verbetering om te zien wat hier de wijziging zou moeten zijn.

Open bestand verbetering

Soms zul je meer moeten aanpassen, bijvoorbeeld als blijkt dat je er helemaal niet aan gedacht hebt dat de ober het totaalbedrag van een bestelling moet kunnen zien. In dat geval moet het programma van eisen en het use case diagram ook worden bijgesteld.

Klik hier voor de opdracht om je globaal ontwerp aan te passen.

5.5 Opdrachten

Opdracht bij 5.1 - Detailontwerp

  1. Controleer of de kleuren van de NS een goed contrast opleveren. Gebruik daarvoor onderstaande applet. Eventueel kun je ook het programma voor het bepalen van kleurcontrast gebruiken: Colour Contrast Analyser (zie ook Bronnen in de menubalk).
  2. Kies nu twee kleuren voor het systeem van het restaurant. Zoek kleuren die volgens jou bij het restaurant passen, maar test de kleuren op leesbaarheid en contrast. Tip: kijk ook eens naar de paragraaf Het toepassen van kleuren in interfaces onder het kopje Extra in de menubalk.
  3. Bekijk nogmaals de film van de NS in hoofdstuk 2 en luister goed naar het commentaar. Zijn er dingen die je op basis van dit commentaar zou willen veranderen in het ontwerp van de schermen van het NS systeem? En van het eigen ontworpen restaurantsysteem?

Terug naar 5.1

Opdracht bij 5.3 - Een scenario voor Kiriakos

Test je ontwerp voor de PDA van het restaurant. Laat twee proefpersonen je ontwerp bekijken op basis van onderstaand scenario. Registreer hun reacties op een overzichtelijke manier. Bedenk of je een audio- en/of video-opname wilt maken.

Scenario van het restaurant:
Een groep van 10 mensen wil eten bij dit restaurant. Om zoveel mensen tegelijk te bedienen wordt een aantal tafels aan elkaar geschoven. Bijna iedereen bestelt een voorgerecht, een hoofdmaaltijd en een drankje. Eén iemand heeft niet zo'n honger en bestelt 2 voorgerechten in plaats van een voorgerecht en een hoofdgerecht. Na afloop wil iedereen afzonderlijk afrekenen.

Terug naar 5.3

Opdracht bij 5.4 - Bijstelling globaal ontwerp

Bekijk in hoeverre je de verschillende onderdelen van je globaal ontwerp voor het restaurant moet aanpassen op basis van de test. Voer die aanpassingen uit in een detailontwerp. Overleg met je docent of je het ontwerp zult maken in DENIM (zonder kleur), of bijvoorbeeld in Powerpoint (met kleur).

Terug naar 5.4

  • Het arrangement 6 H5 Het ontwerpproces: het detailontwerp is gemaakt met Wikiwijs van Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt, maakt en deelt.

    Auteur
    Bètapartners Je moet eerst inloggen om feedback aan de auteur te kunnen geven.
    Laatst gewijzigd
    2014-12-18 14:55:00
    Licentie
    CC Naamsvermelding-GelijkDelen 3.0 Nederland licentie

    Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding-GelijkDelen 3.0 Nederland licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding en publicatie onder dezelfde licentie vrij bent om:

    • het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat
    • het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken
    • voor alle doeleinden, inclusief commerciële doeleinden.

    Meer informatie over de CC Naamsvermelding-GelijkDelen 3.0 Nederland licentie.

    Dit materiaal is achtereenvolgens ontwikkeld  en getest in een SURF-project  (2008-2011: e-klassen als voertuig voor aansluiting VO-HO) en een IIO-project (2011-2015: e-klassen&PAL-student).  In het SURF project zijn in samenwerking met vakdocenten van VO-scholen, universiteiten en hogescholen e-modules ontwikkeld voor Informatica, Wiskunde D en NLT.  In het IIO-project (Innovatie Impuls Onderwijs) zijn in zo’n samenwerking modules ontwikkeld voor de vakken Biologie, Natuurkunde en Scheikunde (bovenbouw havo/vwo).  Meer dan 40 scholen waren bij deze ontwikkeling betrokken.

    Organisatie en begeleiding van uitvoering en ontwikkeling is gecoördineerd vanuit Bètapartners/Its Academy, een samenwerkingsverband tussen scholen en vervolgopleidingen. Zie ook www.itsacademy.nl

    De auteurs hebben bij de ontwikkeling van de module gebruik gemaakt van materiaal van derden en daarvoor toestemming verkregen. Bij het achterhalen en voldoen van de rechten op teksten, illustraties, en andere gegevens is de grootst mogelijke zorgvuldigheid betracht. Mochten er desondanks personen of instanties zijn die rechten menen te kunnen doen gelden op tekstgedeeltes, illustraties, enz. van een module, dan worden zij verzocht zich in verbinding te stellen met de programmamanager van de Its Academy (zie website). 

    Gebruiksvoorwaarden:  creative commons cc-by sa 3.0

    Handleidingen, toetsen en achtergrondmateriaal zijn voor docenten verkrijgbaar via de bètasteunpunten.

     

    Aanvullende informatie over dit lesmateriaal

    Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar:

    Toelichting
    Deze les maakt onderdeel uit van de e-klas 'Mens-machine interactie' voor havo 5 en VWO 5 en 6 voor het vak informatica.
    Leerniveau
    VWO 6; HAVO 5; VWO 5;
    Leerinhoud en doelen
    Informatica;
    Eindgebruiker
    leerling/student
    Moeilijkheidsgraad
    gemiddeld
    Trefwoorden
    c4 informatiesysteemontwikkeling, c8 interactie mens-machine, e-klassen rearrangeerbaar