F27ID Introduction to Interactive Design PDF

F27ID INTRODUCTION TO INTERACTIVE DESIGN Introduction to Interaction Design Overview What is interaction design? Components of Interaction Design. Why do we care about users? Don Norman’s Design Principles What is Interaction Design? Interactive Design, is: Designing in...

F27ID INTRODUCTION TO INTERACTIVE DESIGN Introduction to Interaction Design Overview What is interaction design? Components of Interaction Design. Why do we care about users? Don Norman’s Design Principles What is Interaction Design? Interactive Design, is: Designing interactive projects to support the way people communicate and interact in their everyday and working lives (Rogers, Sharp, Preece). Designing spaces for human communication and interaction (Winograd). The “way” as well as the “how” of our daily interactions using computers (Thackara) The art of facilitating interactions between humans through products and services (Saffer) What is Interaction Design? Different terms have been used to emphasise different aspects of what is being designed. User interface design Software design User-centred design Product design Web design Experience design Interactive system design Interaction design is increasingly being accepted as an umbrella term Focus concerned with practice. What is Interaction Design? How is ID different from other approaches to the design of a computer-based system? Analogy to another profession: Architects and civil engineers. What is Interaction Design? Architects concerned with people and their interactions with each other and the houses they build Right mix of family and private spaces Space for cooking and earing in close proximity Will people use the spaces in their intended way? What is Interaction Design? Engineers on the other hand are more interested in issues that have to do with realising the project (building the house). Include practical concerns like: cost, durability, structural aspects, environmental aspects, fire regulations, construction methods, etc. What is Interaction Design? Just like there is a distinction in designing and building a house, there is a distinction between designing and building an interactive system. This course will introduce that process, focusing on the designing aspects. However, none of these happen in vacuum. Who are you? Designer User(s) Programmer The components of Interaction Design Interaction Design is.. User centred Inter/multidisciplinary Iterative User research understand the user and his/her requirements Conceptualise a design Implement (prototype) Evaluate Repeat Why is the user important? Remember this slide? Who are you? Designer User(s) Programmer Why is the user important? Good design is user centric https://youtu.be/O99m7lebirE What is Interaction Design “common sense” Screen size evolution in last ~10 years Human hand evolution in last ~10 years Good design is user centric End goal = get money Good design is user centric End goal = get money Insert card Type pin Get card back Get Money How do I understand users (humans)? Literature reviews Paper-based storyboarding and prototyping Tool-based prototyping Evaluations Methods Design Principles Many defined principles for good design Schneiterman, Neilsen, Norman Many updates and iterations Specific to applications (interfaces, websites, mobile apps etc) Here we will concentrate on Don Norman’s six principles of designing interactions: Visibility, Feedback, Affordance, Mapping, Constraints, Consistency. Visibility Just by looking, users should know what their options are and how to access them. E.g. log-in screen only needs information about logging in or signing up, so cluttering it with other information would go against the visibility principle. Feedback The user must receive feedback after every action they perform to let them know whether or not their action was successful. E.g. changing the icon on the tab to a spinner to indicate that a webpage is loading. Affordance Affordance is the link between how things look and how they’re used. E.g. a coffee mug has high affordance because you instantly know how to hold it just by looking at it. A pair of scissors. In digital applications, the design should be intuitive enough that the users know how to access their desired information just by looking at the interface. * More on doors at a later lecture Mapping In mapping the controls closely resemble their effect. E.g. think of the vertical scroll bar; it tells you where you currently are, and the page moves down at the same pace and sensitivity as the vertical bar. A non-digital example is of a modern stovetop whose control knobs are arranged in the same order as the burners. This way, you will know exactly which knob operates which burner. Natural scrolling Constraints Constraints restrict a particular form of user interaction with an interface. Prevents the user from becoming overwhelmed with the range of possibilities available through an interface. An example of a constraint is an online form that does not allow users to enter letters into a phone number field. HDMI port vs USB-A port Scissors? Consistency People learn new things and manage better when they recognize patterns. Consistency is key for these patterns to be recognized and learned by users. If similar-looking things do not produce a similar output, the user is bound to become frustrated. Cultural aspects in design Reading and HW Chapter 1 - Helen Sharp, Jennifer Preece, Yvonne Rogers, Interaction Design. Wiley, 2019. https://discovery.hw.ac.uk/ permalink/f/1el5916/44hwa _alma2169950000003206 Reading and HW Go around the campus and note two instances of either good or bad interaction design (2 good, 2 bad, or 1 good and 1 bad).