Optimizing User Attention

The proposed website design aims to improve user engagement and optimize mobile accessibility by incorporating images, adjusting font sizes, and enhancing color contrast. The design includes a responsive grid system that adjusts resolution according to screen-width. A questionnaire-based feedback session revealed issues with font, navigation, and color alignment, which were addressed in the new prototype design.

1
Running Head: HUMAN COMPUTER INTERACTION
Human Computer Interaction
Student’s Name
Institution

2
HUMAN COMPUTER INTERACTION
Human Computer Interaction
Introduction
Website design is a key factor that influences usability and its visual appeal to the target
audience. Studies conducted indicate that web design influences user perception and may impact
traffic to a website (Lee, 2010). Poor website design turns off potential customers and may
adversely affect web traffic. On the other hand, websites with an effective design visually appeal
to the users and enhance user interaction and engagement which is beneficial for any firm
(Hartmann, 2007). As such, many firms focus on developing a user-oriented design that can
appeal to users. Website design encompasses various aspects such as typography, color, space,
etc. These aspects are vital in defining the aesthetics of the design (Michailidou, 2008).
Incorporating these aspects into a website is essential in improving site usability. Also, it is vital
for developers to consider human-computer interaction principles in order to build effective and
engaging designs (Shneiderman, 2010). In this report, we evaluate a website used by Public
Transport Victoria, an authority responsible for managing public transport in Victoria State.
We’ll place emphasis on learning users who use the system and the tasks they perform. Based on
the analysis, a prototype for the system will be developed.
User Analysis
Understanding the users
Passenger Transport Victoria is an online system that serves a large audience. The primary
audience consists of passengers traveling to various destinations. These passengers belong to
different age groups, cultures, races, and ethnicities. They want to use the system to get tickets

3
HUMAN COMPUTER INTERACTION
that can enable them to board the bus. Through the online system, users can make journey plans
and purchase tickets in advance.
Users’ goals for this website include being informed, create travel schedules, and buy travel
cards. For the users to remain informed, the website has to provide updated travel information
such as the status of travel routes, details about various destinations, information on how to buy
travel cards, as well as modes of transport available near the airport or train station. To create
travel schedules, the website has to allow users to sign in into their accounts and identify the
destinations they want to. Having determined their destinations, users can choose the timing of
their journey to create the travel schedule which is saved on the website. For users to purchase
travel cards, the website allows them to select their destinations and pay for their cards. Based on
the analysis, it is apparent that the website is designed to meet users’ goals.
Various individual characteristics may affect behavior with the system. People with physical
disabilities face challenges when using systems that are not optimized for accessibility (Harper,
2008). If the online system is not accessible, such people will have problems using it. People
with poor concentration need a minimalist design which has less clutter (Albers, 2011). Given
that the system displays a lot of information on its web pages, it may not appeal to them.
Users have knowledge about the functionality of the website including the navigation options
which assist them to perform their tasks effectively. Through the website, passengers remain
updated on various travel-related issues hence can plan their journeys which is vital in helping
them to save time when traveling. Additionally, the website saves them the hustle of going to the
station to buy a travel card as they can order it online.

4
HUMAN COMPUTER INTERACTION
Users of the website are interested in saving time and being informed. The website is designed to
align with these interests. By providing an online purchase feature, the website allows users to
purchase their travel cards online instead of visiting the station where they may have to queue.
This saves users’ time which is spent doing valuable things that can benefit them. Users also
seek to be informed about their destinations and modes of transport. The website provides this
information in a well-designed and understandable manner that keeps them informed.
Target users may or may not have experience in using similar websites. A majority of them are
tech-savvy people as they use smartphones to access websites. Given that the online system is
designed as a website, most of the users may be familiar with the user interface and find it
usable. For those who have not used such a system, the website incorporates usability and
simplicity concepts hence is easy to use for noobs. Through this website, users seeking to travel
to any destination can access it, reserve, and pay for a ticket as well as read content provided in
order to remain updated.
The website serves a broad audience consisting of people with varying characteristics. Typically,
the website is used by adults irrespective of gender. Users have reached at least secondary
education level and live within the state of Victoria. They have different culture and nationalities,
but a majority of them are white Australians who form the majority of the population in the state.
Task Analysis
Users interacting perform various tasks. Key tasks include planning journey, purchasing travel
card, and viewing information. To plan their journey, users leverage journey planner, a key
feature included on the website. The feature allows users to select starting point of their journey
and their destination. Users can select date and time in which they will travel. Through this

5
HUMAN COMPUTER INTERACTION
feature, the users can be matched with the bus, train, or coach that will be traveling at the time
selected. The website allows users to purchase myki card which is a travel card that is used as a
pass when traveling on trains, trams, and buses. The website provides a purchase feature where
users can use online payment methods to pay for the card.
Another key task is viewing information. Information provided on the website include
timetables, projects, locations, etc. Users interact with the site to view this information. The
navigation options enable the users to navigate the site to find specific information. For example,
users can view the timetable of various transport modes by selecting the ‘Timetables’ option.
Users who select this option can view the timetable for metropolitan trains, trams, buses,
regional trains, and coaches, as well as regional buses. The website allows users to view real-
time information for trains, trams, and buses. For this information to be displayed, users have to
search for a station. Additionally, users can use the navigation to find information on various
places within Victoria State and projects being implemented.
The website relies on the functions of the computer and user. The computer is the gateway
through which the website is accessed. It is displayed on a browser where a user can interact with
it. It achieves its objectives when the user interacts with it. That is, the user has to navigate the
site, sign in into his/her account, perform various transactions, etc. The key functions of the
website involve informing users and supporting user transactions. These functions are dependent
on user interaction with the site. That is, users have to view the pages in order to read content
provided which informs them about various issues. Also, users make transactions on the site by
inputting data such as destination, personal details, etc.
As expected, the system tasks align with the user goals. The goals of users are being informed,
purchasing travel cards, and creating travel schedules. System tasks identified include providing

6
HUMAN COMPUTER INTERACTION
content and supporting user transactions. By providing detailed content, the system supports
users’ goals of being informed on various issues. The system task of supporting user transactions
enable users to buy travel cards and create their travel schedules. When users encounter
problems, the system produces messages that inform them what to do. For example, when
incorrect login details are used, the website provides a warning message informing the user of
the errors.
Proposed design
The proposed design incorporates a minimalist approach whereby only necessary information is
included on the web pages. Typically, the design will have three main sections: header, content
section, and footer. The header will be designed to contain elements that reinforce brand identity
and allow users to navigate. That is, a brand logo will be displayed prominently on the header
which is essential in grabbing user attention. The navigation menu will also be embedded in the
header to help users find information on other web pages of the site. The navigation will be
simplified by only including relevant menu links. This will enhance clarity of the navigation and
help users to find information easily (Fang, 2007).
The content section is the main part of the website which displays content to the users. As such,
it has to be structured in a manner that enhances visibility and readability. Grid columns will be
used to display information on this section. Three columns can be used on the homepage to
display information. The columns separate the content and make it easily visible. By doing this,
the site can effectively showcase the content it has to offer. White space can be used in the
content section to reduce clutter (Golombisky, 2013). Using the white space in the website to
differentiate content groups is effective in improving visibility and site usability (Mifsud, 2011).

7
HUMAN COMPUTER INTERACTION
Also, the footer will be optimized for visibility. The footer will display the sitemap and copyright
statement.
With regards to color, the website has to incorporate appropriate colors that give a contrasting
look to enhance its visibility. The color palette that will be used for this site includes violet, light
green, black, and white colors. Violet color will be used on the header, a part of the homepage
and the footer. Light green will be prominently used in the content section. Black and white
colors will be used as text colors to improve the visibility of site content.
The system design has to focus on visitor’s attention. Since the goal of the website is to
encourage to take action such as viewing information and interacting with various site features, it
has to be optimized for users. Instead of using pop-ups to convey messages, the design of the
website will enhance content structure to ensure it grabs and maintains user’s attention. The
website will incorporate spectacular images to reinforce content. Images are key in maintaining
reader’s attention and reinforcing the points highlighted in a post (Cyr, 2009). Images are also
displayed on the homepage to make it appealing to users. Incorporating images is instrumental in
improving the visual appeal of the website to users (Phillips, 2009).
The website design will display four screens which include the homepage, purchase card, view
information, and about. Each of these four screens provides unique content that aimed at
informing the user or supporting transactions. The design will be optimized for mobile devices.
A mobile-first design approach has to be adopted when designing the website to ensure it is
compatible with all devices irrespective of their screen-width. The website will incorporate a
responsive grid system in order to adjust its resolution depending on the screen-width of a
device. The grid system can improve the responsiveness of the website and ensure all web
elements are adjusted to fit on any device used to access the site (Gardner, 2011).

8
HUMAN COMPUTER INTERACTION
Design

9
HUMAN COMPUTER INTERACTION

10
HUMAN COMPUTER INTERACTION

11
HUMAN COMPUTER INTERACTION
Feedback
To assess the effectiveness of the proposed design, feedback was obtained from four people who
reviewed the interface. A questionnaire was used to collect their views on the data. Based on the
data collected from the four users, some design issues were identified and recommendations
were made to resolve them. Key design issues noted include inappropriate font, narrow
navigation, and color alignment. The users recommended for the colors used in the prototype to
be adjusted in order to enhance the readability of the website. The Colors should be organized to
create a contrasting look that makes content displayed more visible to users. The text colors

12
HUMAN COMPUTER INTERACTION
should also be adjusted to ensure they stand out in the background. With regards to the font used,
Calibri font is not an appropriate web font. Thus, the web design should incorporate
recommended web fonts that can make the text displayed readable. The navigation was reported
to be narrow and didn’t appeal to users. It was recommended that the navigation should be given
adequate padding and incorporate shades of color to indicate active navigation links.
New Prototype

13
HUMAN COMPUTER INTERACTION

14
HUMAN COMPUTER INTERACTION

15
HUMAN COMPUTER INTERACTION
Conclusion
As discussed, users’ goals for the website assessed are purchasing travel cards, creating travel
cards, and being informed. The users leverage the site to remain updated on various travel-
related issues and buy travel cards which can enable them to use various modes of transport
available in Victoria State. The website is designed to support users’ goals as it includes features
that help users to achieve their goals. The system provides a lot of content which is aimed at
informing users about the transport modes available as well as various places and transport-
related projects being implemented in the state. The website also provides features which allow
users to perform transactions such as creating an account, purchasing travel cards, etc.

16
HUMAN COMPUTER INTERACTION
The new prototype proposed for the website assessed incorporates a minimalist design in which
only relevant content is included. The color palette used for the design gives a contrasting look
which is aimed at enhancing visibility. The prototype also uses images to improve readability
and is optimized for mobile devices. Design issues raised during the testing phase were
addressed in the prototype redesign.

17
HUMAN COMPUTER INTERACTION
References
Albers, M. J. (2011, October). Tapping as a measure of cognitive load and website usability.
In Proceedings of the 29th ACM international conference on Design of
communication (pp. 25-32). ACM.
Cyr, D., Head, M., Larios, H., & Pan, B. (2009). Exploring human images in website design: a
multi-method approach. MIS quarterly, 539-566.
Fang, X., & Holsapple, C. W. (2007). An empirical study of web site navigation structures'
impacts on web site usability. Decision Support Systems, 43(2), 476-491.
Gardner, B. S. (2011). Responsive web design: Enriching the user experience. Sigma Journal:
Inside the Digital Ecosystem, 11(1), 13-19.
Golombisky, K., & Hagen, R. (2013). White space is not your enemy: A beginner's guide to
communicating visually through graphic, web & multimedia design. Taylor & Francis.
Harper, S., & Yesilada, Y. (Eds.). (2008). Web accessibility: a foundation for research. Springer
Science & Business Media.
Hartmann, J., Sutcliffe, A., & De Angeli, A. (2007, April). Investigating attractiveness in web
user interfaces. In Proceedings of the SIGCHI conference on Human factors in
computing systems (pp. 387-396). ACM.
Lee, S., & Koubek, R. J. (2010). The effects of usability and web design attributes on user
preference for e-commerce web sites. Computers in Industry, 61(4), 329-341.

18
HUMAN COMPUTER INTERACTION
Michailidou, E., Harper, S., & Bechhofer, S. (2008, September). Visual complexity and aesthetic
perception of web pages. In Proceedings of the 26th annual ACM international
conference on Design of communication (pp. 215-224). ACM.
Mifsud, J. (2011). An extensive guide to web form usability. Retrieved, 3(09), 2014.
Phillips, C., & Chaparro, B. (2009). Visual appeal vs. usability: Which one influences user
perceptions of a website more. Usability News, 11(2), 1-9.
Shneiderman, B. (2010). Designing the user interface: strategies for effective human-computer
interaction. Pearson Education India.