NMBS Mobiele Website Information Architecture

INFORMATION

ARCHITECTURE

“SMS Ticket”

Jeroen Vanhaeverbeke, Wouter De Schuyter, Bastiaan Andriessen, Kevin Liekens & Lander Vervaeke

Analyse www.m.nmbs.be ................................................................................................. 1

1. Groepsleden & Verdeling ................................................................................................ 1

1.1 Groepsleden .............................................................................................................................. 1

1.2 Verdeling werk ........................................................................................................................ 1

2. Functional specifications ................................................................................................ 2

3. Content requirements ...................................................................................................... 3

Stap 1 ........................................................................................................................................................... 3

Stap 2 ........................................................................................................................................................... 3

Stap 3 ........................................................................................................................................................... 3

Stap 4 ........................................................................................................................................................... 4

Stap 5 ........................................................................................................................................................... 4

Stap 6 ........................................................................................................................................................... 4

Stap 7 ........................................................................................................................................................... 5

Stap 8 ........................................................................................................................................................... 5

Stap 9 ........................................................................................................................................................... 5

Stap 10 ........................................................................................................................................................ 5

Stap 11 ........................................................................................................................................................ 5

Stap 12 ........................................................................................................................................................ 6

Stap 13 ........................................................................................................................................................ 6

4. Structuur ............................................................................................................................... 7

4.1 Oude structuur ........................................................................................................................ 7

4.2 Nieuwe structuur ................................................................................................................ 13

5. Interactieflow ....................................................................................................................17

6. Wireframes .........................................................................................................................18

Scherm 1 ................................................................................................................................................. 18

Scherm 2 ................................................................................................................................................. 19

Scherm 3 ................................................................................................................................................. 20

Scherm 4 ................................................................................................................................................. 21

Scherm 5 ................................................................................................................................................. 22

Scherm 6 ................................................................................................................................................. 23

Scherm 7 ................................................................................................................................................. 24

Scherm 8 ................................................................................................................................................. 25

Scherm 9 ................................................................................................................................................. 26

Scherm 10 ............................................................................................................................................... 27

Scherm 11 ............................................................................................................................................... 28

Scherm 12 ............................................................................................................................................... 29

Information Architecture 1

Analyse www.m.nmbs.be

1. Groepsleden & Verdeling

1.1 Groepsleden

• Jeroen Vanhaeverbeke • Wouter De Schuyter • Bastiaan Andriessen • Kevin Liekens • Lander Vervaeke

1.2 Verdeling werk

• Functional specifications o Bastiaan Andriessen (Niks ontvangen) o Lander Vervaeke (Niks ontvangen) o Wouter De Schuyter (Inhoud die er is)

• Content requirements o Jeroen Vanhaeverbeke (Volledig alleen gedaan) o Kevin Liekens (Niks ontvangen)

• Structuur o Wouter De Schuyter (Grote delen in les samen uitgewerkt)

• Interactieflow o Wouter De Schuyter

• Wireframes o Wouter De Schuyter (Grote delen in les samen uitgewerkt)

• Informatie in dossier verwerken o Wouter De Schuyter


2. Functional specifications

De functionaliteiten of mogelijkheden van de applicatie/website vallen onder te verdelen in een aantal grote processen en sub-processen.

• Registratie o Activatie o Inloggen

• Bestellen ticket • Betalen ticket

De hoofdbedoeling van de applicatie/website is dus om omzet te generen en mensen hun ticket te laten kopen. Doordat registratie verplicht is voor het kopen van een ticket strijkt de NMBS ook nog eens hopen aan persoonlijke informatie over zijn klanten op die gebruikt kan worden om ze te contacteren ivm acties, promoties, reclame en misschien zelf verkocht kan worden aan derden sinds dat er nergens aangeven is dat dit niet zal gebeuren.

Onrechtstreeks kan je dus ook zeggen dat een doel van de applicatie is om informatie over klanten te verzamelen.


3. Content requirements

In dit onderdeel stellen we onszelf de vraag welke content (inhoud) elementen er moeten aanwezig zijn om aan de voorwaarden van de gebruiker te voldoen, of tegemoet te komen.

Concreet, voor deze opdracht onderzoeken we de content requirements op de mobiele website van de NMBS (m.nmbs.be). De basisdoelstelling van de NMBS klinkt als muziek in de oren: de treinreiziger moet in een zo kort mogelijke tijd zijn treinticket weten te bemachtigen. Hiervoor zullen echter heel wat zaken hand in hand moeten gaan en zijn de content requirements niet onbelangrijk. In wat volgt doorlopen we het hele proces, van het registreren tot op het punt waar we het ticket zullen moeten betalen. Onderweg worden punten die vatbaar zijn voor verbetering aangehaald en een mogelijke oplossing aangeboden.

Stap 1

We vangen onze zoektocht aan op de hoofdwebsite van de NMBS (www.nmbs.be). Meteen zien we zes schermen op de rechterzijde die ons om aandacht vragen. Wanneer we aandachtig kijken, bevindt ook het menu dat ons toegang zou moeten bieden tot de mobiele website zich ertussen. We klikken dan ook op de knop 'meer', om geen tijd te verliezen.

Stap 2

Eenmaal aangekomen stoten we echter op een scherm met behoorlijk wat informatie, terwijl de gebruiker verwacht op de mobiele website terecht te komen. Na het filteren van de info valt ons op hoe we toch ons beoogde doel kunnen bereiken. Spijtig genoeg is dit niet in de vorm van een hyperlink. We zullen ons dus moeten verplaatsen aan de hand van een weinig efficiënte 'copy-paste' methode. Algemeen bekeken bevat dit scherm teveel informatie waarnaar de gebruiker niet op zoek is op dit moment van de aankoopfase. Zowel boven- als onderaan krijgen we overbodige info. In deze fase heeft de gebruiker geen interesse in het 'waarom' aspect van de mobiele website , noch in de gebruikersvoorwaarden.

Stap 3

Bij stap 3 in ons proces wacht ons meteen een keuzelijst. Een duidelijke hiërarchie zou hier welkom zijn aangezien de meeste gebruikers komen om een ticket te kopen via hun mobiel. Een optie zoals 'in de kijker' staat hier niet op zijn plaats. Dit menu item draagt uiteindelijk niets meer bij dan een


overbodige keuze die de gebruiker moet maken. Ook zal er verwarring ontstaan bij de menu items 'deur-tot-deur' (routeplanner) en de standaard routeplanner van de NMBS. Welke moet de gebruiker kiezen? Hierin zou men dus meer moeten begeleid worden, eventueel aan de hand van een 'meer informatie' icoon. Wij kiezen voor 'koop je biljet'.

Stap 4

We komen aan bij het inlogscherm dat op zich weinig informatie vraagt. Er is enkel een keuze om in te loggen (aan de hand van een gebruikersnaam en wachtwoord) of om je te registreren als nieuwe gebruiker. De vraag of we onze gebruikersnaam en/of wachtwoord zijn vergeten wordt ons helaas niet gesteld. Verder is er op dit scherm weinig aan te merken. Er wordt niet veel gevraagd van de gebruiker en zorgt in dit geval voor weinig problemen. Kiezen voor 'nieuwe gebruiker' stelt ons in staat om het hele proces te analyseren en dit doen we dus ook.

Stap 5

Opnieuw volgt een formulier die naar onze identiteit vraagt. Weinig problemen bieden zich aan. Indien er toch iets mis gaat, kan de gebruiker rekenen op een stevige user-feedback. Een punt van kritiek is dat de knop 'volgende' te dicht bij de knop 'home' staat, waardoor de gebruiker bij een verkeerde klik met de vinger zijn reeds ingevulde informatie dreigt te verliezen. Een handige oplossing is de knop 'volgende' aan de rechterzijde te plaatsen of om meer ruimte te voorzien tussen beide knoppen.

Stap 6

Meteen wordt de informatie omtrent de woonplaats verwerkt en worden mogelijk straatnamen gegenereerd. We moeten dus enkel nog een huisnummer en/of bus in te vullen. Vervolgens zijn er nog drie optionele vragen die standaard zijn uitgevinkt. De gebruiker hoeft hier dus geen rekening mee te houden indien zij/hij geen interesse of tijd heeft. Eenzelfde kritiek als bij scherm 5, de knop 'bewaren' staat te dicht bij de knop 'home'. Hierdoor dreigt de gebruiker de reeds ingevulde data te verliezen. Dit probleem kan op dezelfde manier worden opgelost zoals in stap 5 reeds beschreven staat.


Stap 7

We komen terug op het inlogscherm van NMBS. Geen verdere informatie wordt ons gegeven, dus de meeste gebruikers zullen nu voor de eerste maal hun inloggegevens gaan uittesten. Dit zal uiteraard nog niet werken. Handiger zou zijn moest er bovenaan het inlogscherm een feedback verschijnen met de boodschap: 'Er werd een activeringsmail verstuurd naar het door u ingevulde e-mailadres'. Op die manier verliest de gebruiker noch zijn kostbare tijd, noch zijn geduld.

Stap 8

In onze mailbox vinden we inderdaad een mail terug afkomstig van NMBS, met de vraag om ons account te activeren. We klikken op de link en krijgen een scherm te zien met de boodschap: 'Dankjewel om je inschrijving te bevestigen'. Je hebt nu toegang tot 'My NMBS'. Handiger zou zijn mocht de link ons rechtstreeks doorsturen naar het inlogscherm en we daar de bovenstaande feedback zouden terugvinden.

Stap 9

Na nog een klik op de link komen we op het inlogscherm terecht, klaar om ons ticket te bestellen. Zie kritiek stap 4.

Stap 10

Aangekomen in het eigenlijke aankoopproces kunnen we onmiddellijk ons start- en eindpunt ingeven en de gewenste datum van de reis. Twee handige radio buttons, die standaard op de goedkoopste waarden zijn ingesteld, bieden ons een keuze tussen heen- en terugreis en een reis in eerste of tweede klasse. De gebruiker kan ook een reis toevoegen aan haar/zijn favorieten of terugblikken naar een van de vorige aankopen. Verwarring kan ontstaan bij de knop 'volgende/vorige'. De meeste mensen zijn gewoon om standaard rechts te klikken om zich naar een volgende stap te begeven.

Stap 11

Alle ingegeven info uit het vorige scherm wordt gebundeld en in een korte samenvatting geplaatst in dit scherm. Bij eventuele fouten kan de gebruiker de gegevens weer aanpassen door een stap terug te gaan. We krijgen een tabel te zien met de mogelijke tickets voor ons traject. Een maximum van zes reizigers is toegelaten voor één mobiele bestelling. Hierbij was een keuzelijst (drop-down box) handiger geweest dan een input veld, dat overigens nog moet feedback geven bij een verkeerd invullen door de gebruiker. Een gsm nr wordt automatisch gegenereerd vanuit de registratie, net zoals de geboortedatum.


Stap 12

Een volledig overzicht van het aankoopproces wordt aan de gebruiker voorgesteld, van het te betalen ticket tot welke klasse de gebruiker heeft gekozen. Op dit scherm is het van belang om de algemene gebruikersvoorwaarden door te nemen (en dus niet in stap 2) en te gaan accepteren indien akkoord. We krijgen ook de keuze om een traject te gaan bewaren, om ons tijdens een volgende aankoop tijd te besparen. We accepteren en gaan naar de volgende stap.

Stap 13

Aangekomen bij de betaalmogelijkheden rest ons enkel nog een keuze die de betaalwijze zal bepalen. Een klein aanbod zal hier wellicht voor een knelpunt in de mobiele applicatie zorgen.

De mobiele applicatie scoort naar onze norm behoorlijk goed. Door het aanpassen van kleine zaken kan het systeem worden geoptimaliseerd en gebruiksvriendelijker worden voor het publiek. De registratie kost de gebruiker redelijk wat tijd, maar eenmaal deze fase achter de rug is, kan men trajecten gaan bewaren naar hartenlust. Zo verlopen de volgende aankopen in een minimum van tijd en met een minimum aan stress, waardoor de gebruiker gedurende zijn reis vooral kan genieten.


4. Structuur

Hier brengen we de oude en nieuwe structuur in kaart en geven we per pagina een korte beschrijving met de eventuele negatieve en positieve punten.

We zijn er in geslaagd de nieuwe structuur tot 2/3 van de oude structuur in lengte te brengen en hier en daar dingen te vereenvoudigen en verbeteren.

4.1 Oude structuur

Begin (desktop) site. Knop voor SMS biljet is groot genoeg voor een Mobiel touch toestel.

Slechte en overbodige pagina. De link naar de mobiele site is zelf geen klikbare link en is met moeite zichtbaar een laptop/desktop.


Begin pagina mobiele website.

Inlog pagina na klikken “koop biljet”. Links staan heel dicht op elkaar.

Registratie formulier deel 1.

Registratie formulier deel 2.


Error op deel 2 die veroorzaakt werd in deel 1 -> onduidelijk.

Na registratie zonder enige feedback terug op inlogpagina.

Poging tot inloggen: hier ontdek je dat je per email moet activeren.

Activatie email met activatie link.


Desktop website na klikken activatie link.

Inlog pagina op desktop website na klikken terug keren.

Ingelogd maar niet terug naar de mobiele website doorgestuurd.

Pagina na manueel terug gekeerd te zijn en ingelogd te hebben.


Optionele keuze van het station.

Keuze van het type ticket. Tekstveld voor aantal is onhandig.

Samenvatting/overzicht van de bestelling.

De (beperkte) betaalmogelijkheden na het aanvaarden van de A.V.


Overbodig doorstuurscherm dat je doorstuurt naar doorstuurscherm.

Het 2de optionele doorstuurscherm dat je doorstuurt naar de eigenlijke betaalpagina.

“Ingewikkeld” en druk betaal form.


4.2 Nieuwe structuur

Begin (desktop) site laten zoals die is.

Direct en automatisch doorgestuurd naar een mobiele versie van de website met een verkorte versie van de inhoud. Een eventuele uitgebreidere versie hiervan kan met een link toegevoegd worden aan scherm 3.


Begin pagina mobiele website (met eventuele extra linkgs zie vorige stap).

Inlog pagina na klikken “koop biljet”. Meer spacing tussen de links.

Registratie formulier deel 1. Errors van dit formulier komen hier.

Registratie formulier deel 2. Errors van dit formulier komen hier.


Feedback registratie (+ errors) komt bovenaan pagina (boven formulier).

Na klikken activatie link terug op vorige pagina met feedback.

Pagina na inloggen om biljet te bestellen.

Optionele keuze van het station.


Keuze van het type ticket. Tekstveld kan vervangen worden door dropdown.

Samenvatting/overzicht van de bestelling.

Eventueel meer en toegankelijkere betaalmogelijkheden.

Vereenvoudigd betaalscherm.


5. Interactieflow


6. Wireframes

Scherm 1

De eerste desktop website zouden we houden zoals die is. De knoppen zijn groot genoeg voor mobiele (touch) devices en duidelijk.

Wanneer je op SMS Biljet klikt kom je niet op de normaal gezien 2de pagina met benodigdheden en extra informatie maar op een vereenvoudigde mobiele versie daarvan.

Extra (overbodige) informatie die weggelaten kan ook op de 3de pagina gevonden worden met een link naar een externe pagina.


Scherm 2

De verkorte inhoud van de pagina waar de beruchte niet klikbare link naar de mobiele website normaal gezien op staat.

Op deze pagina staan enkel de essentie van op de desktop versie. Later kan in men (in de volgende pagina) eventueel de extra info link aanklikken met de andere info van die pagina.

Men moet de content eigenlijk eerst doorlezen en scrollen voor men op ga door kan klikken omdat de knop onderaan de pagina staat.


Scherm 3

Pagina met de link om het ticket te kopenm de disclaimer (voorwaarden), benodigdheden (vorige pagina) en nog een aantal andere relevante links.


Scherm 4

Inlog scherm. Dit scherm komt een aantal keer terug. Het wordt zowel gebruikt voor de feedback van het formulier zelf, deze komt nu boven het formulier en niet op een nieuwe pagina (account nog niet geactiveerd).

De feedback van de registratie pagina zal hier ook op komen na een succesvolle registratie (voorheen geen feedback).

Als men op de activatie link klikt zal men ook op deze pagina komen en hier feedback krijgen zodat men meteen kan inloggen op de mobiele website en niet eerst opnieuw opzoek moet gaan naar de mobiele website en de desktop website afsluiten.

Ook kan men wachtwoord gegevens laten opsturen of registreren via de links die naar een externe pagina zullen linken.


Scherm 5

Het registratie formulier. Feedback zal ook bovenaan de pagina komen ipv pas op de pagina er na wanneer je probeert door te gaan (email bestaat al).


Scherm 6

Deel 2 van het registratie formulier, kan eventueel aan deel 1 geplakt worden dat je 1 groot registratie formulier hebt met een scrollbar.


Scherm 7

Eerste pagina na inloggen om een ticket te kopen met belangrijkste opties van dat ticket. Bovenaan is er een bar met de naam van de ingelogde gebruiker en een uitlog knop. Onderaan heb je een knop volgende en vorige en deze layout wordt door de rest van de applicatie/website doorgetrokken.

Feedback komt bovenaan de pagina.


Scherm 8

Dit is een optioneel scherm. Wanneer er meerdere stationnen mogelijk zijn kan men het correcte station uit een dropdown list selecteren ipv een lijst.


Scherm 9

Klein overzicht van het ticket + welk soort ticket en het aantal dat je er van wil.

Het tekstveld in de lijst is vervangen door een dropdown lijst. Omdat je dan verplicht bent een nummer uit de lijst te selecteren zal het niet mogelijk zijn meer dan 6 in te geven en hebben we deze waarschuwing dan ook verwijderd.


Scherm 10

Nog een finaal overzicht van de bestelling.


Scherm 11

Betalingsmogelijkheden. Hier waren er te weinig en degene die beschikbaar waren kon je enkel gebruiken indien je 18 en ouder was en over een credit card beschikt wat zeker niet iedereen heeft.


Scherm 12

Vereenvoudigd betaalscherm bv met paypal enkel wachtwoord en naam ingeven en op betalen klikken.

Bij een credit card kan dit ook vereenvoudigd worden door enkel het kaartnummer en beveiligings code te vragen zonder andere, verwarrende, (rand)informatie.

NMBS Mobiele Website Information Architecture

Documents

Transcript of NMBS Mobiele Website Information Architecture