2023-2023

1st

Human Computer
Interaction
The User Interface (UI)
• A user interacts with a computer
system via the user interface (UI).
• The user interface constitutes that
part of the computer system
through which the user
communicates commands, and
receives data for interaction with
a computer system.
• The UI of different types of
computer systems are different
because the ways in which we
interact with them are different
and the tasks we wish to achieve
using them vary.
The User Interface (UI)
• User interface (UI) design is the process designers use to build
interfaces in software or computerized devices, focusing on looks or
style.
• Designers aim to create interfaces which users find easy to use and
pleasurable.
• UI design refers to graphical user interfaces and other forms—e.g.,
voice-controlled interfaces.
The User Interface (UI)
• Designing User Interfaces for Users
• User interfaces are the access points where users interact with designs. They
come in three formats:
1. Graphical user interfaces (GUIs)—Users interact with visual representations
on digital control panels. A computer‘s desktop is a GUI.
2. Voice-controlled interfaces (VUIs)—Users interact with these through their
voices. Most smart assistants—e.g., Siri on iPhone and Alexa on Amazon
devices—are VUIs.
3. Gesture-based interfaces—Users engage with 3D design spaces through
bodily motions: e.g., in virtual reality (VR) games.

4
Good UI Design
• The two-way communication that takes place during interaction through the UI is
all you will see of any computer system.
• And, as long as the two-way communication works and allows you to complete
your tasks, you don‘t need to know what is happening, or how it happens,
beneath the UI.
• Because of this, certain authors have concluded that, to users, the user interface
is the system.
• Depending on the design of the interface therefore, users of a computer system
will determine whether or not the whole system is usable, i.e. easy to learn and
use.
Usability
• Usability is the extent to which a system can be used by
specified users to achieve specified goals with
effectiveness, efficiency, and satisfaction in a specified
context of use.

• It involves optimizing interactions between people and

products to achieve their everyday tasks.
Usability Goals

• Effectiveness
– The extent to which a product is good
at what it is supposed to do.
• Efficiency:
– How difficult it is for a user to perform
his tasks?
• Safety:
– The extent to which a product
prevents the user from undesirable
actions.

7
Usability Goals (2)
• Utility:

– The extent to which a product provide supporting functionality to the user.

• Learnability:

– How easy a user can learn how to use the system.

• Memorability:

– Once learned, how easy a user can remember how to use the system.

8
Usability goals
• Effective to use

• Efficient to use

• Safe to use

• Have good utility

• Easy to learn

• Easy to remember how to use

Usability Vs. User Experience
Usability goals are essential for a better user experience.
Design Principles

• Design principles are used by

Interaction Designers to aid their
thinking when designing for a better
UX.
• Visibility
– The more visible functions are, the
more the user will know what to do
next.
– Consider the marble answering
machine example.
– Sometimes automated systems
relying on sensors have problems in
visibility.

11
Design Principles (2)
• Feedback
– Sending back information to the user about the action that has been
done.
• Constraints
– Determining ways of restricting the kind of user interactions in a particular
moment.

12
Design Principles (3)
• Consistency
– Similar Interactions or interface objects provide the same functions.
– This enhances learnability and memorability.
• Affordance
– The extent to which an interface allow people to know how to use it.

13
The problems of poor user interface design
• Poor usability can lead to decrease in staff productivity, high staff turnover, low
morale and poor job satisfaction.
• Good usability, on the other hand, can help productivity, staff retention, morale
and satisfaction.
• To design a good UI for a computer system it is important to gain a good
understanding of who the users will be, their goals, their tasks, and their specific
context of use.
– In HCI, this is called user-centered design.

14
 How to make Great UIs
• To deliver impressive GUIs, remember—users are humans, with needs such as comfort and a
limit on their mental capacities. You should follow these guidelines:
1. Make buttons and other common elements perform predictably (including responses such as
pinch-to-zoom) so users can unconsciously use them everywhere. Form should follow function.
2. Maintain high discoverability. Clearly label icons and include well-indicated affordances: e.g.,
shadows for buttons.
3. Keep interfaces simple (with only elements that help serve users’ purposes) and create an
“invisible” feel.
4. Respect the user’s eye and attention regarding layout. Focus on hierarchy and readability:
– Use proper alignment. Typically choose edge (over center) alignment.
– Draw attention to key features using:
• Color, brightness and contrast. Avoid including colors or buttons excessively.
• Text via font sizes, bold type/weighting, italics, capitals and distance between letters. Users
should pick up meanings just by scanning.

15
How to make Great UIs
5. Minimize the number of actions for performing tasks but focus on one chief
function per page. Guide users by indicating preferred actions. Ease complex
tasks by using progressive disclosure.
6. Put controls near objects that users want to control. For example, a button to
submit a form should be near the form.
7. Keep users informed regarding system responses/actions with feedback.
8. Use appropriate UI design patterns to help guide users and reduce
burdens (e.g., pre-fill forms). Beware of using dark patterns, which include hard-
to-see prefilled opt-in/opt-out checkboxes and sneaking items into users‘ carts.
9. Maintain brand consistency.
10. Always provide next steps which users can deduce naturally, whatever
their context.

16
User Centered Design
• User-centered design (UCD) is an iterative design process in which
designers focus on the users and their needs in each phase of the
design process.
• In UCD, design teams involve users throughout the design process via
a variety of research and design techniques, to create highly usable and
accessible products for them.
• In user-centered design, designers use a mixture
of investigative methods and tools (e.g., surveys and interviews)
and generative ones (e.g., brainstorming) to develop an understanding
of user needs.

17
User Centered Design
• Generally, each iteration of the UCD approach involves four distinct
phases.
• First, as designers working in teams, we try to understand the context in
which users may use a system.
• Then, we identify and specify the users‘ requirements. A design phase
follows, in which the design team develops solutions.
• The team then proceeds to an evaluation phase. Here, you assess the
outcomes of the evaluation against the users‘ context and requirements, to
check how well a design is performing.
• More specifically, you see how close it is to a level that matches the users‘
specific context and satisfies all of their relevant needs
 From here, your team makes further iterations of these four phases, and
you continue until the evaluation results are satisfactory.
18
User Centered Design

User-centered design is an iterative process that focuses

on an understanding of the users and their context in all
stages of design and development.

19
User Centered Design
• A good UI designer, before designing a system, will try to answer the

following questions:

– Who are the users?

– What skills do they have?

– What tasks will they be using the system for?

– Where they will be using the system and in what context?

20
User Centered Design

• ―Being human-centred is an additional cost to any project, so

businesses rightly ask whether taking so much time to talk to people,

produce prototype designs and so on is worthwhile.

– The answer is a fundamental ‗yes‘.‖

21