UNDERSTANDING THE UNIVERSAL DESIGN | MULTI-MODAL TECHNOLOGY | ACCESSIBILITY IN USER INTERFACES | EMERGING TECHNOLOGIES IN INTERFACE DESIGN in Human Computer Interaction UNIVERSAL DESIGN NOORROHANI AHMAD ABDULLAH AZRAAI HASAN LINAWATI RAZAK @ ALI
EDITOR Linawati Binti Razak @ Ali WRITER Noorrohani Binti Ahmad Abdullah Azraai Bin Hasan Linawati Binti Razak @ Ali REVIEWER Siti Norhidayah Binti Saad designer Noorrohani Binti Ahmad IMAGE @Freepik, ©Pixabay COVER IMAGE ©Canva First Published July 2023 All rights reserved. This book or any portion there of may not be reproduced or used in any manner whatsoever without the express written permission of the publisher. eISBN 978-967-2498-86-5 Published By Politeknik Muadzam Shah Lebuhraya Tun Abdul Razak 26700 Muadzam Shah Pahang Darul Makmur Tel No.: 09-450 2005 Website: www.pms.edu.my i
ACKNOWLEDGEMENT ii Alhamdulillah, we express our gratitude to Allah S.W.T for His blessings and guidance that enable us to successfully completed the ebook of Universal Design in Human Computer Interaction within the given timeframe. The journey to accomplish this ebook was not easy, but through perseverance and determination, we overcame them and achieved our goal. We extend our heartfelt appreciation to our family, friends, students, and all those who provided support, encouragement, valuable comments, and assistance throughout the process of creating this ebook. Your unwavering support played a significant role in our success, and we are truly grateful for it. Lastly, our sincere hope is that this ebook will serve as a valuable resource for both students and lecturers of the Human-Computer Interaction (HCI) course at Polytechnic Malaysia. We aspire for it to not only attract students to engage with the subject of HCI but also to enhance their understanding of Universal Design.
PREFACE iii Universal Design is a crucial chapter within the Human Computer Interaction course, emphasizing the designer's responsibility to create systems that are accessible to all individuals, regardless of their circumstances. This chapter explores the intersection of Universal Design with emerging technologies, recognizing the importance of staying relevant in a rapidly evolving technological landscape. The contents of this ebook encompass not only the seven principles of Universal Design but also delve into topics like multimodal technology, accessibility in user interfaces, and emerging technologies in interface design. To facilitate understanding and engagement, the ebook offers a variety of exercises, including crossword puzzles, matching questions, objective assessments, and structured questions. Our aim is for this comprehensive ebook to serve as a valuable resource, providing students with in-depth explanations, illustrative examples, insightful images, and much more. By utilizing various forms of media and interactive exercises, we hope to enhance students' understanding of Universal Design and its practical application in the field of Human Computer Interaction.
C O N T E N T S Definition of Universal Design 7 Principles of Universal Design Multi Modal Technology Accessibility in User Interfaces Emerging Technologies in Interface Design Exercise 01 05 28 57 66 78 iv
INTRODUCTION Universal Design is the concept of designing products and the built environment to be both aesthetically pleasing and highly functional for people of all ages, abilities, and backgrounds. Its core principle is to create things that can be accessed and used by the widest range of individuals in any given situation. The goal is to ensure that everyone, regardless of their abilities, has equal opportunities to utilize designs, products, and objects. There are seven principles that guide the practice of Universal Design. These principles serve as a framework for developers to create designs that are inclusive and suitable for all users. Universal Design extends to emerging technologies as well, such as autonomous vehicles, artificial intelligence, and more. These advancements in technology present new opportunities for implementing Universal Design principles. By gaining a comprehensive understanding of Universal Design, we can enhance the development of products, particularly in the realm of computer systems and applications. v
DEFINITION OF 1 UNIVERSAL DESIGN 1
Universal Design is the design and composition of an environment so that it can be accessed, understood and used to the greatest extent possible by all people regardless of their age, size, ability or disability. An environment or any building, product, or service in that environment should be designed to meet the needs of all people who wish to use it. This is not a special requirement, for the benefit of only a minority of the population. It is a fundamental condition of good design. By considering the diverse needs and abilities of all throughout the design process, Universal Design creates products, services and environments that meet peoples' needs. Simply put, universal design is good design. 2 Definition of Universal Design
3 U N I V E R S A L D E S I G N Example of IT product that applied Can you give other example? Picture sources: Google
4 U N I V E R S A L D E S I G N Example of general product, service and environement that applied Can you give other example? Picture sources: Google
7 PRINCIPLES OF 2 UNIVERSAL DESIGN 5
Equitable Use Flexibility in Use Simple and Intuitive to Use Perceptible Information Tolerance for Error Low Physical Effort Size and Space for Approach and Use 6 PRINCIPLES 1 2 3 4 5 7 O F U N I V E R S A L D E S I G N 6 7
Provide the same means of use for all users: identical whenever possible; equivalent when not. Avoid segregating or stigmatizing any users. Provisions for privacy, security, and safety should be equally available to all users. Make the design appealing to all users. 7 P R I N C I P L E S 1 Equitable Use The design is useful and marketable to people with diverse abilities. The guidelines!
8 P R I N C I P L E S 1 Example of Product and Environment The product or environment that applied this principle can be used by all users. Picture sources: Google
9 P R I N C I P L E S 1 Example of IT System Design The SpeechNow can be used by all users including blind users. Picture sources: Google
Provide choice in methods of use. Accommodate right or left handed access and use. Facilitate the user's accuracy and precision. Provide adaptability to the user's pace. 10 P R I N C I P L E S 2 Flexibility in Use The design accommodates a wide range of individual preferences and abilities. The guidelines!
11 Example of Product P R I N C I P L E S 2 User can choose how to use all these products! Picture sources: Google
12 Example of IT System Design P R I N C I P L E S 2 Users have many options to search data on Google either by typing, using audio, or capturing images. Picture sources: Google
Eliminate unnecessary complexity. Be consistent with user expectations and intuition. Accommodate a wide range of literacy and language skills. Arrange information consistent with its importance. Provide effective prompting and feedback during and after task completion. 13 P R I N C I P L E S 3 Simple & Intuitive to Use Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level. The guidelines!
14 P R I N C I P L E S 3 Example of Product Through it's simple physical design, users are easily to understand how to use the product. Picture sources: Google
15 P R I N C I P L E S 3 Example of IT System Design These products are easy to use! By looking at the interface, users can understand it quickly. Picture sources: Google
Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information. Provide adequate contrast between essential information and its surroundings. Maximize "legibility" of essential information. Differentiate elements in ways that can be described (i.e., make it easy to give instructions or directions). Provide compatibility with a variety of techniques or devices used by people with sensory limitations. 16 P R I N C I P L E S 4 Perceptible Information Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level. The guidelines!
17 Example of Product P R I N C I P L E S 4 You can feel every button press as tactile feedback when typing at the ATM. Picture sources: Google
P R I N C I P L E S 4 18 Example of IT System Design You can feel every button press as tactile feedback when typing at the ATM. A blind individual can use the cellphone's keypad because of the bump on the pad that will enable the user without looking at the keypad. Picture sources: Google
19 Arrange elements to minimize hazards and errors: most used elements, most accessible; hazardous elements eliminated, isolated, or shielded. Provide warnings of hazards and errors. Provide fail safe features. Discourage unconscious action in tasks that P require vigilance. R I N C I P L E S 5 Tolerance for Error The design minimizes hazards and the adverse consequences of accidental or unintended actions. The guidelines!
20 Example of Product P R I N C I P L E S 5 The design minimize hazards and the adverse consequences of accidental or unintended actions. Picture sources: Google
P R I N C I P L E S 5 21 Example of IT System Design The designs incorporate a high tolerance for user errors Picture sources: Google
22 Allow user to maintain a neutral body position. Use reasonable operating forces. Minimize repetitive actions. Minimize sustained physical effort. P R I N C I P L E S 6 Low Physical Effort The design can be used efficiently and comfortably and with a minimum of fatigue. The guidelines!
23 Example of Product P R I N C I P L E S 6 Using an escalator requires less physical effort compared to using a staircase. Picture sources: Google
P R I N C I P L E S 6 24 Example of IT System User can start the engine by using the car's remote control Picture sources: Google
25 Provide a clear line of sight to important elements for any seated or standing user. Make reach to all components comfortable for any seated or standing user. Accommodate variations in hand and grip size. Provide adequate space for the use of assistive devices or personal assistance. P R I N C I P L E S 7 Size and Space for Approach and Use Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user's body size, posture, or mobility. The guidelines!
26 Example of Environment P R I N C I P L E S 7 All components are easily accessible for both seated and standing users. Picture sources: Google
26 How many principles in Universal Design? POP QUIZ ! POP QUIZ ! List all principles with an example in Universal Design. 27
MULTI-MODAL 3 TECHNOLOGY 28
Multi-modal technology refers to a technological approach that integrates multiple modes of interaction. For example, a multi-modal interface may allow users to input commands using voice recognition, touch gestures, or a combination of both, and provide output through visual displays, audio feedback, or haptic feedback. There are five senses in multimodal technology; vision/gaze, taste/voice, touch/gestures, hearing and smell. The goal of multi-modal technology is to create more natural and intuitive interfaces that align with human capabilities and preferences. By integrating various modes of communication, multi-modal systems can provide a more seamless and personalized user experience, enabling efficient and effective interaction with technology. 29 Multi-Modal Technology What is Multi Modal Technology? Picture sources: Google
30 Can you give other example? M U L T I - M O D A L I N T E R F A C E S Examples of product that applied Picture sources: Google
Vision/ Gaze Touch/ Gesture Hearing Taste/ Voice Smell 31 SENSES 1 2 3 4 5 5 I N M U L T I M O D A L T E C H N O L O G Y
light reflected from objects in the world and their image is focused upside down on the back of the eye then, the receptors in the eye transform it intro electrical signal which are passed to the brain the brain detects, finally, pattern and movements 32 S E N S E 1 Vision Vision plays a crucial role in HCI as humans rely heavily on their visual perception to interpret and understand information presented on a computer screen or any visual display. The eye is a mechanism for receiving light and transforming it into electrical energy:
Can you name other vision interfaces? 33 Example of Vision Interfaces Eye Tracker Laptop Television Tablet Smartwatch and Smart Phone S E N S E 1 Picture sources: Google
Fixation is a single instance where the eye momentarily stops. act of focusing one's gaze on a specific point or object for a period of time. Saccade is the rapid eye movement from one fixation to the next. It refers to rapid eye movements that shift the gaze from one point to another. Scan path is a series of sequential fixations and saccades. It refers to the tracking of a moving object with the eyes. 34 Gaze Gaze interaction involves using the direction of a person's gaze as an input modality for interacting with a digital device or interface. S Gaze can be further categorized into different types: E N S E 1 Picture sources: Google
35 Example of Gaze Interaction Can you give other gaze interaction? Realtime 3D Eye Gaze Gaze Heat Map Gaze Plots S E N S E 1 Picture sources: Google
information on shape, texture, resistance, temperature, comparative spatial factors. touch has become increasingly prevalent in various devices, including smartphones, tablets, laptops, interactive kiosks, and other touchenabled interfaces. 36 Touch Touch refers to the input method and interaction technique that involves physical contact between a user and a digital device or interface. Touch or haptic perception, acts as means of feedback and it provides us with information about our environment: S E N S E 2
TeslaTouch in the picture can simulate a feeling of textures and materials by sliding fingers over their images. 37 Example of Touch Interaction Braille Computer TeslaTouch S E N S E 2 Picture sources: Google
38 Gestures Gestures refer to physical movements or actions performed by a user to interact with a digital device or interface. Touch gestures are made directly on touchscreens or touch-sensitive surfaces, such as tapping, swiping, pinching, or rotating fingers to perform specific actions. Motion gestures are involve movements of the entire device or the user's body to trigger actions. Hand gestures are involve specific hand movements or postures recognized by sensors or cameras to interpret commands or interact with the system. Facial gestures are involve movements or expressions of the face recognized by cameras or sensors to interpret commands or trigger specific actions. S Gestures in HCI can take various forms, including: E N S E 2
39 Example of Gesture Interaction Leap Motion BMW Gesture Control Can you give other gesture interaction? S E N S E 2 Picture sources: Google
Speech Recognition: It involves the capability of a system to convert spoken language into written text or commands. Text-to-Speech (TTS): TTS, also known as speech synthesis, is the technology that converts written text into spoken words. Audio Feedback: Audio feedback refers to the use of sound or voice prompts to provide users with feedback or information. Sound Effects: Sound effects can be used to enhance user experiences or provide audio cues in multi-modal interfaces. 40 Hearing Hearing refers to the auditory aspect of Human Computer Interaction. It involves the use of sound or speech as a means of communication or input and output. Hearing in Multi-Modal Technology can include various components: S E N S E 3
41 Example of Hearing Interaction This machine can convert printed documents into text-to-speech. Text-to-Speech (TTS) Speech Recognition Audio Feedback S E N S E 3 Picture sources: Google
In Virtual Reality (VR) applications, scent delivery devices can emit specific smells corresponding to the virtual environment, making the experience more realistic and multi-sensory. In entertainment, it can enhance gaming experiences by providing scent cues based on in-game events or environments. In education, it can be used to create interactive learning experiences, where smells are associated with specific subjects or concepts. In healthcare, smell-based interfaces can aid in therapy or relaxation techniques. 42 Smell Smell refers to the ability to detect and perceive odors or scents in the environment. Researchers have explored incorporating the sense of S smell to enhance user experiences and interactions: E N S E 4
43 Example of Smell Interaction oPhone Duo - Scent Based Mobile Messaging VR Masks - FeelReal Multisensory This device will allow people to send and receive scented messages. S E N S E 4 Picture sources: Google
Digital Taste Synthesis: This approach aims to create the perception of different tastes without the consumption of actual food or beverages. Sensory Substitution: This approach involves using alternative sensory modalities, such as visual or auditory cues, to represent taste information. Chemical Analysis: Scientists are working on developing sensors and analytical techniques that can detect and analyze taste components in food and beverages. This information can then be used by computer systems to identify and classify tastes. 44 Taste In the context of HCI technology, taste recognition refers to the development and implementation of systems that can simulate or interact with human taste perception. Research and development in this field involve various approaches, including: S E N S E 5