Group 14 Pro to Typing

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


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


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


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.


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.


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/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:


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.


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


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.


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


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)


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)


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


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.


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


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.


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.


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.


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


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.


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.


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.


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.


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.


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


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.


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.


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)


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.


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.


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.


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.


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


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


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.


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


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


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.


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)


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)


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).


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.


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)


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)

??


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


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,


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


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


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


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

Date post:	14-Apr-2018
Category:	Documents
Upload:	blaze3
View:	229 times
Download:	0 times

Group 14 Pro to Typing

Documents