MOBILE INTERACTION DESIGN Dr

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

. 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 learned the design, how quickly can they perform tasks? 3. Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? 4. Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? 5. Satisfaction: How pleasant is it to use the design? Products serve a need and solve problems

utility People want products that they can use

usability

utility We drive a user to take action through design

desirability

usability

utility AFFORDANCES AND SIGNIFIERS

. Affordance: a function should speak for itself and suggest its own use (what an object can do) AFFORDANCES AND SIGNIFIERS

. Affordance: a function should speak for itself and suggest its own use (what an object can do) . Signifiers: what hint at the affordance (what you can do with an object) AFFORDANCES AND SIGNIFIERS

. Two affordances: 1. Affordance of the device (touch, mouse) 2. Perceived affordance (you recognize it as a button)

. Four signifiers: 1. If you recognize it as a button you know you have to click on it 2. The color changes when you hover it 3. The cursor shape changes when you hover it 4. The text helps you to know what you can do with it LEARNABILITY

. Even easy to use interfaces may require learning . Learning process speeds up when the interaction recalls a familiar behaviour

expectations assumptions understanding

consistency predictability LEARNABILITY

How do we measure the learnability of a product? . Effectiveness: The number of functions learned, or the percentage of users who successfully learn and use the product. . Efficiency: The time it takes someone to learn (or re-learn) how to use a product, and their efficiency in doing so. . Satisfaction: The perceived value the person associates with their investment (time, effort, cost) in learning how to use the product. . Errors: The number of errors made, the ability to recover from those errors and the time it takes to do so.

FEEDBACK AND RESPONSE TIME

. Feedback communicates the results of any interaction. It has to be: . Visible . Understandable

. It has to answer four questions: 1. Where am I? (location) 2. What’s happening? (current status) 3. What will happen next? (future status) 4. What just happened? (outcomes and results)

FEEDBACK AND RESPONSE TIME

Response time has 3 main limits determined by human perceptual abilities: . 0.1 second: the limit for having the user feel that the system is reacting instantaneously. Limit for users feeling that they are directly manipulating objects in the UI. . 1 second: the limit for the user’s flow of thought to stay uninterrupted (user will note the delay). Limit for users feeling that they are freely navigating the command space without having to unduly wait for the computer . 10 seconds: the limit for keeping the user’s attention focused on the dialogue. Anything slower than 10 seconds needs a percent-done indicator as well as a clearly signposted way for the user to interrupt the operation. FOUR BASIC ACTIVITIES

. Establishing requirements . Designing alternatives . Prototyping . Evaluating

They are intended to inform one another and to be repeated SIMPLE LIFECYCLE MODEL GOOGLE DESIGN SPRINT RESEARCH IN THE WILD USER EXPERIENCE DESIGN

. “The creation and synchronization of the elements that affect users’ experience with a particular company, with the intent of influencing their perceptions and behavior.” (Unger and Chandler, 2012) . “A person’s perceptions and responses that result from the use or anticipated use of a product, system or service.” (ISO 9241-210, 2010) . “A consequence of a user’s internal state (predispositions, expectations, needs, motivation, mood, etc.), the characteristics of the designed system (e.g. complexity, purpose, usability, functionality, etc.) and the context (or the environment) within which the interaction occurs (e.g. organisational/social setting, meaningfulness of the activity, voluntariness of use, etc.).” (Hassenzahl & Tractinsky, 2006) USER EXPERIENCE DESIGN

FORM CONTENT

BEHAVIOUR Graphic Designers Industrial Designers

FORM CONTENT

BEHAVIOUR Information Architects Copy Writers FORM CONTENT Animators Sound Designers

BEHAVIOUR FORM CONTENT

BEHAVIOUR

Interaction Designers 20 LAWS OF UX 1. AESTHETIC USABILITY EFFECT

. Users often perceive aesthetically pleasing design as design that’s more usable. . Aesthetically pleasing design can make users more tolerant of minor usability issues. . Aesthetically pleasing design creates a positive response in people’s brains and leads them to believe the design actually works better. . Aesthetically pleasing design can mask usability problems and prevent issues from being discovered during usability testing. 2. DOHERTY THRESHOLD

. Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other. . Provide system feedback within 400ms in order to keep users’ attention and increase productivity. . Use perceived performance to increase response time and reduce the perception of waiting. 3. FITTS’ LAW

. The time to acquire a target is a function of the distance to and size of the target. . Touch targets should be large enough for users to both discern what it is and to accurately select them. . Touch targets should have ample spacing between each other. . Touch targets should be placed in areas of an interface that allows them to be easily acquired. 4. HICK’S LAW

. The time it takes to make a decision increases with the number and complexity of choices. . Simplify choices for the user by breaking down complex tasks into smaller steps. . Avoid overwhelming users by highlighting recommended options. . Use progressive onboarding to minimize cognitive load for new users. 5. JAKOB’S LAW

. Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. . Users will transfer expectations they have built around one familiar product to another that appears similar. . By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models. . Minimize discordance by empowering users to continue using a familiar version for a limited time. 6. LAW OF COMMON REGION

. Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary. . Adding a border around an element or group of elements is an easy way to create common region. . Common region can be created by defining a background behind an element or group of elements. 7. LAW OF PRÄGNANZ

. People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us. . The human eye likes to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information. . Research confirms that people are better able to visually process and remember simple figures than complex figures. 8. LAW OF PROXIMITY

. Objects that are near, or proximate to each other, tend to be grouped together. . Proximity helps to establish a relationship with nearby objects. . Proximity helps users understand and organize information faster and more efficiently. 9. LAW OF SIMILARITY

. The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated. . Ensure that links and navigation systems are visually differentiated from normal text elements, and are consistently styled. 10. UNIFORM CONNECTEDNESS

. Elements that are visually connected are perceived as more related than elements with no connection. . Group functions of a similar nature so they are visually connected via colors, lines, frames, or other shapes. 11. MILLER’S LAW

. The average person can only keep 7 (plus or minus 2) items in their working memory. . Chunking is an effective method of presenting groups of content in a manageable way. Organize content in groups of 5-9 items at a time. 12. OCCAM’S RAZOR

. Among competing hypotheses that predict equally well, the one with the fewest assumptions should be selected. . Analyze each element and remove as many as possible, without compromising the overall function. 13. PARETO PRINCIPLE

. The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes. . Focus the majority of effort on the areas that will bring the largest benefits to the most users. 14. PARKINSON’S LAW

. Any task will inflate until all of the available time is spent. . If you wait until the last minute, it only takes a minute to do . The law applies to inflation and deflation of time concerning the task we're applying that time to. . Users don't have a great deal of time to complete a task 15. PEAK-END RULE

. People judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience. . Pay close attention to the most intense points and the final moments (the “end”) of the user journey. . Identify the moments when your product is most helpful, valuable, or entertaining and design to make those moments even better. . Remember that people recall negative experiences more vividly than positive ones. 16. POSTEL’S LAW

. Be liberal in what you accept, and conservative in what you send. . Be empathetic, flexible, and tolerant to any number of actions the user could possibly take. This means accepting variable input from users, translating input to meet the requirements, defining boundaries for input, and providing clear feedback to the user. 17. SERIAL POSITION EFFECT

. Users have a propensity to best remember the first and last items in a series. . Placing the least important items in the middle of lists can be helpful because these items tend to be stored less frequently in long-term and working memory. . Positioning key actions on the far left and right within elements such as navigation can increase memorization. 18. TESLER’S LAW

. Tesler's Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced. . Should a software developer add complexity to the software code to make the interaction simpler for the user or should the user deal with a complex interface so that the software code can be simple? 19. VON RESTORFF EFFECT

. The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects are present, the one that differs from the rest is most likely to be remembered. . Make important information or key actions visually distinctive. 20. ZEIGARNIK EFFECT

. People remember uncompleted or interrupted tasks better than completed tasks. . Use progress bars for complex tasks to visually indicate when a task is incomplete, and thus increase the likelihood it will be completed. ACCESSIBILITY AND INCLUSIVENESS

. One size does not fit all . Incorrect assumptions they may have about particular user groups (e.g., not all old people want or need big fonts) . Be aware of both people’s sensitivities and their capabilities . Accessibility: the extent to which an interactive product is accessible by as many people as possible - focus is on people with disabilities . Inclusiveness: making products and services accommodate the widest possible number of people ACCEPTABILITY

. The technology acceptance model (TAM) is an information systems theory that models how users come to accept and use a technology. REFERENCES

. Benyon, D. (2019). Designing Interactive Systems - A Guide to HCI, UX and Interaction Design. 4th Edition. Pearson. . Winograd T. (1997). From computing machinery to interaction design. In P. Denning and R. Metcalfe (eds) Beyond Calculation: The next fifty years of computing. Springer-Verlag, pp. 149-162. . Sharp, H., Rogers, Y., Preece, J. (2019). Interaction Design – Beyond Human-Computer Interaction. 5th Edition. John Wiley & Sons, Inc. . Thackara, J. (2001). The design challenge of pervasive computing. In Interactions May/Jun, 47-52. . Saffer, D. (2010). Designing for Interactions: Creating smart applications and clever devices. 2nd Edition. New Riders Press. REFERENCES

. Garrett, J.J. (2011). The Elements of User Experience: User-Centered Design for the Web and Beyond. 2nd Edition. New Riders Press. . Cooper, A., Reimann, R., Cronin, D., Noessel, C. (2014). About Face: The Essentials of Interaction Design. 4th Edition. John Wiley & Sons, Inc. . Hunger, R., Chandler, C. (2012). A Project Guide to UX Design. 2nd Edition. New Riders Press. . UXPIN. Interaction Design Best Practices. Mastering Words, Visuals, Space. https://www.uxpin.com/studio/ebooks/interaction-design-best-practices-tangibles/ . http://www.batesmeron.com/norman-doors-affordance-online/ . https://www.givegoodux.com/ REFERENCES

. Card, S. K., Robertson, G. G., and Mackinlay, J. D. (1991). The information visualizer: An information workspace. Proc. ACM CHI'91, 181-188. . Miller, R. B. (1968). Response time in man-computer conversational transactions. Proc. AFIPS Fall Joint Computer Conference Vol. 33, 267-277. . https://www.nngroup.com/ . Myers, B. A. (1985). The importance of percent-done progress indicators for computer- human interfaces. Proc. ACM CHI'85, 11-17. . https://www.slideshare.net/mrettig/interaction-design-history/ . https://www.usageux.com/ . https://lawsofux.com/ REFERENCES

. https://www.slideshare.net/mrettig/interaction-design-history . Davis, F. D., Bagozzi, R. P., Warshaw, P. R. (1989) "User acceptance of computer technology: A comparison of two theoretical models", Management Science, 35(8), 982–1003. . Rogers, Y., Marshall, P. (2017) “Research in the Wild”, Morgan & Claypool Publishers.