René Ameling Cursistennummer: 112488765 Inzendcode: 002Z7 Opgave 1 De randvoorwaarden voor het systeem zijn al duidelijk gesteld door de luchtvaartmaatschappij. De informatieverzameling zal zich dus moeten richten op hoe de eindgebruiker het meest intuïtief met het systeem zal kunnen werken. De methoden hiervoor zijn: 1. Kaartsorteren Dit biedt de mogelijkheid de workflow van het nieuwe systeem te bepalen. Door kaarten te geven met de beoogde functionaliteiten geef je de deelnemer de kans zijn eigen keuzes te maken zonder vooroordeel. Dit geeft inzicht in hoe mensen met de aangeboden informatie omgaan. Zo kun je al in de beginfase tegen lage kosten veel nuttige informatie verzamelen omtrent de gewenste functionaliteiten van het systeem. Het doel is te achterhalen of de aangeboden functionaliteiten volstaan of dat deze verder moeten worden uitgebreid of juist verkleind. Hier zijn testers en deelnemers bij betrokken. 2. Gebruikerstesten Naar aanleiding van de resultaten van het kaartsorteren kan een prototype van het systeem worden gemaakt. In deze fase kan worden volstaan met een papieren prototype van het systeem. Dit geeft de eindgebruiker een indruk van de plaatsing van elementen, indeling van het scherm en schermflow. Deze methode pas prima in een iteratief ontwerpproces omdat deze in een latere fase herhaald kan worden. Zo kan in een volgende fase een interactieve Powerpoint presentatie worden gemaakt zodat de eindgebruiker een nog beter gevoel krijgt van schermindeling, flow en interactie. Het doel is te achterhalen of de user interface aansluit bij de verwachtingen van de deelnemer. Hier zijn testers, observeerders en deelnemers bij betrokken. 3. Persona’s De doelgroep die incheckt bij een luchtvaartmaatschappij is te groot en te divers om door middel van interviews of surveys in kaart te brengen. De opdrachtgever kan het ontwerpteam voorzien van de nodige NAW en demografische gegevens om de persona’s op te baseren. Zo heeft het ontwerpteam duidelijk voor ogen voor wie er ontworpen wordt. Hier is het ontwerpteam en de opdrachtgever bij betrokken.
Opgave 2
Opgave 3 Het staat niet aangegeven in de opgave of het systeem meertalig moet zijn maar gezien de internationale omgeving ga ik uit van Engels als voertaal. 1. De gebruiker drukt op het scherm op de knop ‘Check in’. 2. Het systeem geeft het beginscherm weer met de benodigde tekstvelden. 3. De gebruiker raakt het tekstveld aan. 4. Het systeem geeft een contextgevoelig toetsenbord weer. 5. De gebruiker herhaalt stap 3 en voert naam, bevestigingsnummer en vluchtnummer in. 6. De gebruiker drukt op de knop ‘Continue’. 7. Het systeem controleert de ingevoerde gegevens. 8. Het systeem geeft een nieuw scherm weer met de bevestigde gegevens en de namen van de passagier(s) die ingecheckt moeten worden. 9. De gebruiker gebruikt de checkboxes om de relevante passagiers aan te vinken en in te checken. 10. De gebruiker drukt op de knop ‘Continue’. 11. Het systeem geeft een nieuw scherm weer met een plattegrond van het vliegtuig en de toegewezen stoelen. 12. De gebruiker accepteert de stoelen en drukt op ‘Continue’. 13. Het systeem opent een nieuw scherm met een overzicht van de gemaakte keuzes. 14. De gebruiker controleert de gegevens en drukt op de knop ‘Print boarding pass’. 15. Het systeem opent een scherm met de mededeling ‘Now printing’. 16. Na het printen opent een nieuw scherm met een persoonlijke boodschap van de
luchtvaartmaatschappij bijvoorbeeld “<
> wishes you an enjoyable flight”.
Alternatieve paden 7. Als de ingevoerde gegevens fouten bevatten: 7.1 Het systeem geeft een foutmelding 7.2 Het systeem gaat terug naar stap 3 12. De gebruiker wenst andere stoelen: 12.1 Het systeem geeft door kleurcodes de beschikbaarheid van de stoelen aan ( rood=bezet groen=vrij blauw=geselecteerd). 12.2 De gebruiker selecteert de gewenste stoelen door deze aan te raken op het scherm. 12.3 De gebruiker herhaalt stap 12. 14. De gebruiker is het niet eens met de ingevoerde gegevens: 14.1 De gebruiker drukt op de knop ‘Change data’ bij de gegevens die gewijzigd dienen te worden. 14.2 Het systeem gaat terug naar de relevante stap. 14.3 De gebruiker bevestigt de veranderde gegevens. 14.4 Het systeem gaat terug naar stap 13.
Opgave 4 Ten eerste ben ik een groot voorstander van het KISS (Keep it simple, stupid) principe en de tien geboden van Jacob Nielsen. Vooral het minimalistisch ontwerp, de kunst van het weglaten, spreekt mij aan. Hoe meer keuzes, hoe groter de kans dat er fouten worden gemaakt. Mijn ontwerp is dan ook minimalistisch om de kans op fouten zo ver mogelijk te verkleinen. Ik ben uitgegaan van een touchscreen als hardware waar het systeem op draait. In het hoofdscherm linksboven het logo van de luchtvaartmaatschappij, een conventie in webtoepassingen. Dit helpt tevens de gebruiker te herkennen dat hij zijn gegevens bij de juiste maatschappij aan het invoeren is. De navigatiebalk in het midden geeft de gebruiker aan hoeveel velden hij nog kan verwachten en
waar hij zich nu bevindt. De pijlpunten geven een voorwaartse beweging aan wat de indruk versterkt dat een gebruiker verder moet. De invoervelden zijn gegroepeerd volgens de Gestalt principes. Doordat ze in nabijheid van elkaar staan, geeft dit de gebruiker aan dat deze gegevens tot één groep/soort behoren. Ik heb er voor gekozen om de achternaam, voorletter en geslacht in te laten vullen. Samen met het vluchtnummer en het bevestigingsnummer zijn dit voldoende variabelen voor het systeem om een unieke uitkomst te genereren. Het vluchtnummer is ingedeeld in twee groepen: het eerste gedeelte voor de identificatiecode van de luchtvaartmaatschappij, het tweede gedeelte voor het vluchtnummer. Op de geprinte bevestiging staat het vluchtnummer ook zo gegroepeerd, dit creëert herkenning. Het eerste en tweede gedeelte hebben ook voldoende afstand zodat het duidelijk is dat het vluchtnummer uit twee delen bestaat. Daarnaast lijkt het ook op de codering van een acceptgiro, wellicht ook weer een stukje herkenning. Rechts van de invoervelden is voldoende ruimte gelaten voor eventuele foutmeldingen van het systeem die de gebruiker visuele clous geven over verkeerd ingevoerde gegevens. De grote knop onderin laat weinig aan de verbeelding over. Deze knop moet ingedrukt worden voordat men verder kan. Het virtuele toetsenbord is contextgevoelig. Zo geeft hij bij het invullen van de naam alleen het alfabet weer en bij het tweede gedeelte van het vluchtnummer alleen cijfers. Dit verkleint de kans op fouten. Ook verdwijnt het toetsenbord als het niet nodig is. Dit geeft de gebruiker een rustig en overzichtelijk beeld.
Opgave 5 User requirements Functioneel • Het systeem moet touchscreen ondersteunen. • Er moet invoer van gegevens mogelijk zijn. • De gebruikte taal moet Engels zijn. • Het systeem moet foutmeldingen kunnen geven om de gebruiker te assisteren. • Het systeem moet de gebruiker de mogelijkheid bieden gegevens te wijzigen. • Het moet een boarding pass kunnen printen. Informationeel Vanuit de gebruiker is het volgende aan informatie vereist: • Achternaam, voorletter, keuze Mr./Mrs., vluchtnummer en bevestigingsnummer. • Keuze voor de in te checken passagiers. • Keuze van de stoelen. Het systeem geeft op basis van de input de volgende informatie terug: • Foutmeldingen bij het verkeerd invullen van informatie. • Hulpteksten voor het juist invullen van de gegevens. Fysiek • Werkstations met een touchscreen. • Server waar de software op kan draaien. • Bekabeling voor stroom en data. Beperkingen • De software moet draaien op Windows Server 2012. • De user interface moet door internationale gebruikers kunnen worden begrepen. • De schermresolutie bedraagt 1024 x 768 pixels. • De maximale ontwikkelingstijd bedraagt 3 maanden. Conflicten De ontwikkelaar verplicht zich periodiek onderhoud te plegen aan de applicatie. De ontwikkelaar is niet verantwoordelijk voor wijzigingen aan hardware en besturingssystemen. Wijzigingen aan de applicatie voortvloeiend uit wijzigingen aan hardware en besturingssystemen komen voor rekening van de opdrachtgever.
Opgave 6 De wireframes zijn te vinden in het bijgesloten PDF bestand. Ieder wireframe heeft een resolutie van 1024 x 768 pixels. Ik heb bij dit ontwerp rekening gehouden met de tien geboden van Nielsen. Terugkerende elementen komen daarom altijd op dezelfde plek met dezelfde vormgeving terug. Herkennen gaat tenslotte boven onthouden! Verder is het een esthetisch en minimalistisch design om fouten van de gebruiker te voorkomen. Ik heb dan ook bewust niet gekozen voor dropdown menu’s die de interface onnodig ingewikkeld maken. Ik heb met het ontwerp altijd in het achterhoofd gehouden dat het moet functioneren in een internationale omgeving met gebruikers van verschillende achtergronden en nationaliteiten. Daarom voldoet het ontwerp aan veel van de conventies van webdesign om ongeacht nationaliteit herkenning te creëren. Startscherm Het startscherm moet ondubbelzinnig aangeven waar het toe dient. Een gebruiker moet in één oogopslag kunnen zien of de terminal zijn informatiebehoefte kan bevredigen. Daarom hier alleen het logo van de luchtvaartmaatschappij en een grote ‘check in’ knop. Het gebrek aan andere WIMP’s zorgt er voor dat een gebruiker niet probeert andere handelingen dan inchecken met de terminal te verrichten. Scherm 2 Hier kan de gebruiker ‘inloggen’ in het systeem aan de hand van de, aan de gebruiker bekende, gegevens. Ik heb hier niet gekozen voor teksthints in de invoervelden omdat de informatie die ingevuld dient te worden voor zich spreekt. Het is het overnemen van geprinte gegevens op het scherm. De navigatiebalk keert terug op ieder scherm. Dit geeft de gebruiker inzicht waar hij zich bevindt in de toepassing. De segmenten verschillen van kleur zodat de gebruiker weet waar hij is. De segmenten zijn klikbaar zodat de gebruiker altijd snel naar een vorig of volgend veld kan. De invoervelden reageren door kleurverandering op de aanraking van de gebruiker zodat deze weet welk veld wordt gemanipuleerd. Ook merkt men dit door het verschijnen van het toetsenbord. Naast de invoervelden is ruimte gelaten voor meldingen bij foute invoer. De invoervelden van het vluchtnummer zijn zodanig gegroepeerd dat ze bestaan uit twee sets: één voor de identificatiecode van de luchtvaartmaatschappij en één voor het vluchtnummer. Onderin het scherm een contextgevoelig toetsenbord voor de invoer van gegevens. Bij het vluchtnummer bijvoorbeeld verschijnt alleen het numerieke gedeelte. Dit voorkomt ook weer foute invoer. Met de knop ‘continue’ gaat de gebruiker verder.
Scherm 3 Op basis van de ingevoerde gegevens produceert het systeem de namen van die passagiers die ingecheckt kunnen worden. De gebruiker kan deze namen aanvinken met behulp van checkboxes. Met de knop ‘continue’ gaat de gebruiker verder. Scherm 4 Dit scherm laat een legenda en een plattegrond van het vliegtuig zien. Hier kan de gebruiker zijn stoelen veranderen of bevestigen. Door kleurcodes is het voor de gebruiker duidelijk welke stoelen toegewezen, nog vrij of bezet zijn. Met de scrollpijlen kan de gebruiker door de plattegrond heen scrollen. Dit geeft de mogelijkheid een duidelijk beeld weer te geven op een relatief klein scherm. Gebruikers moeten makkelijk met hun vingers de stoelen kunnen kiezen dus de plattegrond moet voldoende groot zijn. De ‘stoelen’ wijzigen van kleur bij aanraking. Bij aanraking van bezette stoelen gebeurt er niets. Met de knop ‘continue’ gaat de gebruiker verder. Scherm 5 Hier een overzicht van de ingevoerde gegevens. Dit geeft de gebruiker de kans alles nog eens goed na te kijken voordat de instapkaart(en) worden geprint. Dit scherm biedt de gebruiker de mogelijkheid de gegevens aan te passen met de ‘change data’ links. De gebruiker bevestigt de gegevens door het indrukken van de ‘Print boarding pass’. Scherm 6 Dit scherm geeft de tekst ‘Now printing’ weer met bewegende puntjes om aan te geven dat het systeem aan het printen is. De tekst en de beweging geeft aan dat het systeem bezig is met printen.
LOGO
Startscherm
logo van de luchtvaartmaatschappij
CHECK IN button voor inchecken, rollover effect bij indrukken
LOGO
Input
Passengers
Choose seats
Overview
Print
navigatiebalk die aangeeft waar de gebruiker is. Segmenten zijn klikbaar.
ruimte voor foutmeldingen
Last name First letter radio buttons voor keuze
Mr
Mrs
Flight number
invoervelden in 2 groepen voor identificatiecode en vluchtnummer
Confirmation number
! Number unknown. Please enter again.
Continue
Contextgevoelig QWERTY toetsenbord
rollover effect om interactie aan te geven
LOGO
Input
Passengers
Choose seats
Overview
Print
Passengers to check in checkboxes voor aanvinken passagiers
Ameling, R. Volkers, O.
rollover effect om interactie aan te geven
Continue
LOGO
Input
Passengers your seats
Choose seats vacant
Overview
Print legenda
occupied
scrollpijlen om door de plattegrond heen te kunnen scrollen
1
A
B
C
D
E
F
2 3
plattegrond van het vliegtuig met de stoelen, aanraken om te kiezen
4 5 6
Continue
rollover effect om interactie aan te geven
LOGO
overzicht van de ingevoerde gegevens
Input
Passengers
Choose seats
Overview
Print rollover effect om interactie aan te geven
Last name: Ameling
Change data
First letter: R.
Change data
Flight number: KL 1234
Change data
Confirmation number: Xv023Bg564
Change data
Passengers to check in: 2
Change data
Ameling, R. Volkers, O. Seats chosen: A3, A4
Change data
rollover effect om interactie aan te geven
Print boarding pass
LOGO
Input
Passengers
Choose seats
Overview
Now printing........
Print
