In deze module over Mens-Machine Interactie (MMI) maak je kennis met de wereld van het ontwerpen van informatiesystemen. De nadruk ligt niet zozeer op de techniek die achter complexe informatiesystemen schuilgaat, maar meer op het ontwerpen van interfaces. Waar zeker rekening mee gehouden zal moeten worden zijn zaken zoals de opbouw van schermen, te gebruiken teksten, geluiden en beeldmateriaal, koppeling van verschillende schermen etc.
Studiewijzer
Mens-Machine Interactie (MMI)
De module MMI bestaat uit de volgende verschillende onderdelen:
Inleiding.
Informatiesystemen ontwerpen.
Het ontwerpproces: de analysefase.
Het ontwerpproces: de ontwerpfase.
Het ontwerpproces: het detailontwerp.
Afronding.
Eindopdracht.
Bovendien zijn er nog drie ondersteunende delen: extra, begrippen en bronnen. Het zijn onderdelen die niet noodzakelijkerwijs doorgenomen hoeven te worden, maar zijn wel aan te raden.
Tijdsindeling:
De module is gebaseerd op een studielast van 40 uur. De helft van deze uren heb je nodig voor het doorwerken van het lesmateriaal inclusief het maken van de opdrachten. Voor het realiseren van een mooi eindproduct blijven de andere 20 uur over. Bedenk dat je bij deze eindopdracht ook in een verslag weergeeft waarom je bepaalde keuzes hebt gemaakt tijdens het ontwerpproces.
Een indeling voor de module kan er als volgt uitzien:
Week
Onderdeel (in navigatiebalk)
1
H1 + H2
2
H3
3
H4
4
H5
5
H6 + Beginnen Eindopdracht
6
Eindopdracht
7
Eindopdracht
(8)
Eindopdracht
Opmerking:
Een alternatief is om niet volgens bovenstaande opbouw te werken, maar direct met de eind opdracht te beginnen. De onderwijsvorm wordt dan vraaggestuurd. Hier moet dan zeker benadrukt worden dat elke stap in het ontwerp verantwoord moet worden zodat het een verplichting wordt het gegeven lesmateriaal door te nemen.
In deze module over Mens-Machine Interactie (MMI) maak je kennis met de wereld van het ontwerpen van informatiesystemen. De nadruk ligt niet zozeer op de techniek die achter complexe informatiesystemen schuilgaat, maar meer op het ontwerpen van interfaces. Een interface is de koppeling tussen twee systemen die niet direct met elkaar kunnen communiceren. De toetsen op je telefoon bijvoorbeeld zetten jouw signaal (letters in een smsje) om in elektrische signalen in het toestel. Waar zeker rekening mee gehouden zal moeten worden, zijn zaken zoals de opbouw van schermen, te gebruiken teksten, geluiden en beeldmateriaal, koppeling van verschillende schermen etc. Tijdens het doorwerken van de lesstof zul je daar gaandeweg mee geconfronteerd worden:
Wanneer is een ontwerp een goed ontwerp en wanneer niet?
Welke criteria worden gehanteerd om te bepalen of iets goed of slecht is?
Een informatiesysteem is het geheel van mensen, middelen, procedures en regels dat de informatievoorziening verzorgt. Deze componenten moeten samen informatie verzamelen (zoeken), verwerken, opslaan en verspreiden.
Centraal binnen het eerste gedeelte van de module staat de ontwerpopdracht voor het restaurant Kiriakos. De eigenaar van het restaurant wil meegaan met de tijd en hij besluit zijn zaak te moderniseren. Het plaatsen en afhandelen van bestellingen moeten geautomatiseerd worden. Jij buigt je over deze opdracht.
De module wordt afgesloten met een eindopracht. Daarbij kruip je in de huid van een ontwerper die de opdracht heeft gekregen om een informatiesysteem voor bezoekers van het Rijksmuseum in Amsterdam te ontwerpen. Je vindt deze opdracht onder het menu-item "Eindopdracht".
Als je tijdens de e-klas termen tegenkomt die nieuw voor je zijn, kijk dan bij "Begrippen".
Leerdoelen
Na verwerking van deze module kun je:
een omschrijving geven van het begrip Mens-Machine Interactie (MMI).
aangeven waarom ontwerpers van informatiesystemen heel goed de gebruikerskant in de gaten moeten houden.
uitleggen wat goede en slechte ontwerpen zijn.
de verschillende fasen van een ontwerpproces beschrijven.
zelf een probleemstelling formuleren.
de begrippen use case, taakmodel, gebruikersprofiel en programma van eisen (requirements) uitleggen en gebruiken.
zelf een use case en een taakmodel ontwerpen.
uitleggen wat een metafoor is en het begrip toepassen op een interactiestijl.
aangeven waarom kleur en taalgebruik van invloed zijn op het ontwerpproces.
een scenario schrijven en testen.
de regels van Schneiderman toepassen.
We wensen je veel plezier met het werken aan dit informatica-onderdeel.
Ronald Leijtens Marijke Loots Anthony van Inge
H1 Inleiding
H1 Inleiding
Volg het college op het schoolbord.
Let op: het college eindigt met 'Ja, het is buitengewoon belangrijk'.
Maak de opdrachten in deze e-klas in Word en bewaar ze op een usb-stick.
Opdracht begrip MMI
Opgave 7
De positionering van de knoppen uit groep I variant C heeft begin jaren 60 de voorkeur.
Waarom zou deze toetspositionering in die tijd de voorkeur hebben gekregen?
Opgave 8
In 1960 is uiteindelijk gekozen voor de volgende lay-out variant:
Ondertussen zijn er alweer 50 jaar verstreken en is er weinig meer veranderd.
Wat is de reden dat er nu zo weinig verandert aan dit toetsenbord?
Opgave 9
Waaruit is op te maken dat het bovenstaande besturingsdek wel degelijk van een zeeschip is?
Opgave 10
Bedenk een definitie voor MMI.
Opgave 11
Ga naar de webpagina van de Apple Human Interface guidelines en vind de uitleg over de genoemde GUI concepten. Beschrijf wat met de volgende concepten bedoeld wordt: Metaphors, Consistency, Forgiveness en Modelessness.
Opgave 12
a. Wat is er mis met de uitleg in de bovenstaande handleiding voor het gebruik van een deurknop? Is er verschil tussen de Nederlandstalig en de Engelstalige uitleg? Wat moet veranderen aan het ontwerp opdat er geen handleiding meer nodig is?
b. Welke machines of apparaten ken je die vaak een slecht MMI vertonen?
1.2 Extra Opdrachten
Presidentsverkiezingen VS 2000
Dat het maken van een goed ontwerp heel belangrijk is, blijkt wel uit het verloop van de Amerikaanse presidentsverkiezingen in het jaar 2000. In de Amerikaanse staat Florida waren de republikeinse presidentskandidaat Bush en de democratische presidentskandidaat Gore verwikkeld in een nek-aan-nek race.
De verkiezingsuitslag in deze staat zou uiteindelijk bepalen wie de nieuwe president van Amerika zou worden. Hieronder zie je hoe het stembiljet dat in Florida werd gebruikt eruit zag.
Opdracht stembiljet
Het ontwerp van het stembiljet dat in Florida gebruikt werd, leek van invloed te zijn op het uitbrengen van stemmen in deze staat. Er werd daarom een hertelling van de stemmen geëist. Na hertelling kwam Bush als overwinnaar uit de bus. Hij werd de nieuwe president van Amerika.
Welk bezwaar kleeft er aan het ontwerp van dit stembiljet? Noteer eerst je antwoord en klik daarna op de knop om te kijken of je antwoord juist is.
Het verloop van de presidentsverkiezingen toont aan dat een slecht ontwerp grote gevolgen kan hebben. In het geval van Florida leidde het tot een hertelling waarbij vele mensen dagen achter elkaar handmatig alle stembiljetten moesten bekijken.
Kijk nu eens naar de onderstaande interface van een scherm waarin je een wekker kunt instellen:
Opdracht interface wekker
In werkelijkheid zal bij het ontwerpen van een systeem rekening gehouden moeten worden wat er technisch mogelijk is. Daarnaast is er het gegeven dat ontwerpers te maken hebben met een vooraf vastgesteld budget voor de uitvoering van een project. Ontwerpers van informatiesystemen worden door deze factoren beperkt in wat ze wellicht zouden hebben willen ontwerpen. In de praktijk komt het er vaak op neer dat er gekozen wordt voor een compromis waarin ontwerpers en opdrachtgevers elkaar kunnen vinden.
Opdracht goed of slecht ontwerp
Zoek nu zelf op internet een voorbeeld van een goede en een slechte interface en motiveer je keuze.
H2 Informatiesystemen ontwerpen
H2 Informatiesystemen ontwerpen
De ontwerpers van informatiesystemen - zoals de kaartjesautomaat voor de NS - moeten weten welke taken het systeem moet kunnen uitvoeren. Ze moeten weten dat de klant niet alleen een kaartje moet kunnen kiezen (Feedback and Dialog), maar ook dat het kaartje daarna moet worden geprint (What You See Is What You Get, WYSIWYG). Bovendien moet een klant een vergissing kunnen corrigeren (Forgiveness). Enzovoort, enzovoort.
Er bestaat een relatie tussen de complexiteit van het systeem en de complexiteit van de gebruikte interface. Je kunt heel veel verschillende kaartjes kopen bij de NS, en daarom heeft de interface heel veel verschillende schermen. Hoe ingewikkeld de kaartjesautomaat ook mag zijn, het ontwerpen van de interface die de verkeersleiding gebruikt om treinen om te leiden bij storingen, is nog stukken ingewikkelder. Bovendien zijn er in het laatste geval ook nog strenge ontwerpeisen om bedieningsfouten uit te sluiten. In ieder geval moet de ontwerper precies weten welke taken de computer moet uitvoeren.
Heb je de film aandachtig bekeken? Dan zal je wellicht opgevallen zijn dat het kopen van een treinkaartje nog niet zo eenvoudig is. De bedenkers van de schermen van de kaartjesautomaat van de NS kunnen vooraf niet altijd goed inschatten hoe een klant zal reageren op de keuzes die zij voor de diverse schermen bedacht hebben. Daarom worden vaak MMI systemen onderworpen aan allerlei tests uitgevoerd door potentiële gebruikers.
De werking van een kaartjesautomaat illustreert heel duidelijk dat niet iedereen met hetzelfde gemak met een machine omgaat. Dit hangt heel sterk af van het verwachtingspatroon van de gebruikers van dergelijke machines. Bijvoorbeeld generatie en cultuur verschillen kunnen een grote rol spelen een rol bij verwachtingspatronen.
Bij het ontwerpen en bedenken van computersystemen zullen de ontwerpers goed de kant van de gebruikers in de gaten moeten houden. Wat verwachten de gebruikers van de systemen waar ze mee te maken krijgen, hoe werken en denken deze gebruikers zelf, wat weten ze al van de systemen waarmee ze in contact komen? Het gebruikersgemak staat hoog in het vaandel bij het ontwerpen van nieuwe systemen.
De techniek achter het systeem blijft in deze module onbesproken. In het voorbeeld van de kaartjesautomaat betekent dat dus dat ontwerpers wel moeten werken aan de vormgeving van de schermen waarop keuzes kunnen worden gemaakt, maar dat zij géén aandacht hoeven te besteden aan de vraag hoe bijvoorbeeld de machine uiteindelijk een treinkaartje print. Dat is de schone taak voor technici om degelijke en betrouwbare printers te ontwikkelen.
H3 Het ontwerpproces: de analysefase
3 Het ontwerpproces: de analysefase
Inleiding
In dit hoofdstuk wordt de analysefase van het ontwerpproces behandeld. Als opdracht bij dit hoofdstuk voer je een analyse uit voor het restaurant Kiriakos.
Ter ondersteuning van de onderwerpen wordt aan de hand van de kaartjesautomaat een aantal voorbeelden gegeven.
Ontwerpen doe je niet zomaar. Net zoals een goede programmeur van tevoren nadenkt over de stappen (het algoritme) van het te ontwerpen programma, zo zal een ontwerper bij het tot stand komen van het ontwerp ook een aantal fasen moeten doorlopen. Daarbij zullen een aantal vragen geformuleerd moeten worden en beantwoord moeten worden:
Is het duidelijk wat de opdrachtgever voor ogen heeft?
Welke taken moet het systeem precies uitvoeren?
Is het duidelijk welke mensen met het systeem moeten gaan werken?
Op grond van de informatie die uit de eerste analyse voortkomt, kan
een probleemstelling
een use case diagram
een taakmodel
een gebruikersprofiel
een programma van eisen
worden opgesteld.
In de probleemstelling moet in één zin duidelijk worden wat het doel van het project is. In het use case diagram wordt duidelijk wat de hoofdtaken zijn en wie daarbij betrokken zijn. In het taakmodel wordt schematisch weergegeven hoe de verschillende taken op elkaar aansluiten. In het gebruikersprofiel wordt duidelijk welke kenmerken de gebruikers hebben. In het programma van eisen wordt beschreven waar het systeem aan moet voldoen.
3.1 De analyse
Het doel van een project is over het algemeen om een verbetering door te voeren in bijvoorbeeld: efficiëntie, reductie van fouten, onkostenbesparing. Taken die nu nog handmatig gebeuren, moeten straks met het nieuwe systeem worden uitgevoerd. Om die overgang goed te kunnen maken moet precies in kaart worden gebracht hoe de taken worden uitgevoerd zonder het systeem. Het kan ook zijn dat een bestaand systeem moet worden aangepast. De taken zijn dan al geautomatiseerd, maar er komen nieuwe taken bij. In dat geval moet duidelijk zijn hoe de nieuwe taken aansluiten op de oude taken.
Voor het in kaart brengen van de bestaande situatie bestaan verschillende technieken. Eén van de technieken is het interviewen van de toekomstige gebruikers. Zij zijn deskundig en kunnen een waardevolle bijdrage leveren aan het ontwikkelen van een geautomatiseerd systeem.
In plaats van het afnemen van interviews kun je ook observeren. Als alle handelingen nog met de hand gebeuren, beschrijf dan wat er gebeurt: Wat wordt opgeschreven, doorgegeven, bewaard of weggegooid?
Een kaartjesautomaat analyse
Stel je de tijd voor waarin je alle treinkaartje nog aan het loket kon kopen. Toen dat proces geautomatiseerd moest worden, heeft de ontwerper ongetwijfeld de loketmedewerkers geïnterviewd. De ontwerper wil dan antwoorden hebben op vragen als:
Welk soort kaartje verkoopt u het meest?
Hoe betalen de meeste klanten?
Bij het ontwerp van het systeem zal het antwoord op de eerste vraag heel belangrijk zijn geweest. Kaartjes die zelden verkocht worden hoeven niet altijd zichtbaar te zijn in het keuzemenu.
Natuurlijk is de vragenlijst veel langer. Bovendien krijgt de ontwerper ook nog andere informatie. Welke soorten kaartjes er bestaan (of nog bedacht zullen worden), zal de ontwerper niet alleen van de loketmedewerker te horen hebben gekregen. Welke betalingsmogelijkheden er nu zijn zal niet het enige uitgangspunt zijn geweest. Het geautomatiseerde systeem moet ook inspelen op ontwikkelingen in het elektronisch betalingsverkeer.
Toch zal uiteindelijk het gedrag van de klant het uiterlijk van het definitieve systeem voor een goed deel bepalen. De ontwerper kan daarvoor observeren en bijvoorbeeld een paar dagen naast de loketmedewerker gaan zitten of in de rij gaan staan om een ingewikkeld kaartje te kopen. Dan merkt de ontwerper zelf hoe de loketbediende reageert. Stelt de loketbediende bijvoorbeeld een wedervraag, of is dat niet nodig? De ontwerper moet van te voren wel weten waarop gelet moet worden. Het heeft geen zin om te kijken of mensen wel netjes op hun beurt wachten. Het heeft wel zin om te luisteren hoe mensen een kaartje kopen. Als iemand vraagt om een retour naar Den Haag, is het dan duidelijk dat het een tweedeklas kaartje is? Zijn er stilzwijgende afspraken dat een tweedeklas kaartje de standaard is? Is er ook een stilzwijgende afspraak dat het vertrekstation dezelfde plaats is als waar het kaartje wordt gekocht?
Analyse voor restaurant Kiriakos
De eigenaar van restaurant Kiriakos wil meegaan met zijn tijd en besluit zijn zaak te moderniseren. Het wordt de hoogste tijd dat het plaatsen en afhandelen van bestellingen geautomatiseerd wordt voor achtereenvolgens: de klanten, de obers en de kok. Nu worden bestellingen nog met pen en papier verwerkt.
De ober neemt bij de klant een bestelling op door de keuze van de klant te noteren op een blaadje. Daarna levert hij het blaadje met de bestelling in bij de kok. Als de kok klaar is met het bereiden van de maaltijd, krijgt de ober vanuit de keuken een verbaal seintje. De ober brengt het eten naar de tafel van de klant. Na het eten rekent de klant af met de ober.
Dit is een weergave van de huidige situatie. De ontwerper van het nieuwe systeem is een dag in het restaurant gaan zitten om de situatie te beschrijven. Hij heeft ook de eigenaar geïnterviewd. De eigenaar wil alle taken die nu met de hand worden uitgevoerd automatiseren. Het is duidelijk dat niet het bereiden van het eten wordt geautomatiseerd. Wel moeten de papiertjes verdwijnen waarop de bestellingen worden geschreven en daarmee de mogelijkheid te creëren om automatisch de rekening te bepalen. Ook is het storende geroep tussen de keuken en het restaurantgedeelte niet meer nodig.
Bovendien kan de automatiseringsslag gebruikt worden om de bestaande processen efficiënter te maken, door bijvoorbeeld een volledig andere indeling te kiezen en taken overbodig te maken. Als voorbeeld zou Kiriakos zijn klanten kunnen informeren via een smartphone of er nog plaats is in het restaurant.
Klik hier voor de opdracht om een analyse voor het restaurant te maken.
3.2 De Use Cases
De interviews en/of de observaties hebben de ontwerper een beeld gegeven van de bestaande situatie. Alle handelingen en interacties moeten nu gestructureerd worden. Bovendien moet duidelijk worden wie wat doet. Om een beter beeld te krijgen van de rollen die door de verschillende partijen worden gespeeld, worden zogenaamde use cases gemaakt. Elke use case is een pad dat door een bepaalde partij wordt gevolgd om een bepaald doel te bereiken.
Bij het ontwerpen van een use case diagram zijn er enkele punten waar je op moet letten:
Het systeem wordt weergegeven als een rechthoek.
De use cases worden in de rechthoek, het systeem, geplaatst.
De actoren worden altijd buiten het systeem geplaatst.
Een actor hoeft niet altijd een persoon te zijn. Het kan ook een ander systeem zijn.
Neemt een actor deel aan een use case dan is dat terug te zien door een lijn die de actor met de betreffende use case verbindt.
Use cases kunnen in een latere fase van het ontwerpproces nog verder worden uitgewerkt c.q. worden aangepast.
Een kaartjesautomaat Use Case
Een klant heeft als algemeen doel het reizen met de trein. Daarbinnen kun je verschillende acties onderscheiden:
Kaartje kiezen.
Kaartje betalen.
Behalve de klant is de loketmedewerker ook betrokken bij de aankoop van het kaartje. Als de klant niet duidelijk aangeeft wat de bedoeling is, moet de loketmedewerker de goede vragen stellen. Bovendien moet loketmedewerker de financiële transactie tot een goed einde brengen en onder andere wisselgeld teruggeven. Om aan te geven wie welke taken uitvoert worden de use cases in een use case diagram gezet. In het diagram wordt duidelijk welke taak door welke rol wordt uitgevoerd. De taken zelf worden heel globaal beschreven. De uitsplitsing van de taken gebeurt in een aparte tabel.
Klik hier voor de opdracht voor de Use Case voor het restaurant.
3.3 Taakmodel
In het use case diagram worden de belangrijkste taken weergegeven. Bovendien wordt duidelijk welke actoren bij deze taken betrokken zijn. De use cases zelf zijn nog heel globaal geformuleerd. In een aparte tabel worden zij verder uitgewerkt. Hieronder zie je de uitwerking voor een eerste use case:
Kaartje kiezen.
Het vertrekpunt noemen.
Het eindpunt noemen.
Aangeven of het eerste of tweedeklas is.
Aangeven of er recht is op korting.
Kaartje betalen.
In de de toekomst zullen de kaartjes zonder tussenkomst van de loketmedewerker gekocht moeten worden. Deze rol zal worden overgenomen door een systeem. In de analysefase werd duidelijk dat er stilzwijgende afspraken bestaan. Er wordt meestal vanuit gegaan dat de reiziger vertrekt vanaf het station waar het kaartje wordt gekocht. Hoe is dat bij de kaartjesautomaat? Bij het kopen van een kaartje aan het loket wordt er meestal vanuit gegaan dat het kaartje dezelfde dag geldig moet zijn. Bij een kaartjesautomaat moet die keuze expliciet worden gemaakt. Zo kom je vanuit de uitsplitsing van de use cases al tot een weergave van de taken die het systeem moet uitvoeren.
Een taakmodel is een nadere uitwerking van een use case diagram. In een taakmodel kun je, anders dan in een use case diagram, de volgorde van de schermen weergeven. Bovendien kun je de algemene use cases verder uitsplitsen.
Je moet er wel om denken dat je niet alleen maar let op de volgorde. Bij het kopen van een kaartje moet je een bestemming kiezen voordat je kunt betalen. Toch zul je in het taakmodel zien dat het betalen van een kaartje niet volgt op het bepalen van je bestemming. Bij het aangeven van de volgorde moet je de volgorde per hoofdtaak uitbeelden. De belangrijkse taken (de hoofdtaken) worden apart weergegeven.
3.4 Het gebruikersprofiel
Bij het ontwerp van je systeem moet je rekening houden met je gebruikers. De gebruikers moeten zonder al te veel hulp de aanwijzingen op de schermen kunnen volgen. Wat zijn die aanwijzingen? Als je weer even aan de kaartjesautomaat denkt, weet je dat het eerste scherm geen lap tekst is. De aanwijzingen zitten in de plaats van de knoppen en de tekst op de knoppen. Het kaartjesautomaat moet begrijpelijk zijn voor iedere reiziger. Dat zijn oude en jonge mensen, met veel en weinig opleiding, met veel ervaring met interactieve systemen of met een grote weerzin tegen de automaten. Soms zul je een systeem ontwerpen voor een groep gebruikers die onderling minder verschillen. Ze werken bijvoorbeeld allemaal bij hetzelfde bedrijf, of ze hebben allemaal een bepaalde interesse. Zo zullen de bezoekers van Pinkpop een andere profiel hebben dan de abonnementhouders van de opera.
Om je ontwerp goed af te stemmen op je gebruikers, maak je een gebruikersprofiel. In een gebruikersprofiel worden de kenmerken beschreven van de mensen die met het systeem gaan werken. Daarin neem je op of de gebruikers gemotiveerd zijn voor de taak die ze moeten uitvoeren, welk werk ze doen, welk opleidingsniveau ze hebben en welke ervaring ze hebben in het werken met verschillende applicaties.
In een gebruikersprofiel worden verschillende categorieën uitgewerkt. Hieronder zie je een voorbeeld van een gebruikersprofiel. Het profiel is opgesteld op basis van interviews met toekomstige gebruikers van een systeem waarmee maaltijden moeten worden besteld in een verzorgingstehuis. De bedoeling is dat de bewoners vanuit hun kamer een maaltijd bestellen via een interactief scherm.
Het verzorgingstehuis is speciaal opgericht voor mensen die in het middelbaar en hoger onderwijs hebben gewerkt. In de tweede kolom is met vet aangegeven in hoeverre zij overeenkomen met bepaalde kenmerken.
Kenmerk
Beschrijving
Psychologische kenmerken
Cognitieve stijl
verbaal visueel
Houding t.o.v. taak
positief neutraal negatief
Kennis en ervaring
Opleidingsniveau
hoog middel laag
Typvaardigheid
hoog middel laag
Ervaring met computers
hoog middel laag
Kennis vreemde talen
hoog middel laag
Werk- en taakeigenschappen
Bekendheid met taak
hoog middel laag
Systeemgebruik
verplicht facultatief
Training
cursus handleiding
Lichamelijke kenmerken
Geslacht
manvrouw
Leeftijd
oud middelbaar jong
Gezichtsvermogen
goed redelijk slecht
Motoriek
goed redelijk slecht
Klik hier voor de opdracht een gebruikersprofiel voor het restaurant op te stellen.
3.5 Het programma van eisen
In de probleemstelling is het doel van het project in één zin beschreven. Nu duidelijk is welke taken het systeem moet gaan uitvoeren en wie de gebruikers zijn kan een programma van eisen worden opgesteld. Het kan zijn dat zowel de probleemstelling, als het taakmodel, als het programma van eisen, na een eerste test van het systeem nog moet worden bijgesteld. Nu gaat het om een eerste poging. Als uitgangspunt nemen we het menusysteem voor het verzorgingshuis. De probleemstelling is (tegen de zin van de bewoners) als volgt geformuleerd:
Er moet een systeem worden ontwikkeld waarmee de bewoners hun maaltijden op de kamer via een interactief scherm kunnen bestellen.
We gaan ervan uit dat er een use case diagram is gemaakt en een taakmodel is opgesteld. Het gebruikersprofiel heb je net bestudeerd. In het programma van eisen wordt nu beschreven waarover de opdrachtgever en de ontwerper in een aantal gesprekken het eens zijn geworden.
De eisen kunnen worden onderverdeeld in functionele en niet-functionele eisen. Niet-functionele eisen hebben te maken met de vraag of het scherm is aangesloten op het gesloten circuit van het verzorgingshuis, de snelheid en de kosten van het systeem en de aansluiting van de interface op andere applicaties van het verzorgingshuis. Deze eisen laten we buiten beschouwing. De functionele eisen hebben bijvoorbeeld te maken met de taken van het systeem en worden mede gebaseerd op de kenmerken van de gebruikers. Elke zin begint met Het systeem moet.. :
Het systeem moet alle menukeuzes van één dag zichtbaar maken op het scherm.
Het systeem moet de mogelijkheid hebben dieetwensen aan te geven.
Het systeem moet het mogelijk maken foute keuzes te herstellen.
Het systeem moet het mogelijk maken ook voor gasten een bestelling te plaatsen.
Het systeem moet goed leesbare teksten tonen.
Het systeem moet bruikbaar zijn voor mensen met een slechte motoriek.
Het systeem moet het mogelijk maken de grootte van de porties aan te geven.
In een eerste gesprek met de directie en het hoofd van de keuken zijn deze eisen geformuleerd. Als een prototype door de leden van het bewonerscomité is getest, zullen hier misschien eisen aan worden toegevoegd. In ieder geval zijn de eerste afspraken nu goed op een rijtje gezet.
Klik hier voor de opdracht het programma van eisen voor het restaurant te maken.
3.6 Opdrachten
Het restaurant
Opdracht bij 3.1 - A: Interview voor restaurant Kiriakos
Kies één van beide mogelijkheden:
Stel een lijst met vragen op die je wilt stellen aan de ober van Kiriakos. Uit de antwoorden moet duidelijk worden hoe een ober de bestellingen noteert en doorgeeft aan de keuken.
Maak een lijst van dingen die je wilt observeren in het restaurant. Uit je observaties moet blijken hoe de ober de bestellingen opneemt en doorgeeft aan de keuken.
Opdracht bij 3.1 - B: Probleemstelling voor het restaurant
De eigenaar heeft duidelijk gemaakt dat de huidige gang van zaken hem niet bevalt. Formuleer nu zelf in één zin de probleemstelling die hoort bij dit project. Deze probleemstelling moet voor zowel de opdrachtgever (de eigenaar van Kiriakos) als voor de ontwerper duidelijkheid verschaffen over het uitgangspunt van het project. Dit globale uitgangspunt wordt later nader uitgewerkt in het programma van eisen.
Een voorbeeld van een probleemstelling voor het automatiseren van de kaartverkoop bij de NS zou kunnen zijn:
Het systeem moet ervoor zorgen dat kaartjes zonder tussenkomst van de loketmedewerker gekocht kunnen worden.
Ontwerp nu zelf een use case diagram voor een bestelling plaatsen in restaurant. Doe dit vanuit de bestaande situatie. Je kunt hiervoor gebruik maken van het programma Microsoft Office Visio of het freeware-pakket Violet. En desnoods kun je het use case diagram tekenen met potlood en papier. Denk goed na of de taken behoren tot het systeem, en of je ze echt wilt automatiseren.
N.B. In het freewarepakket Violet kun je niet met een rechthoek het systeem afbakenen.
Opdracht bij 3.4 - Gebruikersprofiel voor het restaurant
Om je een beeld te vormen van de mogelijke gebruikers van het systeem kun je ook personae beschrijven. Eenpersona is een dwarsdoorsnede van mogelijke gebruikers. Je kunt je beter inleven in je gebruikers als je een bepaald iemand in gedachten hebt. Het gebruik van personae en het beschrijven van kenmerken kunnen elkaar aanvullen. Voor de gebruikers van het systeem voor het reataurant zijn twee personae beschreven. Om te oefenen met de checklist van kenmerken kun je nu een tabel maken zoals je hebt gezien voor de bewoners van het verzorgingshuis. Je hoeft niet precies dezelfde kenmerken te beschrijven als in het voorbeeld. Je moet je wel houden aan de vier hoofdcategorïen:
Psychologische kenmerken.
Kennis en ervaring.
Werk- en taakeigenschappen.
Lichamelijke eigenschappen.
Schrijf een gebruikerprofiel op basis van de volgende personae. In je gebruikersprofiel moet je de overeenkomsten zo goed mogelijk tot uitdrukking laten komen. Zo weet je met welk type gebruikers je rekening moet houden bij het ontwerp van je systeem.
Bediening
Een leerling van 17 jaar werkt sinds kort in het weekend bij Kiriakos en is dol op elektronische gadgets. De leerling is zeer enthousiast over het idee van de eigenaar om een PDA (Personal Digital Assistent) te gaan gebruiken voor het plaatsen van bestellingen. Door de aard van de gerechten zijn de namen nogal complex en lastig te onthouden.
Eigenaar
De eigenaar is 54 jaar en heeft zijn hele leven lang in de horeca gewerkt en is pas op latere leeftijd naar Nederland geëmigreerd. De eigenaar heeft het restaurant opgezet een jaar na aankomst in Nederland. De eigenaar beheerst de Nederlandse taal in beperkte mate. De eigenaar kent alle recepten en prijzen uit zijn hoofd. Het leukste aspect van zijn vak is het contact met de klanten. De eigenaar geeft graag uitleg over de gerechten en de eetgewoonten van zijn land van afkomst.
Opdracht bij 3.5 - Programma van eisen voor restaurant
Voor het bestelsysteem van het restaurant heb je al een groot aantal stappen gezet. Maak de analysefase nu af. Beschrijf een programma van eisen op grond van je gebruikersprofiel.
Voor extra inzicht in het taakmodel zie hieronder voor een opdracht met de kaartjesautomaat.
H4 Het ontwerpproces: de ontwerpfase
H4 Het ontwerpproces: de ontwerpfase
Inleiding
In dit hoofdstuk wordt ingegaan op het maken van een ontwerp voor het systeem en dat gebaseerd op de resultaten uit het voorgaande hoofdstuk. De analysefase, doorlopen in het voorgaande hoofdstuk, heeft het volgende opgeleverd:
een probleemstelling
een gebruikersprofiel
een use case
een taakmodel
een programma van eisen
Voor deze fase moet het al helemaal duidelijk zijn wat het systeem moet doen, wie het gaat gebruiken, welke stappen er moeten worden gezet (welke taken er moeten worden uitgevoerd) en aan welke eisen het systeem moet voldoen. Tijdens de ontwerpfase kunnen, of zelfs moeten, de resultaten van de analysefase steeds meer worden verfijnd.
4.1 Metaforen
Kijk eens naar het onderstaande icoontje: Als je op je pc bestanden wilt verwijderen, sleep je ze naar het icoon dat een prullenbak voorstelt. Bestanden worden daarbij vergeleken met dingen die je thuis in een prullenbak gooit. Een afbeelding van een prullenbak op het bureaublad van een pc wekt bepaalde verwachtingen op. Die verwachtingen berusten op een vergelijking met de alledaagse werkelijkheid. Het icoontje van de prullenbak is een voorbeeld van een metafoor. Een metafoor is een aanduiding van iets op basis van een vergelijking met iets dat erop lijkt. Metaforen hoeven niet altijd in de vorm van icoontjes te worden gegoten. Ook interfaces kunnen als metafoor gebruikt worden. Omdat een bepaalde interface lijkt op een pinautomaat of een kaartjesautomaat van de NS worden bepaalde verwachtingen gewekt. We kennen als het ware het trucje al. Bekijk maar eens de onderstaande film waarin met behulp van papier een prototype van de werking van een e-mailprogramma wordt gepresenteerd. Ook hier hebben we te maken met een metafoor:
We maken gebruik van metaforen omdat mensen daar bepaalde verwachtingen bij hebben. Die verwachtingen noemen we dan het mentaal model. Het gebruik van een mentaal model kan risico's met zich meebrengen. Zijn de verwachtingen van een ontwerper wel dezelfde verwachtingen als die van een gebruiker van het toekomstige systeem? Niet voor niets staat onder een icoontje vaak een korte tekst als toelichting.
Bij het ontwerpen van een scherm gaan we niet opnieuw het wiel uitvinden. We maken gebruik van iets dat gebruikers al kennen. We vergelijken onze interface met bestaande schermen, we zoeken dus naar een metafoor.
Bij het ontwerpen van het scherm, dat de medewerkers van restaurant Kiriakos moeten gaan gebruiken, laten we eerst een paar voorbeelden de revue passeren:
een pinautomaat
de kaartjeautomaat van de NS
het inloggen op een site (bijv. van een mailserver)
een e-mail programma
Elk voorbeeld heeft zijn eigen interactiestijl of manier van bediening. Een pinautomaat en de kaartjesautomaat werken beide met toetsen. Bij de pinautomaat dient de toets om een ja/nee vraag te beantwoorden, of een keuze te maken uit een beperkt aanbod, bijv. het bedrag dat je wilt opnemen. De vraag of de keuze staat op het scherm, terwijl de toetsen in hardware zijn uitgevoerd. Bij de kaartjesautomaat van de NS staat de tekst op de toets die moet worden aangeraakt. Dat kan de naam van het station zijn waar je naar toe wilt, of de wijze van betaling, of het type kaartje (enkele reis of retour). Deze toetsen zijn deel van het scherm en noemen we virtueel. De interactiestijl wordt aangeduid als directe manipulatie.
Bij het inloggen op de site van een provider, of bij het opgeven van naam- en adresgegevens, moet je een vaak een virtueel formulier invullen. Deze interactiestijl heet dan ook invulformulier.
Bij e-mailprogramma's is er sprake van verschillende interactiestijlen. Je moet tekst invullen, maar er is ook sprake van een menu. Deze interactiestijl heet menustructuur.
Er is nog een andere interactiestijl. Deze maakt gebruik van commando's die moeten worden getypt. De stijl heetcommandotaal.
Opdrachtprompt
In deze interactiestijl zorgt het commando dir ervoor dat een lijst van alle mappen en bestanden wordt getoond. Waarschijnlijk vinden de meeste mensen het eenvoudiger om op een icoontje te klikken! Ervaren gebruikers maken vaak gebruik van commandotaal. We laten deze interactiestijl hier verder buiten beschouwing. De gebruikers van systemen als de kaartjesautomaat zullen geen commando's willen typen.
4.3 Interactiestijlen en gebruikersprofiel
Bij het kiezen van een interactiestijl moet je rekening houden met je gebruikers. In het gebruikersprofiel heb je de belangrijkste kenmerken van de gebruikers vastgelegd. Voor het menusysteem van het verzorgingstehuis zijn de roodgekleurde kenmerken van belang voor de keuze van een interactiestijl:
Kenmerk
Beschrijving
Psychologische kenmerken
Cognitieve stijl
verbaal visueel
Houding t.o.v. taak
positief neutraal negatief
Kennis en ervaring
Opleidingsniveau
hoog middel laag
Typvaardigheid
hoog middel laag
Ervaring met computers
hoog middel laag
Kennis vreemde talen
hoog middel laag
Werk- en taakeigenschappen
Bekendheid met taak
hoog middel laag
Systeemgebruik
verplicht facultatief
Training
cursus handleiding
Lichamelijke kenmerken
Geslacht
manvrouw
Leeftijd
oud middelbaar jong
Gezichtsvermogen
goed redelijk slecht
Motoriek
goed redelijk slecht
Het feit dat de gebruikers verbaal zijn ingesteld en goed kunnen omgaan met de computer, zou de keuze kunnen laten vallen op het invullen van virtuele formulieren. Ook een menustructuur zou qua kennis en bekendheid met de taak geen probleem zijn. Daar staat tegenover dat ze niet gemotiveerd zijn voor het gebruik van dit systeem, en dat ze een slechte motoriek hebben, en een slecht gezichtsvermogen. Die laatste factoren zorgen ervoor dat de keuze voor het gebruik van toetsen het meest voor de hand ligt. Toetsen zijn eenvoudiger te bedienen en vragen minder concentratie. Ook het feit dat het systeemgebruik verplicht is (en er geen uitgebreide cursus wordt aangeboden), pleit voor directe manipulatie.
Je hebt nu nagedacht over het systeem dat je gaat ontwerpen voor het restaurant. Je hebt een interactiestijl gekozen en een aantal metaforen bekeken. Voordat je nu de schermen van het systeem gaat maken, maak je eerst een globaal ontwerp. Voor het maken van een globaal ontwerp heb je geen computer nodig. Met papier, plakband en gele plakbriefjes kom je al een heel eind. Kijk hieronder naar het ontwerp voor Ciao. De makers spreken Italiaans, maar het ontwerp zou zonder hun stemmen al duidelijk moeten maken wat het systeem moet doen en hoe de interface er uit gaat zien.
In de film zie je een voorbeeld van een zogenaamd storyboard. De term is ontleend aan de filmwereld. Een storyboard bestaat uit een reeks schetsen van situaties die in de film voorkomen en waar opnamen van zullen worden gemaakt. De term wordt ook gebruikt in MMI, en wel voor de ontwerpen van de allereerste globale schermen.
Er bestaan ook speciale programma's om storyboards te maken. Zo'n programma is DENIM.
In de menubalk zie je bij Bronnen ook nog een link naar de site waar je het programma kunt downloaden.
Onder Bronnen vind je ook 4 films die laten zien hoe je het programma moet gebruiken.
Een metafoor kan gebruikers helpen bij het begrijpen van een interface, maar ook tegelijkertijd ook voor verwarring zorgen.
Bekijk eens de onderstaande icoontjes:
Wat verwachten mensen dat er gebeurt als je op elk van de bovenstaande iconen zou klikken?
Opdracht toekomst icoontjes
Opdracht verkeersiconen
Bespreek met je buurman welke betekenis de beide verkeersborden zouden kunnen hebben.
opdracht vergelijken verkeersborden
Bij welk verkeersbord (afbeelding 1 of afbeelding 2) is de kans het grootst dat de bedoeling van de ontwerper afwijkt van de verwachting die de verkeersgebruiker zal hebben?
Opdracht bij 4.3 - Interactiestijl voor het restaurant
Geef aan welke kenmerken van de toekomstige gebruikers van het systeem voor Kiriakos belangrijk zijn voor de keuze van een interactiestijl.
Kies een interactiestijl op basis van deze kenmerken en geef aan waarom je deze hebt gekozen.
Maak zelf een storyboard (niet noodzakelijk met DENIM) voor minstens 4 schermen van het restaurant. Bedenk zelf welke taken je wilt laten uitvoeren in die schermen en hoe je de schermen naar elkaar laat verwijzen.
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.
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.
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.
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
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).
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.
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?
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.
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).
Aan het begin van de module is een voorbeeld gegegeven van een slecht ontwerp: het formulier om de president van de Verenigde Staten te kiezen. In bijgaande film zie je ook een ontwerp dat niet goed werkt en dat ook te maken heeft met presidentsverkiezingen. Hier gaat het om de keuze tussen presidentskandidaat Bush en presidentskandidaat Kerry.
De werkelijkheid ligt vaker dan je verwacht dicht bij deze karikatuur van een interface. De fictieve gebruiker zal hier op zijn minst enigszins geërgerd raken. Maar in de praktijk blijkt de werkelijkheid ook nog steeds zeer weerbarstig!
Er zijn uiteraard verschillende manieren om een ontwerp te beoordelen. Een manier is om de "AHIG" uit de inleiding aan te houden (paragraaf 1.1, opgave 11) of volgens de "acht gouden regels van interface ontwerp":
Zorg ervoor dat je consequent bent, in je terminologie, in je lay-out, in je kleurgebruik, en andere kenmerken van je ontwerp.
Zorg ervoor dat bezoekers die vaak op je site komen niet alle schermen door hoeven te zoeken, maar de weg kunnen afsnijden.
Zorg ervoor dat er voldoende terugmelding is als er dingen fout gaan.
Zorg ervoor dat schermen ook weer eenvoudig kunnen worden afgesloten.
Zorg ervoor dat fouten die ontstaan eenvoudig kunnen worden afgehandeld.
Zorg ervoor dat een gebruiker snel terug kan naar een eerder scherm.
Geef de gebruiker het gevoel dat hij of zij de baas is en niet de computer of de site die hij of zij bezoekt.
Zorg ervoor dat de bezoeker niet te veel informatie hoeft te onthouden.
(bron: "Designing the User Interface: Strategies for Effective Human-Computer Interaction", Ben Schneiderman & Catherine Plaisant. De 1e versie van dit boek is uitgebracht in 1987)
De "Apple Human Interface Guidelines: The Apple Desktop Interface" is ook uitgegeven in 1987. Uit de inleiding (zie de AHIG) is duidelijk de overeenkomsten te zien met de acht gouden regels.
Bij het ontwerpen van een interface voor een systeem moet je als ontwerper in de huid van de gebruiker kunnen kruipen. In een aantal opzichten zal die gebruiker anders reageren dan de ontwerper, maar een aantal dingen zullen ze gemeen hebben.
Mensen reageren over het algemeen op dezelfde manier op bepaalde kleuren, bijvoorbeeld. Dat komt voor een deel omdat kleuren in onze maatschappij een bepaalde betekenis hebben gekregen.
De betekenis van kleur / Welke kleur(en) wil jij?
Opdracht yes / no
Waarom zou dit scherm nare gevolgen kunnen hebben?
Kleuren worden weergegeven in 3 componenten: rood, groen en blauw. Dit wordt het RGB-model genoemd. Daarbij worden kleuren ook nog weergegeven in 3 andere begrippen: het HSB-model. HSB-kleuren worden ook gemaakt met behulp van drie getallen. Het eerste getal (en de H) staat voor de Hue, de tint. Dit is een kleur op de regenboog. De plaats op de regenboog wordt aangegeven door een getal tussen 0 en 1.
De S van HSB staat voor Saturation, ofwel verzadiging. Dit geeft aan hoe fel de kleur is. Een minimale waarde voor de verzadiging betekent dat er geen enkele kleur meer is, het is grijs; een maximale waarde geeft aan dat de kleur op z'n felst is.
De B van HSB staat voor Brightness, ofwel helderheid. Dit geeft aan hoe licht de kleur is. Een minimale waarde betekent geen enkel licht: zwart; een maximale waarde wil zeggen dat de kleur voluit getoond wordt.
Je kunt dit verschil in helderheid zien als je in Word een kleur kiest:
De helderheid van de kleur groen kun je veranderen door het driehoekje op de balk te verschuiven.
Er zijn drie regels om ervoor te zorgen dat je tekst niet wegvalt tegen de achtergrond, en ook leesbaar is voor mensen die kleurenblind zijn:
Overdrijf het verschil in helderheid tussen de voorgrond en de achtergrond en vermijd kleuren die dichtbij elkaar liggen, en een vergelijkbare mate van helderheid hebben, zelfs als ze verschillen in verzadiging of tint.
Kies donkere kleuren uit de rechterhelft van de kleurencirkel tegen lichte kleuren van de linkerhelft.
Vermijd kleuren die dicht naast elkaar liggen in de kleurencirkel.
Opdracht leesbaarheid tekst
Zou de combinatie van rood en oranje een leesbare tekst opleveren?
Er zijn formules die berekenen of de mate van helderheid en de kleuren zelf voldoende van elkaar verschillen. De formules worden hier niet behandeld. Je kunt wel uittesten welke combinatie van kleuren een leesbaar resultaat oplevert. Klik in onderstaande applet op een toets uit de linkerkolom om een kleur voor de tekst te kiezen. Klik op een kleur uit de rechterkolom om een achtergrond te kiezen. Je ziet vervolgens of het verschil tussen de kleuren en hun mate van helderheid voldoende is.
Kleuren hebben niet alleen een bepaalde betekenis omdat er afspraken over zijn gemaakt. Rood wordt vaak gebruikt voor gevaar of stoppen/niet doen. Kleuren hebben ook een emotionele waarde. Zo staat rood niet alleen voor gevaar of stoppen, maar ook voor warm bijvoorbeeld. Voor veel mensen uit eenzelfde cultuur hebben kleuren dezelfde emotionele waarden. Per cultuur kunnen die waarden echter wel verschillen.
Bekijk het filmpje over kleuren op de website Color in Motion. Dat doe je door op de voorstelling te klikken. Denk erom: het duurt even voordat het filmpje is geladen.
Het filmpje laat zien welke gevoelens bepaalde kleuren oproepen.
Ook taal helpt je om de sfeer en de helderheid van je systeem te bepalen.
De sfeer blijkt uit je woordkeuze en de vraag of je je publiek aanspreekt met je en jij of met u. Je moet van te voren dus goed bedenken welk publiek je wilt aanspreken. Stel jezelf een aantal vragen als:
Wie is het?
Wat moet hij of zij met mijn tekst?
We bekijken achtereenvolgens twee fragmenten uit het journaal (klik op de hyperlinks om de pdf's te openen):
Beide fragmenten gaan over kinderen die te dik zijn. Het eerste fragment is afkomstig uit het NOS-journaal, het tweede fragment uit het jeugdjournaal.
Om te bepalen wie je publiek is, kun je jezelf afvragen of hoe oud ze zijn en welke
opleiding ze hebben. Zowel leeftijd als opleidingsniveau bepalen de woorden die je kiest
en de lengte van je zinnen. Hoewel het voor een digitaal medium sowieso beter is om
korte zinnen te gebruiken, geldt dat helemaal als je denkt dat je publiek niet gewend is
veel te lezen. En gebruik ook niet teveel lijdende voorwerpen: een tekst met een lijdende
vorm wordt ook vaak minder goed begrepen.
Wat moet iemand met je tekst?
Waarvoor dient je tekst? Moet je tekst informatie bieden, iemand overhalen iets te
kopen, iemand vermaken? Moet iemand snel mijn tekst kunnen lezen, of ga je ervan uit
dat hij of zij er veel tijd voor uit trekt?
Probeer je in ieder geval te verplaatsen in degene die je tekst leest. Meestal heeft
iemand een bepaalde vraag in gedachten als hij informatie zoekt. Probeer je tekst dan
ook op die manier aan te bieden, en speel in op mogelijke vragen. Vraag je ook af of je
lezer het prettig vindt om persoonlijk te worden aangesproken. Niet iedereen is daarvan
gediend.
Lees het onderstaand nieuwsitem. Centraal staat de verwende jeugd.
Herschrijf deze tekst nu zodanig dat het bericht geschikt is voor het jeugdjournaal
Het lettertype:
Ook het lettertype dat je gebruikt is van invloed op de sfeer en de helderheid van je
tekst. Grof gezegd zijn er schreefloze letters, zoals Verdana, en schreven zoals Times New
Roman. Sommige ontwerpers raden aan schreefloze letters alleen te gebruiken voor
koppen en in langere teksten schreven te gebruiken. De krullen van de schreven zouden
je ogen beter langs de regel leiden. Anderen raden het gebruik van schreefloze letters
juist aan voor langere teksten omdat schreven als bitmapafbeelding slecht overkomen.
De manier waarop letters op je beeldscherm verschijnen hangt af van de manier waarop
de informatie over de letter wordt bewaard: als bitmap of als wiskundige berekening.
Wat bij de ontwerper mooi kan ogen, hoeft bij de gebruiker er niet hetzelfde uit te zien.
Een andere reden om schreven niet te gebruiken is dat de uitstraling die ze hebben: een
beetje arrogant en serieus.
Begrippen
Begrippen
Analyse fase:
Fase van het ontwerpproces van een te ontwerpen systeem waarbij getracht wordt de bestaande situatie in kaart te brengen en te analyseren. In de analyse fase ligt de nadruk op onderzoek. Het doel is om een indruk te krijgen van de gebruikers van het te ontwikkelen systeem en de taken die zij moeten uitvoeren. Het tweede doel is het opstellen van eisen waaraan het nieuwe systeem zal moeten voldoen.
Gebruikersprofiel:
In het gebruikersprofiel worden alle kenmerken beschreven van de mensen die het systeem gaan hanteren.
Implementeren:
Het installeren, testen en in gebruik nemen (bijvoorbeeld van apparatuur, informatiesysteem, programmatuur en procedures).
Informatiesysteem:
Geheel aan mensen, procedures en apparatuur binnen een organisatie bestemd, gebouwd, bediend, gehanteerd en onderhouden om gegevens te verzamelen en te verwerken en de aldus verkregen informatie op te slaan, terug te zoeken, weer te geven en te verstrekken, en als zodanig fungerend als verbindingsschakel tussen de aanwezige gegevens en de informatiebehoefte van gebruikers.
Interactiestijl:
De wijze waarop een gebruiker met de software interacteert en/of deze bestuurt. Er worden vier stijlen onderscheiden: commandotaal, menustructuur, invulformulier en directe manipulatie.
Interface:
Iets dat twee gescheiden entiteiten met elkaar verbindt. Zo is bijvoorbeeld een gebruikersinterface dat deel van het programma dat de computer verbindt met de gebruiker.
Iteratie:
Iteratie betekent letterlijk herhaling.
Metafoor:
Een metafoor is een aanduiding van iets op basis van een vergelijking met iets dat erop lijkt. Het icoontje van de prullenbak op het bureaublad is een voorbeeld van een metafoor.
MMI (Mens-Machine-Interactie):
Mens-machine-interactie (MMI) is een verzamelbegrip dat de wisselwerking (interactie) tussen een machine (en/of apparaat) en de mens beschrijft.
Probleemstelling:
In de probleemstelling wordt het doel van een project in één zin beschreven.
Programma van eisen:
In het programma van eisen wordt beschreven waarover de opdrachtgever en de ontwerper in een aantal gesprekken het eens zijn geworden. De eisen kunnen worden onderverdeeld in functionele en niet-functionele eisen.
Prototype:
Proefmodel.
Scenario:
Scenario's zijn heel korte beschrijvingen van mogelijke praktijksituaties, bezien vanuit een gebruiker. Scenario's worden gemaakt om de functionaliteit van het programma op een informele wijze te inventariseren.
Storyboard:
De term storyboard is ontleend aan de filmwereld. Een storyboard bestaat uit een reeks schetsen van situaties die in de film voorkomen, en waar opnamen van worden gemaakt. De term wordt ook gebruikt in MMI, en wel voor het ontwerpen van de allereerste globale schermen.
Taakmodel:
Een taakmodel is een nadere uitwerking van een use-case diagram. In een taakmodel kun je, anders dan in een use-case diagram, de volgorde van de schermen weergeven. Bovendien kun je de algemene use cases verder uitsplitsen.
Use case:
In een use case wordt vastgelegd welk doel een gebruiker met het systeem wil bereiken.
D-toets
Eindopdracht
De eindopdracht
Tijdens het doorwerken van de module MMI zijn we verschillende fasen tegengekomen waarin het ontwerpproces zich kan bevinden. Aan de hand van praktische voorbeelden, zoals de automatisering van bestellingen bij het restaurant en het kopen van een kaartje, heb je kennis kunnen maken met het vakgebied MMI. Gebruikersprofielen, taakmodellen, use cases, storyboards behoren tot de begrippen die daarbij de revue zijn gepasseerd.
In deze slotopdracht gaan we de kennis die is opgedaan tijdens het doorwerken van deze module toepassen op een nieuw onderwerp. Daarbij verplaats je je in de huid van een ontwerper die de opdracht heeft gekregen om een informatiesysteem te ontwerpen voor de bezoekers van het Rijksmuseum in Amsterdam.
Inleiding
Het Rijksmuseum in Amsterdam wil bezoekers tijdens hun verblijf in het museum gerichter gaan informeren over enerzijds het gebouw zelf en anderzijds de collecties die het Rijksmuseum in beheer heeft. De directie heeft daarom besloten de informatievoorziening voor de bezoekers te automatiseren. De doelgroep waar men zich op richt, bestaat vooral uit toeristen die tijdens hun verblijf in Amsterdam weinig tijd hebben om langer in het Rijksmuseum te vertoeven. Een Amerikaanse toerist die tijdens zijn vakantie in Europa slechts één dag naar Amsterdam komt, kan in het uurtje dat uitgetrokken is voor een bezoek aan het Rijksmuseum snel en efficiënt een aantal topwerken uit de collectie bekijken.
Er bestaat al een prachtige website (http://www.rijksmuseum.nl) en als aanvulling daarop is er een plan aangenomen waarin het ontwikkelen van een informatiesysteem voor een PDA (Personal Digital Assistent) omschreven wordt.
The picture is an illustration for a school project in the subject HCI (Human Computer Interaction).
The project was about PDAs and usability ... (bron: egilpaulsen.com)
Voor de uitvoering is een softwarebedrijf benaderd die gespecialiseerd is in het ontwerpen en implementeren van applicaties voor PDA's. Enkele vergaderingen, waarin het bedrijf met de directie van het Rijksmuseum van gedachten hebben gewisseld, hebben reeds plaatsgevonden. De directie is van mening dat bezoekers van het Rijksmuseum na binnenkomst direct de beschikking moeten krijgen over een PDA waarmee allerlei nuttige informatie over het museum te raadplegen is. Die informatie kan zich beperken tot praktische kwesties zoals de vraag waar het restaurant, het toilet of de museumwinkel is, maar het moet ook mogelijk zijn om gericht informatie over de collectie op te vragen. Bovendien is het noodzakelijk dat wanneer een minder valide toerist een alarmsignaal hoort de PDA de route naar de lift aan kan geven.
Opmerking: Ergens op de begane grond én op de eerste verdieping dient nog een doorgangspijltje te komen. Dit om een juiste rondgang voor minder validen aan te geven.
De opdracht
Voor deze praktische opdracht werk je in een groepje samen. Jullie opdracht bestaat uit het ontwikkelen van schermen voor de hierboven beschreven PDA. Daarvoor leveren we voor het ontwikkelen van de verschillende schermen van de PDA een sjabloon aan. Die is ontworpen in PowerPoint. Hiernaast zie je een screenshot van de door ons gemaakte sjabloon:
Uiteraard kan in overleg met de docent gekozen worden voor een andere omgeving waarin de schermen ontwikkeld worden. Flash zou hier zeer geschikt voor zijn. Wij hebben gekozen voor PowerPoint omdat deze applicatie op veel scholen beschikbaar is.
Omwille van de tijd die er voor het uitwerken van deze opdracht beschikbaar is, mag elke groep een keuze maken welk deel van de collectie in deze opdracht uitgewerkt wordt. We beperken ons tot de meesterwerken die tijdens de ingrijpende renovatie die het Rijksmuseum momenteel ondergaat toch te zien zijn in de speciaal voor het publiek ingerichte Philipsvleugel. Er kan gekozen worden uit:
Republiek zaal
Wereldmacht zaal
Frans Hals zaal
Rembrandt en zijn leerlingen zaal
Jan Steen zaal
Johannes Vermeer zaal
In deze zalen bevinden zich topschilderijen uit de tijd van de Gouden Eeuw. Het is niet nodig om een plattegrond van de door jullie gekozen zalen voor de PDA uit te werken. Jullie kiezen tien schilderijen waarover via de PDA informatie op te vragen is. Bevindt de bezoeker zich in de nabijheid van één van deze schilderijen, dan kan de toerist via een apart scherm informatie over het werk worden opvragen. In de volgende paragraaf is informatie over de Philipsvleugel te vinden.
Tip: kijk ook eens onder het kopje Extra bij paragraaf De invloed van taal en tekst om het taalgebruik in het informatiesysteem te bepalen.
Richtlijnen
Voor het succesvol afronden hebben we zowel inhoudelijke als procedurele richtlijnen opgesteld waaraan elke groep zich dient te houden.
Procedureel:
Schrijf een plan van aanpak. Hierin moet in ieder geval een taakverdeling worden opgenomen alsmede eenvoorlopige tijdsplanning.
Ieder groepslid houdt een logboek bij waarin naast de tijdsinvestering ook de werkverdeling van de individuele groepsleden terug te vinden moet zijn.
Alle inhoudelijke richtlijnen moeten worden uitgewerkt in een eindverslag. Daarin leg je verantwoording af voor de gemaakte keuzes tijdens het ontwerpproces.
Inhoudelijk:
Formuleer in eigen woorden een probleemstelling voor het ontwikkelen van het beschreven informatiesysteem.
Stel achtereenvolgens use cases, een taakmodel, een gebruikersprofiel en een programma van eisen op voor het te ontwerpen informatiesysteem. Beschouw daarbij je docent informatica als de opdrachtgever.
Nadat alle onderdelen van de analysefase zijn uitgewerkt, kan er in de fase van het globaal ontwerp nagedacht worden over de opbouw van de diverse schermen. Ontwerp daarvoor een serie storyboards. Geef duidelijk aan hoe de verschillende storyboards aan elkaar zijn gekoppeld. Gebruik daarbij het programma DENIM.
Evalueer je globaal ontwerp. Doe dat op basis van een aantal zelf geschreven scenario's of personae. Bedenk of je een audio- en/of video-opname wilt maken en registreer de reacties van je proefpersonen op een zinvolle manier.
Ontwerp aan de hand van het globaal ontwerp een detailontwerp in PowerPoint of Flash. Let hierbij met name op aspecten zoals kleurgebruik en de interactie tussen de verschillende schermen. Beschrijf welke wijzigingen je aanbrengt ten opzichte van het globaal ontwerp. Motiveer waarom je dat doet.
Hieronder is het sjabloon voor het detailontwerp in PowerPoint te vinden:
In dit sjabloon zijn de pijltjestoetsen al van links voorzien. De tekening van de pijltjes en de omgeving zijn gegroepeerd. Door eerst te degroeperen zijn de links te editten. Als een alternatief voor het gebruik van de pijltjestoetsen kan er ook gedacht worden aan touchscreen functionaliteit.
Achtergrondinformatie over het Rijksmuseum
Plattegronden Philipsvleugel:
Lijst van schilderijen per zaal:
Republiekzaal
Bartholomeus van der Helst: Schuttersmaaltijd ter viering van de vrede van Munster
Gerrit Adriaensz. Berckheyde: Het stadhuis op de Dam te Amsterdam
Andries de Graeff: borstbeeld van Artus Quellinus
C. Moesman: scheepsmodel William Rex
Gerard ter Borch: het sluiten van de vrede van Munster
Cornelis Claesz. van Wieringen: Het ontploffen van het Spaanse admiraalschip
Artus Quellinus: De vier werelddelen brengen eerbetoon aan Amsterdam
Wereldzaal
Nicolaes Loockemans: beker van Michiel de Ruyter
Willem van de Velde I: De zeeslag bij Terheide
Adriaen Pietersz. van de Venne: De zielenvisserij
Michiel Jansz. van Miereveld: Portret van Maurits, prins van Oranje
Dick van Delen: Grote vergadering der Staten-Generaal
Jan de Baen (toegeschreven aan): De lijken van de gebroeders De Witt
Jan Steen: Prinsjesdag
Frans Hals
Judith Leyster: De serenade
Frans Hals: Huwelijksportret van Isaac Abrahamsz Massa en Beatrix van der Laen
Frans Hals: De vrolijke drinker
Johannes Verspronck: Portret van een meisje in het blauw
Floris van Dijck: Gedekte tafel met kazen en fruit
Pieter Saenredam: Het oude stadhuis te Amsterdam
Rembrandt en zijn leerlingen
Rembrandt van Rijn: Zelfportret als apostel Paulus
Rembrandt van Rijn: Portret van Johannes Wtenbogaert
Rembrandt van Rijn: Jeremia treurend over de verwoesting van Jeruzalem
Bartholomeus van der Helst: Portret van Gerard Bicker
Jan van Goyen: Landschap met twee eiken
Jacob van Ruisdael: De molen bij Wijk bij Duurstede
Willem Kalf: Stilleven met zilveren schenkkan
Johannes Vermeer
Johannes Vermeer: De keukenmeid
Johannes Vermeer: Brieflezende vrouw
Johannes Vermeer: Gezicht op huizen in Delft, bekend als "het straatje"
Pieter de Hoogh: Een moeder die het haar van haar kind reinigt
Pieter de Hoogh: Een gezelschap op de plaats achter het huis
Gerard ter Borch: Portret van Helena van der Schalcke
Gabriël Metsu: Het zieke kind
Jan Steen
Jan Steen: Het toilet
Jan Steen: Het Sint Nicolaasfeest
Gerard ter Borch: Zittende jonge vrouw in het kostuum van een boerenmeisje
Adriaen van Ostade: Boerengezelschap binnenshuis
Gerard Adriaensz Berckheyde: De bocht van de Herengracht bij de Nieuwe Spiegelstraat te Amsterdam
Frans Hals en Pieter Codde: Het korporaalschap van kapitein Reynier Reael, bekend als "De Magere Compagnie"
Paulus Potter: Koeien in de weide bij een boerderij
Het arrangement Mens-machine interactie 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
2013-08-29 10:02:06
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.
Leeromgevingen die gebruik maken van LTI kunnen Wikiwijs arrangementen en toetsen afspelen en resultaten
terugkoppelen. Hiervoor moet de leeromgeving wel bij Wikiwijs aangemeld zijn. Wil je gebruik maken van de LTI
koppeling? Meld je aan via info@wikiwijs.nl met het verzoek om een LTI
koppeling aan te gaan.
Maak je al gebruik van LTI? Gebruik dan de onderstaande Launch URL’s.
Arrangement
IMSCC package
Wil je de Launch URL’s niet los kopiëren, maar in één keer downloaden? Download dan de IMSCC package.
Wikiwijs lesmateriaal kan worden gebruikt in een externe leeromgeving. Er kunnen koppelingen worden gemaakt en
het lesmateriaal kan op verschillende manieren worden geëxporteerd. Meer informatie hierover kun je vinden op
onze Developers Wiki.
Klik 
Klik hier voor film
Klik 
Klik 
Klik 
Klik 
Klik 
Opdrachtprompt
Klik 
Klik 
Klik 
Klik 
Klik 
Klik 
Voor deze praktische opdracht werk je in een groepje samen. Jullie opdracht bestaat uit het ontwikkelen van schermen voor de hierboven beschreven PDA. Daarvoor leveren we voor het ontwikkelen van de verschillende schermen van de PDA een sjabloon aan. Die is ontworpen in PowerPoint. Hiernaast zie je een screenshot van de door ons gemaakte sjabloon:
