MOBILE INTERACTION DESIGN Dr. Barbara Rita Barricelli PhD Course, 21-22-23 January 2020 TIMEPLAN, MATERIAL, CONTACT Day Time Unit Course material: 10:00 – 13:00 1 https://barbara-barricelli.unibs.it/ Tuesday 21 13:30 – 15:30 2 10:00 – 13:00 3 For questions / suggestions: Wednesday 22 13:30 – 15:30 4 [email protected] 10:00 – 13:00 5 Thursday 23 13:30 – 15:30 6 OVERVIEW Unit 1 Unit 2 Unit 3 Interaction design Mobile Interaction Design User research Unit 4 Unit 5 Unit 6 iOS Human Interface Guidelines, Prototyping Hands-on activity Google Material Design OVERVIEW Unit 1 Unit 2 Unit 3 Interaction design Mobile Interaction Design User research Unit 4 Unit 5 Unit 6 iOS Human Interface Guidelines, Prototyping Hands-on activity Google Material Design UNIT 1 Interaction Design WHAT DOES DESIGN MEAN? * 1. To create, fashion, execute, or construct according to a plan 2. To have as a purpose 3. To devise for a specific function or end * Merriam-Webster Dictionary WHAT DOES DESIGN MEAN? * 1. To create, fashion, execute, or construct according to a plan 2. To have as a purpose 3. To devise for a specific function or end * Merriam-Webster Dictionary WHAT WE SEE… Tolomeo (Giancarlo Fassina and Michele De Lucchi for Artemide) WHAT WE SEE… Tolomeo (Giancarlo Louis Ghost Fassina and Michele De (Philippe Stark Lucchi for Artemide) for Kartell) WHAT WE SEE… Tolomeo (Giancarlo Louis Ghost Milan Fashion Week Fassina and Michele De (Philippe Stark Spring 2018 Lucchi for Artemide) for Kartell) Runway (Dolce & Gabbana) WHAT WE SEE… iMac G3 (Apple Inc) WHAT WE SEE… iMac G3 (Apple Inc) Artisan (Herbert Johnson for Kitchen Aid) WHAT WE SEE… iMac G3 (Apple Inc) Artisan (Herbert Johnson Walkman (Akio Morita for Kitchen Aid) and Mazaru Ibuka for Sony) … BUT BEHIND THE CURTAIN… … BUT BEHIND THE CURTAIN… … BUT BEHIND THE CURTAIN… … BUT BEHIND THE CURTAIN… … BUT BEHIND THE CURTAIN… … BUT BEHIND THE CURTAIN… WHAT DOES INTERACTION MEAN? * 1. Reciprocal action or influence * Merriam-Webster Dictionary WHAT DOES INTERACTION MEAN? * 1. Reciprocal action or influence * Merriam-Webster Dictionary INTERACTION DESIGN - MANY DEFINITIONS . “The design of spaces for human communication and interaction.” (Winograd, 1997) . “The why as well as the how of our daily interactions using computers.” (Thackara, 2001) . “The art of facilitating interactions between humans through products and services.” (Saffer, 2010) . “Interaction design is concerned with describing possible user behavior and defining how the system will accommodate and respond to that behavior.” (Garrett, 2011) . “The practice of designing interactive digital products, environments, systems, and services.” (Cooper, 2014) . “Designing interactive products to support the way people communicate and interact in their everyday and working lives.” (Sharp, Rogers and Preece, 2019) INTERACTION DESIGN - MANY DEFINITIONS . “The design of spaces for human communication and interaction.” (Winograd, 1997) . “The why as well as the how of our daily interactions using computers.” (Thackara, 2001) . “The art of facilitating interactions between humans through products and services.” (Saffer, 2010) . “Interaction design is concerned with describing possible user behavior and defining how the system will accommodate and respond to that behavior.” (Garrett, 2011) . “The practice of designing interactive digital products, environments, systems, and services.” (Cooper, 2014) . “Designing interactive products to support the way people communicate and interact in their everyday and working lives.” (Sharp, Rogers and Preece, 2019) A BIT OF HISTORY . Technological innovation profoundly changed the role of the user . First at work and later in everyday life technology has become fundamental in humans’ life . Today Interaction Design is recognized as a well-established discipline but under constant evolution . It is based on theories but shaped by practice . The evolution of the devices bring constantly new opportunities but also new constraints . Eniac 1946 . First general-purpose computer Operate the . 30 tons machine . 1 kilobit memory . Processing power of today’s singing birthday card Use the . Not a stored-program device software Accomplish a task Experience Connect Dynamically enable . DEC PDP-8 TI 980 . 1960’s Operate the . Switches machine Use the software Accomplish a task Experience Connect Dynamically enable . Not users but operators . Design was engineering design: make Operate the faster, bigger machines machine . People adapt to the machines . People speak the language of the machines Use the . Elaborate efforts to prepare problems for software the machines . Punch cards and tapes Accomplish a task Experience Connect Dynamically enable . Configure switches . Run batch Operate the . Output to tape machine . Batch processing . Feed it cards, wait while it runs Use the software Accomplish a task Experience Connect Dynamically enable . Remote terminals to S/360 . IBM 3270 Operate the . 1970’s machine Use the software Accomplish a task Experience Connect Dynamically enable . Doug Engelbart - 1964 . Mouse Operate the . Hypertext - Dynamic file linking machine . The mother of all demos: . https://www.dougengelbart.org/content/view/209/448/ Use the software Accomplish a task Experience Connect Dynamically enable . From operators to users . User of spreadsheets, wordprocessors, videogames Operate the machine . Visicalc . 1979 Use the . Home and small business calculation software Accomplish a task Experience Connect Dynamically enable . Wordstar . 1979 Operate the . A tool for writing machine Use the software Accomplish a task Experience Connect Dynamically enable . Xerox Star . 1981 Operate the machine Use the software Accomplish a task Experience Connect Dynamically enable . Microsoft Windows 1.01 . 1985 Operate the machine Use the software Accomplish a task Experience Connect Dynamically enable . Emphasis went from «a tool with good controls» to Operate the «people doing a task» machine . Draw a picture Use the . Create a brochure software . Create a budget . Compose music Perform a task . Lotus 1-2-3 wins over Visicalc Experience Connect Dynamically enable . Macintosh . 1984 Operate the . First successful computer to feature a mouse and graphical interface machine Use the software Perform a task Experience Connect Dynamically enable . Commodore Amiga 1000 . 1985 Operate the . First multimedia home computer machine Use the software Perform a task Experience Connect Dynamically enable . Live . Learn Operate the . Work machine . Play Use the . Interaction designed to support a person doing an activity in context software Perform a task Experience Connect Dynamically enable . Connect objects . Connect people Operate the . Share data machine . Share experiences Use the software Perform a task Experience Connect Dynamically enable Operate the machine Use the software Perform a task Experience Connect ? THE DOUBLE DIAMOND OF DESIGN INTERACTION DESIGN IS A PROCESS . Aimed at discovering requirements, designing systems to fulfil those requirements, producing prototypes and evaluating them . That sees the generation of alternatives among which to choose . That involves trade-offs to balance conflicting requirements . Focused on users and their goals INTERDISCIPLINARY FIELDS UNDERSTANDING THE PROBLEM SPACE . How is currently the interaction . Why is a change needed . How will this change improve the situation USERS INVOLVEMENT . Exploitation of users expertise . Realistic expectations (no surprises, no disappointments) . Timely training . Make the users active stakeholders . More likely to forgive or accept problems . Can make a big difference to acceptance and success of product DEGREES OF USER INVOLVEMENT . Design FOR the user . Design WITH the user DESIGNING FOR THE USER DESIGNING WITH THE USER . Cooperative (or Collaborative) Design . Scandinavia (1960/1970) . All stakeholders have to be involved in decision making . Trade Unions . People are peers . Participatory Design . United States of America . Participation and not collaboration (power distance) . Some roles are more influent than others DESIGNING WITH THE USERS: BUT HOW? . Representatives of the end users become project team members (as stakeholders) . Each team member can contribute, suggest, criticize (peers) FIVE PILLARS OF INTERACTION DESIGN 1. Goal-driven design 2. Usability 3. Affordances and signifiers 4. Learnability 5. Feedback and response time GOAL-DRIVEN DESIGN . Good interaction design is driven by a human connection . Tactics for designing for your target user: . Personas: Personas are fictional characters created from the behaviors and psychologies of your target users. Personas come in handy as a reference when making crucial design decisions, for example, “What kind of checkout process would Sally the Seasonal Shopper prefer?” . User Scenarios: Related to personas, user scenarios explain how the personas act when using the site. For example, “It’s Black Friday, and Sally the Seasonal Shopper has a long list of presents to buy online before work.” User stories urge you to think critically about your personas’ behaviors so you design the UI to suit them. USABILITY . “Usability is a quality attribute that assesses how easy user interfaces are to use.” (Jakob Nielsen) . The word "usability" also refers to methods for improving ease-of-use during the design process. Usability is defined by 5 quality components: 1. Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? 2. Efficiency: Once users have