(a) Number choices Options are listed with numbers, and the user selects them by typing or pressing the corresponding number. (b) Pop-up menu A menu appears on the screen when the user hovers over or clicks it. I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N B. Menus In a menu-based interface, the screen presents a list of choices for the user to select from using a mouse, touch input, or numeric or alphabetical keys. It is a restricted form of WIMP system. This allows the user to easily recognise and choose options instead of having to remember them. Menu options need to be meaningful, organised logically, grouped hierarchically, and named to assist the user in finding specific options for easier recognition. Menu options can be presented using: 1. 2. 3. Number Choices Menu Pop-up Menu 47
(c) Pull-down menu A menu appears in a rectangular box when the user clicks on it, and the user makes their choices within it. (d) Letter choices Options are provided in text, and the user types the initial letter of the desired option to make a selection. (e) Drop-down menu After clicking the down-arrow button, a menu appears near the top line of the display. When opened, menus drop down onto the display. I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Pull-down Menu Letter Choices Menu Drop-down menu 48
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Menu Design Guideline (a) Wording Meaningful titles, clear command verbs, mixed upper and lower case. (b) Organising Consistent organising principle. Menu items should be arranged based on their importance and how frequently they are used (c) Length All choices fit within screen length. (d) Selection Consistent, clear and easy selection methods. (e) Highlighting Only for selected options or unavailable options. C. Natural Language It is the process of communicating with a computer system or device using natural language, such as spoken or written language. It utilises artificial intelligence research and technologies like Natural Language Processing (NLP) and Natural Language Understanding (NLU) to interpret and respond to user input in a meaningful and contextually appropriate manner. It aims to enhance user experiences by allowing more conversational and flexible interactions with computer systems. 1. 2. 3. Natural Language Interpreter 49
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Applications of natural language for speech input and speech output. Examples of speech output are hands-free operation, poor lighting situations, mobile applications, home applications, and patient and disabled assistance. As for speech output, there are on-board navigational systems and home entertainment. 4. D. Question / Answer and Query Dialogue Question and answer dialogue is an uncomplicated method used to provide input to an application within a particular domain. The user engages in a series of inquiries, typically consisting of yes/no responses, multiple-choice options, or codes, which guide them through the interaction in a step-by-step manner. It must have 'default' so that the user can make choices easily. These user interfaces are designed for beginners, offering limited functionality and simplicity for easy learning and usage. They are suitable for specific domains, such as information systems. 1. 2. 3. Question & Answer Dialog Query Languages Question and Answer Dialog 50
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N A query language is used to construct queries to retrieve information from a database. They use natural-language phrases but actually require specific syntax and an understanding of the database structure. Users need to specify attributes for searching the database and determining what information should be displayed. The effective use of query language requires some experience. 1. 2. 3. E. Form-Fills and Spreadsheet Query Language Form-fills are used for data entry, whereby data fields are formatted in a similar manner to paper-based forms. Often, the form display is based on an actual form with which the user is familiar, making the interface easier to use for both novice and expert users. The user fills in the form with the right data in the correct place and then enters the data into the application. Form-filling interfaces usually allow easy navigation within the form and the option to leave some fields empty. Form-fills also require good design and provide correction features to accommodate user changes or mistakes in filling out the fields. 1. 2. 3. 4. Form-Fills 51
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Spreadsheets represent advanced versions of form-filling that comprise a grid of cells, where each cell can contain a value or a formula. The formula can incorporate values from other cells, such as the sum of all cells in a column. The user can freely enter and modify values and formulas in any sequence, and the system will ensure that the displayed values remain consistent and all formulas are followed. This allows the user to experiment with different parameters and observe the resulting effects. Spreadsheets provide an appealing interface where the user has the freedom to manipulate values as desired, creating a flexible and natural interaction experience. 1. 2. 3. 4. Spreadsheets Form-fills 52
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Spreadsheets F. 3D Interfaces 3D Interfaces are user interfaces that involve 3D interaction (Rodrigues et al., 2016). This includes the 3D design of Windows, Icons, Menus, and Pointer (WIMP) elements, 3D workspaces, and virtual reality. The WIMP elements like buttons, scroll bars, text areas, and tab menus can have a 3D appearance by applying shading, sculpting them like stone, and adding a top-right light source. When used appropriately, these raised areas effectively emphasise active sections, but excessive use can result in a lack of differentiation. In 3D workspaces, objects are shown using 3D graphics and initially appear flat, but they adopt a perspective view when seen at an angle and become smaller when farther away. Virtual reality allows users to navigate through simulated 3D worlds. 1. 2. 3. 4. 53
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N 3D Buttons vs. Flat Buttons Virtual Reality in 3D Space 3D Space Workspace G. The WIMP Interface The WIMP interface style (also known called as windowing systems) is the most commonly used interactive computing environment nowadays, especially in the PC and desktop workstation domains. WIMP stands for windows, icons, menus, and pointers (sometimes referred to as windows, icons, mice, and pull-down menus). Examples of WIMP interfaces are Microsoft Windows, MacOS, Linux, Ubuntu, and Chrome OS. 1. 2. 54
(a) Scrollbars To move the contents of the window up and down or from side to side. (b) Title bar To display the window name for identifying the window to the user. (c) Window buttons To aid in resizing, closing, and making maximum-sized windows. (d) Menu bar To display various menu options. (e) Borders & corners To resize the window using the mouse pointer. I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Windows are the rectangular parts of the screen that behave independently, contain text or graphics, and can be moved or resized. Multiple windows can be displayed at once on a screen, enabling users to see separate tasks concurrently. Users can shift their focus between different windows as they switch between different tasks. Some systems support nested windows. Windows usually consist of: 1. 2. 3. Windows WIMP Interfaces 55
Scrollbars Borders and Corners Title bar Window buttons Menu bar I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Icons are graphical representation of closed windows or programmes. It can be dragged and dropped from one window to another window. Icons allow multiple windows to be available on the screen simultaneously, and they can be expanded by clicking on them. Shrinking a window to its icon is called "iconifying". By iconifying a window, users can temporarily suspend a particular task and save screen space. 1. 2. 3. Icons Windows Various Icons 56
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Menus present the choices for actions or services that the system can perform at a given time. The pointing device is used to show the desired option and make a selection. When the pointer moves over a menu item, it is highlighted, and pressing the mouse button controls the pointer to choose the option. The menu bar location in a windowing system can be placed at the top, bottom, or side of the screen. The menu options in windowing systems should have meaningful and informative names. The windowing system's menu choices could be shown by: 1. 2. 3. 4. Menus (a) Pop-up menu Menus appear near the current cursor position when the user hovers over or clicks them. Used to display context-sensitive options. (b) Pull-down menu Menus are pulled down from the menu bar when the user clicks on the menu label. The menu label should describe what its items do, and the items should be grouped together based on their functions. (c) Fall-down menu Menus automatically appear near the current cursor position when the user hovers over them without clicking on them. (d) Pin-up menu Menus are 'pinned' to the screen, meaning their location is fixed on the screen and they remain there until they are specifically closed. (e) Pie-menu Menu options are arranged in a circular manner, and the pointer appears in the centre of the circle. The distance for the pointer to travel for any selection is the same. 57
Pop-up Menu Fall-down Menu The Pointer is an important component of the WIMP interface for pointing and selecting items. An input device, such as a mouse, trackball, or joystick, controls a pointer cursor that the user sees on the screen. Different cursor shapes are used to distinguish between different modes. The arrow-shaped pointer cursor transforms into crosshairs when drawing a line. All cursors have a hotspot, the target area to which they point. When designing a cursor, ensure it has clear hotspot. 1. 2. 3. 4. Pointers I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Various Pointers 58
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N H. Point-and-Click Interface A Point-and-click interface is a simple interaction where all actions can be performed with a single mouse click. This interface is commonly used in multimedia systems and web browsers for various elements like highlighted words, maps, and iconic buttons (Dix et al., 2011). This interaction is closely tied to hypertext and WIMP style concepts. It is widely used in touchscreen information systems and is often integrated with a menu interface. An example of an interaction is when pointing and clicking at a city on a map, a window will open displaying tourist information about the city. Similarly, when pointing and clicking at a word in text, its definition is displayed. Lastly, clicking on a familiar icon button initiates a specific action. 1. 2. 3. 4. Point-and-Click Interfaces 59
(a) Link-based navigation Sensitive to the distance between links. Unclear link labels increase the gulf of evaluation. (b) Search Sensitive to semantic distance. Inadequate search engine algorithms increase the gulf of execution. A little advantage when developing mental models. I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N I. Web Navigation Web navigation refers to the process of moving between different web pages and content within a website (Kalbach, 2008). It encompasses the design and implementation of user interfaces and interaction patterns that allow users to intuitively explore and access information on the web. Effective web navigation ensures users can easily find what they're looking for, and understand where they are. It involves menus, links, search, and visual cues to support smooth navigation and content discovery. There are two basic styles of interaction for web navigation: 1. 2. 3. 4. Web Navigation 60
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Advantages and Disadvantages of Interface Styles Interface Style Advantages Disadvantages (A) Command Line Interfaces Suitable for repetitive tasks. Offer direct access to system functionality. Unburden with graphic control and require low visual reload. Efficient navigation and powerful execution of commands. Useful for expert users. Low command retention. High error rates. Heavy reliance on memory. Difficult to learn. Commands are not discoverable through menus or visual cues. Reduced interactivity. Frustrating for novice users. (B) Menus Minimal memorization and technical knowledge. Self-explanatory. Reduced errors due to a limited set of predefined choices provided and an easy way to undo an error. Clear visual feedback. Ease of use. Suitable for novice users. Limited flexibility for advanced tasks. Rigid and complex navigation. Limited screen space for numerous menu options. Hinder usability with a poorly labelled menu. Reduced efficiency for expert users. (C) Natural Language Easy access to functional options. Intuitive and user-friendly interaction. Less memory load. Improved user engagement. Flexible and adaptable across domains and contexts. May lead to misinterpretation due to ambiguous language. Lack of precision and specificity of commands. Limited vocabulary and domain knowledge. Require knowledge of how to effectively communicate. Lack of visual feedback. 61
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Interface Style Advantages Disadvantages (D) Question / Answer and Query Dialogue Easy to learn. Suitable for novice users. Use conversional systems. Require low memory. Fast query processing. Support multiple data views. Scalability in handling large volumes of data. Built-in security features. Ensure data integrity and consistency. Question / Answer Dialogue Query Language Slow to use. Requires time to read. Needs valid user inputs. Limited support for correcting errors. Complex interface. Partial control of the database. Limited flexibility in handling semi-structured or unstructured data. Limited query performance for large datasets. Lack of real-time analytics. Question / Answer Dialogue Query Language (E) Form-Fills and Spreadsheets Low memory requirements. Self-explanatory. Simple linear presentation. Easy for beginners. Simplifies data entry. Permit the use of formmanagement tools. Ease organising data. Streamlines repetitive calculations. Support shared access. Availability of hide and filter tools. Form-fills Spreadsheets Require valid input. Require familiarity with interface controls. It can be tedious to correct mistakes. Take large screen space. Analyse user-selected data. Requires a syntax-learning skill. Lack of file security Cannot create reports and queries. Form-fills Spreadsheets 62
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Interface Style Advantages Disadvantages (F) 3D Interfaces Enhanced user experience via immersive interaction. Improved virtual object interaction and navigation. Increased realism. Enhanced visualisation. Improved user focus. Easier to understand information. Steep learning curve to interact with and navigate virtual objects. Need powerful hardware resources. Increased distraction and cognitive reload. Limited software and hardware compatibility. (G) The WIMP Interface Self-explanatory. Does not require complicated commands. Simple navigation across different windows. Takes up a larger amount of hard disc space. Needs more memory capacity. Higher processing power. Slow for expert users. (H) Point-andClick Interface Easy to use for novice users. Precise selection of objects or elements. Ability to accommodate different accessibility needs. Restricted interaction options primarily rely on mouse and touch-based interactions. Lack of efficiency. Complexity in handling large datasets. (I) Web Navigation Wide accessibility of information and resources on the internet. Self-explanatory across different web pages. Efficient to search for specific information. Own pace navigation. Information overload makes it difficult to find relevant and reliable content. Difficult navigation due to complex structures and an inconsistent UI. Slow loading times. Lack of uniformity. 63
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Ergonomics Roles in Interface Design Ergonomics, also known as human factor, is the study of the physical aspects of interaction with consideration of human psychology and system limitations. The physical aspects of interaction includes: (a) The design of controls (b) The environment in which the interaction occurs (c) The layout and physical characteristics of the screen The aim is to evaluate how the user interface affects user performance. It is use to define standards and guidelines for constraining the way we design certain aspects of systems. Ergonomics addresses several types of issues and problems, as shown in Figure 1.11. It will be briefly described in this topic. 1. 2. 3. 4. 5. Health issues Physical environment of the interaction Arrangement of controls and displays The use of color Figure 1.11: Types of Ergonomics Issues and Problems 64
A. Arrangement of Controls and Displays (a) Functional Controls and displays are organised and grouped based on their functional relationship. (b) Sequential Controls and displays are arranged based on the typical order of their use, which is particularly important in domains with enforced task sequences, like aviation. (c) Frequency Controls and displays are arranged based on their frequency of use, prioritising easy access for the most commonly used ones. I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Arranging controls and display elements in a logical manner with appropriate layout and the system interface should be arranged in a way that suits the user's position, allowing easy access to controls and displays without excessive movement. The appropriate organisation of controls and displays will vary based on the domain and application, but possible organisations that can be applied include the following: 1. 2. Controls and Labels Arrangement 65
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N The summarised issues related to the arrangement of controls and displays and the possible solutions for the stated issues are shown in Table 1.2. 3. Domain and application Control and Display Arrangement Issues Control and Display Arrangement Solutions Plant control Aviation Air traffic control Safety-critical Fields Wide range of controls and displays The User faced high pressure to efficiently manoeuvre the controls and view displays. Require an appropriate physical layout. Controls are logically grouped together, and opposite controls are separated. The system interface should be aligned with the user's position. Critical displays should be at eye level. Lighting should be arranged to prevent glare and reflection from distorting displays Controls should be spaced to allow sufficient room for user manoeuvring. PC Newsreader Less-critical application Improper placement of controls and displays The User faced frustration and inefficiency using the controls . Table 1.2: Control and Display Arrangement Issues and Its Solutions 66
B. Physical Environment of the Interaction (a) User Size Small users (including those in wheelchairs) can reach the controls. A large user has sufficient space. (b) User Seating Users should have a clear view of critical displays. Users are seated for comfort and stability, with appropriate back support. (c) User Standing or Moving All users should have enough room to move around and access controls comfortably. I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Ergonomics is also concerned with the design of the work environment while considering factors such as the system location, user demographics, and user mobility (sitting, standing, or moving) that depend on the specific domain and control settings. 1. 2. 3. The physical environment in which the system operates can significantly impact user acceptance as well as user health and safety. Thus, considering it during the design process is vital. In terms of user demographics and mobility, the following should be consider: Co-working Space 67
C. Health Issues (a) Physical Position Users should reach all controls comfortably and see all displays. Users should sit comfortably and stably, and provide rest to the body. (b) Temperature The in-office temperature should vary according to the outside temperature. Extremely hot or cold temperatures caused the user's inability to concentrate efficiently. (c) Lighting Lighting should be arranged to prevent glare and reflection from distorting displays. Users should have adequate lighting to see the computer screen without discomfort. (d) Noise The noise level should be kept at comfortable levels to stimulate the user and provide system activity confirmation. Excessive noise is bad for your health, causing pain and sometimes even hearing loss. (e) Time The time users spend using the system should also be controlled. I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Computer use is generally safe, but system designs can impact user health and safety. There are various factors in the physical 1. 2. environment that directly impact the interaction quality and user performance. There are: 68
D. The Use of Color (a) Display colours should be clear and unaffected by changes in contrast. (b) Avoid using blue for important information. (c) Red is associated with stop. Green is associated with go. Yellow is associated with standby. Use colours that follow common conventions and meet user expectations, such as: (d) Red represents danger in most Western cultures, but it symbolises happiness and good fortune in China. Colour associations vary across cultures, making it vital to consider cultural influences when designing systems and websites for a global audience. Example: (e) Use the 60, 30, and 10 rule for colour distribution. 60% for your base colour, 30% for your secondary colour, and 10% for your primary highlight colour for Call-To-Actions such as buttons. Color Distributions I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Ergonomics and human psychology are closely linked because ergonomics takes into account the limitations of human perception, including the use of colour in displays. The ergonomic guidelines on the use of colour in displays are: 1. 2. 69
Colors Associations across Culture I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Color Meaning 70
User User's Mental Model Designer's Mental Model Designer System I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N Interaction Model An interaction model is a design model that connects an application in a manner that aligns with its target users' conceptual or mental models (Nieters, 2012). Users' mental models refer to the user's beliefs and understanding of the system. Each individual user has their own mental model. 1. 2. Figure 1.12: Relationship between Designer's and User's Mental Model There is a common gap between designers' and users' mental models (Nielsen, 2010), as given in Figure 1.12. Designers' in-depth knowledge leads them to create detailed mental models for their designs, assuming every feature is easy to understand. In contrast, users' less complete mental models of the user interface (UI) increase the chances of mistakes and make the design more challenging to use. 3. 4. 71
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N 5. 6. The interaction model assists in understanding the interaction process and identifying potential problems. It provides a framework for comparing interaction styles and addressing interaction problems. There are two (2) interaction models, both of which utilise user goals and actions: (a) Norman's Execution-Evaluation Cycle (b) Interaction Framework (a) Domain Area of expertise and knowledge in some realworld activity. Example: graphic design. A domain consists of concepts that highlight its important aspects. Example: a geometric shape in the graphic design domain. (b) Tasks Operations to manipulate the domain's concepts. Example: constructing a specific geometric shape with attributes on the drawing surface. (c) Goal Desired output from a performed task or plan of actions. Example: To produce a solid red triangle on the canvas. (d) Intention Specific action is required to meet the goal. (e) Task Analysis Identifying the user's problem space in an interactive system, including the domain, goals, intentions, and tasks. (f) System Language Refers to the core language. It describes the computational attributes of the domain relevant to the system state. (g) User Language Refers to the task language. It describes the psychological attributes of the domain relevant to the user's state. The Interaction Terms 72
A. Norman's Execution-Evaluation Cycle I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N The Norman's Execution-Evaluation Cycle, is known as Norman's Model of Interaction, is a notable model in HCI. It proposes that a user initially sets a goal and utilises the system to take actions towards accomplishing that goal. Then, the system displays the results of those actions on the interface. The user observes the interface and assesses whether the goal has been achieved. If not, a new goal is set, and the cycle repeats. The model has one goal and two major phases: execution and evaluation. Each phase consists of three stages, resulting in a total of seven (7) primary stages as depicted in Figure 1.13. Figure 1.14 and Figure 1.15 to illustrate the cycle. 1. 2. 3. 4. Figure 1.13: Seven Stages of Norman's Interaction Model Goal Execution Evaluation 1. Establishing the goal. 2. Forming the intention. 3. Specifying the action sequence. 4. Executing the action. 5. Perceiving the system state. 6. Interpreting the system state. Evaluating the system state in relation to goals and intentions. 7. 73
(a) Gulf of execution The gap between user actions to reach the goal and the capabilities of the system. A well-designed interface allows users to perform actions without being restricted by technical limitations. Example: The user puts paper on the printer and selects Print on the printer's menu to print a document. (b) Gulf of evaluation The gap between how an output is presented and the user's expectations. A well-designed interface enables the user to easily evaluate the output presentation against their goals or expectations. Example: The graphical text being printed from the printer. (c) Human error While the system is functioning correctly, the user has made an input error. To prevent errors, interface design can be enhanced or better user support can be provided. I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N The Norman Interaction Model assists in identifying areas of concern within system designs. The key areas of conflict are: 5. THE WORLD (THE INTERACTIVE SYSTEM) USER GOAL Gulf of Execution Gulf of Evaluation How do I use this system? What is the current system state? The Gulf of Execution and Gulf of Evaluation 74
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N There are several design questions that make good design principles based on the seven stages to reduce the Gulf of Execution and Gulf of Evaluation. 6. Stage Design Questions Good Design Principles Goal determine the function of the system? Does the user easily Visibility: The user readily perceives the application state and available action alternatives. Execution tell what actions are possible? determine the mapping between intention and physical movement? perform the intended action? Does the user easily Good conceptual model: Consistency in presenting operations and results, along with a coherent system image. Good mapping: There is good mapping between actions and results, controls and their effects, and system state and what is visible. Execution tell what state of the system is in? determine the mapping from system state to interpretation? tell if the system in the desired state? Does the user easily Feedback: Provide full and continuous feedback about results of action. Transparent: The user can directly apply their intellect to the task, making the tool itself seems to disappear. 75
Gulf of Execution Gulf of Evaluation 1 Start here: Goal Establishing Goal [What we want to happen] Situation: I'm reading a book and decide to get more light. Goal: Get more light. 2 Forming an intention to act so as to achieve the goal (Mental activity) Push the switch button on the wall. 3 Specify the actual action sequences that you plan to do (Still a mental activity) Move my body and reach out for the switch by extending my finger. 4 Executing the action sequences (Physical Execution) Physically switch the button on the wall. Next: Execution [What we do to the world] Next: Evaluation [Comparing what happened with what we wanted to happen] 5 Perceiving the state of the world Perceive whether there is more light in the room. 6 Interpreting perception based on our expectations Decide whether the lamp is turned on. 7 Evaluating the interpretations against our expectations Decide whether the resulting amount of light is sufficient. THE WORLD Note: If the light is enough, the cycle is complete. If not, a new goal is established to turn on the main ceiling light, and the cycle repeats. Figure 1.14: Norman's Interaction Model Example I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N 76
1 push the switch button on the wall I'm thinking if I need more light, then I need to.. 2 3 To do that, firstly I have to.. 4 5 6 I'm moving my body, reaching out for the switch by extending my finger and turning on the button The room seems much more brighter.. Hmm.. Executing the action sequences Perceiving the state of the world Interpreting perception based on our expectations The lamp has turned on! 7 The room is definitely brighter, because the lamp has turned on.. but, is it enough? Evaluating the interpretations against our expectations Note: If the light is enough, the cycle is complete. If not, a new goal is established to turn on the main ceiling light, and the cycle repeats. Goal: To get more light Establishing Goal Figure 1.15: Norman's Interaction Model Illustration Example I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N 77 I need more light Forming an intention to act so as to achieve the goal Specify the actual action sequences that you plan to do MMoovvee mmyy bbooddyy rreeaacchh oouutt ffoorr tthhee sswwiittcchh eexxtteenndd mmyyffiinnggeerr I'm reading a book and decide to get more light..
B. The Interaction Framework I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N The interaction framework shown in Figure 1.16 is an extension of Norman's model of interaction, proposed by Abowd and Beale. It provides a realistic interaction description by including the system explicitly and dividing it into four main components, which are: (a) The System (b) The User (c) The Input (d) The Output Input and output together form the interface. Each component may use its own language to describe the objects and actions it deals with. 1. 2. 3. 4. O Interface Core System User Task output I input Figure 1.16: Abowd and Beale Interaction Framework 78
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N The interactive cycle starts with the User formulating goals and tasks, manipulating the machine through Input, which is translated into core language as operations performed by the System. The System transforms itself accordingly, marking the end of the execution phase. In the evaluation phase, the System communicates its new state to the User through Output. The User observes the Output, and assesses the results. Thus, it concludes the evaluation phase. This interactive cycle involves four main translations (see Figure 1.17): 5. 6. (a) Articulation The user translates task intentions into the input language. (b) Performance The input language is translated into stimuli for the system. (c) Presentation The system activities are translated into an output language. (d) Observation The output language is translated into the user’s task model. O Interface Core System User Task output I input Figure 1.17: Translation between Components (a) Articulation (b) Performance (c) Presentation (d) Observation 79
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N C H A P T E R 1 7. Figure 1.18 illustrates the cycle of the interaction framework. (a) Task Language Turning the lights off or on. (b) Input Language Flip the right switch off or on the linear rows of switches. (c) Core Language Closing or opening of the circuit for the light bulbs. (d) Output Language The light is off or on from the light bulbs. Goal [What we want to happen] Situation: I'm going to bed now, so I better turn off the light in the living room. Goal: To flip the switch. Components' Language Components' Translation (a) Articulation The user decides to turn off the light and flips a switch. (b) Performance A flipped switch closes the circuit for the light bulbs. (c) Presentation The bulbs shut off the lights. (d) Observation The user notices the room has turned dark and the light is off. Frequent Problems There are multiple switches in a large room. Figure 1.18: Interaction Framework Example 80
I N T R O D U C TI O N T O H UMA N C OMP U T E R I N T E R A C TI O N 81 Activity 1.2.3 Given a goal to read current news on the web, identify what you need to do for each of the following phases using Norman's execution-evaluation cycle : a. Goal b. Execution phase c. Evaluation phase Activity 1.2.1 Determine the input and output devices used for the following systems. a. Portable word processor b. Student management information system c. Air traffic control system d. Digital cartographic system e. Tourist information system Activity 1.2.2 Compare the interface styles and identify their differences. a. Command Line Interface vs. Menus b. Question or Answer Dialogue vs. Form-fills c. WIMP Interface vs. Point-and-Click Interface d. Web Navigation vs. Natural Language Group Activity Group Activity Group Activity
EXERCISES 1. Choose CORRECT abbreviation of "HCI". A. Human Computer Industry Human Computer Interaction Human Computer Interface Human Computer Implementation B. C. D. 2. Identify the fundamental components of HCI. A. Computer design Interaction design Nature of interaction process Nature of interactive design B. C. D. 3. Choose the MOST important set of senses in HCI from the option given. A. Taste, sight, touch Hearing, taste, touch Smell, taste, hearing Sight, touch, hearing B. C. D. 4. Identify an interface style. A. Pointer Monitor Website Natural language B. C. D. 82 Objective Questions
Identify the CORRECT statement on practical guideline in user interface design. 5. A. i, ii, and iii ii, iii and iv i, iii and iv All of the above B. C. D. Choose the CORRECT interaction style based on the characteristics in the statement below: 6. A. Menus 3D interface Web Navigation Command Line Interface B. C. D. i. Achieving required performances Fostering design standardization Maximizing system responsiveness Minimizing skill and personnel requirement ii. iii. iv. Virtual reality Use of extra virtual space System windows with visual affordance 7. Choose the MOST suitable definition for Virtual Reality (VR) systems. Pointing, and positioning 3D objects in 3D space Handwriting recognition can be in the form of image of written text on a document It is an output device that displays computer or Blu-ray images by projecting them onto a screen, wall, or surface A simulated 3D environment that lets user to explore an interact with a virtual world similar to real life A. B. C. D. 83
Common letters under dominant fingers Biased towards right hand Common combination of letters alternates between hands 10 - 15% improvement in speed and fatigue reduction 8. Humans and computers are similar in terms of: A. receive input, receive output, and process information in between receive input and manage output process input and produce output receive input, produce output and process information in between B. C. D. Choose the CORRECT type of keyboard based on the characteristics in the following statement. 9. A. Chord QWERTY Alphabetic Dvorak B. C. D. 10. Identify an element that is NOT in WIMP interface. A. Graphic software Dialogue box Icon Pointer B. C. D. 84
Establishing the goal Forming the intention specific Specific actions at the interface Give THREE (3) importance of User Interface Design in interaction between human and computer system in our real life. Define ergonomics and TWO (2) issues of ergonomics in the community. You are given a task to write a letter of explanation for not attending classes this week. Based on this situation, using Norman's execution-evaluation cycle, determine what you need to do for each of the following stages: 1. 2. 3. Explain TWO (2) importance of user interface design. 1. 2. 3. 4. 85 Structured Questions
List THREE (3) components of HCI. Identify TWO (2) issues of ergonomics in Human-Computer Interaction. List TWO (2) fundamental components of HCI. List down TWO (2) advantages and TWO (2) disadvantages of WIMP Interface style. Differentiate between Command Line Interface and Menus Interface. List THREE (3) categories of Output Devices. 5. 6. 7. 8. 9. 10. 86
ANSWER 1. Choose CORRECT abbreviation of "HCI". B. Human Computer Interaction 2. Identify the fundamental components of HCI. 3. Choose the MOST important set of senses in HCI from the option given. 4. Identify an interface style. Identify the CORRECT statement on practical guideline in user interface design. 5. C. Nature of interaction process D. Sight, touch, hearing D. Natural language Choose the CORRECT interaction style based on the characteristics in the statement below: 6. A. i, ii, and iii 7. Choose the MOST suitable definition for Virtual Reality (VR) systems. B. 3D interface A simulated 3D environment that lets user to explore an interact with a virtual world similar to real life D. 8. Humans and computers are similar in terms of: receive input, produce output, and process information in between D. Choose the CORRECT type of keyboard based on the characteristics in the following statement. 9. D. Dvorak 10. Identify an element that is NOT in WIMP interface. A. Graphic software 87 Objective Questions
Enhance user experience: A well-designed UI can create positive experience, making it easy for users to understand, and interact with the product. Increase product usability: An effective UI design focuses on usability, ensuring that the product or system is easy to use and understand. Improves efficiency and productivity: A well-designed UI allows users to perform tasks more efficient and productive in achieving their goals. Arrangement of controls and displays: Controls and display elements in a logical manner with appropriate layout and the system interface should be arranged in a way that suits the user's position, allowing easy access to controls and displays without excessive movement. Health issues: It refers to the potential consequences of system designs may have on user health and safety. Establishing the goal Forming the intention specific Specific actions at the interface Write a letter of explanation for not attending the classes. Make a formal letter to send to the lecturer. State the reasons for not attending the class. Give THREE (3) importance of User Interface Design in interaction between human and computer system in our real life. *Any relevant answers are acceptable. Define ergonomics and TWO (2) issues of ergonomics in the community. Ergonomics is a study of the physical aspects of interaction with consideration of human psychology and system limitations. *Other acceptable answers are the use of color and physical environment. You are given a task to write a letter of explanation for not attending classes this week. Based on this situation, using Norman's execution-evaluation cycle, determine what you need to do for each of the following stages: 1. 2. 3. Establishing the goal Forming the intention specific Specifies actions at interface 1. 2. 3. 88 Structured Questions
Improves efficiency and productivity: A well-designed UI allows users to perform tasks more efficient and productive in achieving their goals. Reduce errors and maintenance costs: A poorly designed UI can result in user errors, loss of data, and increased maintenance costs. Human User Computer System Nature of the Interactive Process Arrangement of controls and displays Health issues Human User Computer System Does not require complicated commands Simple navigation across different windows Takes up larger amount of hard disk space Needs more memory capacity Explain TWO (2) importance of user interface design. *Any relevant answers are acceptable. List THREE (3) components of HCI. Identify TWO (2) issues of ergonomics in Human-Computer Interaction. *Other acceptable answers: The use of color and physical environment. List TWO (2) fundamental components of HCI. *Other acceptable answers: Nature of the Interactive Process List down TWO (2) advantages and TWO (2) disadvantages of WIMP Interface style. The advantages of WIMP Interface are: The disadvantages of WIMP Interface are: *Any relevant answers are acceptable. Differentiate between Command Line Interface and Menus Interface. The Command Line Interface (CLI) gives instructions to the computer directly using function keys, single characters, abbreviations or whole-word commands. A menu-based interface, the screen presents a list of choices for the user to select from using a mouse, or touch input *Any relevant answers are acceptable. 4. 5. 6. 7. 8. 9. 89
Display device Auditory device Printing device 10. List THREE (3) categories of Output Devices. 90
91 P E N G E N A L A N I N T E R A K S I MA N U S I A K OMP U T E R
Kepentingan Rekabentuk Antaramuka Pengguna Komponen Asas HCI Kesan Teknologi Komputer terhadap Interaksi dan Gaya Antaramuka 1.1 Interaksi antara Manusia dan Komputer PETA MINDA Pelbagai Gaya Antara Muka 1.2 Penggunaan Interaksi Manusia Peranan Ergonomic dalam Reka Bentuk Antara Muka Model Interaksi 92 P E N G E N A L A N I N T E R A K S I MA N U S I A K OMP U T E R
P E N G E N A L A N I N T E R A K S I MA N U S I A D A N K OMP U T E R 93 1.1 Interaksi antara Manusia dan Komputer Definisi HCI Interaksi Komputer Manusia (HCI) ialah satu disiplin yang berkaitan dengan reka bentuk, penilaian dan pelaksanaan sistem pengkomputeran interaktif untuk kegunaan manusia dan dengan kajian fenomena utama di sekelilingnya (Hewett et al., 1992). Ia adalah bidang pengajian pelbagai disiplin yang menumpukan kepada membuat reka bentuk teknologi komputer lebih membantu dan boleh digunakan berkaitan dengan cara manusia berinteraksi dengan komputer. 1. 2. Komponen Asas HCI 1. Komponen HCI boleh dikelaskan kepada tiga (3) jenis iaitu: (a) Pengguna Manusia (b) Sistem Komputer (c) Sifat Proses Interaktif Sistem Komputer Pengguna Manusia Sifat Proses Interaktif Rajah 1.1: Hubungan antara Komponen Utama dalam HCI 2. Hubungan antara tiga komponen utama adalah seperti yang ditunjukkan dalam Rajah 1.1 dan penerangannya seperti dalam Jadual 1.1.
Komponen HCI Penerangan (a) Pengguna Manusia Pengguna manusia merujuk kepada pengguna yang terdiri daripada individu atau sekumpulan pengguna yang saling bekerjasama (Jones, 2011). Manusia mempunyai kapasiti yang terhad untuk memproses maklumat berbanding dengan komputer. Maklumat yang diterima dan maklum balas oleh manusia boleh didapati melalui pelbagai saluran input dan output: Maklumat disimpan dalam ingatan : (a) Saluran visual : Penglihatan (b) Saluran auditori : Pendengaran (c) Saluran haptik : Sentuh (d) Pergerakan : Kawalan motor (a) Ingatan deria (b) Ingatan jangka pendek (Bekerja). (c) Ingatan jangka panjang (b) Sistem Komputer Komputer ialah peranti yang menerima maklumat (dalam bentuk data digital) dan memanipulasinya untuk hasil tertentu berdasarkan program (TechTarget, 2019). Sistem komputer terdiri daripada: (a) Peranti input (b) Peranti output (c) Peranti ingatan (storan). (d) Peranti pemprosesan P E N G E N A L A N I N T E R A K S I MA N U S I A D A N K OMP U T E R Jadual 1.1: Penerangan tentang Komponen HCI 94
P E N G E N A L A N I N T E R A K S I MA N U S I A D A N K OMP U T E R Komponen HCI Penerangan (c) Sifat Proses Interaksi Interaksi merujuk kepada proses pemindahan maklumat, daripada pengguna kepada komputer dan daripada komputer kepada pengguna (Dix et al., 2011). Ia adalah komunikasi antara manusia (pengguna) dan komputer. Interaksi yang berjaya memerlukan komunikasi yang berkesan antara manusia dan komputer. Interaksi melibatkan: (a) Peranti interaksi (teknologi) (b) Gaya interaksi Tidak banyak perbezaan antara pengguna manusia dan sistem komputer, seperti yang ditunjukkan dalam Rajah 1.2. Sebenarnya, manusia dan sistem komputer adalah sama kerana kedua-duanya : (a) Mendapat atau menerima input (b) Menghasilkan atau menghantar keluaran (c) Memproses maklumat di antara (d) Menyimpan maklumat dalam memori. Manusia (Proses maklumat) Sistem komputer (Proses maklumat) Memori Memori Input Output Input Output Rajah 1.2: Persamaan antara Pengguna Manusia dan Sistem Komputer Jadual 1.1: Penerangan tentang Komponen HCI (Sambungan) 95 3.
P E N G E N A L A N I N T E R A K S I MA N U S I A D A N K OMP U T E R Kepentingan Reka Bentuk Antara Muka Pengguna (UI) Tingkatkan pengalaman pengguna: Reka bentuk antara muka pengguna (UI) memberi kesan kepada cara pengguna berinteraksi dengan sistem atau produk. UI yang direka bentuk dengan baik boleh mencipta pengalaman positif, memudahkan pengguna memahami dan berinteraksi dengan produk. Reka bentuk UI yang tidak mesra pengguna boleh mengecewakan pengguna dan mereka memilih untuk tidak menggunakan produk atau sistem. Tingkatkan kebolehgunaan produk: Reka bentuk UI yang berkesan memfokuskan pada kebolehgunaan, memastikan produk atau sistem mudah digunakan dan difahami. Ia membolehkan pengguna mempelajari cara menggunakan produk dengan cepat. Meningkatkan kecekapan dan produktiviti: UI yang direka bentuk dengan baik membolehkan pengguna melaksanakan tugas dengan lebih cekap dan produktif dalam mencapai matlamat mereka. Menu yang teratur, navigasi intuitif dan maklum balas yang jelas boleh menjimatkan masa dan usaha pengguna, yang membawa kepada peningkatan produktiviti. Kurangkan ralat dan kos penyelenggaraan: UI yang direka bentuk dengan kurang baik boleh mengakibatkan ralat pengguna, kehilangan data dan peningkatan kos penyelenggaraan. UI yang direka bentuk dengan baik berserta arahan yang jelas boleh meminimumkan ralat pengguna, mengurangkan kos penyelenggaraan dan meningkatkan pengalaman pengguna. Meningkatkan imej jenama: Penjenamaan dan identiti visual produk adalah bahagian penting dalam reka bentuk UI. Reka bentuk UI yang konsisten dan menarik secara visual boleh meningkatkan profesionalisme, kredibiliti dan mengukuhkan imej jenama dalam membantu membezakan produk daripada pesaing. 1. 2. 3. 4. 5. 96