---
tags: Bachelor
---

# Sunto HCI

[TOC]

## 1. Introduction 🎬

**Human-computer interaction:** 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.

**HCI goal:** to develop or improve the safety, utility, effectiveness, efficiency, and usability of systems that include computers.

**Paradigm change**

- `Technology-driven design:` technology influences the design of the interface which give the user the functionality and interaction mechanisms of the system.
- `User-centered design:` user requirements define the functionality of the interface which runs the design of the technology

**Course aims**

- present the techniques and issues involved in HCI to `promote usable and engaging interaction design`
- give examples on how to
- document users needs and goals
- translate user needs/goals into design
- evaluate the quality of design alternatives

## 2. Interaction Quality ✨

**Hierarchy of consumer needs**


- **Functionality (**utility**):** a product will be useless if it does not contain appropriate functionality.

- **Usability:** once people had become used to having appropriate functionality they then wanted products that were easy to use.
- is a `quality attribute` that assesses how easy user interfaces are to use

- **Pleasure (**desirability**):** having become used to usable products, people will soon want something more, products that bring not only functional benefits but also `emotional ones`.

The overall feeling about the product is called **brand experience**.

**Usability: 5 quality attributes**

1. `Learnability:` how easy to learn?
2. `Efficiency:` how fast to perform tasks?
3. `Memorability:` how easy to reestablish proficiency?
4. `Errors:` frequency, severity, ease of recovery
5. `Satisfaction:` how pleasant to use?

**Quality** = absence of problems, is measurable:

- `objective data:` performance is measured by behavioural data, user observations
- `subjective data:` quality is estimated by the user, self-report, questionnaire or interview

**User Experience**

- `Positive`
- **good design is more than absence of problems**
- add “extra value” to design (emotion, fun, personal fulfillment)
- `Holistic`
- pragmatic qualities (traditional usability dimensions)
- hedonic qualities (non-task related, beauty, challenge, stimulation and self-expression)
- `Subjective`
- usability focuses on performance and tasks: can be objectively measured
- hedonic attributes relate to the user’s self which is subject to deep variations among individuals

## 3. Design Principles ⭕

- **`Simplicity:`**
- simple things **work better** (`strong correlation with usability`)
- simple things are **more beautiful** (`strong correlation with aesthetic`)
- **Design factors:**
1. visual clutter
2. number of colors
3. symmetry
4. figure-ground contrast

- **`Visibility:`** is concerned with making the **tasks at hand easy to see and find**
- all the functional parts must also provide a **clear message** about what the user can do through them

- **`Feedback:`** includes sound, highlighting, animation and combinations of these

- **`Affordances:`** work as an **invitation to use an object in a specific way**
- `eg:` a mouse button invites pushing, a door handle affords pulling
- children perceive affordances differently from adults

- **`Constraints:`** restrictions to the possible actions that can be performed
- help prevent user from selecting incorrect options and incur in errors
- `physical`, `cultural`, or `logical`

- **`Mapping:`** relationship between controls, their movements and the results in the world

- **`Consistency:`** design interfaces should have similar operations and use similar elements for similar tasks
- `internal` vs `external` consistency

### Usability heuristics

Similar to design principles, except more prescriptive.


## 4. Interaction Design & PACT 🦼

(Immagine dal capitolo 2)


(Immagine da questo capitolo)


**When do you evaluate?**

- `Formative evaluation:` during design and development process
- inform design
- `Summative evaluation:` after design is deployed
- measure effectiveness
- check standards
- guide adoption decisions
- collect requirements for future systems

### PACT

**PACT Analysis:** user-centric understanding of design problems, **for a good design**, takes into account:

- `People:` who the users are
- `Activities:` what activities are carried out by users
- `Context:` where the interaction takes place
- `Technologies:` what technologies are used

**Three categories of users/stakeholders**

1. `Primary:` direct interaction, **frequent use**
2. `Secondary:` occasional use or via someone else
3. `Tertiary:` affected by its introduction, or will influence its purchase

… la gente è diversa… bla bla bla… **(pag.22 - pag.44)**

## 5. Benchmarking & User Requirements 📃

### Benchmarking

**Goal:** identify the best products/practices in a certain industry (or in similar ones).

- to have a **general overview** of the current systems that foster sustainable mobility (may help to identify a gap to work on with your project)
- **inspirational for the design:** it works as a `design library`
- i.e. an organized collection of best practices and examples to take inspiration from

**Steps:**

1. **collect** examples of systems for fostering sustainable mobility
- focus on a domain
- use several keywords
- local, national, international examples
- `don’t look only at apps` (public displays, peripheral displays, tangible interfaces, kiosks, wearable devices, etc…)
2. **classify** the examples found `for affinity` (e.g. thematic, of target users, PACT, of design strategy adopted, etc…)
- `orthogonal axes`
- `conceptual map` (hand drawn, or through [Xmind](https://www.xmind.net/))

A possible way collect and organize the examples could be to create a presentation and take note of:

- Name of the system
- An representative image
- A short description of how the system works
- URL
- Keywords that summarize why that example is interesting

### Ideation: definition of the design space

Criteria for the choice:

1. Identification of a (market) gap / people’s need
2. Personal interest
3. Easiness access to the field (btw, be ethical, follow the protocols)
4. Realistic evaluation of timing

### User Requirements

User requirements are the translation of user needs in features of the system, should be as specific, unambiguous, and clear as possible.


**NOTE:** they can be revised after the evaluation (new iteration), but must not change radically during the design and evaluation phase.

- **MUST** be justified and related to data

**Type of requirements**

- `functional:` essential ones for the product to actually work
- data Requirements (often functional)
- `non-functional:` as important as functional requirements for the product's success
- environmental or contextual requirements, usability, look and feel, …

**Requirement template example:**


Standard format, or template, for specifying requirements:

- unique reference number specifying whether the requirement is functional or not
- a one sentence summary
- the source(s) of the requirement
- the rationale for it

### Data-gathering methods

Use the PACT model as overarching structure to your data collection.

- **Studying documentations:**
- :heavy_check_mark: ​good source of data about the steps involved in an activity and any regulations governing a task
- :heavy_check_mark: ​good for understanding `legislation`, and getting `background information`
- :heavy_check_mark: no stakeholders time
- ❗ not to be used in isolation
- **Researching similar products:**
- `benchmarking`
- **Observation:** spend time with users in their daily activities
- participant / Non-participant
- In the field (remember to take pictures)
- :heavy_check_mark: ​good to gain insights on the nature and context of users’ activities
- ❌ requires time and commitment and can result in a huge amount of data
- 👁‍🗨 What do you want to know? Plan a grid to fill.
- **Interviews:**
- structured, unstructured, semi-structured or contextual
- group vs individual interviews
- :heavy_check_mark: ​good for exploring issues
- ❌ time consuming
- **Questionnaires:** designed to elicit specific information
- often used in conjunction with other techniques
- can give quantitative or qualitative data
- :heavy_check_mark: ​good for answering specific questions from a large, dispersed group of people
- :heavy_check_mark: ​good to know opinions
- ❌ bad to know motivations

**Data gathering guidelines** 🚗

- involve all the stakeholder groups (primary, secondary, tertiary users)
- involve more than one representative from each stakeholder group
- use a combination of data gathering techniques
- when possible, support the process with **props** such as early prototypes and task descriptions
- **run a pilot session**
- consider carefully how to record the data: photos, videos, audio recording, notes..

## 6. Contextual Interviews 👀

- What do you want to know?
- plan a set of central questions (using PACT)
- think carefully of the wording of questions not to bias
- focus the interview
- conduct a pilot!!
- let user’s responses lead follow-up questions
- follow interesting leads
- adapt questions to suit the context

**Analysis** (of the transcribed records)

- look for key events/themes/patterns of behavior that drive the activity
- recurring `patterns` or themes (emergent from data or from theory)
- `categorizing` data (categorization scheme may be emergent or prespecified)

**Focus Group** (3-6 people)

Used either for evaluation or to make different points of view and conflicts on a certain topic emerge.

… bla bla bla… Bring food and drinks ​🍫:tropical_drink: … (no ndr)

### Contextual Inquiry

> “The core premise of Contextual Inquiry is very simple: go where the customer works, observe the customer as he or she works, and talk to the customer about the work. Do that, and you can’t help but gain a better understanding of your customer.”

**Principles of contextual inquiry**

- [CONTEXT](#Context): see the work where it unfolds
- [PARTNERSHIP](#Partnership): make yourself and the user collaborators in understanding the work
- [FOCUS](#Focus): identify what information you want to bring home and share the goal with the team
- [INTERPRETATION](#Interpretation): find common patterns in several different observations

#### Context

`Summary` vs. `ongoing` experience: by **being present** in the time and place of activity, we can access much richer data.

`Abstract` vs. `concrete` data: if is leaning forward, points at artifacts are being concrete, **we need real facts, not abstractions**.

#### Partnership

You are the Apprentice, the customer is the Master: **be humble and curious**.

**Three stages of a contextual interview:**

1. `Introduction:` Interviewer and user establish a **relationship of trust**
- the researcher **introduces** himself and the **purpose** of the research
- questions about **recording** and **confidentiality**
2. `main body:`
- observation of the user working with the product
- discussion
- notes, pictures and recordings
3. `Wrap up:`
- **confirm the observations** to the user

#### Focus

**Establish a focus:** a project focus keeps the project **team aligned** towards relevant questions.

**7 Ways to Screw up a Contextual interview:**

1. Not being inquisitive / nosy enough
2. Overly disrupting the task
3. Turning it into a regular interview
4. Failing to respect your participants
5. Failing to observe and take good notes
6. Focusing on the wrong details
7. Slipping into abstraction

#### Interpretation

**Group interpretation:** (max 48h after the interview) the `outputs` are

- a **sequence of notes** (e.g. [affinity diagrams](#AffinityDiagrams), including observations, questions, design ideas and breakdowns, indexed by user number (important to `keep anonymous`)
- a set of **work models** (see [Models](#Models))

##### Affinity Diagrams

In pratice are boards full of post-it (ndr) used to organize ideas.

- generated during group session
- each observation/idea/note is copied to a `post-it`
- notes are `hierarchically grouped` into themes, based on the focus of the project

### Models

Are a **graphical way** of presenting the results of a contextual inquiry, they are generated during [group interpretation session](#Interpretation) (in contextual inquiry).

**Typologies**

1. **FLOW:** direction of communication and coordination
- focuses on the **roles** of different users, **and how they communicate** and coordinate to get work done
- from a specific individual **perspective**
- for the `communications` includes the **places** where happened, the **artifacts** used, and **breakdowns** in communication that negatively impact work
2. **SEQUENCE:** describes the **steps of action** to reach a certain goal
- for the `actions` includes the **intent** behind, the **trigger**, and **breakdowns** that create problems
3. **ARTIFACT:** documents physical objects that support the work
- during the contextual inquiry, interviewers should inquire into the **structure**, **content**, **presentation** and **usage** of the artifact, as well as any **breakdowns** in its current use
4. **CULTURE:** external influences
- revealed in the **language**, the **tone** of the place, the **policies** and the **influence** of the overall organization
- **influencers:** the individuals, formal groups or abstract principles that influence the work of specific people
5. **PHYSICAL:** layout of the work **environment**
- Includes the **organization** of space, the **grouping** of people, and their **movement** in the space.

**Consolidating models** across different users and interviews allows the team to:

- see patterns
- achieve better coverage
- reduce likelihood of bias by one idiosyncratic user or interview

## 7. Cognitive Processes 🧠

**Key points**

- `attention is limited` and cannot be given for granted 🥱
- `design as a way of focussing the user attention` 🎯

**Core cognitive processes**

- **attention**
- `alerting:` achievement and maintenance of a state of arousal, or sensitivity to incoming stimuli
- `orienting:` selection of information from a source of incoming stimuli
- `executive attention:` maintain or suppress information focussing to relevant parts of the perceptual field, while ignoring tasks irrelevant stimuli
- [perception and recognition](#8.GestaltPrinciples(perception)🧿)
- [memory](#9.UserMemory💫)
- reading, speaking and listening
- problem-solving, planning, reasoning, decision-making, learning


… the "driver looked but failed to see" 🚦 …

## 8. Gestalt Principles (perception) 🧿

Our brain has visive auto-completion. (ndr)

**Gestalt psychology**

- `perception:` recognition of objects from basic visual elements
- the whole `“gestalt”` is greater than the sum of its parts
- when elements are placed in groups that define an object we tend to see the group and not the elements


**Gestalt principles**: describe how people organise visual elements into a meaningful whole

- `Figure/Ground`
- `Proximity`
- `Similarity`
- **anomaly:** attention can be directed to the dissimilar object
- `Symmetry`
- `Continuity`
- `Closure`

Gestalt Principles can be **used to**:

- impose a `logical structure` on UI’s
- `help people` create logical groupings and increase visibility and comprehensibility of UI

## 9. User Memory 💭

### Memory

Cognition involves many processes including attention, memory, perception and learning.

**Types of memory**


- `sensory memory`
- _iconic_, _echoic_, and _haptic_ memory
- **attention** filters the stimuli before passing them to the working memory

- `short-term memory` (working memory)
- It decays rapidly (200 ms.)
- has a limited capacity: (7+-2 items)

- `long-term memory`

- information from the working memory is transferred to it **after a few seconds**
- information from working memory by rehearsal or repeated exposure to a stimulus
- little decay over a long time

- = **declarative (**facts**)** + **procedural (**skills**)**
- declarative = **semantic** + **episodic**

**Recognition** is of lesser complexity than **recall**:

- we recognize things much better than being able to recall things.

- see the rise of the GUI over command-based interfaces

### Design problems

The way an interface is designed can greatly affect how well users can perceive, attend, learn and remember how to do their tasks.

Users have to remember how to `operate a system`, their `authentication` info, and the locations of their `personal information`.

- **PIM (**personal information management**):** is a growing problem for most users, major problem is what the files were called and were to find them again
- ❌`naming alone` is not good enough because **we cannot apply recognition** effectively
- :heavy_check_mark:`search engines` **optimizes both** recognition and recall

**Moral:** `don’t overload` users’ memories with complicated procedures, and `promote recognition` rather than recall.

**Cognitive frameworks:** conceptual framework that help to explain and predict user behaviour

- **[mental model](#Mentalmodels)**
- theory of action
- information processing
- distributed cognition

### Mental models

Understanding how and why people interact with products in order to think about how to design better products.

People make **inferences using mental models** of how to carry out tasks.

- developed through learning and experience
- `knowledge` is often described as a mental model
- “many people have **erroneous** mental models” (Kempton, 1996)
- `deep` vs `shallow` models

Understanding how people develop mental models can help **designing systems which are compatible with the user mental model**.

## 10. Guest Talk - Davige Gianni 👤

… bla bla bla…

**Moral:** do your research 🔎, have fun & prototype 🙂, co-design 👥, and consider B2B too.

## 11. Design Tools :wrench:

We are entering the design phase…

- [Personas](#Personas)
- [Brainstorming](#Brainstorming)
- [Concept design](#Conceptdesign)
- [Scenarios](#Scenarios)

### Personas

Are **typical users** of the activity and context under analysis.

- are **fictional characters** created by designers starting from the analysis of user studies
(in your case contextual interviews)
- used to **synthetize** the characteristics and needs of users

**Example**


**Are defined by their:**

- attitudes
- motivations
- goals
- level of familiarity with technology
- personal context
- key needs
- etc…

### Brainstorming

Many ways to conduct them, here a few suggestions using an [affinity diagram](#AffinityDiagrams):

- clear idea about the **goal** of the device to be designed
- **first work individually** and write your ideas on post-it
- no ideas are silly or inappropriate, **be open and inclusive**
- then compare each other proposal and **cluster them for affinity**
- finally, **select** the ideas you would like to become features of your concept design

### Concept design


### Scenarios

Are ways to describe the activity of people. (can be both `textual` or `visual`)

- **Activity Scenarios:** describe the activity `as it is` at the moment we are investigating it, so what users currently do to carry on their activities
- **Envisioning scenarios:** are `imaginary`, describe how users’ activity would change by that moment that we introduce our new technology in their lives


(two different ways to represent visually a scenario where a person can interact with an advertisement through a QR code)


## 12. Design Strategies For Behavior Change🏆

**Transtheoretical Model of Behaviour Change** (steps 🐾)

1. `precontemplation:` unaware of the problem
2. `contemplation:` aware of the problem and of the desired behaviour change
3. `preparation`
4. `action`
5. `maintenance`


**Cognitive dissonance:** when a person has conflicts between `attitudes`, `beliefs`, and `behaviours`.

- $\implies$ `psychologically uncomfortable` (should change behaviour)

**CAPTology (**`c`omputers `a`s `p`ersuasive `t`echnology**)** uses different `strategies`:

- `awareness:` to allow people to monitor their activity/behaviour, help reflection on it
- information **visualization**: dashboard, maps, last performance + evolution over time…
- `sociality`
- `peer pressure:` leverages **competitiveness**
- `collaboration:` contribution and being part of a group are **strong motivators**
- `games`
- `pervasive games` (augmented reality, doing physical activities, …)
- `serious games` (different purpose than pure entertainment)
- `gamification:` using game thinking and game mechanics to solve problems and engage users
- promotes users’ **motivation** & **long-term engagement**


(incetives example in the `gamification` perspective)

## 13. Prototyping & Evaluation 🎨

**What can be a prototype?**

- series of `screen sketches`
- storyboards and scenarios
- powerPoint `slides`
- `cardboard` mock-ups
- `videos` simulating the use of the system
- `diagrams` & `frameworks`
- pieces of `software` with limited functionalities

**Prototype fidelty**



### Low Fidelty Prototyping

Set the **basis for the overall design** and facilitate **co-operation** and communication within a multidisciplinary-team by building a **shared understanding** of the type of system being developed.

- :warning: `non-functional`
- depicts `concepts, NOT details`
- suggest `screen layouts`, general look & feel of UI
- find out usability issues as early as possible

- quick, cheap, and easy to `change`

- it can be presented to potential future users for evaluation, although `requires a facilitator`


#### Prototype evaluation (low)

How to evaluate a low-fidelty prototype?

1. `evaluation of the idea:` might be necessary as **introduction**
- `storyboard:` series of sketches showing a scenario ([envisioning scenarios](#Scenarios)) or how a user might progress through a task using the device
2. `evaluation of the system and the interaction:`
- the user is given a **list of tasks** to do with the proptotype
- **simulate** the interaction with the device (e.g. move the pieces accordingly to user action or add post-it)

**Nice example:** https://www.youtube.com/watch?v=yafaGNFu8Eg


(there are many ways you can simulate, for example use `post-it` or cut out `pieces of paper`)

### Medium Fidelty Prototyping

- :warning: `interactive`
- cleaned up but not completely refined

**Possible tools** 🧰

- envisioning scenarios:
- [Pixton](https://www.pixton.com/it/)
- Pen & paper sketches of the screenshots
- wireframing:
- [Balsamiq](https://balsamiq.com/)
- Interactive or animated graphics:
- [Adobe XD](https://www.adobe.com/it/products/xd.html)
- [Axure](https://www.axure.com/)

#### Prototype evaluation (medium and high)

**Evaluation methods**

- `Wizard of Oz:` some aspects of interface are implemented (but not all)
- operation requires processing that is actually done by a human **not visible to the user**
- `Observation:` user is given a task, **evaluator just watches** the user and take notes of the user’s behaviour
- video recording can be useful
- ❌ this kind of evaluation does not provide insights of the user’s decision process or doubts
- `Think aloud:` users are asked to **speak their thoughts** out loud while doing the task
- :heavy_check_mark: they can tell us **what** are they doing, **why**, and how they **interpret** what the system did
- :warning: risk to be unnatural
- :warning: hard to talk if they are concentrating
- `Diaries:` you let the prototype to the user for some time and ask them to keep a diary to collect data
- feasible when the system has a high level of robustness (high-fidelty?)
- :warning: requires incentives to be sure that users do the task
- `Interviews`
- [`Questionnaires`](#14.Questionnaires📑)
- `Walkthrough`
- `Heuristic evaluations`

**The DECIDE**

- **D**etermine the evaluation goals
- **E**xplore specific evaluation questions
- **C**hoose the evaluation techniques to answer the questions.
- **I**dentify the practical issues.
- **D**ecide how to deal with the ethical issues.
- **E**valuate, interpret and present the data

## 14. Questionnaires 📑

👁‍🗨 You will be allowed to use them in the evaluation, **if you are in a rush to finish your projects**.

| Questionnaire | Survey |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| written `set of predefined questions` in a predetermined order | both the `set of questions` and the process of collecting, aggregating, and analyzing the `responses` from those questions |
| provide `mostly quantitative data` that can be analysed to identify patterns and relationships within the answers | the extraction of patterns from the responses of a sample enables statements and `inferences about the whole population` |
| can be administered to `many people at once`, even remotely (e.g. through Google forms) | extraction of data about a population of people (or events) in a standardised & systematic manner |

### Types of Questions

- `open`
- `closed`
- `combination` (of open and closed questions)
- `multi-choice`
- `ranked:` order the items
- `likert scale:` judge a specific statement on a numeric scale
- `semantic differential`
- the **numeric scale** is used to represent **bi-polar attitudes** about a concept
- the extremes of the bipolar attitudes are expressed by a **pair of adjectives**

### Questionnaire Design

**Good practices:**

- write **istructions**
- **cluster** the questions in thematic areas

- care about question **order**
- generally from broad to specific
- can create `bias`
- compose the questions and **select the [scale](#TypesofQuestions)**
- do a pilot with a few people first
- pay attention to **appearance** (make it attractive, number questions, do not clump, …)
- end with **“Thank you”** and a clear **deadline**

**Presenting the findings:** `graphical representations` may be appropriate for a presentation.
(ndr: maybe read my document about visualizations)

### Questionnaire Material

**Ready to use:**

**[SUS](https://www.measuringux.com/SUS.pdf) (**`System Usability Scale`**):** overview of **satisfaction** in 10-item likert-scale

- **freely available** for use providing acknowledgement of the source

**[QUIS](https://garyperlman.com/quest/quest.cgi?form=QUIS ) (**`Questionnaire for User Interaction Satisfaction`**):** measures attitude towards different interface factors

**Tools to build questionnaires:**

- [Google forms](https://www.google.it/intl/it/forms/about/)

- [Survey monkey](https://it.surveymonkey.com/)

- [Typeform](https://www.typeform.com/)

🌞 END 🌞