How can we rectify this situation so that the norm is that all new products are designed to provide good user experiences?
Textbook
Jenny Preece, Helen Sharp, Yvonne Rogers. “Interaction Design: Beyond Human-Computer Interaction” , 5th edition (2019), John Wiley and Sons, ISBN-: 978-1-119-54725-9
Requirements: refer to attachment
College of Computing and Informatics Human Computer Interaction1
Human Computer InteractionModule 1What is Interaction Design?2
Contents1.Good and Poor Design2.What Is Interaction Design?3.The User Experience4.Accessibility and Inclusiveness5.Usability and User Experience Goals3
Weekly Learning Outcomes1.Define interaction design and how it relates to HCI and explain the difference between good and poor design2.Explain the relationship between the user experience and usability3.Introduce what is meant by accessibility an inclusiveness in relation to HCI4
Required Reading1. Interaction Design: Beyond Human-Computer Interaction, 5th Edition: chapter 1 Page 1 to 34Recommended Reading1. COOPER, A., REIMANN, R., CRONIN, D. AND NOESSEL, C. (2014) About Face: The Essentials of Interaction Design (4th ed.). John Wiley & Sons Inc.https://www.wiley.com/en- ps/About+Face:+The+Essentials+of+Interaction+Design,+4th+Edition-p- 9781118766576This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th Edition6
1. Good and Poor Design6
Good and Poor Design•Interactive devices are pervasive in our daily life•Smartphone, coffee machine, smoothie maker, e-reader, smart TV. etc.•Some of the products are easy to use while some are not.•Why?•Keeping users in mind while designing the product makes it easy to use.•Many interfaces of new products do not adhere to the interaction design principles validated in the 1990s.•Important Question: How can we rectify this situation so that the norm is that all new products are designed to provide good user experiences?7
Bad Design•Two switches with light on eachswitch•The top switch turns the coffee maker on and off. When it is on, its light goes on.•The bottom switch selects the quantity of coffee desired,•the smaller quantity of 3 or fewer cups or the larger quantity of 4 or more cups.•The problem is with the light on this bottom switch.•When would you expect the switch light to go on, for the smaller quantity or for the larger quantity?•Why is this confusing?•more coffee to be associated with more light (light on).www.baddesigns.com8
Bad Design•If you set the photocopier to make 15 copies, sorted and stapled. Then you push the big button with the “C” to start making your copies.•What do you think will happen?•The photocopier makes the copies correctly.•The photocopier settings are cleared and no copies are made.•If you selected (b) you are right! The “C” stands for clear, not copy.www.baddesigns.com9
Good DesignWhy interface of this remote is betterdesigned?•Shape to fit in hand•Logical layout and color-coded,distinctive buttons•Easy-to-locate buttons10
What to Design?•Need to consider•the expected users•what might help people with the way they currently do things?•what might provide quality user experiences?•what people want and getting them involved in the design?•user-centered techniques during the design process11
2. What is Interaction Design?12
Interaction Design – I“Designing interactive products to support the way people communicate and interact in their everyday and working lives.”Sharp, Rogers, and Preece (2019)“The design of spaces for human communication and interaction.”Winograd (1997)Goal of Interaction Design is to develop usable productsUsability means easy to learn, effective to use, and provides an enjoyable experience13
Interaction Design – II•Terms similar to interaction design:•User interface design, software design, user-centered design, product design, web design, experience design (UX)•Interaction design is the umbrella term covering fundamental of different disciplines14
Interdisciplinary Field15The Figure shows that many people are involved in performing interaction design, ranging from social scientists to movie-makers. This is not surprising given that technology has become such a pervasive part of our lives. But it can all seem rather bewildering to the onlooker. How does the mix of players work together?
Interaction Design Academic Perspective•Psychology•Social Sciences•Computing Sciences•Engineering•Ergonomics•Informatics16
Interaction Design Design Practices•Graphic design•Product design•Artist-design•Industrial design•Film industry17
Who is Involved?•People from different backgrounds with different perspectives;Pros•More ideas and designs generatedCons•Difficult to communicate and progress forward the designs being create18
3. The User Experience19
The User Experience•Product used by the people in the real world•How people feel about the product, pleasure, satisfaction•“Every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2010)•“All aspects of the end-user’s interaction with the company, its services, and its products. (Nielsen and Norman, 2014)•Interaction design focuses on design for a user experience20
The iPod Phenomenon•distinct family of rainbow colors•Simple, elegant, distinct brand, pleasurable, catchy names, cool…•Quality of theoverall user experience paled in comparison to that provided by the iPod21
Essential Aspects of Interaction Design•Users involvement throughout the development of the project•Identification and specification of usability and user experience goals•Agreed upon with users•Iterative process22
Understanding Users•Knowing users•Age, education, where they live, work•User understanding can help designers•Understand user preferences•How to design interactive products for good user experience•One size does not fit all – children have different expectations than adults•Cultural differences is also an important concern for interaction design23
4. Accessibility and Inclusiveness24
AccessibilityAccessibility: the extent to which an interactive product is accessible by as manypeople as possible•Focus is on people with disabilities; for instance, those using android OS or apple voiceover•Companies like Google and Apple provide tools for their developers to promote this. The focus is on people with disabilities. For example, Android OS provides a•Accessibility can be achieved in two ways:•first, through the inclusive design of technology,•and second, through the design of assistive technology.25
InclusivenessInclusiveness: making products and services that accommodate the widest possiblenumber of people•For example, smartphones designed for all and made available to everyone regardless of their disability, education, age, or income•People with permanent disabilities often use assistive technology in their everyday life, which they consider to be life-essential and an extension of their self.•Examples include•wheelchairs (people now refer to “wearing their wheels,” rather than “using awheelchair”)•and augmented and alternative communication aids.•Much current HCI research into disability explores how new technologies, such as IoT, wearables, and virtual reality, can be used to improve upon existing assistive technologies.26
5. Usability and User Experience Goals27
Usability goals•Effectiveness – Effective to use•Efficiency – Efficient to use•Safety – Safe to use•Utility – Have good utility•Learnability – Easy to learn•Memorability – Easy to remember how to use28
Usability goals and Questions•Effectiveness•Is the product capable of allowing people to learn, carry out their work efficiently, access theinformation that they need, or buy the goods that they want?•Efficiency•Once users have learned how to use a product to carry out their tasks, can they sustain a high level of productivity?•Safety•What is the range of errors that are possible using the product, and what measures are thereto permit users to recover easily from them?29
User Experience GoalsDesirable aspects30SatisfyingHelpfulFunEnjoyableMotivatingProvocativeEngagingChallengingSurprisingPleasurableEnhancing sociabilityRewardingExcitingSupporting creativityEmotionally fulfillingEntertainingCognitively stimulatingExperiencing flowUndesirable aspectsBoring FrustratingMaking one feel guiltyAnnoying ChildishUnpleasant PatronizingMaking one feel stupid CutesyGimmicky
Design principles•Abstractions for thinking about different aspects of design•The do’s and don’ts of interaction design•What to provide and what not to provide at the interface•Derived from a mix of theory-based knowledge, experience, and common-sense31
Feedback – Examples of poor interface•Sending information back to the user about whathas been done•Includes sound, highlighting, animation, and combinations of these“ccclichhk”•For example, when screen button is clicked, it provides sound or red highlight feedback:32
Consistency•Similar operations must have similar elements for similar tasks.•for example, always use Ctrl key plus first initial of the command for an operation: Ctrl+c, Ctrl+s, Ctrl+o•Consistent interfaces are easier to learn and use•Internal consistency•designing operations to act the same within an application•External consistency•designing same operations and interfaces across applications and device33
summaryDesigning interactive products to support howcommunication and interactionHow to create quality user experiences for services, devices, and interactive productsInteraction design is a multidisciplinary fieldConsideration of the context of use, types of activity, UX goals, accessibility, cultural differences, and user groups.Design principles, such as feedback and simplicity, are useful heuristics for informing, analyzing, and evaluating aspects of an interactive product.
Human Computer InteractionModule 2THE PROCESS OF INTERACTION DESIGN35
Contents1.Introduction2.What is involved in interact design?3.Activities of interaction design4.Practical issues36
Weekly Learning Outcomes1.Reflect on what interaction design involves and explain the main principles of a user-centered approach.2.Introduce the four basic activities of interaction design and how they are related in a simple lifecycle model.37
Required Reading1. Interaction Design: Beyond Human-Computer Interaction, 5th Edition: chapter 1 Page 37 to 55Recommended ReadingKELLEY, T., with LITTMAN, J. (2016) The Art of Innovation, Profile Books. https://profilebooks.com/work/the-art-of-innovation/This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th Edition6
1. Introduction39
Introduction•This chapter focuses on•what interaction design involves.•discussing the advantages of involving users in development.•what is a user-centered approach.•introducing the four basic activities of interaction design•asking some important questions about the interaction design process•Incorporating interaction design activities can be integrated into other developmentlifecycles.40
Activity•Let’s design a cloud-based service• to enable people to share their photos, movies, music, chats, documents, and so on, in an efficient, safe, and enjoyable way.•What would you do?•How would you start?•Would you begin by sketching how the interface might look, work out how the system architecture should be structured, or just start coding?•Would you start by asking users about their current experiences with sharing files and examine the existing tools, for example, Dropbox and Google Drive?41
The double diamond of design•The Design Council of the United Kingdom captures these in the doublediamond of design,•This approach has four phases which are iterated:•Discover: Designers try to gather insights about the problem.•Define: Designers develop a clear brief that frames the design challenge.•Develop: Solutions or concepts are created, prototyped, tested, and iterated.•Deliver: The resulting project is finalized, produced, and launched.42
The double diamond of designSource: Adapted from The Design Process: What is the Double Diamond?43
Activity 2.144
Activity 2.145
Human Computer InteractionModule 2THE PROCESS OF INTERACTION DESIGN46
Contents1.Introduction2.What is involved in interact design?3.Activities of interaction design4.Practical issues47
Weekly Learning Outcomes1.Reflect on what interaction design involves and explain the main principles of a user-centered approach.2.Introduce the four basic activities of interaction design and how they are related in a simple lifecycle model.48
Required Reading1. Interaction Design: Beyond Human-Computer Interaction, 5th Edition: chapter 1 Page 37 to 55Recommended ReadingKELLEY, T., with LITTMAN, J. (2016) The Art of Innovation, Profile Books. https://profilebooks.com/work/the-art-of-innovation/This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th Edition6
2. What is involved in interact design?50
What is involved in Interaction Design?•Interaction Design is a process focusing on:▪discovering requirements, designing to fulfil requirements, producing prototypes and evaluating them▪considering users and their goals▪involving trade-offs to balance conflicting requirements•Exploring alternatives and the best out of them•Four approaches:•user-centered design,•activity-centered design,•systems design,•genius design51
Importance of users involvementInvestigate about the•current user experience?•the change needed?•Improvement the change will bring to the situation?Explore and articulate the problem space•Team effort•different perspectives•Avoid incorrect assumptions and unsupported claimsresult of decades of research intohuman factors of information displays52
Understanding the problem space•Users’ Expectation•Wishes and needs•Realistic expectations•Avoid surprises and disappointments•Timely training and communication•Ownership is the key•Active stakeholders vs passive listeners•Problems identification and acceptance•Essential or for product acceptance and success53
Degrees of user involvement•Users can be involved at different stages•Full time: constant input, but lose touch with users•Part time: patchy input, and very stressful•Short term: inconsistent across project life•Long term: consistent, but lose touch with users•Face-to-face meetings in group or individual activities•Market-driven products•Virtual contributions from thousands of users•Online Feedback Exchange (OFE) systems•Crowdsourcing design ideas•Citizen science•Users may also be involved after product release54
User-centered approachUser-centered approach is based on :•Early focus on users and tasks•directly studying cognitive, behavioral, anthropomorphic, and attitudinal characteristics•Empirical measurement•users’ reactions and performance to scenarios, simulations, and prototypes areobserved, recorded, and analyzed•Iterative design•finding problems with user testing, fix them and carry out more tests55
3. Activities of interaction design56
Four basic activities of Interaction Design1.Discovering requirements2.Designing alternatives3.Prototyping alternative designs4.Evaluating product and its user experience throughout57
Discovering requirements•discovering something new about the world and defining what will be developed.•In the case of interaction design,•understanding the target users•the support an interactive product could usefully provide•this understanding is gleaned through data gathering andanalysis58
Designing alternatives•This is the core activity•proposing ideas for meeting the requirements•For interaction design this activity can be viewed as two subactivities:•Conceptual design involves producing the conceptual model for the product•conceptual model describes an abstraction outlining what people can do with a product and what concepts are needed to understand howto interact with it•Concrete design considers the detail of the product including the colors,sounds, and images to use, menu design, and icon design•Alternatives are considered at every point59
Prototyping•Designing the behavior of interactive products as well as their look and feel.•The most effective way for users to evaluate such designs is to interact with them, and this can be achieved through prototyping.•This does not necessarily mean that a piece of software is required.•There are different prototyping techniques, not all of which require a working piece of software•For example,•paper-based prototypes are quick and cheap to build and are effective for identifying problems in the early stages of design,•and through role-playing users can get a real sense of what it will be like to interact with the product.60
Evaluating•Evaluation is the process of determining the usability and acceptability of theproduct or design•It is measured in terms of a variety of usability and user-experience criteria.•Evaluation does not replace activities concerned with quality assurance•QA and Testing activities are focused to make sure that the final product is fit for its intended purpose, but it complements and enhances them61
Simple Interaction design life cycle62
Google Design Sprints (Knapp et al., 2016)Source: Google Design Sprints(used courtesy of Agile Marketing)63
Google Design Sprints (Knapp et al., 2016)64For example, Google Design Sprints (Box 2.3) emphasize problem investigation, solutiondevelopment, and testing with customers all in one week. This does not result in a robustfinal product, but it does make sure that the solution idea is acceptable to customers. Thein-the-wild approach (Box 2.4) emphasizes the development of novel technologies that arenot necessarily designed for specific user needs but to augment people, places, and settings.Pages 53-54.
Research in the Wild (Rogers and Marshall, 2017)A framework for research in the wild studiesSource: Rogers and Marshall, 2017, p6. (used courtesy of Morgan and Claypool)65
4. Practical issues66
Some practical issues•Who are the users?•What are the users’ needs?•How to generate alternative designs?•How to choose among alternatives?•How to integrate interaction design activities with other lifecycle models?67
Knowing stakeholdersNot easy•382 distinct types of users for smartphone apps (Sha Zhao et al, 2016)•Many products are intended for use by large sections of the population, so user is “everybody”•More targeted products are associated with specific rolesStakeholders•Larger than the group of direct users•Identifying stakeholders helps identify groups to include in interaction design activities68
Knowing users’ needs•Wishes vs. needs•Users rarely know what they need and what is possible•Designers must:▪Explore the problem space▪Investigate who are the users▪Investigate user activities to see what can be improved▪Try out ideas with potential users•Focus on peoples’ goals, usability, and user experience goals, rather than expect stakeholders to articulate requirements69
Generating and choosing among alternatives•Considering alternatives helps identify better designs•Where to search for?▪‘Flair and creativity’: research and synthesis▪Cross-fertilization of ideas from different perspectives▪Users can generate different designs▪Product evolution based on changing use▪Seek inspiration: similar products and domain, or different products and domain•Balancing constraints and trade-offs•Evaluation with users or peers•A/B testing and quality assurance70
Integrating interaction design activities within other models•Integrating interaction design activities in lifecycle models from other disciplinesrequires careful planning•Software development lifecycle models are prominent•Integrating with agile software development is promising because:▪It incorporates tight iterations▪It champions early and regular feedback▪It handles emergent requirements▪It aims to strike a balance between flexibility and structure71
summaryDiscovering requirements,Designing alternatives, Prototyping, EvaluatingEarly focus on users and tasksEmpirical measurement using quantifiable and measurable usability criteriaIterative design
Human Computer InteractionModule 3Conceptualizing Interaction73
Contents1.Conceptualizing Interaction and models2.Interface Metaphors3.interaction types4.Paradigms, Visions, Theories, Models, and Frameworks74
Weekly Learning Outcomes1.Explain conceptualize interaction by describing what a conceptual model is and how to begin to formulate one.2.Discuss the use of interface metaphors as part of a conceptual model and outline the core interaction types for informing the development of a conceptual model.3.Introduce paradigms, visions, theories, models, and frameworks informing interaction design.75
Required Reading1. Interaction Design: Beyond Human-Computer Interaction, 5th Edition: chapter 3 Page 69 to 97Recommended ReadingJOHNSON, J. and HENDERSON, A. (2012) Conceptual Models: Core to Good Design.Morgan and Claypool Publishers. https://www.morganclaypool.com/doi/abs/10.2200/S00391ED1V01Y201111HCI0 12This Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th Edition6
1. Conceptualizing Interaction and models77
Conceptualizing designProof of concept•Envisioning the working of proposed productWhy conceptualize?•Finishing the vague ideas and assumptions about the benefits of the proposed product in terms of their feasibility•Feasibility to develop•Desirable and usefulness.78
Assumptions and claims•Specify assumptions and claims•Try to defend and support them by what they will provide•Identify▪what ideas are vague or unrealistic▪human activities and interactivities that are problematic•Iteratively work out how the design ideas might be improved79
Assumptions•Taking something for granted when it needs further investigation▪For example, people will want to watch TV while drivingTechnotopic Narratives and Networked Subjects: Preparations for Everyday Life in Cooltown80
Claims•Stating something to be true when it is still open to question▪For example, “a multimodal style of interaction for controlling GPS — one that involves speaking while driving — is safe.”81
ActivityHow will enabling robot waiters to speak to customers enhance their experience?Source: Xinhua, Guo Cheng82
Identifying the problem•For example:▪The robot could take orders and entertain customers by having a conversation with them▪The robot could make recommendations for different customers, such asrestless children or fussy eaters•But just assumptions•The real problem being addressed:“It is difficult to recruit good wait staff who provide the level of customer service to which we have become accustomed.”83
Analyzing the problem space•What are the problems with an existing product or user experience?•What are the reasons of these problems?•How the proposed design will might sole these problems?•For new user experience, how the proposed design ideas support, change, or extend current ways of doing things?84
Activity•What were the assumptions and claims made about watching 3D TV?Source: Andrey Popov, Shutterstock85
Activity- Assumptions and claims:•There was no existing problem to overcome▪What was being proposed was a new way of experiencing TV•An assumption▪People would really enjoy the enhanced clarity and color detail provided by 3D•A claim▪People would not mind paying a lot more for a new 3D-enabled TV screen because ofthe new experience86
Benefits of conceptualizingOrientation•It encourages design teams to ask specific questions to understand the conceptual modelOpen-minded•Motivates design teams to avoid from becoming narrowly focused early onCommon ground•Establish a set of commonly agreed terms87
Problem space to design space•Having a good understanding of the problem space can help inform the design space▪For example, what kind of interface, behaviour, functionality to provide•Before deciding upon these, it is important to develop a conceptual model88
What is a conceptual model?•A conceptual model is:“…a high-level description of how a system is organized and operates” (Johnson and Henderson, 2002, p26)•A conceptual model enables:“…designers to straighten out their thinking before they start laying out their widgets” (Johnson and Henderson, 2002, p28)•Provides a working strategy and framework of general concepts and their interrelations89
Components of a Conceptual model•Specifying Metaphors and analogies•Understand what a product is for and how to use it for an activity•Understand concepts that people are exposed to through the product▪For example▪Task–Domain objects, their attributes, and operations•What is the relationship between these concepts90
Formulating a conceptual model•Understand users tasks and activities?•How will the system support these?•What are the appropriate interface metaphor?•What kinds of interaction modes and styles to use?▪Always consider how the user will understand the underlying conceptual model•Many kinds of conceptual models•The best conceptual models are:▪Obvious and simple▪The operations they support are intuitive to use91
2. Interface Metaphors92
Interface metaphors•Although the interface designs are similar to a physical entity but also has own properties•desktop metaphor, and web portals•These are based on activity, object, or a combination of both•The designers must exploit user’s familiar knowledge and help them to understand ‘the unfamiliar’•Examples•Conceptualizing what users are doing – surfing the Web•A conceptual model instantiated at the interface – the desktop metaphor•Visualizing an operation – an icon of a shopping cart into which the user places items93
Example of interface metaphors•The card is a very popular UI. Why?▪It has familiar form factor▪It can easily be flickedthrough, sorted, and themed▪It structures content into meaningful chunks (similar to how paragraphs are used to chunk a set of related sentences into distinct sections)▪Its material properties give the appearance of the surface of paperGoogle Now card for restaurant recommendation in GermanySource: Johannes Shonning94
Pros and Cons of interface metaphorsPros•Makes learning new systems easier•Helps users understand the underlying conceptual model•Can be very innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users95Cons•Break conventional and cultural rules•Can constrain designers in the way that they conceptualize a problem space•Conflicts with design principles•Forces users to understand only the system in terms of the metaphor•Designers can inadvertently use bad existing designs and transfer the bad parts over•Limits designers’ imagination in coming up with new conceptual models
3. Interaction types96
Interaction types•Instructing▪Used for issuing commands and selecting options•Conversing▪Use for interacting with a conversational system•Manipulating▪Designed for interacting with objects in a virtual or physical space by manipulating them•Exploring▪Interface for moving through a virtual environment or a physical space•Responding▪The system initiates the interaction and the user chooses whether to respond in a specificmanner97
Instructing•End users instruct with the system what to do▪For example: Tell the time, print a file, or save a file•Very common conceptual model covering the diversity of devices and systems▪For instance: Word processors, VCRs, and vending machines•The main benefit is that instructing supports quick and efficient interaction▪Good for repetitive kinds of actions performed on multiple objects98
ExampleWhich is easiest and why?99
Conversing•Models of having a conversation with another human•Simple voice recognition, menu-driven systems to more complex ‘natural language’ dialogs•Examples•timetables, search engines, advice-giving systems, and help systems•virtual agents, chatbots, toys, and pet robots designed to converse with you100
How good is ConversingPros•Allows users, especially novices, to interact with a system in a way that is familiar to them▪Can make them feel comfortable, at ease, and less scaredCons•Misunderstandings can arise when the system does not know how to parse what the user says▪For example, voice assistants can misunderstand what children say101
Manipulating•Involves•dragging, selecting, opening, closing and zooming actions on virtual objects•Based on users’ knowledge of how they move and manipulate in the physical world•Can involve actions using physical controllers•(for example, Nintendo Wii) or air gestures (such as, Microsoft Kinect) to control the movements of an on-screen avatar•Tagged physical objects (for instance, balls) that are manipulated in a physical world result in physical/digital events (such as animation)102
Direct Manipulation (DM)•Coined by Ben Shneiderman (1983)•Three essential properties:▪Continuous representation of objects and actions of interest▪Physical actions and button pressing instead of issuing commands with complex syntax▪Rapid reversible actions with immediate feedback on object of interest103
Direct ManipulationPros•Helpful for novices•Experienced users can work extremely rapidly to carry out a wide range of tasks−even defining new functions•Intermittent users can retainoperational concepts over time•Error messages rarely needed•Users gain confidence andmastery and feel in control104Cons•the metaphor of direct manipulation can be considered too literally•Not all tasks can be described by objects,•Some tasks are betterachieved through delegating- spell checking•Can cover screen space•Moving a cursor using a mouse or touchpad can be slower
Exploring•Is designed for applications for moving through virtual or physical environments▪Users can explore aspects of a virtual 3D environment▪Sensors are used to embedded physical environments to trigger digital or physical events to happen•Examples of virtual environments, including cities, parks, buildings, rooms, and datasets▪Enable users to fly over them and zoom in and out of different parts105
Seeing things larger than life in VRCyber-Insects in the CAVESource: Alexei A. Sharov106
Responding•System takes the initiative to alert user•System does this by:▪Detecting the location and-or presence of someone in a vicinity and notifies them on their phone or watch,▪What it has learned from their repeated behaviors•Examples:▪Alerts the user of a nearby coffee bar where some friends are meeting▪User’s fitness tracker notifies them of a milestone reached•Automatic system response without any requests made by the user107
Which Interaction Style to Choose•Direct manipulation•For ‘doing’ types of tasks – designing, drawing, flying, driving, or sizing windows•Issuing instructions•For repetitive tasks – spell-checking and file management•Having a conversation I•For certain services – finding information or requesting music•Hybrid conceptual•For supporting multiple ways of carrying out the same actions108
Interaction type vs. Interaction styleInteraction type:•A description of what the user is doing when interacting with a system, for example, instructing, talking, browsing, or respondingInterface style:•The kind of interface used to support the interaction, for instance, command,menu-based, gesture, or voice109
4. Paradigms, Visions, Theories, Models, and Frameworks110
Paradigm•Inspiration for a conceptual model•General approach adopted by a community for carrying out research▪Shared assumptions, concepts, values, and practices▪For example, desktop, ubiquitous computing, in the wild•Pervasive computing•Wearable computing•Internet of Things (IoT)111
Visions and TheoryVisions•A driving force that frames research and development•Provide concrete scenarios of how society can use the next generation of imagined technologies•Also raise ethical questions such as, privacy and trustTheory•Explanation of a phenomenon•For example, information processing that explains how the mind, or some aspect ofit, is assumed to work•Can help identify factors relevant to the design and evaluation of interactive products•Such as cognitive, social, and affective112
Framework•Set of interrelated concepts and-or specific questions for ‘what to look for’•Provide advice on how to design user experiences▪Helping designers think about how to conceptualize learning, working, socializing, fun, and emotion•Focus on how to design particular kinds of interfaces to evoke certain responses•Come in various forms:▪Such as steps, questions, concepts, challenges, principles, tactics, and dimensions113
summaryUnderstanding the problem space, Being clear about your assumptions and claims, Specifying how the proposed design will support usersA conceptual model is a high-level description of a product in terms of user needsParadigms, visions, theories, models, and frameworks provide ways for framing interaction design research
Human Computer InteractionModule 4Cognitive Aspects115
Contents1.Introduction2.What Is Cognition?3.Cognitive Processes4.Cognitive Frameworks116
Weekly Learning Outcomes1.Explain the different aspects of cognition and it’s importance for interaction design2.Show the difference between various cognitive frameworks that have been applied to HCI and explain what mental models are.117
Required Reading1. Interaction Design: Beyond Human-Computer Interaction, 5th Edition: Chapter 4 Page 101 to 123Recommended ReadingEYSENCK, M. and BRYSBAERT, M. (2018) Fundamentals of Cognition (3rd ed.). Rout-ledge.https://scholar.google.com/scholar?q=EYSENCK,+M.+and+BRYSBAERT,+M.+( 2018)+Fundamentals+of+Cognition+(3rd+ed.).+Rout-+ledge.&hl=en&as_sdt=0&as_vis=1&oi=scholartThis Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th Edition6
1. Introduction119
4.1: Introduction: Multi-tasking?•The study of human cognition can help us understand the impact of multitasking on human behavior.•There are many different kinds of cognition, such as thinking, remembering, learning, daydreaming, decision-making, seeing, reading, talking, writing, etc.•First way of classifying cognition (Norman, 1993):▪Experiential: where people perceive, act, and react to events.▪Examples include driving a car, reading a book, having a conversation, and watching a video)▪Reflective: involves mental effort, attention, judgment, and decision-making, which can lead to new ideas and creativity.▪Examples include designing, learning, and writing a report) cognition•Second way of classifying cognition (Kahneman, 2011) :▪Fast: reflexive, and effortless▪Example: 2+2▪Slow thinking: takes more time and is considered to be more logical and demanding, and it requires greater concentration)▪Exampe: 21*19120
Understanding cognition•Understanding cognition can:•Provide knowledge about what users can and cannot be expected to do•Identify and explain the nature and causes of problems that users encounter•Provide theories, modeling tools, guidance, and methods that can lead to the design of better interactive products121
2. What is cognition?122
Cognitive processesCognition has also been described in terms of specific kinds of processes. These include the following:1.Attention2.Perception3.Memory4.Learning5.Reading, speaking and listening6.Problem-solving, planning, reasoning and decision-making123
Attention: Clear Goal•Recognizing and selecting things on which to concentrate at a point in time, from the range of possibilities available, allowing us to focus on information that is relevant to what we are doing •Text while watching TV!•It may involve audio and/or visual senses 4.2.1.1 Clear Goal – Focused and divided attention Focused: When someone has just landed at an airport after a long flight, which did not have Wi-Fi onboard, and they want to find out who won the Champions League, you will focus to find out the resultDivided: When going to a restaurant, someone may have vague idea of what they want to eat, scan the menu, imagine how dishes look to be + considering the price, restaurant specialty, waiter recommendation → then you decide124
Attention: Multitasking•Enables us to be selective in terms of the mass of competing stimuli, but limits our ability to keep track of all events4.2.2.3 Multitasking and Attention – Is it possible to perform multiple tasks without one or more of them being detrimentally affected? There has been much research on the effects of multitasking on memory and attention.The general finding is that it depends on the nature of the tasks and how much attention each demands•Design recommendation•Information at the interface should be structured to capture users’ attention•For example, use perceptual boundaries (windows), color, reverse video, sound, and flashing lights •Use techniques to achieve this – color, ordering, spacing, underlining, sequencing, and animation•Avoid cluttering visual interfaces with too much information•Consider designing different ways to support effective switching and returning to an interface125
Perception•Information acquisition from the world and transformation into experiences•Obvious implication is to design representations that are readily perceivable, for instance:▪Text should be legible▪Icons should be easy to distinguish and read126
ActivityWhat is the time?127What is the time?What is the time?What is the time?What is the time?Which is the easiest to read and why?
Design recommendation•Icons should enable users to distinguish their meaning readily•Bordering and spacing are effective visual ways of grouping information•Sounds should be audible and distinguishable•Research proper color contrast techniques when designing an interface:128
Memory•Recalling of knowledge to act appropriately▪For example, recognizing someone’s face or remembering someone’s name•We don’t remember everything•filtering and processing•Context is important as to how we remember (that is, where, when, how, and so on)•We recognize things much better than being able to recall things•We remember less about objects that we have photographed than when we observe them with the naked eye (Henkel, 2014)129
Recognition vs. recall•Command-based interfaces require users to recall from memory a name from a possibleset of 100s of names•Graphical interfaces provide visually-based options (menus, icons) that users need only browse through until they recognize one•Memory load•Online/mobile and phone banking now require users to provide multiple pieces of information to access their account•For instance, ZIP code, birthplace, a memorable date, first school attended•Reduces stress and memory load on users•Passwords could become extinct (no longer existing) with the widespread use of biometrics and computer vision algorithms130
Design recommendations•Reduce cognitive load by avoiding long and complicated procedures for carrying out tasks•Design interfaces that promote recognition rather than recall•Provide users with various ways of labelling digital information to help them easily identify it again▪For example, folders, categories, color, flagging, and time stamping131
Learning•Learning is closely connected with memory•Learning involves the accumulation of skills and knowledge that would be impossible to achieve without memory•Two main types:•Incidental learning (for example, recognizing people’s faces, what you did today)•Intentional learning (for instance, studying for an exam, learning to cook)•Intentional learning is much harder!•Many technologies have been developed to help (for example, multimedia, animations, VR)•People find it hard to learn by following instructions in a manual•People prefer to learn by doing132
Design recommendations•Design interfaces that encourage exploration•Design interfaces that constrain and guide learners•Dynamically linking concepts and representations can facilitate the learning of complex material133
Reading, speaking, and listening•The ease with which people can read, listen, or speak differs:•Many prefer listening to reading•Reading can be quicker than speaking or listening•Listening requires less cognitive effort than reading or speaking•Voice user interfaces allow users to interact with them by asking questions – GoogleVoice, Siri, and Alexa•Speech-output systems use artificially-generated speech – written text-to-speech systems for the visually impaired•Natural-language systems enable users to type in questions and give text-based responses – chatbots134
Design recommendations•Speech-based menus and instructions should be short•Highlight the intonation of artificially generated speech voices▪They are harder to understand than human voices•Provide opportunities for making text large on a screen•without affecting the formatting, for people who find it hard to read small text135
Problem-solving, planning, reasoning, and decision-making•All these processes involve reflective cognition▪For example, thinking about what to do,▪what the options are, and the consequences•Often involves conscious processes, discussion with others (or oneself), and the use of artifacts▪Such as maps, books, pen and paper•Also need to work through different scenarios and selecting the best one•Exploring the alternatives136
Design recommendations•Provide information and help pages that are easy to access for people who wish to understand more about how to carry out an activity more effectively (for example, web searching)•Use simple and memorable functions to support rapid decision-making andplanning137
3. Cognitive Frameworks138
4.3 Cognitive frameworks•These framework are used to explain and predict user behavior at the interface▪Based on theories of behavior▪Focus is on mental processes▪Also use of artifacts and representations•Most well known are:▪Mental models▪Gulfs of execution and evaluation▪Distributed cognition▪External and embodied cognition139
Mental models•Knowledge is sometimes described as a mental model:•How to use the system (what to do next)•What to do with unfamiliar systems (used for the first time) or unexpected situations (how the system works)•Users develop an understanding of a system through learning about and using it•mental models are used to make inferences140
ActivityYou arrive home on a cold winter’s night to a cold house. How do you get the house to warm up as quickly as possible?1.Set the thermostat to be at its highest2.or to the desired temperature?Many people when asked (a) choose the first option Why?•They think it will heat the room up quicker•But it is a wrong mental model for thermostats based on on-off switch modelMost of us have erroneous mental models (Kempton, 1996)Just watch people waiting for an elevator. How many times do they press the button? A lot of people will press it at least twice. When asked why, a common reason is that they think it will ensure the elevator arrives.141
UX for better mental models•UX designers can help to build better mental models by•Clear and easy to use instructions•Tutorials and context sensitive guidance•Videos and chatbots•Transparency: to make interfaces intuitive to use•Knowing what actions an interface allows•For example, swiping, clicking, or selecting142
•The gulf of execution and the gulf of evaluation describe the gaps that exist between the user and the interface•The gulf of execution▪The distance from the user to the physical system•The gulf of evaluation▪The distance from the physical system to the user•Bridging the gulfs is important to reduce cognitive efforts required to perform tasks143Gulfs of execution and evaluationby designing usable interfaces that match the psychological characteristics of the user (for example, taking into account their memory limitations)and by the user learning to create goals, plans, and action sequences that fit with how the interface works
Distributed cognition•Information is transformed through different media (computers, displays, paper, heads)•Distributed cognition model involves interactions among people, the artifacts they use, and the environment in which they are working144
External cognition•Explains how we interact with external representations (such as maps, notes, and diagrams)•cognitive benefits and the processes involved•What technologies can we develop to help people carry out complex tasks (for example, learning, problem solving, and decision-making)?•Externalizing to reduce memory load•use of diaries, reminders, calendars, notes, shopping lists, to- do lists145
Design recommendations•Provide external representations at the interface to reduce memory load▪For example, information visualizations have been designed to allow people to make sense and rapid decisions about masses of data146
summaryCognition involves different processes including attention, memory, perception, and learningInterface design is highly affected by how well users can perceive, attend, learn, and remember how to do their tasksTheoretical frameworks, such as mental models and external cognition, provide ways of understanding how and why people interact with products
Human Computer Interaction Module 5Social and Emotional Interaction148
Contents1.Being Social and remote conversations2.Social Engagement3.Emotions and the User Experience4.Persuasive Technologies and Behavioral Change5.Anthropomorphism149
Weekly Learning Outcomes1.Explain social interaction and describe the social mechanisms that people use to communicate and collaborate.2.Discuss the use of social media for keeping in touch, making contacts, and managing our social and working lives.3. Explain the relation of emotions with behavior and the user experience and describe the effect of technologies on people’s behavior.5
Required Reading1. Interaction Design: Beyond Human-Computer Interaction, 5th Edition: Chapter 5 and 6 Page 135 to 187Recommended ReadingTURKLE, S. (2016) Reclaiming Conversation: The Power of Talk in a Digital Age.https://www.penguinrandomhouse.com/books/313732/reclaiming-conversation- by-sherry-turkle/HÖÖK, K. (2018) Designing with the Body. MIT. https://mitpress.mit.edu/books/designing-bodyThis Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th Edition6
Chapter 5: Social Interaction152
1. Being Social and remote conversations153
Social interaction•We live together, work together, play together, talk to each other, and socializeAre we spending too much time in our own digital bubbles?9
Just Think•Are F2F conversations being superseded by social media interactions?•How many friends do you have on Facebook, LinkedIn, WhatsApp, and so on versus real life?•How much do they overlap?•How are the ways that we live and interact with one another changing?155
Conversational rulesConversational mechanisms enable people to coordinate their talk with one another, allowing them to know how to start and stopRule 1: The current speaker chooses the next speaker by asking an opinion, question,or requestRule 2: Another person decides to start speakingRule 3: The current speaker continues talkingFarewell rituals•Bye then, see you, yeah bye, see you later, …•Repeating themselves several times until they finally separateSacks et al. (1978)156
online conversations•Do the same conversational rules apply?•How do people repair them for:▪Email?▪Instant messaging?▪Texting?▪Skype or other videoconferencing software?157
online conversationsvideophone from the 1960sVideoWindow system (Bellcore, 1989)158
Videoconferencing and telepresence rooms•Many to choose from to connect multiple people (for instance, Zoom)•Customized telepresence rooms for groups159
Telepresence and Social presence•Telepresence refers to one party being present with another party, who is present in a physical space, such as a meeting room (Telepresence robots are also being investigated to determine whether they can help people who have developmental difficulties visit places remotely)•Social presence refers to the feeling of being there with a real person when in virtual realityTelepresence robotsFacebook’s vision of socializing in a 3D world using VR (social presence)160•Two avatars (Jack and Diane) are talking at a virtual table beside a lake and with some mountains in the background.•Users experience this by wearing virtual reality (VR) headsets.•The goal is to provide users with a magical feeling of presence•To make the experience appear more life-like,users can move their avatar’s arms through controls provided by the VR OculusTouch.
2. Social Engagement161
Social engagement•Participation in activities of a social group•Social exchange where people give or receive something from others•Voluntary, unpaid•Websites often used as hub to connect people•Retweeting is a powerful way of connecting millions of people…•The epic Twitter battle between Ellen DeGeneres and Carter Wilkerson•Millions retweeted in the space of hours162
Social Interaction•Social interaction is central to our everyday lives•Enable us to collaborate and coordinate our activities•Keeping aware of what others are doing and letting others know what you are doing are important aspects of collaborative working and socializing•Many technology systems have been built to support telepresence, social presence, and co-presence•Social media has changed the way people keep in touch and manage their social lives163
summaryEmotional aspects of interaction design are concerned with how to facilitate certain states (for example, pleasure) or avoid reactions (for instance, frustration)Badly designed interfaces make peoplefrustrated, annoyed, or angryEmotional technologies can be designed to persuade people to change their behaviorsAnthropomorphism is the attribution of humanqualities to objects
Human Computer InteractionModule 5SocialandEmotionalInteraction165
Contents1.Being Social and remote conversations2.Social Engagement3.Emotions and the User Experience4.Persuasive Technologies and Behavioral Change5.Anthropomorphism166
Weekly Learning Outcomes1.Explain social interaction and describe the social mechanisms that people use to communicate and collaborate.2.Discuss the use of social media for keeping in touch, making contacts, and managing our social and working lives.3. Explain the relation of emotions with behavior and the user experience and describe the effect of technologies on people’s behavior.5
Required Reading1. Interaction Design: Beyond Human-Computer Interaction, 5th Edition: Chapter 5 and 6 Page 135 to 187Recommended ReadingTURKLE, S. (2016) Reclaiming Conversation: The Power of Talk in a Digital Age.https://www.penguinrandomhouse.com/books/313732/reclaiming-conversation- by-sherry-turkle/HÖÖK, K. (2018) Designing with the Body. MIT. https://mitpress.mit.edu/books/designing-bodyThis Presentation is mainly dependent on the textbook: Interaction Design: Beyond Human-Computer Interaction, 5th Edition6
Chapter 6: Emotional Interaction169
3. Emotions and the User Experience170
Emotions and the user experience•Emotional interaction is concerned with how we feel and react when interacting with technologies•HCI has traditionally been about designing efficient and effective systems•Now more about how to design interactive systems that make people respond in certain ways▪For example, to be happy, to be trusting, to learn, or to be motivated171
Simple feedback obtaining method and emotive messages172
Design an interface for feelings•Can an interface be designed to improve how we feel?•Our moods and feelings are continuously changing▪How does the interface keep track and know when to do something?•Matching of moods and interfaces•happy, angry, sad, bored, or focused?•Emotional Intelligence▪understand relationship between facial expressions, body language, gestures, and tone of voice.▪How do people change their body posture when they are happy or angry173
Claims from modelOur emotional state changes how we think•When frightened or angry,•we focus narrowly and our bodies respond by tensing muscles and sweating•More likely to be less tolerant•When happy, we are less focused and our bodies relax•Overlooking minor problems and be more creative•When someone is in a good mood, it is thought to help them make decisions more quickly•When angry•Some are able to turn their nervous state to their advantage, using the increase in adrenalin to help them focus on their performance. Others are only too glad when the performance is over and they can relax again.174
Three levels of design in mind•Visceral design•At the lowest level are parts of the brain that are prewired to respond automatically to events happening in the physical world•Refers to making products look, feel, and sound good175•Behavioral design•The behavioral level is where most human activities occur. Examples include well-learned routine operations such as talking, typing, and swimming•Is about use, and it equates with traditional values of usability•Reflective design•Is about considering the meaning and personal value of a product
Expressive and appearance of interfaces•Both informative and fun•Color, icons, sounds, graphical elements, and animations are used to make the ‘look and feel’ of an interface appealing▪Conveys an emotional state•In turn, this can affect the usability of an interface▪People are prepared to put up with certain aspects of an interface (for instance, slowdownload rate) if the end result is appealing and aesthetica)Emotional icons were used in the 1980sb)computers use more impersonal176
Compare the design of thermostats(a)The Nest thermostat has a minimalist and aesthetically- pleasing design•Round face and simple dial•Large font and numbers(b)It is very different from earlier thermostat designs•Utilitarian and dull177
Microsoft’s Clippy and IKEA’s Anna•Clippy was disliked by so many?▪Was it annoying, distracting, patronizing, or other?•Anna appeared as a virtual agent▪Blinked, moved her lips and head to suggest facial expressions178
Frustrating interfacesMany causes:▪application doesn’t work properly or crashes▪system doesn’t do what it is intended to do and users’ expectations are not met▪system does not provide sufficient information▪vague, obtuse, or condemning error messages▪Appearance of the interface is garish, noisy, gimmicky, or patronizing▪a system requires users to carry out too many steps to perform a task179
Recommendations for Error messages“The application Word Wonder has unexpectedly quit due to a type 2 error.”180“The application has expectedly quit due to poor coding in the operating system”Shneiderman’s classic guidelines for error messages include:•Avoid using terms like FATAL, INVALID, or BAD•Audio warnings•Avoid UPPERCASE and long code numbers•Messages should be precise rather than vague•Provide context-sensitive help
404 error messageA friendly cute image instead of theimpersonal 404 error message181The number 404 comes from the HTML language. The first 4 indicates a client error. The server is telling the user that they have done something wrong, such as misspelling the URL or requesting a page that no longer exists
Affective Computing and Emotional AI•Affective computing•how to use computers to recognize and express emotions as humans do (Picard, 1998)•Designing ways for people to communicate their emotional state•It uses sensing technologies to measure GSR, facial expressions, gestures, and body movement•Emotional AI•aims to automate the measurement of feelings and behavior using AI toinfer them from facial expressions and voice•The goal is to predict user’s emotions and aspects of their behavior182
4. Persuasive Technologies and Behavioral Change183
Techniques used•Cameras•for measuring facial expressions•Biosensors•placed on fingers or palms to measure GSR•Affective expression in speech•for example, intonation, pitch, and loudness•Using accelerometers and motion capture systems•Body movement and gestures•Six core expressions typically measured:•Sadness, disgust, fear, anger, contempt, and joy184
Emotional data analysis•If user screws up their face when an ad pops up•If user starts smiling•Website can adapt its ad, movie storyline, or content to match user’s emotional state•If system used in a car, it might detect an angry driver and suggest they take a deep breath•Eye-tracking, finger pulse, speech, and words/phrases also analyzed when tweeting or posting to Facebook•Nintendo’s Pocket Pikachu•Designed to motivate children to be more physically active on a regular basis185
5. Anthropomorphism186
Anthropomorphism•Attributing human-like qualities to inanimate objects•Well known phenomenon in advertising▪Dancing butter, drinks, and breakfast cereals•Much exploited in human-computer interaction▪Make user experience enjoyable and motivating▪Make people feel at ease by reducing anxiety•Furnishing technologies with personalities can make them enjoyable to interact with187
Which do you prefer?Feedback when user gets something wrong:1.“Now Chris, that’s not right. You can do better than that. Try again.”2.“Incorrect. Try again.”Is there a difference as to what you prefer depending on type of message? Why?188
Robot-like or cuddly?Aibo189The Haptic Creature
summaryEmotional aspects of interaction design are concerned with how to facilitate certain states (for example, pleasure) or avoid reactions (for instance, frustration)Badly designed interfaces make peoplefrustrated, annoyed, or angryEmotional technologies can be designed to persuade people to change their behaviorsAnthropomorphism is the attribution of humanqualities to objects
Thank You42
Question One
Find an everyday handheld device, for example, a remote control, digital camera, or smartphone and examine how it has been designed, paying particular attention to how the user is meant to interact with it.
From your first impressions, write down what is good and bad about the way the device works. (0.5 Marks)
Discuss some of the core micro-interactions that are supported by it. Are they pleasurable, easy, and obvious? (0.5 Marks)
Finally, discuss possible improvements to the interface based on the answers given for A and B (1 Marks)
Question Two
Assume that, you have been hired as an interaction designer for a new smart home device called “EcoThermostat” that claims to regulate home temperature while also being environmentally friendly. Use the principles of a user-centered approach to address the following:
Identify at least three different potential user groups for the EcoThermostat. (0.5 Marks)
Develop a hypothetical scenario in which a user interacts with the EcoThermostat. Describe what aspects of the user’s reactions and performance you would want to observe and record. (0.5 Marks)
Based on your above scenario, identify two potential problems users might encounter when using the EcoThermostat. (0.5 Marks)
Describe how you would address these problems in the design. (0.5 Marks)
Note: Remember to provide justifications for your responses, drawing from the principles of a user-centered approach as discussed in the course.
Question Three
Compare the following:
“A traditional landline telephone and a modern smartphone messaging app.”
From your observations, discuss any elements in the smartphone messaging app’s conceptual model that might be confusing or counterintuitive for users familiar with the traditional landline telephone. (1 Marks)
Analyze any three pros and cons of each communication tool’s design, especially in relation to their conceptual models and interface metaphors. (1 Marks)
Note: Remember to provide justifications for your responses, drawing from the principles of a user-centered approach as discussed in the course.
Question Four
Choose a technological product (e.g., a smartphone, a smart home device, a wearable, or any software application) that you frequently use.
Discuss the importance of these cognitive aspects in the design of the chosen product’s user interface. (0.5 Marks)
Identify and briefly describe two different cognitive frameworks that could be applied to Human-Computer Interaction (HCI). (1 Marks)
Explain what a mental model is in the context of HCI. (0.5 Marks)
Note: Remember to provide justifications for your responses, drawing from the Cognitive Aspects concepts discussed in the course.
Collepals.com Plagiarism Free Papers
Are you looking for custom essay writing service or even dissertation writing services? Just request for our write my paper service, and we'll match you with the best essay writer in your subject! With an exceptional team of professional academic experts in a wide range of subjects, we can guarantee you an unrivaled quality of custom-written papers.
Get ZERO PLAGIARISM, HUMAN WRITTEN ESSAYS
Why Hire Collepals.com writers to do your paper?
Quality- We are experienced and have access to ample research materials.
We write plagiarism Free Content
Confidential- We never share or sell your personal information to third parties.
Support-Chat with us today! We are always waiting to answer all your questions.
