Add to Collection
Tools Used


Adobe Flash Professional

View Gallery



Coursework for university that required the creation of an attractive and usable website for people of all abilities and levels of computer liter… Read More
Coursework for university that required the creation of an attractive and usable website for people of all abilities and levels of computer literacy. Read Less
HCI Coursework in Interaction Design
This prototype design of a flash website was for a fictional client, 'FlyGreenwich'.  For the client, we had to make an attractive, easy to use and cost-effective interface in which customers could book flights online. 

The main focus here is not necessarily the content but the consideration of HCI principles throughout.  This is merely a prototype and as such does not implement the full functionality that would be expected from a final version.

The colour choice was decided after several prototype screenshots were made using different colours.  Black and white seemed to be the most logical and pleasing on the eye for this kind of service.

Throughout this project, there will be annotated screen-shots showing the steps a user would go through to complete a flight order.

This will be the first page that the user will encounterupon launching the interface.  It can beseen that the default font size is set to “medium”, as it is a safemiddle-ground in which the average user can feel comfortable with.  Because this is a prototype, the font sizechange is only available on this page, but it demonstrates that it can and willbe applied throughout if the interface was to be completed.  The drop-down combo-boxes and radio buttonsare present for the user to alter to their desired flight booking needs, beforeeventually checking the available fares.

The user is able to choose from any of the departure andarrival destinations from a combo-box.  There is a standing issue whichconcerns the ability to choose the same location for both departure andarrival, although this is a database-related matter which requires a deeperknowledge of programming.  For theworking prototype, the default depart/arrive locations have been set to “CityAirport” and “Norwich”, respectively. 

The date selection isseparated into 3 combo boxes (day, month and year respectively) which allow theuser to be very specific as to when they wish their flight to be booked.  This can be done for both depart and returndates (if the user chooses a return ticket) but at present does not affect theoutcome of the following page, prompting users to choose a flight plan.  The year goes up to 2015 as it is assumed bythis date that FlyGreenwich would have been long since updated. 

Up to 5 passengers canbe chosen from a drop-down menu.  Thereason for making the maximum number 5 is that this is the average family sizetherefore it would be logical to set it to this number, as it is unlikely that5 tickets will be purchased at one time. With this being said, if a group of people such as school trip was towish to book tickets, they would have to do it 5 at a time which is not ideal;this could be a future development for this interface.

When the user selects ‘one way’, the return date drop-downboxes become hidden.  When the ‘return’button is selected, it becomes visible (return is default).  This was done by putting a black box on frame2, which is visited when the one way button is highlighted.  There was an issue with this, however, as thecombo-boxes were still present even though they were not visible.  This meant that if the user clicked on thearea where they once were, a drop-down menu would still appear out of theblackness.  This was eventually rectifiedby simply removing the boxes on frame 2, thus eliminating the issue.

After the user has set up their preferred flightdetails, they are presented with a flight plan screen, which allows them tochoose a plan that suits their needs.  Forthe purposes of the prototype, plans available are for all destinations, as anexample of the layout and functionality expected.  In the final version, all the flight planswill revolve around the destination that the user chose previously.  Yet again, this requires a specific knowledgeof programming and database implementation.  Delayed and cancelled flight plans have been displayed to show what theuser may expect to find on some occasions.

The first choice inthe list is already highlighted by default; the user just has to make aselection if the first choice is not to their liking.  The purpose of having some highlighted bydefault is to avoid user errors concerning the pressing of ‘Submit’ with noplans selected.  The cancelled flightscannot be selected, but instead show up red and have a strike through the areathat usually displays the radio button.

After selecting a flight plan and confirming theorder, the user is taken through a “processing – please wait” screen beforearriving at the confirmation/payment screen. FlyGreenwich has not been able to set up an online payment, but as analternative the user is given a confirmation number which needs to be citedupon phoning the service.  This can beeither spoken out loud or keyed in using the phone’s keypad, which stillcontinues the accessibility aspect beyond the functionality of the interfaceitself.
The main page has a link to a special offers sectionwithin it.  Upon visiting this link, theuser is presented with a similar screen to the flight plan screen, except thereare just two plans to choose from this time. The final interface can be expected to have changeable offers as timeprogresses, but at present it just displays the Dublin offer shown on the homepage.  The colours of the flight planoptions are slightly different from each other to visually depict thedifference to hard-of-sight users.
The hotels page is designed to make users aware of the accommodationavailable at the destinations that FlyGreenwich visits.  Each picture has a corresponding linkattached to it which, when clicked, navigates the user to an externalwebsite.  This is a very visual and farmore interesting way of navigating to web pages, as usually a text-based linkis displayed instead. 

It was decided thatexternal links to the hotel services was to be implemented, as opposed to thecontent within the interface actively changing. The two decisions for this were that the layout of the sites would becompromised when scaled down to the resolution of the interface and for thefact that FlyGreenwich does not specialise in hotel booking, so applying suggestedalternative services was the wise choice. 

Very basic in premise, the “About” section merely citesFlyGreenwich’s aims and services in case the user is curious as to discoversuch information.  It is a standard ofmost sites to have this page in it, although it can be dismissed as ‘filler’sometimes.  This exists if the user has acuriosity as to why FlyGreenwich exists and how it came about, as well as itsaims and mission statement.  
The site map is for users who wish to see an overview of thefull navigation possibilities of the FlyGreenwich interface.  This is a text-only version of the graphicalnavigation for those who do not find it easy locating the inks within each page(as well as giving the URLs for the picture links from the hotel page) and wishto see exactly how the interface is set up. 

This is traditionally used for larger site but seeing asFlyGreenwich is aiming for usability it was included in this interface.  Additionally, due to the text-based nature ofsite maps, they can be used so that search engines can find the links on awebsite and direct the user to it, via Google for instance.