INTRODUCTION TO HCL: 06-21253

Group No: 14 Lecturer: Robert Hendley Due date: 17 Mar 2013 Group Members: Zhenlei GE , 1273239 Abduallah AL-TAYWE, 1304810 Chenxi LUO , 1302611

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

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

3

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 to read. 4

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 they are necessary or not. 5

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 6

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 subviewing 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 it easier 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

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.

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

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 reading the small text. 10

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

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 in Europe. Users can also search for tickets and timetables which are operated by other train 11

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. (15 different languages) 12

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)

13

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 14

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.

15

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 16

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

Main Points Parents live in Southampton On some occasions attends meetings outside London Checks the trains times before leaving

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 parents every 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. 17

Goals

Frustrations of Present Systems More accurate Live Departure Time Disruption Alert Journey Planner Direct Train preferred Quick comparing prices

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.

18

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.

19

Goals

Frustrations of Present Systems

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 can be 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 the receipt 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.

20

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

21

Goals

Frustrations of Present Systems

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 the 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 to take 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 day after 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 he is at. He also wants the necessary information to see if he could make a refund on his 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 does not want to have to take time to pick them up from the train station.

22

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

23

Goals

Frustrations of Present Systems 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.

24

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.

25

Goals

Frustrations of Present Systems 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 usually booked 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.

26

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. Lives in the countryside, where there 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 things to the last minute.

Main Points

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.

27

Goals

Frustrations of Present Systems

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

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 the machine 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 information with 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 very good 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 and available before she even make a single step in booking the tickets.

28

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 lowfidelity 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 29

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

30

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.

31

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 want rapidly 32

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, the website 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

33

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

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)

35

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)

36

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 the format. Thus, the risk of typing information with unwanted information are greatly reduced. 37

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 they are 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) ??

38

?? ?? ?? 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 to spend 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 some case more user freedom needs to be given, like where users can go back to any stage in the 39

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 a good idea for user to have to press the back button in the browser to back to edit their journey, 40

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

41

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

42

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

43

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 next to return are all disabled, when enable these options will be enabled. The reasoning behind this feature is because not will user will want to buy return ticket and this feature is to accommodate their needs. Also seen in figure 1 is a section at the bottom of the website that has different languages, this reason for this is to enable non English speaking users to be able to use the system as it was one of the user requirements. Finally is the marquee feature were there scrolling text, the rationale behind this is to display

44

travel information to the user in a visible place to the user, in a way where it doesn't force too much test to be on screen at the same time. Moving on to figure 2 which shows a screenshot as a result of an action when the calendar looking button is pressed. When pressed a calendar will pop up. The current data will be highlight and the date that have already passed will be greyed out and none selectable. When a date is selected it will appear on screen in replace the text today in a format of dd/mm/yy. Lastly for screenshot 3 show what happens when the more button is pressed on the home page. When pressed it will show the hidden option allowing user to use the combination of drop down boxes and ticket boxes to choose more options before clicking the Go button.

Figure 4: A Screen of the webpage after the GO button is pressed as seen in figure 1. This where the user will chose the ticket that they want to bye.

45

Figure 5: The page appears after next button is pressed in figure 4. This the additional information page in the booking stage where user can pick extra options for their ticket.

Figure 6: A Screen of the payment page which is part of the booking process. It appears when next is pressed figure 5. In this section users will enter their payment details.

46

Figure 7: A Screen of the confirmation page. This appears when the confirm button is pressed in figure 6. Here the user will be able to receive a confirmation of their booking details. As seen from figure 4-5 these screen shoot all come together to make up the booking process that users will need to be proceed through to be able to book a ticket. As seen through all the figure they have been designed to fit on the user screen without the need to scroll down. The re3son for this is that is reduces the chance of users missing important information. Also the name of the page will appear in the tab of the browser was designed in mind to keep users informed to which section of the website that they are looking at. Also as seen in figure 4-7 there are tabs which are either blue or grey. The reasons behind this design is that it informs user all the stages in the booking process. Also the grey section means this is not the current stage that the user is currently at whereas the blue tab tell the user they are currently at that stage, for example in figure 7 the confirmation page is blue, which means the user is currently at that stage. Looking at the top in all of figure 4-7 it can be seen that there is the option to change train journey and time. To do this the user would click in the box and type in there change and then click on the change button. The idea behind this is allow users to change their options at any time in the booking process instead of having to type the details new from the home page in figure 1. Another feature to note is the blue box on the side of the screen in figure 4-7 with the heading of a order summary. This was designed in mind to prevent user having to recall from memory about their ticket details, therefore its function is to provide a brief reminder to the users about what they are buying. Now while focusing on figure 4 which is where the user will pick which ticket that they want to bye. There is a table that house the tickets options, when more time is pressed more tickets times will appear. There is an option for return, this will not appear if the user did not chose the return option which is seen in figure 1. If this option is chosen it will expand the table and allow users to chose a time. Also from figure 4 it is seen that the chosen time is highlighted by a green colour the purpose of this is inform user that they have picked this choice and to prevent the chance of users picking the wrong choice by mistake. This will change to highlight whatever ticket time is chosen. Lastly in the table there is a heading called more. If the link open the more text is clicked a pop

47

up will appear giving the details more information about that ticket, such as the number of exchanges they may need to make. Moving on to figure 5 this stage has a combination of drop down boxes and check box where users can chose extra options that they may need when they are buying their ticket. There is also the function of the next button that will forwards users to the payment section in figure 6 or the back button they will send users back to the previous stage seen in figure 4, where the users pick their ticket choice. The purpose of the back button is to prevent user from pressing the back button in browser and this is designed in mind to reduce the chance of a system error. As seen in figure 6 which is the payment stage of the booking process. There are boxes marked with a * next to them this means that users need to fill this information to proceed to the confirmation page if the confirm button is pressed, is not then the system will inform the user with the details that they need to fill in. There is also a cancel button present the idea of this is user can press this button and it will cancel the booking process and users will not have to worry if the process was cancelled or not. Lastly there is a find my address button and if the user if the user type in their postcode and click the button then the system will open a new windows where user then can chose their right address from the list of options. The reasoning behind this is that it will reduce the need for the user to type information in thus saving them time. Lastly figure 7 is the last stage in the booking process and is a confirmation to double check that users have chosen the right ticket by listing the ticket details. This was designed this way to force user to check the details again once more before clicking the proceed button to process the ticket or the cancel button to cancel the order before the actual payment is taken. There is the use of red text to draw the user attention to very important piece of information and increase the chances of them actually reading it. Lastly on the bottom of figure 7 there is share option the purpose if this is to allow user to share the details of their tickets with other users with ease.

7.2 Evaluation of the second generation prototype 7.2.1 The Expectation of the Evaluation:
The section describes the reason why the following evaluations are undertaken and the expectation of the evaluation.

Evaluation against Heuristic Heuristic evaluation is an important procedure during the project. The importance is that heuristic evaluation provide an completed criteria to test the usability of the software. The aspects of usability will be tested individually. As the Evaluation against heuristic in first generation prototype, the test will follows the following parts, Visibility, Match between system and real world, user control and freedom, consistency and standards, error prevention, recognition rather than recall, flexibility and efficiency of use, Aesthetic minimalist design,

48

Help users recognize, diagnose, and recover from error and help and documentation. After evaluation, the strength and hidden weakness will be known and the weakness will be estimated according to the requirements of users. Evaluation against Personas In practice, a system is designed for humans. The meaning of the online booking system for train is aimed to serve people online and make booking process more flexible. Personas are specific case describing the interaction between users and the system. Those users are the potential clients that the system need to provide convenience to. The features the system have is designed for those users. Therefore, one of the evaluations must be carried out against personas. Through the evaluation, the performance of the features can be estimated in a case approaching to real. related trade-offs could be obtained. Then different strategies could be carried out to meet the requirement of users. One of the example is, through evaluation against personas, the system is especially meaningless for international people, but international people become generally important. The developer could make choices among features and generate a version to satisfy the sort of users. Empirical evaluation of Users Empirical evaluation of users is designed as a procedure of the project. Different from the evaluation against persona, the evaluation against users requires new users to test the system separately. The reason is the system is designed for users, the feedback from users are of prime importance. The result will be analyzed and documented, in the second round of development loop, the result will be used.

7.2.2 Heuristic Evaluation

The second 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 works by evaluating the interface against recognized usability principles (heuristics). The same types of heuristic will be used as stated in section 5.2, when the first generation prototype was evaluated. The reason for using this type of evaluation is that it allows the systems to be checked against the basic point and identify both it strength and weakness of the system. Unlike in section 5:2 the strength against the heuristics will also be noted.

Visibility of system status: When going through the booking process of buying a ticket the system keeps the user informed at which stage in the process they are at. For example if they are at the payment step or buying a ticket step. The different tab of the booking process are put in a blue color rather than a grey color to indicate users they are at that stage. When hovering on the tabs on the top of the page they change color to indicate to the user that they will opening that link if they clock on that page.

49

There are no pop ups that appear when the users navigate through out the website.

Match between system and the real world: There are different languages that the users can read the system, this is good especially for users who may not have English as their first language. The information for the booking process appears in logic steps and should be what the users expects to be next. For example at the end of the booking process confirmation page allow users to make final decision formally. All options that are available to users are in words which are familiar to the user such as home should lead to the homepage of the website, their is no confusing words that may confuse the user. When searching for a train station they can type what it will be in real life, so it make it easier for users to book tickets with names that are familiar with or can look up on the relevant page. The system has been designed in a logic way to cope with the demand of most of the common users but older users may have a harder time to follow the logic of the system. For example on the homepage when picking a date the user needs to press on a button for a calendar but this may not be logical choice to all.

User control and freedom: There is a function within the booking process that may allow users to change the details of their journey at any time of the booking process giving them freedom to change the option without having to go through the process from the beginning again. The system gives the users a little bit too much freedom in the booking process as they can skip some off the steps that are essential in the process of buying a ticket. This is bad as this may cause unneeded failures in the system.

Consistency and standards: The website always has a bar on the top with buttons so users can navigate to different of the website, this always stays the same, so when clicking on the homepage it leads to the homepage. It actions are always consistent. In the booking process the words on the buttons change from example on one instance the buttons say next and back then cancel and confirm. This is bad because it may confuses some users even though it may make sense to some users. For example next goes to the next page, where confirm may seem to confirm the purchase even though it may not.

50

Error prevention: There are some limited options in the website such as choosing train times on the home page. They are limited options where user can pick from a drop down box. This prevents users from picking a time that doesn't exist for example 25:89. The time format is in 24 hours this will prevent the error that some may do of when picking 1 in the afternoon but actually choose 1 in the morning. The system is designed in a way to guide users to the correct information and process which will prevent the cause of errors. For example there is the use of next buttons on the booking process that will tell users that they need to do this to proceed this is useful in prevent errors as it prevents mistakes from being made. There is no prevention to stop users skipping a step when booking a ticket and can skip to the last stage with by clicking on the tab, without having to go through the other stages in the booking process. This could lead to fatal system errors being produced or mistakes being produced in the booking. When some tabs or buttons are accessible the users can not tell why this can prevent the user doing something that they should not do, but this can confuse the users as there is nothing to tell them why this is happening and may lead them to cancel the whole process when there is nothing wrong actually happening.

Recognition rather than recall: Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. The systems has tabs which are highlighted in different places in inform users where they are so there is no need for users to recall where they are. However this is not spread throughout the system as when the hotel to home page is being currently viewed it may force users to recall where they are, if they have not read the information of what page they are in on the browser tab, or on the top of the bowser. All of the ticket information is present to the users throughout the whole booking process, in a colored box. This is useful as it makes it not necessary for the user for users to recall the ticket details, which is better for users who has a bad short term memory or who are unwilling to be bothered to remember of information or can't recall it properly.

Flexibility and efficiency of use:

51

The loading speed of the system is fast which prevents delay in the system, this makes it efficient in loading in slower and older system. It is also an advantage in areas with slow internet connection. The design is simple this make it easy to learn how to use it and therefore users can become more efficient in using the system. No use of use database, questions sheet and inspection tests which can help developers recognize problems. In practice, the world is changing along with the time. Peoples tastes and behavior may change as well. Therefore, the system has mechanism to record the necessary information which allows developers to analyze later. For example, one group of data may be the frequency that clients choose a certain tickets. During a certain period, developer find it off-peak ticket clients are much more than normal tickets. Then relative modification, changing off-peak ticket to the default type, may be adopted.

Aesthetic and minimalist design: This designs works on the concepts of removing all the unnecessary information that is displayed on the page. So there is no unneeded information on the pages. For example on the booking process for the inputting the payment details there is no information about choosing a ticket to buy. This ensure that all the information that is displayed to the users is efficient for users to make informed choices as they advance forwards. Also by the removal of unnecessary information it prevents users being confused or being put off.

Help users recognize, diagnose, and recover from errors: When something doesn't work on the system nothing shows up this could be confusing to users as they don't know what the error was if something doesn't work. For some sections of the website if a page doesn't exist due to some reason there will be a message displayed when user clicks the link and the systems loads a message informing the user. It gives it in a clear way so user know what going on and it isnt their end that is causing the error.

Help and documentation: There is a help tab which is made present through the website, so it can be accessed at any time. The help tab is in an easily visible place to users and is a reasonable size which make it easy for users to see and access at any time in the website. A problem may be to some users that the color of the help buttons doesn't stand out from the rest of the website site, so for some users they may easily pass it and may take time for these users to locate it. Being in another color may be useful for example green or red.

52

All the help document is located in one page of the website so it can be easily found and it makes it more simple to look for the help needed which out having to navigate to different parts of the website. Having a whole wealth of help section under one page may be a frustration to some users as they may have to navigate throughout everything to just to find the help and this can be time consuming, The help could be relevant to where the help button was clicked. For example if the help button was clicked in the map section all the help topic related to that would appear when the help button was clicked. This would save time to the users who have limited time and need help.

7.2.3 Evaluation against persona

In practice, a system is designed for humans. The meaning of the online booking system for train is aimed to serve people online and make booking process more flexible. Personas are specific case describing the interaction between users and the system. Those users are the potential clients that the system need to provide convenience to. The features the system have is designed for those users. Therefore, one of the evaluations must be carried out against personas. Through the evaluation, the performance of the features can be estimated in a case approaching to real. related trade-offs could be obtained. Then different strategies could be carried out to meet the requirement of users. One of the examples is, through evaluation against personas, the system is especially meaningless for international people, but international people become generally important. The developer could make choices among features and generate a version to satisfy the sort of users.

There several assumption that need to be made before evaluating the system, One is the assumption that all the users will be using the system for the first time. Also when accessing the severity of the problem it can be divided into five categories which are as followed;

S1: Severe 1 means serious problem which should not be ignored. The problem leads to a significant inefficiency; it would cause disaster when users use the system.

S2: Severe 2 means quite serious problem. The problem will cause inefficiency to a certain degree. Or it would affect the running of the whole system.

S3: Severe 3 means it is a common problem. The problem will cause a little inconvenience. However, it would not affect the running of the whole system.

53

S4: Severe 4 means the problem is small. The problem may cause inconvenience, but user will not aware them.

S5: Severe 5 means the problem is not severe at all, which can be ignored

7.2.3.1 Persona 1 Mr. Chris Brewster

Scenario 1:

In the welcome page, the more button would be used to meet the requirement. Chris wants off -peak ticket. In the query, the ticket type could be modified in the panel obtained by pressing button more. Then select in the combo box of ticket type, and then make further searching.

The setting is reasonable. First of all, the season ticket belongs to special setting. However, it seems that users will not be informed the place that they can find instruction. The severity of the problem is S3. Because the system is designed simple and secure, which means users would find the place according to the knowledge or the experience.

For the people who do not know train ticket, it is recommended to put instruction in an explicit place. The second generation prototype is poor to this concern. People could not find instructions of using the system, and also, there is no place for them to see the difference between each sort of ticket. In fact, Chris is not supposed to know where can apply railcard. But in this case, he could apply for a 16-25 card so that he could get discount if he book an off-peak ticket. Therefore, the design seems to mismatch the requirement. The severity of the problem is S2

In the second page, the quick change would allow Chris to change departure place, destination and time in a convenient way. However, the website lacks parts of content of making quick re -search when other setting needs to be applied. For example, the number of tickets needs to be changed. People have to press the button, Home, which is in the menu in order to go back to the home page. The problem is the previous setting details

54

would loss. People have to re-input again. The problem rank S3, because the official website do in the same way, otherwise it would be in S2.

Scenario 2:

In this scenario, there is a requirement of buying a first-class ticket, getting ticket by post and share the tickets with his colleague. First of all, in the welcome page, he could search a first-class ticket easily by ticking the first-class box in the more panel. Then the second page would list all the first-class train ticket available for him.

In the case, the system is unable to provide the functionality of choosing the way of receiving tickets. Therefore, the system should includes the basic function of letting users choose a way to collect tickets. Especially for season tickets and first class tickets. However, the compensation is made. In the Confirmation page, users could choose a way to get the ticket reference. In practice, users could use a ticket reference to get the ticket or print the ticket in train stations, but a ticket can not be substituted by its reference. The problem ranks S4.

In addition, in order to share the tickets information with his colleague, the website should allow the function of printing current information as other big train companies does. Besides, although the reference does display the basic information, sharing the reference may be improper because it also contains some information of payment. In conclusion the problem ranks S3

Scenario 3:

Schedules changed in the case and also, he has to use mobile phone to purchase an e-ticket instead of normal way. A car accident happens in the middle way, therefore he missed the train which he should take. But he would like to book a ticket. In the system, an online request is available, clients could call the online help phone number. However, the website did not provide online help phone number in the welcome page whereas it is presented in the page sitemap. In such emergency situation, it will be wasting time to open another page to get the help information. In addition, the system contains no instruction notifying users the place. Therefore, the severity is S3.

55

Besides, people could use their mobile to access the website. But the tradeoff is some techniques are unavailable such as the calendar or inputting prefix. There are quick input button today and tomorrow, but they are placed in an improper place, the calendar, which makes the technique useless. Therefore the severity is S3

7.2.3.2 Persona 2 - Ms. Veronica Mars;

Scenario 1:

In the case, Veronica would like travel from Birmingham to London, According to experience, the train would take her more than one hour and a half. She would like to have a first class ticket with various services because she could not bear a time-consuming journey. This system could allow Veronica to search and choose firstclass ticket only. The extra settings are available in the web page additional information. And it would change according to specific train. However, the layout of those services is organized improperly. Features involved are involved line by line without the separate sign. In fact, the layout should also includes the overall view of all the features. In conclusion, the problem ranks S4

Scenario 2:

The scenario is, Veronica would like to make travelling plan. She intents to travel from Edinburgh to London. However, she has no idea where she would spend a longer time. And she does not want to be bothered by organizing transportation. Therefore, she is looking for the railway website for help.

However, the second generation website does not cover the kind of users. The reason is the planning of a long journey involves a number of factors. Efficient access to the train ticket is the focus of the system. Moreover, users could find information from the website. For example, users could find the local hotels offer, local maps in the the menu. Users could buy one ticket after they have already a clear figure about the journey in their mind. Besides, it is recommended to provide linkage of some travel agency website which could generate a long journey automatically. In conclusion, the problem ranks S5

56

Scenario 3:

The Situation is that after Veronica pressed the payment button, the page is timeout, but she does not know the state of the transaction. Using the system, there would be no unstable state, A transaction is finished after users click the confirmation button, the user will receive a message from her mobile to show transaction detail reference. Comparing with the transaction button only, confirmation page provides another state that make transaction process reliable because if users see the confirmation page, then it means the transaction has been done. And users could use the function listed on the confirmation page: text, email, message to get a copy of the receipt. If the user has registered in the website, users could check transaction history from their account online. In conclusion, the architecture meet the requirement of the people and reduced the problem to S5

7.2.3.3 Persona 3 - Mr. George Smith

Scenario 1:

George Smith is a new user to the system. George need simple and precise instruction information. He would like a video that could teach him step by step. There are several items that help user to master the system. First of all, after giving the basic information, the clear steps will show on the screen, and the steps are highlighted which notifies users about specific step that is undertaken. Secondly, the system uses simple structure. Nearly all the pages could been shown within the screen size. Thirdly, the system is backward free, which means users could step back to any pages. However, problems are existed. There is no instruction that shows where the people could find out tutorial video though it is existed and placed within the p age sitemap. In conclusion, the severity of the problem in the scenario is S2.

Scenario 2:

George is planning a short 3-day trip. Since he is not familiar with online booking system. He would like to get some related links or recommendations from our website. In the second prototype, we have considered two functionalities related to local travel information which are Hotel tab and Map tab on the menu bar. However, the interfaces of these two menu items have not been developed. The design is mainly concentrated on the booking processes. Assuming that menu has been developed. user could see the surrounding information using

57

the map and hotel. The system provides a platform that users could organize the transportation and accommodation. Besides, the instruction could be found in the sitemap. In conclusion, the problem ranks S2

Scenario 3:

The third scenario is that George wants to renew the rail card through the website. However, the design does not include the function to renew the railcard. The design is focusing on booking the train tickets. Though, the operation related to rail card should be placed in the unique website, for instance 16-25 rail card policy are showing in the domain: http://www.16-25railcard.co.uk/ , George should be able to find the instructions about the relative policies through the online booking system. The website does not include the function, which could decrease the experience of users. In fact the search bar does not consume significant energy and it is necessary to contain the button because it will make information more accessible Therefore the function should be considered in the future. In conclusion, the system does not meet the requirement in this scenario. The problem ranks S4

7.2.3.4 Persona 4 - Mr. Matt Hedge

When using the second prototype Matt will find it easy to navigate as the website has a simple layout and the buttons and links linking to different sections of the website is clear, therefore the chance of ending somewhere which was not intended is reduced.

There is also the concern with the system often presenting too much choices which has been reduced as the choices has been limited to what can be offered when buying tickets, however not in all places this can be reduced. For example when picking a ticket type there are many tickets that train companies sell therefore the prototypes fails to address this area. There is also a lack of information present on the underground system which Matt has pointed out and it has not been address in this prototype, also the concern of suggesting alternative routes is not available in the prototypes which would of been of use to matt, however notice of train delay on the homepage was found useful as it give some notion of disruptions, but no advice on alternative routes. The booking processes is still long, but seem to be quick and simple to do and the use of being able to save journey when logging is was also found to be a useful feature.

Scenario 1:

58

Matt has to be able to book a ticket in advance and forwards his receipt to the HR department of his company. On the homepage the times of the journey when to arrive or leave the station can be picked and there is a return journey options separate tickets don't need to be booked. He can then press next ands a ticket and go through the booking process to choose the tickets which are needed for departure and return. At the confirmation page Matt can send himself the copy of the receipt to his work email address and then forwards it to his HR department to claim travel expenses for himself. This feature of the system is lacking as he can't customize the email for example saying tickets for meeting at 9.00am. To summarize, Matt could have a ticket reference but Matt could not customize the email containing the reference. The severity of the problem is S1.

Scenario 2:

Matt needs to book a ticket which will enable to travel to his new client office in London as well as look up the related travel information, for the new route he may need to take. There is a feature under the tab Maps on the top of the websites which will allow Matt to look up the train routes, in this case for the underground route. However there is no feature that will allows check what tickets can be brought on for each rout. Therefore this has to be checked manually while using an external link, which a time consuming process and annoying, to navigate through more than one site at a time and search for the relevant information. Once checked what ticket is need, from the home page the details can be entered and by pressing the button more he can add the rail card as it states. There different options for tickets types which can reduce the cost but there is no feature to search for a cheap type of tickets, as there is no way of knowing if the advance ticket will be cheaper than the normal ticket. When buying the ticket the system does not bring up the related information about the routes, so it needs to be looked up separately by navigating to the maps tab and search there. The problem that the system lacks underground system has the severity of S2

Scenario 3:

Matt needs to cut back on his living cost and he has identified that the he could make some saving on his travel costs. The system lack the features which can be used to compare the prices of different types of tickets for example season tickets or single type tickets. To achieve this with the current system price will have to looked at individually and compared manually. The process will have to be repeated from the home page even though in the booking process one can change the times or stations, but it lacks the features to change the ticket type. The severity of the problem ranks S3.

59

7.2.3.5 Persona 5 - Dr Iqbal Wahab

In this system, Iqbal would find it the system very easy to use because he could click his own language in the Multi Language Panel in the welcome page. The design of including multi-language is useful to all foreigner living in the UK.

Scenario 1:

Iqbal would like to book an advanced return ticket from London to Bristol at lower price for short visit to University of Bristol. In addition, he is looking for a hotel which is near the University. In the second prototype, the first step of booking process will show the timetable along with the cheapest price for each time slot with fixed ticket type. By default, the ticket type will be set to normal which will automatically match the lowest price and show on the table. It is an advantage for Iqbal as he preferring to book cheap ticket in advance. However the ticket type has to be defined in the home page within the More option. It cannot be modified when the user is proceeding to the next page. Moreover, the return journey could be booked on the same page which is listed below the outbound journey. The order summary label on the right would keep the selected ticket detail updated as well as the current total price to remind the Iqbal about the date and ticket to prevent him from buying the wrong ticket in the end. Furthermore, the Hotel tab could help him booking a hotel. As mentioned in the previous scenario, the Hotel tab interface is not developed. At this stage, Iqbal cannot use this function yet. The problem severity is S4.

Scenario 2:

The scenario is the initial train has been cancelled in the middle so that Iqbal is confusing about the alternatives that could take him to the expected destination. In detail. Iqbal want to know about the middle station he is in, he wants to know if there is another train which could bring him to the destination and when will that train come. Besides, he want to find out if any other transportation could do the job. Moreover, he wants to have compensation from the train company because of the cancellation of train. When using this website, clients would know where to look the information. First of all, the system contains a web page called Map which is used to inform where the user is and it where list the detail about the infrastructure around the train station and direct the user to the related website. Secondly, the website contains link of sitemap which contains policy

60

describe the situation of compensation. But in the scenario, the most efficient way is asking the staff in the train station or calling the telephone hot-line. The disadvantage of the second generation prototype is that it did not include instructions about the proper way to use the website. The problem severity is S3.

Scenario 3:

Iqbal would like to read the web page in his native language, receive the e-ticket and inform his friends to pick him up at the station. In our design, there are 27 languages available. It is occupied about 1 / 5 of the page which will get the international traveler attention. In addition, the common language are listed and others are hidden within the More option so that the layout structure remains clean and clear. As to the e-ticket option. Apparently, the design does not provide a ticket collection selection. Although the existing systems are normally based on ticket collection at the station. As a result, it is not possible to get an e-ticket. On the other hand, there is an alternative way to share the ticket information by e-mail and text message on the final Confirmation Page. This function could supply information for Iqbals friend to plan the arrival time t o the station. In conclusion, the severity of the problem ranks S5.

7.2.3.6 Persona 6 - Laura Domain

One of the older groups of user who could use the system to book tickets. Lives in the countryside in the Uk. Not very good at using technology especially new systems. As this train booking system has been made to be very simple to use this reduces the stress for Laura when using this new system. This makes it more easier her to navigate through the website. As the system design is simple and only gives related information it is easy to understand, but it assumes that the user has used the system before, this puts Laura at a disadvantages as she may struggle to understand some parts.

As there are many ticket types, such as off peak or advanced, the system has a section called tickets which dedicated to explaining the these types of tickets. However this isn't very clear and this could be miss as it would be a guess that this information could be related here. Also to find information about train station map it is located under the map sections but this has the same downside as tickets as mentioned before. The system also lacks the features of pulling this information when booking a ticket and it needs to be done manually and this is put Laura at a disadvantage as she can't use the system very well.

61

The system also lacks the features to book hotels rooms at the same time as booking a ticket and gives information related to the area that may be visited, meaning the users will manually have to find this information. Looking back to the hotel the system does has a section for it but it has to be booked separately form the tickets.

Scenario 1:

Want to leave from the nearest train station and plans to pick up tickets from the train station after booking them in advance. Wants to look at train station information online and print out a train timetable. The systems lacks being able to search for a train station which is near as the user need to know the name of the station of where they want to leave from and the name of the station of where they want to arrive. However there is a feature that will allow to look for train station in the area which is called the map function, but there is no explanation on the systems which will direct the users, unless they figure it out themselves, this makes quiet of a disadvantage to Laura. Tickets are able to be booked in advanced online and it will give a reference code for that ticket as well tells the user where they can pick up the ticket. However this puts restrictions on the users as they are not able to pick what station they pick up their tickets from. Also there is no information on how to use the machine or it doesn't redirect the user to a website of where they have this information. This makes it harder on Laura as she is not good at using computers and could find this task very difficult.

This systems does support the printing off of trains timetables as it is just restricted to the live timetable of trains, which is more suitable to checking online then printing off as they change all the time.The severity is S5

Scenario 2:

Laura is planning a journey to the family home. She wants to send the tickets details to her family members. The systems does have the features which support the sending of the confirmation page that the website produces to email address which can be done once the link is pressed and the email address is type in. This might be relatively simple process for most users, but for Laura she might find this a bit confusing, as she expects to type an email address and press a send button, it said it can share but not what to do. There is no indication that there is this feature is present. So she could miss it unexpectedly as it very small. and on the bottom of the page. The severity is S3

62

Scenario 3:

Laura is booking a ticket in advanced but needs to be able to readily access all the information about the journey beforehand. When Laura use the second generation prototype, she is able to see the basic information including the train time, the path, cost, duration, situation and services available by using detail button in the second page. The website also provides train tickets with a range of train tickets type. However, the system is not able to list the tickets offer according to users preference, which mean comparing tickets against ticket type or against train. It is evitable that searching efficiency would significantly decrease if comparison is included. The reason is a complicated layout or framework would be introduced in the case which is resource-consuming, which increases the reading difficulty for users. Nonetheless, users could compare different type of tickets by copying the desk page and paste that information in another document. The feature of the website is easy searching. One shortcoming of the website is it did not provide the function of print in the second step which may be useful for the users who only wants to search information. Besides, the website may not includes all the possible offers because train companies would reserve some great offer to its own client. But the advantage is that the system hold offers a various train company sources. In conclusion, the overall structure of the second generation prototype in this scenario works properly. However the fact that the second page lack printing function would be a poor design. The severity is S4.

7.2.4 Empirical Evaluation of users

In this part of the evaluation the 2nd generation prototype was tested against a small group of testers who would use the system as a potential users and provide feedback on the experience that they had when using the system. When testing the train booking system the users would only be able to go through the system as they were buying a ticket as all the features of the systems have yet to be implemented yet as it was only a second generation prototype. Another important note to take was the user would only be able to test and use the booking system of the website, as that was what the system that was focused on being designed.

For this user test we regenerated a situation where the users are wanting to book a ticket in advance and they come to the website they search for the ticket they want to book and go through the process they need. Also during the situation they may feel that they need to use other functions such as booking a hotel. During this testing period the aim was to observe how the users would use the system in a realistic manner, this would then help identify areas that are problems during the test and how users interact with the system.

63

The techniques that was used during the user testing to gather data was to observer the user and write down their thought process on using the system, such as where they problemes with, what they felt was good. This would generate feedback on what users felt of the system and how it could be improved.

For the amount of tester that would test the product would be relatively small which would be around 3. The type of users that we would've like to test the prototype would of been the kind of user would the persona was based on, a frequent train traveler, user from outside the country and a older user. The group of tested did manage to cover all but the older users.

When testing users it was aim to measure how well users responded in these four main area; Efficiency; How much time was spent doing a step and how many where there. Accuracy; During the process how many mistakes did people users make and where they able to recover from it if the right information was provided. Recall; How much does the person remember on using the system. Emotional response; How does the user feel after using this system.

These result would then be matched up with the user requirement that was specified to see if the system has at least indented to do what it was designed for.

User tester 1; Background: Can use computer at a good level and is a frequent users of trains. When booking tickets for trains mostly use the ticket counter or machine at the the train station. However the user has used online booking system a few times to book tickets for a journey in advance.

Efficiency; They felt the the user controls were simple and they did not send of time learning how to use the system. There was a few steps that were taken when using the system for the first time. They felt that they way the system was design enable them it use it efficiently. However in booking stage of the website, they found they could skip stages stages of the booking process and wasted time on how to get back where they were originally was.

64

Accuracy; There was few mistakes made as the system controlled the way the user was to interact with it, so on the booking process the user made little mistakes. However some times it was found that the user curiosity got the better of them and they would click on links that were not related to to booking process, therefore increasing the mistakes that they made. It seemed that the user accuracy was reduced when they were trying to explore elements of the systems the user was not used to for example when the users though that the tickets tab would lead to the booking of tickets which it did not. All the time the user managed to re-correct the mistake without help or saasaint from the system. Recall; When using the system for the first time and when the user was asked to use it again to test their recall of the system it was found that they were able to recall the booking stage of the website well, from what they remember from their previous experience. Emotional response; The user did feel that the system was on the simple side and didnt through a lot in to the ofir face in the way information, so they had a nice browsing experience of it. However they did feel some frustration when using it as some section didn't make sense as button saying different things from what they expected giving them a negative light of the website.

User tester 2; Background: As a frequent user of computers has no problems in using them. Does not take the train a lot in the UK, as has come from outside the UK to study, therefore the users first language is not English. Does not take the train often but when does using the online train booking system to look for and book tickets online.

Efficiency; The users was able to get the understanding of how the system worked relativity quickly and what steps were needed to complete certain task such as booking a ticket by following what the user though was the logic of the system. However there were some inefficient steps that the user sometimes took such as trying to step some steps of the booking process but as a result had to end up going back to the beginning again. Accuracy; The user tened to make mistakes when going against the logic of the was the system was designed for example in the booking process going from the choosing ticket stage to the confirmation stage. As a result of this they would tend to confuses as to where they were and tended to make more mistakes on the system to correct them selves, as there were no help messages that were given by the system. Recall; Once using the system once they did not seem to have trouble on recall how the system work a second time as the user had seem to understand how the system worked and put it into practice when they used it again. Emotional response; The user felt the design of the system was too simple and did not give any impact and was sometime likely be be forgotten and not used again due to a weak impression that was given.

65

User tester 3; Background: Familiar with the usage of computers and has no problems in using them. Also as a regular user of computers will often using online train booking systems to book tickets from.

Efficiency; Took some time to be able to use the system as it was efficiently as it was designed for. Some unneeded steps or process were taken until the user was finally able to get to the end of the intended task. This was mainly as the user some time got confused as how to proceed, which may be due to bad understanding of the label of the links. Accuracy; The user seemed to make mistakes when they were confused on how to proceed forwards. An example of this is when the user wanted to book a ticket from the homepage they clicked on the ticket tab instead of entering the details on the home page. Recall; The users seemed to be able to recall how to use the system well enough after a second time and did not produce the same mistakes that they had made when they use the system for the first time. Emotional response; When they used the system for the first time the user seemed to get annoyed at the system as it did not open what the user intended when they used it. When it was used for a second time they seemed to have a bad experience of the system which did not give them a positive view of the system.

In conclusion to the feed back to the user evaluation of the system there were some important point that was noticed first looking at the positive feedback which was; The design is simple and not over the top, which made it simpler to use and also when using the website there is not an overflow of information. There is good use of colour on the system it doesn't make it look odd and the colour used mix well together and look good on screen. The steps which are used in the system are not complex and it follows a simple process where are not unnecessary steps added in. Moving on from the positive feedback there was a number of negative feedback which is also very useful as it can be used to improved the system and they are as followed; Some users found the the scrolling text on the homepage off putting as it was annoying or as it was moving they did not seem to be able to read it in time. Some of the command actions on the buttons are not constant, examples was found in the booking process, these should be the same throughout to avoid confusion.

66

Some links should be made more clear for example what does the ticket tab go to. Also maps doesn't say what it for maps of what? There is the problem with different screen size and there has been examples when it did not resize itself properly, it should do it automatically users don't want to zoom in on to every time they visit. Some of the information should be more easily accessible which out the users having to search for the information. For example if a user want to see related hotels there should be suggested hotels in the area user can click on without having to search for it separately.

7.3 - result and conclusion

From the results of the of all the 3 types of evaluations that was taken on the second generation prototype there are several results and conclusions that can be drawn up form this. These will be discussed in detail. One thing drawn up was that there was a lot of positive feedback on the simplicity of the website design, which was very simple to use for most users and it was quick easy and quick to simple to pick up on how to use the system when users were using it for the first time. The colour coordinate that was used did not put off user and did catch their attention when needed. Positive results were also drawn back n how the system did not try to feed the user too much information at once and only provide the information which was needed, however there were some fallbacks to doing this and this was mainly that it was felt that the system did not always give the user the information that they wanted, like related information for the station that the user may be leaving at. The information was easily readable to most users as there was no wall of text. However some time font size was an issues mainly to the users who have difficulty reading small text. Another common theme was due to the command word that the buttons and tab had, in most case it was said they were simple and easy to understand and in most cases in the system they were consistent, but they did change sometimes in the booking process for example, the next button sometimes change it command to confirm and this was found to confuse users. In other case the command words were too vague like the button with the link maps, lead to maps of what? With relation to usability of the system it was gather from the evaluation that it is useable for booking a train ticket and most feedback found on problem with however there were issues found when users wanted to use the system for something more such as booking hotel tickets or looking at the map of the local area, the system fail to provide the necessary support. In keeping in terms with the topic of system support it was also noticed that the systems sometimes failed to provide the necessary feedback to users when they encountered some errors in the system, as a cause users failed to know how to proceed forwards.

67

8 Summary and recommendation

8.1 recommendation based on the second generation prototype
Based on the completion of the second generation prototype there can be some recommendation that can be brought forwards.

8.2 summary of work

When doing the HCL project to design a system for users to be able to book a train ticket online while trying to address the and solve the problem that has been address in section 2.5. It can be said the second prototype was designed in a way that it tried to address most of problems which were identified and tried to implement a solution to solve them. However when designing the first generation prototype it was seen that not all of these solution were practical when implemented in the system, for example increasing the size of the font in the website, it messed up the layout of the website making it messy to read therefore it was removed. It could be said it was a challenging project to undertake and try to solve as many issues as possible while preventing conflict and causing more solutions to solve. As a result it could be said the final product of the second generation prototype did not solve all the problems that was outlined in section 2.5, but possible with the recommendation of section in section 7.1 these problems could be solved. If this project was to be undertaken again, the things that would be done differently would be to spend more time on researching way to implement the solutions to the identified problems, as well as research the user needs and requirements in more depths, in order to create a system that would be able to deliver with a wider range of user requirements.

68

9 Appendix

Figure 1 : The home page of prototype 1 of the first generation prototype

69

Figure 2 : Booking page of prototype 1 of the first generation prototype

70

Figure 3 : Welcome page of prototype 2 of the first generation prototype

71

Figure 4 : Train search page of prototype 2 of the first generation pro

72

Figure 5 : Live page of prototype 2 of the first generation prototype

73

Figure 6 : Payment page of prototype 2 of the first generation prototype

74

Figure 7 :Welcome Page of Prototype 3 of the first generation prototype

Figure 8 : Booking Page of Prototype 3 of the first generation prototype

75

Figure 9 : Additional Information of Booking Page of Prototype 3 of the first generation prototype

76

10 Referencing
Alan D. Janet F. Gregory D. A., Russell B.,2004, The use of color, Human Computer Interaction 3rd edition, Page 135, ISBN-13: 978-0-13046109-4 Alan D. Janet F. Gregory D. A., Russell B.,2004, Visual Perception, Human Computer Interaction 3rd edition, Page 15, ISBN-13: 978-0-13046109-4 Jason Yang, 28 December 2012, [online], Trends and forecast for 2013 touch panel market, Retrieved from: http://www.digitimes.com/Reports/Report.asp?datepublish=2012/12/28&pages=RS&seq=401 Alan D. Janet F. Gregory D. A., Russell B.,2004, Movement, Human Computer Interaction 3rd edition, Page 26, ISBN-13: 978-0-13046109-4 Mariella Moon, 8 March 2013, [online],People use tablets more than phones to surf the Web, but PCs still reign supreme , Retrieved from: http://www.digitaltrends.com/computing/pc-global-traffic-share-adobe-study/

Jesse James Garrett, 18 February 2005, [online], Ajax: A New Approach to Web Applications. AdaptivePath.com. Retrieved 19 June 2008. Retrieve from: http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications

Alan D. Janet F. Gregory D. A., Russell B.,2004, Human Memory, Human Computer Interaction 3rd edition, Page 27, ISBN-13: 978-0-13046109-4

Jacob Gube, Mar 15 2009, online ,website design tools,Retrieved from: http://sixrevisions.com/web_design/top-five-web-design-tools/

Egger, F.N. (2000). Lo-Fi vs. Hi-Fi Prototyping: how real does the real thing have to be? "Teaching HCI" workshop , OZCHI2000 , Sydney (Australia), December 14-19, 2000

Alan D. Janet F. Gregory D. A., Russell B.,2004, Nielsens Ten Heuristic , Human Computer Interaction 3rd edition, Page 27, ISBN-13: 978-0-13-046109-4

77

78