Lecture 2:

3 components of HCI: user (human), computer, interaction (task)

- user + computer interact to fulfill a task which gives back an output to the computer or
user
- Human aspect (how do humans interact with the
computer): sensory system (5 senses), motor system,
cognitive system (attention, decision making), emotions,
proprioception (sense that lets us perceive the location of
our body)
- Computer aspect:
- A computer system is a complete computer that has hardware,
operating system and peripheral equipment needed and used
for full operation.

- hardware, software, peripheral equipment (equipment

that adds functionality, ex: external camera)
- Input: keyboard, mouse, microphone
- Output: monitor, touch screen, audio

HCI or not HCI?

 - Interaction aspect: we interact with computers through interfaces (command lines,
menus, 3D interfaces, forms, direct manipulation)
-
- Affordance: relationship between properties of an object and capabilities of the agent
(what the agent can do and the object allows)
- Ex: the affordance of a door is that it can open when you push it
- Signifier: a way to tell the user what affordances there are
- Ex: the signifier of the door would be a sign that says “push”

A few don’ts

● “Blue is my favorite color”,

● “I am right handed”,
● “My favorite app is also work in this
way”
●“We designed in this way, because we
like it”
Lecture 3
User centered design - A design approach that considers the actual users’
needs throughout the entire design process
- Design aimed to “change” or affect how a user interacts with the environment
- Consider the actual user’s needs

- based on understanding of users

- Users are involved in the creation process
- Process is iterative
- Addresses the whole user experience
- you have a control over your design to change users’ behaviors

How to UCD
Needfinding -> design alternatives -> prototyping -> evaluation
- Needfinding: do the ppl that i'm designing something for need what i am offering and
can they use it effectively (surveys, interviews, observations)
- Design alternatives: thinking of how to cater to the user’s needs (brainstorming,
personas, storyboards)
- Prototyping: making a first prototype of what we think the users need, iterating over it to
get a finished product (paper prototype, wireframe, WOZ)
- Evaluation: how successful were we? (Qualitative, empirical, predictive)

USC Pros
- Easy to learn and use interface
- Avoid common mistakes
- Builds a product for users which is ready to use
- Adredded design issues later in the development
- Mitigates human error

Why do projects fail so often?

 Unrealistic ideas
 Badly defned requorments
 Use of immature technology
 Stakeholder politics
 Inability to handle the project complexity
 Poor communication among users and customers

What happens when you do not follow UCD?

- you can be killed by <bad> design,
Some design fails are not obvious till user testing.

UCD can save you life, time, future and etc.

Design thinking – non-linear iterative process that teams use to understand users, challenge
assumptions, redefine problems and create innovative solutions to prototype and test.

- Empathies: research the user’s needs

- Define: state the user’s needs and problems
- Ideate: Challenge assumptions and create ideas
- Prototype: start to create solutions
- Test: try your solution out

OR

Double diamond method – DD conveys a design process to designers and non-designers alike.
The two diamonds represent a process of exploring an issue more widely (divergent thinking)
and then taking focused action (convergent thinking)

- Discover: Literature review, user

interview, behavior observation
- Explore: workshops, task analysis, user
needs, constraints limitations
- Develop: Idea generation
- Deliver: prototyping and testing

Different approaches of design processes:

ADDIE, Human-Centered Design, Google design
sprints

We are focusing on User-Centered Design, and sometimes use interchangeably with Human-
Centered design.

Principles of UCD
1. Design is based upon an explicit understanding of users, tasks and environments.
2. Users are involved throughout design and development.
3. Design is driven and refined by user-centered evaluation.
4. Process is iterative.

Continuous improvement with user feedback.

5. Design addresses the whole user experience.
You can not skip one component of UCD without involving users.
6. Design team includes multidisciplinary skills and perspectives.
UCD team: psychologists, designer, programmers
Stakeholders- anyone affected by the success/failure of the project
- primary- actual users
- secondary- receive output or provide input
- tertiary- no direct involvement
- facilitating- involved with the development

As a design team we need to meet as many stakeholders needs as possible.

Needfinding – at this stage, we aim to understand our users’ needs to perform a task

Need Finding techniques:

- interviews
(the flow of good interview feels like a good story. Introduction,
Kick-off/Background, Grand Tour/Build report, Reflection), Schedule time,place
comfortable for the user,introduce yourself,open-ended,uniieased,non-leading
questions for beggning,follow up with related questions
- - in person surveys - An approach to collect user data with a list of questions (i.e.,
questionnaire).

Advantages
● Can be online or in person
● Quick access to a larger number of users
● Easy to analyze [use automatized tools]

Disadvantages
● Hard to formulate questions
● Results might depend on current mood
● You might have data on how they feel/think, not how they interact with
the product

- Observations. - With user observation you can collect data to evaluate the usability of
your product with actual users.

Two types of user observations:

1. Naturalistic: watch the users while using the product. For example, watch your peers while using
iCanvas app./ reliable but hard to replicate and get quantified data/

2. Controlled: conducted in a laboratory environment for getting more quantitative data, e.g., number
of clicks, response time, etc./ easy to conduct, analyze and reproduce/
 - Find extreme as well as perfect users
- Find users from different age, ethnicity, back groups etc.

We have more different methods to understand users’ needs. We can use the results of one approach to
inform the others. For example, using the findings from observation to prepare questions for survey.

Week 4- Design alternatives

how to come up with ideas?
- Brainstorming (ideation technique for coming up as may ideas for possible solutions to
a given problem)
- First think individually(go with quantity, freestyle write all you have), then as a
group(determine rules for communication, no need of justification, let everyone
speak)
- Discuss the best ideas together
- Can use HOW MIGHT WE method
Rules of brainstorming: Defer Judgment, Encourage wild ideas, build on others’ ideas, stay
focused on the topic, one conversation at a time, be visual, go for quantity

- Personas
How to come up with a persona? – collect user needs, analyze data to find
patterns,cluster user segments, write a persona based on segment
- Fictional characters to represent your users
- Find their goals, needs, wants
- Interactive persona
- Include age, gender, personality type etc
- Created based on the results (and patterns) of needfinding
- Storyboard - Series of rough sketches that show the user
interacting with the product
- Conveys a story on a user carrying out a task
- Many details are missing e.g.(colors, UI elements)
- Rough sketches
- Allow us to get a high level feedback from the user
- Setting (people involved, environment, task)
- Sequence (what steps are involved, what leads the
user to use the product)
- Satisfaction (user’s motivation, end result, what
needs are satisfied)
- POV: who needs what and why – a POV is your reframing of
design challenge into an actionable problem statement that
will launch you into generative ideation
- USER needs to USER’S NEED because INSIGHT
 -WE MET name, WE WERE SURPRISED TO FIND OUT tension/conflict
WE WONDER IF THAT MEANS what we inferred. IT WOULD BE GAME
CHANGING TO goal of the product
- How might we – short questions that launch brainstorming. We use might to defer
judgment

Lecture 5- Prototyping - Experiment process where the team implements ideas into tangible
form from paper to digital.With prototyping the team diminish, prevention, correction and
failure
Fidelity refers to the level of detail and functionality you include in your prototype.[visual design,
content and interactivity]
- low, med and high-fidelity prototypes
- Ideate in the low fid, detailed in the med fid and visualize in the high fid
Why prototype: clear picture of potential benefits, risks and costs to stakeholders, early
possibility to adapt changes, improve time-to-market by minimizing the amount of errors

Low fidelity:
- paper prototype lacks realism and requires in person testing.
- Cheap and quick iterations
- Good for teambuilding
- Pieces serve as documentation
- Honest feedback
- Individual pieces serve as documentation.
- Low time investment
- Lacks realism
- Covers interaction but no aesthetics.
- Test users have low expectations
- clickable wireframe – don’t require a separate person to work as a facilitator during the
testing
- Only has placeholders
- Only the most important interactions
Med fidelity:
- can interact with prototype
- All interactions are there (everything is clickable)
- Contents and visual designs are less emphasized
- Content is static but allows interactions
- You can view and interact on a device
Wireframes:
No real content, all pages available, interactive storyboard, architecture & layout

High fidelity prototypes appear and function as similar as possible to the actual product that will
ship:
 - visual design: realistic and detailed design – all interface elements, spacing, graphics
look just like a real app.
- content: designers use real or similar to real content. The prototype includes most or all
of the content that will appear in the final design.
- Interactivity: prototypes are highly realistic in their interactions
+ meaningful feedback during usability test, good demonstrations of stakeholders
- time demanding, costly to build
Wizard of OZ – replicating system behavior with a human operator. Wizard controls the robot.

Task analysts:
- What is a task?
- Process of learning about ordinary users by observing them in action to
understand in detail how they perform their tasks and achieve their intended
goals - Set of activities required to achieve a goal
- Task analysis:
- What are the user’s goals?
- What are they trying to achieve?
- What do they do to achieve the goal?
- How are they influenced by their environment and the HCI product
- Process of learning about ordinary users by observing them in action
- How to analyze a task?
- GOMS approach considers humans are input/output systems, BUT do not
include what is happening in between. (goals, operators, methods, selection
rules)
- Goals: single or multiple to use HCI product
- Operators: series of operators to execute the selected method
- Methods: series of operators to achieve the goal
- Selection rule: to select which method to use
- CTA Cognitive task analysis (emphasis on the cognitive process behind decision
making -memory, attention, cognitive load)
- How to perform? Observe people while performing task -> what user
need to perform the task? -> populate knowledge representation -> check
your understanding -> design interfaces based on analysis
+ less formalism yet good enough to design interfaces, consider cognitive aspect of task
- time, hard to carry out if you are new in designing interfaces

Lecture 6: heuristics feedback

Feedback is essential past of interactive systems. The user has to be informed what has
happened to decide next actions.
Feedback should be prompt and clear to understand by the user
Feedback can be: visual, auditory, tacticle, combinations of the others
- the user is informed what has happened to decide next actions
- Ex: error message
 - Feedback cycles: take an action, observe the result and adjust the behavior
Feedback cycles are not limited to HCI
- Gulf of execution: The difference between the intentions of the user and what the system
allows them to do
- The user needs to understand how the system operates and figure out how
to change it. (it is our responsibility to bridge these two gulfs)
- How to communicate that with the users?
- Affordances
- Make actions visible
- Provide feedback
- Minimum effort needed to execute an action
- Skeumorphism – a term most often used in graphical user interface
design to describe interface objects that mimic their real world
counterparts in how they appear and/or how the user can interact with
them
- Gulf of evaluation
- Assessing the state of the system after an action was performed
- How to communicate that with the users?
- Give feedback frequently and immediately
- Balance feedback with actions
- Vary feedback (audio/video etc)
- Use direct manipulation (users actions are shown on screen in real time,
ex: dragging a file across a computer screen)
- Direct manipulation is an interactive style in which users act on displayed objects of
interest using physical, incremental, reversible actions whose effects are immeadiatly
visible on the screen. The performed action should be similar to the actual one.
Schneiderman’s 8 golden rules

Norman’s 7 Principles
1. Use both knowledge in the world and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible.
4. Get the mappings right.
5. Exploit the power of constraints, both natural and artificial.
6. Design for error.
7. When all else fails, standardize
Nielsen’s usability heuristics:

1. Visibility of system status – battery, uploading process

2. Match between system and the real world. – trash bin in the MAC, bookshelf

3. User control and freedom. – undo,redo,cut,copy,paste

4. Consistency and standards – basic icons like for profile, calendar and so on

5. Error prevention – it seems you want to continue without registration/ your password must have: upper
& lower case

6. Recognition rather than recall – minimize users memory load by making elements visible such as
kogato pishehs gogle I toi ti dava predlojeniq

7. Flexibility and efficiency of use – shortcuts – hidden for novice users – may speed up the interaction

8. Aesthetic and minimalist design – no irrelevant or rearly needed info

9. Help users recognize, diagnose, and recover from errors - “35$ is the minimum amount for online
order dismiss review cart” or “too week” for password

10. Help and documentation – related articles, terms and services

Lecture 7:
Visual design aims to be practicle and help designers to increase usability
goals:
- GUDIE- convey structure and relationships
- PACE- help orient, draw people in, provide hooks to dive deep
- MESSAGE- express meaning and style, brethe life into the content

Visual hierarchy is the principle of arranging elements to show their order of importance:
- Size(larger easily), color(brighter colors more attractive), contrast(dramatically contrast is
eye-catching), alignment(out of alignment elements stand out more).
Repetition(repeating styles can suggest content is related), proximity(closely placed
elements seem realted), white space(more space around elemnts drws the eye toward
them), texture & style(richer texture stand out over the flat ones)
- Color change indicate a change in state of the system
- Ex: error message
A typeface is a collection of letters. While each letter is unique, certain shapes are shared
across letters. A typeface represents shared patterns across a collection of letters

Verdana is a typeface. Verdana bold is font. Verdana 19 is a font

Elements of typography
Weight refers to the relative thickness of a font’s stroke: 1)light, 2)regular 3)medium 4)bold
Layout: grids, a grid is a structure made up of a
series of interesting straight or curved lines used
to structure content
Help create hierarchy, ease the design procedure, standardize the interface, alowww aligning
the elements, enable hierarchy
Grid elements: columns, guts and margins

Use of color in HCI

- indicate status changes (attention getting green to red), loading bar
- display error for wrong formatted inputs, user input for date
-more color means more information, the user tries to find a reason for it
- emphasize organization of related parts
-very easy to mess up the interface
Grayscale first, then add color
Status change example: colors of visited and unvisited links in google scholar

Lecture 8:
- Low fidelity prototype:
- Needs to have all the functionalities
- No colors
- No text
- Focus on interactions
- Medium fidelity:
- Iterate over the previous prototype
- Put some visual design
- All buttons need to work
- Visual design elements:
- Scale (size of elements)
- Contrast
- Direction
- Position
- Evaluation flow:
Define the task -> define performance measures -> develop the experiment -> recruit
participants -> do the experiment -> analyze the data -> summarize the data

-User research
Get information about your user:
 Their goals, their behaviors, their reaction to technology -> recall needfinding
Who is your user? Keep your specific type of user group in mind.
You are not your user, different users have different goals, capabilities, needs,
wants -> recall stakeholders

Usability test: Usability tests helps us to uncover problems, discover opportunities and learn
about users.
1. Goal of the test
2. Research question
3. Test-script
4. Test
5. Analyze result
6. Implement result

Experiments:

Within-subject design: Same participant tests all conditions corresponding to a variable.

Requires fewer participants.
Increase the chance of discovering a true difference among your
conditions.
Between-subject design: Different participants are assigned to different conditions
corresponding to a variable.
Minimize the learning effects across conditions
Lead to shorter sessions
Easier to set up and analyze

Web analytics is the technology and method for the collection, measurement, analytics and
reporting of websites and web applications usage data.

Usage:
1. Improving website/application design and user experience
2. Tracking and measuring success of actions and programs such as commercial campaigns.
3. Identifying problems and improving performance of web applications
Metrics
● Visit count:
page view, visit, unique visitor.
● Visit duration:
time on page, time on site.
● Clickstream analysis
A/B testing

Compare 2 versions of the same website while it’s running live. Use analytics for analysis.

Web experiments
You should follow me on twitter here

Predictive models
In HCI predictive models allow matrics of human performance to be determined analytically
without undertaking time-consuming and resource-intensive experiments
Fitts’ model of the information processing capability of the human motor system

Fitts law (model that predict human performance) not going to be asked at the exam, but
know differences between data driven model (doesn’t use equations) and predictions
(uses equations)

Fitts law state the amount of

time required for a person to
move a pointer to a target
area is a function of the
distance to the target
divided by the size of the
target.

Statistical tests
Chi-square test, Simple logistic regression, ANOVA, Student’s t-test ....

Lecture 9: cognition in HCI

Cognition:
Cognition is the “mental action or process of acquiring knowledge and understanding through
experience and senses”
 - experiential (from experiences, once it is learned we know how to do it musically
autonomously)
- intuitive, effortless, fast thinking
- driving a car, swimming, riding a bike
- reflective (searching in memory for the learned concepts)
- mental effort, attention, slow thinking
- writing a report, applying UCD for project, studying for exam with textbook

Fast vs slow thinking

System 1 – fast, unconscious, automatic, everyday decisions, error prone
System 2 -slow, conscious, effortful, complex decisions, reliable

Elements of Cognition:
- Attention
- Selectively focusing on one task
- The designer has to guide the user’s attention to the important areas of the
website.
- Visual elements in design plays key role in users attention
- Perception
- Using our senses to perceive the environment
- Proprioception: ability of the body to sense its position(walking in the dark/touch
finger to nose/ clapping with closed eyes)
- Exteroception: senses (most necessary for UXUI design)
- Interception: ability of the body to notice internal stimuli (hunger/heart rate/going
to the restroom)
- Gestalt principles of perception - describe how humans group similar elements
together in their mind, recognize patterns and simplify complex images when we
perceive objects. GPP helps us to organize content on websites and other
interfaces so it is aestetically pleasing and easy to understand.
- Proximity principle- if elements are close to each other, they are related
- Continuity principle- group elements
that seem to follow a continuous path in
a particular direction (ex. The exact
opposite of this:
 - Common fate- if objects are pointed in the same direction, we assume
they are moving in the same direction or in a unison as a group
- Closure principle- we look at complex arrangements of visual elements,
we tend to look for a single recognizable pattern (we look for unity)
- Figure ground- things in the foreground are more important than the
background
- Similarity rule- when items, objects or elements share superficial
characteristics, we perceive them as grouped

- Memory
- Sensory store vs short term vs long term memory
- Sensory memory – shortest one, act like a buffer, stores sensory information
- Short-term memory – limited capacity, magic 7-/+2(wtf is that), you are
immediately aware of.
- Long-term memory – stores for a day/life, requires deliberation/repeats/rehearsal
- Recognition over recall when designing websites
 - Learning
- Incidental vs intentional learning
- Incidental learning:
● It happens without deliberate effort
● Can be spontaneous
● It is not goal directed
The skill acquired is not main goal
● Examples
○ Recognizing faces in the class
○ Learning new routes to go home
○ Learning new word while playing a game
- Intentional learning

● It happens with deliberate effort

● It is structured
● It is goal directed
○ Attend CSAI to be an AI developer
● Examples
○ Study DL book to understand backpropagation
○ Follow arduino tutorial to build a robot
○ Learn new control algorithm to generate a desired behavior on
your robot
-Reading, speaking and listening
-Problem solving, planning, reasoning and decision making

Lecture 10 robotics and HRI:

- interaction with a robot also serves to perform a task
- Robotics concerned with building robots, human-robot interactions focuses on
the interactions in the real world
- HRI applications should be smooth and positively impact the daily life of humans as
interaction partners.
- To have robots interact with humans safely we employ User-centered-design approach
- Design principles:
- Form follows function: states that the shape of a building or object should
primarily relate to its intended function or purpose. (Match the form with the
function ex. Human-like robot should perform human-like skills.
Wlaking,talking...)
 - Underpromise and overdeliver: Introducing a robot as an intelligent agent will
increase expectations about its interaction capability.
- Interaction expands function design process should be in an open-ended way.
(interactions with different ppl in different environments will lead to unplanned
use cases) e.g. using octopus-inspired robot in medical robotics.
- Do not mix the metaphor. design process should be holistic, the appearance
should reflect the skills of the robot e.g. if you have human-like robot without
mouth or hands, the interaction might not be productive.
- The uncanny valley: if a robot or VR character appears to be almost fully human-like the
likability will sharply decrease. The robot seems overly “strange” and can fail to evoke the
emphatic response required for productive HCI.
- Types of interactions between human and robot
- Spatial interactions (where is the robot located/ what is the socially accepted
distance during HRI experiment)
- Verbal interactions (information transmission/Creates joint attention),
- Nonverbal interactions (gaze and eye movement/ pointing and gestures)
- HCI applications
- Service robots – a robot that performs useful tasks for humans or equipment
- Robots for entertainment – pet and toy robots, sex robots
- Robots in healthcare and therapy – socially assistive robots for senior citizens, robots
for rehabilitation
- More types: personal assistants, self-driving cars
- Potential problems:
- attention theft, addiction, robot abuse, loss of interest by users

Interfaces for robotics are painful to interact, that is why we need roboticists with human-
computer interaction background.

Lecture 11 intelligent user interfaces:

- helping the user to communicate with the computer.

- Intelligent: using information in an appropriate way
- Interface: means of communication between user and
computer
- Help us bridge the gulf of execution and evaluation.
 - Examples for IUI: text autocomplete function, chat bots, Google calendar incorporates
Google maps
- Why use these interfaces: interfaces are getting too complex/inflexible, interfaces don’t
interact with each other, can’t adapt for all user needs
- What makes an interface intelligent?
- Can adapt for user needs
- can learn new concepts
- can anticipate the users needs
- interface gives suggestions and takes initiative
- provides explanations for its actions

Week 12: Building smarter societies

Persuasive technology is broadly defined as technology that is designed to change

attitudes or behaviors of the users through persuasion and social influence. Persuasive
technologies can not be coercive and deceptive. They are explicitly designed for
persuasion.
Tools: Increases capability – a tool can be persuasive by: making target behavior easier
to do/ leading people through a process/ performing calculations or measurements that
motivate
Medium: Proides experience – a medium can be persuasive by: allowing people to
explore cause-and-effect relationships/ providing people with vicarious experiences that
motivate/ helping people rehearse a behavior – technologies to train user to change a
behaviour or learn new skill
Social actor: technologies to play animate roles such as coach,pet,assistant

- Can there be a symbiotic relationship between a robot and a human?

- No not yet
- How can we get there?
- Develop technology as a tool (persuasive technology)
- Tech will train you and change your behavior
- Tech as social actors
- IoT (internet of things)
- Physical objects with sensors, processing ability and software that connects and
exchanges data with other devices over a network. Internet of things has been
considered a misnomer because devices do not need to be connected to the
public internet, they only need to be connected to a network and be individually
addressable.
Thing + IT = Thing-based function + IT-based service
- Thing + IT = IoT (example: Bulb + IoT stack -> light + security)
- IoT requirments and challenges:
- Low-power embedded systems – “always on”(or asleep) need high
performance
- Claud computing – data collected across the network can’t all be stored
and processed on local devices.
- Management of big data – Interpreting and acting on massive influx of
data
- Network connection – Network objects have an IP address.
- Dark pattern is a user interface that has been carefully crafted to trick users into
doing things such as buying overpriced insurance with their purchase or signing up for
recurring bills
- Deceptive design patterns
- Nagging behavior(no option for “no”) (ex: “turn on notification” only
has a “ok” or “not now” buttons, but no button to keep them off)
- Obstruction(making a process more difficult than it needs to be) (an
option to turn off something is hidden)
- Interface interference (Manipulation of the user interface that privileges
certain actions over others)
- Sneaking – attempting to hie or delay information that is relevant to the
user
- Forced action – requiring the user to perform a certain action to access
certain functionality
Exam info:
- Every question will have 2 points
- Most questions will have 2 parts
- True/False questions might have two sentences, one can be true the other false etc
- Be specific with your examples

Exam question:
- Give an example of what can a change in color signify on an electronic panel
- Fill in the blank in the UCD diagram and give an example of what process is done in that
step
- What is the gulf of execution and do you minimize or maximize it? (there is a diagram
that basically explains it for you)
- The “play” button on a video is a ___.
- Answer: signifier
-