A Inleiding
Vooraf
Wat is informatica? Als we een antwoord op deze vraag geven, dan kunnen we daar de onderstaande definitie voor gebruiken:
“Informatica is de wetenschap en de technologie van informatieverwerkende systemen in verschillende verschijningsvormen, zoals procesgeoriënteerde systemen, gegevensgeoriënteerde systemen, modelgeoriënteerde systemen en autonoomgeoriënteerde systemen. In de praktijk gaat het om systemen die op computers zijn gebaseerd en is de aandacht van informatica vooral gericht op de software.”
In deze definitie staat het begrip “informatieverwerkende systemen” centraal. Informatieverwerkende systemen verwerken gegevens die van buiten het systeem komen: de invoer. Het resultaat van de verwerking wordt gepresenteerd aan de gebruiker of een ander systeem: de uitvoer. Vrijwel alle systemen kunnen informatie kortere of langere tijd bewaren in een geheugen.
Een geldautomaat van een bank, een drankenautomaat in de kantine van school. Het zijn voorbeelden van informatieverwerkende systemen. Voor de communicatie met deze systemen wordt meestal gebruik gemaakt van een grafische gebruikersinterface. In het Engels de Graphical User Interface (GUI).
Maar ook andere interfaces winnen aan populariteit. Het gebruik van voice in een auto of bij een smartphone is zo’n andere interface. De gebruikersinterface kun je beschouwen als de schakel tussen mens en machine. Dat omvat de hardware- als de softwarekant van een machine. Een goed ontworpen gebruikersinterface zorgt ervoor dat in principe iedereen zonder al teveel voorkennis goed met het systeem kan werken. De user interface moet dan ook vooral gebruiksvriendelijk zijn. Een ontwerper van een gebruikersinterface dient in de keuzes die gemaakt worden tijdens het ontwerpproces zich daar telkens bewust van te zijn. In deze module maak je kennis met de diverse aspecten van het ontwerpproces van gebruikersinterfaces.
Leerdoelen
Na verwerking van deze module:
- weet je wat het vakgebied Mens-Machine Interactie (MMI) inhoudt;
- weet je wat een Graphical User Interface (GUI) is;
- kun je verschillende typen interfaces beschrijven;
- kun je uitleggen waarom een gebruikersinterface gebruiksvriendelijk moet zijn;
- ben je je ervan bewust, dat gebruikers van een interface verschillende verwachtingspatronen kunnen hebben;
- weet je welke aspecten een rol spelen bij het ontwerpen van de interface van een app;
- kun je de verschillende fasen van een ontwerpproces beschrijven;
- weet je wat bedoeld wordt met iteratie;
- kun je de begrippen probleemstelling, use case, use case diagram, taakmodel, gebruikersprofiel, persona en requirements uitleggen en gebruiken;
- kun je zelf een use case diagram en een taakmodel ontwerpen;
- kun je een gebruikersprofiel opstellen en persona’s schrijven;
- weet je wat bedoeld wordt met het SMART formuleren van doelen/eisen;
- weet je wat een metafoor en een mentaal model is;
- weet je waar je op moet letten bij het gebruik van kleuren in een interface;
- weet je wat bedoeld wordt met typografie;
- weet je hoe je storyboards moet maken;
- weet je wat een detailontwerp is;
- kun je een scenario schrijven;
- kun je aangeven op welke regels je moet letten bij het ontwerpen van een goede interface.
Bijlagen
Bij deze module horen de volgende bijlagen:
Zo werkt het
Je bent begonnen in de module Gebruikersinterfaces en interactie. Deze module bestaat uit meerdere onderdelen. In ieder onderdeel vind je, verdeeld over verschillende pagina's, informatie in de vorm van teksten, afbeeldingen en video's.
Daarnaast ga je zelf aan de slag. Onder het kopje "Aan de slag" vind je steeds toepassingsopdrachten. Deze opdrachten maak je alleen of met een klasgenoot.
Succes met de module Gebruikersinterfaces en interactie.
B MMI
MMI/HCI
Het vakgebied dat zich focust op de interactie, dat wil zeggen de wisselwerking, tussen mensen en machines wordt Mens-Machine Interactie genoemd. Afgekort MMI. De Engelse term voor Mens-Machine Interactie is Human-Computer Interaction (HCI).
MMI kijkt naar de manier waarop de mens en informatietechnologie elkaar beïnvloeden en hoe die onderlinge interactie kan worden verbeterd. Het ontwerp van de gebruikersinterface, de schakel tussen gebruikers en machines, speelt daarbij een belangrijke rol. Interfaces kunnen worden onderverdeeld in verschillende typen. Voorbeelden hiervan zijn de Graphical User Interface (GUI), Voice User Interface (VUI) en de Command-Line Interface (CLI).
Er bestaat een relatie tussen de complexiteit van het systeem en de complexiteit van de gebruikte interface. Het ontwerpen van de interface van een geldautomaat is van een andere orde dan het ontwerpen van de radarschermen waar de luchtverkeersleiding op Schiphol dagelijks mee werkt. Maar in beide gevallen geldt, dat gebruikers van deze systemen er snel en makkelijk de juiste taak mee moeten kunnen uitvoeren.
In deze module staat het ontwerpen van de gebruikersinterface centraal. Daarbij hoeft niet te worden nagedacht over de techniek die er achter de te ontwerpen interfaces schuil gaat. Waar wel rekening mee gehouden zal moeten worden, zijn zaken zoals de opbouw van de schermen, de te gebruiken teksten, geluiden en beeldmateriaal, koppeling van verschillende schermen etc.
★ Aan de slag 1
Geef een voorbeeld van een interface van een complex systeem en een voorbeeld van een interface van een eenvoudig systeem.- Wat is een belangrijk verschil tussen de interface van een complex systeem en de interface van een eenvoudig systeem?
- Wat is de grootste uitdaging waarmee een ontwerper van een interface van een complex systeem tijdens het ontwerpproces geconfronteerd wordt?
- Wat is het verschil tussen een Graphical User Interface (GUI), een Voice User Interface (VUI) en een Command-Line Interface (CLI). Maak voor de uitwerking van deze opgave gebruik van internet.
Verwachtingspatronen
Niet iedereen gaat met hetzelfde gemak om met een machine (computer). Dat hangt heel sterk af van het verwachtingspatroon van een gebruiker. Wat voor de een vanzelfsprekend is, is dat voor een ander juist helemaal niet. Bij het ontwerpen van een gebruikersinterface moeten de designers dan ook goed de kant van de gebruikers in de gaten houden. Wat verwachten de gebruikers van de systemen waar ze mee te maken krijgen? Hoe werken en denken de toekomstige gebruikers zelf? Wat weten ze al van de systemen waarmee ze in contact komen? Het gebruikersgemak staat immers hoog in het vaandel bij het ontwerpen van nieuwe gebruikersinterfaces.
★ Aan de slag 2
Bedenk een paar redenen waarom de verwachtingspatronen van toekomstige gebruikers zo uiteenlopend zijn.
Interface van een app
Ook de interface van een app is vooral gericht op de interactie met de gebruiker. Bij het ontwerpen van de interface van een app spelen diverse aspecten een rol:
- Het gebruik van interface elementen. Een interface element is bijvoorbeeld een knop, een tekstveld of een schuifbalk.
- Het gebruik van kleuren.
- De typografie. Onder typografie verstaan we de vormgeving van een tekst. Bijvoorbeeld de keuze van het lettertype (het font), de tekstkleur en de tekstindeling.
★ Aan de slag 3
- Interface elementen kunnen worden onderverdeeld in verschillende categorieën.
Welke onderverdeling wordt gemaakt op: deze website ?
Bekijk de voorbeelden die worden gegeven.
- Waar is app een verkorting van?
C Het ontwerpproces
Het ontwerpproces
Ontwerpen doe je niet zomaar. Net zoals een goede programmeur van tevoren nadenkt over de stappen (het algoritme) van zijn programma, zo zal een ontwerper bij het tot stand komen van zijn ontwerp ook een aantal fasen moeten doorlopen. Het ontwerpproces kan grofweg worden ingedeeld in:
- De analysefase.
- De fase waarin het ontwerp tot stand komt.
- De fase waarin een prototype ontworpen wordt.
- De evaluatiefase.
- De implementatiefase.
Een prototype is een eerste model van het te ontwerpen product. Naarmate de cirkel een paar keer rond is gegaan, wordt het ontwerp gedetailleerder en het prototype preciezer. Dan volgt de implementatiefase.
Elke fase binnen het ontwerpproces heeft een iteratief karakter. Er wordt iets ontworpen, er volgt een evaluatie, het ontwerp wordt verbeterd, er wordt weer geëvalueerd etc. Dit gaat net zolang door tot er iets klaar is dat goed genoeg is om mee verder te werken. Het woordje iteratie betekent letterlijk herhaling.
★ Aan de slag 4
Waarom is het zo belangrijk dat elke fase in het ontwerpproces iteratief is?
D De analysefase
Inleiding
In de eerste fase van het ontwerpproces, de analysefase, ligt de nadruk op onderzoek. Er wordt onderzoek gedaan naar de toekomstige gebruikers van het systeem en de eisen waaraan het systeem zal moeten voldoen. Er moet een gebruikers- en taakanalyse plaatsvinden. Voor het uitvoeren van die analyse zijn verschillende technieken beschikbaar. Dat kunnen bijvoorbeeld gesprekken, interviews en/of observaties zijn.
Caféketen “het bolleke” in Vlaanderen wil aan haar gasten een nieuwe service gaan aanbieden. De caféketen heeft in diverse steden in Vlaanderen etablissementen met eigen terrassen. De eigenaar van de keten wil voor al zijn cafés een terrasjesapp laten ontwerpen. Met de app kunnen bezoekers van “het bolleke” vanaf het terras zelf een bestelling doorgeven. De gasten van “het bolleke” zijn jonge, vaak hoogopgeleide mensen. De cafés hebben een trendy, moderne inrichting.
Voordat de gebruikersinterface van de terrasjesapp ontworpen kan worden, zal er eerst goed gekeken moeten worden naar de toekomstige gebruikers en de functionaliteit van de app. Wat verwachten klanten van “het bolleke” van het product? En wat verwacht de eigenaar (de opdrachtgever), vaak niet zelf de gebruiker, van het te ontwerpen systeem?
Op grond van de informatie die deze eerste analyse oplevert, worden een aantal onderdelen uitgewerkt:
- Een probleemstelling
- Een use case diagram
- Een taakmodel
- Een gebruikersprofiel
- Een aantal persona’s
- Een programma van eisen
Het use case diagram
Als de analysefase vlot doorlopen wordt, kan daarna een probleemstelling worden uitgewerkt. De probleemstelling bestaat uit één zin waarin duidelijk geformuleerd wordt wat het doel is van het project.
Om een beter beeld te krijgen van de taken van het systeem en de rollen die door de verschillende partijen worden gespeeld, worden use cases gemaakt. Use cases kunnen worden gevisualiseerd in een use case diagram. Een use case diagram representeert de interactie die er is tussen de gebruiker(s) en het systeem. In een use case diagram worden de gebruikers actoren genoemd. De taken van het systeem noemen we use cases. Een actor kan een persoon, een organisatie of een ander systeem zijn. Actoren vertegenwoordigen rollen en geen echte personen.Gebruik nooit lange namen voor een use case. Probeer telkens kort maar krachtig de taak van een systeem te beschrijven.
In de analysefase heeft de eigenaar van de caféketen in een gesprek met de ontwerper aangegeven dat de bediening van “het bolleke” moet kunnen zien door welke klant op het terras een bestelling is gedaan. In overleg met de eigenaar is besloten om bestellingen van klanten te gaan koppelen aan tafelnummers. Op basis hiervan is een eerste versie van een use case diagram gemaakt:
★ Aan de slag 5
- Formuleer de probleemstelling voor de te ontwikkelen terrasjesapp.
Welk nadeel kleeft er aan het gebruik van lange namen voor use cases?
★ Aan de slag 6
Bekijk het use case diagram van de terrasjesapp.
- Noem de actoren in het use case diagram.
- Noem de use cases in het use case diagram.
Voor het ontwerpen van een use case diagram geldt dat:
- de actoren altijd buiten het systeem worden geplaatst;
- een actor niet altijd een persoon hoeft te zijn. Het kan ook een ander systeem zijn;
- het systeem zelf wordt weergegeven door een rechthoek;
- de use cases in het systeem worden geplaatst. Dus in de rechthoek;
- de interactie tussen een gebruiker en het systeem wordt aangegeven door een lijn die de actor met de use case verbindt.
Use cases kunnen in een latere fase van het ontwerpproces nog verder worden uitgewerkt of worden aangepast.
★ Aan de slag 7
Ontwerp een use case diagram voor een geldautomaat waarbij alleen gekeken wordt naar de interactie tussen een klant en de geldautomaat. Maak daarvoor gebruik van het programma Violet of het programma Visio.- In de analysefase is in een gesprek tussen de opdrachtgever en de ontwerper besproken dat klanten via de app ook zelf moeten kunnen betalen. Pas op basis van deze informatie het use case diagram aan.
Het 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. Use cases kunnen door ontwerpers gebruikt worden voor het opstellen van een taakmodel.
Een taakmodel is een nadere uitwerking van een use case. In een taakmodel kun je, anders dan in een use case, de volgorde van de schermen weergeven. Bovendien kun je de algemene use cases verder uitsplitsen. Een taakmodel heeft twee belangrijke kenmerken:
- Het verschaft inzicht in de opeenvolging (sequentie) van activiteiten. In een use case wordt geen aandacht besteed aan sequentie.
- Aan de hand van een taakmodel kan gecontroleerd worden of de use case correct is.
Het taakmodel is een aanvulling op de gemaakte use cases.
We illustreren dit aan de hand van het use case diagram van de terrasjesapp. In de analysefase is door de opdrachtgever de wens uitgesproken dat klanten via de app ook kunnen betalen voor hun bestelling. Daarvoor is het noodzakelijk dat klanten zich vooraf registreren. In het aangepaste use case diagram treffen we dan ook een use case Registreren aan. We kunnen voor deze use case een taakmodel maken.
In het taakmodel is Registreren vetgedrukt. Dat wil zeggen dat het hier om een basistaak gaat, die in het te ontwerpen systeem volledig door het systeem kan worden uitgevoerd. Andere taken die moeten worden uitgevoerd, vinden buiten het te ontwerpen systeem plaats.
★ Aan de slag 8
Ontwerp het taakmodel voor de terrasjesapp. Voor het maken van een taakmodel kan gebruik gemaakt worden van: www.gliffy.com/publish/1539056
Het gebruikersprofiel
Bij het ontwerp van je systeem moet je rekening houden met je gebruikers. Elk systeem wordt ontworpen voor een bepaalde gebruikersgroep. Wat zijn de behoeften, wensen en eisen van die gebruikers? Wat kunnen ze fysiek en mentaal aan? De gebruikers moeten zonder al te veel hulp de aanwijzingen op de schermen kunnen volgen. Om je ontwerp goed af te stemmen op je gebruikers, maak je een gebruikersprofiel. Hierin worden de eigenschappen beschreven van de mensen die met het systeem gaan werken. Om in kaart te brengen wie die toekomstige gebruikers zijn, moet er vooraf een gebruikersonderzoek worden uitgevoerd. Dat kan door een interview af te nemen onder de toekomstige gebruikers of door toekomstige gebruikers te observeren op de werkvloer. Op basis van de resultaten van dit onderzoek wordt het gebruikersprofiel uitgewerkt.
Soms zul je een systeem moeten ontwerpen voor een groep gebruikers die niet zoveel van elkaar verschillen. Bijvoorbeeld als ze allemaal in hetzelfde bedrijf werkzaam zijn en dezelfde soort taken uitvoeren. In andere gevallen kan er juist sprake zijn van grote verschillen tussen de gebruikers onderling.
★ Aan de slag 9
Wat is het doel van een gebruikersprofiel?- Bij het ontwerp van je systeem moet je rekening houden met je gebruikers. Geef een voorbeeld van gebruikers die onderling nauwelijks van elkaar verschillen en een voorbeeld waarbij er juist wel grote onderlinge verschillen zijn.
Het gebruikersprofiel - 2
Zoals gezegd worden in een gebruikersprofiel 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. Ook leeftijd en geslacht worden vermeld.
In een gebruikersprofiel kunnen verschillende categorieën worden uitgewerkt:
- psychologische kenmerken
- kennis en ervaring
- werk- en taakkenmerken
- lichamelijke kenmerken
Een gebruikersprofiel verschaft inzicht in de wensen van de gebruikers.
Hieronder zie je een voorbeeld van een gebruikersprofiel. Door termen vet te maken in de kolom beschrijving wordt aangegeven welke kenmerken van toepassing zijn op de gebruikers.
Een gebruikersprofiel kan op meerdere manieren worden uitgewerkt. De afgebeelde tabel is slechts een voorbeeld van hoe het kan.
★ Aan de slag 10
Werk een gebruikersprofiel voor de gebruikers van de terrasjesapp uit.
Persona’s
Het gebruikersprofiel verschaft inzicht in wie de toekomstige gebruikers zijn. Maar het blijft voornamelijk een abstracte beschrijving van een groep mensen. Om meer te weten komen over bepaalde groepen gebruikers kunnen persona’s worden opgesteld. Een persona is een fictief karakter dat een bepaald type gebruiker beschrijft. Hieronder zie je een persona waarin nog geen gegevens zijn verwerkt:
En een voorbeeld van hoe een ingevuld document eruit zou kunnen zien:
Omdat er niet één type gebruiker bestaat, worden er in deze fase van het ontwerpproces meerdere persona’s uitgewerkt. Voor het opstellen van de persona’s worden data gebruikt die verkregen zijn door het gebruikersonderzoek dat voor het opstellen van het gebruikersprofiel heeft plaatsgevonden.
★ Aan de slag 11
Maak enkele persona’s voor de terrasjesapp. Gebruik hiervoor het sjabloon dat staat bij Inleiding onder Bijlagen.
Het programma van eisen
In de probleemstelling is het doel van het project in één zin beschreven. We nemen als voorbeeld de probleemstelling voor de terrasjesapp van caféketen “het bolleke”. Deze luidt:
“Ontwerp een interactief systeem waarmee klanten van “het bolleke” vanaf het terras zelf een bestelling kunnen plaatsen.”
Nadat duidelijk is welke taken het systeem moet gaan uitvoeren en wie de gebruikers zijn, kan een programma van eisen worden opgesteld. Deze eisen worden geformuleerd in de zogenaamde requirements. De eisen kunnen worden onderverdeeld in functionele en niet-functionele eisen. Een functionele eis geeft gewenst gedrag van het systeem weer, terwijl niet-functionele eis een kwaliteitseis is waaraan het systeem moet voldoen. Een niet-functioneel requirement is bijvoorbeeld dat de app onder zowel IOS als Android moet kunnen werken. Onze aandacht gaat vooral uit naar de functionele eisen. Dat zijn de eisen die gesteld worden aan de taken van het systeem en die zijn gebaseerd op het al eerder besproken gebruikersprofiel.
Hieronder zie je een overzicht van de requirements voor de terrasjesapp:
- Het systeem moet gebruikers de mogelijkheid bieden om zich te registreren.
- Het systeem moet geregistreerde gebruikers de mogelijkheid bieden om in te loggen.
- Het systeem moet een overzicht geven van alle cafés uit de caféketen.
- Het systeem moet een bestelling aan een tafelnummer koppelen.
- Het systeem moet een ingevoerde bestelling kunnen verwerken.
- Het systeem moet een betaling voor een bestelling kunnen verwerken.
Doelen/eisen worden vaak te vaag en vrijblijvend geformuleerd. Een eis dat het systeem moet beschikken over een gebruiksvriendelijke interface is een goed voornemen, maar hoe wordt dat gemeten. Over wat een gebruiksvriendelijke interface is, verschillen de meningen. Requirements waarin wensen, intenties of goede voornemens staan, zijn daarom geen goede requirements. Er moet vastgesteld kunnen worden welk resultaat wanneer wordt bereikt. Dat kan door het SMART formuleren van doelen/eisen. SMART staat voor:
- Specifiek
- Meetbaar
- Acceptabel
- Realistisch
- Tijdgebonden
Het programma van eisen is opgesteld op grond van een gesprek tussen de eigenaar van caféketen “het bolleke” en de ontwerper. Het zou kunnen dat na het testen van het prototype door een groep geselecteerde klanten de requirements aangevuld worden. Voor nu geven ze een goed beeld van welke afspraken er gemaakt zijn tussen de eigenaar en de ontwerper.
★ Aan de slag 12
- In het programma van eisen voor de terrasjesapp ontbreekt een belangrijke eis. Bedenk welke.
Waarmee zal bij het opstellen van de requirements voor een nieuw informatiesysteem rekening moeten worden gehouden?
E De ontwerpfase
Inleiding
In de tweede fase van het ontwerpproces, de ontwerpfase, ligt de nadruk op het maken van een ontwerp. Het is de fase waarin we gaan kijken naar de opbouw van de schermen. In ons voorbeeld dus de schermen van de terrasjesapp van caféketen “het bolleke”.
De analysefase heeft een aantal producten opgeleverd:
- Een probleemstelling
- Een use case diagram
- Een taakmodel
- Een gebruikersprofiel
- Een aantal persona’s
- Een programma van eisen
We weten inmiddels 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 worden de resultaten van de analysefase verder verfijnd.
We hebben al eerder gezien dat bij het ontwerpen van de interface van een app diverse aspecten een rol spelen:
- Het gebruik van interface elementen. Een interface element is bijvoorbeeld een knop, een tekstveld of een schuifbalk.
- Het gebruik van kleuren.
- De typografie. Onder typografie verstaan we de vormgeving van een tekst. Bijvoorbeeld de keuze van het lettertype (font), de tekstkleur en de tekstindeling.
We gaan daar nu dieper op in.
Metaforen
Bij het ontwerpen van schermen wordt vaak gebruik gemaakt van icoontjes. Een icoon is een eenvoudige afbeelding die een bepaalde verwachting oproept waardoor gebruikers van een systeem geholpen worden bij de navigatie door de schermen. Een icoon is in deze context een representatief symbool en een voorbeeld van een interface element.
Bekijk het onderstaande icoontje van het winkelwagentje:
Als je online aan het winkelen bent en je wilt een product kopen, klik je op het icoontje van het winkelwagentje. Het product wordt dan figuurlijk in je winkelwagentje gelegd. Daarna zou je de bestelling kunnen afronden door te betalen voor het product. De afbeelding van het winkelwagentje roept bepaalde verwachtingen op. Die verwachtingen berusten op een vergelijking met de alledaagse werkelijkheid. Als je iets koopt, leg je voordat je naar de kassa gaat het product in je winkelwagentje.
Het icoontje is een voorbeeld van een metafoor. Een metafoor hoeft niet altijd de vorm van een icoontje te hebben. Ook een gebruikersinterface kan als een metafoor worden gebruikt. Een metafoor is een vorm van beeldspraak, waarbij de afbeelding of beschrijving berust op een vergelijking.
★ Aan de slag 13
Wat verwachten mensen dat er gebeurt als je op elk van de volgende iconen klikt?
Mentale modellen
Ontwerpers gebruiken metaforen omdat mensen daar bepaalde verwachtingen bij hebben. Die verwachtingen noem je een mentaal model. Bij de ontwikkeling van een computer is het toetsenbord zo ontworpen dat het lijkt op een typemachine. Die overeenkomst hielp gebruikers om met het toetsenbord om te gaan. Toch gaat de vergelijking niet helemaal op. Bij een typemachine zorgt de spatiebalktoets er voor dat er een stukje wit verschijnt. Op dat stukje wit verschijnt geen teken. De spatiebalktoets op een toetsenbord produceert echter wel een teken: de spatiebalktoets heeft een code. Namelijk ASCII 32, zoals de toets “A” de waarde ASCII 65 heeft. Die waarde ASCII 32 staat voor een stukje wit. Dus intern heeft de spatiebalk wel een waarde, maar er verschijnt geen zichtbaar teken op het scherm.
Een metafoor kan gebruikers helpen bij het begrijpen van een interface, maar kan tegelijkertijd ook voor verwarring zorgen. Aan het gebruik van een mentaal model kleven dus risico’s. Een ontwerper zal zich telkens de vraag moeten stellen of zijn eigen verwachtingen wel overeenkomen met de verwachtingen van toekomstige gebruikers van zijn ontworpen interface.
★ Aan de slag 14
- Bekijk de onderstaande afbeelding:
Welk probleem zou zich in de toekomst kunnen gaan voordoen als een ontwerper dit icoontje voor een interface gebruikt?
- Welk metafoor wordt gebruikt voor het opruimen van bestanden?
Kleurgebruik
Bij het ontwerpen van een gebruikersinterface 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. Zo reageren mensen bijvoorbeeld over het algemeen op dezelfde manier op bepaalde kleuren. Dat komt voor een deel omdat kleuren in onze maatschappij een bepaalde betekenis hebben gekregen. Waarom zou het scherm hiernaast bijvoorbeeld nare gevolgen kunnen hebben? 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.
Als je weet welke kleur bij welke stemming of sfeer past, kun je een kleur gaan kiezen. Daarnaast is het ook goed om te weten hoe je kleuren moet gebruiken. Sommige kleuren vind je misschien wel heel mooi, terwijl de combinatie van die kleuren nauwelijks leesbaar is.
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. Ook de verzadiging is een getal tussen 0 en 1; 0 betekent dat er geen enkele kleur meer is, het is grijs; 1 wil zeggen dat de kleur op zijn felst is. De B van HSB staat voor Brightness, ofwel helderheid. Dit geeft aan hoe licht de kleur is. Ook de helderheid is een getal tussen 0 en 1; 0 betekent geen enkel licht: zwart; 1 wil zeggen dat de kleur voluit getoond wordt.
Je kunt dit verschil in helderheid zien als je in Word een kleur kiest:
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 dicht bij elkaar liggen, zelfs als ze sterk verschillen in verzadiging of tint.
- Kies donkere kleuren uit de rechterhelft van de kleurencirkel tegen lichte kleuren van de linker helft.
- Vermijd kleuren die dicht naast elkaar liggen in de kleurencirkel. Oranje met rood is dus geen goede combinatie, ook al liggen ze op verschillende helften van de cirkel.
★ Aan de slag 15
Er zijn formules die berekenen of de mate van helderheid en de kleuren zelf voldoende van elkaar verschillen
Ga naar: juicystudio.com/services/luminositycontrastratio.php#specify
Op deze webpagina kun je het kleurencontrast tussen een gebruikte achtergrondkleur (background color) en de kleur van het lettertype (foreground color) bekijken.
Vul voor de background color de waarde #ff0000 in en voor de foreground color de waarde #ff4500.
Wat is de contrast ratio die bij deze kleuren hoort?
★ Aan de slag 16
In de vorige 'Aan de slag'-opdracht heb je de contrast ratio van 2 kleuren berekend (background color waarde #ff0000 - foreground color waarde #ff4500).
Mensen die kleurenblind zijn, kunnen de tekst niet goed lezen.
Waarom niet?
Bekijk het filmpje van Google Design over het gebruik van kleuren:
https://design.google.com/videos/palette-perfect/
★ Aan de slag 17
Waarom zou het ontwerp van het scherm hiernaast nare gevolgen kunnen hebben?
★ Aan de slag 18
In een kleurentabel worden voor kleuren de bijbehorende RGB-waarde en/of hexadecimale waarde vermeld.
Voor deze opdracht maken we gebruik van een dergelijk kleurentabel:
www.helderester.nl/kleurentabel.html
- Zoek de hexadecimale waarde van zeegroen en aquamarijn op. Verwacht je dat deze kleuren goed bij elkaar passen?
- Controleer je antwoord door de contrast ratio te berekenen op:
www.juicystudio.com/services/luminositycontrastratio.php#specify
Typografie
Onder typografie verstaan we de vormgeving van een tekst. Bijvoorbeeld de keuze van het lettertype (font), de tekstkleur en de tekstindeling. Bij het ontwerpen van een gebruikersinterface speelt de vormgeving van de tekst ook een belangrijke rol. Dat begint al bij de keuze van een lettertype.
Een lettertype kan gebruik maken van schreefloze letters of schreven. Schreven zijn de “pootjes” (dunne dwarsstrepen) aan het uiteinde van de letter.
In de afbeelding is het bovenste font Times New Roman. Dit is een lettertype dat schreven gebruikt. Het onderste font is Verdana. Dit is een lettertype dat gebruik maakt van schreefloze letters.
Het Franse woord voor schreef is serif en sans betekent zonder. Vaak worden letters zonder schreef sans serif genoemd.
Voor het ontwerp van de interface van een app worden meestal schreefloze letters gebruikt. Schreefloze letters ogen modern en eenvoudig. Voor de gebruikersinterface van apps zijn dat belangrijke aandachtspunten.
★ Aan de slag 19
- Welke twee soorten lettertypen worden gebruikt?
- In Windows worden lettertypen geïnstalleerd in de map fonts.
Welke van de in de screenshot afgebeelde fonts zijn lettertypen met schreven?
Het globaal ontwerp
Je hebt nagedacht over de interface elementen die je wilt gaan gebruiken, de kleuren en de vormgeving van de tekst. Voordat je de schermen voor de terrasjesapp gaat maken, gaat de aandacht eerst uit naar het opzetten van een globaal ontwerp. Daarvoor maak je gebruik van storyboards. De term “storyboards” 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.
In het volgende filmpje zie je hoe storyboards gebruikt kunnen worden voor het ontwerp van de interface van een app. De film is in 2014 gemaakt door een student van de universiteit van Queensland in het kader van een opdracht voor het vak Human Computer Interaction (HCI).
Storyboards worden gebruikt om een globaal ontwerp vorm te geven. Dat het in deze fase van het ontwerpproces nog om een globaal ontwerp gaat, blijkt uit het ontbreken van kleuren in de storyboards. Ook zijn de gebruikte teksten vaak nog onvolledig uitgewerkt.
Het doel van storyboards is om de dialoogstructuur helder te krijgen. Storyboards laten zien hoe je als gebruiker van het ene naar het andere scherm manoeuvreert.
★ Aan de slag 20
In het filmpje “paper prototype – pinterest mobile app redesign” staat op enkele schermen de tekst Lorem ipsum.
Waarom wordt deze tekst gebruikt? Maak voor het beantwoorden van deze opgave gebruik van internet.
- Werk een storyboard voor de terrasjesapp uit.
Voor het maken van storyboards kan gebruik gemaakt worden van: www.fluidui.com
In fluid mogen met een gratis account maximaal 10 schermen worden uitgewerkt.
F Het detailontwerp
Inleiding
In deze fase van het ontwerpproces ga je bedenken hoe de uiteindelijke schermen er uit gaan zien. Het is de fase van het detailontwerp. In een detailontwerp worden de schermen van kleuren voorzien en de definitieve teksten uitgewerkt. Het doel van het detailontwerp is:
- het precieze uiterlijk van de schermen vast stellen.
- de dialoogstructuur verder uit te werken.
Hoe de interface er uiteindelijk uit komt te zien, wordt bepaald door het gebruik van kleur en tekst. De dialoogstructuur zegt iets over de interactie, de wisselwerking, die er is tussen mens en machine. Het ontwerp van de gebruikersinterface speelt in de interactie die plaatsvindt een belangrijke rol.
★ Aan de slag 21
Werk het detailontwerp voor de terrasjesapp uit.
Evaluatie
Nadat de schermen hun definitieve vorm hebben gekregen en duidelijk is hoe de dialoogstructuur er uit ziet, breekt de fase van de evaluatie aan. Het ontwerp moet worden getest.
Scenario’s
Voor het testen van het ontwerp kan gebruik gemaakt worden van scenario’s. Een scenario is een verhaaltje waarin de voorspelbare interactie beschreven wordt tussen gebruikers (actoren) en het systeem. Scenario’s worden vaak gebruikt als onderdeel van het ontwerpproces.
Op basis van de testresultaten, kan besloten worden om onderdelen zoals use case diagram, taakmodel, requirements en storyboards bij te stellen.
★ Aan de slag 22
Schrijf een scenario waarin een Engelse toerist een drankje en een bittergarnituur wil bestellen op het terras van café “het bolleke” in Brugge.- Bij het testen van het ontwerp van de terrasjesapp is gebleken, dat er geen rekening is gehouden met toeristen die een vreemde taal spreken.
Pas op basis van deze testresultaten het use case diagram, taakmodel, requirements en storyboards aan.
G Conclusie
Conclusie
Je hebt nu de hele cyclus van het ontwerpproces doorlopen. Je hebt gekeken naar een probleemstelling, een use case diagram, een taakmodel, een gebruikersprofiel en de requirements voor de terrasjesapp. Daarna heb je aan de hand van storyboards het globaal model verwerkt tot een gedetailleerd ontwerp. Met scenario’s heb je dat model verder kunnen testen. We hebben al deze fasen doorlopen aan de hand van de opdracht voor het ontwerp van een terrasjesapp voor caféketen “het bolleke”. Het eindresultaat bestaat uit een aantal schermen voor de te bouwen app.
Maar hoe wordt nu bepaald of we een kwalitatief goede gebruikersinterface hebben ontworpen? Daarvoor kunnen we richtlijnen gebruiken die zijn opgesteld door grote bedrijven zoals Apple en Google.
★ Aan de slag 23
Google heeft in 2012 richtlijnen gepubliceerd waarin is voorgeschreven hoe apps op Android eruit moeten zien en hoe ze zouden moeten werken. Deze richtlijnen zijn te vinden op: Richtlijnen Google
Controleer aan de hand van deze richtlijnen of je ontwerp voor de interface van de terrasjesapp voldoet de criteria die Google heeft opgesteld voor Android toestellen.
★ Aan de slag 24
Doe nu hetzelfde voor de richtlijnen die Apple heeft opgesteld:
Richtlijnen Apple
H Projectopdracht
Inleiding
In de module “Gebruikersinterfaces en interactie” zijn we allerlei fasen tegengekomen waarin een ontwerpproces zich kan bevinden. Aan de hand van het voorbeeld van de terrasjesapp voor caféketen “het bolleke” hebben we stap voor stap deze verschillende fasen doorlopen. Nu wordt het tijd om de opgedane kennis en vaardigheden te gaan toepassen op een nieuw onderwerp.
Betaald parkeren in Bergen
De gemeente Bergen in Noord-Holland wil voor het centrum van het dorp betaald parkeren via een app gaan invoeren. Automobilisten die geen kleingeld bij zich hebben, kunnen voor het betaald parkeren gebruik maken van deze parkeerapp. Dat is ook handig voor de vele toeristen die jaarlijks Bergen bezoeken.
In de gemeenteraad is gesproken over de voordelen van het gebruik van de app. De gemeenteraad heeft besloten dat de registratie voor het gebruik gratis is. Automobilisten gaan ook alleen daadwerkelijk betalen voor de tijd dat ze parkeren. Via de app kan het parkeren gestart en gestopt worden. Het betalen voor het parkeren gebeurt achteraf en kan via de app geregeld worden. De app moet op elk type smartphone gebruikt kunnen worden.
De opdracht
Jullie opdracht bestaat uit het ontwerpen van schermen voor de parkeerapp voor de gemeente Bergen. De opdracht moet in groepjes worden uitgewerkt. Jullie docent bepaalt de groepsgrootte.
Voor het ontwikkelen van de verschillende schermen van de app mogen jullie gebruik maken van een sjabloon van een smartphone. Deze sjabloon is gemaakt in PowerPoint. Wij hebben gekozen voor PowerPoint omdat deze applicatie op veel scholen beschikbaar is. In PowerPoint kunnen ook gemakkelijk afbeeldingen, teksten, geluid en filmpjes worden toegevoegd. Het sjabloon staat bij Inleiding onder Bijlagen.
Uiteraard kan in overleg met de docent gekozen worden voor een andere omgeving waarin de schermen ontwikkeld worden.
Hulpmiddelen
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 evenals een voorlopige tijdsplanning.
- Er wordt een gezamenlijk logboek bijgehouden 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, enkele persona’s en een programma van eisen op voor het de te ontwerpen interface van het 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.
- Evalueer je globaal ontwerp. Doe dat op basis van een aantal zelf geschreven scenario’s.
- Ontwerp aan de hand van het globaal ontwerp een detailontwerp in PowerPoint of een andere omgeving. Let hierbij vooral 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.
Voortgang
Bekijk hier je voortgang
 |
Kernprogramma |
Docent kan klassen aanmaken en leerlingen volgenEen docent kan op de profielpagina klassen aanmaken.
Als een docent dat gedaan heeft, kunnen de leerlignen zich aan de klas koppelen.
Als de leerlingen dat gedaan hebben, kan de docent de voortgang van de leerlingen volgen.
>>
Profielpagina
Voor het maken van een use case diagram maken we gebruik van het programma Violet:
