7/30/2019 Group 14 Pro to Typing
1/78
1
INTRODUCTION TO HCL: 06-21253
Group No: 14
Lecturer: Robert Hendley
Due date: 17 Mar 2013
Group Members:
Zhenlei GE , 1273239
Abduallah AL-TAYWE, 1304810Chenxi LUO , 1302611
7/30/2019 Group 14 Pro to Typing
2/78
2
Contents
1. Abstract ................................................................................................................................. 3
2. Introduction ............................................................................................................................ 3
3. Definition of the problem address.......................................................................................... 3
4. Review of related work ....................................................................................................... 6
5. Analysis of user requirements . ........................................................................................... 16
6. First generation prototypes .................................................................................................. 29
7. Second generation prototype............................................................................................... 41
8 Summary and recommendation ............................................................................................ 68
9 Appendix ............................................................................................................................... 69
10 Referencing ......................................................................................................................... 77
7/30/2019 Group 14 Pro to Typing
3/78
3
1. Abstract
Train line management plays an important role in UK s transportation. An online booking
system for train is essential in the entire system. The whole train line system is constituted by
several train companies and each company has their own website. However, there is some
problems existing in the integrated website. For example the train website National Rail or
thetrainline . The project is to revise the existing online train booking system and
generating two generation prototypes trying satisfy the requirements of users and avoid the
problem in the existing system. Besides, the project use three methods to evaluate prototypes,
including Nielsens heuristic evaluation, evaluation against persona and evaluation against
users.
2. Introduction
The project uses the methods presented in Human-Computer Interaction to analyse the
existing online train booking system and generate new prototypes which is trying to improve
the previous systems. Through systematical design and evaluation, the new prototype could
meet the users requirement better.
Human-Computer Interaction(HCI) studies the interaction problems that existed between
human beings and computers. Two different objects have their own features. Match them
properly will increase humans efficiency and experience.
The evaluation methods in the HCI is unique. It contains Nielsens Heuristic evaluation,
evaluation against persona, empirical evaluation and etc. Those tools are powerful when they
are used in practice.
3. Definition of the problem address
7/30/2019 Group 14 Pro to Typing
4/78
4
3. 1. Definition of the system;
The system is an online booking system where client can book tickets for trains journeys. It is
designed to be used by a wide range of clients such as regular travellers, older user or form
people aboard. The system should accommodate all of there needs to leave them with a
positive experience of using the system so they keep coming back for more.
The system should also house information that clients may find useful in addition to booking
their tickets online such as live train timetable, details on hotel bookings, more details about
tickets types, etc... This information should be easily access to all users of the system and
show itself in places of relevant to the users, such as information on ticket type when the user
are deciding what tickets that they need.
The system should also be easily used by all users and should be easy to navigate through, so
in other word all commands are simple so that any level of user will not have trouble using
the system and the system do not give the users too much information at once.
3.2. The definition of the problem;
Looking at existing online booking systems, like train or airline booking system it
highlighted that there were some problems in the existing systems on the market when
compared to the how the system should be defined. Theses problem may not affect all users
of the system , but they were still deemed important enough and they are as followed;
1) The system is not easily accessible for all possible types of client;
It should be accessible in different language as some users coming from outside the UK may
not speak English as their first language and more prone to making mistake or getting when
using the booking system.
There should be features to increase the text as some users may have poor sight or may like to
read in a bigger font. Normally most website have smaller font that may make it difficult toread.
7/30/2019 Group 14 Pro to Typing
5/78
5
Navigating through website should be easy and all the necessary information should be easy
to locate. Some e website have complex navigation system or too many unnecessary step
which can result in some user getting lost.
2) The system does not provide the appropriate information that users may when booking a
ticket.
There is irrelevant information shown such as ads on the booking page which can draws the
users attention away from the important and relevant information. This is especially bad for
users who may be distracted by this contents and miss very essential information. While it is
appreciated that ads are needed as a source of revenue for the website, it should be put in a
way so it doesn't draw attention away from important information,
Some relevant information is missing in some places such as ticket types. This is sometimes
the case when users are booking a ticket, but the ticket type is unknown. In the later stage of
the booking process, the issue may cause unnecessary confusion and wasted time spent if the
wrong type of ticket was selected.
3) The process of booking a train ticket is inefficient as it can contain repetitive steps or is
long process which makes it time consuming.
There are too many step when booking a ticket and some of them seem unnecessary such as
have to confirm the ticket twice.
The process of booking a ticket can be confusing as the stages in the booking process are
unclear at some time to the users. Therefore the steps in the booking process should be made
clear to users so they know where they are, for example if they are just on the stage of
choosing the time of the ticket the system should clearly state this.
Some parts of the booking process ask too much information from the users which can
confuse them to what information that they need to entre. For example which when asking for
the address of the user it has a lot of box to fill in and user may be confused to whether theyare necessary or not.
7/30/2019 Group 14 Pro to Typing
6/78
6
4) The design and layout of the website is not very user friendly to the users who may be
using the system. Therefore the target group of users is narrowed.
There too much on the screen, this can confuse the user. Information can be missed as some
users may not scroll down the screen as they may not realize there is more on the web page.
The layout of the system on the screen can sometimes pack too much on at once. This gives a
lot of information to the user all in one go and some may not be able to distinguish this
properly.
As it can be seen above there are 4 main problems that have been identified from websites,
even though they may have many smaller categories which relate to this problems. Therefore
the new system which will be designed will try to address and tackle these issues.
4. Review of related work
4.1 Review of existing systems
In this section is where existing system that are ready on the market that also try to address
the same general problem. This would be useful as it could help to when building the
prototype of this system.
4.1.1 - The Train Line - (http://www.thetrainline.com/)
The train line is a system that has been designed to address the same general problem for the
system that is being designed. This is a service where they provide a telephone and online
service to books tickets for trains that are running in the UK.
Firstly by starting off with the strengths of the system is that;
It provides users with quick access compared to other service such as the national rail, where
us provides the most important information to users in a simple and clear way and keep other
7/30/2019 Group 14 Pro to Typing
7/78
7
information such as advertisements to a minimum, so users access the website more quickly.
The enable users to be able to use the system more quickly and efficiently and reduces the
chance of the user becoming confused.
The website has a very clear layout in its design, where is has been designed to meet with the
user needs, such as providing options like live departures which keep the users up-to-date
with the latest information.
All information in the website is designed in a way so it fit on screen size, which makes the
website very tidy looking and able to resize itself to fit a range of screen sizes.
The website is seen to provide a range of useful , that enable users to be able to finish their
tasks. For example the function "station finder" that allows user to find train station using
Google maps without having to visit an external website. Another example would be the sub-
viewing calendar which is useful to users when they want to input the date without the need
for input from the calendar.
Now focusing on the website homepage the strength of it are;
The use of prefix for text fields From and to which provides convenience of searching
train station. In addition, it also contains abbreviation of each train station. This makes iteasier for user to use as they don't need to learn new terms to use the website.
The Station finder function provides the convenience for people who are unable to spell
station name. It works by invokes Google map to provide function of searching.
Quick click today and tomorrow. Using two buttons, user could switch between
tomorrow and today. There is also two buttons called same day and next for return
tickets. The advantage of this limitation is to prevent users from choosing a wrong choice.
Calendar, on websites provides a calendar for two months. The design is due to the concern
that user may want to have a one month trip. Moreover the text field for choosing date is
editable. The combination between the calendar and the quick click increase the flexibility
for choosing date.
When a text field is selected, there is highlighted border around the component. This show
user where they will type.
Now focusing on the website train timetable the strength of it are:
7/30/2019 Group 14 Pro to Typing
8/78
8
The booking steps are shown clearly under the main menu, this show clearly to the users the
step to inform them of what they may expected to fill in.
Moving backwards are available using the back button, this enables easier use so the user
doesn't have to press the back button on the browser, which will not always show the
previous page.
A brief searching pop-up window is provided which enable users to search the train table
repeatedly and quickly. This is a useful feature as users can check train tables without having
to open another tab or windows in the browser and can use it as a quick reference.
The weakness of the website are as followed:
The colour coordinate is not matched perfectly. The contrast is not strong to emphasize the
major functions because the colour used on journey form is a little light. The login is also not
designed well.
The website did not order the tab key word. So that customers would find it inconvenient to
use keyboard to finish the operation.
there are overall 6 steps involved in one transaction: Journey details, train times, choose seats,
getting tickets, payment, confirmation. It can be seen the classification can be compressed.
For example choose seats and getting tickets could be merged together, confirmation may
may not be mentioned. If the designer apply the modification, it will leave the impression
that the booking steps is easy and short at the beginning. In practice, most of users only
concern the journey details, train times and payment, other settings can be use default.
Another disadvantage of the website is that clients need to have an account of that website if
clients want to buy a ticket from the website.
It seems that the booking system does not provide a short-distance ticket. For example,
from the University to Birmingham New Street. In fact, it is a one-station trip. Sometimes,
people need the information of short-distance trip information because tickets between big
stations are usually cheaper than tickets from small too big. The trade-off is that the
searching speed would increase to a certain extent.
7/30/2019 Group 14 Pro to Typing
9/78
9
A heavy proportion of room in the welcome page is occupied by cheap offer of train tickets
or hotel offer. The tab switching tech is used as well. There are great amount links involved
in the website. All these features make the website a little complicated. The layout and great
offer advertisement is distracting.
The train-time table layout is a bad design. the selection of tickets is vertically, which against
clients regular understanding. The clients may spent amount of time in understanding the way
of select a ticket.
There are a number of options available in the page. But some options may not be important
for all the clients. For example short-distance travelling insurance may not be important.
However, in the page, website designer give it a large panel.
4.1.2 - Rail Easy (http://www.raileasy.co.uk/)
Rail easy is an online system that has been designed to address the same general problem for
the system that is being designed. It is an internet retail booking engine where people who are
travelling can search for tickets that match their preferences for being cheap or flexible. It has
been designed in mind to make booking train tickets easier.
This website takes an approach of when users first go onto the website they can straight away
book the train ticket that they want by entering the details as seen in fig 1, without having to
waste time navigating through the website. The website also aims to provide users with
relevant information that is relevant to train travel and events and attractions that could in the
area that they are travelling to, this includes places to stay. The approaches they are trying to
take to cover a wide user base to people looking for places to visits, to users who want to
search for tickets quickly and easily.
This system has some strength to it which are as followed;
Holds a vast amount which can be useful for users looking for information related to train
travel, or places to visit while travelling, or places to stay. Therefore users who are using the
7/30/2019 Group 14 Pro to Typing
10/78
10
system have a wealth of information at their fingertips and don't have to browse onto other
websites to look for information saving them time and effort.
When typing in the train station has a system which predict what is going to be typed into it
and gives the user possible example, this is a useful feature for who want a train station in an
area but don't know the exact name of the train station. This is more useful easily for those
users who don't the exact name of the train station.
A easy system to use for searching for tickets, which has extra options as return and multiple
tickets and the choice of adding a rail card. This is very useful feature for users who want to
book multiple tickets at once without the needs of repeating the booking process many times.
Can easily access the related train timetable for the train users may want to travel on. This is
also very visible through the whole website and can be accessed at any time, allow a quick
and simple action to use the function without having to trail through many links.
A simple design of the website which does not go overboard with the design of the website,
such as with the colours used. The colour don't put off the users who are going to use it and
the website design is simple without any over the top functions such as flashing buttons or
pop ups.
Moving on from the advantages of the systems this systems has some weakness in it such as;
For first time users this website can be hard to navigate and find the information which needs
finding. This can be the case for more technology impaired users, or users not used to the
internet, this can give users a bad experience.
This website does not cover all the user bases such as:
Users visiting from different countries where reading English may prove difficult to them.
This is more important there is a lot of English text which don't use very simple words,
therefore a online translator may have trouble.
Some user may find it hard reading text that small, no option on the website to increase text
size. It is seen through the website it using small text and has poor spacing between
paragraphs of words which can make it very hard to read even for those who are fine readingthe small text.
7/30/2019 Group 14 Pro to Typing
11/78
11
Some users may have a lack of concentration and the flashing images on the website may put
them off. An example of this would be with the ads on the websites that would draw the user
attention as they were designed to, put as a consequence it draws from from maybe putting
the details right in when booking a ticket increasing a chance of a mistake, especially when
they are forgot what they were doing.
The older generation may find it hard to use and navigate when using. It seem they are more
bader at using website with more complex functions with the use of a guid and may get lost
quickly when navigating through out the website.
The choice of colours may be poor as some users may find it hard to read from, such as the
light blue and green. It was seen that they make it harder to notice the border between the
different links on the top of the website. This may lead to some users thinking they are the
link to the same page.
User looking where to what train to travel from, or information to their ravel might find it
hard to locate the needed information, time can be wasted on trying to navigate the website.
The website also contains a lot of text on some of the page making it harder to pick out the
important information. This may be more of a case with some user who cant be bothered to
sit down and read through a wall of text. They could be missing out on very essentialinformation.
Some important information is placed on the bottom of the webpage and some users may
miss this as they dont scroll down the page and there is nothing to indicate them of this
either. This could also be a sign of trying to fit too much information onto one page.
Someone buying a ticket just want to buy the ticket not spend their time sitting down a
scrolling down a website read what they may feel is not important.
Too much information on one page may put off some users, as it can confuse them.
4.1.3 - bahn (http://www.bahn.com/)
Bahn.com is an official online booking system of the German national railway company. It is
designed to book any rail ticket within the Germany as well as among the major cities inEurope. Users can also search for tickets and timetables which are operated by other train
7/30/2019 Group 14 Pro to Typing
12/78
12
companies such as EuroStar, TGV and Trenitalia. It has been designed to provide a pleasant
booking experience for different groups of users. All the information are well organized and
sufficient for user to search.
The homepage is divided into three columns and the booking panel is located at the left
column as most of the booking system does. And it has two tabs in the panel which are for
normal booking and saver fare. This savers option can save users time and money whereas
other websites usually put this function on the top menu bar or somewhere else. In Bahns
case, the navigation of the cheap ticket booking would be sensible for the user as it can be
easily found and searching without open a new page.
This system has some strengths as shown below:
All the frequently used option are list along the left column bar. (Information & tickets,
Connecting trains, Hotel & hire car, Mobility & the environment).
Two-mode ticket searching makes the booking more flexible. (Normal ticket filtered by
stations & time and Saver ticket filtered by price)
Default fold up toolbars which show the brief summary of every ticket list in the current
timetable, the detailed information will be displayed by click the down button to expand it.
(Detailed information include the specific route whether it changes at other stations, the time
arrived and departed from intermediate stop, the train company, the platform, the station map
and delay alarm)
The font size of the webpage can be increase by twice. The button is located at the top right
of the web page.
Useful additional booking information are listed on the right column.(Booking by phone,
video guided tour, membership login, Live Facebook Q&A)
Every major button, that brings the user to the next step or shows the important information,
has been highlighted in dark orange colour.
Multi-language option for every web page is user-friendly for the international traveller. (15different languages)
7/30/2019 Group 14 Pro to Typing
13/78
13
Apart from the advantages of the system, it also has some weakness as shown below:
Too many options for booking a ticket. Users may get confused by some options.
The colour of the menu bar is too bright for the eyes and eyes may get hurts for long time
watching.
The booking panel is not highlighted by changing the background from grey to darker colour.
Although it has the function to increase the text size, when it shows more detailed
information, the font size is small compared to other website.
Sometime too much information per web page such as the various ticket offers on the
homepage.
4.2 - Work addressing principles, methodologies,techniques
This section will look at research that address aspects such as principles, methodologies, etc..
that are relevant to the problems that have been addressed in section 3.1. Here will draw upon
the result of related research and generic guidelines and principles that can be used to look at
when address the problem.
Colour blending: This is important because colour can be used to keep the user attention and
even affect their mood. Colour can also make important text stand out for example using read
will catch the, but overdoing can cause a catastrophic effect. (Alan D. Janet F. Gregory D. A.,
Russell B.,2004)
Font: As it was found that people eyes can be sensitive to text font. Therefore using clear
font to represent important data such as ticket process is very important. The font of the text
should not be put in a way where it may cause a strain to the user eyes when reading it.(Alan
D. Janet F. Gregory D. A., Russell B.,2004)
7/30/2019 Group 14 Pro to Typing
14/78
14
The next few principles, methodologies are very important techniques in take into account as
they help the system to stand out from competitive rivals and make the user experience
positive as possible;
Control method: In order to keep the step with the modern technique, the website should
made some modification on the website. In fact, what devices that users usually use should be
researched. It is stated that there are altogether 84% of users use personal computer, 7% of
users use smartphone to connect the website and 8% of users use tablet to access the Internet
(Mariella Moon, 8 March 2013) In addition, the type of user controller needs to be studied as
well, such as the use of keyboard and touch screen. It is apparent that the role of touch screen
become important gradually.(Jason Yang, 28 December 2012) After researching the users'
way to connect the website, then it is able to design the better user interface. For example, the
technique of amplify the font and boundary that users usually click can help to make
accessing convenient. Because people sometimes use their mobile phone to check
information, mobile phone don't have a big screen relatively.
Attention constrain: Generally speaking, movement in the screen will be catched by human
eye which can caught human attention. (Alan D. Janet F. Gregory D. A., Russell B.,2004)This is the technique which is used to catch the attention of the user. For example this could
be a piece of red flashing text in the piece of a block of text which will draw the reader
attention away from what else they were focus on the flashing item. Good for attracting
attention but it overdone could put off and annoy the user.
Memory constrain: The statement here is that clients should not be expected to remember
information. Therefore the idea is providing the essential information during the whole
transaction. First of all, the website should provide basic information between each pages.
For example, the clients should able to see their choices when finish first step of choosing
starting station, destination. Print function should be provided for user to remember the
information and for track the specific train and for printing tickets. (Alan D. Janet F. Gregory
D. A., Russell B.,2004)
Data retrieve: When users submit a transaction form, but some problems happened. People
don't want to retype the information again. If the design requires the clients to retype, it will
7/30/2019 Group 14 Pro to Typing
15/78
15
leave a bad impression in people's mind. People may regard the website as inefficient
application.
In addition, clients should be able to see the train tickets' detail after they purchasing them
and login their account in the website.
AJAX(Asynchronous JavaScript and XML): AJAX is a kind of web technique that allow
users to access web resources asynchronously, so that the time used for waiting between each
operations would be greatly reduced. Therefore, the AJAX technique could be used to leave a
good impression. (Jesse Garrett, 18 Feb 2005 )
Moving on principle which are related to the people the computers and the task that are being
performed. In general, the users who would like to use the online booking system are the
people who want to buy a ticket in advance and they would like to have cheap price.
Therefore the reliability and convenience are what users concern about.
Convenience: The access speed should be great concerned. it is obvious that a online
booking system for train which access speed is low would be abandoned. Therefore, the
capability of the website should be measured in advance. Because, it is a online booking
system, The capability should be able to satisfy users during rush hour. Designers should take
the number of users into consideration. For example, there are 10,000 people connect the
server at the same time, therefore server itself should be able to have the capability and the
design should help to achieve the goal. Another example would be, clients may want the data
retrieve function so that they don't need to retype information.
Reliability: Reliability plays an important role in the online booking system. The
confirmation should be placed in the explicit place where users focus. If the website could not
achieve the reliability, clients will not use the website again. Design should handle the clients
state carefully.
7/30/2019 Group 14 Pro to Typing
16/78
16
5. Analysis of user requirements
5.1 - The decision behind choosing persona
There were three types of users that were chosen in the person. The first type of user was a
regular travel of train where they were frequently buying tickets. The reason behind choosing
this type of user was that was mainly the system being built was mainly trying to
accommodate user who travel a lot, therefore would mainly be using the system a lot. The
other reason was the age group of these user were not restricted therefore there may many
scenarios that could be derived from this. Lastly another important reason was that the these
type of user may be one of the biggest user group so design a system to cover their needs
would be very important.
The second user group was a user from outside the UK. The reason for wanting to cover this
user was mainly because may train travel site do not cover this type of user so it would be
very interesting to try see how well system can accommodate their needs and their difficulties
in using a that was not designed with them in mind.
Finally the last user group would be a older person the reason for wanting to cover this user
group was because older user are now starting to use technology more and as society
becomes more technology dependent these user who need to be able to use systems such as
booking system as traditional method are being replaced. Therefore seeing their use and
needs and seeing how well current system can accommodate their usage is a very important.
5.1 - Persona
7/30/2019 Group 14 Pro to Typing
17/78
17
Mr Chris Brewster
Background
Age: 23
Occupation: PhD student
School: Architecture,
UCL
Technology Level: Able
to use email, IM, office,
surfs the web, Adobe
design tools and
AutoCAD etc.
Main Points
Parents live in
Southampton
On some occasions
attends meetings
outside London
Checks the trains
times before
leaving
Description
Chris is in his 1st year of doing a PHD in architecture at UCL, studying PhD. He used
to live with his parents in Southampton before going to study in London. At present
time he now lives in a Student Apartment with several friends.
In his free time, he likes to go to visit the library or return back home to visit his
parents. He make the effort to take time to go back to Southampton to visit his parentsevery weekend. On some occasions he need travel to other cities across the country in
relation to his PhD projects.
During the weekday Monday to Fridays he visits his studio, every day. Once arriving
the first task he does is to check the agenda of his day and check his email for any
meeting or works he may have to do in the upcoming days. At the end of Monday, he
is takes time to booking the advanced train ticket for the weekend back home and any
ticket which he may need to travel to meetings.
When planning a holiday, he will check the train route first he may need to take and
uses a journey planner to calculate the time and costs, he may incur. To him this task
should not be time consuming as possible.
When travelling he prefers to take the train as much as possible and when staying away
overnight he would like to book a hotel as close as possible to the train station.
7/30/2019 Group 14 Pro to Typing
18/78
18
Goals
More accurate Live Departure Time
Disruption Alert
Journey Planner
Direct Train preferred
Quick comparing prices
Frustrations of Present Systems
Find that sometimes that the live
times for the timetables are
inaccurate and not updated on
time.
Too many booking steps
Mobile bookings need more
features (live departure time
integrated)
Scenarios
On each Friday evening, he would like to go back home by train in order to
spend the whole weekend with his parent. He wants a super off-peak ticket, but
sometimes he needs to go to London. However, season ticket could not offer a
cheaper price that allow him to travel once a week. Besides, before going each
week, he would like to check real train time preventing if there are any
disruption his train route. He does not want arrive late as his parents sleep early.
He has a meeting next Wednesday in the morning, he would like to book a
ticket on this weekend with first class postage of the ticket, so that he will not
get the station in a rush at the ticket machine. And he would like to share the
ticket information to his colleague so they could make a plan to pick him up at
the station.
It is a Monday morning which he is regularly go to work at 7am. However, he
is encountered that someone has a car accident on his way to the train station.
He wants to check the timetable for the next train and book a train e-ticket via
mobile booking.
7/30/2019 Group 14 Pro to Typing
19/78
19
Mr Matt Hedge
Background
Age: 25
Occupation: Graduate
engineer
Technology Level: Uses the
computer on a daily basis,
able to do basic task on the
computer
Main Points
Lives in the outside
of London
Has to move to
different offices
around the country.
Has the use of a rail
card.
Description
Matt is his 1st year of a graduate scheme at company A. He lives on the outside of
London where he lives with some others professionals renting the house.
At last week of each month he books his seasonal ticket for a month in a week in advance
just for his commuting to work every Monday to Fridays. When travel to meetings he try
to book as much in advance as possible however in some case may not allow this.
When planning a long distance travelling Matt will look at all the travelling information
related to his route and will try to book a hotel is he needs to stay overnight near where
the meeting is going to be held.
When buying ticks Tim prefers to use his rail card to drive down the cost of the ticks.
However with less than one year to use it before he is over the age limit, he looks for
saving on his ticket as much as possible.
7/30/2019 Group 14 Pro to Typing
20/78
20
Goals
More information on buying season
tickets
Alternative routes to take
Which route to avoid during rush
hour? Can book tickets quickly
Frustrations of Present Systems
Website is too hard to navigate
sometimes
Not a lot of information on the
underground systems.
Too many choices to pick from canbe confusing.
Scenarios
He has a meeting in one of his companies offices in Scotland and needs to travel
from his flat in London next week on Tuesday at 9.00am and needs to return the next
day for a meeting back at London. Therefore he needs to book the ticket in advance
as well as plan out the route he can take by train. He also needs to save a copy of thereceipt so he can claim travel expenses with the HR department at his company.
The current season ticket is about to finish and will he now be working with a new
client in London which is needs to take a route which is not covered presently by his
ticket. He needs to buy the ticket as soon as possible. The ticket needs to be cheap as
possible and he wants to be able to use his rail card to reduce the cost of ticket. When
buying the ticket he also needs to be able to check the information on the new route
he needs to take as well.
It has been found that he is going into the red as the cost of living has risen and
urgent saving needs to make to prevent the situation from becoming any worse. One
aspect that was found were possible. Savings could be made was in his train travel.
He wants to be able to check and compare prices of different tickets and routes easily
and quickly. However he is prepared to spend some time on this as it is an important
issue. He want to know if saving can made on buying tickets that last a month to
maybe a week and also if certain routes are cheaper.
7/30/2019 Group 14 Pro to Typing
21/78
21
Dr Iqbal Wahab
Background
Age: 55
Occupation: Lecture in
Biosciences.
Technology Level: Uses
the computer on a daily
basis, able to do basic task
on the computer
Main Points
Able to speak
English on areasonable level.
First time taking the
train in the UK.
Likes to book in
advanced
Description
Iqbal lives and works in Africa for most of his life and rarely uses the uses the train as his
preferred method of travelling is the car. This will be his first time using the trains in the
UK.
Iqbal is able to speak and read English to a basic level and can commutate with people, but
would prefer reading in his own mother tongue were possible. He is also not very good at
using complex systems and tit takes him time to understand how to use them.
When travelling Iqbal like to plan in advance and like to study the route carefully to
prevent getting lost. He also like to look at places that he would be able to visit along the
way of his travels.
When buying ticks he like not to waste money and will only buy tickets for certain times in
order to save money, therefore will book as much as possible in advance.
7/30/2019 Group 14 Pro to Typing
22/78
22
Goals
To be able to understand the
information given on the website
Get information about places to visit
in the area.
To be able to book a hotel room atthe same time.
Frustrations of Present Systems
Online booking system hard to
navigate as not used system before.
Doesnt understand the types of
tickets that there are.
Cant seem to find relevant
information on train stations and
maps.
Scenarios
When arriving at the airport in Heathrow 4.00am in the Morning, he wants to be
able to go straight from the airport to a hotel which is nearby, by taking a taxi.
During the same day he wants to able to visits local places around London, and
then go to the train station around 8.00pm the same day. He needs to be able totake the train from London to Bristol to the Hotel. He will be staying the night.
However he wants to be able to stay near a hotel near the University of Bristol. He
would like to book a return journey ticket as well as he plan to leave the same dayafter his visit to the university. He needs the tickets to be within a reasonable price.
He is going to book a new ticket as one of the trains have been cancelled, he needs
to be able to locate the station he is currently at and book a new ticket to get to his
final location. To able to do this he needs to see a list of ticket prices and a live
train timetable to see when the next train will be incoming from the same station heis at. He also wants the necessary information to see if he could make a refund onhis ticket which is now void.
When booking the ticket for the train journey in advance on the online train
booking system. He wants to be able to read the website in his native language
possible to ensure he has understood what is buying and booking properly. When
buying the ticket he needs to inform the people who are going to receive him at the
train station the possible time that is he will arrive there so that they can pick him
up. He also needs a receipt of his ticks and the tickets to be sent to him as he doesnot want to have to take time to pick them up from the train station.
7/30/2019 Group 14 Pro to Typing
23/78
23
Ms Veronica Mars
Background
Age: 34
Occupation: Food
Columnist
School: NYU
Technology Level: email,
IM, office, surfs the web,
blogging.
Main Points
Likes to travelling
around world todiscover the local
cuisine
Likes take train
around instead of
airplane
Likes to choose the
1st class
Like to using the
credit card online
Description
Veronica is a food columnist in the US. She would like to travel around world most of
her time. Usually, she would write articles as she travelled.
As she travel to Europe, she buys a Euro-pass and book a seat before the trip. However,
there is no such type of regional ticket in UK. So she need to book a ticket before every
trip.
Her schedule is flexible, when there is some delicious food, she will stay there for longer
time. Therefore, she would like to book the ticket at night to plan for tomorrow.
Also, she will book a bus plus ticket to save her time and any other combine ticket if it is
helpful.
When she is using a credit card for payment, she is worrying about the card being stolen,as once the card detail is filling out, the payment is done and no need for more
confirmation.
7/30/2019 Group 14 Pro to Typing
24/78
24
Goals
Get enough information for the
local transportation
Take a look at the map and see any
restaurant around the station
Buy first class or quiet coach
Frustrations of Present Systems
Too many booking steps
Few links about the local sights
Few combination ticket
recommendation
Security problem with credit card
payment
Scenarios
She is planning a journey from Birmingham to London. She knows that the
journey would take a quick long time. She would not like to waste time on a
boring journey so that she is looking for different services of different train
companies when she buying a first class ticket. In fact, she would like have food,
drink, a comfort seat, WIFI and other possible services.
She is travelling from Edinburgh to London. She would like to spend several
days on the famous intermediate places. Thus she want to split the route into
several parts. She would like to use journey planner to automatically create a
route for her. In addition, she would like a ticket that allow her to have flexible
travelling.
One time, she is encountering a problem while she is paying with card. She
finished searching, special settings and payment form. However, after she press
the confirm button in the payment page. The transaction page is timed out, she is
not sure if the transaction is success. Then she has to call the customer service
and bank to double check this payment.
7/30/2019 Group 14 Pro to Typing
25/78
25
Mr George Smith
Background
Age: 70
Occupation: retired
mechanical engineer
School: Imperial College
Technology Level: email,
office, surfs the web.
Main Points
Would like to learn
the new technology Children are busy
with working
Likes to travel once
a month with his
wife
Likes to plan
journey by himself
Description
George is a retired engineer. He is interested in the new technology when he was
young. So when he retired, he is trying to learning the computer.
When he get up in the morning, he will go to the market and do exercise. Then he
checks the email and reply them. As his children is busy outside, and the easiest way to
communicate is through email.
He is now learning to book a ticket online. When he first log into the website. He is
struggling with the interface. It is too much information display on the screen. And he
had made many mistakes to go through it. And finally he had successfully bought the
first ticket. After that, he is always buying ticket online as he think is very convenient
and interesting to learn every booking mode.
7/30/2019 Group 14 Pro to Typing
26/78
26
Goals
Can see the information clearly
and brief description for the
journey ( not too many words per
page)
Check the disable facility and help
point location for each station
(better have a map or virtual view)
Can be easily for booking(video
guided tour)
Frustrations of Present Systems
Cannot zoom in every page
Layout of timetable sometimes can
be complicated
The next button sometimes is
hard to locate
Helpline is always busy and no
online chat
Scenarios
George has not used an online booking system for trains before and has usuallybooked his tickets in the train station, but he will now try to take advantage of
the online systems that can be used. When he is going to the homepage, he is
struggling to filling out the information on the searching form. So he is trying
the Help tab to watch a video guided tour to get a clear explanation step by
step.
He is planning a 3-day anniversary trip. When booking the tickets for the
journey, he would like to able to access and view some related information to
his travels such as hotels, bus etc, with ease without out having to search into
other website and follow a complex navigation system.
The rail card has a valid period. If rail card expired, he needs to renew the rail
card. Once, the old man is booking for a journey from London to Bath Spa and
he find that his senior rail card is no longer valid. However, it is not convenient
for an old man to go to the railway station. Therefore, he tries to find out an
online train booking system that provides the service and information of
renewing senior rail card online.
7/30/2019 Group 14 Pro to Typing
27/78
27
Laura Domain
Background
Age: 75
Occupation: retired
Technology Level: Find
using technology very hard
and is slow on the uptake
when learning how to use
new systems. Sometimes
surfs the web.
Main Points
Lives in the
countryside, wherethere is very little
train access.
Likes to go
travelling with her
grandchildren as
much as possible.
Likes to book in
advanced tickets to
save as much money
as possible and
rarely leaves thingsto the last minute.
Description
Laura likes to spend as much time as possible which her grandchildren and like to plan and spend
the weekends with her family whenever possible. As she lives a near the train station see can
easily travel to her children home where they pick her up at the train station.
She is not very good at using technology, but has reasonably been getting better, but the online
booking systems can sometimes cause her distress when she uses them, as there is a lot of
information which is put in a compact way.
When booking tickets she likes to book as early as possible to save money as well using her
discount card to reduce the cost of travel, and like to notify in advance to her family the times that
her train is coming over.
7/30/2019 Group 14 Pro to Typing
28/78
28
Goals
To be able to understand the information
given on the website
Get information about places to visit in the
area.
To be able to book a hotel room at thesame time.
Frustrations of Present Systems
Online booking system hard to
navigate as not used system before.
Doesnt understand the types of
tickets that there are.
Cant seem to find relevant
information on train stations and
maps.
Scenarios
Planning to leaves from the nearest train station to her countryside home, but will need to
book a taxi in advance to take her there for a journey that may take 30 minutes, could
took the bus but wants to make sure there are no delays. Also needs to pickets up tickets
from the station machine as tickets were booked in advanced. As Laura has not used themachine before who like to read on online manual in advance, but need it to be in a easy
place to locate as she finds too difficult to navigate the web. She would also like the train
timetable to be easy to access and needs to be able to print off the relevant informationwith ease as she is not to good at using computers.
As planning a journey to the family home. Once the booking process of the ticket has
been finished. She usually call her family to make sure and confirm that her family knows
that she will be coming and will pick her up. As backup she wants to send her
confirmation of the tickets that she booked to her family email address. As she is not verygood at using computers she expects to be able to use an easy function on her system to
just type in the email address and let the system handle the sending of the email.
When booking the ticket for the train journey in advance on the online train booking
system. She wants to know all the information that she will need when she books the
ticket for example. The cost of the tickets, the train route, how long the journey takes, if it
needs to change train and where at. She needs the information to be accessed andavailable before she even make a single step in booking the tickets.
7/30/2019 Group 14 Pro to Typing
29/78
29
6. First generation prototypes
6.1 - Prototype designs and tools used
Prototype designing tools can be separated into two categories: low-fidelity prototyping and
high-fidelity prototyping.(Egger, F.N. 2000)
When designing the 1st generation prototype there were many different way that they could
of been designed. A first type of tool which could of been used is word. The tool is low-
fidelity prototyping. This is a very simple text editor, where a simple design of a website
could be drawn using text box and the other features that there are to give designer a simple
feel how the design could turn out. This process would be very simple and quick and would
not require a lot of skills. However the disadvantage is the limit to what the designer can
make, the are limited to a very simple concept and might not be able to put a slight complex
idea from their head in to word.
Another tool would simple be a piece of paper and pencil and a easer. The tool belongs to
low-fidelity prototyping tool. Design a prototype here would be simple indeed and ideas can
be created very simply and very complex ideas can be drawn down and notes can be written
aside it with very little effort tool. This is a very good idea of getting started. However the
downside of this technique is very easy to get carried away and forget that a product is being
designed for a computer, meaning the designer can create many wonderful and weird ideas
that will not go beyond the piece of paper. Also very minor mistake could lead to redrawing
the whole idea from square one again. Another disadvantage of using pencil is the tool can
not paint colour very efficiently.
Ultimately there were two tools chosen, the first toll was paint. Paint is low-fidelity as well
because no interaction can be generated. The advantage of using paint is was it was very
good to copy and paste ideas that were gotten from other website and create an idea of an
design. It was very good at giving a visual feel of how the product would look like and
changes can be made very quick. However the disadvantage of using this tool was that only a
very simple design can be used and if a picture was copied from another website and the
7/30/2019 Group 14 Pro to Typing
30/78
30
designer wanted to change the colour of this it would be a very harder process, something
nearly impossible.
Other tools:
Lumzy is a free high-fidelity prototyping tool. Lumzy is a Mockup and Prototype creation
tool for websites and applications. Lumzy can easily create website mockups and send them
to clients conveniently. Lumzy also features collaboration tools for team editing, a chat
engine for deliberating over designs and file versioning. Some interaction are involved.
However, the inconvenient aspects are as follows. Users may get into trouble when they try
to place component precisely.
6.1.1 - Design of prototype 1.
Interaction with Figure 1 in the appendix: When user type in the text box with
station/Postcode it will come up with station name that are related to what the user is typing
in. There is drop down box where it says leaving that can be changed with arriving it is the
same as where it says 22 and 15. The 22 contains a drop down box for number 00 to 23,
where 15 has, 00, 15, 30 and 45. When the arrow next to passengers is click it will create a
drop down box that will show more options such as selecting a railcard and adding more
passengers. When the user presses a different language or the Home, timetable, Tickets,
Hotels, Maps, Help a new webpage will load. The button with the i in a circle and the 2 go
buttons also will load a new webpage. The button next to the box will today will show a
calendar when the it is clicked. The check box next to the return button will unlock the
shaded options when they are pressed.
Interaction with Figure 2 in the appendix: When pressing earlier or later trains they will
load different train times before or after the current train times which are shown on display.
If the users click on details it will show the details of the tickets in a pop up window. Under
the heading chg if the user clicks on the number it will open a pop up that will show the
7/30/2019 Group 14 Pro to Typing
31/78
31
number of exchanges that that the train has. There is a drop down bar under train provider
which will allow users to choose a another train provider from options.
6.1.1.2 - Rationale behind prototype 1.
The decision behind choosing this design are mainly related to the solve the problem that was
state in section 3,2. The design has been designed in a way to provide the minimum
information that is needed for the user on screen . Therefore the users will only see
information that is needed to carry out their intended task, such as booking a ticket. They are
also good as they address the problem of having all the information need on screen without
the need of having to scroll down therefore this reduces the information that will be missed.
Another reason why this prototype was chosen was because of colour coordination, the
colour are simple as makes it good to look at, also colour that stand out are used to catch the
users attention such as yellow in figure 2 which highlights to the user what option was chosen.
Lastly is because of the simple command word used on the buttons which are easy to
understand such as buy now or home or help. This is advantages to new users who can easily
navigate the system even if they aren't used to it.
6.1.2 - Design of prototype 2.
Description with Figure 3 in the appendix: Figure 3 is the Welcome page.
Feature 1 is Prefix, when customers typing railway stations addresses, auxiliary information
should be given and typing result should be recognized intelligently. For example. Using
drop-down list and tree technique could achieve the function of predicting the possible name
of the station. Besides, the abbreviations of each train stations must be available as well, such
as BHM which means (Birmingham New Street).
Feature 2 is Calendar: calendars can be used to help customers plan journey. Calendar will
pop up when users click the text field where users should input the date.
Feature 3 is the state record button. The function of state record is a unique design for quick
access. If state radio button is on, users preference setting will be automatically recorded in
the local file. Next time, users could directly use that setting by choosing a state in second
combox. Moreover, the record state is not designed to recode the information about date
because travel date are different for every time users want to book a ticket.
7/30/2019 Group 14 Pro to Typing
32/78
32
Feature 4 is Map button. Map button could direct customers to the google map. The default
search information is the destination. The map plays an important role when users are
planning their journey. The reason is that some users may not know a specific name of a train
station. Google map could help them to figure out the station.
Feature 5 is the Quick Link. Quick link provides the links containing information such as
train line map, station struction map and policy. The quick link will provide the link to the
pages that users navigate to most frequently.
Feature 6 is shortcut. The welcome page would apply the hot key to the pages of entire
booking process. Users could use their keyboard to interact conveniently
Description with Figure 4 in the appendix: Figure 4 is the Train search page. It contains
following features.
Feature 1: Setting panel. Setting panel is placed on the top and is designed to be a specific
float frame. It enable a quick modification for users in order to shorten the modifying time
and reduce the network bandwidth of reloading the first page. The setting panel includes the
specific settings, such as the serves ,and state record panel. The panel is always placed on the
top.
Feature 2: The query webpage of showing the train time should be different when tickets type
are different.
Feature 3: If there is no specific setting in the setting panel, The third booking step will be
omitted. Thus, only 4 essential steps are involved which are Journey Plan(welcome page),
Choose Train Tickets(Train Search page), Payment(Payment page), Confirmation
(confirmation page).
Feature 4: Detail link. In the train time table, user could press the link detail to see the detail
of one train.
Description with Figure 5 in the appendix: Figure 5 shows the live page. The live page is a
simple design which is designed to search the state of trains. According to the frequency that
the page are used. The page contains only the essential component: one text field for making
query and a table containing information so that users could find the information they wantrapidly
7/30/2019 Group 14 Pro to Typing
33/78
33
Description with Figure 6 in the appendix: Figure 6 shows the payment page. The payment
page is sample page that contains two parts. The first part is the payment detail form. The
panel is designed referring to the other online shopping website such as paypal. The panel
contains the card type, card number, security number, first name, last name and title. The
second part on the right shows the detail about the train ticket, which includes the journey
departure station, destination, duration, number of tickets, railcard information and price.
6.1.2.1 - Rationale behind prototype 2.
The first generation prototype 2 is aimed to meet the requirements of users which have been
introduced in persona and design a website that avoid the problems that other online train
booking system have. In order to do that, the prototype includes four pages that could
represents the entire booking process. The central idea of the prototype focus on the
efficiency and usability of the booking system. Therefore, the prototype introduced a state
control panel into the design. Users is designed to have the quick-access experience once user
finish default setting. For usability, the prototype 2 includes a number of active component
such as calendar, prefix and question icon. Moreover, in the prototype 2, an effort has been
made to reduce the booking steps. Besides, due to the consideration of making profit, thewebsite leave a great space for advertisement. Therefore, the design may have financial
support to promote the design.
6.1.3 Design of prototype 3
Description with Figure 7 in the appendix - Homepage
The Homepage is consist of three blocks from left to right: Booking Panel, Live Time Board
and Personalisation Panel. On the Menu bar, two basic function Home and Help are
displayed as well as other three common menu items are listed as Offers, Journey
Planner, Travelling. In the booking panel, there are two small icon showing the Google
Map and Weather Channel links which will redirect the user to a pop up window with the
relevant location and weather information for particular train station. Another feature is that
the panel is divided into four blocks and each block is integrated as a drag-down container,
which will help user reducing the information displayed on the screen. Furthermore, Live
7/30/2019 Group 14 Pro to Typing
34/78
34
Time searching and Disruption Alert are put on the centre position of the screen. The reason
is it is the most useful function other than the searching ticket.
Description with Figure 8 in the appendix - Booking Page (1st step) Timetable and Fare
The first step of the booking page contains a box with four tabs indicating four steps of the
booking process. The outward and return journey are also designed within the drag-down
container, that is , the user can only concentrate on one journey at a time. The ticket is shown
in the combobox with the cheapest one at the top. On the right attached to the booking
process box, is a reminder panel, which is for notice the user of ticket information up to date.
Description with Figure 9 in the appendix - Booking Page (2nd step) Additional
Information
The second step of the booking page includes the two features: seating preference and ticket
delivery method. It allows user by ticking every selection in the box. Again, the ticket detail
is always shown on the right as a reminder.
6.2. - How prototype was evaluated
All of the 1 generation prototypes were evaluated against a Heuristics evaluation. This was
used in an evaluation as it helps identify usability problem that there may be with the user
interface design. It work by evaluating the interface against recognized usability
principles(heuristics). This can be then be used to make informed decision on how to improve
the first 3 prototype to make the second prototype . The heuristics that the prototype will be
evaluated are as followed:
Visibility of the system: The system keeps the user informed about the situation through
message from the system within a good time range.
Match between system and the real world: The system should present information that will
be understandable form the use point of view. These should follow real world conventions
and information which appears should be logical and nature.
7/30/2019 Group 14 Pro to Typing
35/78
35
User control and freedom: Users have the ability correct mistakes, or can leave unwanted
condition without the need of going through a unnecessary process.
Consistency and standards: Users should not have to wonder what different words in
different situation means. They should be able to follow the platform conventions..
Error prevention: Careful design to prevent errors occurring in the first place.
Recognition rather than recall: Reduced the need for user to recall information from
memory. Meaning the system should have the relevant information in a clearly visible place.
Flexibility and efficiency of use: The system can cater both the needs for novice and experts
users.
Aesthetic and minimalist design: The design of the system present only the needed
information in a clearly visible way.
Help users recognize, diagnose, and recover from errors: Errors message should be
express in a way understandable to the user, which will help them to tackle the problem.
Help and documentation: The system provides documents to help user on how to carry out
the different tasks in the system(Alan D. Janet F. Gregory D. A., Russell B.,2004).
When evaluating each prototype using Heuristics evaluation, they will be tested against each
Heuristics from 1 to 10 and a it problems will be highlighted there.
In order to do heuristic evaluation accurate. The evaluation introduce the severity rate scale to
estimate each terms:
Overall severity rating on a scale of 04:
0 = I dont agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released (Nielsen)
7/30/2019 Group 14 Pro to Typing
36/78
36
6.3. - Prototype evaluations
6.3.1 - Prototype 1 evaluation
The severity rate is in the end of each term
On the booking ticket from figure 2 in the appendix some users may miss the status of the
system if they do not scroll down the page. (2)
The system can sometime use command words in a vague ways which the users might not
know what they do for example more is not very clear and vague and has many meanings
when associated to the real world which can confuse users to thinks do it give me more
choice, more steps, etc..(3)
There is no freedom for user to cancel the booking process at any stage in the booking and
they may have to close the browser windows to cancel the process. This may make some user
feel unsafe especially doing this when they have already put in there payment details and
thinks if it has cancelled or not or had the payment gone through this may cause some
unneeded stress to the users. (4)
There some button which are the same such as the there are 2 Go buttons which can confuse
the user as which one is the correct button to click. Also the consistency is known to change
in the booking process as the object frame changes size due to the information which it is
displaying this may make it annoying to some users as the information keeps moving up and
down the screen. (2)
d
Hints are not presented in the potential place where user would run into trouble, such as the
security number should be described. (2)
The website may not be very efficient to use by inexperienced users as the design and control
may be design in a way which is too complex for them and may make it daunting for them to
use making them more prone to making errors.(1)
There are two home buttons which is not needed as is waste space and can confuse users as to
which button should they press.(1)
7/30/2019 Group 14 Pro to Typing
37/78
37
The website has no mechanism that will allow user to known what may be an internal error
on the websites side. (2)
There is no help which is readily available and present on how to help user to navigate and
use the website this could be a disadvantage to users who don't know how to use the system
and are prone to making mistakes (2).
6.3.2 - Prototype 2 evaluation
When searching for train tickets users are not informed of the overall price for the journey not
only the tickets price. This can be bad as users will want to see the price if they apply the
railcard. They do not want to buy blind and in the end see the ticket is 100 and do not want
to buy it. This will be a waste of time for them. Also The website does not user users at what
part they are in the website, for example it does not say if users are looking at the live train
timetable or booking part of the website. This is bad as it does not make anything clear
making navigation more harder and leaves it up to the user to guess where they are which is
not good the system should tell them where they are. This would make users get lost very
easily.(4) Changing language is not supported on the website which does not match the
requirement of international people.(2)
The user is unable to choose two different voucher card at one time.(3)
When users are selecting train tickets there is a part at the top of the website which shows the
information of the ticket and it should be editable for users if they want to change it but it is
not as there is no function as a pop up calendar to change the dates in train search page. This
can force users to go back and refresh the previous page just to change the tickets details in
most case it will annoy the user and other some user will have no ideas at will what to do. As
it is very restricted it gives users very little freedom.(3)
There is a section for users to login but some users may wonder about what they need to do
achieve this is there is no present function for them to sign up for this service.(1)
There should be main menu in payment page, live page. The webpage should also contains
the buttons which allow users to go back(3)
In this case, using calendar pop-up window clients could input traveling date correctly.
Besides, the text field where would have ambiguous value use default value to show theformat. Thus, the risk of typing information with unwanted information are greatly reduced.
7/30/2019 Group 14 Pro to Typing
38/78
38
Finally, format checking as the last protection method is used, especially used for important
message such as payment content. (3)
The website makes the user have to recall some information for example if a user want to
view a map of a train station they would have to recall this detail as it is not accessible at all
stages in the booking process.(3) Beside, as the specific setting in the third step varies for
different train company, it is unable to set a float frame of quick search in train search page
for all circumstances.(3). Float frame may cover the table which leaves a bad impression(3)
In the welcome page the users are unable to get help when they input data into the text field,
this make it inefficient when using as user would wonder how and what data they should put
in and start playing a guessing game until they put in the right input.(2)
There is no visible and easy access for users to get help for how to use the system. This is a
put users at a disadvantage as users may have to make use of their own judgement on how to
use the system and this could take a long time.(2)
6.3.3 - Prototype 3 evaluation
When users navigate through the different sections of the website, for example from the
home page to the help page it may be useful for users to be informed of which page that theyare on. This may confuse users who can be lost easily when navigate the website ,and they
not know what page that they are on. In addition, some of the important information such as
one that the booking page does not stand out enough. The another example may be the ticket
detail and this can escape the attention of some of the older users which may miss some
critical and important information.(3)
There is no clear statement on type of railcards when implementing group booking. The
system also lacks the features for users who may want to use the system in another language
than English.(4)
If users wish to cancel the booking at any stage of the booking there is no option that is
present to do this ,and they may have to close the browser windows to do this. This may leave
some users confused as if they have cancelled the booking especially if they have already
entered the payment details.(4)
??
7/30/2019 Group 14 Pro to Typing
39/78
39
??
??
??
The layout is not suitable for group booking, as it designed in a way that make it difficult to
use when users try to book more than one ticket.(4) Next, the layout may be confusing when
users use it for the first time, and especially those who are not good at using technology
which may be more related to the elderly users. When looking at the booking page there is
sometimes times too much information and options displayed on one page which can make it
confusing and cause frustration for the users to navigate through.(2) For example on the Add
information page it seems that some of the options have been squeezed on and some is not
necessary such as the which station to collect the ticket form.
The system does not consider error messages. If errors which are resulted from the website
are not processed properly and therefore can confuse the user. For example If the user picks a
wrong choice in the time it will not enable them to pick the choice this sometimes could
confuse the user who is using the system.(3)
There is no help line number which has been provided in a visible place so users may have tospend time looking in the help section of the website.(2)
6.4 - Lesson learnt and recommendations
By doing the evaluations for all 3 of the first generation prototype there were several lesson
learn and form these lesson recommendation were put forwards to on how to make the
second generation prototype. Firstly was that sometimes it was seen in the prototypes that
they try to show the users too much information on one screen at once and user may have to
sometimes scroll to the screen to view all the information. This design is not very good as
some user may be in a rush and miss some essential information. So the recommendation to
this is to inform users of only the information that they need and design the next prototype in
a way where there is no need for scrolling down the website.
Another lesson was sometimes it was found it was better to restrict the actions of users
actions in certain sections of the website. For example when booking a ticket the users should
follow a set of actions instead of freely being able to do what they want. However in somecase more user freedom needs to be given, like where users can go back to any stage in the
7/30/2019 Group 14 Pro to Typing
40/78
40
booking process, even two steps at a time instead of 1. So it is recommend in this case that
the system should be designed in a way to control the user action to follow a certain set of
action by either informing them of these action or blocking out certain actions. In addition
greater user freedom should in given in certain parts of the system where it would be deemed
necessary.
System error were poorly handle in the prototypes, for example the system give no help if a
user had made a mistake and would confuse user as what they needed to do and how to
proceed on to the next step and handle the error. This solve this it would recommended that
the next prototype has a system that will inform users if they make a wrong choice or cannot
select a current option. For example when typing in a card number and they enter a character
the system should inform the users of this.
Only 1 of the prototype was handle to meet user requirement of users would wanted to use
the website in a different language than English. It would be recommended that the next
prototype has a function to handle this. Also the system should was simple and consistent
word for it functions that does not change for every link that the user may click on. For
example the timetable link should stage timetable and not change to live timetable on another
page.
Now looking to the layout and design of the website it was learnt that complex designs are
not could because they can make things more complex for the users when they use the system.
Another result of this is that it makes it more harder to present information to the user in an
more accessible way and the information become less clear to read to the user. Staying on the
concept of the design it was found that the prototypes did not always inform the users were
they where, for example if they were on the live train timetable section of the website or the
booking section. As a result the lesson learn and the recommendation that could be put
forwards is that the website design should be a simple layout and use colours that do not
clash a lot with each other so it may put off users. Also all the information and text on the
website should be easy to read so no wall of text and made easily accessible to all user.
Finally the website should always have an indication of where the users are. this could
displayed in the tab of the browser.
Another common weakness that all the prototypes seem to make were that they lack the
features to allow users to edit the train journeys at any stage of the booking process. It is not agood idea for user to have to press the back button in the browser to back to edit their journey,
7/30/2019 Group 14 Pro to Typing
41/78
41
this could necessary error as a result. Therefore it could be recommended that the second
prototype has a function that user to change the details of their booking at any stage of the
booking stage to reduce the chance of system error.
Finally another important lesson that was learnt was the lack of help section in the prototype.
This could in the form of not being in a visible place, or it was not accessible at all time or
even in some cases it even disappeared. Therefore as recommendation to combat this. There
should be a dedicated help section that is accessible and visible at any page of the system at
all times.
7. Second generation prototype
7.1.1 - Evaluation of tools for constructing prototype
Compared to the tool used to make the first generation prototype the tool used to make the second generation
prototype will be different as this prototype will be designed with user inveracity in mind, so if a user clicks on
a link a link to that page will open.
The tool that was used to make the prototype was expression. This is a website maker tool which allows one to
make and design website to varying degrees of complexity. .It has allows editing of the html and has some pre
built in functions and designs which user can use in the visual interface.
The advantages of using this tool includes one that it is a free tool to use and one does not need to pay to use it
or download a trial that has limited functions. It also has a visual interface face that allows users to create a
website as they would see on the screen as the finished product. There are also many templates to use as drop
down boxes so that user do not need to know the code of achieving the function. This makes editing and
designing websites very fast.
The visual interface is very useful as one on position objects on the screen the way that the designer would want
the user to see it, which increases the developing efficiency and minor changes can be made with little effort.
However visual design in the user interface do not always match exactly as they would be expected in the final
view. For example expecting an object to stretching across the screen, sometimes does not appear the same in
the preview and minor adjustments need to be made.
Overall it can be said that expression is a good tool to make an interactive prototype especially if it is a website,
as pages can be linked to follow through to the next page. Moreover, complex design can be made if designer
has the knowledge and the knowhow. However for new users it is only a good tool if they are designing
something very simple..
7/30/2019 Group 14 Pro to Typing
42/78
42
One of the tools that could be used is Dreamweaver. This tool has many of the same advantages and
disadvantages as expression, however it is not a free tool and gives a trail which new users can use to try out the
product, it does provide users to still use most of the functions of the full product.
Although Dreamweaver may be one of the best software in website designing on the market, there is a steep
learning curve in able to use properly it can be said it is a very complex program to master. There are also many
features that could be improved in the product such as not being able to view multiple files. Although
Dreamweaver does generate an effectible code, sometimes it needs to be manually edited after the user makes
several changes in the design view which can be a very complex and time consuming process.
Using Dreamweaver for a 2nd generation prototype may not be a good idea as it is a very complex tool to use
even if does generate website quickly and they can be edited quickly being able to tool may need one step
learning curve especially when unknown problems can occur designers do not want to deal with them in the 2nd
prototype stage as it not the final product.
PowerPoint is another potion that could be used, as it is a good simple tool which can be used to design several
parts of the website using the tool which are built into the program such as text box and graphics to design a
simple view of how the website would look like without worrying about complexity of coding. PowerPoint
would only be able to create a simple prototype of the website and some functionality such as drop-down boxes
would not be available . This tool would be easy to use whereas the risk is losing some of the functionality of
the website that designers may want to be tested such as drop-down box to see the performance and the
response of users who use the tool.
7.1.1 - Evaluation of Language for constructing prototype
The language used in the project is was HTML. There were several other choices such as css which can be used
to build websites from. The main reason for using HTML was because it was the main language that the
software package that microsoft expression used to build websites. It is also support on many browser therefore
it gives the advantage of being compatible with the most views browser which means viewing it would not be a
problem. The other reason for using HTML is because is most website has HTML on it and it means it would
be easy to copy features from other websites in the prototype, rather than spending ages making it. Lastly it is
easier to use than javascript and css.
The other tools which could of been used where javascript and css, which is not more increaly used on websites.
Looking at css it known to save time and can make web page load in a faster time than HTML can , this is
because it uses less code which means the download time per page are faster. It is also known that the codes are
easy to maintain and editing is more easier than HTML as change only in one place of the code is need.
However one of the biggest downsides of css is due to browser compatibility, which is one of the reason why it
wasn't used, as there was no time to spare on making it work on a range of different browser, when HTML
would just work fine.
7.2- Presentation of the second generation prototype
7/30/2019 Group 14 Pro to Typing
43/78
43
In this section there will be a presentation of the second generation prototype . It will be presented by the use of
screen shots with and explanation behind its design and explain of some of the assumptions that are made and
what interactive features that there are. The screenshot will be laid out in a way in the order in which users using
the system would be expected to view the system. The interactive version can be seen at this link
http://teamproject.ueuo.com/.
Figure 1: A Screen of the homepage of the second generation prototype.
Figure 2: A Screen of the homepage of the second generation prototype. Show what happens when the calendar
shaped button is pressed
7/30/2019 Group 14 Pro to Typing
44/78
44
Figure 3: A Screen of the homepage of the second generation prototype. Show what happens when the when the
more button is pressed.
As it can be seen from figure 1 which is the home homepage of the website. It several features such as when the
user types in the password text box the character typed in will be displayed as circles on screen, this is to deal
with the issues of security. If the user was to hover the mouse above the home, timetable, tickets, hotels, maps to
help button it will change colour the reason behind this was to help user see what link they were going to press.
Another feature that there is if that if the user types in the station/postcode box it will produce a list of possible
answers to what the user is typing, this purpose behind this feature is to help user type in the right spelling of the
train station, or if they want a trains station in the area they can search it up using this feature by typing in the
name the town or the postcode. Moving on to the feature of the tick box next to return. When unclick this
dropdown options nex
Top Related