Human Computer

Interaction
Introduction to Design Pronciples

Wijayanti Nurul Khotimah

1
Overview
In this lesson, we will talk about

• The way we focus on users and tasks in HCI, not on tools and interfaces.

• The role of the interface and how it mediates between user and the task.

• Different views on the user's role in the system.

• User experience more generally and how it exists at several different levels.

2
Interfaces: Between Users and
Tasks
• At the heart of HCI, interaction is the idea that users use interfaces to accomplish some tasks.

• Interfaces can be non-technological (e.g., using pencils to write, using steering wheels to drive) or
technological.

• But in HCI, we're going to focus on interfaces that are computational or computerized.

3
Designing Effective Interfaces
• Successful interface design requires understanding user goals and tasks.

• Knowledge of the task is crucial for effective design.

• Common mistakes made by novice designers: quick jumps to interface design without
comprehending the task.

4
Case Study: Designing a Thermostat
• If we focus on the interface, the thermostat itself, we are
going to focus on things like the placement of the buttons or
the layout of the screen, on whether or not the user can
actually read what is there, and things like that.
• But the task is controlling the temperature in an area.
When we think about the task rather than just the
interface, we think of things like nest, which is a device that
tries to learn from its user and act autonomously. That is
more than just an interface for controlling whether the heat
or the air conditioning is on. That is an interface for
controlling the temperature in our house.
• By focusing on the task instead of just the interface, we can
5
come up with more revolutionary designs.
Five Quick Tips for Identifying User Tasks
Tip 1 - Watch Real Users

• Don’t just speculate. Observe users performing tasks in real settings.

Tip 2 - Talk to Them

• Recruit participants to perform tasks. Encourage them to verbalize their thoughts.

• Goals: Understand their motivations and thought processes.

Tip 3 - Start Small

• Examine small interactions first.

• Avoid assumptions based on pre-existing beliefs.

• Focus: Analyze individual actions to gain insights.

6
Five Quick Tips for Identifying User Tasks
Tip 4 - Abstract Up

• Move from detailed observations to broader task understanding.

• Continuously ask “why” to uncover underlying reasons.

•Example:

• "Swiping a credit card" -> "Making a purchase" -> "Acquiring goods" -> "Repairing a car."

Tip 5 - You Are Not Your User

• Your experiences do not represent those of all users.

• Design for a diverse audience, not just for yourself.

• Action: Set aside personal biases and assumptions.

7
Usefulness and Usability
• The goal of design in HCI is to create interfaces that are both useful and useable.

• Useful mean that the interface allows users to achieve tasks.

• Example: a map is useful in finding our way from one place to another, but it is not the most useable
thing in the world. We have to track our location and plot our own route. And we have to do all of this
while driving the car.

• Before GPS, users wrote down directions, before they actually started driving.

• So, our big concern is usability. That's where we get things like navigation apps. Usability
addresses the efficiency and ease of performing tasks.

8
Understanding Human Roles in
HCI
•Three Possible Roles of Human:

• Processor

• Predictor

• Participant

9
Views of the User: Processor
• Humans as sensory processors. They receive input and generate output.

• Comparable to a computer, but without visible internal processing.

• Design Considerations for the Processor Role

• Interface must align with human capabilities. These are things like what humans can
sense, what they can store in memory, and what they can physically do in the world.

• The interface must be physically usable.

• Users should be able to see all the colors, touch all the buttons, and so on.

• Utilize quantitative experiments to assess interface performance. Example: numeric

assessments of user task completion speed and reaction times to stimuli are
analyzed for efficiency.

10
Views of the User: Predictor
Note:

• The processor role is limited for defining good design.

• Focus will shift to the Predictor and Participant roles for deeper insights.

• We care deeply about the human’s knowledge, experience, expectations,

and their thought process.
• We want them to be able to predict what will happen in the world as a
result of some action they take.
• We want them to be able to map input to output. And that means getting
inside their head.
• Understanding what they are thinking, what they are seeing, what they
are feeling when they are interacting with some task.
11
Views of the User: Predictor
• If we are taking this perspective of user as predictor, the interface must fit with user knowledge. It
must help the user learn what they don't know and efficiently leverage what they do already know.

• These kind of interfaces is evaluated with qualitative studies. Example: perform cognitive walk-
throughs to understand the user's thought process throughout some task.

12
Views of the User: Participants
• User as a predictor, we only consider user as isolated thingkers.

• However, users are not just isolated thinkers; they interact with their environment. They
focus on both internal thoughts and external surroundings. Hence, we view user as
participants.

• Here, we are not just interested in what is going on inside their head. We are also
interested in what is going on around them at the same time, like what other tasks or
interfaces they are using, or what other people they are interacting with.

• We want to understand for example, what is competing for their attention? What are their
available cognitive resources?
13
Views of the User: Participants
(2)
• Here, our interface must fit with the context. It is not enough that the user is able to physically use
the system and knows how to use the system. They must be able to interact with the system in the
context where they need it.

• Because context is so important here, we evaluate it with in situ studies. We have to view and
evaluate them in the real world. Example: if we are evaluating a new GPS application, we need to go
out and look at it in the context of real drivers driving on real roads.

14
Designing with the Three Views: A Case Study
of Tesla's Address Entry Screen

•Elements of the Screen:

• Text box for address entry.

• Suggested results displayed below the input.

• On-screen keyboard for text input.

15
Designing with the Three Views
• We are trying to redesign it such that the user can enter the address of their
target destination more quickly so that they can get on with navigation.
Processor Model Approach
•Objective: Evaluate observable user behavior while entering addresses.
•Method:
• Conduct controlled studies with participants entering addresses.
• Time their interactions across different interface designs.

•Advantages:
• Provides clear, descriptive statistics (e.g., average time to complete tasks).
• Objective comparisons between different interface designs and interaction methods.

•Limitations:
• Lack of understanding regarding user motivations behind observed behaviors.
• Ineffective for evaluating novice users’ experiences or challenges.
• Best for optimization, not comprehensive redesign insights.

16
Designing with the Three Views
Predictor Model Approach
•Objective: Engage users directly to understand their thought
processes.
•Methods:
• Conduct interviews, focus groups, and surveys.
• Show prototypes and gather user feedback on their experiences.
•Advantages:
• Identifies specific user needs and misconceptions.
• Captures varied expertise levels, catering to both novices and experts.
•Limitations:
• Expensive to analyze qualitative data (transcripts, survey responses).
• Prone to biases from the analyst's preconceived notions.
• Limited insight into real-world context where the interface is used.

17
Designing with the Three Views
Participant Model Approach
•Objective: Evaluate user and interface interactions within real-
world contexts.
•Benefits:
• Understanding user behavior as part of broader activities (e.g., driving).
• Captures authentic user attention and distractions in realistic
environments.
•Limitations:
• Difficulties in conducting real-world evaluations (time-consuming).
• Requires fully functional interfaces for authentic testing.

• Exposure to uncontrollable variables in the environment.

18
19
Integrating the Models
• Each model offers unique insights. The benefits of some of these models address to limitations of others. For example:
• The processor model doesn't give us much insight into what novices are thinking. But the predictor model is particularly good at targeting
novices.
• To predict a model makes it difficult to conduct real objective comparisons. That is exactly what the processor model is good for.
• Neither the processor nor the predictor model take into consideration context, but that's what we get when we consider the participant model.
• The participant model doesn't isolate variables very well. But the processor model is very good at isolating those variables.
• The used of the combination of them at different time in different context is effective for design.
• Example of Design Iterations:
• Start with participant observations to identify user needs (participant model). Based on that, we might observe that they spend a lot of time
fumbling around a return to the same few locations. So, we might redesign an interface to include some kind of bookmarking system and
present it to users in interviews.
• Use feedback from the interviews to iterate on designs based on user input (predictor model). They might tell us they like that design, but
further note, they don't need a long list of bookmarks. They only need work and home. Based on that, we might then design an interface where
a simple swipe takes him to work or to home depending on where they are right now.
• Finally, we might test it with the processor model metrics for efficiency improvements.

20
Good Design, Bad Design
See this video:
https://www.youtube.com/watch?v=v_yf_y1pa20&t=2s

Good Design Bad Design

•Scenario: •Scenario:
• A GPS system that warns users 20 seconds • A GPS system that warns users only 2
before a required turn. seconds before a turn.
•Voice Alert: •Voice Alert:
• "In 1,000 feet, turn left." • "Turn left now, hurry!"
•Importance of Timely Alerts: •Consequences of Poor Design:
• Allows for safe navigation and preparation. • Increases stress and can lead to dangerous
last-minute turns.

21
User Perspective and
Interface Success
• The design of an interface can greatly depend on how we understand the user.

•User Models:

• Sensory Processor

• Predictor

• Participant

22
The Sensory Processor View
•Description:

• Viewing the user solely as a sensory processor.

•Assumption:

• Users only need a brief alert because human reaction time is less than a second.

•Limitations:

• Neglects the practical needs related to executing actions (e.g., turning safely).

23
The Predictor View
•Description:

• Recognizes that users need time to react and execute tasks.

•Insight:

• Users require additional seconds to slow down and prepare for a turn.

•Implication for Design:

• Alerts should be given earlier to accommodate user behavior.

24
The Participant View
•Description:

• Acknowledges real-world contexts affecting user behavior.

•Considerations:

• Drivers may face distractions, such as children in the backseat or conversations with other
passengers.

• Comprehending the environment leads to better design solutions.

•Recommendation for Design:

• Provide ample reminders and time to prepare for turns.

25
User Experience Design
• User experience design is attempting to create systems that dictate how the user will experience
them.

• In general, user experience is a phenomenon that emerges out of the interactions between
humans and tasks via interfaces.

• User experience is like the weather, there is never no weather, there is never no user experience.

• It might be a bad experience if we don't design it very well.

26
More About User Experience (UX)
• User experience (UX) also goes beyond the simple interaction between user and task via
interface.

• UX touches on emotional and personal relationships with interfaces. We can build this by
expanding our understanding of the scope of the user experience.

• Individual factors influencing UX: age, sex, race, personal experiences, and expectations for
the interface. All of them shape user experience.

• UX goes beyond just designing an interface to help with a task. It touches on whether the
individual feels like the interface was designed for them.

• UX examines whether they are frustrated by the interface or joyous about it.
27
Group-Level User Experience
• Interfaces can lead to different experiences among
social or work groups.

• User experience can reflect and influence societal

changes. for example: group chat and channel in
whatshap .

28