Designing The Sydney Toll Roads Website With Principles Of HCI

Design 1: a simple, high contrast interface

Human Computer Interaction (HCI) is a study area that is concerned with computer technology design and specifically how humans interact with computers. The focus of HCI is the interfaces of computer systems such as software or applications and how best they can be designed to make it easy for humans to interact with the interfaces. The aim is to ensure humans are able to interact with these interfaces in a novel fashion/ manner. HCI is at the intersection of behavioral sciences, computer science, media studies, and and design. The goal of HCI is to ensure easy and adaptive usability (Zaphiris & Kurniawan, 2007), (Dix & Shabir, 2011). The Sydney Toll Roads is in the process of having an online presence and will require a web portal that is designed with the principles of HCI so that all users can be able to use it with ease and adaptively. The web interface must be easy to learn and navigate around, as well as have a suitable color scheme and mixture of multimedia and text. This paper proposes two main designs for the Sydney Toll Roads website and then selects one suitable one with detailed explanations and justifications given for why one design has been chosen.

The first design as shown below is motivated by simplicity as the home page of the website below shows

The home page has a prominent logo at the top and a search button. The user can then enter their names and log in or register as new users for the system.  Once logged in, their log/ in status is shown on top left hand side while the top right hand side tracks their activity at the site. There is still a search button where the users can seek information. An image holder is placed to show a toll station or car. Below are buttons that are links to various functions, including Pay Toll charges and Making Inquiries.

The user can then find a toll station or road and select; the interface is designed so that as they select their routes, the toll stations appear at the bottom and automatically updates the information. A calendar is available so the user can select their travel dates and times

Selecting the payment brings up options for payments (a month or year, or just for the use period)

After selecting payment period, the user then selects their vehicle details (make and model) as well as give insurance information. They can make the payment, with a call out button available to tell them to make some changes while giving their payment details as shown below

Design 2: a rich, flexible interface

The tolll payment details will be shown, along with their travel route and a confirmation SMS sent to them, along with other text information.

The home page is shown below;

This uses a simplistic high contrast design as shown above. It has the logo and an image either of users’ car or a toll station in the image place holder. The home page has a log in/ register button and uses icons with images that link to other pages for the basic/ main tasks of payment, vehicles, or accessing the map. One can seek more information by clicking more button or obtain direct help by selecting the ‘HELP’ button.

Clicking on ‘Payment’ opens a window where the user will enter their details (if unregistered), otherwise registered users go directly to the payment page.  

On the payment page, a user will add cards for payment and put details and confirm by clicking ‘ADD CARD’

The payment details can then be updated by recharging their account; selecting ‘MAKE A PAYMENT’  will show details of their balance and easy buttons are added for increasing or reducing the amount, without having to type. The page gives feedback, such as default recharge amounts and the user can then confirm payment after selecting the amount; the ZIP code is shown by default based on their detail data.

KKKKK

After recharging, the user can then add vehicles and confirm as the screen below shows 

Another important feature in the app is the route planner shown in Fig B above where the user can select where they are going and the application automatically computes the toll charges based on the toll stations, while showing the route to use as well as information such as distance and time plus total charges

Based on the two designs proposed and depicted in wire-frames above, design two would best suit the needs of Sydney Toll Roads. The rationale for choosing the second design is that it factors in most of the HCI design principles and elements one of which is familiarity/ learn-ability (Kurosu, 2014). The website has been designed in such a way that the main buttons and the information they contain remain the same (uniform and standard) for all the pages in the site. This is so that the user remains familiar with their navigation, for instance, navigating to another page is made easy. Consistency and standards is another principle adhered to in the design such that the color schemes for the different web pages in the website remain the same (McKay, 2008). This further makes it easy to navigate around; there are no pages that are starkly different from the others; this helps make it easy to navigate and move around the website. Another principle that makes the second design the chosen/ preferred one is that it adheres to the principles of ergonomics (Falzon, Gaines, & Monk, 2013); The home page has image place holders that can be clicked to perform various functions, such as making payments. Another HCI design principle for the website is robustness where the user can get direct feedback (Stephanidis, 2009). This is done with the use of a help button that gives feedback based on user actions by monitoring activity.  Further, feedback is achieved by having a help/ chat button where someone can click on and get instant help from a help assistant at the back end of the website. In addition, there is a web form where an individual can enter the details of their cars and calculate their charges for the toll stations, depending on their location.  

The use of the image place holders enhances the flexibility of using the website as it is based on the principle of task transferability  (Lowgren, n.d). the overall design is made in such a way that tasks flow smoothly through a rich interface that is simple and elegant. The interface is easy to use due to high contrast to enhance visibility even when used under the sun.  The image holder navigation system makes it very easy to learn and use the application. Large text is used in bold, also with a high contrast for ease of reading even for those with eyesight problems. In general, the second design incorporates many principles of HCI; the design is simplistic with text and images placed with a highly contrasting background to make it easy for users to seek information. Anyone at any age will quickly learn to use the system as the task flows are logical and easy to learn. At first visit, the user will get to gather a lot of information, making the website very easy to use and navigate around. This is in contrast to the first design in which there is no uniformity and the look and feel is not as elegant as the second design. The first design has different placed buttons in each different web page meaning familiarity and consistency is lost at some point.

References 

Dix, A., & Shabir, N. (2011). Human-Computer Interaction and Web Design. Alandix.com. Retrieved 27 November 2017, from https://alandix.com/academic/papers/web-hci-2011/

Falzon, P., Gaines, B. R., & Monk, A. F. (2013). Cognitive Ergonomics: Understanding, Learning, and Designing Human-Computer Interaction. Burlington: Elsevier Science.

Kurosu, M. (2014). Human-Computer Interaction. Theories, Methods, and Tools: 16th International Conference, HCI International 2014, Heraklion, Crete, Greece, June 22-27, 2014, Proceedings, Part I. Cham: Springer International Publishing.

Lowgren, J. Use-oriented web design: HCI techniques. Jonas.lowgren.info. Retrieved 27 November 2017, from https://jonas.lowgren.info/WebDesign/webhci.htm

McKay, E. (2008). The human-dimensions of human-computer interaction: Balancing the HCI equation. Amsterdam: IOS Press.

Stephanidis, C. (2009). Universal access in human-computer interaction. Applications and services: 5th international conference, UAHCI 2009, Held as Part of HCI International 2009, San Diego, CA, USA, July 19-24, 2009, proceedings. Pt. III. Berlin: Springer.

Zaphiris, P., & Kurniawan, S. (2007). Human computer interaction research in Web design and evaluation. Hershey, PA: Idea Group Pub.