45 Example of Taste Interaction BrainPort Vision device lets the blind people uses their taste buds to see. Digital Taste Synthesis BrainPort Vision S E N S E 5 Picture sources: Google
Sound in the Interface Touch in the Interface Handwriting Recognition Gesture Recognition 46 ALTERNATIVE MODES 1 2 3 4 4 O F I N T E R F A C E D E S I G N
Feedback: Sound can provide users with immediate feedback regarding their interactions with the system. For example, a "click" sound when a button is pressed or a "ding" sound when a task is completed successfully. Alerts and notifications: Sound can be used to grab the user's attention and notify them about important events or updates. For instance, a notification sound when a new email arrives or an alarm sound for calendar reminders. Error indication: Sound can help indicate errors or problematic situations in the interface. It can be used to communicate warnings, errors, or confirmations, allowing users to quickly identify and address issues. 47 Sound in the Interface Sound in the interface refers to the use of auditory cues and feedback within user interfaces. M O D E 1 Sound can play several roles in HCI interfaces, including:
Navigation and orientation: Sound cues can assist users in navigating through an interface or understanding its structure. Auditory cues like menu selection sounds or spatial audio can provide users with information about the system's organization and aid in orientation. Aesthetic appeal: Sound can contribute to the overall aesthetics and ambiance of an interface. For example, pleasant background music or sound effects can create a more engaging and enjoyable user experience. 48 Sound in the Interface M O D E 1 Picture sources: Google
49 Example of Sound Applied in the Interface Music Production Computer Game Music Application Virtual Meeting M O D E 1 Picture sources: Google
Direct Manipulation: Touch enables direct interaction with digital content by allowing users to manipulate objects, icons, or elements on the screen through gestures like tapping, swiping, pinching, or dragging. Text Input: Touch keyboards or virtual keyboards are commonly used for text input on touch-based interfaces. Haptic Feedback: Involves tactile sensations or vibrations in response to user interactions. Haptic feedback can simulate the feeling of pressing physical buttons, provide confirmation for touch inputs, or enhance the overall user experience by adding a sense of realism and responsiveness. 6 Touch in the Interface Touch in the interface refers to the use of touch-based input methods to interact with a computer or digital device. Touch can play several roles in HCI interfaces, including: M O D E 2 50
27 Example of Touch Applied in the Interface Vending Machine M Dot Pad - Tactile Braille Display iPad - Tablet PC O D E 2 51 Picture sources: Google
Digitizing historical documents and archives. Converting handwritten notes into digital text for easier organization and searchability. Supporting data entry in forms and surveys. Enabling text input on mobile devices using a stylus or touch input. 6 Handwriting Recognition Handwriting recognition is a technology that converts handwritten text into machine-readable and editable digital text. Handwriting recognition has numerous applications, such as: M O D E 3 52
27 Example of Handwriting Recognition Sony Digital Paper Samsung Galaxy Tab S8 - Digitizing Tablet M O D E 3 53 Picture sources: Google
Natural Interaction: Gestures mimic real-world interactions and are more intuitive for users, reducing the learning curve for interacting with technology. Accessibility: Gestures can be beneficial for users with physical disabilities, providing alternative interaction methods that may be easier or more comfortable for them. Immersive Experiences: In virtual reality (VR) and augmented reality (AR) applications, gesture recognition allows users to interact with the virtual environment in a more immersive and engaging way. 54 Gesture Recognition Gesture recognition refers to the technology and techniques used to interpret human gestures as inputs to interact with computers or other electronic devices. Gesture recognition in HCI have many advantages as following: M O D E 4
55 Example of Gesture Recognition Leap Motion Virtual Reality Game Augmented Reality M O D E 4 Picture sources: Google
26 What is Multi Modal Technology? List alternative modes of Interface Design. 56 POP QUIZ ! POP QUIZ !
ACCESSIBILITY IN USER 4 INTERFACES 57
Accessibility in user interface refers to the design and implementation of user interfaces that are inclusive and usable by individuals with disabilities or impairments. The goal of accessibility is to ensure that all users, regardless of their abilities, can interact with digital systems, websites, applications, and other technologies effectively and without barriers. Working on accessibility for any product implies improving its usability to ensure any person can use it comfortably and without major complications. In other words, it focuses on all users and it aims to provide the same user experience for all. Definition of Accessibility in User Interfaces 58
Biometric Access Control Narrator ACCESSIBILITY FEATURES 1 2 2 I N U S E R I N T E R F A C E S 59
Access Controls: The security features that control how users and systems communicate and interact with one. Access: The flow of information between subject and object. Subject: An active entity that requests access to an object or the data in an object. Object: A passive entity that contains information. 60 Biometric Access Control Biometric access control is a security system that uses unique physiological or behavioral characteristics of individuals to verify their identity and grant or deny access to specific areas, systems, or resources. F E A T U R E 1 Biometric authentication processes are as follows:
Morphological: Fingerprint, face recognition, iris scan, hand geometry, palmprint, vein pattern, gait pattern, footprint and voice recognition. Biological: DNA, blood, saliva, or urine may be used by medical teams and police forensics. 61 Biometric Access Control F E A T U R E 1 In biometrics, physiological measurements can be categorized into two main types: Biometric Access Control Characteristic:
62 Biometric Access Control Fingerprint Iris Scan Amazon One -Palm Scan Payment Amazon has rolled its Amazon One, which uses palm-recognition technology, Whole Foods Market, USA. Face Recognition E X A M P L E O F Picture sources: Google
Narrator is a Text to Speech utility for users who are blind or have impaired vision. Narrator reads what is displayed on your screen and the contents of the active window, menu options, or the text that you type. Narrator is designed to work with the Notepad, WordPad, Control Panel programs, Microsoft Internet Explorer, the Windows desktop, and Windows Setup. 63 Narrator Narrator in Universal Design for a digital environment: Narrator refers to a feature or component that provides audio descriptions or spoken feedback to enhance the accessibility of a product, environment, or digital content. F E A T U R E 2
27 Narrator Windows Android iPhone E X A M P L E O F 64 Picture sources: Google
26 Give an example of narrator. List the characteristic of Biometric Access Control. 65 POP QUIZ ! POP QUIZ !
EMERGING TECHNOLOGIES IN 5 INTERFACE DESIGN 66
Emerging technologies refer to innovative technological advancements that have the potential to enhance accessibility, usability, and inclusivity for people with disabilities and diverse abilities. These technologies aim to bridge the gap between individuals with varying needs and the digital world, making technology more accessible and accommodating for everyone. Definition of Emerging Technologies 67
Mobile Computing Wearable Computing EMERGING TECHNOLOGIES 1 2 2 I N U N I V E R S A L D E S I G N 68
Portability: Facilitates movement of device(s) within the mobile computing environment. Connectivity: Ability to continuously stay connected with minimal amount of lag or downtime, without being affected by movements of the connected nodes. Social Interactivity: Maintaining the connectivity to collaborate with other users, at least within the same environment. Individuality: Adapting the technology to suit individual needs. 69 Mobile Computing Mobile computing refers to the use of portable computing devices, such as smartphones, tablets, laptops, and wearable devices, to access and process data or perform computational tasks while on the move. C A T E G O R Y 1 Principle of mobile computing:
70 E X A M P L E O F Mobile Computing Tablet Laptop Smartphone Picture sources: Google
Range and bandwidth: Mobile Internet access is slower than direct cable connections. Security standards: The lack of robust security standards can make the VPN easily susceptible to attacks. Power consumption: No power outlets or portable generators. Must depend on battery power. Transmission interferences: Weather conditions, environmental factors, and buildings, can impact signal quality and connectivity. Potential health hazards: Using mobile devices while driving can lead to potential health hazards, such as risk of traffic accidents. Human interface with device: Screens and keyboards tend to be small, which may make them hard to use 71 Mobile Computing L I M I T A T I O N O F
Un monopolizing: Wearable computing does not isolate you from the outside world like a virtual reality game. Unrestrictive: While using wearable computing, you can multitask and engage in other activities. Observable: It can consistently maintain your attention if desired. Controllable: The wearable system is responsive, allowing you to take control whenever you wish. Attentive: Wearable computer is environmentally aware, multimodal, and multisensory. Communicative: Wearable computing can serve as a communications medium whenever you choose to use it. 72 Wearable Computing Wearable computing refers to electronic devices and technologies that are designed to be worn on the body, typically as accessories or clothing items. C A T E G O R Y 2 The main characteristics of wearable computing:
73 E X A M P L E O F Wearable Computing Garmin Forerunner 255 - Smartwatch Sena Outforce - Smart Helmet Picture sources: Google
Enhanced communication: providing quick access to messages, calls, and information and offering hands-free interaction Flexibility: Offer multiple functionalities, combining features of different gadgets into one. Freedom: Allows users to move freely without being tied to a specific location or carrying heavy equipment. Work from anywhere: Enable users to work from anywhere due to their portability, connectivity, and hands-free capabilities. Convenience: Offer convenience due to their user-friendly design, seamless integration into daily routines, and their ability to provide instant access to information and services. 74 Wearable Computing A D V A N T A G E S O F Picture sources: Google
Equipment can be heavy: Wearable computing devices can be heavy due to various factors related to their design, functionality, and components. Expensive: High-quality and feature-rich wearable devices can be expensive, making them inaccessible to some potential users. Limited Screen Size: Wearables often have small screens, such as smartwatches. Health and Safety Risks: Prolonged use of some wearable devices, particularly those with screens close to the eyes, like smart glasses, may cause discomfort, eye strain, or other health issues. Privacy Concerns: Arise when users are not fully aware of how their data is being used into the wrong hands due to security breaches. 75 Wearable Computing D I S A D V A N T A G E S O F Picture sources: Google
76 D I F F E R E N T I A T I O N O F Mobile Computing & Wearable Computing
POP QUIZ ! POP QUIZ ! Give an example of Emerging Technologies? Differentiate between Mobile Computing and Wearable Computing. 77
6 EXERCISE 78
4 EXERCISES Crossword Puzzle Matching Questions Objective Questions Structure Questions 1 2 3 4 Let's try! O F R E V I S I O N S 79
ACROSS 2. Sense in Multi-modal Technology 4. The number of principle for Tolerance for Error in Universal Design 5. The number of Principles in Universal Design 7. Low physical effort to copy document from keyboard. 9. Allows user to access information while moving through physical space 10. The Universal Design that provide effective communication DOWN 1. Virtual Reality (AR) 3. Security device 6. Allows user to explore virtual enviroments 8. This design is useful and marketable to people with diverse abilities. Crossword Puzzle EXERCISE 1 80
Matching Questions 1. The technology that applies sound in interface 2. The computing unit that is carried on a belt or in a jacket 3. The handwriting recognition device 4. Altenative that should be given to people with physical impairment 5. The BEST principle of Universal Design that minimizing the impact and damage caused by unintended behaviour Tolerance for error Touchscreen tablet Telephonebased system Wearable computing Synthetic speech EXERCISE 2 81
1. Identify the CORRECT definition of Universal Design. A. Product that comply international certification B. Product that can be marketed internationally C. Products that use english as a medium of intruction D. Product that can be used by anyone in any circumstances EXERCISE 3 Objective Questions Question 1 82
2. Choose the CORRECT senses in Multi-modal Technology. A. Touch, instinct & smell B. Touch, smell & sound C. Touch, instinct & sound D. Instinct, smell & sound Question 2 83
3. Figure 1 refers to one of the alternative mode system in HCI. Choose the CORRECT answer. A. Biometric system B. Gesture system C. Sound system D. Handwriting system Figure 1 Question 3 84
4. Figure 2 shows the application that applied one of the seven principle of universal design. Choose the CORRECT principle based on Figure 2 below. A. Simple and intuitive to use B. Low physical effort C. Size and space for approach and use D. Tolerance for error Question 4 Figure 2 85
Biometric Access Control Narrator 5. Figure 3 shows the example of technology that is currently being used. Identify the type of the technology. A. Security Devices B. Cloud Computing C. Wearable Computing D. Accessibility in user interface Figure 3 Question 5 86
EXERCISE 4 Structure Questions 1. Define Universal Design. (2 marks) 2. Define Mobile computing. (2 marks) 3. Name THREE (3) of the Universal Design Principles. (3 marks) 4. State TWO (2) examples of mobile computing. (2 marks) 5. List TWO (2) examples of emerging technologies in interface design and explain each of the examples . (4 marks) 6. Explain TWO (2) senses that are used in interaction design. (3 marks) 87
EXERCISE 4 Structure Questions 7. Explain the biometric access control and give ONE (1) example. (3 marks) 8. Relate TWO (2) benefits when a user uses wearable computing and mobile computing with a real life situation. (2 marks) 9. Multi modal interaction provides access to information through more than one mode interaction. Give THREE (3) examples of using multi modal system. (3 marks) 10. Wearable computing is the paradigm where users carry wearable computing devices on a person. Draw ONE (1) example of wearable computing nowadays and explain the TWO (2) functions. (3 marks) 88
A N S W E RSCHEME Exercise 1 Across 2. Touch 4. Five 5. Seven 7. Ctrl+c 9. Mobile Computing 10. Perceptible information Down 1. 3D Interface 3. Iris scan 6. Wearable computing 8. Equitable use Exercise 2 1. Telephone-based system 2. Wearable computing 3. Touchscreen tablet 4. Synthetic speech 5. Tolerance for error Exercise 3 1. D 2. B 3. A 4. D 5. D Well done! 89
Jargon, J. (2016). McDonald’s Table Service: Fast Food Redefined. The Wall Street Journal. M., F. (2023). Unlock the Secrets to Inclusive Design: Master the 7 Principles of Universal Design. Retrieved from https://www.linkedin.com/pulse/unlock-secrets-inclusive-design-master-7- principles-fred-mercedes Mishra, R. (2018). Universal Design: Design for everyone. Retrieved from https://uxplanet.org/universal-design-design-for-everyone-61ded4243658 Yang, M. (2018). UI UX Case Study — GrabFood. Shneiderman, B., Plaisant, C., Cohen, M. S., Jacobs, S. M., & Elmqvist, N. (2018). Designing the User Interface: Strategies for Effective Human Computer Interaction - Chapter 9: Expressive Human and Command Languages . Han, G. (2014, 7 15). Choose From 300,000 Aromatic Attachments to Accompany Your Instagram. Retrieved from design milk: https://designmilk.com/ophone-sends-aromatic-attachments-with-email/ Blackstock, E. (2021, 11 23). BMW's Gesture Controls Will Have You Feeling Like A Mediocre Wizard. Retrieved from: jalopnik.com: https://jalopnik.com/bmws-gesture-controls-will-have-you-feeling-like-amedi-1848110683 Tech, C. (2010). When glass touch screens feel like sandpaper. REFERENCE 90
Noorrohani Ahmad Abdullah Azraai Hasan Linawati Razak @ Ali Abdullah Azraai bin Hasan holds a Bachelor of Electrical Engineering (Information Technology) with Honors from University of Tun Hussien Onn (UTHM). He has more than 15 years of experience as a lecturer in Department of Information & Communication Technology (JTMK) at Polytechnic of Muadzam Shah (PMS). He has extensive experience in IT solutions. Linawati binti Razak @ Ali holds a Master's Degree in Technical and Vocational Education from University of Tun Hussien Onn (UTHM) and Bachelor Degree in Information Technology (Information Science) with Honors from University of Kebangsaan Malaysia (UKM). She has 6 years of teaching experience as a lecturer in Department of Information & Communication Technology (JTMK) at Polytechnic of Muadzam Shah (PMS) and has extensive experience in teaching Human Computer Interaction. She has more than 20 years of experience as a lecturer at Polytechnic Malaysia. Noorrohani binti Ahmad holds a Master's Degree in Technical and Vocational Education from University of Tun Hussien Onn (UTHM) and a Bachelor's Degree in Computer Science with Honors from University of Technology Malaysia (UTM). She has devoted 6 years of her service at Department of Information & Communication Technology (JTMK) at Polytechnic of Muadzam Shah and has extensive experience in teaching Human Computer Interaction. She has more than 15 years of experience as a lecturer at Polytechnic Malaysia. ABOUT AUTHOR in Human Computer Interaction UNIVERSAL DESIGN