HCI BASICS: AN INTRODUCTION TO HUMAN-COMPUTER INTERACTION

HUMAN-COMPUTER INTERACTION HCI BASICS: AN INTRODUCTION TO A DUAL LANGUAGE EDITION EDISI DWI BAHASA Nur Hazimah Khalid Noor Aishah Zainiar Siti Dianah Abdul Bujang INTERAKSI MANUSIA-KOMPUTER ASAS HCI: PENGENALAN KEPADA

Nur Hazimah Khalid Noor Aishah Zainiar Siti Dianah Abdul Bujang HUMAN-COMPUTER INTERACTION HCI BASICS: AN INTRODUCTION TO A DUAL LANGUAGE EDITION EDISI DWI BAHASA PUBL ISHER P E N E R B IT IINNTTEERRAAKKSSII MMAANNUUSSIIAA--KKOOMMPPUUTTEERR ASAS HCI: PENGENALAN KEPADA

POL I T E KNI K SUL T AN IDR IS SHAH K EMENT E R I AN PENDIDI K AN T INGGI ALL RIGHTS RESERVED FIRST ISSUE 2023 All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, including electronic, mechanical, photocopying, recording, or otherwise, without the written permission of the Owner and Publisher of Politeknik Sultan Idris Shah. e ISBN 978-967-2860-66-2 Published by: Politeknik Sultan Idris Shah Sungai Lang, 45100 Sungai Air Tawar, Selangor Darul Ehsan. Contact : 03-3280 6200 Fax : 03-3280 6400 Website : www.psis.mypolycc.edu.my

Alhamdulillah, all praises and thanks to Allah because of His Almighty for giving us the strength and His utmost blessings, we were able to complete this eBook. We would like to take this opportunity to express our sincere and heartiest gratitude to our Head of Department, and reviewer panels for their constructive comments and consultations, and guidance, that nothing is comparable to the keen advice they provided for us in completing this eBook. Lastly, we would to express our deepest appreciation to our family members and colleagues for their understanding, supports, encouragement, cooperation, and continuous motivations throughout this journey. ACKNOWLEDGEMENT I PENGHARGAAN

This is perhaps the first-ever dual language book on Human Computer Interaction (HCI), specifically designed for polytechnic students. The main purpose of creating and publishing this book is to improve the learning experience and offer flexibility by allowing polytechnic students to study in their native language, Bahasa Malaysia, while also being exposed to the English language. This approach enables students to better understand complex concepts by utilizing their existing language skills and cultural knowledge. Furthermore, the book serves as an academic resource, providing students with definitions, explanations, and examples in both their native language and the target language. The first volume of this book explores the fundamentals of Human-Computer Interaction (HCI), including its definition, components, importance, human interaction usage, impact of computer technology on interactions and interface styles, various interface styles, ergonomic roles in user interface design, interaction models, and effective design principles. It offers numerous examples with visuals like diagrams, pictures, mind maps, mnemonics, in-class activities, and chapter-end exercises. These resources support educators and students in learning and assessing their understanding of the subject. PREFACE II PRAKATA

III SYNOPSIS Human Computer Interaction (HCI) is the study of how people interact with computers and to what extent computers are or are not developed for successful interaction with human beings. HCI has always been a part of technology and design, but it is on the rise as technology becomes more integrated with our daily lives. HCI is a vital skill for any developer, or designer who wants to design for the future with the aims of creating design that can be used by anyone in any circumstances. This comprehensive book on Human-Computer Interaction (HCI) covers various aspects such as significance of HCI in the digital world, focusing on how humans interact with technology and the impact of computer technology on interaction processes and interface styles. The book also examines ergonomic roles in user interface design, while providing insights into interaction models and the principles behind well-design interface designs. In summary, this book is a comprehensive guide to understanding the fundamentals of HCI, with aims providing the educators and students explicitly with a solid foundation in HCI and equips them with the knowledge and skills to create effective and user-friendly interface designs. SINOPSIS

GLOS SARY / GLOSARI 1 8 3 ACKNOWL EDGEMENT / PENGHARGAAN 1 PRE FACE / PRAKATA 2 SYNOPS I S / S INOPS I S 3 CONT ENT S / I S I KANDUNGAN 4 The interaction between human and computer Definition of HCI The fundamental components The importance of user interface (UI) design Human interaction usage The impact of computer technology towards the nature of interaction and interface style Various interface styles Ergonomics roles of in interface design. Models of interaction Exercise Answer INTRODUCTION TOHUMAN COMPUTER INTERACTION PENGENALAN INTERAKSI MANUSIA KOMPUTER Interaksi antara Manusia dan Komputer Definisi HCI Komponen Asas HCI Kepentingan Rekabentuk Antaramuka Pengguna (UI) Penggunaan Interaksi Manusia Kesan teknologi komputer terhadap interaksi dan gaya antaramuka Pelbagai gaya antaramuka Peranan Ergonomik dalam Rekabentuk Antaramuka Model Interaksi Latihan Jawapan 91 5 ENGLISH LANGUAGE BAHASA MALAYSIA RE F ERENCE / RUJUKAN 197 AUTHORS BACKGROUND / LATAR BE LAKANG PENUL I S 200 CONTENT IV ISI KANDUNGAN

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

Importance of UI Design Fundamental components of HCI The impact of Computer Technology towards the Nature of Interaction and Interface Style 1.1 Interaction between Human and Computer THE MIND MAP Various Interface Styles 1.2 Human Interaction Usage Ergonomic Roles in Interface Design Interaction Model 6 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

1.1 Interaction between Human and Computer Computer System Human User Nature of Interactive Process 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 Definition of HCI Human-Computer Interaction (HCI) is a discipline concerned with the design, evaluation, and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them (Hewett et al., 1992). It is a multi-disciplinary field of study that concentrates on making the design of computer technology more helpful and usable with regard to how humans interact with computers. 1. 2. Fundamental Components of HCI 1. The fundamental components of HCI can be classified into three (3) types, namely: (a) Human User (b) Computer System (c) Nature of the Interactive Process 2. The relationship among the three components is as shown in Figure 1.1 and their description as in Table 1.1. Figure 1.1: Relationship of Main Components of HCI 7

HCI Components Descriptions (a) Human User Human user refers to an individual user or a group of users that are working together (Jones, 2011). A humans have limited capacity to process information compared to a computer. Information is received and responses are given through various input and output channels : Information is stored in memory : (a) Visual channel : Sight (b) Auditory channel : Hearing (c) Haptic channel : Touch (d) Movement : Motor control (a) Sensory memory (b) Short-term (Working) memory (c) Long-term memory (b) Computer System A computer is a device that accepts information (in the form of digitalized data) and manipulates it for a certain outcome based on a program (TechTarget, 2019). Computer systems consist of : (a) Input devices (b) Output devices (c) Memory (storage) devices (d) Processing devices 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 Table 1.1: HCI Components and Their Descriptions 8

HCI Components Descriptions (c) Nature of Interaction Process Interaction refers to the process of information transfer, from the user to the computer and from the computer to the user (Dix et al., 2011). It is communication between humans (the user) and computers. Successful interaction requires effective communication between humans and computers. Interaction involves : (a) Interaction devices (technology) (b) Interaction styles 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 3. There is not much difference between human users and computer systems, as shown in Figure 1.2. In fact, human users and computer systems are similar in that they both : (a) Receive or accept input (b) Produce or transmit output (c) Process information in between (d) Store information in memory. Human User (Process Information) Computer System (Process Information) Memory Memory Input Output Input Output Figure 1.2: Similarities between Human User and Computer System 9 Table 1.1: HCI Components and Their Descriptions (Continuation)

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 Importance of User Interface (UI) Design Enhance the user experience: UI design impacts how users interact with a system or product. A well-designed UI can create a positive experience, making it easy for users to understand and interact with the product. A poor UI design can frustrate users,and give them a negative experience and they may choose not to use the product or system. Increase product usability: An effective UI design focuses on usability, ensuring that the product or system is easy to use and understand. It allows users to quickly learn how to use the product. Improves efficiency and productivity: A well-designed UI allows users to perform tasks more efficiently and productively, achieving their goals. Well-organised menus, intuitive navigation, and clear feedback can save users time and effort, leading to increased productivity. Reduce errors and maintenance costs: A poorly designed UI can result in user errors, loss of data, and increased maintenance costs. A well-designed UI with clear instructions can minimise user errors, reduce maintenance costs, and enhance the overall user experience. Enhances brand image: UI design is an important part of a product's overall branding and visual identity. Consistent and visually appealing UI design can increase professionalism, credibility, and strengthen the brand's image to help differentiate the product from competitors. 1. 2. 3. 4. 5. 10

6. Increases user engagement and retention: A visually appealing and easy-to-use UI can improve user engagement and retention. Users are more likely to continue using a product that is visually appealing, enjoyable to use, and meets their needs. A welldesigned UI can also encourage users to explore more features, increasing their engagement and retention. Activity 1.1.1 Determine all the input, process, memory, and output for the following device or technology. a. Digital camera b. Word processor c. Automated teller machine (ATM) d. Scientific calculator 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 11 Group Activity Activity 1.1.2 Find two products or systems. One product with well-designed UI and another product with poor-designed UI. Describe the features, advantages and disadvantages of each UI design. Suggest suitable corrections for the poor-designed UI. Group Activity

1.2 Human interaction usage Computer Technology Input Device Output Device Virtual Reality Systems and 3D Virtualization Physical Controls and Sensors Memory Capacity Processing Speed Figure 1.3: Types of Computer Technology 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 Impact of Computer Technology towards the Nature of Interaction and Interface Style As computer technology progresses, it has changed the nature of interaction processes and interface styles between humans and computers over the years. Figure 1.3 shows the types of computer technology. Nature of interaction process or interaction refers to the process of information transfer between user and computer (Dix et al., 2011). An example of interaction is the user entering text using the keyboard to send messages. Interaction styles are the ways the user can communicate with or interact with the computer system (Soegaard, 2002). An example of interaction style is how the finger placement of the user is based on the keyboard layout for entering text quicker. 1. 2. 3. 12

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. Input Device An Input Device is a piece of equipment that allows users to input textual data, instructions, or commands into a computer or other electronic device. It enables communication between the user and the computer system. Categories of input device : (a) Text entry device (b) Positioning, pointing, and drawing device 1. 2. Keyboard QWERTY Keyboard The layout of digits and letters on the QWERTY keyboard is fixed. The layout of non-alphanumeric keys varies between keyboards. The left index finger is placed on the F key, and the right index finger is placed on the J key. The rest of the left hand fingers are on the A, S, and D keys, and the rest of the right hand fingers are on the J, K, and L keys. Though not optimal for typing, the QWERTY keyboard's similarity to mechanical typewriters has made it the dominant layout due to trained typists' familiarity. QWERTY Keyboard Nature of the interaction process : Entering textual data or commands. Interface Style : Advantages / Disadvantages Text Entry Device 13

Chord Keyboard Only four or five keys are used and capable of one-hand operation on the chord keyset. Letters are produced by pressing one or more keys at once. Press the fifth key once for the letter A. Press the fourth key once for the letter B. Press the fourth and fifth keys at once for the letter C. The chord keyboard is compact and simple to use. Fairly short on learning time and capable of fast typing speeds in the hands of a competent user. Lack of familiarity and the required recall made it unlikely to be the mainstream text entry device. Chord Keyboard Nature of the interaction process : Entering textual data or commands. Interface Style : Advantages / Disadvantages DVORAK Keyboard The layout tends to have a higher concentration of consonants on the right side of the home row and vowels on the left side. DVORAK Keyboard Nature of the interaction process : Entering textual data or commands. Interface Style : 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 14

Common combinations of letters alternate between hands. It is biassed towards the right. The placement of letters on the Dvorak keyboard is based on various factors, including letter frequency, finger strength, and hand alternation. The Dvorak layout was mainly created for English, making it most effective for optimising typing in that language. Other languages may require different keyboard layouts to suit their specific linguistic characteristics. The layout increases typing speed and comfort by placing commonly used keys under stronger and more dexterous fingers. It provides a 10-15% improvement in speed and a reduction in fatigue. Advantages / Disadvantages Handwriting Recognition Offline Handwriting Recognition Handwriting recognition can be in the form of an image of written text on a document (offline HTR) or written text using a tablet and stylus (online HTR). Handwriting Recognition (HTR) Nature of the interaction process : Entering textual data. Interface Style : 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 15

Online Handwriting Recognition Handwriting recognition software will try to read and recognise the writing in images of handwritten documents and generate a digital text file. As for other forms, the handwriting recognition software will generate digital text from handwriting as the user writes it with a tablet and stylus. Current offline handwriting recognition technology is still fairly inaccurate and makes a significant number of mistakes in recognising letters. Individuals handwriting differences are huge, making the recognition process even more difficult. The online handwriting recognition via a pen-based system is small, easy to use, and more accurate. Advantages / Disadvantages Speech Recognition Speech Recognition The user will speak in natural language using a microphone. The speech is converted from a physical sound to an electrical signal and then to digital data with an analogue-to-digital converter (Amos, 2018). Speech Recognition Nature of the interaction process : Entering textual data. Interface Style : 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 16

Once digitised, the speech recognition systems will transcribe the audio to text. It is difficult to understand natural language as every person speaks differently. The sound recognition system has to be trained and tuned to each new speaker, or its performance will decrease. Background noise, strong accents, and unstable emotion can also cause speech recognition problems. Advantages / Disadvantages Mouse Optical Mouse It is small and palm-sized. It can be wired, wireless, or Bluetooth. The optical mouse uses infrared LED light to bounce off surfaces to track movement. The classic mouse uses a weighted ball that rotates, detected by rollers that adjust the values of potentiometers for movement. The movement information is passed to the computer, which moves a pointer on the screen or cursor. The Mouse Nature of the interaction process : Pointing, positioning selected items, and free-hand drawing. Interface Style : 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 Positioning, Pointing and Drawing Device 17

Classic Mouse It has one to three buttons on top, indicating selection or initiating action. Wired mice are limited by the cord length, while wireless and Bluetooth mice offer unrestricted movement. Wireless and Bluetooth mouse may require batteries to operate. A wired mouse has better accuracy than a wireless or Bluetooth mouse. It requires physical space for the mouse to move the cursor. Advantages / Disadvantages Trackball Trackballs It is small and comes in a variety of sizes. It can be wired, wireless, or Bluetooth. It uses a weighted ball that faces upwards and rotates, detected by rollers, adjusting the values of potentiometers for movement. The movement information is passed to the computer, which moves the cursor. The user does not require physical space to move the trackball. It has one to four buttons indicating selection or initiating action. Trackball Nature of the interaction process : Pointing, positioning selected items, and free-hand drawing. Interface Style : 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 18

Thumbwheel Trackball It is fairly accurate, highly responsive, and allows fast scrolling. Suitable for users who have limited desk space and can work on any surface. It is more ergonomic and feels less straining on the hand. It is usually symmetrical and can be used by both left-handed and righthanded users with a small adjustment in the settings. Advantages / Disadvantages Touch-sensitive Screens (Touchscreens) Touchscreens It detects the user's finger or stylus pen on the screen. The user selects items on the screen using their finger or stylus. It operates through finger or stylus interaction with light beams, capacitance changes, or ultrasonic reflections on the screen. It is very fast and intuitive to use. Using the finger to point can leave greasy marks on the screen and make accurate selection harder. Using a stylus pen can give more accurate selection and drawing. Touchscreens Nature of the interaction process : Pointing, positioning selected items, and drawing. Interface Style : Advantages / Disadvantages 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 19

Eyegaze Eyegaze Technology It allows the user to control the computer by simply looking at it. A low-power laser is reflected off the retina as the eye angle changes, allowing the eyegaze system to determine eye direction. Calibration is required initially by staring at dots on the screen, but afterwards, the system can move the cursor or be used for specialised tasks. It is a very fast and accurate device. It is an expensive device. It is used in military applications to guide air-to-air missiles to targets. Patients with mobility-limiting diseases can use it for controlling the computer and communication. Eyegaze Nature of the interaction process : Pointing, and positioning selected items. Interface Style : Advantages / Disadvantages Stylus and Light Pen Stylus Pen Stylus and light pen is a small penlike plastic stick. The light pen is connected to the screen by a cable. Stylus and Light Pen Nature of the interaction process : Pointing, positioning selected items and drawing. Interface Style : 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 20

Light Pen Stylus is often used together with PDAs and touchscreen devices. Both can be tiring to use on upright displays and are cumbersome with a keyboard. Both have very direct and immediate interactions between the device and the selected items on the screen. An unattached stylus can easily get lost. Advantages / Disadvantages Monitors / Displays Flat-panel Display The monitors or displays give visual output by displaying text, graphics, images, and video on a screen. It is composed of numerous coloured pixels on a rectangular grid. Monitors / Displays Nature of the interaction process : View or display process data (output). Interface Style : 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. Output Device An Output device is a piece of equipment or hardware that performs the task of delivering or displaying the processed data by the computer, such as text, graphics, sound, and video, to the user. Categories of output devices : (a) Display device (b) Auditory device (c) Printing device 1. 2. Display Device 21

Cathode Ray Tube (CRT) Monitor Liquid Crystal Display (LCD) Monitor There is a direct link between pixels and resolution, where a higher resolution equals a higher number of pixels on a monitor or display screen. There are numerous types of monitor technologies, including Cathode Ray Tube (CRT) monitors and flat-panel displays (FPD) such as Liquid Crystal Display (LCD) monitors, Light Emitting Diode (LED) monitors, and many others. CRT monitors use cathode ray tubes that produce images through a beam of electrons that hits a phosphorescent screen. Flat-panel displays are compact, lightweight, and portable. It uses liquid crystals and polarised glass layers to allow varying levels of light to create images on the screen. The CRT monitor is a cheap display device, has fast enough response times, and has high colour capability. However, CRT monitors are bulky compared to flat-panel displays. The flat-panel displays emit lowintensity light with reduced flicker, resulting in less eyestrain and fatigue compared to standard CRT monitors. It consume less power, produce less heat, and emit no harmful radiation. Advantages / Disadvantages 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 22

Printer Inkjet Printer Laser Printer 3D Printer It is an output device that takes the electronic data stored in a computer or other devices and generates hard copies on paper, 3D objects, or other mediums. The printer is connected to the computer either through a USB cable or over Wi-Fi. Inkjet printers, laser printers, 3D printers, and all-in-one printers are some of the types of printers. Printers provide a tangible output by producing hard copies of digital documents or 3D objects. Printers are able to produce highquality prints and accurately reproduce colours, textures, and fine details, resulting in visually appealing outputs. Printer costs, including ink, toner cartridges, and paper, can accumulate and become expensive. Printers have a limited lifespan and require regular maintenance and repairs over time. Printer Nature of the interaction process : View or display processed data. Interface Style : Advantages / Disadvantages 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 23

Projector LCD Projector DLP Projector It is an output device that displays computer or Blu-ray images by projecting them onto a screen, wall, or surface (Hope, 2021). It connects to a computer for input using HDMI or VGA cables. The projector can produce still images or moving images (videos). Inside the projector, a light source emits light through a lens, and an inverted image is magnified onto a screen, wall, or surface. There are numerous types of projectors, including Liquid Crystal Display (LCD) projectors, Digital Light Processing (DLP) projectors, and others. Each type uses different technologies to generate the image. Projectors are a portable, lightweight, and cost-effective solution for creating large displays. Ambient light can impact projected images, leading to lower brightness and contrast. Additionally, limited viewing angles require viewers to be positioned within a specific range for optimal image visibility. Projector Nature of the interaction process : View or display process data (output). Interface Style : Advantages / Disadvantages 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 24

C. Virtual Reality Systems and 3D Virtualization Cockpit and Virtual Control VR Flight Simulation Aircraft cockpit simulation gives the user the control to safely and realistically train and simulate flying the aircraft. Various virtual flight controllers are available, including keyboard buttons, mice, VR headsets, joysticks, and throttle quadrants. The virtual flight controllers are expensive and require a lot of practise to master the skills. Cockpit and Virtual Control Nature of the interaction process : Pointing, and positioning 3D objects in 3D space. Interface Style : Advantages / Disadvantages 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 Virtual Reality (VR) systems, also called Virtual Reality (VR) are simulated 3D environments that let users explore and interact with a virtual world similar to real life (Sheldon, 2022). VR and 3D visualisation require users to navigate and interact in a three-dimensional space. Controls, screen displays, and specialised devices enable interaction and navigation with 3D objects in 3D space. Categories of VR systems and 3D visualisation : (a) 3D space positioning device (b) 3D Displays 1. 2. 3. 4. 3D Space Positioning Device 25

The 3D Mouse 3D Mouse The user can move the mouse on a tabletop or pick it up and move it by rotating and tilting it in various directions. The 3D mouse has a full six degrees of freedom as its position can be tracked, which are up/down angle (pitch), left/right orientation (yaw), and rotational twist (roll), as shown in Figure 1.4. Various sensors are used to track the mouse's position and orientation. It gives a faster experience and increases productivity for the users. However, users may experience strain from having to hold the mouse in the air for a long period of time. The 3D Mouse Nature of the interaction process : Pointing, and positioning 3D objects in 3D space Interface Style : Advantages / Disadvantages 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 Figure 1.4: Pitch, Yaw and Roll Position 26

Dataglove Dataglove It is a 3D input device made up of lycra with optical fibres laid along the fingers (Dix et al., 2011). As the fingers bend, the fibre optic cable detects the joint angles of the fingers and thumb. Two sensors that use ultrasound are attached at the glove's top to determine 3D positional information and the degree of wrist rotation. It is very easy to use, very powerful and expressive. It is expensive and difficult to use with a keyboard. Dataglove Nature of the interaction process : Pointing, and positioning 3D objects in 3D space Interface Style : Advantages / Disadvantages VR Headset VR Headset VR headsets, or VR helmets, are head-mounted wearables that provide a 3D environment and track information from human senses (Mattoo, 2022). VR Headset Nature of the interaction process : Viewing the 3D world with each eye, pointing, and positioning 3D objects in 3D space. Interface Style : 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 27

VR Headset with VR Controller It includes separate images for each eye (stereoscopic vision, as shown in Figure 1.5), stereo sound, and sensors for tracking the user's head position and eye movement. It works in sync with input trackers like datagloves, VR controllers, full body suits, treadmills, joysticks, and motion trackers to produce output. VR headsets provide a highly immersive and realistic experience, enhance user engagement, and offer a unique gaming experience. However, VR headsets can be expensive, limit users' physical movement, and cause motion sickness or discomfort. Advantages / Disadvantages 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 Figure 1.5: Stereoscopic Vision 28

Whole-body Tracking Wearable Tracking Device for Whole Body Tracking Whole-body tracking, or full-body tracking, detects every movement of the body in real time, providing a more realistic and immersive VR experience. It includes wearable body tracking devices, such as accelerometers strapped to limbs or reflective dots that help track every little movement, and video processing. It gives an immersive and realistic experience and offers an exciting gaming experience. However, it is very expensive, requires a lot of time to set up, and requires high computing power. Whole-body Tracking Nature of the interaction process : Viewing 3D world to each eye, pointing, and positioning 3D objects in 3D space. Interface Style : Advantages / Disadvantages Desktop VR Desktop VR Desktop VR uses a computer monitor screen as a display to provide a graphical interface for users. Desktop VR Nature of the interaction process : Viewing 3D images. Interface Style : 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 Displays 29

It is cost-effective when compared to immersive VR as it does not require any expensive hardware or software and is also relatively easy to develop. However, it lacks immersion quality. Advantages / Disadvantages Hologram Hologram It displays 3D images created by intersecting light beams that reflect real objects (Reaber, 2021). Unlike regular 3D projections, holograms can be seen without the need for special glasses or equipment. It offers a high level of realism and accurately represents objects or scenes in 3D. It allows users to interact with virtual objects to enhance engagement and the user experience. It has limited viewing angles, which can restrict the user's overall viewing experience. Holograms are sensitive to lighting conditions, and variations in lighting can affect their visibility and quality. Hologram Nature of the interaction process : Viewing and pointing at 3D objects. Interface Style : Advantages / Disadvantages 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 30

Simulator Racing Simulator Flight Simulator It is a machine that recreates or imitates the functions or behaviour of a real-world situation or process. A simulator is commonly used in various fields such as aviation, driving, military training, medical training, and gaming. It often incorporates realistic controls, visuals, and feedback mechanisms to provide an immersive and interactive experience that mimics real-world conditions as closely as possible. Simulators allow users to gain practical experience, learn skills, and practise in a safe and controlled environment without the risks or costs associated with real-world scenarios. However, simulators can be costly, may not fully replicate real-world complexities, and have limitations in transferring skills to real-life situations. Simulator Nature of the interaction process : Viewing 3D world to each eye, pointing, and positioning 3D objects in 3D space. Interface Style : Advantages / Disadvantages 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 31

D. Physical Controls and Sensors Devices Modern computers such as interactive TV, in-car navigation, home appliances, or personal entertainment may use human senses through sound, touch, feel, and smell, have dedicated controls, and sense the environment. They expand the capabilities of computer systems beyond traditional computer systems, allowing for enhanced user experiences, usability, and productivity. In the context of modern computer systems, physical controls is refers to the user's ability to manipulate or operate a device or system through direct physical interaction with its controls or interfaces. Sensors detect and measure physical phenomena or environmental conditions and provide input for various applications. Several physical controls and sensor devices that will be covered are shown in Figure 1.6. 1. 2. 3. 4. 5. Human Senses Sensors Physical Controls (a) Hearing (Sound) (b) Touch (c) Smell (a) Temperature Sensor (b) Motion Sensor (c) Weight Sensor (a) Buttons (b) Knobs (c) Gear Selector Figure 1.6: Physical Controls and Sensors 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 32

Sound gives an indication of system output and user feedback in an interactive system. Keyboard: When the user presses a key on the keyboard, it emits a click sound for each key pressed. Thus, it speeds up the interactive performance as it signifies that the key has been successfully pressed. Washing Machine: When the washing machine has finished the washing cycle, it plays multiple beep sounds or melodies, indicating the task has been completed. Then, the user can pick up their laundry. Hearing (Sound Output) Nature of the interaction process: Hearing sound from a system or device. Interface Style: 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 Human Senses Keyboard: “Click.. Click..Click..” The User: ”Wow!! I can actually type fast with this keyboard, thanks to this awesome sound!” Washing Machine: ”Beeep.. Beeep.. Beeep..” The User: ”Okay, I’m coming.. It’s time to pick up the laundry..” Keyboard Washing Machine 33

Technology that allows users to experience touch and feel by applying forces, vibrations, textures, or motions is called a haptic device. Gaming Steering Wheel: In the car racing game, when the car was about to go off track, the user felt the vibrations in the steering wheel. This enhanced the user's gaming experience. Electronic Braille: When reading a text through touch, the user can feel the rising or falling sensation, which may give different patterns or involve small vibrations. This eases the user's reading process. VR Surgical Simulator: When performing surgery via VR, the user can feel different amounts of resistance as the instrument moves through different tissue types. It gives an authentic surgical experience based on what the user sees and feels immediately. Touch and Feel Nature of the interaction process: Touching and feeling to or from a system or device. Interface Style: The User: ”No.. No.. Oh, please don't go out of track now! It's almost to the finish line. Common!” 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 Gaming Steering Wheel 34

The User: ”Wow! This display can translate online-text into braille. Now I can read online content wherever I go.” 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 User: ”I can feel various tissue layers as the cut goes in deeper and this does feel like a real surgical operation.. Amazing!” Smell is one of the strongest cues for memory. Jorvik Viking Centre, York, England: It uses smells to create a multisensory experience for visitors, allowing them to imagine what life was like in York during the 10th century (AD 948) as they explore the different areas of the museum. Smell Nature of the interaction process: Smell something from the device. Interface Style: Electronic Braille VR Surgical Simulator 35

Each type of control has a different usage and practical reason. BMW i-Drive Control Centre: It is used together with the touch control screen. The feature control buttons are clustered together on a single panel, such as the driver menu setting, media, map, navigation, and communication. The knob is used to browse menu options that are displayed on the screen by rotating it to the left or right and pressing it to select the option. The gear selector allows the user to control the gear selection. Microwave: It has a flat plastic button on the control panel. Since hands can get greasy or have food on them, the smooth controls without any gaps prevent food from accumulating and clogging the buttons. This design makes it easy to keep the controls clean and hygienic. Buttons, Knobs and Gear Selector Nature of the interaction process: Selecting and positioning selected categories or items. Interface Style: The User: ”Sniff.. Sniff.. Hmm.. This is what York during the 10th century smells like.. A bit of old scents it is.” 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 Physical Controls Jorvik Viking Centre, York England 36

It is a device that measures the temperature of its environment and converts the input data into electronic data to record, monitor, or signal temperature changes (Jost, 2019). Thermal Temperature Scanner: It is a device that is placed around the eye level of an individual and assesses their current body temperature without any contact using infrared sensing. If the readings are normal, the individual can then access the public area of their choosing. However, in the event of a hightemperature detection, the scanner sounds an alarm or notification. Temperature Sensor Nature of the interaction process: Detecting and monitoring the temperature of surrounding conditions. Interface Style: Gear Selector Buttons Knob Sensors 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 BMW i-Drive Control Centre Microwave Thermal Temperature Scanner 37

It is a device that detects physical movement or motion within its surrounding area. It typically uses various technologies such as infrared, ultrasonic, or microwave to sense changes in the environment and trigger a response. Automatic Water Tap: The user simply puts their hands under the tap, and the water automatically flows as it detects the presence of the hands within a specific distance. The tap is controlled by a small infrared sensor that is triggered when the hands are under the tap. Automatic Sliding Door: The door slides open by sensing the movement and presence of a person nearby. The door controller receives a signal from the sensor, activating the motorised opening and closing functions. Automatic Lighting Systems: Many lighting systems incorporate motion sensors to automatically turn lights on or off based on the presence or movement of individuals. This is commonly used in outdoor lighting, stairwell lighting, and energy-saving applications. Motion Sensor / Detector Nature of the interaction process: Detecting and monitoring physical movement in the surrounding. Interface Style: 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 Automatic Water Tap Automatic Sliding Door Automatic Lighting Systems 38

It is also known as a load cell, and it is a device that measures the force or weight applied to it. It converts the physical force into an electrical signal that can be further processed or measured. Bathroom Scales: Bathroom scales use weight sensors to measure a person's body weight accurately. The sensors detect the force exerted on the scale and convert it into a weight reading. Luggage Weighing Devices: Airports and travel facilities often have luggage weighing devices that incorporate weight sensors. These sensors help passengers determine the weight of their luggage and ensure compliance with airline weight restrictions. Retail Point-of-Sale (POS) Systems: Some retail checkout systems include weight sensors integrated into the point-of-sale terminal or counter. These sensors enable the accurate weighing of produce, bulk items, or goods sold by weight, ensuring correct pricing and inventory management. Weight Sensor Nature of the interaction process: Detecting and monitoring the weight of objects. Interface Style: 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 Bathroom Scales Luggage Weighing Devices Retail Point-of-Sale (POS) Systems 39

E. Memory Capacity 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 memory functions similarly to human memory, as both can capture information, store it in a systematic manner, and retrieve the information from the memory. Besides that, memory that has quicker access generally has lower memory capacity. This resembles short-term memory (STM) for humans and random access memory (RAM) for computers (see Figure 1.7). Humans long-term memory (LTM) is similar to a computer's hard disc (see Figure 1.8), which has slower access as it takes longer to respond but has higher memory capacity as it can store large quantities of data. It is easier for humans to recognise an event or piece of information than to recall it. This leads to the use of a Graphical User Interface (GUI) over an instruction-based interface. Moreover, humans tend to remember images better than words, so the use of icons is more preferable as compared to words. Categories of Memory Capacity: (a) RAM (Short-term Memory) (b) Disks (Long-term Memory) 1. 2. 3. 4. 5. Figure 1.7: RAM Figure 1.8: Disc 40

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 RAM (Short-term Memory) Most active information is stored in memory cell on a silicon-integrated circuit memory chip RAM. Various types of RAM vary in terms of their specific access times, power usage, and characteristics. Access times for typical RAM are approximately 10 nanoseconds, with a data transfer rate of roughly 100 million bytes per second. The storage capacity of today's modern personal computers is between 2 and 32 gigabytes. Most RAM is volatile, meaning its contents are lost when the power is shut off. However, many computers have a small amount of non-volatile RAM that retains its content with the help of a small battery. In PDAs, the types of memory become unclear due to the presence of battery power, which keeps the system running and allows RAM memory to effectively last indefinitely. Some PDAs also utilise flash memory. Flash memory is slower to write, but once data is written, it remains intact even without power. This scenario is often referred to as silicon discs on PDAs. Digital cameras typically save photos on various forms of flash media, and small flash-based devices (or USB flash drives) are used to connect to a laptop's or desktop's USB port for data transfer. 1. 2. 3. 4. 5. 6. 7. 8. 41

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 Disc (Long-term Memory) There are two types of discs technology: magnetic discs and optical discs. Floppy discs and hard discs are storage media that use magnetic discs for storing data. The storage capacity of a floppy disc is around 300 kilobytes and 1.4 million bytes, while hard discs may store under 40 million bytes to 100 gigabytes. Access times for typical hard discs are approximately 10 milliseconds, with a data transfer rate of roughly 100 kilobytes per second once the right track is found. Optical discs are more robust than magnetic discs. It uses laser light to read and sometimes write the information on the disc. The most common optical device is a CD-ROM. CD-ROM storage capacity is around 650 megabytes but cannot be written completely. They are useful for published material such as online reference books, multimedia, and software distribution. Recordable CDs are a type of WORM (write-once, read-many) device that offers flexibility, allowing information to be written once at any location. They are valuable for creating backups and generating highly secure audit information. Finally, there are fully rewritable optical discs,, but the time it takes to rewrite data is usually slower compared to reading the data. 1. 2. 3. 4 5. 6. 7. 42

Key / Memory RAM Hard Disk Drive (HDD) Memory RAM is also called Primary Memory or Main Memory. HDD is also called Secondary Memory. Read/Write (R/W) Time RAM has limited time. HDDs have a longer read/write time. Access Every memory area of RAM is accessible at the same speed. Different areas of the HDD may take different amounts of time to access. CPU Access The CPU can access data stored in RAM. Data to be copied from ROM to RAM so that the CPU can access its data. Capacity RAM memory is generally smaller than HDD. Nowadays, it ranges from 2GB to 32 GB on desktops. HDD memory is very high. It ranges from 500GB to 8TB on desktops. Impact on Speed If RAM is low, computers will become slow. HDDs have little impact on computers speeds. 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 RAM vs. Hard Disk Drive The difference between RAM and Hard Discs Drive (HDD) is shown in Table 1.2. 1. Table 1.2: Difference between RAM and Hard Disc Drive 43

F. Processing Speed 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 An interactive programme needs a computer to execute around 100 million instructions per second. While it may sound like a large number, this high processing speed is necessary to ensure seamless interactivity between the system and the user. Designers need to plan their interactive system design so that it can meet computer processing speeds. Most of the time, they tend to assume they have a fast processor, and make designs more complex and complicated. In terms of processing speed, there are two faults: when it is too slow and when it is too fast. Excessive processing speed can lead to functional faults, resulting in incorrect programme behaviour and inaccurate results. For instance, if a user attempts to draw a line using a mouse but moves the mouse too quickly from one end to the other, the programme may only register the mouse position after it has been pressed down, causing the line to be drawn only halfway. A slow processing speed occurs when the programme performs correctly, but the feedback is delayed, resulting in unusual effects on the interface. Cursor tracking is one instance of this issue. For example, when a user tries to move the cursor back on the same line to correct an error by holding down the cursor left key, the system's delayed response causes a few extra cursor-left inputs to be processed. As a result, the cursor overshoots the intended position. 1. 2. 3. 4. 5. 44

C Web uestion / P orm-fills & Interface Styles ommand Line Interface Natural Language WIMP 3D Interfaces Navigation Q Answer and Query Dialogue Interfaces oint-and-Click Menus F Spreadsheet 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 Interface Styles Interface styles refer to various visual and interactive designs used in the creation of user interfaces. The choice of interface styles can significantly impact the interaction process. There are various common interface styles covered in this topic, as shown in Figure 1.9, and their mnemonics for easy recall are shown in Figure 1.10. 1. 2. Figure 1.9: Various Interface Styles Interface 45

W hite P lain W ipes C hris M ade N ancy Q uestioning F or 3 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 Figure 1.10: Interface Styles Mnemonics A. Command Line Interface The Command Line Interface (CLI) offers a way to give instructions to the computer directly using function keys, single characters, abbreviations, or whole-word commands. These instructions combine to apply a number of tools to the same data. 1. 2. Command Line Interface The CLI is flexible; the command often has a number of options or parameters that will vary its behaviour in some way. However, it is difficult to use and learn. Commands must be remembered, as no cue is provided in the command line to indicate which command is needed. It is better for expert users than for novices. 3. 4. 5. 46