INTRODUCTION TO HCI WEEK 2-3.pdf

New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 Week 2 - 3 INTRODUCTION TO HUMAN COMPUTER INTERACTION (HCI)...

New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 Week 2 - 3 INTRODUCTION TO HUMAN COMPUTER INTERACTION (HCI) This module will considered the human as an information processor, receiving inputs, storing, manipulating, and using information and giving feedback from the received information. You will also learn within this module the principles of Human Computer Interaction (HCI) and introduce the fundamental components of interactive system, user, the computer system and nature of interactive process. Learning Outcomes: At the end of the module, the student should be able to: 1. Discuss HCI and its importance 2. Identify the principles of HCI; 3. Explain the goals of HCI; 4. Implement HCI Guidelines in system/software development; 5. Distinguish the Human Information Processing HCI and its Importance Majority of the people today interacts with technology is an essential part of our everyday life. Most of the average user of a computer system is most likely to understand the new technology. Since there are available different types of technology, and they have to use. People are busy and may spend little or no time learning a new system. HCI has become much more critical in recent years. Computers (and embedded devices) have become commonplace in almost all facets of our lives. Aside from merely making the necessary computational functionalities available, HCI's early focus has been on how to design interaction and implement interfaces for high usability. It means that the interfaces are easy to navigate, use, task efficiency, and lead to a correct completion. Usable and efficient interaction with the computing device, in turn, translates to higher productivity.  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 The simple aesthetic appeal of interfaces (while satisfying the need for usability) is now a critical added requirement for commercial success as well. The family of distinctly designed Apple® products is a good example. Apple products are attractive and have created a multitude of faithful followers, even though their functionality may be virtually equal to their competitors. In this context, the concept of user experience (UX) has become a buzzword. This notion encompasses the functional completeness, high usability, and aesthetic appeal of the interactive artifact and its seamless integration into one's lifestyle or even creating a new one around it. A less acknowledged fact is how HCI has had a significant impact on the history of computing and changed our daily lives. The invention (or rediscovery) of the mouse was probably the linchpin in the personal computer revolution, making the operation of the computer intuitive and much more comfortable than the previous system of keyboard commands. The spreadsheet interface made business computing a considerable success. The Internet could not have happened without the web-browser interface. Smartphones, with their touch-oriented interfaces, have nearly replaced the previous generation of feature phones. Body-based and action-oriented interfaces are now introducing new ways to play and enjoy computer games. HCI continues to redefine how we view, absorb, exchange, create, and manipulate information to our advantage. Principles of Human Computer Interaction Good HCI design is generally a multi-objective task that involves simultaneous consideration of many things, such as the types of users, characteristics of the functions, capabilities, and cost of the devices, lack of objective or exact quantitative evaluation measures, and changing technologies. A piece of considerable knowledge in many different fields is required. Over the relatively young history of HCI, researchers and developers in the area have accumulated and established basic principles for good HCI design in hopes of achieving some of the main objectives (as a whole) that were laid out in the previous section. These HCI principles are general, fundamental, and commonsensical, applicable to almost any HCI design situation.  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 The following are the main HCI principles. 1. Know thy User This principle notes that the interaction and interface should conform to the system’s target user’s design needs and capabilities. 2. Understand the Task The task refers to the job to be accomplished by the user through the interactive system. Understanding the function at hand is closely related to interaction modeling and user analysis. 3. Reduce Memory Load A principle which also has a theoretical basis is developing experiences with as little memory load as possible. Maintaining the short-term memory load light for the user is of particular importance to the function of the interface as a fast and easy guide to completing task. 4. Strive for Consistency One way to unburden the memory load in the longer term is to keep consistency. This applies to (a) both within an application and across different applications and (b) both the interaction model and interface implementation. 5. Remind Users and Refresh Their Memory Any important task may require using memory, so another smart approach is to use interfaces that include ongoing reminders of important information and thereby refresh the memory of the user. For example, one may cycle through the entry of various types of information in an online shopping application: item selection, delivery options, address, credit card number, and number of items; In order to keep the user aware of the situation and provide correct responses, insightful or continuous feedback can allow the user to effectively complete the job.  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 6. Prevent Errors and Reversal of Action Although it is important to promote a timely completion of the task, error-free execution is important. One technique is to present or request at a given time only the necessary information / action, as needed. Inactive menu products are fine examples of a strategy like these. In general, making the program allows the user to select from possibilities is a better option than depending on the recall. 7. Naturalness This refers to a trait that is reflective of various operations in our everyday life. However, it can be tricky to directly translate real-life styles and modes of interaction to and for interaction with a computer. The Goals of Human Computer Interaction 1. Provide an understanding of both the human user and the computer system, means the interaction must be easy and satisfying. 2. To produce usable, effective, efficient, and safe systems as well as functional systems. In order fulfil this goal, a developer should: a. Understand how people use technology; b. Building suitable systems; c. Achieve efficient, effective, and safe interaction; d. Put user first. 3. Enhance the quality and efficiency of interaction between human and computers 4. To make technology easier to learn and use. 5. To understand users, it is necessary to understand the processes, capabilities, and biases that they might bring to the tasks they perform. a. The developer should not have to change the way that they use a system. Instead, the system should be designed to match their requirements. 6. To understand what the computer can do for users and how it might best communicate with them.  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 7. To understand the user’s task and how it might best be accomplished using the computer system. HCI Guidelines While principles are general and applicable to vast areas and aspects of human- computer interaction (HCI) design, guidelines tend to be more specific. Table 1 shows the primary criteria and areas for which specific guidelines can be of help in HCI design. For instance, in the rule of “user type,” there could be further particular guidelines for specific age groups or gender. Table 1 Examples of Criteria/Categories for HCI Guidelines CRITERIA MAIN CATEGORIES EXAMPLES Age/generation Kids, elders, visually challenged, Disability/accessibility Gender baby boomers, students, User type Consumer group Occupation parents, East Asians, athletes, Culture/country etc. Smartphone, padlike device, Mobile/handheld Desktop Large desktop, kiosk, embedded OS, display/virtual reality Embedded Platform/system setup cloud based, navigation Public installation Operating systems, personal game players, system/network MP3 players, e-book, etc. NASA, Korea University, Private Public Design Vendors/organizations Android™, iOS, Windows® XP, style/identity etc. Voice/aural, gesture, single/ Interface style/ WIMP Non-WIMP 3-D multitouch, tactile/haptic, modality/technology Multimodal multimodal, menu driven, GUI/ widgets, visual perception, etc. Office, outdoor, road/street, Location/place Time home, automobile, subway, Task/operational context Noise/lighting Bodily constraints classroom, eyes free, hands free, handedness, etc. Game Media/information Electronic commerce Applications Design/editing Social network service Display layout Information structure/navigation Soliciting input Information/output General HCI design visualization Design process and practices User experience General aesthetics WIMP is an acronym for windows, icon, mouse, and pointer, which represents the conventional desktop interface.  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 Visual Display Layout This layout focuses on many design guidelines that concern organizing and allotting relevant information in one visible screen page. The display layout should be organized according to the information content (e.g., importance, sequence, functionality). A sized should be manageable (such as divided into proper sections). It is attention-grabbing, and is visually pleasing (e.g., aligned and with restricted use of colors). Table 2 shows the Examples of Guidelines for Government Web Page Layout. Table 2 Examples of Guidelines for Government Web Page Layout GUIDELINES EXPLANATION Create pages that are not considered cluttered by Avoid cluttered displays users Put important, clickable items in the same locations Place important items consistently and closer to the top of the page, where their location can be better estimated Put the most important items at the top center of the Place important items at top center web page to facilitate users finding the information Structure pages so that items can be easily compared when users must analyze those items to Structure for easy comparison discern similarities, differences, trends, and relationships Establish a high-to-low level of importance for Establish level of importance information and infuse this approach throughout each page on the website To facilitate finding target information on a page, Optimize display density create pages that are not too crowded with items of information Visually align page elements, either vertically or Align items on a page horizontally Make page-length decisions that support the Set appropriate page lengths primary use of the web page If reading speed is most important, use longer line lengths (75–100 characters per line); if acceptance Choose appropriate line lengths of the website is most important, use shorter line lengths (50 characters per line) Use frames when certain functions must remain Use frames when functions must visible on the screen as the user accesses other remain accessible information on the site Source: Leavitt, M. O., and Shneiderman, B., Research-Based Web Design and Usability Guidelines, U.S. Department of Health and Human Services, Washington, DC, 2006  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 Information Structuring and Navigation A single display is regularly not sufficient to include all of the required content or information to control the UI of the system or application. In this manner, structuring the information and making it easy to move (or navigate) among the various items becomes a significant issue for high usability. Structuring the information content and controlling the interface for the purpose of HCI is closely related to the principle of understanding the task. Taking User Input Smart designs for taking user input (e.g., raw information or system commands) can improve the overall performance, in terms of time and accuracy, for highly interactive systems. Modern interfaces employ graphical user interface (GUI) elements (e.g., window, text box, button, menu, forms, dialog box, icon), support techniques. Figure 1 Display layout and user interfaces for facilitated data entry: Selection menus, default values, and structured forms are used to reduce errors. (Automate.neu.edu.ph) Figure 1 shows the collection of guidelines for use in applying these input methods to facilitate data entry: 1. Consistency of data-entry Sequences of actions should be used in all conditions such as the same delimiters, and abbreviations.  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 2. Minimal input actions by the user Fewer input actions mean higher user productivity. Use proper single-key commands, mouse selection, auto-completion features, and automatic cursor placement rather than typing/pressing in the full alphanumeric input. Selection from a list by a menu or by mutually exclusive radio buttons also reduces possibilities of error. Use default values and avoid switching the keyboard and the mouse. 3. Minimal memory load on users When doing data entry, use menus and button choices so that users do not have to remember a long and complex syntactic command. 4. Compatibility of data entry with data display The format of data-entry should be linked closely to the displayed information. 5. Clear and effective labeling of buttons and data-entry fields Proper use and consistent labeling can distinguish required and optional data entry. Always remember to place labels closely to the text field. 6. Place the sequence of data-entry and selection fields in a natural scanning and hand-movement direction from top to bottom and left to right. 7. Do not put semantically opposing entry/selection options close together Do not place close together the “save” and “undo” buttons. 8. Design of form and dialog boxes The design of form and dialog boxes should also apply the visual-display layout guidelines. These guidelines will only apply when using a mouse and keyboard-driven UI. On the other hand, situations become more complicated when other forms of  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 input are also used, such as touch, gesture, three dimensional (3D) selection, voice command, and there are separate guidelines for incorporating such input modalities. Users with Disability The World Wide Web Consortium (W3C) has led the Web Accessibility Initiative and published the Web Content Accessibility Guidelines (WCAG) 2.0 and explained how to make web content such as the information on a web page, including text, images, forms, sounds, more accessible to people with disabilities. Summary of the guidelines for Users with Disability: 1. Perceivable A. Provide text alternatives for non-text content. B. Provide captions and other alternatives for multimedia. C. Create content that can be accessed in different ways, including by assistive technologies, without losing meaning. D. Make it easier to hear and see content for the user. 2. Operable A. Make all functionality available from a keyboard. B. The users should have enough time to read and use the content. C. Do not use content that causes seizures. D. Help users navigate and find content. 3. Understandable A. Make text readable and understandable. B. Make content seems and perform in predictable approaches. C. Help users avoid and correct mistakes. 4. Robust A. Utilize compatibility with current and future user tools.  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 Assessment: 1. Assume that Apple has published a design guideline document that details how application icons should be designed and stylized. What are the possible guidelines? Human Information Processing Any effort to design a useful interface for human-computer interaction (HCI) requires two basic elements: an understanding of computer factors (software/hardware) and human behavior. We will look at the computer aspects of HCI design in this module. In this part, we take a brief look at some of the fundamental human factors that constrict the extent of this interaction. As the leading underlying theory for HCI, human factors can broadly be divided into two parts: 1. Cognitive science, which explains the human's capability and model of conscious processing of high-level information and 2. Ergonomics, which elucidates how our five senses accept raw external stimulation signals, are processed up to the pre-attentive level and are later acted upon in the outer world through the motor organs. Human-factors knowledge will particularly help us design HCI in the following ways: Task/interaction modeling Formulate the steps for how humans might interact to solve and carry out a given task/problem and derive the interaction model. A careful HCI designer would not neglect to obtain this model by direct observation of the users themselves, but the designer's knowledge in cognitive science will help significantly in developing the model. Prediction, assessment, and evaluation of interactive behavior Understand and predict how humans might react mentally to various information-presentation and input-solicitation methods as a basis for interface  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 selection. Also, evaluate interaction models and interface implementations and explain or predict their performance and usability. Task Modeling and Human Problem-Solving Model The HCI principle of task/interaction modeling helped to understand the tasks required to accomplish the interactive system’s ultimate goal. For instance, the purpose of a word-processing system might be to produce a nice-looking document as quickly as possible. In more abstract terms, this whole process of interaction could be viewed as a human attempting to solve a “problem” and applying specific “actions” on “objects” to arrive at a final “solution.” Cognitive science has investigated the way on how humans solve particular problems. Such a model can help designers of HCI analyze the task and base the interaction model or interface structure around this natural problem-solving process. Thus for a smaller problem of “fixing the font,” the action could be a “menu item selection” applied to a “highlighted text.” Several “human problem-solving” models are put forth by many researchers, but most of them can be collectively summarized as depicted in figure below. Figure 3 (a) The overall human problem-solving model and process and (b) More detailed view of the “decision maker/executor.”  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 This problem-solving process epitomizes the overall information-processing model. In general, human problem-solving or information-processing efforts consist of these important parts: Sensation, which senses external information (e.g., visual, aural, haptic), and Perception, which interprets and extracts basic meanings of the external information. Memory, which stores momentary and short-term information or long-term knowledge. This knowledge includes information about the external world, procedures, rules, relations, schemas, candidates of actions to apply, the current objective (e.g., accomplishing the interactive task), the plan of action, etc. Decision maker/executor, Decision maker/executor, which formulates and revises a “plan,” and decide what actions to perform based on the various knowledge in the memory. Finally, it acts out by commanding the motor system (e.g., to click the mouse left button). Figure 3b shows the overall process in a flowchart. Once a problem is defined and identified as one that needs to be solved (directly by the user’s intention), it is established as the top goal. Then a hierarchical plan (Figure 3) is formulated by refining the purpose into several sub-goals. Several actions or subtasks are identified in the hope of solving the individual sub-goals considering the external situation. By enacting the series of these subtasks to address the sub- goals, the top goal is eventually accomplished. Note that acting the subtasks does not guarantee their successful. Thus the whole process is repeated by observing the resulting situation and revising and restoring the plan. Figure 4 shows an example of a hierarchical task plan (equivalent to hierarchical goal structure). It illustrates how the simple task of changing the font of a text could be solved, for example, what kinds of basic tasks would be needed. Note that in a general hierarchical task model, certain subtasks need to be applied  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 in series, and some may need to be used concurrently. One can readily appreciate the simple example in Figure 4 of how an interactive task model can be hierarchically refined and serve as a basis for the interface structure. Figure 4 An example of a hierarchical task model of changing a font for a short text. Note that based on this model, we could “select” interfaces to realize each subtask in the bottom of the hierarchy, which illustrates the HCI design process’s crux. The interaction model must represent as much as possible what the user has in mind, especially what the user expects must be done (the mental model) to accomplish the overall task. This way, the user will be “in tune” with the resulting interactive application. The interface selection should be made based on ergonomics, user preference, and other requirements or constraints. Human Reaction and Prediction of Cognitive Performance To some degree, we can also predict how humans will react and perform in response to a particular human interface design. We can consider two aspects of human performance: one that is cognitive and the other ergonomic. Norman and Draper spoke of the “gulf of execution/ evaluation,” which explains how users can be left bewildered (and not perform very well) when an interactive system does not offer specific actions or does not result in a state expected by the user (Figure 5). Such a phenomenon would be a result  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 of an interface based on an ill-modeled interaction. When a user solves a problem or uses an interactive system, it will first form a mental model that is equivalent mostly to the hierarchical “action” plan for the task. Figure 5 Gulf of execution and evaluation: the gap between the expected and actual by https://www.nngroup.com/articles/two-ux-gulfs-evaluation-execution/ The mismatch between the user’s mental model and the task model employed by the interactive system creates the “gulf.” On the other hand, when the task model and interface structure of the interactive system maps well to the expected mental model of the user, the task performance will be very fluid. Memory capacity also influences the interactive performance greatly. As shown in Figure 3, there are mainly two types of memory in the human cognitive system: the short term and the long term. The short-term memory is also sometimes known as the working memory, in the sense that it contains (changing) memory elements meaningful for the task at hand (or chunks). Humans are known to remember about eight chunks of memory, lasting only a short amount of time. This means that an interface cannot rely on the human’s short-term memory beyond this capacity for fast operation. Imagine an interface with a large number of options or menu items. The user would have to rescan the available options several times to make the final selection.  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 In an online purchasing system, the user might not be able to remember all relevant information such as items purchased, delivery options, credit card chosen, billing address, usage of vouchers. (Figure 6). Thus such information will have to be presented to the user from time to time to refresh one’s memory and ensure that no errors are made. Figure 6 A snapshot of an online shopping process that does not display superfluous user status that can lead to anxiety, uncertainty, and erroneous response. Retrieving information from long-term memory is a challenging and relatively time consuming task. Therefore, if an interactive system requires expert-level knowledge, it  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 needs to be displayed so as to elicit at least “recognition” (among some options) of it rather than entirely relying on recall from scratch. Memory-related performance issues are also important in multitasking. Many modern computing settings offer multitasking environments. It is known that, when the user switches from one task to another, a “context switch” occurs in the brain, which means that the working memory content is replaced (and stored back into the long-term memory) with chunks relevant for the switched task (such as the state of the task up to that moment). This process can bring about overall degradation in task performance in many respects. For an individual application to help itself in its use during multitasking, it can assist the user’s context-switch process by capturing the context information during its suspension, and by later displaying, reminding, and highlighting the information upon resumption (Figure 7). Figure 7 The context for multitasking for fast application switching Sensation and Perception of Information The previous part of this module explained the value and usage of the knowledge of cognitive and high-level information processing to HCI design. In this part, we will be discussed the raw information processing by what we call the input side of the human sensory system. We all know that we have different senses which are relevant to HCI. Let us start with: 1. Visual (sight) For normally sighted people, vision is by far the most widely used sense. Vision is important in everyday work because it allows us to use interfaces like  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 shown in Figure 8. Understanding the basics of how human vision works, including its strengths and weaknesses, will help you design systems that match your user’s visual capabilities more closely. The ability of the eye to interpret, organize what we see in the environment is called the visual perception. Figure 8 An interface that has to be recognized quickly and accurately Can you interpret these? 1. What is this? 2. Which is longer?  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 3. Are these the same size? 4. Is this correct? 2. Aural (sounds) The aural modality is perhaps the most prevalent mode for information feedback. The actual form of sound feedback divided into three types: a. simple beep like sounds; (e.g., beep errors in the computer system, life support in the hospitals)  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 b. short symbolic sound bytes are known as earcons (e.g., the paper-crunching sound when a file is inserted into the trashcan for deletion, SWOOSH sound when a message is sent successfully, etc.) c. relatively longer “as is” sound feedback that is replayed from recordings or synthesis. 3. Tactile and Haptic (touch) While not yet ubiquitous, interfaces with tactile and haptic feedback are starting to appear in limited forms. To be precise, the term haptic is defined to be the modality that takes advantage of touch by applying forces, vibrations, or motions to the user. Thus haptic refers to both the sensation of force feedback as well as touch (tactile). Most of today’s smartphones have haptics for system controls and interactions. Figure 9 Tactile Interaction Examples  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 Implementation in System Design System performance results from particular users doing particular tasks (using a particular technology) in a particular context. When you are thinking about designing interactive systems, you will need to consider all of these aspects together. Currently, interfaces that make use of auditory information are most important to people with visual impairment. Still, haptic interfaces are becoming more important as technology improves, and the associated costs fall. If your users include older people, you may need to consider the type of technology you will use. If you are going to use a touch screen interface it may need to utilize resistive technology rather than capacitive technology. One aspect of haptics which we have not considered here, but which can be important, is the feel of a device and the materials it is made from, its esthetics. A smooth, shaped surface, for example, may help to lead to a positive emotional experience of using a particular device. This is one reason mice evolved from relatively square devices to something that is now much more rounded and better suited to the shape of the hand when using it. If you develop a system that includes manual controls, it is essential to have a haptic feedback to indicate that the controls have been operated. This is particularly true when there is no visible visual or auditory feedback when you pressed the button or a switch has been activated, for example. When you develop a mobile application or system, you will need to think about all the contexts in which it may be used. If it can be used in a situation where visual and auditory feedback are not allowed, for example, then you may want to give the device a haptic interaction capability. Most mobile phones, for example, provide a silent mode in which the phone vibrates rather than rings.  New Era University College of Computer Studies Rm. 247-B, High School Annex B, New Era University Tel. No.: (+632) 981-4221 loc 3825 References: J. Preece, H. Sharp, Y. Rogers, Interaction Design: Beyond Human-Computer Interaction, John Wiley & Sons Ltd, 2015 G. Kim, HCI Fundamentals and Practice, CRC Press, 2015 A. Dix, Jay. Finlay, G. Abowd and R. Beale, Human Computer Interaction, Pearson Education Limited, 2010 Bass and J. Coutaz, Developing Software for the User Interface, Addison-Wesley, 1991. https://www.interaction-design.org/ https://interactivedesign2013.wordpress.com/2013/03/09/interactive-design- example/ https://androidappsapk.co/detail-rock-vs-guitar-legends-2015/ https://www.nngroup.com/articles/two-ux-gulfs-evaluation-execution/