Human Computer Interaction

(HCIN101)

1
 Agenda

◼ Examples of Good and Bad Interface Design

◼ Overview of User Interface Design
◼ Usability and User experience
◼ Importance of good User Interface Design
◼ Problems with poor User Interface Design
◼ Why is good design difficult to achieve?
◼ Goal of Good User Interface Design
◼ The Design process
◼ Interaction Design (ID) and Human Computer Interaction (HCI)
◼ Some terms
◼ Summary
◼ Questions and Feedback
◼ Assignment
2
 Examples of Good and Bad User Interface Design

◼ For each of the following, indicate whether the design is

good or bad. Give reason(s)

3
Examples of Good and Bad User Interface Design

4
 Examples of Good and Bad User Interface Design
• Bad interface, there is even a “manual”

5
 Examples of Good and Bad User Interface Design

◼ Guess the purpose of the handle the arrow points at

Why is this a good or bad design?

6
 Examples of Good and Bad User Interface Design

◼ Why is this a good or bad design? Any reason?

7
 Examples of Good and Bad User Interface Design

◼ Compare the two remotes: which was better designed?

1 2

Rogers et al (2011) 8
 Examples of Good and Bad User Interface Design

◼ Compare the two remotes: 1 is better designed

1. The shaped to fit
1 2 in hand
2. Logical layout
and color-coded,
distinctive
buttons
3. Easy to locate
buttons

Rogers et al (2011) 9
 Examples of Good and Bad User Interface Design

◼ Many user interfaces are poorly designed

◼ The course introduces you to concepts and techniques to
analyze, design, prototype, implement and evaluate user
interfaces
◼ Question
1. What is the criteria for evaluating an interface?
2. Who evaluates a user interface to determine whether it is good
or poor?

Rogers et al (2011) 10
 Overview of User Interface Design
◼ User Interface Design: what is involved
1. The user (Humans)
2. Interaction
3. Interactive system (Interface +
Computer system

Interactive System
Interaction

Source: Stone et al (2005)

11
 Overview of User Interface Design:
Interactive Systems
◼ Interactive system (i.e., the product) consists of hardware
(including interaction devices) and software
◼ Different people with different abilities interact with the
same interactive system to perform their tasks
◼ Interactive systems are tools, used by different people
with different abilities to perform a tasks in different
contexts
 Implication for design
1. Understand the user
2. Understand the task
3. Understand the context

12
 Overview of User Interface Design:
Interactive Systems
◼ Interactive systems are everywhere, i.e.:
 Pervasive, ubiquitous, etc.
◼ Examples of interactive systems
 Consumables: smart phones, wearables
 Home entertainment:
 Learning environment:
 Professional environment:
 Collaborative:
 Social computing
◼ Pervasive or ubiquitous computing is an area in
computing

13
 Overview of User Interface Design:
Interactive system
◼ As a tool to perform a task, an interface must be both:
1. Capable of performing the task (useful);
 Objective and easy to measure, why?
2. Easy to learn and use (usable)
 Subjective and difficult to measure, why?
3. Can be used by full range of intended users (accessible)
 Subjective and difficult to measure, why?

◼ Can an interface be:

1. Useful but not usable? What happens? Give example in context
2. Usable but not useful? What happens? Give example in context

14
 Overview of User Interface Design:
Interface
◼ The interface is part of an interactive system
 It allows interaction between the user and interactive system
◼ To the user, the most important part is the interface
 The computer system is “hidden”, “unobtrusive”, etc.; they do
not have to computer system works
 Therefore, interfaces need to be “intuitive”, “natural”,
“unobtrusive” user
◼ Areas in User Interface Design is Natural User Interface,
Disappearing User Interface, etc.

15
 Overview of User Interface Design:
Interaction
◼ Interaction between humans and Interactive systems is
reciprocal
◼ There are many modes of interaction (input and output)
 Vision
 Hearing
 Touch
 Smell
 Taste
 Body parts movement
◼ Humans naturally combine two or more interaction
modes
 Multimodal interaction is an important area

16
 Overview of User Interface Design;
Interaction
◼ Interaction also involves human factors such as
 Stimulation
 Sensation
 Perception
 Memory, etc.

Hui & Sherratt (2015)

◼ Implications for design: optimize interaction by drawing
on strengths and limitations of users to match actions and
needs
17
 User Experience
• Interaction with UI systems involves emotions or affect (e.g.,
anger, joy, satisfaction)

• An area in user interface design is Affective computing

18
 User Experience
• UID has evolved from usability (efficiency + effectiveness) to
user experience (efficiency + effectiveness+ emotions)
– “Do goals” (e.g. shop online, search for information) to include emotional
goals (e.g., satisfaction)

19
 Four Core Threads of UX.
McCarthy and Wright propose four core threads that make up
our holistic experiences:
• Sensual threads:, sensory engagement with
a situations e.g thrill, fear, pain and comfort.
• Emotional threads:, emotions that spring to mind
are sorrow, anger, joy, and happiness.
• Compositional threads:, narrative part of an experience, as
it unfolds. i.e. What is this about? Where am I? What has
happened? What is going to happen next.
• Spatio-temporal threads: space and time in which our
experiences take place and their effect upon those
experiences. E.g. we talk of time speeding up, standing still,
and slowing down, and we talk of space in terms of public
and personal places, and needing one's own space. 20
 User experience

• Definition
“How people feel when they use a product or service e.g.
website” (Interface Design Foundation)
• User experience is unique to each user: it depends on an
individual perspective

21
 User Experience
• Relationship between:
– Usability (efficiency + effectiveness) and user experience (efficiency +
effectiveness+ emotions)
– Usability goals and user experience goals

• usability goals have been viewed as being

concerned with meeting specific usability criteria,
e.g. efficiency, whereas
• user experience goals have been concerned with
explicating the nature of the user experience, e.g.
to be aesthetically pleasing.
22
 User Experience
• Relationship usability and user experience
– Note: usability goals (inner) user experience goals (outer)

23
 Importance of good User Interface Design

◼ A good UI endures these THREE MAIN criteria:

1. Ensures easy and natural interaction between users and systems
2. Allows users to complete a task
3. Enjoyable to use.
◼ Usability measures how good or bad a UI is
 Defined as “the extent to which a product can be used by
specified users to achieve specified goals with effectiveness,
efficiency and satisfaction in a specified context “ ISO
1. Effectiveness means accuracy and completeness
2. Efficiency refers to resources used to accurately complete the specified goals
3. Satisfaction refers to acceptability of the system by users and others
stakeholders

24
 Importance of good User Interface Design
◼ In simple terms, good design produces usable system
(i.e., easy to learn, use to complete a task & interaction)
 Benefits
1. Easy to use => time saving => Higher productivity
2. Easy to learn and use => Less training cost
3. Users complete their tasks =>Satisfaction (less frustration) =>High staff morale
and job satisfaction
4. Less errors (accuracy) => Higher productivity
5. Less errors (accuracy)=> Less frustration => high staff moral and job satisfaction
6. Competitive advantage (good company image

***** For a company

a. Less operating cost
b. Competitive advantage (good company image)

25
 Importance of good User Interface Design

◼ A good UI means positive attitude of users towards the system

(a good or positive or enjoyable user experience- UX)

26
 Problems with poor User Interface Design
◼ Bad or poor design produces a system that is not usable
(i.e., not easy to learn and use to complete a task)
◼ Problems include
1. User dissatisfaction, increased frustration and stress,
which lead to low morale and job dissatisfaction
o 50% of the potential sales from a site are lost because
people cannot find the item they are looking for – Forrester
Research
o 40% of the users who do not return to a site do so because
their first visit resulted in a negative experience – Forrester
Research

27
 Problems with poor User Interface Design
2. For safety critical systems, errors may put users at risk

3. For a company (errors, frustration and low morale) may

lead to:
a. Decreased productivity and
b. High operating cost
c. Poor image and loss of clients

28
 Problems with poor User Interface Design

◼ A poor UI means negative attitude of users towards the

system (a poor user experience- UX)

29
 Why is it difficult to design good UI?
◼ Despite the importance of good user interface, many are
poorly designed
◼ So why bad UIs? Some reason for bad UI design
1. Universal access: it is difficult to design for all the different people
with different abilities or characteristics
2. The same interface may be used for different tasks in different
contexts
3. Rapidly changing user requirements
4. Flawed development processes which do NOT consider
✓ Users
✓ Task
✓ Context

30
 Goal of User Interface Design
◼ The goal of UID is to develop interactive systems that are
easy to learn and use, and provide an enjoyable
experience
 How would you measure a user interface?
◼ Why has good user interface design become more
important?
 Pervasive interactive systems
 Universal access
◼ How can good design be achieved?
1. Involve users (to understand the users, tasks and context)
2. Adopt user-centered design process
3. Adopt design principles
◼ The User centered design (UCD) process involves users
in analyze, design, prototype, implement and evaluate
user interfaces
31
 The Design Process
◼ The User centered design (UCD) process is used to design
for user experience
◼ UCD involves users in:
1. Analysis
2. Design
3. Prototyping
4. Implementation and
5. Evaluation
◼ Models, theories and principles are used to guide the
process

32
 User Interface Design (UID) and Human Computer
Interaction (HCI)
◼ HCI Definitions
1. It is the study and design of “how people and computers work
together so that a person’s needs are satisfied in the most effective
manner” (Galitz)

2. It is “a discipline concerned with the design, evaluation and

implementation of interactive computing systems for human use and
with the study of major phenomena surrounding them” ACM

◼ From the definitions, it is both a field of:

- Practice and
- Study

33
 User Interface Design (UID) and Human Computer
Interaction (HCI)
• Aspects of HCI
– Use and context
– Human
– Computer
– Development
process (UCD)

– The need to understand: contextual factors, human factors and

interaction

34
 User Interface Design (UID) and Human Computer
Interaction (HCI)
• Aspects of HCI

• Source: http://19 October 2011 cs147.stanford.edu

35
 User Interface Design (UID) and Human Computer
Interaction (HCI)
• Aspects of HCI

36
 Interaction Design (ID) and Human Computer Interaction
(HCI)
◼ ID is part of HCI

Source: Rogers et al. (2011)

37
 User Interface Design (UID) and Human Computer
Interaction (HCI)
◼ HCI as multidisciplinary field

38
 User Interface Design (UID) and Human Computer
Interaction (HCI)
◼ The basic issues in HCI arise from different disciplines
1. Use and context
 E.g., Anthropology, Sociology, Organizational Design and Psychology
2. Human
 E.g., Cognitive Psychology, Linguistics, Communication Theory, Ergonomics
and Human Factors
3. Computer (and Development
 E.g., Computer Science, Engineering, Software Engineering, Computer
Engineering, Operating Systems, Computer Graphics, Graphic Design, and
Artificial Intelligence
◼ Problem arising from the multidisciplinary nature
 Difficult to make decisions (why?)

**** Expert works from their own perspective; difficult to make decisions quickly

39
 Design Trade-offs
◼ UID is based on decisions
◼ Most of the decisions conflict
◼ Based on constraints, you’ll make design decisions which
will involve trade-off throughout the course
◼ E.g. use text or multimedia; what important features (tasks) UI
can support, etc.
◼ NOTE:
• Accessibility refers to the degree to which an interactive product is accessible by as many
people as possible. A focus is on people with disabilities. People are considered disable if
:
• They have a mental or physical impairment.
• The impairment has an adverse effect on their ability to carry out normal day-to-day
activities
• The adverse effect is substantial and long term (meaning it has lasted for 12 months, or is
likely to last for more than 12 months or for the rest of their life).

40
 Some terms to be familiar with!
◼ Interaction, Interface, Interactive systems
◼ Pervasive computing; Ubiquitous computing
◼ Natural user interface
◼ Human factors
◼ Interaction modes
◼ Multimodal interaction
◼ Usability; usability goals
◼ User experience; user experience goals
◼ Affective computing
◼ Design process
◼ Models, theories and guidelines
◼ Human-computer Interaction
◼ Accessibility.

41
 Practice Questions
• What are Interactive Systems?
• What are pervasive interactive systems?
• Explain what is User Experience?
• Differentiate between useful, usable, accessible
and usability?
• What are multimodal interactions?
• List 5 modes of interaction in UID
• List four major human factors that are expressed
in interactions
• What are four core threads of user experience?
• Explain Accessibility as it relates to interactive
system.
42
 Summary
◼ This lecture
◼ Looked at examples of poor design
◼ Discussed:
◼ Features of User Interface design
◼ Importance of good design and problems with
poor design
◼ Usability and user experience
◼ Usability goals and user experience goals
◼ HCI and the relationship with User Interface
Design
43
Questions and Feedback

?
44
45
 Assignment (Group work)
1. Provide one example of good UID and one bad design.
State one aspect of the interface which makes it good or
bad design. Explain why this is so.
2. Your team is to create a mobile application to support
student learning at DUT. What are some of the decisions
you’ll have to make about a-d below? In each case, state at
least one factor you would consider before making the
decision.
a. Use (task) and context
b. User
c. Interface
d. Hardware

46
 References
◼ Reference Textbooks
◼ Rogers, Preece & Sharp (2015). Interaction Design:
Beyond Human-Computer Interaction. John Wiley
o Chapter 1
◼ Shneiderman, Plaisant, Cohen, Jacobs & Elmqvist (2018).
Designing the User Interface: Strategies for Effective
Human-Computer Interaction. Pearson
o Chapter 1

47
End of Session

48