SOEN 6751 Week 2 - Design Process/User Centered Design PDF

SOEN 6751 Week 2 - Design Process/User-Centered Design, Requirements Gathering By Dr. Anil Ufuk Batmaz SOEN 6751 Overview Design Process/User-Centered Design Understanding the problem space...

SOEN 6751 Week 2 - Design Process/User-Centered Design, Requirements Gathering By Dr. Anil Ufuk Batmaz SOEN 6751 Overview Design Process/User-Centered Design Understanding the problem space Importance of involving users Degrees of user involvement What is a user-centered approach? Four basic activities of interaction design A simple lifecycle model for interaction design Requirement Gathering Personas Empathy Maps Journey Maps User Flow Diagrams User Journey Scenario Maps Storyboards SOEN 6751 Definitions HCI: multidisciplinary field of study focusing on the design of computer technology and, in particular, the interaction between humans (the users) and computers. UX: focuses on the overall experience between a user and a product. Not just concerned with the interactive elements but also the way that certain elements look, feel or contrived to deliver certain outputs. UI: process of making interfaces in software or computerized devices with a focus on looks or style. IxD: examines the interaction (via an interface) between a system and its user. IA: structural design of shared information environments; the art and science of organizing and labelling websites, online communities and software to support usability and findability. SOEN 6751 Class activity – 3 minutes Imagine you have been asked to design an application 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? SOEN 6751 The Process of Interaction Design Good interface design does not begin with pictures. It begins with an understanding of people: What they are like, why they use a given piece of software, how they might interact with it. The more you know about them and the more you empathize with them, the more effectively you can design for them. Software, after all, is merely a means to an end for the people who use it. The better you satisfy those ends, the happier those users will be. SOEN 6751 The Process of Interaction Design It is important to realize that having a clear understanding of why and how you are going to design something, before writing any code, can save enormous amounts of time, effort, and money later on in the design process. Ill thought-out ideas, incompatible and unusable designs can be refined while it is relatively easy and painless to do so. Once ideas are committed to code they become much harder to throw away. Such preliminary thinking through of ideas about the user experience and what kinds of designs might be appropriate is, however, a skill that needs to be learned. SOEN 6751 Understanding the Problem Space It is a process: Focused on discovering requirements, designing to fulfil requirements, producing prototypes and evaluating them Focused on users and their goals Involves trade-offs to balance conflicting requirements Generating alternatives and choosing between them is key SOEN 6751 The double diamond of design SOEN 6751 The double diamond of design Discover The process starts by questioning the challenge and quickly leads to research to identify user needs. Define The second phase is to make sense of the findings, understanding how user needs and the problem align. The result is to create a design brief which clearly defines the challenge based on these insights. Develop The third phase concentrates on developing, testing and refining multiple potential solutions. Deliver The final phase involves selecting a single solution that works and preparing it for launch. SOEN 6751 Understanding the Problem Space Explore What is the current user experience? Why is a change needed? How will this change improve the situation? Articulating the problem space Team effort Explore different perspectives Avoid incorrect assumptions and unsupported claims SOEN 6751 Understanding the Problem Space Class Activity – 3 minutes What is problematic with existing support for navigating while driving? What is the current user experience? Why is a change needed? How will this change improve the situation? SOEN 6751 Understanding the Problem Space AR displays and navigation systems in cars are the result of decades of research into human factors and information displays. Understanding the problem space has been critical to arriving at a workable solution that is both safe & trusted. SOEN 6751 Understanding the Problem Space Class Activity – 3 minutes What is problematic with AR support for navigating while driving? What is the current user experience? Why is a change needed? How will this change improve the situation? SOEN 6751 Understanding the Problem Space While it is certainly necessary at some point to choose which technology to employ and decide how to design the physical aspects, it is better to make these kinds of decisions after articulating the nature of the problem space. By this we mean understanding and conceptualizing what is currently the user experience/product and how this is going to be improved or changed. SOEN 6751 Importance of involving users Used to be common for developers to talk to only managers, experts or proxy users or just use their own judgement. Although this is valuable as you don’t get the same perspective as the user who performs the activity every day or who will use the intended product on a regular basis. The best way to ensure that the end product is usable and that it indeed will be used is to involve users. SOEN 6751 Importance of involving users When you involve users, be careful with expectation management Realistic expectations No surprises, no disappointments Timely training Communication, but no hype SOEN 6751 Importance of involving users Ownership Make the users active stakeholders More likely to forgive or accept problems Can make a big difference in acceptance and success of product SOEN 6751 Stakeholder Map Example SOEN 6751 Degrees of user involvement Member of the design team 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 group or individual activities Online contributions from thousands of users Online Feedback Exchange (OFE) systems Crowdsourcing design ideas Citizen science User involvement after product release SOEN 6751 What is a user-centered approach? In 1985, Gould and Lewis laid down three principles they believed would lead to a ‘useful and easy to use computer system’: Focuses on users and tasks: directly studying cognitive, behavioural, anthropomorphic, and attitudinal characteristics Empirical measurement: users’ reactions and performance to scenarios, manuals, simulations, and prototypes are observed, recorded, and analyzed Iterative design: when problems are found in user testing, fix them and carry out more tests SOEN 6751 What is a user-centered approach? These three principles are now accepted as the basis for a user- centered approach but when Gould and Lewis wrote their paper, they were not accepted by most developers. In fact, they remark in their paper that when they started recommending these to designers, the designers' reactions implied that these principles were obvious. So maybe they had obvious merit, but they were not so easy to put into practice. SOEN 6751 User-Centered Design (UCD) vs … SOEN 6751 https://jambysam.com/design-thinking-vs-user-centred-design-vs-human-centred-design/ User-centered Design (UCD) vs… Design Thinking (DT) is an approach to problem-solving that aims to integrate the needs of the people, the technical feasibility of the design, and ensure that the requirements for business are fulfilled. Human-centered design (HCD) is a problem-solving technique that puts real people at the center of the development process, enabling you to create products and services that resonate real people and are made according to your audience’s needs. Toothbrushes SOEN 6751 User-centered Design (UCD) UCD: iterative design process where designers focus on the users and their needs in each phase of the design process. In UCD, design teams involve users throughout the design process via a variety of research and design techniques, to create highly usable and accessible products for them. A mix of investigative methods and tools (e.g., surveys and interviews) and generative ones (e.g., brainstorming) are used to develop an understanding of user needs. SOEN 6751 User-centered Design (UCD) By focusing on user tasks and goals, UCD reduces users’ learning curve for a product and leverages their existing knowledge to maximize usability and value. Traditionally judged the success of products that result from a user- centered design process by their learnability, efficiency in use, and the satisfaction that results from a user’s experience with a product. +memorability and errors (next slide) SOEN 6751 Usability Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process. Usability is defined by 5 quality components: Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency: Once users have learned the design, how quickly can they perform tasks? Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design? SOEN 6751 Early Focus on Users and Tasks Users' tasks and goals are the driving force behind the development. In a user-centered approach to design, while technology will inform design options and choices, it should not be the driving force. Instead of saying ‘Where can we deploy this new technology?’ say ‘What technologies are available to provide better support for users' goals?’ Users' behavior and context of use are studied and the system is designed to support them. How people perform their tasks is also significant. Understanding behavior highlights priorities, preferences, and implicit intentions. SOEN 6751 Early Focus on Users and Tasks Users' characteristics are captured and designed for Products designed to support humans should take these limitations into account and should limit the mistakes we make. Users are consulted throughout development from earliest phases to the latest and their input is seriously taken into account. All design decisions are taken within the context of the users, their work, and their environment. This does not necessarily mean that users are actively involved in design decisions. SOEN 6751 Four basic activities of Interaction Design 1. Discovering requirements 2. Designing alternatives 3. Prototyping alternative designs 4. Evaluating product and its user experience throughout SOEN 6751  Lifecycle Model for Interaction Design Software engineering has spawned many lifecycle models including the waterfall, spiral, and RAD(rapid applications development) models. Existing models have varying levels of sophistication and complexity. For projects involving only a few experienced developers, a simple process would probably be adequate. However, for larger systems involving tens or hundreds of developers with hundreds or thousands of users, a simple process just is not enough to provide the management structure and discipline necessary to engineer a usable product. SOEN 6751 A simple interaction design lifecycle model Exemplifies a user-centered design approach SOEN 6751 Another lifecycle model: Google Design Sprints https://designsprintkit.withgoogle.com/methodology/overview SOEN 6751 Another lifecycle model: Research in the Wild A framework for research in the wild studies Source: Rogers and Marshall, 2017, p6. (used courtesy of Morgan and Claypool) SOEN 6751 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? SOEN 6751 Who are the users/stakeholders? SOEN 6751 Who are the users/stakeholders? Not obvious 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 roles Stakeholders Larger than the group of direct users Identifying stakeholders helps identify groups to include in interaction design activities SOEN 6751 What are the users’ needs? Users rarely know what is possible Instead: 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 requirements SOEN 6751 How to generate alternative designs? Humans tend to stick with something that works Considering alternatives helps identify better designs Where do alternative designs come from? ‘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 SOEN 6751 Some key points Four basic activities in interaction design process Discovering requirements Designing alternatives Prototyping Evaluating User-centered design rests on three principles Early focus on users and tasks Empirical measurement using quantifiable and measurable usability criteria Iterative design SOEN 6751 User-centered Design (UCD) Class activity – 3 minutes Can you foresee any negative aspects of UCD? SOEN 6751 User-centered Design (UCD) Cons Worth the investment of the time and resources a team needs to complete a range of research and testing activities? There are successful designs that were developed by talented designers, applying only minimal user research at the outset of a project. Businesses feel they already understand the needs and goals of their target audience. While listening to users within a research context helps make designs more usable and efficient to use, many question whether it leads to new thinking or innovative ideas. Users are not designers, and they are rarely good at thinking of creative design solutions to their problems SOEN 6751 User-centered Design (UCD) Cons If users aren’t good at telling us what they want with regard to features for a design, they are likely not suited to talking directly about their emotional response to a design or the impact of their experience (UX) with an organization as a whole. Researchers and designers who focus too closely on what users ask for and who too rigidly follow a set process may not have the flexibility to see creative solutions that would meet the broader emotional requirements of a customer’s entire experience. SOEN 6751 User-centered Design (UCD) Cons Increasing the efficiency and effectiveness of a user interface design through user-centered design is a desirable goal BUT … the needs of many user interfaces today are broader, incorporating social and human elements that go beyond usability —> Human Centered Design SOEN 6751 What about Human Centered Design? Both are focused on providing the end user (or human) with a design that’s beneficial to his or her life. User-centered design could be taken as a less emotionally empathetic approach, focused primarily on the tangible, physiological ways users interact with a platform, whereas human-centric design incorporates their emotional or psychological preferences as well. Human-centered design is the process of creating things deeply based on general natural characteristics and peculiarities of human psychology and perception. User-centered design is a more focused and concise version of human centered design with deeper analysis of target audience. SOEN 6751 Activity-centered Design (ACD) Activity: any purposeful human activity. ACD features heavier emphasis on the activities that a user would perform with a given piece of technology. SOEN 6751 Course Activity What are the examples of the ACD around you? – 4 minutes SOEN 6751 “Many of the systems that have passed through HCD design phases and usability reviews are superb at the level of the static, individual display, but fail to support the sequential requirements of the underlying tasks and activities. The HCD methods tend to miss this aspect of behaviour: Activity-centered methods focus upon it.” – Donald Norman SOEN 6751 Systems Design Systems design is the process of defining the architecture, modules, interfaces, and data for a system to satisfy specified requirements. SOEN 6751 Genius Design Forgoes user research and the iterative design and testing cycles of user-centered design in favour of relying on the skills of talented designers. Rational: if a good designer focuses on solving users’ problems, the designer can use his or her skills to generate creative solutions without introducing the bias of users’ prior experience. SOEN 6751 Information Architecture (IA) IA involves the way a website/ app is structured and how the content is organized. The goal is to help users find information and complete tasks. The structure for a website, application, or another project, that allows us to understand where we are as users, and where the information we want is in relation to our position. https://blog.hubspot.com/website/information-architecture SOEN 6751 Design Research Is Not Marketing Research The difference is that as a designer, you’re trying to understand the people who use the software. Target audiences from a UI design perspective are defined by their task goals and behaviors. A marketing professional tries to understand those who buy it. Market segments are defined by demographics, psychographics, and other characteristics. SOEN 6751 How projects really work? SOEN 6751 Establishing Requirements An interaction design project may aim to replace or update an established system, or it may aim to develop a totally innovative product with no obvious precedent. There may be an initial set of requirements, or the project may have to begin by producing a set of requirements from scratch. Whatever the initial situation and whatever the aim of the project, the users' needs, requirements, aspirations, and expectations have to be discussed, refined, clarified, and probably re-scoped. This requires an understanding of, among other things, the users and their capabilities, their current tasks and goals, the conditions under which the product will be used, and constraints on the product's performance. SOEN 6751 Establishing Requirements Establishing requirements is also not simply writing a wish list of features. Given the iterative nature of interaction design, isolating requirements activities from design activities and from evaluation activities is a little artificial, since in practice they are all intertwined: some design will take place while requirements are being established, and the design will evolve through a series of evaluation–redesign cycles. However, each of these activities can be distinguished by its own emphasis and its own techniques. SOEN 6751 What Are We Trying to Achieve in the Requirements Activity? There are two aims. One aim is to understand as much as possible about the users, their activities, and the context of that activity, so the system under development can support them in achieving their goals. Building on this, our second aim is to produce a set of stable requirements that form a sound basis to start designing. SOEN 6751 How Can We Achieve This? At the beginning of the requirements activity, there is a lot to find out and to clarify. At the end of the activity we will have a set of stable requirements that can be the basis of the design activity Broadly speaking, these activities progress in a sequential manner: first gather some data, then analyze and interpret it, and then extract some requirements from it. But it gets a lot messier than this, and the activities influence one another as the process iterates. Once you start data analysis, you will need to gather more data to clarify or confirm your findings. SOEN 6751 Why Bother? The Importance of Getting it Right Much has been written about the significant cost of fixing errors late in the software development cycle rather than early, during the requirements activity. Davis (1995) identifies insufficient user communication, poor specifications, and insufficient analysis as contributors to poor cost estimation. Boehm and Basili finding and fixing a software problem after delivery is often 100 times more expensive than finding and fixing it during the requirements and design phase. SOEN 6751 What Are Requirements? A requirement is a statement about an intended product that specifies what it should do or how it should perform. One of the aims of the requirements activity is to make the requirements as specific, unambiguous, and clear as possible. For example, a requirement for a website might be that the time to download any complete page is less than 5 seconds. Requirements come in many different forms and at many different levels of abstraction, but we need to make sure that the requirements are as clear as possible and that we understand how to tell when they have been fulfilled. SOEN 6751 Different Kinds of Requirements In software engineering, two different kinds of requirements have traditionally been identified: functional requirements, which say what the system should do, and non-functional requirements, which say what constraints there are on the system and its development. For example, a functional requirement for a new video game may be that it should be challenging for a range of user abilities. A non-functional requirement for this same game might be that it can run on a variety of platforms such as Xbox, PlayStation, and Wii consoles. SOEN 6751 Different Kinds of Requirements Different interactive products will be associated with different constraints. Functional requirements capture what the product should do. Data requirements capture the type, volatility, size/amount, persistence, accuracy, and value of the required data Environmental requirements – or context of use – refer to the circumstances in which the interactive product will operate. Etc.. SOEN 6751 Environmental requirements: Underwater PCs Class activity – 5 minutes What are the potential requirements for an underwater PC SOEN 6751 User characteristics User characteristics capture the key attributes of the intended user group, such as the users' nationality, educational background, preferences, personal circumstances, physical or mental disabilities, and so on. In addition, a user may be a novice, an expert, a casual, or a frequent user SOEN 6751 Personas In order to bring user characteristics to life, they are often transformed into a number of personas. Personas are rich descriptions of typical users of the product under development that the designers can focus on and design the product for. They don't describe real people, but are realistic rather than idealized. Any one persona usually represents a synthesis from a number of real users who have been involved in data gathering. SOEN 6751 Personas Personas are archetypical users whose goals and characteristics represent the needs of a larger group of users. Personas include descriptions on behaviour patterns, goals, skills, attitudes, and background information, as well as the environment in which a persona operates. Designers usually add a few fictional personal details in a description to make the persona a realistic character (e.g. quotes of real users), as well as context-specific details (for example, for a banking app it makes sense to include a persona’s financial sophistication and major expenses). SOEN 6751 SOEN 6751 SOEN 6751 Why are personas important? Get deeper understanding of the target audience. Answers the question “who are we designing for?” By understanding the expectations, concerns and motivations of target users, it’s possible to design a product that will satisfy users needs and therefore be successful. Personas help designers to create understanding and empathy with the end users. SOEN 6751 Characteristics of Good Personas Personas reflect real user patterns, not different user roles. Personas aren’t a fictional guesses at what a target user thinks. Every aspect of a persona’s description should be tied back to real data (observed and researched). Personas aren’t a reflection of roles within a system. A persona focuses on the current state (how users interact with a product), not the future (how users will interact with a product). A persona is context-specific (it’s focused on the behaviors and goals related to the specific domain of a product). SOEN 6751 Class activity - Personas You are going to create a new mobile application for a coffee shop in downtown Montreal. Based on your observations, create a persona 5-minutes SOEN 6751 Empathy Map SOEN 6751 Empathy Maps (Originally By Dave Gray) Much like a user persona, an empathy map can represent a group of users, such as a customer segment. Helps you understand your user’s needs while you develop a deeper understanding of the persons you are designing for. Empathise and synthesise your observations from the research phase, and draw out unexpected insights about your user’s needs. SOEN 6751 Empathy Map: How To Use It The map provides four major areas in which to focus our attention on, thus providing an overview of a person’s experience. SOEN 6751 SOEN 6751 Step 1: Collect Data Review your notes, pictures, audio, and video from your research/fieldwork and fill out each of the four quadrants while defining and synthesizing: What did the user SAY? Write down significant quotes and keywords that the user said. What did the user DO? Describe which actions and behaviours you noticed or insert pictures or drawing. What did the user THINK? Dig deeper. What do you think that your user might be thinking? What are their motivations, their goals, their needs, their desires? What does this tell you about his or her beliefs? How did the user FEEL? What emotions might your user be feeling? Take subtle cues like body language and their choice of words and tone of voice into account. SOEN 6751 Step 2: Synthesize Needs Synthesize the user’s needs based on your Empathy Map. This will help you to define your design challenge. Needs are verbs, i.e. activities and desires. Needs are not nouns, which will instead lead you to define solutions. Identify needs directly from the user traits you noted. Identify needs based on contradictions between two traits, such as a disconnection between what a user says and what the user does. SOEN 6751 User Needs Use the American psychologist Abraham Maslow’s Hierarchy of Needs to help you understand and define which underlying needs your user has. Consult all five layers in Maslow’s Pyramid to help you define which needs your user is primarily focused on fulfilling. Start reflecting on how your product or service can help fulfill some of those needs. SOEN 6751 Step 3: Synthesize Insights An “Insight” is your remarkable realization that can help you to solve the current design challenge you’re facing. Look to synthesize major insights, especially from contradictions between two user attributes. It can be found within one quadrant or in two different quadrants. You can also synthesize insights by asking yourself: “Why?” when you notice strange, tense, or surprising behaviour. SOEN 6751 SOEN 6751 SOEN 6751 SOEN 6751 Advantages Let you understand what your users are thinking and feeling when they are using your specific digital product or service. Great way to add structure to your user interviews and to provide a contextual framework for gaining insight into your users’ motivations, goals and expectations. Research helps you to understand the “why,” and also the “when” and “where,” users may interact with your digital product or service. SOEN 6751 Class activity – 1 minute each While you are using the course schedule website of Concordia What are the tasks you are trying to complete? What questions do you need answered? How do you feel about the experience What really matters to you? What people, things, or places may influence how you act? What pain points might you be experiencing that you hope to overcome? What is your ultimate goal? What are you trying to achieve? SOEN 6751 Journey Maps // User Experience Maps SOEN 6751 Journey Maps Helps you sketch out the user experience. Commonly represented as a timeline of all touch points (user actions and interactions) between a user and a product. Visualizes how a user interacts with a product and allows designers to see a product from a user’s point of view. Helps in finding the answer to “What if..?” questions. SOEN 6751 An 8-step Process For User Journey Mapping 1. Choose a scope High-level map which shows end-to-end experience of using a product/app or more detailed map that focuses on one particular interaction (for instance, paying a bill). 2. Create/Use a persona Who is your user? A user journey map focuses on the experience of one main actor — a user persona who experiences the journey. 3. Define scenario and user expectations The scenario describes the situation that the journey map addresses. It can be real or anticipated. SOEN 6751 An 8-step Process For User Journey Mapping 4. Create a list of touchpoints Determine the user actions and interactions with the product. 5. Take user intent into mind What motivates your user to interact with your product? What problems are users looking to solve when they decide to use your product? 6. Sketch the journey Put together all the information you have and sketch a journey in a format of step-by-step interaction. SOEN 6751 SOEN 6751 An 8-step Process For User Journey Mapping 7. Consider a user’s emotional state during each step of interaction What does a user feel when interacting with your product? Products we design need to mirror the state of mind of our users. By visualizing emotional “ups” and “downs” of the experience you’ll show the areas of experience that require refinement. SOEN 6751 An 8-step Process For User Journey Mapping 8. Validate and refine user journey Use the information from usability testing sessions and app analytics to be sure that your journey resembles a real use case. Gather and analyze information about your users on a regular basis. Get user feedback to improve your understanding of the user journey. SOEN 6751 User Flow Diagrams A user flow describes the specific actions people take to accomplish their goal at a specific stage within their journey. Primarily used to figure out the flow of a website or application after you've thought about the customer experience and user needs. Understanding how users move through the flow of your website/app. SOEN 6751 How to make a user flow diagram Determine your objective and your users’ objectives. Determine how visitors find your website/application. Identify what information your users need and when they need it. Map out your user flow. Gather feedback, finalize, and share. SOEN 6751 Example flow diagrams SOEN 6751 User flow diagrams/charts advantages User flow diagrams will help you: More easily communicate what the user flow should be. Make sure you don't miss important steps in the process. Make decisions and changes at a low fidelity before you invest a lot of time in design. Get feedback from different stakeholders. SOEN 6751 User Flow vs User Journey What do they have in common? They both are user-centered; They both deal with various stages of interactions between a user and a product or service; Both can help understand user behavior; Both provide insights for better customer and user experience design. SOEN 6751 User Flow vs User Journey What’s different? Level of analysis. User journey provides the macro view of the interactions between user or customer with your business from start to finish, while user flow focuses on the micro-level and show the specific steps users take to achieve their goal; Key focus. User journeys are more concerned with the emotional state of the users, while user flow concentrates on the technicalities; Purpose. A user journey is a technique that helps you see the overall experience your users have across touchpoints and channels. User flow is just a zoomed-in interaction of a user with a system at a given touchpoint within the bigger journey. SOEN 6751 Scenario Maps A scenario is basically a story about someone (usually your users) using whatever is being designed to carry out a specific task or goal. For example, a scenario might outline how Paul uses a website to order flowers for his mother’s birthday. Scenarios can be very detailed, all the way to very high level but should at least outline the ‘who’, ‘what’, ‘when’, ‘where’, ‘why’, and ‘how’ of the usage. SOEN 6751 Scenario Maps SOEN 6751 As-Is Scenario Maps As-Is scenario maps: finding opportunities in users current experience. Great way of communicating the key tasks a user will perform with a system. Can help define the usability testing regime when a project has finished. SOEN 6751 Storyboards A storyboard is a linear sequence of illustrations, arrayed together to visualize a story. Visually predicts and explores a user’s experience with a product. It can help designers understand the flow of people’s interaction with a product over time, giving the designers a clear sense of what’s really important for users. SOEN 6751 SOEN 6751  SOEN 6751 Week 3 – User Modeling, User Profiles and Personas By Dr. Anil Ufuk Batmaz SOEN 6751 Overview Personas Empathy Maps Journey Maps User Flow Diagrams User Journey Scenario Maps Storyboards Conceptual Models Mental Models Interface Metaphors Interaction types Interaction elements Hard and soft control Natural vs Learned relationship SOEN 6751 User characteristics User characteristics capture the key attributes of the intended user group, such as the users' nationality, educational background, preferences, personal circumstances, physical or mental disabilities, and so on. In addition, a user may be a novice, an expert, a casual, or a frequent user SOEN 6751 Personas In order to bring user characteristics to life, they are often transformed into a number of personas. Personas are rich descriptions of typical users of the product under development that the designers can focus on and design the product for. They don't describe real people, but are realistic rather than idealized. Any one persona usually represents a synthesis from a number of real users who have been involved in data gathering. SOEN 6751 Personas Personas are archetypical users whose goals and characteristics represent the needs of a larger group of users. Personas include descriptions on behaviour patterns, goals, skills, attitudes, and background information, as well as the environment in which a persona operates. Designers usually add a few fictional personal details in a description to make the persona a realistic character (e.g. quotes of real users), as well as context-specific details (for example, for a banking app it makes sense to include a persona’s financial sophistication and major expenses). SOEN 6751 SOEN 6751 SOEN 6751 Why are personas important? Get deeper understanding of the target audience. Answers the question “who are we designing for?” By understanding the expectations, concerns and motivations of target users, it’s possible to design a product that will satisfy users needs and therefore be successful. Personas help designers to create understanding and empathy with the end users. SOEN 6751 Characteristics of Good Personas Personas reflect real user patterns, not different user roles. Personas aren’t a fictional guesses at what a target user thinks. Every aspect of a persona’s description should be tied back to real data (observed and researched). Personas aren’t a reflection of roles within a system. A persona focuses on the current state (how users interact with a product), not the future (how users will interact with a product). A persona is context-specific (it’s focused on the behaviors and goals related to the specific domain of a product). SOEN 6751 Class Activity 6 - Personas You are going to create a new mobile application for a coffee shop in downtown Montreal. Based on your observations, create a persona 5-minutes SOEN 6751 Empathy Map SOEN 6751 Empathy Maps (Originally By Dave Gray) Much like a user persona, an empathy map can represent a group of users, such as a customer segment. Helps you understand your user’s needs while you develop a deeper understanding of the persons you are designing for. Empathise and synthesise your observations from the research phase, and draw out unexpected insights about your user’s needs. SOEN 6751 Empathy Map: How To Use It The map provides four major areas in which to focus our attention on, thus providing an overview of a person’s experience. SOEN 6751 SOEN 6751 Step 1: Collect Data Review your notes, pictures, audio, and video from your research/fieldwork and fill out each of the four quadrants while defining and synthesizing: What did the user SAY? Write down significant quotes and keywords that the user said. What did the user DO? Describe which actions and behaviours you noticed or insert pictures or drawing. What did the user THINK? Dig deeper. What do you think that your user might be thinking? What are their motivations, their goals, their needs, their desires? What does this tell you about his or her beliefs? How did the user FEEL? What emotions might your user be feeling? Take subtle cues like body language and their choice of words and tone of voice into account. SOEN 6751 Step 2: Synthesize Needs Synthesize the user’s needs based on your Empathy Map. This will help you to define your design challenge. Needs are verbs, i.e. activities and desires. Needs are not nouns, which will instead lead you to define solutions. Identify needs directly from the user traits you noted. Identify needs based on contradictions between two traits, such as a disconnection between what a user says and what the user does. SOEN 6751 User Needs Use the American psychologist Abraham Maslow’s Hierarchy of Needs to help you understand and define which underlying needs your user has. Consult all five layers in Maslow’s Pyramid to help you define which needs your user is primarily focused on fulfilling. Start reflecting on how your product or service can help fulfill some of those needs. SOEN 6751 Step 3: Synthesize Insights An “Insight” is your remarkable realization that can help you to solve the current design challenge you’re facing. Look to synthesize major insights, especially from contradictions between two user attributes. It can be found within one quadrant or in two different quadrants. You can also synthesize insights by asking yourself: “Why?” when you notice strange, tense, or surprising behaviour. SOEN 6751 SOEN 6751 SOEN 6751 SOEN 6751 Advantages Let you understand what your users are thinking and feeling when they are using your specific digital product or service. Great way to add structure to your user interviews and to provide a contextual framework for gaining insight into your users’ motivations, goals and expectations. Research helps you to understand the “why,” and also the “when” and “where,” users may interact with your digital product or service. SOEN 6751 Class Activity 7 – 1 minute each While you are using the course schedule website of Concordia What are the tasks you are trying to complete? What questions do you need answered? How do you feel about the experience What really matters to you? What people, things, or places may influence how you act? What pain points might you be experiencing that you hope to overcome? What is your ultimate goal? What are you trying to achieve? SOEN 6751 Journey Maps // User Experience Maps SOEN 6751 Journey Maps Helps you sketch out the user experience. Commonly represented as a timeline of all touch points (user actions and interactions) between a user and a product. Visualizes how a user interacts with a product and allows designers to see a product from a user’s point of view. Helps in finding the answer to “What if..?” questions. SOEN 6751 An 8-step Process For User Journey Mapping 1. Choose a scope High-level map which shows end-to-end experience of using a product/app or more detailed map that focuses on one particular interaction (for instance, paying a bill). 2. Create/Use a persona Who is your user? A user journey map focuses on the experience of one main actor — a user persona who experiences the journey. 3. Define scenario and user expectations The scenario describes the situation that the journey map addresses. It can be real or anticipated. SOEN 6751 An 8-step Process For User Journey Mapping 4. Create a list of touchpoints Determine the user actions and interactions with the product. 5. Take user intent into mind What motivates your user to interact with your product? What problems are users looking to solve when they decide to use your product? 6. Sketch the journey Put together all the information you have and sketch a journey in a format of step-by-step interaction. SOEN 6751 SOEN 6751 An 8-step Process For User Journey Mapping 7. Consider a user’s emotional state during each step of interaction What does a user feel when interacting with your product? Products we design need to mirror the state of mind of our users. By visualizing emotional “ups” and “downs” of the experience you’ll show the areas of experience that require refinement. SOEN 6751 Class Activity 8 – User Journey Mapping Consider your emotional state when you use Concordia.ca What are the 3 emotional “ups” and 3 emotional “downs” of your experience? Write the action and your emotion. These will show the areas of experience that require refinement 3 minutes SOEN 6751 An 8-step Process For User Journey Mapping 8. Validate and refine user journey Use the information from usability testing sessions and app analytics to be sure that your journey resembles a real use case. Gather and analyze information about your users on a regular basis. Get user feedback to improve your understanding of the user journey. SOEN 6751 User Flow Diagrams A user flow describes the specific actions people take to accomplish their goal at a specific stage within their journey. Primarily used to figure out the flow of a website or application after you've thought about the customer experience and user needs. Understanding how users move through the flow of your website/app. SOEN 6751 How to make a user flow diagram Determine your objective and your users’ objectives. Determine how visitors find your website/application. Identify what information your users need and when they need it. Map out your user flow. Gather feedback, finalize, and share. SOEN 6751 Example flow diagrams SOEN 6751 User flow diagrams/charts advantages User flow diagrams will help you: More easily communicate what the user flow should be. Make sure you don't miss important steps in the process. Make decisions and changes at a low fidelity before you invest a lot of time in design. Get feedback from different stakeholders. SOEN 6751 User Flow vs User Journey What do they have in common? They both are user-centered; They both deal with various stages of interactions between a user and a product or service; Both can help understand user behavior; Both provide insights for better customer and user experience design. SOEN 6751 User Flow vs User Journey What’s different? Level of analysis. User journey provides the macro view of the interactions between user or customer with your business from start to finish, while user flow focuses on the micro-level and show the specific steps users take to achieve their goal; Key focus. User journeys are more concerned with the emotional state of the users, while user flow concentrates on the technicalities; Purpose. A user journey is a technique that helps you see the overall experience your users have across touchpoints and channels. User flow is just a zoomed-in interaction of a user with a system at a given touchpoint within the bigger journey. SOEN 6751 Scenario Maps A scenario is basically a story about someone (usually your users) using whatever is being designed to carry out a specific task or goal. For example, a scenario might outline how Paul uses a website to order flowers for his mother’s birthday. Scenarios can be very detailed, all the way to very high level but should at least outline the ‘who’, ‘what’, ‘when’, ‘where’, ‘why’, and ‘how’ of the usage. SOEN 6751 Scenario Maps SOEN 6751 As-Is Scenario Maps As-Is scenario maps: finding opportunities in users current experience. Great way of communicating the key tasks a user will perform with a system. Can help define the usability testing regime when a project has finished. SOEN 6751 Storyboards A storyboard is a linear sequence of illustrations, arrayed together to visualize a story. Visually predicts and explores a user’s experience with a product. It can help designers understand the flow of people’s interaction with a product over time, giving the designers a clear sense of what’s really important for users. SOEN 6751 SOEN 6751 Before start prototyping,… Let’s take a step back SOEN 6751 Conceptual Models Johnson and Henderson's (2002) a high-level description of how a system is organized and operates In this sense, it is an abstraction outlining what people can do with a product and what concepts are needed to understand how to interact with it. A key benefit of conceptualizing a design at this level is that it enables “designers to straighten out their thinking before they start laying out their widgets” SOEN 6751 Conceptual Models Metaphors and analogies that convey to people how to understand what a product is for and how to use it for an activity (e.g. browsing, bookmarking). The concepts that people are exposed to through the product, including the task–domain objects they create and manipulate, their attributes, and the operations that can be performed on them (e.g. saving, revisiting, organizing). They help people predict how something will work. SOEN 6751 Conceptual Models How the various metaphors, concepts, and their relationships are organized determines the user experience. The best conceptual models are those that appear obvious; the operations they support being intuitive to use. Most interface applications are actually based on well-established conceptual models. For example, a conceptual model based on the core aspects of the customer experience when at a shopping mall underlies most online shopping websites. SOEN 6751 Mental Model A mental model is an individual's internal representation or understanding of how something works or how different elements are interconnected within a system. A Mental Model Is Based on Belief, Not Facts 1.Subjective: Mental models are subjective and vary from person to person. They are based on an individual's unique experiences and perspectives. 2.Dynamic: Mental models are not static; they can evolve and adapt based on new information and experiences. 3.Incomplete: Individuals may have incomplete or inaccurate mental models due to limited information or misunderstandings. 4.Heuristic: Mental models often involve simplifications and generalizations that help individuals make sense of complex situations. SOEN 6751 Mental Model example Using a clock metaphor for numeric entry with a stylus Instead of scripting numbers using Roman characters, the numbers are entered using straight-line strokes. The direction of the stroke is the number’s position on a clock face. In a longitudinal study, McQueen et al. (1995) found that numeric entry was about 24 percent faster using straight-line strokes compared to handwritten digits. SOEN 6751 Interface Metaphors As mentioned earlier, metaphors are considered to be a central component of a conceptual model. They provide a structure that is similar in some way to aspects of a familiar entity (or entities) but also have their own behaviors and properties. More specifically, an interface metaphor is one that is instantiated in some way as part of the user interface: for example, the desktop metaphor. Another well-known one is the search engine. The metaphor invites comparisons between a mechanical engine, which has several parts working, and the everyday action of looking in different places to find something. SOEN 6751 Interface Metaphors They can also contravene people's expectations about how things should be, such as the recycle bin (trashcan) that used to sit on the desktop. Logically and culturally (i.e. in the real world) it should have been placed under the desk. But users would not have been able to see it because it would be occluded by the desktop surface. So it needed to go on the desktop. Some users find this irksome but most did not find it to be a problem. SOEN 6751 Class Activity – 9 Go to a few online stores and see how the interface has been designed to enable the customer to order and pay for an item. How many use the ‘add to shopping cart/trolley/basket’ followed by the ‘checkout’ metaphor? Does this make it straightforward and intuitive to make a purchase? Similarly, how many other metaphors do you see on websites? 5 Minutes SOEN 6751 Interface Metaphors Designers can fall into the trap of trying to create a virtual object to resemble a familiar physical object that is itself badly designed. A well-known example is the virtual calculator, which is designed to look and behave like a physical calculator. SOEN 6751  Interaction Types Another way of conceptualizing the design space is in terms of the interaction types that will underlie the user experience. Essentially, these are the ways a person interacts with a product or application. There are four main types: instructing, conversing, manipulating, and exploring. SOEN 6751 Instructing Users issue instructions to a system. This can be done in a number of ways, including: typing in commands, selecting options from menus in a windows environment or on a multitouch screen, speaking aloud commands, gesturing, pressing buttons, or using a combination of function keys. SOEN 6751 Instructing This type of interaction describes how users carry out their tasks by telling the system what to do. Examples include giving instructions to a system to perform operations such as tell the time, print a file, and remind the user of an appointment. A diverse range of products has been designed based on this model, including home entertainment systems, consumer electronics, and computers. SOEN 6751 Conversing Users have a dialog with a system. Users can speak via an interface or type in questions to which the system replies via text or speech output. This form of interaction is based on the idea of a person having a conversation with a system, where the system acts as a dialog partner. In particular, the system is designed to respond in a way another human being might when having a conversation. it encompasses a two-way communication process with the system acting like a partner rather than a machine that obeys orders SOEN 6751 Manipulating User interact with objects in a virtual or physical space by manipulating them (e.g. opening, holding, closing, placing). Users can hone their familiar knowledge of how to interact with objects. Extensions to these actions include zooming in and out, stretching, and shrinking – actions that are not possible with objects in the real world SOEN 6751 Exploring Users move through a virtual environment or a physical space. Virtual environments include 3D worlds, and augmented and virtual reality systems. They enable users to hone their familiar knowledge of physically moving around. Physical spaces that use sensor-based technologies include smart rooms and ambient environments, also enabling people to capitalize on familiarity. SOEN 6751 Class Activity – 10 Give examples to interaction types Instructing Conversing Manipulating Exploring 5 minutes SOEN 6751 Interaction Elements Interaction occurs when a human performs a task using computing technology of some sort. The “performs a task” aspect forms the interaction. The task is often goal- oriented, such as sending e-mail, burning a CD, programming a thermostat, or entering a destination in a global positioning system (GPS). But sometimes there is no specific goal. Just browsing the web or chatting with friends on a social networking site is sufficient to qualify as a task. If the user is engaged in any activity with computing technology, interaction is taking place. SOEN 6751 Time scale of human action Newell’s Time Scale of Human Action is a descriptive model of the human (Newell, 1990, p. 122). It delineates the problem space by positioning different types of human actions in timeframes within which the actions occur. For nine levels, Newell ascribes a label for the human system at work (e.g., operations or task). SOEN 6751 Time scale of human action The most common dependent variable in experimental research in HCI is time—the time for a user to do a task. In this sense, Newell’s time-scale model is relevant to HCI. The model is also appropriate because it reflects the multidisciplinary nature of the field. HCI research is both high level and low level, and we see this in the model. For example, research on selection techniques, menu design, force or auditory feedback, text entry, gestural input, and so on, is within the cognitive band. SOEN 6751 Time scale of human action Up in the rational band, users are engaged in tasks that span minutes, tens of minutes, or hours. Research topics here include web navigation, user search strategies, user-centered design, collaborative computing, ubiquitous computing, social navigation, and situated awareness. Tasks related to these research areas occupy users for minutes or hours. SOEN 6751 Time scale of human action Tasks lasting days, weeks, or months are in the social band. HCI topics here might include workplace habits, groupware usage patterns, social networking, online dating, privacy, media spaces, user styles and preferences, design theory, and so on. SOEN 6751 Hard controls and soft controls Before computers infiltrated every aspect of our homes and workplaces, displays and controls tended to be physical single- purpose devices. Controls like joysticks, switches, arrays of switches, push buttons, keys, keyboards, mice, steering wheels, handles, knobs, levers, and so on arrived through an involved process of design, engineering, and manufacturing. Once built, they were fixed for life. SOEN 6751 Hard controls and soft controls The advent of computers with software, graphical displays, and point- and-click interactions changed this. Through soft interfaces, the way humans interact with technology changed, and changed everywhere. The malleability of a display, through software, brings unlimited possibilities to a relatively small physical space. The result is soft controls. SOEN 6751 Hard controls and soft controls Human-computer interfaces contain lots of controls. Most are soft controls manipulated by physical controls (the mouse or keyboard). Desktop computer applications, for example, have thousands of control-display arrangements. Every conceivable action one might make with a soft control that produces a displayed response on the system is an example. Controls invoke different responses (displays) depending on the context, so the combinations multiply rapidly. SOEN 6751 Hard controls and soft controls The distinction between controls and displays is blurred with soft controls. Since a soft control is rendered on a display through software, its size, shape, or appearance can change dynamically to convey information to the user. Thus, soft controls often have properties of displays. Toolbar buttons and widgets are typical examples SOEN 6751 Hard controls and soft controls Soft controls need little space. It is only 30 square centimeters, but look: it contains a bewildering array of soft controls—more than 20. Or are they displays? Each is a world unto itself. Each identifies or suggests its purpose by its shape, its position, a label, or an icon. Each of these soft controls is manipulated by a hard control, by clicking. Or is double-clicking? Or is it SHIFT-clicking? Or is it dragging? What about right-clicking? What about keyboard access? SOEN 6751 Hard controls and soft controls The hard-control/soft-control distinction is similar to the idea of space multiplexing versus time multiplexing (Buxton, 1983). With space multiplexing, there is a dedicated physical control for each parameter that is controlled. Each control has a separate physical location. With time multiplexing, there are fewer controls than parameters, and so a single device (e.g., a small region of a display) is reconfigured to control different parameters at different stages of an operation. SOEN 6751 Control-display relationships When a user grasps a computer mouse and moves it to the right, the cursor on the system’s display moves to the right. This control-display relationship is not something users think much about. SOEN 6751 Control-display relationships Consider scrolling the view of an image or document. SOEN 6751 CD Gain And Transfer Function CD gain represents the amount of movement in a display object, such as a cursor, for a given amount of movement in a control. For example, if a mouse is moved three cm and the cursor also moves three cm, then the CD gain is 1. If the cursor moves six cm, the CD gain is 6/3 = 2. CD gain for a mouse and cursor is typically set in a control panel SOEN 6751 Natural versus learned relationships It is worth examining whether some relationships are more natural than others. Rotating the control produces linear movement in a reading on a display. The arrows show clockwise control motion producing upward display motion. Whether there is a natural relationship between clockwise motion of a control and linear motion on a display. The answer is no. It is a learned relationship. It might seem simple, intuitive, and easy, but it is a learned relationship. SOEN 6751 Natural versus learned relationships Consider the control (switch) and display (light bulb) There is no spatial meaning to the state of the light bulb (it is either on or off), yet the question remains: is there a natural relationship between the control and the display? As the switch is shown, is the light on or off? Your answer is influenced by where you live. If you live in the United Kingdom, the light is off. If you live in the United States or Canada, the light is on. SOEN 6751 Natural versus learned relationships If there is a physical contradiction, then the situation is different. Consider elevators (in buildings, not scrollbars). Early elevators didn’t have buttons to specify floors; they only had UP and DOWN buttons. Would a population stereotype emerge, as with the light switch example? People would learn the relationship, because they must. But they would make more errors than if the relationship was based on a correct physical mapping. This particular point has been the subject of considerable experimental testing, dating back to the 1950s SOEN 6751 Class Activity – 11 Give examples of natural versus learned relationships around you Where do we use such examples in GUIs? 5 minutes SOEN 6751  SOEN 6751 Human Computer Interface Design Anil Ufuk Batmaz Assistant Professor SOEN 6751 Overview Research question Hypothesis UX UI design Low-fidelity prototypes High-fidelity prototypes SOEN 6751 Research Question A research question is a specific query or inquiry that guides a research study. It defines the scope and purpose of the research and helps researchers focus their efforts on investigating a particular phenomenon or problem. A well-formulated research question is clear, concise, and addresses an issue that is significant and relevant to the field of study. SOEN 6751 Research Question - HCI How can we design a user interface for mobile banking applications that maximizes security? What are the psychological factors influencing user trust in voice- controlled virtual assistants? How can virtual reality technology be used to enhance empathy and understanding between individuals from diverse cultural backgrounds? How do social media platforms influence user behavior and well- being in Quebec? SOEN 6751 Research Question - HCI SOEN 6751 Rumeysa et al. (2024), ACM CHI 2024 Research Question - HCI SOEN 6751 Rodriguez et al. (2024), ACM CHI 2024 Course Activity - 12 Scenario… You have invented a new text entry technique for mobile phones, and you think it is better than the existing Qwerty soft keyboard (QSK) You decide to undertake a program of empirical enquiry to evaluate your invention What are your research questions? SOEN 6751 Research Questions Revisited Very weak Is the new technique any good? Weak Is the new technique better than QSK? Better Is the new technique faster than QSK? Better still Is the measured entry speed (in words per minute) higher for the new technique than for QSK after one hour of use? SOEN 6751  Hypothesis Formulation Experimental research begins with the development of a statement regarding the predicted relationship between two variables. This is known as a research hypothesis. In general, hypotheses clarify and clearly articulate what it is the researcher is aiming to understand. A hypothesis both defines the variables involved and the relationship between them and can take many forms: A causes B; A is larger, faster, or more enjoyable than B; etc. SOEN 6751 https://nixdell.com/classes/HCI-Spring-2018/Experimental-research.pdf  Hypothesis Formulation SOEN 6751 Voisard et al. 2023, IEEE ISMAR  Hypothesis Formulation A good hypothesis has several characteristics. First, the hypothesis should be precise. It should clearly state the conditions in the experiment or state the comparison with a control condition. It should also describe the predicted relationship in terms of the measurements used. SOEN 6751 https://nixdell.com/classes/HCI-Spring-2018/Experimental-research.pdf  Hypothesis Formulation Second, the hypothesis should be meaningful. One way it can be meaningful is by leading to the development of new knowledge, and in doing so it should relate to existing theories or point toward new theories. Hypotheses in the service of applied contributions can also be meaningful as they reveal something about the design under investigation and can convince us that a new system is more efficient, effective, or entertaining than the current state-of-the-art. SOEN 6751 https://nixdell.com/classes/HCI-Spring-2018/Experimental-research.pdf  Hypothesis Formulation Third, the described relationship needs to be testable. You must be able to manipulate the levels of one variable (i.e., the independent variable) and accurately measure the outcome (i.e., the dependent variable). For example, you could be highly influenced by “The Truman Show” and hypothesize that “we are living in a large fish tank being watched by other humans with which we can have no contact.” While the statement may or may not be true, it is not testable and therefore it is speculation and not a scientific hypothesis. SOEN 6751 https://nixdell.com/classes/HCI-Spring-2018/Experimental-research.pdf  Hypothesis Formulation Finally, the predicted relationship must be falsifiable. A common example used to demonstrate falsifiability examines the statement, “Other inhabited planets exist in the universe.” This is testable as we could send out space probes and show that there are other inhabited planets. However, the lack of detection of inhabited planets cannot falsify the statement. You might argue, “what if every single planet is observed?”, but it could be that the detection mechanisms we use are simply not sensitive enough. Therefore, while this statement could be true, and even shown to be true, it is not falsifiable and thus is not an effective scientific hypothesis. You must be able to disprove the statement with empirical data. SOEN 6751 https://nixdell.com/classes/HCI-Spring-2018/Experimental-research.pdf Hypotheses in HCI Decisions made about populations on the basis of sample information are called statistical decisions. A hypothesis is an assertion made about a population. That is, a hypothesis is a statement that something is true. The assertion concerns a numerical value of some parameter of the population. Procedures which helps us to decide whether to accept or reject hypothesis or to determine whether observed samples differ significantly from expected results are called test of hypothesis, tests of significance or results of decision. SOEN 6751 Null Hypothesis vs Alternative Hypothesis A null hypothesis is a claim (or a statement) about a population parameter that is assumed to be true until it is declared false. A null hypothesis is a hypothesis to be tested. We use the symbol H0 to represent the null hypothesis. An alternative hypothesis is a claim about a population parameter that will be true if the null hypothesis is false. It is a hypothesis to be considered as an alternative to the null hypothesis. We use the symbol H1 or HA to represent the alternative hypothesis. SOEN 6751 Null Hypothesis vs Alternative Hypothesis The null and alternative hypotheses should be expressed both grammatically and in mathematical terms and should represent mutually exclusive conditions. Thus, when a statistical analysis of sampled data suggests that the null hypothesis should be rejected, the alternative hypothesis must be accepted. The null hypothesis must be a statement of equality, not inequality. SOEN 6751 Hypothesis examples SOEN 6751 Final notes Hypotheses are NOT opinions or predictions; they are reasonable expectations based on factual information. Hypotheses should always be written in the present tense. At the time they are written, these statements are referring to research that is currently being conducted. https://berks.psu.edu/sites/berks/files/campus/HypothesisHandout_Final.pdf SOEN 6751 Hypothesis & RQ Examples SOEN 6751 Hatira et al. 2024, IEEE VR Course Activity - 13 Based on your course project, Write your research questions Write your hypotheses. 3-minutes SOEN 6751 The User Experience How a product behaves and is used by people in the real world The way people feel about it and their pleasure and satisfaction when using it, looking at it, holding it, and opening or closing it “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) Cannot design a user experience−only can design for a user experience SOEN 6751 USER Interface Design Is Coupled With User Experience Design The user experience is the result of interaction with a product or service. The user experience includes, but is not limited to, a user interface. The UI is one of the contributing factors for the end user experience. SOEN 6751 UX/UI Design Flow SOEN 6751 Prototype SOEN 6751 What is a prototype? An early sample of design used to get feedback and rapid experiments with new ideas. Allows stakeholders to interact with it. In other design fields, a prototype is a small-scale model: A miniature car A miniature building or town SOEN 6751 Why prototype? Evaluation and feedback are central to interaction design Stakeholders can see, hold, and interact with a prototype more easily than a document or a drawing Team members can communicate effectively Ideas can be tested out while limiting expenses Prototyping encourages reflection: an important aspect of design Prototypes answer questions and support designers in choosing between alternatives SOEN 6751 SOEN 6751 Building Prototypes Four key components no matter what method you choose to utilize: People – including those whom you are testing and the observers Objects – static and interactive, including the prototype and other objects the people and/or prototype interact/s with Location – places and environments Interactions – digital or physical, between people, objects and the location SOEN 6751 What Is A Prototype In Interaction Design? Prototypes typically created with a mixture of Sketches and diagrams Wireframes Mockups 3D models SOEN 6751 Low-fidelity Prototyping Uses a medium which is unlike the final medium, for example, paper or cardboard Is quick, cheap, and easily changed Examples: Sketches, task sequences, and so on ‘Post-it’ notes Storyboards ‘Wizard-of-Oz’ SOEN 6751 Sketches and Diagrams One of the earliest forms of prototyping you can use. Requires very little effort and does not necessarily rely on artistic levels of drawing skill to prove useful, and therein lies its value. Use sketches to illustrate your ideas and launch them into the real world — even the simplest and crudest of sketches can easily achieve that. Sketch simple illustrations of your concepts so that they don’t exist only in your mind, hence allowing you to share these with your team- mates for further discussion and ideation. SOEN 6751 Sketching Don’t be inhibited about drawing ability — Practice simple symbols SOEN 6751 Sketching SOEN 6751 Storyboards Series of sketches showing how a user might progress through a task using the product (see last class) Communicate a concept by visualizing user interactions. SOEN 6751 Research-stage vs Prototype-stage Storyboard Research-Stage Storyboard Analyze your problem to fully understand what you are trying to solve and why it needs a solution. The story is the user experience when facing the problem you are trying to solve. By creating this storyboard, you will be able to see the component parts of your problem and gain a greater understanding of the problem itself. SOEN 6751 Research-stage vs Prototype-stage Storyboard Prototype-Stage Storyboard Once you have completed the ideation phase of your process, you are going to have a long list of possible ways to solve your problem. A great way to compare these alternative solutions is to create storyboard prototypes. Take each solution and draw it out. After creating many storyboard prototypes, you can compare the different solutions' storyboards to find out which solutions may be better than others. SOEN 6751 Storyboards For Prototyping Ensures that we know our users well enough and allows us to keep in mind the context of the solution we are designing. Useful for developing an empathic understanding of users — and for generating high-level ideation and discussions. Storyboards, however, are not very useful for fine-tuning the details of products, because the drawings tend to be more macroscopic in nature. SOEN 6751 SOEN 6751 Paper Interface Prototypes Useful at the early stages of prototyping for digital products. Can create paper interfaces by sketching them out, or by drawing and cutting out usable parts of a user interface (such as a text field or a dropdown menu, etc.). In evaluation, can step through the cards. SOEN 6751 Example Paper Prototypes SOEN 6751 Example Paper Prototypes SOEN 6751 Paper Prototypes Advantages Easy and cheap to produce, while they can provide you with many insights that can help you save money. When designing digital products, you may be tempted to create higher- fidelity prototypes directly on a computer, or start creating the product right away. When you use paper interfaces, however, you can uncover many areas for improvement, such as usability issues, that can help you make improvements to your design in the early stages, thus avoiding production costs. Usability studies show that early-stage changes are about 100 times cheaper than changes made in later stages of a product development process. SOEN 6751 Wireframes A wireframe is a low-fidelity design layout that serves three simple but exact purposes: It presents the information that will be displayed on the page It gives an outline of structure and layout of the page It conveys the overall direction and description of the user interface Shows most basic UI components Just like the blueprint of a building, a wireframe describes details clearly and specifically while giving the builders (you, other designers, developers, etc.) an overview of the project. SOEN 6751 Wireframes Represents the main groups of content and shows the general features of an interface. Contains gray boxes, lines, buttons, and sample text. How the interface works without getting into graphic details, allowing the team to assess the basics of user interaction early. The simplicity of a wireframe allows a designer to rework some features of a layout. SOEN 6751 WIREFRAMES - Examples SOEN 6751 WIREFRAMES - Examples SOEN 6751 Low-fi Vs Hi-fi Wireframe SOEN 6751 Wireframes Wireframes serve as a middle ground between pen-and- paper sketches and your first prototype. They help you plan the layout and interaction patterns of your users without distracting details like colours or copy. The proposed user journey should be clear without needing colour or shading or fancy menus. SOEN 6751 Wireframe Advantages With a wireframe, people pay more attention to functionality and the user experience than the aesthetic characteristics of the on-screen elements. Wireframes serve as a common language between designers, users, stakeholders, and developers. They’re complex enough to inform everyone but simple enough to not be bogged down by too much detail or design language SOEN 6751 Wizard of Oz The adventures of a young girl named Dorothy in the magical land of Oz. She befriends a Scarecrow, a Tin Woodman, and a Cowardly Lion, each seeking something they believe they lack: a brain, a heart, and courage, respectively. Together, they journey to the Emerald City to seek help from the Wizard of Oz. Along the way, they encounter various obstacles and face the wicked witch of the West. Ultimately, they discover that the power to achieve their desires was within them all along. SOEN 6751 Wizard of Oz PROTOTYPES Prototypes with faked functions — for instance, interactivity that comes from a human rather than an algorithm or software code, with users believing the latter is the case — that you can use to test with your users. Mimic some aspects of your product for the sake of prototyping it, allowing you to save time and resources. SOEN 6751 Wizard of Oz The most common example of Wizard of Oz prototypes is a prototype of a digital system, where the user is “tricked” into thinking the system responses are computer-driven, when they are actually human-controlled. E.g. a virtual assistant software in which a human, working on another computer, types the responses. SOEN 6751 Wizard of Oz SOEN 6751 Raikwar et al. 202T, IEEE VR and TVCG High-fidelity Prototyping Uses materials that you would expect to be in the final product Prototype looks more like the final system than a low- fidelity version High-fidelity prototypes can be developed by integrating existing hardware and software components Danger that users think they have a complete system. SOEN 6751 Mockups SOEN 6751 Mockups A mockup is a visual way of representing a product. While a wireframe mostly represents a product’s structure, a mockup shows how the product is going to look like. A mockup is either a mid or high-fidelity display of design. You cannot sketch the mockup. You might need to use a mockup tool (e.g. Marvel, InVision, or Moqups). SOEN 6751 InVision - Mockup SOEN 6751 Mockup SOEN 6751 Mockup SOEN 6751 Mockup Advantages When Wireframes are converted into Mockups, they fill the visual details such as colours, graphics, layouts and typography. The real beauty of Mockups is that they give a good idea of how the real product would look like upon its completion. Although they are not clickable, they still give you a rough idea of how the website may function. As compared to Wireframe which is just a visual draft, a Mockup is more close to the final version. To say the least, it bridges the gap between a wireframe and a (high fidelity) prototype. SOEN 6751 SOEN 6751 High Fidelity Prototype High fidelity representation of the final product which is meant to simulate user interaction. Clickable and thus allows the user to experience content and interactions in the interface. Very much like the final product itself but it’s not the final product! The difference between the final product and the prototype is mainly that the interface and the backend are not often tied together in the case of a prototype. This is done to reduce development costs until the UI is approved. SOEN 6751 High Fidelity Prototype SOEN 6751 SOEN 6751 Construction Software Development Kits (SDKs) Programming tools and components to develop for a specific platform, for example, iOS Includes: IDE, documentation, drivers, sample code, and application programming interfaces (APIs) Makes development much easier Examples: Amazon’s Alexa Skills Kit for voice-based services Apple’s ARKit for augmented reality Microsoft’s Kinect SDK for motion tracking SOEN 6751 Compromises In Prototyping For software-based prototyping, maybe there is a slow response? sketchy icons? limited functionality? “In the wild” prototypes operational but not necessarily robust. Two common types of compromise: Horizontal: Provides a wide range of functions, but with little detail Vertical: Provides a lot of detail for only a few functions Compromises in prototypes must not be ignored. Product needs engineering SOEN 6751 Construction: Physical Computing Build and code prototypes using electronics Toolkits available include Arduino LilyPad (for fabrics) Raspberry Pi MaKey MaKey Designed for use by wide range of people SOEN 6751 3D Printing SOEN 6751 Summary Prototyping may be low fidelity (such as paper-based) or high fidelity (such as software-based) Existing software and hardware helps create prototypes Generate prototypes from scenarios and use cases Physical computing kits and software development kits facilitate the transition from design to construction SOEN 6751 Two-cents.. If I had only one hour to Give me six hours to chop solve a problem, I would down a tree and I will spend up to two-third of spend the first that hour in attempting to four sharpening the ax. define what the problem is. Matthew Wakeman From book: UX Research Practical Techniques for Abraham Lincoln Designing Better Products SOEN 6751  SOEN 6751 Human Computer Interface Design Week 5 –Task analysis: Data Analysis, Questionnaires, Observations Anil Ufuk Batmaz Assistant Professor SOEN 6751 Overview Evaluation methods Cognitive walkthrough Heuristic evaluation Model based Based on prior studies. Data collection Five Key Issues Data Recording Interviews Questionnaires SOEN 6751 Step by step… KUDOS! You have your prototype now. How you are going to evaluate your prototype: Choose an evaluation method Collect data Analyze data … Start from the beginning. SOEN 6751 WHY, WHAT, WHERE, AND WHEN TO EVALUATE Iterative design and evaluation is a continuous process that examines: Why: To determine whether our hypothesis is true, our product does what’s intended or the better of a number of different designs. To check users’ requirements and confirm that users can utilize the product and that they like it? What: A conceptual model, early and subsequent prototypes of a new system, more complete prototypes, and a prototype to compare with competitors’ products or other designs. Where: In natural, in-the-wild, and laboratory settings When: Throughout design; finished products can be evaluated to collect information to inform new products SOEN 6751 Evaluation Evaluates both design and implementation Goals: Test a hypothesis, usability, and functionality of system Assess effect of interface and interaction design on user Identify specific problems Occurs in laboratory, field and/or in collaboration with users Should be considered at all stages in the design life cycle SOEN 6751 Cognitive Walkthrough Proposed by Polson et al. (1992) and for web by Blackmon et al. (2002) Evaluates a design on how well it supports a user in learning tasks. Used to evaluate a product’s usability. Usually performed by an expert in cognitive psychology. Expert 'walks through' design to identify potential problems using psychological principles. Forms used to guide analysis. SOEN 6751 A Cognitive Walkthrough Example 1. Identify the user goal you want to examine. 2. Identify the tasks you must complete to accomplish that goal. 3. Document the experience while completing the tasks. SOEN 6751 1. Identify the user goal you want to examine For each task walkthrough considers What impact will interaction have on user? What cognitive processes are required? What learning problems may occur? Analysis focuses on goals and knowledge: does the design lead the user to generate the correct goals? SOEN 6751 Problems To Look For… Question assumptions about what the users will be thinking. Identify controls that are obvious to the design engineer but may be hidden from the user’s point of view Suggest difficulties with labels and prompts Note inadequate feedback Uncover shortcomings in the current specification (i.e. not in the interface itself but in the way that it is described) Help ensure that the specs are complete SOEN 6751 Performing The Walkthrough Keep four key questions in mind: Are users thinking what the designers thought they’d be thinking? Will users see the control (button, menu, switch, etc.) for the action? Once users find the control, will they recognize that it produces the effect they want? After the action is taken, will users understand the feedback they get, so they can go on to the next action with confidence? SOEN 6751 Class Activity -14 You are hosting a dinner party. Beforehand, you ask everyone invited to send me 10 songs they love. Then, you use Spotify to create a playlist of those songs to play during the party. As a user, your goal is to…. Two minutes SOEN 6751 2. Identify the tasks you must complete to accomplish that goal GOAL: CREATE A PLAYLIST GOAL: ADD A TRACK TO THE PLAYLIST Open Spotify web player Click search icon Enter user name in user name field Enter track name into the field Enter password in password field Click tracks tab Click the login button Find track in results Click the your library section Hover over track Click the new playlist button Click “…” Type a name into the playlist name Click “add to playlist” field Select playlist Click the create button Note: this is one possible path of accomplishing these goals. Spotify has a number of ways to accomplish these goals. Ideally, SOEN 6751 you’d identify the optimal path and tasks for each interface. 3. Document the experience while completing the tasks. Will users understand how to start the task? Are the controls conspicuous? Will users know the control is the correct one? Was there feedback to indicate you completed (or did not complete) the task? SOEN 6751 SOEN 6751 Heuristic Evaluation Usability criteria (heuristics) are identified They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines. Design examined by experts to see if these are violated. Heuristic evaluation ‘debugs’ design. SOEN 6751 1. Visibility of system status System should keep users informed about what is going on, through appropriate feedback within reasonable time. SOEN 6751 2. Match between system and the real world The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system- oriented terms. SOEN 6751 3. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. SOEN 6751 4. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. SOEN 6751 5. Error prevention Eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. Slips and mistakes: Slips are unconscious errors caused by inattention. Mistakes are conscious errors based on a mismatch between the user’s mental model and the design. SOEN 6751 Class Activity -15 Give examples for error prevention in mobile apps 2 minutes SOEN 6751 6. Recognition rather than recall Minimize user's memory load by making objects, actions, and options visible. SOEN 6751 Belem Tower, Lisbon 7. Flexibility and efficiency of use Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. SOEN 6751 8. Aesthetic and minimalist design Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility. SOEN 6751 9. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. SOEN 6751 10. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. SOEN 6751 Heuristic Evaluation Method 3-5 inspectors Usability engineers, end users, double experts... Inspect interface in isolation (~1–2 hours for simple interfaces) Compare notes afterwards Single evaluator only catches ~35% of usability problems, 5 evaluators catch 75% SOEN 6751 Problems found by a single inspector Average over six case studies 35% of all usability problems 42% of the major problems 32% of the minor problems Varies according to difficulty of the interface being evaluated the expertise of the inspectors Average problems found by: novice evaluators - no usability expertise - 22% regular specialists - expertise in usability - 41% double specialists - experience in both usability and the particular kind of interface being evaluated – 60% Trade-off novices poorer, but cheaper! SOEN 6751 Problems found by multiple inspectors 3-5 evaluators find 66-75% of usability problems Different people find different usability problems Only modest overlap between the sets of problems found SOEN 6751 SOEN 6751 SOEN 6751 Model Based Evaluation Review-based evaluation Results from the literature used to support or refute parts of design. Care needed to ensure results are transferable to new design. Model-based evaluation Cognitive models used to filter design options e.g. GOMS prediction of user performance. SOEN 6751 Cognitive Models Used to explain and predict user behaviour at the interface. Based on theories of behaviour 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 cognition SOEN 6751 Human Processor Model Cognitive modeling method developed by (Card, Moran, & Newell (1983)) used to calculate how long it takes to perform a certain task. Uses the cognitive, perceptual, and motor processors along with the visual image, working memory, and long term memory storages. Each processor has a cycle time and each memory has a decay time. By following the connections and using associated cycle or decay times, the time it takes a user to perform a certain task can be calculated. SOEN 6751 HPM SOEN 6751 Keystroke-level model (CARD, MORAN & NEWELL (1980)) A simple model for the time it takes a user to perform a task with a given method on an interactive computer system SOEN 6751 KLM MODEL K (keystroke or button press): it is the most frequent operator and means keys and not characters (so e.g. pressing SHIFT is a separate K operation). The time for this operator depends on the motor skills of the user and is determined by one-minute typing tests, where the total test time is divided by the total number of non-error keystrokes. P (pointing to a target on a display with a mouse): this time differs depending on the distance to the target and the size of the target, but is held constant. H (homing the hand(s) on the keyboard or other device): This includes movement between any two devices as well as the fine positioning of the hand. D (drawing (manually) nD straight-line segments with a total length of D(nD, lD) cm): where nD is the number of the line segments drawn and lD is the total length of the line segments. M (mentally preparing for executing physical actions): denotes the time a user needs for thinking or decision making. The number of Ms in a method depends on the knowledge and skill of the user. Heuristics are given to help decide where an M should be placed in a method. SOEN 6751 KLM MODEL SOEN 6751 SOEN 6751 KLM Limitations/Drawbacks It measures only one aspect of performance: time, which means execution time and not the time to acquire or learn a task. It considers only expert users. Generally, users differ regarding their knowledge and experience of different systems and tasks, motor skills and technical ability. It considers only routine unit tasks. The method has to be specified step by step. The execution of the method has to be error-free. The mental operator aggregates different mental operations and therefore cannot model a deeper representation of the user’s mental operations (If this is important can use GOMS model). SOEN 6751 Goal Operator Method Selection (CARD ET AL, 1983) Goal decomposition and hierarchies: Goals are symbolic structures that define a state of affairs to be achieved and determinate a set of possible methods by which it may be accomplished Operators are elementary perceptual, motor or cognitive acts, whose execution is necessary to change any aspect of the user’s mental state or to affect the task environment Methods describe a procedure for accomplishing a goal Selection Rules are needed when a goal is attempted, there may be more than one method available to the user to accomplish it. SOEN 6751 SOEN 6751 Class Activity -16 Most frequently used operations in mobile games are … Consider hand gestures or movements, etc… 2 minutes SOEN 6751 Touch-Level Model Evolving KLM-GOMS for Touchscreen and Mobile Devices (Rice & Lartigue, 2014) Introduce new operators and other modifications to KLM GOMS to accommodate modern touchscreen interfaces SOEN 6751 Touchscreens Fingerstroke time estimates for touchscreen-based mobile gaming interaction (Lee et al. 2016) Model of the four most frequently used operations in mobile games – ‘tapping’, ‘pointing’, ‘dragging’, and ‘flicking’ – within the purview of Fitts’s law. SOEN 6751 Fitts’s Law Predictive model of human psychomotor behaviour primarily used in human–computer interaction and ergonomics. The original 1954 paper by Paul Fitts proposed a metric to quantify