9
2.
Web Design: Usability, Aesthetics, and Purpose
2.1. Web Design
The Internet and its most famous resource, the World Wide Web, have experienced
extraordinary growth in popularity in recent years. Consequently, the Web has become a
source of enduring interest and investment across all communities and organisations. As
a result of the explosion in web activity, people now have unlimited access using and
building websites. Lawrence & Tavakol (2006) in their work present a straightforward,
methodical approach to designing a website. They define a website as “a page, or set of
pages, that bring information to our personal computer or interface, wherever we are. It
needs pages that are visual and interactive.” (Lawrence & Tavakol, 2006, Chapter 4, p.
63). Typically, when designers begin developing a website, the two-dimensional pages
are blank. It only begins to take shape when various types of components are placed on
the blank page(s) to satisfy the needs of the users. Through his website, every website
owner or developer in the world may promote a business, communicate an idea, advertise
a product, etc. In the same work, Lawrence & Tavakol describe the process for a website
design: Identifying the requirements for the website is the first step. Step two involves
establishing and acquiring budgets for time, skills, and software and hardware
requirements; step three involves acquiring website content; step four is the creation of
strategies and frameworks (navigation, content, layouts, design, etc.); in step five, the
content is processed and the web pages are built; in step six, the website is evaluated; in
step seven, the website is now prepared for marketing (2006, Chapter 2, page 31).
In this competitive digital era, it is crucial to maintain a high-quality website. Jacob
Nielsen, who was one of the foremost authorities on the topic of websites and especially
web usability, and his writings on the subject have inspired and attracted many in this
10
field, states that users’ tolerance for complex websites is decreasing; therefore, every
design error results in a significant loss of revenue, making web usability more crucial
than ever. ‘Prioritizing Web Usability’ (Nielsen, 2006, Chapter 2) stops users from
navigating to competitor pages, which are only a few mouse clicks away. Nielsen
maintains his position in 2012, noting that:
On the Web, usability is a necessary condition for survival. If a website is difficult to use,
people leave. If the homepage fails to clearly state what a company offers and what users can do
on the site, people leave. If users get lost on a website, they leave. If a website’s information is
hard to read or doesn’t answer users’ key questions, they leave. (Nielsen, 2012).
User expectations have risen throughout time, and as a consequence, usability has become
the most important predictor of company longevity. Consumers rapidly accept systems
that are simple to use, whereas those with problems are abandoned (Scott, 2021).
It is essential to remember that design is a form of marketing communication. The
objective is to reach a large audience and maintain their attention. A website that is
functional and easily navigable, but lacks aesthetic appeal, will not attract clients or users.
Therefore, excellent site design presupposes that its constituent elements are in harmony
with one another. In this regard, Jason Beaird in his work (2007, p. 5) highlights good
design concepts such as creating aesthetically beautiful layouts, using color efficiently,
employing textures, lines, points, forms, volumes, appropriate typography, and effective
images, among others. In a single word: ‘aesthetics’ which means that “each element’s
properties, such as shape, colour, and position, contribute to the harmonious effect on the
surface and, if not considered carefully, can give a negative result.” (Lawrence &
Tavakol, 2006, Chapter 4, p. 64). Lawrence & Tavakol in their research about website
design describe a ‘Balanced Website Design’ (BWD) that combines aesthetics and
usability (2006, Chapter 1). They add the ‘purpose’ element.
The purpose requirements outline the primary reasons why the website exists. What is its
genuine function? What should the site’s users be able to perform or effect? Hager at al.
stated in his work back in 1999 that a well-designed website must be able to meet the
needs of its target audience. Understanding what users must accomplish with an
11
application and how they wish to do it is essential to good design. In 2020, Beaird verifies
what was previously stated:
If you create a website that works and presents information well but looks ugly or fails to fit with
the client’s brand, no one will want to use it. Similarly, if you make a beautiful website that’s hard
to use or inaccessible, people will leave. Indeed, the elements and functionality of a finished
website design should work as a single cohesive unit. (Beaird et al., 2020, Section Defining Good
Design).
Given the limitless diversity of tasks and users, there is no one definition of ‘good’ design.
The designer must make several judgments based on their understanding of users, their
cognitive abilities and constraints, and their activities. According to Bødker (1987) the
compatibility of the technology (interface) with the user’s intended task determines the
success of a design. After 33 years, Johnson (2020) repeats the same statement: “When
people are using an app or a website they focus on their goal and mostly ignore everything
else” (p. 94). Hence, a good website design must match users’ goals and tasks (Johnson,
2020, p. 182). These concepts of usability, aesthetics, and purpose will be discussed in
depth in the subsequent paragraphs.
2.2. Website Usability
Websites often provide information about a certain topic or company. Usability was
defined in the realm of website design as presenting information in a manner that ensured
users quickly comprehended it and obtained the information for which they visited the
site in the shortest amount of time (Green & Pearson, 2011). AGID
1
(Agenzia per l’Italia
Digitale) defines usability as the amount of user satisfaction while interacting with a
website or application. The user experience will be significantly improved since the
system’s design closely matches the users’ expectations.
1
To read the full text visit the official website at https://www.agid.gov.it/en/design-servizi/usability
12
Numerous professionals and researchers in the field have attempted to define the notion
of website usability; thus, there were numerous definitions available. Based on research
conducted by Yesilada et al. (2019), usability is “the ease of use of a website not only for
people with disabilities but also for those without.” A website is useful if it is easy to
comprehend, learn, and operate by anyone, as well as aesthetically pleasing. In fact, the
study previously mentioned by Lawrence & Tavakol (2006) indicates that:
In website design, we have the task of achieving optimal usability alongside creating an
appropriate and effective aesthetic and alongside making sure that the website design fulfills the
targeted purpose(s) of the website (Lawrence & Tavakol, 2006, Chapter 3, p. 50).
According to them, something has strong usability when we use it practically or entirely
without knowing that we are using an interface to accomplish our goals. Poor usability is
when we become dissatisfied, and the interface seems to prevent us from progressing.
They provided an analogy to illustrate the notion of usability: “a friend gives you a lift in
their car, which is unfamiliar to you, and then you have to open the door to get out, almost
always a problem to do quickly and effectively” (Lawrence & Tavakol 2006, Chapter 3,
p. 38).
Jacob Nielsen’s was the earliest and most exhaustive definition of usability. Nielsen
defines usability as “a quality attribute relating to how easy something is to use.” (2012).
More specifically, it refers to how quickly people can learn to use something, how
efficient they are while using it, how memorable it is, how error-prone it is, and how
much users like using it. “If people can’t or won’t use a feature, it might as well not exist.”
(Nielsen, 2012). Therefore, usability refers to the ease with which a user interacts with a
website, how well the users can use a specific functionality. Users can evaluate a
website’s usability by performing a set of predetermined activities. Nielsen (2012) also
describes usability as a multidimensional concept with five usability attributes:
learnability, efficiency, memorability, the presence of as few errors as possible, and user
satisfaction, as Table 1 shows. The fist attribute is ‘learnability’ which refers to a
website’s capacity to be easily learned by all potential user groups, not simply those with
prior knowledge. The best approach to measuring the learnability of a website is to give
a task to a user who has never used it before and then observe how well and quickly they
13
complete it. The objective of a website’s ‘efficiency’ is to make the website as productive
as possible for the user. It may be checked and assessed by providing experienced users
with a particular length of time and monitoring their productivity throughout that period.
‘Memorability’ emphasizes the structure of the website. The website should be easy to
remember so that the user does not have to learn it again in order to utilize it. The
memorability of a website is rarely evaluated as frequently as its other features, but if
desired, the test might be conducted by asking visitors to execute activities after they have
taken a pause from the site. The ‘presence of a few errors’ basically denotes that the
website should have as few inaccuracies as possible. If a problem persists, the website
should be able to recover quickly. An error is not necessarily the result of a user executing
a job differently than intended; it can also be the result of a website failing to complete a
defined activity. Nevertheless, as few faults as possible should be experienced by the user.
‘User satisfaction’ implies that the website should be pleasant to use and that the users
who utilize it should be satisfied. Different types of websites are enjoyable in various
ways, and different users feel satisfaction in various ways (Nielsen, 2012).
Table 1
Usability Attributes
Learnability Easy-to-learn website by all potential user groups
Efficiency Website as productive as possible for the user.
Memorability Easy-to-remember website so that the user does not have to
learn it again in order to utilize it.
Presence of few errors As few inaccuracies as possible
User satisfaction The users who utilize the website should be satisfied
These usability attributes illustrated by Nielsen can be found in the ISO
2
9241-11:2018
3
standard. Given the necessity to develop quality standards for websites and software, the
2
This is an abbreviation for the International Organization for Standardization, which is a group of national
standards bodies from all over the world.It develops and publishes standards in all technical and
nontechnical fields.
3
To read the full text of this standard, visit the official website at
https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-2:v1:en
14
International Organization for Standardization developed in 1998 (ISO 9241-11:1998)
4
and then revised in 2018 the standard ISO 9241-11:2018 in order to describe a model of
website/software quality that permits obtaining a product built in the most efficient
manner and in accordance with high quality criteria. The standard recognizes usability as
one of the software quality indicators and offers an important definition of it:
The extent to which a system, product or service can be used by specified users to achieve
specified goals with effectiveness, efficiency, and satisfaction in a specified context of use
(Standard ISO 9241-11:2018).
According to the ISO 2018 standard, usability is associated with the concepts of
‘learnability’, which allows new users to become “effective, efficient, and satisfied” when
beginning to use a product, system, or service; ‘efficiency’ concept which refers to the
resources spent in proportion to outcomes accomplished rather than, as mentioned in ISO
9241-11:1998, the precision and completeness with which users accomplish the goals;
‘use error’ refers to user actions, or inactions while using the system, product, or service
that results in a different outcome than expected by the producer or expected by the user;
‘satisfaction’ means that actual usage results in a user experience that satisfies the user’s
requirements and expectations and leaves the user physically, intellectually, and
emotionally satisfied. Unlike Nielsen’s definition, the ISO standard defines use error as
the inability of a user to perform a job; a malfunction of an interactive system that
produces an unanticipated outcome is not regarded as a use error. Nonetheless, the
standard acknowledges that mistakes may emerge from a mismatch of user, user interface,
task, and use environment characteristics. The Standard does not specify the property of
memorability (ISO, 1998; ISO 2018).
On the other hand, Badre (2002) simplifies these five Nielsen-identified usability
attributes to two: “ease of learning” and “ease of use”. The first concerns the ability to
quantify usability by comparing the amount of time it takes users to learn how to do a
task on an unfamiliar computer system. The second attribute evaluates usability based on
4
To read the full text of this standard, visit the official website at
https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1:v1:en.
15
the lowest number of actions necessary for more experienced users to execute a task
successfully. For example, the number of mouse clicks (2002, Chapter 2, p. 13-22).
In conclusion, we may assert that usability is an indispensable discipline for Internet
professionals. After all, if a website is difficult to use, lacks aesthetic appeal, and is
confused about its goal, it is highly likely that the visitor will leave and visit another
website. A website that is not visited loses its raison d’être and receives no economic
return. In fact, good usability has two advantages: on the one hand, it promotes business
goals on the Web and so helps a company generate more revenue. Usability, on the other
hand, empowers humans and makes it easier and more enjoyable to interact with the
technology. Usability enables people with limited education to hold work opportunities,
connects senior citizens with society, provides users with disabilities with the same
services as everyone else, and allows everyone to spend time with computers more
productively. “Usability benefits business and it benefits humanity” (Nielsen, 2006,
Chapter 2).
The federal agency AGID
5
reached the same conclusion. Usability seeks to establish a
familiar environment for users, which provides numerous benefits, such as enabling users
to locate and comprehend information in a more straightforward and intuitive manner;
aiding content learning and memory; lowering development costs and faults; enhancing
the user’s autonomy and safety while interacting with the system (Agenzia per l’Italia
Digitale, n.d.).
Understanding the idea of usability is neither required nor sufficient for determining
whether or not the site satisfies usability requirements. Let’s examine the numerous
methods for evaluating a website’s usability.
5
From https://www.agid.gov.it/en/design-servizi/usability
16
2.2.1.Website Usability Evaluation Methods
Numerous scholars have explored the subject of how to decide whether and to what
degree a site may be considered useful. The purpose of a usability evaluation is to uncover
as many potential issues that users may have with an application as possible.
Head (1999) mentions the current problems of usability for the Web: wording and
vocabulary are not clear, users must remember too many things, graphics are overused,
the interaction between the site design and the users’ remains vague, navigation poses
problems, the site was created without a well-defined population target, the design is not
guided by the user’s goals, etc. (Part 1).
Developing a useful website today faces the same obstacles as before. According to Sahni
& Dubey (2014), some websites never define what the site is about or what they want to
convey to visitors. It can be difficult to locate the navigation labels and buttons, making
navigation challenging. Inadequate website layout, resulting in poor readability. Some
websites are irrelevant since they were created with solely the company’s requirements
in mind, or they are so complicated that visitors cannot view every page. Clearly, if
visitors encounter these obstacles, they will abandon the page or site and seek information
elsewhere. To eliminate the possibility of developing an unsatisfactory website, a proper
usability evaluation must be created (Sahni & Dubey, 2014).
Usability evaluation is vital for improving the quality of the user experience. When
measuring the usability of a website, user feedback and heuristic evaluations are the two
most used methodologies. For evaluating or measuring the degree of satisfaction with a
website, usability testing, i.e., asking users for feedback, is often the easiest and most
essential method, valid then and today (Nielsen, 1993, Chapter 6; Majed & Pam, 2014).
However, to support the usability design process, a style guide seems to be useful. One
of the foremost authorities on web usability, Jakob Nielsen, has established ten usability
heuristics (Table 2) as guidelines for website design in 1994, updated by Nielsen himself
in 2020. Recently, an in-depth analysis of each heuristic was presented, contextualizing
it within the present and applying it to existing websites.
‘Visibility of the status of the website or system’: the user should be able to see the process
of the website’s actions. The user should never be left with confusion or uncertainty.
17
Users should constantly be aware of what is occurring on the website’s backend. For
instance, while a website’s page is waiting for the booking engine to load, the visitor
should be visually reminded of this fact (Nielsen, 1994a updated 2020). According to
Harley (2018), this heuristic is, at its core, about communication and openness; more
knowledge leads to better decision-making. Users who are unaware of the system’s
present condition cannot decide what to do next to achieve their objectives, nor can they
determine if their actions were successful or whether they made a mistake.
‘Matching the system and the real world’: the website should use the vocabulary of its
users rather than system-specific terminology. The material should be organized in a
manner consistent with actual norms (Nielsen, 1994a updated 2020). When a design’s
controls correlate to real-world norms and intended results (known as natural mapping),
it is simpler for users to become familiar with the interface functions. This contributes to
developing an intuitive experience. According to Kaley (2018), the second usability
heuristic reveals that the site understands and cares about its visitors. It demonstrates
empathy and recognizes their significance.
‘Allowing the user to pick their own functions and make their own errors’. Use undo and
redo commands to provide users with an “emergency escape” when anything undesirable
occurs (Nielsen, 1994a updated 2020). According to Rosala (2020), in order for
customers to have a feeling of freedom and control while using the system, they should
be able to swiftly fix errors or reverse their decisions by utilizing the Cancel or Back
buttons. The capacity to swiftly escape from difficulties fosters exploration, which helps
the acquisition of knowledge and the discovery of new characteristics. In contrast, when
the user interface does not facilitate these tasks, consumers feel imprisoned and often
express dissatisfaction.
‘Consistency and standards’: setting standards for consistency in design aspects prevents
user confusion (Nielsen, 1994a updated 2020). Using existing websites as an example,
they all adhere to well-established conventions. Blue highlighted text is clickable, the
shopping-cart symbol displays the things available for purchase, the company logo is in
the top-left corner, and a magnifying-glass icon denotes search — these are all elements
of convention that are often employed in digital products and make navigation simpler
for consumers (Krause, 2021).
18
‘Error Prevention’: the process of preventing mistakes from an expert standpoint prior to
testing. However, building the website to prevent difficulties and mistakes is not always
sufficient; it is also essential to have error messages that adequately explain the situation
(Nielsen, 1994a updated 2020). Slips and mistakes are the two forms of errors. Slips are
unconscious errors produced by inattention. The strategies for avoiding slips are
concentrated on gently directing users, such as by limiting their alternatives and making
suggestions, so that they remain on the correct route and have a lower likelihood of
sliding. Mistakes are intentional errors caused by a gap between the conceptual
representation of the user and the design. To avoid mistakes, designers must comprehend
the mental representations and expectations of users and ensure that the design reflects
them (Laubheimer, 2015a; 2015b).
‘Recognize rather than recall’: It is frequently impractical for a user to remember every
design feature and its purpose on a website. Making the user instinctively identify the
function of the design feature is preferable to having them recall it. This may be achieved
by displaying options and actions to ensure that the user is not required to remember
everything (Nielsen, 1994a updated 2020). Interfaces that foster recognition aid users in
remembering information, whether it is about previously seen tasks and things, such as
the Recently Viewed area, or about interface functionality, such as the traditional Menu
system (Budiu, 2014).
‘Flexibility and efficiency of use’: website design should accommodate both beginner
and advanced users. To make the system or website more efficient, users should have the
flexibility to customize frequently performed operations and tasks (Nielsen, 1994a
updated 2020). According to Laubheimer (2020), if a system focuses largely on new users
by emphasizing learnability, regular users would be slowed down since the system likely
incorporates much more step-by-step assistance than a regular user would need. On the
other side, if a system simply prioritized efficiency for advanced users, it would likely be
incredibly difficult to learn. Faster approaches seek to expedite experienced users without
generating discomfort for beginners. So, the system should provide numerous ways to do
the same work, based on the user’s choices.
‘Aesthetic and minimalistic’: minimizing information and displaying only materials and
data that are necessary and use (Nielsen, 1994a updated 2020). When this heuristic was
made in 1994, most of the Internet was full of web pages with lots of information, some
19
of which was relevant and some of which was not. Hence, when Nielsen refers to
minimalist design, he is referring to a design that aims to simplify interfaces by
eliminating superfluous elements that do not assist user tasks. He is not referring to a
website that follows the minimalistic trend, since there was no such movement at the time.
A minimalist design, both then and today, is not a flat design, but rather one that includes
all components essential to supporting user activities. In other words, a good design may
or may not be flat, so long as it supports the fundamental objectives of the user
(Fessenden, 2021).
‘Assisting users in recognizing, diagnosing, and recovering from errors’: mistakes do
occur, which is why it is crucial to have error messages in understandable language, and
the website should have a mechanism to assist users in recovering and returning to the
initial state when they encounter errors (Nielsen, 1994a updated 2020). The intricacy of
modern Web sites necessitates a guideline that was not necessary in the past, when users
simply typed a command, and the error message was shown. On current systems, when a
user clicks a command, the error message appears in a large dialog box in the centre of
the screen and remains there until the user acknowledges it; nevertheless, error messages
are frequently hidden on a page that is overloaded. The new standard stipulates that error
messages must be conspicuous, highly apparent, and clear. It is recommended that
developers create customized 404 error messages since the default error message, 404, is
subpar.
‘Help and Documentation’: all the results of user actions on the website should be
recorded and made available as a resource for users who encounter issues or are unable
to figure out how to utilize the website (Nielsen, 1994a updated 2020). According to
Joyce (2020), websites and apps may provide proactive and reactive help. In order to avert
difficulties, proactive help is provided prior to the user encountering a problem. It
provides training for onboarding and contextual assistance. In contrast, reactive support
consists of items like documentation, videos, and even tutorials for when consumers
encounter a problem and need guidance on how to resolve it. Users dislike reading in
general, and they dislike reading instructions, thus it is crucial to make assistance
information concise, to the point, and quick to skim.