Module: Enigma - Gebruikersinterfaces

Module: Enigma - Gebruikersinterfaces

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 ik wat het vakgebied Mens-Machine Interactie (MMI) inhoudt;
  • weet ik wat een Graphical User Interface (GUI) is;
  • kan ik verschillende typen interfaces beschrijven;
  • kan ik uitleggen waarom een gebruikersinterface gebruiksvriendelijk moet zijn;
  • ben ik mij ervan bewust, dat gebruikers van een interface verschillende verwachtingspatronen kunnen hebben;
  • weet ik welke aspecten een rol spelen bij het ontwerpen van de interface van een app;
  • kan ik de verschillende fasen van een ontwerpproces beschrijven;
  • weet ik wat bedoeld wordt met iteratie;
  • kan ik de begrippen probleemstelling, use case, use case diagram, taakmodel, gebruikersprofiel, persona en requirements uitleggen en gebruiken;
  • kan ik zelf een use case diagram en een taakmodel ontwerpen;
  • kan ik een gebruikersprofiel opstellen en persona’s schrijven;
  • weet ik wat bedoeld wordt met het SMART formuleren van doelen/eisen;
  • weet ik wat een metafoor en een mentaal model is;
  • weet ik waar ik op moet letten bij het gebruik van kleuren in een interface;
  • weet ik wat bedoeld wordt met typografie;
  • weet ik hoe ik storyboards moet maken;
  • weet ik wat een detailontwerp is;
  • kan ik een scenario schrijven;
  • kan ik aangeven op welke regels ik 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. 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. Na een theoretische inleiding met uitleg vind je onder het kopje Aan de slag steeds toepassingsopdrachten. Deze opdrachten maak je alleen of met een klasgenoot.
In overleg met je docent maak je voor het verzamelen van je antwoorden een bestand aan of noteer je deze in een schrift.

De blauwe knop naar "Voortgang" aanklikbaar. Hieronder zie je een voorbeeld van de blauwe knop. 

Oftewel, wanneer je op de blauwe knop drukt, open je jouw voortgang. 

Succes met de module Gebruikersinterfaces!

B MMI

Mens-Machine Interactie

Het vakgebied dat zich focust op de interactie, dat wil zeggen de wisselwerking, tussen mensen en machines wordt Mens-Machine Interactie (MMI) genoemd. De Engelse term hiervoor 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.

Bekijk de video over het gebruik van radarschermen bij de luchtverkeersleiding op Schiphol.

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 antwoord op de volgende vragen.

1. Geef een voorbeeld van:

  • een interface van een complex systeem en
  • een interface van een eenvoudig systeem.

2. Wat is een belangrijk verschil tussen de interface van een complex systeem en de interface van een eenvoudig systeem?

3. Wat is de grootste uitdaging waarmee een ontwerper van een interface van een complex systeem tijdens het ontwerpproces geconfronteerd wordt?

4. 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 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 namelijk 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:

  1. Het gebruik van interface elementen. Een interface element is bijvoorbeeld een knop, een tekstveld of een schuifbalk.
  2. Het gebruik van kleuren.
  3. 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

  1. Interface elementen kunnen worden onderverdeeld in verschillende categorieën.
    Welke onderverdeling wordt gemaakt op deze website?
    Bekijk de voorbeelden die worden gegeven.

  2. 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:

  1. de analysefase;
  2. de fase waarin het ontwerp tot stand komt;
  3. de fase waarin een prototype ontworpen wordt;
  4. de evaluatiefase;
  5. 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

  1. Formuleer de probleemstelling voor de te ontwikkelen terrasjesapp.
  2. 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.

  1. Noem de actoren in het use case diagram.
  2. Noem de use cases in het use case diagram.

Voor het ontwerpen van een use case diagram geldt dat:

  1. De actoren altijd buiten het systeem worden geplaatst.
  2. Een actor niet altijd een persoon hoeft te zijn; het kan ook een ander systeem zijn.
  3. Het systeem zelf wordt weergegeven door een rechthoek.
  4. De use cases in het systeem worden geplaatst, dus in de rechthoek.
  5. 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

  1. 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.
  2. 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:

  1. Het verschaft inzicht in de opeenvolging (sequentie) van activiteiten. In een use case wordt geen aandacht besteed aan sequentie.
  2. 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 terrasjes-app. 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 terrasjes-app.
Voor het maken van een taakmodel kan gebruik gemaakt worden van: www.gliffy.com

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

  1. Wat is het doel van een gebruikersprofiel?
  2. 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:

  1. psychologische kenmerken;
  2. kennis en ervaring;
  3. werk- en taakkenmerken;
  4. 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:

  1. Het systeem moet gebruikers de mogelijkheid bieden om zich te registreren.
  2. Het systeem moet geregistreerde gebruikers de mogelijkheid bieden om in te loggen.
  3. Het systeem moet een overzicht geven van alle cafés uit de caféketen.
  4. Het systeem moet een bestelling aan een tafelnummer koppelen.
  5. Het systeem moet een ingevoerde bestelling kunnen verwerken.
  6. 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

  1. In het programma van eisen voor de terrasjesapp ontbreekt een belangrijke eis. Bedenk welke.
  2. 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:

  1. Het gebruik van interface elementen. Een interface element is bijvoorbeeld een knop, een tekstveld of een schuifbalk.
  2. Het gebruik van kleuren.
  3. 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

  1. Bekijk de onderstaande afbeelding:



Welk probleem zou zich in de toekomst kunnen gaan voordoen als een ontwerper dit icoontje voor een interface gebruikt?

  1. 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 dergelijke kleurentabel:
www.helderester.nl/kleurentabel.html

  1. Zoek de hexadecimale waarde van zeegroen en aquamarijn op. Verwacht je dat deze kleuren goed bij elkaar passen?
  2. 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

  1. Welke twee soorten lettertypen worden gebruikt?
  2. 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

  1. 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.
     
  2. 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 vaststellen.
  • De dialoogstructuur verder uitwerken.

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

  1. Schrijf een scenario waarin een Engelse toerist een drankje en een bittergarnituur wil bestellen op het terras van café “het bolleke” in Brugge.
  2. 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: Design for Android - App quality guidelines.

Controleer aan de hand van deze richtlijnen of je ontwerp voor de interface van de terrasjes-app 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:

  1. Schrijf een plan van aanpak. Hierin moet in ieder geval een taakverdeling worden opgenomen evenals een voorlopige tijdsplanning.
  2. Er wordt een gezamenlijk logboek bijgehouden waarin naast de tijdsinvestering ook de werkverdeling van de individuele groepsleden terug te vinden moet zijn.
  3. Alle inhoudelijke richtlijnen moeten worden uitgewerkt in een eindverslag. Daarin leg je verantwoording af voor de gemaakte keuzes tijdens het ontwerpproces.

Inhoudelijk:

  1. Formuleer in eigen woorden een probleemstelling voor het ontwikkelen van het beschreven informatiesysteem.
  2. 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.
  3. 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.
  4. Evalueer je globaal ontwerp. Doe dat op basis van een aantal zelf geschreven scenario’s.
  5. 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 groepen aanmaken en leerlingen volgen
Een docent kan op de profielpagina groepen aanmaken. Als een docent dat gedaan heeft, kunnen de leerlingen zich aan de groep koppelen. Als de leerlingen dat gedaan hebben, kan de docent de voortgang van de leerlingen volgen.

>> Inlogpagina gebruikersaccount

Log hier in met je Entree account.

Om toegang te krijgen tot Portfolio-site, log je in bij Mijn VO-content en klik je op Entree.



Log in met je SCHOOLACCOUNT

 

Profielpagina

Als je ingelogd bent, vul je profielpagina verder in. Je kunt de niveaus aanklikken (waar je lesmateriaal van wilt zien voor de andere programma's) en ook de vakken. De profielpagina werkt voor alle Extra Programma's van VO-content.

Je kunt deze keuzes achteraf ook altijd aanpassen.
Let op: verifieer je e-mailadres na de eerste keer inloggen. Als je dat gedaan hebt kan je bij een storing van de ELO of Entree alsnog met je e-mailadres inloggen.

 
 
 

  • Het arrangement Module: Enigma - Gebruikersinterfaces is gemaakt met Wikiwijs van Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt, maakt en deelt.

    Auteur
    VO-content
    Laatst gewijzigd
    2025-04-24 19:12:45
    Licentie

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

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

    Meer informatie over de CC Naamsvermelding-GelijkDelen 4.0 Internationale licentie.

    Het thema 'Gebruikersinterfaces' is ontwikkeld door auteurs en medewerkers van Enigma-online. Fair Use In de modules van Enigma-online wordt gebruik gemaakt van beeld- en filmmateriaal dat beschikbaar is op internet. Bij het gebruik zijn we uitgegaan van fair use. Meer informatie: Fair use Mocht u vragen/opmerkingen hebben, neem dan contact op via de helpdesk VO-content.

    Aanvullende informatie over dit lesmateriaal

    Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar:

    Toelichting
    Deze module is onderdeel van de arrangeerbare leerlijn van de Stercollecties voor het kerndeel van Informatica voor hv456. In deze module maak je kennis met de diverse aspecten van het ontwerpproces van gebruikersinterfaces. De gebruikersinterface kun je beschouwen als de schakel tussen mens en machine. Denk hierbij bijvoorbeeld aan het gebruik van voice in de auto of op je telefoon. 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 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 met toepassingsopdrachten en toetsen. Van de toetsen wordt je voortgang bijgehouden en deze voortgang zal zowel door jou als je docent te bekijken zijn. Veel succes!
    Leerniveau
    HAVO 4; VWO 6; HAVO 5; VWO 4; VWO 5;
    Leerinhoud en doelen
    Informatica;
    Eindgebruiker
    leerling/student
    Moeilijkheidsgraad
    gemiddeld
    Trefwoorden
    arrangeerbaar, enigma-gebruikersinterfaces, gebruikersinterface, gebruiksvriendelijkheid, hv456, informatica, interfaces, kerndeel, ontwerpen, stercollectie

  • Downloaden

    Het volledige arrangement is in de onderstaande formaten te downloaden.

    Metadata

    LTI

    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.

    Voor developers

    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.

  • Gebruik
    Weergave
  • Wikiwijs is een dienst van