HCI-Focused Web Design: A Case Study of Sydney Toll Roads Portal

This report presents two design concepts for a web portal for Sydney Toll Roads, focusing on Human Computer Interaction (HCI) principles. The first design emphasizes simplicity and visual richness with features like user registration, search, and interactive maps for toll payment. The second design prioritizes ease of use and familiarity with high contrast, image-based links, and predictive design elements. The chosen design, Design Two, adheres to key HCI principles such as learnability, ergonomics, consistency, and robustness, ensuring a user-friendly and efficient experience for road users.

Human Computer Interaction: Web Design for
Sydney Toll Roads

Introduction
 Sydney Toll Roads is seeking a web portal to
interact with road users and other stakeholders
 The design of the mobile web interface
(application) must both be functional and easy to
use
 Interface must be easy to learn and navigate
through
 Requires use of HCI (human computer interaction)
principles

Introduction
 Some important principles in HCI include;
 Familiarity/ learn-ability
 Ergonomics
 Consistency and standards
 Robustness
 All these must be adhered to during web design

First Proposed Design Concept
Simple interface with few
colors used
User can register or log
In to their accounts
Has a search bar for
easy searching
Images used for a rich
visual experience

First Proposed Design Concept
A call-out shows activity
and the image holder has
road/ toll station picture
The are various buttons (in
blue) where the user can
select desired tasks such
as Pay Toll, Inquire, View
their History or check
FAQ’s

First Proposed Design Concept
Selecting pay brings a new page with a
calendar to choose date and an
interactive map that self updates
depending on location and planned
trip
User can search for their destination
easily
A feedback button helps them know
their progress
Selecting a route gives toll stations at
the bottom section automatically
Map features inbuilt to enable easy use

Home buttons form links to other
web pages
After selecting route/
destination, the use
can then select their
payment method and
select period of
payment
Information is given on
their details on the call-
out and they can then
confirm their choices

A page with user input and
feedback
After selecting payment
method and route,
user will be directed to
add vehicle details
A call-out gives
feedback and activity
details

Elegant use of text on a
contrasting background
The page shows details
of activity such as
amount paid and route
Visual map shows route
and details such as
distance

Second Design Concept Proposal
 Balanced home page with buttons and legible text
easy to learn
 Image holders on home page are links to other pages
 Easily legible and reachable help button and a button
to access more menu items
 Predictive design where most used features are
shown on the home page
 Easy to learn and smooth interface

Second Design Home Page
High contrast for easy
visibility even in
sunlight
Direct image based links
for most commonly
used features such as
router planning (map)
and Payment

Clicking button leads to another
page
 Uniform use of buttons
 Buttons placed at the same place in all instances
 This ensures familiarity and continuity
 Use of high contrast between text/ images and the
background
 This makes navigation easy
 Feedback and interaction where a user can
calculate charges

Link to another web page
A user can register (or
log in) and the
interface is easy to use
They can then proceed
to make a payment
The workflows are
smooth and logical/
well linked

Payment
Selecting payment enables users to
add a payment method (card)
Drop down menu helps in choosing
card type, with instructions given to
‘select from drop down menu’
The user will then enter card details
and can then add card
Text at bottom of page gives more
information
Feedback after entering card details
shows users their progress

Recharging/ Making Payment
The user can then
recharge their accounts
Feedback given for every
action in real time,
along with suggestions
Simple +/- buttons to
easily adjust recharge
amount
Legible button for
payment confirmation

Adding Vehicle(s)
After making payment
and confirming, user
can then add vehicles
Easy to use interface for
adding vehicle(s)
Option for a rented car
Confirmation button for
vehicle details

Route Planning
Route planner available on next
interface
Users can use search button to input
origin and destination
Axle information given as well as
direction button
Interactive map shows route to be used
along with toll stations
Feedback given for route cost for toll and
time taken as well as distance
Clicking the map acts as confirmation
(transferability of tasks ) to make
navigation easy.

Chosen Design Principle
 The chosen principle for the Sydney Toll Roads website is
DESIGN TWO
 The design follows and adheres with the core principles of
web design in context of HCI I.e:
 Familiarity/ learn-ability
 Ergonomics
 Consistency and standards
 Robustness
 Also easy to learn and use with high contrast features for easy
legibility and logical smooth task flows