Analysis of HCI Principles in Website Design: A Case Study Approach

This report analyzes a website's design, focusing on the application of Human-Computer Interaction (HCI) principles to enhance user experience. The analysis examines key aspects such as information overload, mystery meat navigation, and the use of visuals and emotional elements. The report identifies areas where the website could be improved, including better organization, clearer navigation links, and more engaging visual content. It emphasizes the importance of considering user needs, cognitive load, and the overall impact of design choices on user satisfaction. The report also discusses the differences between web-based and mobile-based website design, highlighting the need for responsiveness and optimized interfaces. The conclusion stresses the importance of integrating HCI principles to create user-friendly and effective websites.

Human Computer Interaction1
Human Computer Interaction
Name
Course
Institution
Date of Submission

Human Computer Interaction2
When designing any website, one has to put in mind the principles of human-computer
interaction so that the site may come out as user friendly and successful in terms of achieving its
sole purpose. When designing any web site, the main idea that a designer carries in his or her
mind is to pass information. A website should be eye catching and acceptable to your target
population. A website that always wins the day is the one that stresses on making more use of
visual things rather than texts. Above all, the only designer that understands the user needs
succeeds in reducing information overload. There are some principles that if a designer doesn’t
put in mind no matter how much he tries to create a web site, he cannot design a great one.
The first principle of web design is that a designer should define clearly what he indents
his web to look like. Then the audience should be known so that when designing your site, you
have to do it putting in mind how it will be received by them. Thereafter, you have to plan how
you will have to organize your website. The tools to navigate the site have to be provided. The
use of short pages is important and incase the pages are too long, that is where the tools to
navigate the pages come in (Card 2017, p.42). visual design has to be exercised whereby a
consistent use of design has to be shown by repeating visual elements. The type of text designs
that is implemented by the designer in any website is always vital in that they must be readable.
Graphic design cannot be left out since it one of the vital makeups in any website despite the fact
that they contribute in slowing down a website hence should be as small as possible.
Looking at the website in question, the first issue that I would suggest that should be
looked into is a problem that I can call information overload (Card 2017, p.85). There are a lot of
adverts being displayed on the same page making it look congested and not eye catching at a
glance. The designer could have decided what kind of information that he wants to prioritize so
that the information could be spread to different pages starting with the high priority one. For

Human Computer Interaction3
information like magazines on the right side of the page could have been enclosed in one link
button and named news feeds of magazines for that case. Then the designer could for this case
have opted for not more than two information contents on a single page.
The website also suffers what I can term as Mystery Meat Navigation. This is to mean the
destinations of those links that are displayed on the web are not visible enough and are badly
placed at a place that the user cannot imagine at once and he has to click them so as to navigate.
The users of this website will definitely suffer cognitive load in one way or the other since the
discoverability of navigation links is not taken care of well in this website (Shneiderman 2010,
p.55). For instance, the advert about quitting smoking, there could have been a link on the
dangers of smoking which in this case could be the main point behind the entire advert. There
could also be some testimonials from those affected by smoking and some pictures of how bad
one looks when he doesn’t quit smoking. You cannot just direct your audience to click more
without knowing where they are being redirected to.
The website also could have been outstanding and interactive if the designer had thought
of including some animation in it at. A lot of website visitors love an animated web due to its
looks and it is not always boring (Sneiderman et al., 2016). To add to what I think could have
been considered on this website is the emotional part of message passing. The two images, one
about allergy and pain relief and the other one about quit smoking do not carry the emotional
image that they are supposed to convey. The designer could have uploaded an image that
displays someone under the influence of cigarette smoking instead of nicely looking two
cigarettes that are published. The image of allergy could have contained someone in great pain
and maybe a set of medicines that are used to cure the pain besides him or being held by the
person.

Human Computer Interaction4
There is no information published by the designer on the story about health vibes. This
can, for instance, make our audience ask himself a question like, “what about health vibes”?
There is a need for a link right below the health vibes image so that someone who may be
interested with the article can click it easily and follow up with the story (Shneiderman 2010,
p.95). Failure to format the website in a way that is user friendly leads to satisfaction lose hence
a visitor cannot remain on such a website for long (Jacko et al., 2012). Information contents,
website organization, plus navigation go hand in hand in terms of determining how perfect a
website is.
A background image of color could have played a great role in emotional arousal and
interaction. The designer should divide the page into sections well and place them on top of a
background image or color that is appealing. However, the choice of the background should be
determined by the kind of information that the designer wants to be displayed since some
background images also have messages that they pass. A background is always included in a
website to guide the viewer’s eyes to where the designer wants and also it helps in keeping the
website user not destructed (Lazar et al., 2017).
Conclusion
In summary, a website should be designed based on whether it will be web based, mobile
based, or in other words the kind of environment you want it to be hosted. A mobile based
website, for instance, should be responsive in that whatever the designer wants to be displayed
should fit on the screen well. In terms of interaction, both mobile based and web based websites
should be designed to the level where they both should have a perfect interface (Larson 2010,
p.852). A web based website has all the links and short descriptions of each page that you may
indent to navigate to, unlike the mobile based website that in always has the main message of the

Human Computer Interaction5
site and the links to help the user in navigating through the site on the home page. Most
designers opt using dropdown lists while designing mobile based websites and apps for the
purpose of minimizing the screen capacity and avoiding overlay of information which can result
in information overload (Lazar et al., 2017). Examples of some websites that have been
integrated into mobile apps are like Facebook, tweeter, and a Gmail website. When for instance
go to the Facebook home page on a web-based website, you will see a more different thing when
you happen to visit a mobile-based home page of the same Facebook. The design that was
applied while designing a mobile based website is much different in terms of responsiveness and
page layout from how a web-based website is designed.

Human Computer Interaction6
Reference List
Card, S.K., 2017. The psychology of human-computer interaction. CRC Press.
Dix, A., 2009. Human-computer interaction. In Encyclopedia of database
systems (pp. 1327-1331). Springer US.
Jacko, J.A. ed., 2012. Human computer interaction handbook: Fundamentals,
evolving technologies, and emerging applications. CRC press.
Larson, R.R., 2010. Introduction to information retrieval. Journal of the American
Society for Information Science and Technology, 61(4), pp.852-853.
Lazar, J., Feng, J.H. and Hochheiser, H., 2017. Research methods in human-
computer interaction. Morgan Kaufmann.
Shneiderman, B., 2010. Designing the user interface: strategies for effective
human-computer interaction. Pearson Education India.
Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., Elmqvist, N. and
Diakopoulos, N., 2016. Designing the user interface: strategies for effective
human-computer interaction. Pearson.