Interaction Design Notes PDF

**Notes** 17/09/24 **"Interaction Design"**: It's a "bubble" that stays in the middle between UX Design; Industrial Design and Human-Computer Interaction. It regards: *"Interactive and connected products; responsive environments, tangible and multimedia interfaces"* The umbrella of **User-Experi...

**Notes** 17/09/24 **"Interaction Design"**: It's a "bubble" that stays in the middle between UX Design; Industrial Design and Human-Computer Interaction. It regards: *"Interactive and connected products; responsive environments, tangible and multimedia interfaces"* The umbrella of **User-Experience Design** - *Information architecture:* focuses on organizing, structuring and labeling content in an affective and sustainable way. It's the layout, the scheleton of information for the final user. - *Visual Design:* is the creation of visual language to communicate content (es. layout of interfaces; fonts and color..ecc) - *Industrial Design:* shapes the product that contains all informations. - *Human Factors:* consider the shape and limitations of human body interaction with a product/interface, both phisically and psichologically. - *Human-* *Computer interaction*: It's under interaction Design and it consider more the engineering part of it. It's mainly based on quantitative data and the technology used inside and artifact. - *Architecture*: deals with phisical spaces, with their forms and use. - *Sound Design*: it aims to understand the noise and create aural landscapes. - Material (smart products/clothes) - Immaterial (digital products and virtual interfaces) - Ambient (interactive responsive environments) THE THREE MAJOR SCHOOLS OF INTERACTION DESIGN: - **Technology centered view** In this view is mainly the application of technologies to a given artifact. In this, interaction designers make technology, particulary digital technology, useful, usable. WHAT MATTERS IS THE ARTIFACT. - **Social interaction design view** In this view the main issue is related to the interaction between the human and the artifact, facilitating their communication. - **Behavioural view** In this view we consider both artifacts; environments and system. THE DIFFERENT DEFINITIONS OF INTERACTION DESIGN: - High quality interactive **systems** that fit with **people** and their **ways of living**, (Benyon; Turner). - Subjective and qualitative aspects of everything that is both **digital** and **interactive**, (Moggridge). - Is about **people** and how they **connect** with each other through and **artifact**, (Saffer). - Support the way of **communicating** and **interacting** between people, (Sharp, Rogers). - ***Is about shaping digital things for people's use***, (Jonas Lowergen). So what is Interaction Design? ***The practice of designing interactive digital products, environments, systems and services***. In this process, technology and products are designed to center on the human behaviour, interaction and utilization of a system. We create products focusing on its visual interface and interaction, rather than the underlying functionality. It creates dialogue between **person**, **product**, **services** and **systems**. To do that, Interaction Design interplays between: - Form (Design) - Function (psychology) - Technology (digital, phisical things) **THE HISTORY OF INTERACTION DESIGN** The term was coined by Bill **Moggridge** and Bill **Verplank** in the mid 1980s. To Verplank it was an adaptation of computer science mainly for industrial design. To Moggridge it was always related to product design combining industrial and software. The birth of interaction design is between the **digital revolution** and the **information revolution**. The *Industrial Revolution* introduced new manufacturing processes, from craftmanship to mass production. From de 1950s to the late 1970s there was the *Digital Revolution* and the birth of elctronics, and after that we started to focus on how to use technology to make artifacts share information with IoT (smart-connected product/systems), and with that we had the *Information Revolution*. We went from *physical and goal-oriented* to *digital and goal-oriented* to *digital experience-oriented* and finally to ***physical experience-oriented***. - **Technological producs** (with the digital revolution, product+digital functions, the focus is on the ACTION: the user's role is to *control* the product). - **informative products** (with the information revolution, tangible ambient interfaces, the focus is on the INFORMATION: the user's role is to *know* the product). - **playful products** (the focus is on the EXPERIENCE: the user's role is to be *engaged* by the product). To provide something that's in the middle in all of that, the interaction design demands that the product*: works well, is easy to use and it looks nice, creating an enjoyable experience of use*. **DESIGNING "FOR" INTERACTION** Interaction Design has to connect people through ***systems***, and the designer perspective may have two different approaches: - **Tangible interaction** (interfaces or systems that are in some way phisically embodied in the artefact/environment). - **Intangible interaction** (the user interacts with the tangible representation of the object). Designers need to design the behaviour of the artifact to allow the user to understand the action and interact with them, designing also the form and exploring the relation between technology, people and context. The main core of this is the *creativity (the ability to generate new ideas and look at existing problems in new ways)*. Creativity and inventions are different things (creativity could be already existing, invention no). We can have creativity without innovation (the exploitation of new ideas), but there is no innovation without creativity. We can have different levels of innovation:  **WHAT, HOW AND WHY OF THE INTERACTION** - **What** user can do through an interactive system = **system functionality.** - **How** the interaction start keeping in consideration the operational, sensory-motor level = the **actual system**. - **Why** the user use this artifact = **needs of the user**, the actual motivation. 01/10/2024 What are the main tools to understand the WHY/HOW/WHAT? (*Why understanding the user; what to design the interactive features; how do we design the form*). THE DESIGN PROCESS 3 main phases: - **Research phase**: it starts with the general brief, then we make the analysis and synthesis through the research. In this phase we analyze both the why, the what and the how in term of analysis. - **Concept generation**: here we generate the idea, so we define the how and the what, opening the possibility and closing the options going to the solution. - **Concept development (embodiment)**: finalization of design, proposing the final solution. Generally here we come to the engeneering part.  1. **The research phase** We can use differents way to approach this phase, and generally we use all of them in this order: - **Focus on the user** (who and why) To analyze the user we can use **direct methods** (unstructured interviews; semi-structured interviews; questionnaires; diares; focus groups...) or i**ndirect methods** (observation; shadowing; camera studies...). These methods ones allow us to understand in first istance what the people say or think (interviews); then what they use or do (observations) and finally the knowledge and past experience of the user, his feelings (generative sessions). From this analysis we can obtain a certain knowledge, that could be explicit/observable/tacit/latent basing of how deep is the level of the technique we're using to analyze the user's behaviour. ***Direct methods*:** analyze in the surface what people say or think, through interviews, and acquire explicit knowledge from them. They are divided into **qualitative** and **quantitative methods.**  1. Unstructured interview Here we talk with people with the goal to understand the topic (culture; experience; setting). Thanks to them we can understand on what to focus on to develop more structured interviews. An example could be collecting people's life stories or histories in their own words. 2. Semi-structured interviews Here there's an order to follow, from open general questions to more specific ones. They are useful for a more deep understanding of the topic, to analyze why the user choose to act in a certain way. In this phase is necessary to ask a lot of "why" and to encourage the user to tell the story of his answers. 1. Questionnaires They're composed by closed questions with yes/no or multiple choice answers. They're aim is to obtain quantitative results and produce consistent data. (generally no more than 15 questions) 2. Daily reports or "Diares" Self-observations to analyze the behaviour of the user noting on a phisical report/diary and they're used when it's difficult to access the contest in which the user is experiencing the interaction (for example accessing their home if we have to analyze te habit of drinking). Generally we have 3 main sections: background informations/ a section for users to complete over a period of time/ additional questions and tasks that provide stimulus to gain more insights. 3. Focus groups Semi-structured group interview process moderated by a leader, used to collect data in a specific topic. They're useful to make direct comparisons. Generally there are 6-10 homogeneous participants and 1-2 moderators. ***Indirect methods**:* analyze what users do; use; know; feel; dream... through observations and generative sessions and they acquire an observable/tacit/latent knowledge. That's the preliminary understanding of the user.  1. Observation/Ethnografy (qualitative) Is used to investigate user's behaviour, motivations, problems and practical needs without the user's knowing that you're observing him. 2. Shadowing (qualitative) When we analyze the behaviour of a user that's expert in executing a specifical task that's useful for our research. The researcher asks questions for clarification and prompts the participant to give a running commentary of his/her actions, analyzing him over a long period of time. The researcher records and compiles the field notes from the shadow period and adds debriefing notes to maintain freshness of experience, after that he analizes the data. 3. Camera Studies It consists in asking a person to make a diary with taking pictures/video of situations; objects; moments and elements that are relevant for him to analyze later on. This is useful to analyze the experience from the eyes of the user, and let the user talk about his images to gain insights for each material he took, asking questions and so on. TO UNDERSTAND WHICH METHOD YOU SHOULD USE YOU HAVE TO COMPREHEND HOW MUCH WIDE IS THE CONTEXT OF THE ANALYSIS In all of that we have to also remember that the "why" of the users matter: we can choose professionists or a specific category of users as well. *"Who are we designing for?"* - **Focus on the system** (what) - **Focus on the product/service** (how) 08/10/24 15/10/24 Example: THESIS PROJECT -- sex toy for a gender identification journey - Desk research (what are we talking about and who is the user) - Mind map (what are the essential topics for the user research?) - Planning user studies (how do we want to proceed?) - Survey (quantitative data) - Sensitive Interviews (qualitative data) - Psychological interview - Data interpretation/final insights (what are the user needs according to the research?) - Brief (what are the design requirements defined on the user needs?) OUR EXERCISE Each group will choose one of the sub-topic of the main theme "DIGITAL CARE": 1. Self care 2. On-demand care How? - Read on the topic in the miro board with findings and data - Define the target - Define the user to analyze - Use the questionnaires - Set the script for the surveys 22/10/2024 **HOW** design the form of interaction? A system could have the same function but different how and why. The dialogue is between form; function and technology. ***Interaction***: the way people use a product, separate from the function of it. The HOW of interaction is connected to the concept of ***affordance***: phisical or digital features/interfaces of an object which presents a prompt on what can be done with the object. *Examples of affordances*: - Button  push - Switch flip - Knob  rotate According to **Gibson**, affordance is indipendent from the user experience; culture; age\...ecc and it's binary (i can/can't do), but that's actually not true: for example, an infant has to learn how to use the stairs and he doesn't know immediately how to approach them. In the case of digital buttons for example, they are percieved only ***contextually***. KEY COMPONENTS OF DESIGNING AN INTERACTIVE SYSTEM - **Affordances** what the things **can do** - **Signifiers**  what the things **mean** (additional pieces of informations that support affordances). For example the enabled/disabled cta colors; text; icons; style of the text; general hierarchy of the components...ecc **-** BUTTON **affordance** **-** TEXT, ARROW, COLOR **signifiers** A user's perception and understanding of affordances might vary according to ability; goals; beliefs; context; past experiences. The interaction flow is as better as is good the semplicity of interaction based on the actualization of the knowledge and experience of people to simplify the interaction. ***Norman's affordances*** - ***Percieved properties*** that may not actually exist - ***Suggestions*** or clues as ***how to use*** these properties - Dependent on ***experience, knowledge, culture*** of the actor - Can make the action ***difficult*** or ***easy*** The action (interaction) must be possible (affordances) and clearly communicated (signifiers) AFFORDANCES IN PHYSICAL WORD - **Perceptible affordances** (the action is possible and clearly communicated) ex. push the button. - **Hidden affordances** (the action is possible but affordances are not clear) ex. ATM machine. - **False affordances** (the action suggested by affordance is wrong) ex. completely black induction stove. AFFORDANCES IN DIGITAL WORD - **Explicit** (obvious) **ad implicit** (hidden) **affordances** - **Pattern affordances** (based on the power of habits) ex. Click the logo in a website to go to the homepage. - **Negative affordances** (some actions or operations are inactive at the moment) ex. Disabled/enabled button. - **False affordances** (there are some characteristics that suggest the user that will happen some actions that in fact does not happen) ex. Subtitled text that suggest to be clickable but is not a link. IN THE HOW OF INTERACTION WE HAVE TO CONTROL THE FEEDBACK SYSTEM: ***Feedforward***: How to control the product? communicate the purpose We can use: - **Semanthic approach** (cognitive)  lables and icons - **Direct approach** (bodly interaction) affordances in physical objects Semanthic and direct approach could be used together: for example in digital word with interfaces on the products. To Design an artifact in a clear way we also have to design: ***Feedback***: the effect of the action. TO LET THE USER UNDERSTAND HOW TO CONTROL A SYSTEM, DESIGNER HAVE TO SHAPE: - Affordance (what the things can do) FEEDFORWARD - Signifiers (the current state of the significant) EXAMPLE **Feedforward**: Icons, buttons, color, text, auditory signal. **Feedback:** Auditory; visual; tactile. **Action:** Push the button. EXERCISE OF EXAMPLE: *CubeSensors* (cube that detects humidity; temperature; pollution; light; noise) **Feedforward:** shape; dimension; led. **Feedback**: led light. **Action:** place and shake. 29/10/2024 - "*everyday objects with superpowers*" project by Ilaria Mariani e Umberto Tolino Strategic design research journal, article of the project. - "*Slab!EC. H2020 DecoChrom"* project 05/11/2024 *How we define the presence of data in contemporary societies?* **Datafication**: contemporary process that exploits digital technologies directed at recording aspects of human lives and bodies and rendering them into digitalized information. Other concepts: - Data-driven society, Pentland - Data selves, Lupton - Dataveillance, Raley - Quantified self - "data is the new oil", Humby Data is **not objective matter** and is **never "raw"** bat always "cooked" (elaborated by technologies; people...etc). How do we make sense of such data? TANGIBLE INTERACTION DESIGN Core principles: - Embeddedness in real spaces and context - Tangibility and materiality - Physical embodiment of data - Bodily interactions **Data physicalization:** physical artefact whose geometry or material proprieties encode data (is not a physical model or a merely visualization of data with physical objects) *What can we use it for?* - **Learning and cognition** of certain data and abstract concepts - **Decision making** to mediate complexity - **Sensemaking** enhancing our emotional connection to data **Data materialization**: the process of transforming intangible object (data) in artifact that can be interacted in a physical way. **Data manifestation**: the communication of quantitative information through objects, installations and sensory experiences. **Data object:** redesigning everyday objects embodying data or as an interface to data services. Data physicalization Data materialization Data manifestation Data object Physical artifact process communication redesign **DESIGN PRINCIPLES FOR DATA PHYSICALIZATION** - Treat data as **new type of material** to design with. - Design for **access and reinterpretation od** the data embedded in the object. - Design for **emotional engagement** with the data embedded in the object. - Design to empower people to use the data to **rethink and challenge the status quo**. **Feedback and feedforward** The mapping places the case studies in a feedback and feedforward matrix to gather insights on the interaction with users. Three types of DPs: - STATIC DPs (do not update or change in response to new data inputs). - CONSTRUCTIVE DPs (emphasize the construction, manipulation and assembly of physical artefacts that represent data). - INTERACTIVE DPs (interactive dps update based on a new dataset's input and user's interaction). **EMBODIMENT** In the context of interaction design, Paul Dourish's concept of embodiment refers to the idea that our **interactions with technology are deeply connected to our physical,** **social and contextual experiences.** 10/12/24