UI/UX Usability Testing: Tools and

Principles

Prepared by: Jamaica T. Hernandez

LESSON 1:

USABILITY

OBJECTIVES:
• At the end of the lesson, students will be able to:

 Understand the importance of Usability in human-computer interaction.

 Identify the User Interface and its features.

 Differentiate what does good user interface and bad user interface do.
What is Usability?

 It is a quality attribute that evaluates how easy user interfaces are to use. The
word "usability" also states toward methods for improving ease-of-use during the
design process.

 It is a measure of a product that has been used in a specific scenario by specific

users, which can attain the special goal in a satisfied and effective degree. First,
it is not only connected to the interface design, but also involved in the technical
level of the entire system. Second, it is reflected by human factors, and
evaluated by operating a variety of tasks. Third, it is to describe how a user can
be interact effectively with a product and how easy a product can be operated.
Five quality components of Usability:

 Learnability: How easy for the users to accomplish the basic tasks that they encounter the
design for the first time

 Efficiency: The users have learned the design and how quickly the user a can perform their
tasks/resposibilities

 Memorability: After a period of not using it the users return to the design and how can they
reestablish proficiency easily

 Errors: How do users make many errors, how these errors are severe, and how can they
recover from the errors easily.

 Satisfaction: How the design use in a pleasant way.

• There are so many other significant quality attributes.Utility is one key, which refers to the
design's functionality.

• To determine whether something is useful the usability and utility are equally important and
together. if the system can do what you want, but you can't make it happen because the
user interface is too difficult It's also not good. To study the design's utility, to improve
usability you may use the same user research methods.

 Definition of Utility = the features you need is provided.

 Definition of Usability = how easy & pleasant these features are to use.

 Definition of Useful = usability + utility

A point of view from a psychological, the usability basic meaning is:

1. The users can operate with their own operation process and focus on their own
tasks.

2. Users do not have to master the knowledge of software and computer’s hardware;

3. Users can’t be distracted by the hand operation; the operation should be simple
and repeatable;

4. Under the specific environments and scenarios, users are still able to operate it
normally;

5. Operation errors and misunderstanding will be less;

6. Users can learn the operations in a short time.

Importance of Usability Design

• From point of view of the user’s, the usability is important because the users can
complete the task correctly, and users can operate it with a pleasant mood rather
than feeling stupid. From aspect of the developer’s, to determine the success of
a system the usability principle is important. From the point of view of the
managers, the poor usability of products will seriously reduce productivity and
people will not purchase your products. Lacks of usability in any product will
waste more time and energy.
What is UI?

• UI (User Interface) in a website it is how user

interacts with the user: The features of a website
used by the people to understand how it works and
get around. It has nothing to do with attractiveness
or aesthetics – It’s more about usefulness in
bringing your product to users of your website.
As a general rule, there are 4 E’s of good UI design:

 Easy to use

 Easy to understand

 Error-free

 Effective for end-goal (buying your product)

• Toward the day's end, your website purpose should be able to get the user to your product
as quickly as possible. Good UI makes this happen.
What GOOD User Interface do?

• An effective UI design is intuitive, together with the user and how

the user interacts with the website. It has threads of familiarity in
Good UI design. Even if I’m visiting for the first time your page or
app, the user should understand how it works quickly.

• A good user interface holds the hand and takes the users where it
should go in the site. And, that’s not an affront to your customers.
What works for one site most absolutely will not work for another,
and that’s why testing is so important.
Example of Good UI design

• MyFitnessPal Mobile App

 Calorie Counter Tool

•This calculator is just brilliant. After

entering your weight and fitness goals, the
app automatically calculates how much
calories you need per day to reach that goal.

•Then, every time you enter a meal, the app

calculates the calories and deducts them from
your total number to keep you focused and on
track.
Google Maps Mobile App

 Voice Search
•Most of the time you use Google Maps
when you’re driving. During that time, it’s
very inconvenient and extremely dangerous
to kind in text on the search field. The app
resolves this problem simply by providing a
voice recognition tool that instantly offers the
route for the desire location.
Visibility of Route Status
and Traffic

• A very important feature

when going to a place,
is to know the remaining
time to that destination.
The app calculates the
remaining time and
based on the mode of
traffic situation and
selected transport, it
forecasts the Estimated
Time of Arrival (ETA).
What does BAD UI do?

• In the mid of the desert and expects you to make it

on your own to the rain forest it drops you off. It
doesn't lead you where you have to go. Too often,
this is because websites attempt to provide to an
terribly huge demographic, so the core viewers is
marginalized in favor of appealing to the broader
viewers.
Example of Bad UI design

 Find Us screen:
• The map is exposed with ALL
branches and ATMs for the bank
across the city, when selecting
Find us option on the top bar,. The
map makes it confusing and hard
to select, it looks frustrating with
all the location labels shown at
one time.
● Create a Saving Goal
• When you try to set a Saving Goal, but
every time you do it, you will get an error
messages that utters “Invalid Digital
Signature”. The job itself does not ask for a
digital signature, and the error messages do
not give any guidance or suggestion on how
to obtain a valid digital signature.
LESSON 2:
USER – CENTERED DESIGN

OBJECTIVES:
• At the end of the lesson, students will be able to:

● Understand the user-centered design and its principles.

● Gain knowledge about different types of interaction styles.

● Identify the different main disciplines involved in mobile interaction.

● Differentiate the different Human computer interface styles.

User-centered design

• focuses on the development process on the needs of the user to facilitate the best
possible user experience, it is a product development and design process.
• The user-centered design focused plan turns this methodology on its head. It
centers around clients' needs, capacities and prerequisites, not corporate interests and
abilities. Prior to the genuine turn of events, the organization examines the clients and
their circumstance and looks for criticism more than once during the development cycle.
This permits them to assemble items in an iterative cycle or process and in close
coordination with clients.

• User-centered design as an idea has been ordinary in item plan since the 1990s
and the user-centered design focused plan approach has gotten progressively
unmistakable in the advanced segment lately.
Principles of user-centered design

• ISO standard 9241-210:2019 characterizes six essential rules that structure the
premise of the user-centered design process:
1. Design depends on getting clients, their undertakings and their condition: It isn't
sufficient to have an obscure impression of the item's objective gathering. User-
centered design requires profound submersion into the lives of clients or users.
2. Users are included all through the whole development and design process: This is one
of the fundamental contrasts to different methodologies. Users are not simply
welcomed to evaluate a completed item, rather their assessments are the premise for
development.
3. The design process is guided by client appraisals: Users assess each model and each
beta variant, and this input is utilized to build up the item or product.
4. The process is iterative: The cycle or process steps in item advancement are performed
non-straightly and more than once. Input from clients can make various cycles of individual
stages essential.
5. The entire user experience is considered: The point of user-centered design isn't to
make utilizing an item as straightforward as could reasonably be expected. Rather, the
cycle or process takes a more extensive interpretation of the user experience. Items or
prouducts should inspire positive feelings, offer real arrangements and urge clients to
utilize them consistently.
6. The task group is multi-disciplinary: User-centered design requires close collaboration
transversely disciplines. User requirements must be executed ideally if marketing
specialists, visual architects, and software engineers share their alternate points of view.
• UCD depends on certain
crucial standards. While it is
constantly an iterative
development process, no
explicit procedures are stated
for implementation. The
methodology can be
incorporated into a waterfall
organization or an agile
environment.
Independent of the particular usage, four periods of the cycle or
process can be characterized based on ISO 9241-210:2019:

• 1. Context analysis
• The initial step is to investigate the setting where clients will utilize the item. Who are the future clients, and what are
their particular applications for the item
• Undertaking groups can discover answers by watching and studying likely clients or users.
• 2. Defining the requirements
• The subsequent advance is to characterize the particular necessities for the new item. This progression portrays client
necessities, considering corporate prerequisites.
• 3. Design
• The genuine plan measure doesn't begin until the necessities have been characterized. In the main occurrence,
creators or deigners will generally make a basic model, for example utilizing paper, trailed by advanced wireframes,
lastly produce a completed mode.
• 4. Evaluation
• After a model has been produced, the project team asks potential users for feedback. For digital applications,
this is generally done via extensive user testing and qualitative surveys. Surveys and tests assess effectiveness (can
users achieve what they want?), efficiency (how quickly can users achieve their objective?) and general satisfaction.
Interaction Styles

•The idea of Interaction Styles states to all the manners in which

the client can convey or something else interact with the computer
system. The idea has a place in the domain of HCI or if nothing
else: have its foundations in the PC medium, for the most part as a
workstation or a PC. These ideas do anyway hold a portion of their
distinct forces outside the PC medium.
Mobile Interactions

•It is the investigation of communication between versatile clients and PCs. Mobile interaction is a
part of human–PC collaboration that developed when PCs turned out to be sufficiently little to empower
portable utilization, about the 1990s.

•Mobile devices are a unescapable part of people's everyday lives. Individuals utilize cell phones,
PDAs, and convenient media players all over. These gadgets are the main genuinely unavoidable
connection gadgets that are at present utilized for a gigantic assortment of administrations and
applications. Mobile devices influence the manner in which individuals connect, share, and speak with
others. They are developing in decent variety and unpredictability, including new communication ideal
models, modalities, shapes, and purposes (e.g., e-readers, portable media players,
handheld game consoles). The solid separating factors that describe cell phones from conventional
individualized computing (e.g., desktop computers), are their pervasive use, regular little size, and
blended cooperation modalities.
Disciplines Involved

• Mobile interaction is a multidisciplinary region with different

scholarly subjects making commitments. This is an impression of
the convoluted idea of a person's collaboration with a PC
framework. This incorporates factors, for example, a comprehension
of the client and the undertaking the client needs to perform with the
framework, comprehension of the plan devices, programming
bundles that are expected to accomplish this and a comprehension
of programming designing devices. Coming up next are the principle
disciplines included in mobile interaction:
• . Psychology

• Several of the research methods and system evaluation techniques presently utilized in
versatile mobile human-computer interaction research are acquired from psychology. Just as
disposition measures, performance measures that are utilized in mobile human-computer
interaction research considers originate from the territory of exploratory psychology.
Understanding users and their needs is a perspective in the plan of mobile systems, devices, and
applications so that they will be simple and pleasant to utilize.

• 2. Computer science

• Computer science (along with software engineering) is accountable for giving programming
instruments to build up the interfaces that clients requirement to interact with system. These
contain the software development tools.
• 3. Sociology

• Sociologists working here are liable for taking a gander at socio-specialized angles of HCI.
They bring strategies and methods from the social sciences (e.g., observational studies,
ethnography that can be utilized in the plan and assessment of of mobile devices and applications.

• 4. Design

• Individuals working around there are worried about taking a gander at the plan format of the
interface (e.g., colors, positioning of text or graphics on a screen of a PDA). This is an essential
territory of portable HCI association research because of the restricted screen space accessible for
most cell phones. Along these lines, it is vital that administrations and applications mirror this
constraint by decreasing data unpredictability to fit the boundaries of the cell phone, without losing
any significant substance.
• 5. Information systems

•Individuals who work in data frameworks are keen on exploring how individuals
interface with data and advances in an authoritative, administrative, and business setting.
In a hierarchical setting, data framework experts and analysts are keen on taking a gander
at manners by which versatile advances and portable applications can be utilized to make
an association more successful in directing its business on an everyday business.
LESSON 3:
USABILITY EVALUATION

OBJECTIVES:
• At the end of the lesson, students will be able to:

● Understand the usability evaluation in human-computer interaction.

● Gain knowledge about methods of field evaluation.

● Identify and differentiate the different types of evaluation use in human-computer

interaction.