HCI Final Reviewer PDF

Chapter 0 HCI Practices and Trends Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Learning Objectives In th...

Chapter 0 HCI Practices and Trends Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Learning Objectives In this lecture, you will learn: – Define what HCI is – Identify the different terms in HCI – Discuss the reason why HCI is a worthwhile study area – Analyze good and poor design – Describe the difference between useful and usable – Discuss the Practices and Trends in HCI  Human Computer Interaction (HCI) study of the interaction between people and computer-based systems concern with the physical, psychological and theoretical aspects of this process Human I/O channels –> Memory –> Reasoning and problem solving; Computer Devices –> Memory –> processing and networks; Interaction Models –> frameworks –> Ergonomics –> styles –> elements –> interactivity -> Paradigms  Studying human-computer interaction's main purpose is to develop techniques that will enhance the way users can interact with their computers and make them more intuitive. The use of physical devices like keyboards, mouse for HCI hinders the intuitiveness and naturalness of the interface as there is a strong barrier between the user and the computer. Considerations for all types of users and their experiences matter during the development of techniques that will enhance user experiences.  Why is HCI a worthwhile area to study? There are a lot of reasons for studying HCI. The world of information technology is becoming more competitive either online or offline, it is no longer sufficient to use the functionality of the technology and to add more features that will not be useful for a long period of time. The aim is how best to design interactive systems that are both productive and pleasurable to use by an intended user. The best user experience is key to arriving at the best design for targeted users.  Usability is the highlighted term in HCI. HCI is essentially a people-centric or user-centric discipline. Safety and functionality are always primary, but there are other things to consider, including effectiveness, efficiency, and also an aspect of human experience like enjoyability. And in today's highly competitive digital markets, HCI design can be the difference between success and failure. Thus, it became part of the growing demands for computing science.  Good HCI design will encourage people to use a mobile app over another or to purchase a specific smartphone or tablet. A well-designed HCI system design can improve sales and service levels, as well as boost customer satisfaction by reducing those frustrating call waiting times for product support. HCI is more integrated into our daily lives than ever before. In fact, it’s almost everywhere. It has become such an essential part of the modern experience and technological advancement that some of us struggle to imagine living without our devices.  Are you nomophobic? A combination of the words 'no', 'mobile', and 'phobia', nomophobia is a modern phenomenon highlighting a very new type of relationship between humans and machines.  What is useful or usable? For something to be useful, it should allow a user to accomplish a task or objective. It is important that there are a number of potential users that find a product useful to prove that it is really useful. Something that is not useful tends to be unacceptable to any user. Useful means that a system supports users’ objectives Usable means that it supports these objectives in easy-to-use ways Accessible means that it can be used by the full range of intended users.  Trends in HCI With the development of ubiquitous computing, current user human-computer Interaction is not just limited to keyboard and mouse interaction. Direct use of hands as an input device is an attractive method for providing natural HCI rather than traditional text-based interfaces through graphical-based user interfaces  1. Eye Tracking Eyes can reveal a lot about a person’s intentions, thoughts, and actions, as they are good indicators of what we’re interested in. It can help in picking up the cues that are subconsciously given by the other person and hence, enhancing the overall interaction. The most amazing part about these micro-gestures and expressions is that they are totally intuitive.  2. The Dramatic Shift and the World of Sensors Right from the 19th-century Jacquard loom that changed the way a machine could work, to the unpredictable Kinect and then Siri in 2011, the world has clearly witnessed a dramatic shift. Today, sending commands to machines is far more than just about the keyboard-mouse paradigm. The way people interact with devices is changing owing to several affordable sensors.  Review Questons Fast forward three to five years into the future, how do you see the status of HCI? REFERENCE: www.id-book.com  Chapter 1 WHAT IS INTERACTION DESIGN? Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Learning Objectives In this lecture, you will learn: – Explain the difference between good and poor interaction design. – Describe what interaction design is and how it relates to human-computer interaction and other fields. – Explain the relationship between the user experience and usability. – Introduce what is meant by accessibility and inclusiveness in relation to human computer interaction. – Describe what and who is involved in the process of interaction design.  Bad designs Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button www.baddesigns.com People do not make same mistake for the labels and buttons on the top row. Why not?  Why is this vending machine so bad? Need to push button first to activate reader Normally insert bill first before making selection Contravenes well known convention www.baddesigns.com  Good design Marble answering machine (Bishop, 1995) Based on how everyday objects behave Easy, intuitive and a pleasure to use Only requires one-step actions to perform core tasks  Good and bad design Why is the TiVo remote much better designed than standard remote controls? – Peanut shaped to fit in hand – Logical layout and color-coded, distinctive buttons – Easy to locate buttons  Dilemma Which is the best way to interact with a smart TV? Why? Pecking using a grid keyboard via a remote control Swiping across 2 alphanumeric rows using a touchpad on remote control Voice control using remote or smart speaker  What to design Need to take into account: – Who the users are – What activities are being carried out – Where the interaction is taking place Need to optimize the interactions users have with a product: – So that they match the users’ activities and needs  What is interaction design? “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) Goals of interaction design Develop usable products – Usability means easy to learn, effective to use and provide an enjoyable experience Involve users in the design process  Which kind of design? Number of other terms used emphasizing what is being designed, e.g. – user interface design, software design, user-centered design, product design, web design, experience design (UX) Interaction design is the umbrella term covering all of these aspects – fundamental to all disciplines, fields, and approaches concerned with researching and designing computer- based systems for people Interaction design  Relationship between ID, HCI and other fields Academic disciplines contributing to ID: – Psychology – Social Sciences – Computing Sciences – Engineering – Ergonomics – Informatics  Relationship between ID, HCI and other fields Design practices contributing to ID: – Graphic design – Product design – Artist-design – Industrial design – Film industry  Relationship between ID, HCI and other fields Interdisciplinary fields that ‘do’ interaction design: – HCI – Ubiquitous Computing – Human Factors – Cognitive Engineering – Cognitive Ergonomics – Computer Supported Co-operative Work – Information Systems  Working in multidisciplinary teams Many people from different backgrounds involved Different perspectives and ways of seeing and talking about things Benefits – more ideas and designs generated Disadvantages – difficult to communicate and progress forward the designs being create  Interaction design in business Large number of ID consultancies, examples of well known ones include: – Nielsen Norman Group: “help companies enter the age of the consumer, designing human-centered products and services” – Cooper: “From research and product to goal-related design” – IDEO: “creates products, services and environments for companies pioneering new ways to provide value to their customers”  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 design for a user experience  Defining User Experience how users perceive a product, such as whether a smartwatch is seen as sleek or chunky, and their emotional reaction to it, such as whether people have a positive experience when using it. (Hornbæk and Hertzum, 2017) Hassenzahl’s (2010) model of the user experience – pragmatic - how simple, practical, and obvious it is for the user to achieve their goals – hedonic - how evocative and stimulating the interaction is to users  Why was the iPod user experience such a success? Quality user experience from the start Simple, elegant, distinct brand, pleasurable, must have fashion item, catchy names, cool, etc.  Core characteristics of interaction design Users should be involved through the development of the project Specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project Iteration is needed through the core activities  Why? Help designers: – understand how to design interactive products that fit with what people want, need and may desire – appreciate that one size does not fit all e.g., teenagers are very different to grown-ups – identify any incorrect assumptions they may have about particular user groups e.g., not all old people want or need big fonts – be aware of both people’s sensitivities and their capabilities  Accessibility and Inclusiveness Accessibility – the extent to which an interactive product is accessible by as many people as possible – focus is on people with disabilities, e.g. Android OS, Apple VoiceOver Inclusiveness –making products and services accommodate the widest possible number of people – e.g. smartphones designed for all and made available to everyone regardless of their disability, education, age, or income  Disabilities Whether someone is disabled changes over time with age, or recovery from an accident The severity and impact of an impairment can vary over the course of a day or in different environmental conditions Disabilities can result because technologies are designed to necessitate a certain type of interaction that is impossible for someone with an impairment  Understanding Disability Disabilities can be classified as: – Sensory impairment (such as loss of vision or hearing) – Physical impairment (having loss of functions to one or more parts of the body after a stroke or spinal cord injury) – Cognitive (e.g. learning impairment or loss of memory/cognitive function due to old age) Each type can be further defined in terms of capability – e.g. someone might have only peripheral vision, be color blind, or have no light perception Impairment can be categorized: – permanent (e.g., long-term wheelchair user) – temporary (e.g. after an accident or illness) – situational (e.g. a noisy environment means a person can’t hear)  Being Cool About Disability Prosthetics can be designed to move beyond being functional (and often ugly) to being desirable and fashionable People now refer to “wearing their wheels,” rather than “using a wheelchair” Fashionable leg cover designed by Alleles Design Studio  Cultural Differences 5/21/2015 versus 21/5/2015? – Which should be used for international services and online forms? Why is it that certain products, like smartphones, universally accepted by people from all parts of the world whereas websites are reacted to differently by people from different cultures?  Usability Goals Effective to use Efficient to use Safe to use Have good utility Easy to learn Easy to remember how to use  User Experience Goals Desirable aspects Satisfying Helpful Fun Enjoyable Motivating Provocative Engaging Challenging Surprising Pleasurable Enhancing sociability Rewarding Exciting Supporting creativity Emotionally fulfilling Entertaining Cognitively stimulating Experiencing flow Undesirable aspects Boring Unpleasant Frustrating Patronizing Making one feel guilty Making one feel stupid Annoying Cutesy Childish Gimmicky  Usability and User experience goals Selecting terms to convey a person’s feelings, emotions, etc., can help designers understand the multifaceted nature of the user experience How do usability goals differ from user experience goals? Are there trade-offs between the two kinds of goals? – e.g. can a product be both fun and safe? How easy is it to measure usability versus user experience goals?  Design Principles Generalizable 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-sense  Visibility This is a control panel for an elevator How does it work? Push a button for the floor you want? Nothing happens. Push any other button? Still nothing. What do you need to do? www.baddesigns.com It is not visible as to what to do!  Visibility …you need to insert your room card in the slot by the buttons to get the elevator to work! How would you make this action more visible? make the card reader more obvious provide an auditory message, that says what to do (which language?) provide a big label next to the card reader that flashes when someone enters make relevant parts visible www.baddesigns.com make what has to be done obvious  What do I do if I am wearing black? Invisible automatic controls can make it more difficult to use  Feedback Sending information back to the user about what has been done Includes sound, highlighting, animation and combinations of these – e.g. when screen button clicked on provides sound or red highlight feedback: “ccclichhk”  Constraints Restricting the possible actions that can be performed Helps prevent user from selecting incorrect options Physical objects can be designed to constrain things – e.g. only one way you can insert a key into a lock  Logical or ambiguous design? Where do you plug the mouse? Where do you plug the keyboard? – top or bottom connector? www.baddesigns.com Do the color coded icons help?  How to design them more logically (i) A provides direct adjacent mapping between icon and connector (ii) B provides color coding www.baddesigns.com to associate the connectors with the labels www.baddesigns.com  Consistency Design interfaces to have similar operations and use 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 Main benefit is consistent interfaces are easier to learn and use  When consistency breaks down What happens if there is more than one command starting with the same letter? – e.g. save, spelling, select, style Have to find other initials or combinations of keys, thereby breaking the consistency rule – e.g. ctrl+S, ctrl+Sp, ctrl+shift+L Increases learning burden on user, making them more prone to errors  Internal and external consistency Internal consistency refers to designing operations to behave the same within an application – Difficult to achieve with complex interfaces External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices – Very rarely the case, based on different designer’s preference  Keypad numbers layout A case of external inconsistency (a) phones, remote controls (b) calculators, computer keypads 1 2 3 7 8 9 4 5 6 4 5 6 7 8 9 1 2 3 0 0  Affordances: to give a clue Refers to an attribute of an object that allows people to know how to use it – e.g. a mouse button invites pushing, a door handle affords pulling Norman (1988) used the term to discuss the design of everyday objects Since has been much popularised in interaction design to discuss how to design interface objects – e.g. scrollbars to afford moving up and down, icons to afford clicking on  What does ‘affordance’ have to offer interaction design? Interfaces are virtual and do not have affordances like physical objects Norman argues it does not make sense to talk about interfaces in terms of ‘real’ affordances Instead interfaces are better conceptualized as ‘perceived’ affordances – learned conventions of arbitrary mappings between action and effect at the interface – some mappings are better than others  Review Questions 1. What is the effect of design (good/bad) in software development? 2. In designing software products, whose opinion should you follow? Programmer? User? Why?  Key points Interaction design is concerned with designing interactive products to support how people communicate and interact in their everyday and working lives It is concerned with how to create quality user experiences for services, devices and interactive products It is multidisciplinary, involving many inputs from wide-reaching disciplines and fields Optimizing the interaction between users and interactive products requires consideration of a number of interdependent factors, including 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. REFERENCE: www.id-book.com  Chapter 2 The Process of Interaction Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Learning Objectives In this lecture, you will learn: – Reflect on what interaction design involves. – Explain some of the advantages of involving users in development. – Explain the main principles of a user-centered approach. – Discuss the four basic activities of interaction design and how they are related in a simple lifecycle model.  What is involved in Interaction Design? 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 Four approaches: user-centered design, activity- centered design, systems design, and genius design  The double diamond of design Source: Adapted from https://www.designcouncil.org.uk/news-opinion/design-process- what-double-diamond  Understanding the problem space Explore: – What is currently the 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  Importance of involving users Expectation management – Realistic expectations – No surprises, no disappointments – Timely training – Communication, but no hype Ownership – Make the users active stakeholders – More likely to forgive or accept problems – Can make a big difference to acceptance and success of product  Degrees of user involvement 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 individual or activities Online contributions from thousands of users – Online Feedback Exchange (OFE) systems – Crowdsourcing design ideas – Citizen science User involvement after product release  What is a user- centered approach? User-centered approach is based on: – Early focus on users and tasks: directly studying cognitive, behavioral, anthropomorphic & attitudinal characteristics – Empirical measurement: users ’ reactions and performance to scenarios, manuals, simulations & prototypes are observed, recorded and analysed – Iterative design: when problems are found in user testing, fix them and carry out more tests  Four basic activities of Interaction Design 1. Discovering requirements 2. Designing alternatives 3. Prototyping alternative designs 4. Evaluating product and its user experience throughout  A simple interaction design lifecycle model Exemplifies a user-centered design approach  Google Design Sprints (Knapp et al, 2016) Source: www.agilemarketing.net/google-design-sprints/ Used courtesy of Agile Marketing  Research in the Wild (Rogers and Marshall, 2017) A framework for research in the wild studies Source: Rogers and Marshall, 2017, p6. Used courtesy of Morgan & Claypool  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  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  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  How to generate alternatives 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-fertilisation 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  How to choose among alternatives Interaction design focuses on externally visible and measurable behaviour Technical feasibility Evaluation with users or with peers – Prototypes not static documentation because behaviour is key A/B Testing – Online method to inform choice between alternatives – Nontrivial to set appropriate metrics and choose user group sets Quality thresholds: – Different stakeholder groups have different quality thresholds – Usability and user experience goals lead to relevant criteria  How to integrate interaction design activities within other models Integrating interaction design activities in lifecycle models from other disciplines needs 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 structure Performance Task 1  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 & measurable usability criteria – Iterative design REFERENCE: www.id-book.com  Systems Requirement Analysis Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Learning Objectives In this lecture, you will learn: – Define system requirements in greater detail; – Describe the nature and type of requirements and their characteristics; – Introduce the format of system requirements – Define the characteristics of a good requirement – Describe the sources for obtaining the original requirements  What Is a System Requirement? A system requirement is a necessary attribute or function that a system must have or provide. It is a formal statement to identify a capability, characteristic, or quality that a system must have to provide value and utilities to system users.  What Is a System Requirement? The requirements: – are the driving forces for the design activities; – requirements define the need to develop the systems, – describe the system functionality, and – also regulate system engineering efforts for the development of the system.  Types of Requirements 1. Functional requirements 2. Performance requirements 3. Constraint requirements 4. Verification requirements 1. Functional requirements - also referred as a WHAT requirement; for example, the automated teller machine (ATM) shall enable customers to deposit cash or checks and withdraw up to x dollars at a time from their checking accounts on a 24 h a day and 7 days a week basis. 2. Performance requirements - specifies HOW WELL the system or systems function shall be performed; for example, the automobile system shall start the engine within 6s after the driver turns the ignition key under normal weather conditions; the system shall have an operational availability (Ao) of 99.99%. 3. Constraint requirements – focus on limitations on the design or construction of the system (part of the results of feasibility analysis ad strategic planning). For example, “The automobile system shall use both grid electricity and B20 biodiesel as the energy source.” 4. Verification requirements - define what and how is intended to verify or test the functional requirements for acceptance of the system/components. For example, system operational availability shall be calculated using the definition given by MIL-STD-721, conducted by a government-certified contractor; the demonstration shall show that the system, under the defined operational environmental conditions, shall have an operational availability of at least 99%.  Characteristics of Systems Requirements Requirements are the key to project success, as the quality of the requirements determines the quality of the understanding of the systems need. Writing requirements may look straightforward, but they are a real challenge. As a systems engineer, one should know what a good requirement should look like. Although different types of systems vary a great deal in complexity and in nature, the good news is that no matter what type of system you are working on, the criteria for good requirements are essentially the same.  Characteristics of Systems Requirements 1. A good requirement is correct. …being correct means that it is technically feasible, legal, achievable. 2. A good requirement is complete …should contain the complete information that in and of itself. pertains to the requirement itself. 3. A good requirement is clear and …should not contain any ambiguous meanings that precise cause confusion for the people who read them. 4. A good requirement is consistent …should use the unified language standard, syntax, with other requirements and glossary across all the requirements for the system. 5. A good requirement is verifiable. …always ask this question: Is there any way we can determine that the system meets this requirement or not? If we cannot provide a good answer to this question, then the requirement is considered not to be verifiable. 6. A good requirement is traceable …should be upward and downward traceable; we should know where it comes from and where it goes from here.  The following list provides a general set of guidelines for developing good requirements (Telelogic 2003): 1. Avoid using conjunctions (and/but/or) to make multiple requirements. 2. Avoid let-out phases, such as “except,” “unless,” “otherwise,” and so on. 3. Use simple sentences. 4. Use limited vocabulary. (fewer then 500 words) 5. Include information about the type of users in the requirements, if possible. 6. A focus on the results is to be provided for the users in the requirement statement. 7. The desired results/outcomes should be stated in verifiable criteria. 8. Avoid using fuzzy, vague, and general words to minimize confusion and misunderstanding. Examples of such words are “flexible,” “fault tolerant,” “high fidelity,” “adaptable,” “rapid” or “fast,” “adequate,” “user friendly,” “support,” “maximize,” and “minimize.”  Requirements Example A single pilot shall be able to control the aircraft’s angle of climb with one hand. The pilot shall be able to view the airspeed in daytime and nighttime conditions.  Requirements Capture Technique Use a computer- based software Apply a variety tool to document of data and manage the collection requirements. Identify the requirement techniques. Identify the sources with stakeholders for users’ the system. involvement. Good requirements come from good sources. To determine the requirement…Sources…  Techniques that are commonly used in capturing requirements Survey Questionnaire Interview Techniques that are commonly used in capturing requirements Observation Study of documents and reports: Techniques that are commonly used in capturing requirements Study of Similar System  Review Questions 1. What is a requirement? 2. What are the characteristics of a good requirement? 3. What are the sources of a requirement?  Key points Requirements are the driving forces of systems design; spending time and effort to develop a good complete set of system requirements can save designers time, cost, and effort in the long run. The characteristics of a good requirement were given to show how to write a good requirement. REFERENCES: Systems Engineering Design Principles and Model by Dahai Liu (2016)  Use Case Model Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC  What is a use case? A requirements analysis concept A case of a use of the system/product Describes the system's actions from a the point of view of a user Tells a story – A sequence of events involving – Interactions of a user with the system Specifies one aspect of the behavior of a system, without specifying the structure of the system – Is oriented toward satisfying a user's goal  Scenarios and Use Cases Use cases are standard design (UML – Unfied Modeling Language) A scenario is an informal description about how the system will be used by users. It provides a natural way for explaining to the stakeholders: – what will be designed and how the systems will be used, – facilitating communication between the users and designers, – exploring the intended functions, context, and constraints.  A commonly used method includes the following steps: 1. Identify the actors and their goals. 2. Define the scenarios to achieve the goals. The scenario is described as a numbered list of steps that involves both actors and system (subsystem or system components) to achieve the goals. Each step is written as a simple straightforward statement of the interaction between the actors and the system. 3. Make notes of extension of the use case extension is the condition that results in different courses of actions or alternatives from the normal course of actions.  How do we describe use cases? Textual or tabular descriptions User stories Diagrams  Use Case Descriptions actors - something with a behavior or role, e.g., a person, another system, organization. scenario - a specific sequence of actions and interactions between actors and the system, a.k.a. a use case instance use case - a collection of related success and failure scenarios, describing actors using the system to support a goal.  What is an Actor? Include all user roles that interact with the system Include system components only if they responsible for initiating/triggering a use case. For example, a timer that triggers sending of an e-mail reminder – primary - a user whose goals are fulfilled by the system importance: define user goals – supporting - provides a service (e.g., info) to the system importance: clarify external interfaces and protocols – offstage - has an interest in the behavior but is not primary or supporting, e.g., government importance: ensure all interests (even subtle) are identified and satisfied  Finding Actors External objects that produce/consume data: – Must serve as sources and destinations for data – Must be external to the system  Finding Actors Ask the following questions: Who are the system’s primary users? Who requires system support for daily tasks? Who are the system’s secondary users? What hardware does the system handle? Which other (if any) systems interact with the system in question? Do any entities interacting with the system perform multiple roles as actors? Which other entities (human or otherwise) might have an interest in the system's output?  Use Case Diagram Objective Built in early stages of development Purpose – Specify the context of a system – Capture the requirements of a system – Validate a systems architecture – Drive implementation and generate test cases – Developed by analysts and domain experts Elements of use case diagram: Actor Elements of use case diagram: Use Case Elements of use case diagram: Other details Linking Use Cases 1. Generalization Generalization Example Generalization Example 2. Include More about Include  Include relationship Include relationship – a standard case linked to a mandatory use case. Example: to Authorize Car Loan (standard use case), a clerk must run Check Client’s Credit History (include use case). Include Example 3. Extend  Extend relationship Extend relationship – linking an optional use case to a standard use case. Extend relationship – Example: Register Course (standard use case) may have Register for Special Class (extend use case) – class for non-standard students, in unusual time, with special topics, requiring extra fees…).  Use case 1. The use inserts his/her bank card. 2. The system prompts for the user’s account personal identification number (PIN). 3. The user enters the PIN. 4. The system verifies the PIN. 5. The system displays a menu of choices. 6. The user chooses the “check balance” option. 7. The system displays the account type menu of choices (checking or saving). 8. The user chooses an account type from the menu. 9. The system retrieves the account information. 10. The system displays the account information. 11. The user quits from the account information. 12. The system returns to Step 5.  Extension Use case 4.1 If PIN is not valid 4.1.1 The system displays error message 4.1.2 The system returns to Step 3 REFERENCES: Use Case Diagram.pdf https://warren2lynch.medium.com/use-case- tutorial-for-dummies-8cf426043710  Chapter 3 Conceptualizing Interaction Design Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Learning Objectives In this lecture, you will learn: – Explain how to conceptualize interaction. – Describe what a conceptual model is and how to begin to formulate one. – Discuss the use of interface metaphors as part of a conceptual model. – Outline the core interaction types for informing the development of a conceptual – model. – Introduce paradigms, visions, theories, models, and frameworks informing interaction design.  Conceptualizing design Proof of concept – conceptualize what the proposed product will do Why the need to conceptualizing design? to scrutinize vague ideas and assumptions about the benefits of the proposed product in terms of their feasibility how realistic is it to develop? how desirable and useful?  Assumptions and claims Write down your assumptions and claims when coming up with a new design Try to defend and support them by what they will provide Those that are difficult to articulate – can highlight what ideas are vague or unrealistic – identify human activities and interactivities that are problematic Iteratively work out how the design ideas might be improved  What is an assumption? Taking something for granted when it needs further investigation – e.g. people will want to watch TV while driving http://www.ibiblio.org/jlillie/cooltown/lillie.htm  What is a claim? Stating something to be true when it is still open to question – e.g. “a multimodal style of interaction for controlling GPS — one that involves speaking while driving — is safe”  Activity: How will enabling robot waiters to speak to customers enhance their experience? Source: Xinhua/Guo Cheng, www.xinhuanet.com/english/2015-12/23/c_134945262.htm  What is the problem being addressed? The benefits: – the robot could take orders and entertain customers by having a conversation with them – could make recommendations for different customers, such as restless 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.”  Working through assumptions Many unknowns need to be considered in the initial stages of a design project – where do your ideas come from? – What sources of inspiration were used? – Is there any theory or research that can be used to inform them? During the early ideation process – ask questions, reconsider assumptions, and articulate concerns  A framework for analysing the problem space Are there problems with an existing product or user experience? If so, what are they? Why do you think there are problems? How do you think your proposed design ideas might overcome these? If you are designing for a new user experience how do you think your proposed design ideas support, change, or extend current ways of doing things?  Activity What were the assumptions and claims made about watching 3D TV? Figure 4.1 A family watching 3D TV Source: Andrey Popov/Shutterstock.com  Assumptions and claims: how realistic? 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 of the new experience  Benefits of conceptualising Orientation – enables design teams to ask specific questions about how the conceptual model will be understood Open-minded – prevents design teams from becoming narrowly focused early on Common ground – allows design teams to establish a set of commonly agreed terms  From problem space to design space Having a good understanding of the problem space can help inform the design space – e.g. what kind of interface, behavior, functionality to provide But before deciding upon these it is important to develop a conceptual model  Conceptual model A conceptual model is: “…a high-level description of how a system is organized and operates” (Johnson and Henderson, 2002, p26) 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 interrelations  Components Metaphors and analogies – understand what a product is for and how to use it for an activity Concepts that people are exposed to through the product – task–domain objects, their attributes, and operations (e.g. saving, revisiting, organizing) Relationship and mappings between these concepts  First steps in formulating a conceptual model What will the users be doing when carrying out their tasks? How will the system support these? What kind of interface metaphor, if any, will be appropriate? What kinds of interaction modes and styles to use? - always keep in mind when making design decisions how the user will understand the underlying conceptual model  Conceptual models Many kinds and ways of classifying them The best conceptual models are often those that appear – obvious and simple – the operations they support are intuitive to use  Interface metaphors Interface designed to be similar to a physical entity but also has own properties – e.g. desktop metaphor, web portals Can be based on activity, object or a combination of both Exploit user’s familiar knowledge, helping them to understand ‘the unfamiliar’ Conjures up the essence of the unfamiliar activity, enabling users to leverage this to understand more aspects of the unfamiliar functionality  Examples of interface metaphors Conceptualizing what users are doing, – e.g. surfing the web A conceptual model instantiated at the interface, – e.g. the desktop metaphor Visualizing an operation, e.g. an icon of a shopping cart for placing items into  The card metaphor The card is a very popular UI Why?: Has familiar form factor Can easily be flicked through, sorted, and themed Can structure content into meaningful chunks – similar to how paragraphs are used to chunk a set of related sentences into distinct sections Material properties giving appearance of surface of paper Figure 4.1 Google Now card for restaurant recommendation in Germany Source: Johannes Shonning: [email protected].  Benefits of interface metaphors 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 users  Problems with interface metaphors Break conventional and cultural rules – e.g. recycle bin placed on desktop Can constrain designers in the way they conceptualize a problem space Conflict with design principles Forces users to only understand 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  Activity Describe the components of the conceptual model underlying most online shopping websites, e.g. – Shopping cart – Proceeding to check-out  Interaction types Instructing – issuing commands and selecting options Conversing – interacting with a system as if having a conversation Manipulating – interacting with objects in a virtual or physical space by manipulating them Exploring – moving through a virtual environment or a physical space Responding – the system initiates the interaction and the user chooses whether to respond  1. Instructing Where users instruct a system and tell it what to do – e.g. tell the time, print a file, save a file Very common conceptual model, underlying a diversity of devices and systems – e.g. word processors, VCRs, vending machines Main benefit is that instructing supports quick and efficient interaction – good for repetitive kinds of actions performed on multiple objects Which is easiest and why?  2. Conversing Underlying model of having a conversation with another human Range from simple voice recognition menu- driven systems to more complex ‘ natural language’ dialogs – Examples include timetables, search engines, advice- giving systems, help systems – Also virtual agents, chatbots, toys and pet robots designed to converse with you  Pros and cons of conversational model 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 scared Misunderstandings can arise when the system does not know how to parse what the user says – e.g. voice assistants can misunderstand what children say www.id-book.com  3. Manipulating Involves dragging, selecting, opening, closing and zooming actions on virtual objects Exploit’s users’ knowledge of how they move and manipulate in the physical world Can involve actions using physical controllers (e.g. Wii) or air gestures (e.g. Kinect) to control the movements of an on screen avatar Tagged physical objects (e.g. balls) that are manipulated in a physical world result in physical/digital events (e.g. animation)  Direct Manipulation (DM) Ben Shneiderman (1983) coined the term DM 3 core 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 interest  Benefits of direct manipulation Novices can learn the basic functionality quickly Experienced users can work extremely rapidly to carry out a wide range of tasks, even defining new functions Intermittent users can retain operational concepts over time Error messages rarely needed Users can immediately see if their actions are furthering their goals and if not do something else Users experience less anxiety Users gain confidence and mastery and feel in control  Disadvantages of DM Some people take the metaphor of direct manipulation too literally Not all tasks can be described by objects and not all actions can be done directly Some tasks are better achieved through delegating, e.g. spell checking Can become screen space ‘gobblers’ Moving a cursor using a mouse or touch pad can be slower than pressing function keys to do same actions  4. Exploring Involves moving through virtual or physical environments – users can explore aspects of a virtual 3D environment – physical environments can also be embedded with sensors that when detect the presence of someone will trigger digital or physical events to happen Many examples of virtual environments, including cities, parks, buildings, rooms, and datasets – enable users to fly over them and zoom in and out of different parts Seeing things larger than life in VR Reproduced with permission. http://home.comcast.net/~sharov/3d/cave.html Exploring data in VR Image courtesy of Kalev Leetaru, National Center for Supercomputing Applications, University of Illinois.  Responding System takes the initiative to alert user to something that it “thinks” is of interest Does this by: – detecting the location and/or presence of someone in a vicinity and notifies them on their phone/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 user This type suggested by Christopher Lueg et al. (2018)  Choosing an interaction type Direct manipulation is good for ‘doing’ types of tasks, e.g. designing, drawing, flying, driving, sizing windows Issuing instructions is good for repetitive tasks, e.g. spell-checking, file management Having a conversation is good for certain services, e.g. finding information, requesting music Hybrid conceptual models are good for supporting multiple ways of carrying out the same actions  Difference between interaction types and interface styles Interaction type: – A description of what the user is doing when interacting with a system, e.g. instructing, talking, browsing or responding Interface style: – the kind of interface used to support the interaction, e.g. command, menu-based, gesture, voice  Many kinds of interface styles available (see chapter 7)… Command Speech Data-entry Form fill-in Query Graphical Web Pen Augmented reality Gesture  Other sources Of conceptual knowledge that are used to inform design and guide research are: – paradigms – visions – theories – models – frameworks  Paradigms – Inspiration for a conceptual model Visions – A driving force that frames research and development – Invites people to imagine what life will be like in 10, 15 or 20 years time e.g. Apple’s 1987 Knowledge Navigator Smart Cities, Smart Health Human-centred AI  Theory – Explanation of a phenomenon – e.g. information processing that explains how the mind, or some aspect of it, is assumed to work Models – A simplification of an HCI phenomenon enables designers to predict and evaluate alternative designs Frameworks – Set of interrelated concepts and/or specific questions for ‘what to look for – Provide advice on how to design user experiences  A classic HCI framework Don Norman’s (1988) framework of the relationship between the design of a conceptual model and a user’s understanding of it Consists of three interacting components: The Designer’s Model – The model the designer has of how the system should work System Image – How the system actually works, which is portrayed to the user through the interface, manuals, help facilities, and so on The User’s Model – How the user understands how the system works Performance Task 1  Summary Developing a conceptual model involves: – understanding the problem space – Being clear about your assumptions and claims – specifying how the proposed design will support users A conceptual model is a high-level description of a product in terms of – what users can do with it and the concepts they need to understand how to interact with it Interaction types provide a way of thinking about how to support user’s activities Paradigms, visions, theories, models & frameworks – provide ways of framing design and research REFERENCE: www.id-book.com  Chapter 4 COGNITIVE ASPECTS Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Overview What is cognition? Why it is important to understand in HCI Describe how cognition has been applied to interaction design Explain what are mental models and how to elicit them Cover relevant theories of cognition  Which involves fast vs slow thinking? 2+2 = 21 x 29 = What color eyes do you have? How many colors are there in the rainbow? How many months in the year have 31 days? What is the name of the first school you attended?  What is cognition? Thinking, remembering, learning, daydreaming, decision-making, seeing, reading, talking, writing… Ways of classifying them at a higher level – Experiential vs reflective cognition (Norman, 1993) – Fast vs slow thinking (Kahneman, 2011)  How can understanding cognition help? Provides knowledge about what users can and cannot be expected to do Identifies and explains the nature and causes of problems users encounter Provides theories, modelling tools, guidance and methods that can lead to the design of better interactive products  Cognitive processes 1. Attention 2. Perception 3. Memory 4. Learning 5. Reading, speaking and listening 6. Problem-solving, planning, reasoning and decision-making  1. Attention Selecting things to concentrate on at a point in time from the mass of stimuli around us Allows us to focus on information that is relevant to what we are doing Involves audio and/or visual senses Focused and divided attention – enables us to be selective in terms of the mass of competing stimuli but limits our ability to keep track of all events Design recommendation – Information at the interface should be structured to capture users’ attention, e.g. use perceptual boundaries (windows), colour, reverse video, sound and flashing lights Activity: Find the price of a double room at the Holiday Inn in Columbia Activity: Find the price for a double room at the Quality Inn in Pennsylvania Tullis (1987) found that the two screens produced quite different results – 1st screen - took an average of 5.5 seconds to search – 2nd screen - took 3.2 seconds to search  Multitasking and attention Is it possible to perform multiple tasks without one or more of them being detrimentally affected? Multitasking can cause people to lose their train of thought, make errors, and need to start over Ophir et al (2009) compared heavy vs light multi- taskers – heavy were more prone to being distracted than those who infrequently multitask – heavy multi-taskers are easily distracted and find it difficult to filter irrelevant information  Multitasking at work Increasingly common for workers to multitask: e.g. hospital workers have to attend to multiple screens in an operating room that provide new kinds of real-time information Is it OK to use a phone when driving?  Design implications for attention Context: Make information salient when it needs attending to at a given stage of a task Use techniques to achieve this – e.g. color, ordering, spacing, underlining, sequencing and animation Avoid cluttering visual interfaces with too much information Consider designing different ways of supporting effective switching and returning to an interface  2. Perception How information is acquired from the world and transformed into experiences Obvious implication is to design representations that are readily perceivable, e.g. – Text should be legible – Icons should be easy to distinguish and read Is color contrast good? Find Italian Are borders and white space better? Find french Activity: Which is easiest to read and why? What is the time? What is the time? What is the time? What is the time? What is the time?  Design implications Icons should enable users to readily distinguish their meaning 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 – Yellow on black or blue is fine – Yellow on green or white is a no-no  3. Memory Involves recalling various kinds of knowledge that allow people to act appropriately – e.g. recognize someone’s face, remember someone’s name First encode and then retrieve knowledge We don’t remember everything - involves filtering and processing what is attended to Context is important as to how we remember (i.e. where, when) We recognize things much better than being able to recall things We remember less about objects we have photographed than when we observe them with the naked eye (Henkel, 2014)  Processing in memory Encoding is first stage of memory – determines which information is attended to in the environment and how it is interpreted The more attention paid to something… The more it is processed in terms of thinking about it and comparing it with other knowledge… The more likely it is to be remembered – e.g. when learning about HCI, it is much better to reflect upon it, carry out exercises, have discussions with others about it, and write notes than just passively read a book, listen to a lecture or watch a video about it  Context is important Context affects the extent to which information can be subsequently retrieved Try to remember: – Try to remember the dates of your grandparents ’ birthday – Try to remember the cover of the last two books you read – Which was easiest? Why? People are very good at remembering visual cues about things: e.g. the color of items, the location of objects and marks on an object They find it more difficult to learn and remember arbitrary material: e.g. birthdays and phone numbers  Recognition versus recall Command-based interfaces require users to recall from memory a name from a possible set of 100s Graphical interfaces provide visually-based options (menus, icons) that users need only browse through until they recognize one Web browsers provide tabs and history lists of visited URLs that support recognition memory  The problem with the classic ‘72’ George Miller’s (1956) theory of how much information people can remember People’s immediate memory capacity is very limited to 7 2 Has been applied in interaction design when considering how many options to display But is it a good use of a theory in HCI? Is it helpful?  When creating an interface should the designer Present only 7 options on a menu Display only 7 icons on a tool bar Have no more than 7 bullets in a list Place only 7 items on a pull down menu Place only 7 tabs on the top of a website page? Not necessarily..  The reason is… People can scan lists of bullets, tabs, menu items for the one they want They don’t have to recall them from memory having only briefly heard or seen them So can have more than 9 at the interface (e.g. history lists of websites visited) Sometimes a small number of items is good – e.g. smart watch displays Depends on task and available screen estate  Personal Information management Is a growing problem for many users – they accumulate a vast numbers of documents, images, music files, video clips, emails, attachments, bookmarks, etc., – where and how to save them all, then remembering what they were called and where to find them again – naming most common means of encoding them – but can be difficult to remember, especially when have 10,000s – How might such a process be facilitated taking into account people’s memory abilities?  Personal Information management Bergman and Whittaker 3 interdependent processes model (2016) to help people manage their stuff: (i) how to decide what stuff to keep (ii) how to organize it when storing (iii) which strategies to use to retrieve it later Most common approach is to use folders and naming Strong preference for scanning across and within folders when looking for something Search engines only helpful if know the name of the file Smart search engines help with listing relevant files for partial name or when type in first letter  Digital Forgetting When might you wish to forget something that is online? – When you break up with a partner – Emotionally painful to be reminded of them through shared photos, social media, etc., Sas and Whittaker (2013) suggest ways of harvesting and deleting digital content – e.g. making photos of ex into an abstract collage – helps with closure  Memory aids SenseCam developed by Microsoft Research Labs (now Autographer) – a wearable device that intermittently takes photos without any user intervention while worn – digital images taken are stored and revisited using special software – has been found to improve people’s memory, especially those suffering from dementia  Design implications 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 – e.g. folders, categories, color, flagging, time stamping  4. Learning Involves the accumulation of skills and knowledge involving memory Two main types: – Incidental learning (e.g. recognizing people’s faces, what you did today) – intentional learning (e.g. studying for an exam, learning to cook) – Intentional learning is much harder! – Many technologies have been developed to help (e.g. multimedia, animations, VR) People find it hard to learn by following instructions in a manual – Prefer to learn by doing  Design implications Design interfaces that encourage exploration Design interfaces that constrain and guide learners Dynamically linking concepts and representations can facilitate the learning of complex material  5. 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 – Dyslexics have difficulties understanding and recognizing written words  Applications Voice user interfaces allow users to interact with them by asking questions – e.g. Google Voice, Siri, Alexa Speech-output systems use artificially generated speech – e.g. written-text-to-speech systems for the visually impaired Natural-language systems enable users to type in questions and give text-based responses – e.g. chatbots  Design implications Speech-based menus and instructions should be short Accentuate the intonation of artificially generated speech voices – they are harder to understand than human voices Provide opportunities for making text large on a screen  6. Problem-solving, planning, reasoning and decision-making All these processes involve reflective cognition – e.g. 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 – e.g. maps, books, pen and paper May involve working through different scenarios and deciding which is best option Weighing up alternatives  Design implications 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 (e.g. web searching) Use simple and memorable functions to support rapid decision-making and planning The app mentality is making it worse for people to make their own decisions because they are becoming risk averse (Gardner and Davis, 2013)  Cognitive frameworks These are used to explain and predict user behavior at the interface – based on theories of behavior – focus is on mental processes that take place – Also use of artifacts and representations Most well known are: – Mental models – Gulfs of execution and evaluation – Distributed cognition – External and embodied cognition  Mental models Users develop an understanding of a system through learning about and using it Knowledge is sometimes described as a mental model: – how to use the system (what to do next) – what to do with unfamiliar systems or unexpected situations (how the system works) People make inferences using mental models of how to carry out tasks  Mental models Craik (1943) described mental models as: – internal constructions of some aspect of the external world enabling predictions to be made Involves unconscious and conscious processes – imagery and analogies are activated Deep versus shallow models – e.g. how to drive a car and how it works  Erroneous mental models Lots of people hit the button for elevators and pedestrian crossings at least twice – Why? Think it will make the lights change faster or ensure the elevator arrives! What kinds of mental models do users have for understanding how interactive devices work? – poor, often incomplete, easily confusable, based on inappropriate analogies and superstition (Norman, 1983)  How can UX be designed to help people build better mental models? Clear and easy to use instructions Appropriate tutorials and contextual sensitive guidance Provide online videos and chatbot windows when needing help Transparency – to make interfaces intuitive to use Affordances of what actions an interface allows – e.g. swiping, clicking, selecting  Gulfs of execution and evaluation The ‘gulfs’ explicate 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 can reduce cognitive effort required to perform tasks Can reveal whether interface increases or decreases cognitive load and whether it is obvious what to do next Norman, 1986; Hutchins et al, 1986 Bridging the gulfs Information processing Conceptualizes human performance in metaphorical terms of information processing stages  Limitations Based on modelling mental activities that happen exclusively inside the head Do not adequately account for how people interact with computers and other devices in real world  Distributed cognition Concerned with the nature of cognitive phenomena across individuals, artifacts, and internal and external representations (Hutchins, 1995) Information is transformed through different media (computers, displays, paper, heads)  What’s involved The distributed problem-solving that takes place The role of verbal and non-verbal behavior The various coordinating mechanisms that are used (e.g. rules, procedures) The communication that takes place as the collaborative activity progresses How knowledge is shared and accessed  External cognition Concerned with explaining how we interact with external representations (e.g. maps, notes, diagrams) What are the cognitive benefits and what processes involved How they extend cognition What technologies can we develop to help people carry out complex tasks (e.g. learning, problem solving, decision-making)?  Externalizing to reduce memory load Examples include the use of diaries, reminders, calendars, notes, shopping lists, to-do lists – written to remind us of what to do Post-its, piles, marked emails are used to: – where placed indicates priority of what to do External representations: – Remind us that we need to do something (e.g. to buy something for mother’s day) – Remind us of what to do (e.g. buy a card) – Remind us when to do something (e.g. send a card by a certain date)  Annotation and cognitive tracing Annotation involves modifying existing representations through making marks – e.g. crossing off, ticking, underlining Cognitive tracing involves externally manipulating items into different orders or structures – e.g. playing Scrabble, playing cards  Design implication Provide external representations at the interface that can reduce memory load and facilitate computational offloading – e.g. Information visualizations have been designed to allow people to make sense and rapid decisions about masses of data  Summary Cognition involves many processes including attention, memory, perception and learning The way an interface is designed can greatly affect how well users can perceive, attend, learn and remember how to do their tasks Theoretical frameworks, such as mental models and external cognition, provide ways of understanding how and why people interact with products This can lead to thinking about how to design better products  In-depth activity 1. Write down how you think a contactless card or smartphone app like Apple Pay/Gcash/PayMaya works by answering the following questions: – What information is sent between the card/smartphone and the card reader when it is placed in front of it? – What is the maximum amount you can pay for something using a contactless card, Apple Pay/Gcash/PayMaya? Why is there an upper limit? – What happens when your contactless card is stolen and you report it to the bank? What does the bank do? – What is the importance of contactless payment in this time of pandemic? 2. Using Input-Process-Output (IPO) diagram, draw the concept of contactless payment. REFERENCE: www.id-book.com  User-Centered System Design Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Overview Define User-Centered Design Discuss the benefits of using UCD Explain the UC processes: – Task Analysis – Requirements Gathering – Design & Storyboarding – Prototyping Implementation – Evaluation – Installation  Introduction UCSD, sometimes called user-centered design, was developed at the University of California San Diego. User-centered system design is an approach to design the product in such a way that fulfills the user’s needs by involving the user in the design process. To understand UCSD, you first need to understand the people who will use the systems. A central focus on the people who will use the systems, on their preferences and requirements is what UCSD is composed of. To do that, we will start with building simple models of the users, the tasks, and the technological systems. Thus, it will involve an iterative process like prototyping and the evaluation of alternatives by users.  To understand UCSD, you need first to understand the people who will use the system. Developing a sense of empathy with the target audience or user is vital to improving any process or piece of technology as they are the focus of your designs.  UCD User-centered Design (UCD) is the process of developing a tool, for example, the user interface of a website or application for mobile or desktop, from the perspective of how it will be understood and used by a human user.  In the early days of computing, computers were very expensive and extremely difficult to use. They required significant effort from users and opportunity for interaction was limited. Only specially trained people can work with them. The old computing is about what computers can do, the new computing is about what the users can do. UCSD forces designers to be explicit about decisions made, reviewing them through prototypes and storyboards with other members of the team and potential users.  UCD Main Stages The Main Stages are: – Task Analysis – Requirements specification – Prototyping – Evaluation  UCD Elements Another view of UCSD is as the creation and reconciliation of three elements: – User model – Task Model – Technology model In either view, the designer must cycle through the design process a number of times as they approximate towards a working design.  Task Analysis Task Analysis means learning about users’ goals and users' ways of working. Task analysis can also mean figuring out what more specific tasks users must do to meet those goals and what steps they must take to accomplish those tasks. Along with user and task analysis, a third analysis is often used: understanding users’ environments (physical, social, cultural, and technological environments).  Important notes on TA 1. The result of TA is a description of the task that users undertake when interacting with the system. 2. It also involves how individuals carry out these tasks. 3. The typical use of TA is to describe an existing system or task before serious design work starts on a new system to replace it.  Important notes on TA Inputs to Task Analysis – Problem statement – Observation of existing systems – Analysis of user population Outputs of Task Analysis – Hierarchical task analysis (or an analysis based on another structure, for example, a matrix)  Why do Task Analysis? It provides a clear understanding of what a client wants It gives a clearer understanding of what users want It is rare for something completely new to be designed: usually something existing is redesigned. Requirements Gathering Requirements Gathering  Types of Requirements 1. Functional requirements 2. Performance requirements 3. Constraint requirements 4. Verification requirements 1. Functional requirements - also referred as a WHAT requirement; for example, the automated teller machine (ATM) shall enable customers to deposit cash or checks and withdraw up to x dollars at a time from their checking accounts on a 24 h a day and 7 days a week basis. 2. Performance requirements - specifies HOW WELL the system or systems function shall be performed; for example, the automobile system shall start the engine within 6s after the driver turns the ignition key under normal weather conditions; the system shall have an operational availability (Ao) of 99.99%. 3. Constraint requirements – focus on limitations on the design or construction of the system (part of the results of feasibility analysis ad strategic planning). For example, “The automobile system shall use both grid electricity and B20 biodiesel as the energy source.” 4. Verification requirements - define what and how is intended to verify or test the functional requirements for acceptance of the system/components. For example, system operational availability shall be calculated using the definition given by MIL-STD-721, conducted by a government-certified contractor; the demonstration shall show that the system, under the defined operational environmental conditions, shall have an operational availability of at least 99%.  Design and Storyboarding A storyboard is a graphic organizer that consists of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture, animation, motion graphic, or interactive media sequence. The storyboarding process, in the form it is known today, was developed at Walt Disney Productions during the early 1930s, after several years of similar processes being in use at Walt Disney and other animation studios. – Wikipedia  Inputs/Outputs to design and storyboarding Inputs to design and storyboarding – Statement requirements – Usability principles, heuristics – Other constraints – Evaluations from previous iterations Outputs of design and storyboarding – A storyboard design – System justification: why the system is going to be the way it is – The first-draft design of how the system works and what it looks like – A stakeholder needs analysis  Why do we need a design and storyboard phase? It provides designers with an opportunity to visualize their design and to review it, quickly and cost-effectively with users.  Summary User-centered design (UCD) is an iterative design process in which 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. UCD helps to understand users' needs and preferences regarding features of a product, task, goals, user flows, etc. At the end of the day, it has become one of the most important user experience requirements – that of being user-centered. Group Task 1 REFERENCES: https://usabilitygeek.com/user-centered-design- introduction/#:~:text=It%20helps%20to%20unde rstand%20users,that%20of%20being%20user% 2Dcentered https://www.interaction- design.org/literature/topics/user-centered-design  PROTOTYPING & WEB DESIGN Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Overview Discuss the benefits of using prototype Discuss the do’s and don’ts of creating websites PROTOTYPING  Why Prototype? Traditional software development: you can’t test until you implement Implementation is expensive Result: any design errors are built in to the first thing you can test, and it is very expensive to make changes Result: design errors, unless they are really bad, are left in the product (as “features”)  Breaking this implementation paradox Build a prototype of the basic functionality, especially the interface Test the prototype, which will uncover design errors Correct the errors Repeat until you have a clean design Prototyping is – a major tool for improving usability – Heavily used in industry  The views of the stakeholders Software designers may not adequately understand prototyping HCI practitioners may not adequately understand implementation The two groups need to talk to each other early, and prototyping facilitates communication  Two types of prototypes Evolutionary: the prototype eventually becomes the product Revolutionary, or throwaway: the prototype is used to get the specs right, then discarded!!  Horizontal prototype: broad but only top-level  Vertical prototype: deep, but only some functions  Benefits of Prototyping Can be used to test every detail of the final product before the product is built (E.g. MoS testing rooms) Results in higher user satisfaction Users are better at evaluating an existing (vs described) system It brings the users into the process early  Disadvantages Users may be unfamiliar with the technique. Management may think that the project is nearly finished if the prototype is “too good,” or that the prototype can be converted into the final product.  Storyboards: paper- based prototypes a “hardware” tool to visualize your project: Navigation visual display of paths Interactivity all on paper and words Screen design basic layout, basic color Rough sketches for key frames, menus, etc. Storyboarding is about conceptual thinking, not art. Thinking out of the box: You can actually use the prototype! WEB DESIGN (DO’S AND DON’TS)  Website design Early websites were largely text-based, providing hyperlinks Concern was with how best to structure information to enable users to navigate and access it easily and quickly Nowadays, more emphasis on making pages distinctive, striking, and aesthetically pleasing Need to think of how to design information for multi- platforms - keyboard or touch? – e.g. smartphones, tablets, PCs  Usability versus aesthetics? Vanilla or multi-flavor design? – ease of finding something versus aesthetic and enjoyable experience Web designers are: – “thinking great literature” Users read the web like a: – “billboard going by at 60 miles an hour” (Krug, 2014) Need to determine how to brand a web page to catch and keep ‘eyeballs’  Breadcrumbs for navigation Breadcrumbs are category labels – Enable users to look at other pages without losing track of where they have come from – Very usable – Enable once-click access to higher site levels – Attract first time visitors to continue to browse a website having viewed the landing page In your face Web ads Web advertising is often intrusive and pervasive Flashing, aggressive, persistent, annoying Often need to be ‘actioned’ to get rid of What is the alternative? – Use ad blockers  Research and design considerations Many books and guidelines on website design Veen’s (2001) 3 core questions to consider when designing any website: (1) Where am I? (2) Where can I go? (3) What’s here?  Website Layout Do’s Don’ts Make sure to use UX Avoid using a wholly new following the standards or complex layout users know well Don’t focus too much on Focus on user- creativity friendliness Avoid clutter Use common design elements Take a look at the Google Meet website page and learn how despite being one of the most influential and innovative brands, Google has focused on simplicity and user-friendliness:  Typography Do’s Don’ts Choose fonts that align Do not set continuous with your brand style text in full capitals Set headlines large Don’t use an overused Ensure ample space and unattractive typeface between text elements Don’t use more than three typefaces Check out Freshworks simple and visually appealing typography consistent with their brand style and tone of voice.  Website Content Do’s Don’ts Cut straight to the chase; Don’t be bland or without provide useful, catchy, and a brand voice informative content Always proofread and make Don’t put too much text sure that your web pages are Don’t plagiarize free of any grammatical errors Don’t overdo keywords Do use numbers and bullets wherever required Adopt a planned, focused, and optimized content strategy Be concise but not so vague Take a look at Trello’s website, and you’ll see how they’ve implemented all these common tips of website content writing.  White Space Do’s Don’ts Make sure that one element is Don’t forget the difference distinct from the other between micro and major Use larger gaps to indicate a white space switch between features of the type of content Don’t forget to stay Make sure that all critical consistent – use the components are same amount of space distinguishable from everything between each line of text else Avoid overlooking white Surround your CTA (call to action) with a lot of white space space A perfect example of using white space effectively would be the website of Apple. Take a look at how well they’ve maintained the balance.  Navigation Do’s Don’ts Use clear labels for navigation Don’t waste your user’s time – Always use familiar words in design navigation to reduce navigation their spending on finding what Follow the three-click rule: your they need viewers shouldn’t be more than 3 Don’t get fancy in your clicks away from what they’re navigation searching for Always use contrasting colors for Do not change the navigation text and navigation button of each page Focus on content and minimize Don’t hide critical navigation navigation wherever possible Tailor navigation to content and screen size Design by Shopify  Optimizing Images Do’s Don’ts Use stock images or images Do not publish you have rights/license for photographs of someone Use Alt text descriptions on without their consent each image uploaded on your website Don’t spam your image Resize pictures to optimize file names with keywords page appearance and speed Never use bad quality Make sure that all images are images for your website the same style and size Combine images with relevant text Design by Tubik  Contrasting Backgrounds Do’s Don’ts Blend images into the Do not use low-quality background images for background Use headers for an extra pop Avoid busy or cluttered Use eye-catching elements like a splash of color or images illustrations Don’t use flash Pay attention to contrast; if your text is black, the background has to be light Use clever color UI Try gradient if you don’t have proper images Take a look at Buffer’s homepage design and see how they’ve used a contrasting background in their hero image:  ‘Simple’ Does the Job If your website can boast of simplicity, distinct yet straightforward design, it’s a job well done. Most of us focus so much on making the web design unique that we end up creating complex pages. Lesser the clutter, the better the appeal.  REFERENCE https://design4users.com/dos-and-donts- website-design/  Flowchart Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Creating Computer Solutions to Problems pseudocode – is composed of short English statements, referred to as pseudocode means false code (although it resembles programming language instructions, pseudocode cannot be understood by a computer) flowchart – uses standardized symbols to visually depict an algorithm. – You can draw the flowchart symbols by hand; or, you can use the drawing or shapes feature in a word processor. You also can use a flowcharting program, such as SmartDraw or Visio. Symbols of Flowcharting Symbols of Flowcharting [cont] Review Exercise # 1 Given the following problems, –Determine the INPUT, PROCESS, OUTPUT –Create its flowchart  Buying grocery items at SM supermarket. Task: Using lucidchart.com, create an IPO and flowchart using the scenario below: 1. Viewing grades through e-brahman account. 2. Sending private message to a friend using Facebook. 3. Paying bills through GCASH 4. Ordering food using FoodPanda  Chapter 5 SOCIAL INTERACTION Mrs. KIELLY CHRIZZA MAE T. LARA INSTRUCTOR COLLEGE OF INFORMATION TECHNOLOGY, ENTERTAINMENT AND COMMUNICATION, UBLC Overview What is meant by social interaction The social mechanisms used in conversations What is meant by social presence Overview of technologies for supporting social interaction How has social media changed how we keep in touch New social phenomenon arising from being able to connect online Are we spending too much time in our own digital bubbles?  Social interaction We live together, work together, play together, talk to each other and socialise Social technologies developed to enable us to persist in being social when apart – they differ in how they support us – some encourage social interactions (e.g family games with Alexa) – others have a negative impact on everyday conversations (Turkle, 2015)…  Questions raised by social tech Are F2F conversations being superseded by social media interactions? How many friends do you have on Facebook, LinkedIn, WhatsApp, etc vs real life? How much do they overlap? How are the ways we live and interact with one another changing? Are the established rules and etiquette still applicable to online and offline? Conversational mechanisms Various mechanisms and ‘rules’ are followed when holding a conversation face to face, e.g. mutual greetings A: Hi there B: Hi! C: Hi A: All right? C: Good, how’s it going? A: Fine, how are you? C: OK B: So-so. How’s life treating you?  Conversational rules Sacks et al. (1978) conversation analysis of conversations propose three basic rules: Rule 1: the current speaker chooses the next speaker by asking an opinion, question, or request Rule 2: another person decides to start speaking Rule 3: the current speaker continues talking  Conversational rules Turn-taking used to coordinate conversation – A: Shall we meet at 8? – B: Um, can we meet a bit later? – A: Shall we meet at 8? – B: Wow, look at him? – A: Yes what a funny hairdo! – B: Um, can we meet a bit later? Back channelling to signal to continue and following – Uh-uh, umm, ahh  More conversational rules Farewell rituals – Bye then, see you, yeah bye, see you later…. Implicit and explicit cues – e.g. looking at watch, fidgeting with coat and bags – explicitly saying “Oh dear, must go, look at the time, I’m late…”  Breakdowns in conversation When someone says something that is misunderstood: – Speaker will repeat with emphasis: A: “this one?” B: “no, I meant that one!” – Also use tokens: Eh? Quoi? Huh? What?  What happens in online conversations? Do the same conversational rules apply? Are there different kinds of breakdowns? How do people repair them for: – email? – Instant messaging? – texting? – Skype or other videoconference?  Remote conversations Much research on how to support conversations when people are ‘at a distance’ from each other Many applications have been developed – e.g., email, videoconferencin