Human Computer Interaction

1. CASE STUDY 2
Prepare for :
PUAN MONA BINTI AZIZAN
Perform by :
ABDUL WAZIF BIN MARZUKI
AHMAD UZAIR BIN ADNAN
MUHAMMAD FIKRI BIN HAPADZAH
MUHAMMAD AIMIL BIN HAMKA

2. QUESTION A

3. 5 IMPORTANT
ASPECTS TO GET
STARTED
DESIGNING
ACCESSIBLE
WEB
PAGES
1. PROVIDE
SUFFICIENT
CONTRAST
BETWEEN
FOREGROUND AND
BACKGROUND
• Foreground text needs to have sufficient contrast with background
colors. This includes text on images, background gradients, buttons,
and other elements. This does not apply for logos, or incidental text,
such as text that happens to be in a photograph.
• Example: Contrast ratio
Insufficient Sufficient
Some people cannot read text if
there is not sufficient contrast
between the text and background.
For others, bright colors (high
luminance) are not readable; they
need low luminance.
Some people cannot read text if
there is not sufficient contrast
between the text and background.
For others, bright colors (high
luminance) are not readable; they
need low luminance.

4. 2. ENSURE
THAT
INTERACTIVE
ELEMENTS
ARE EASY TO
IDENTIFY
• Provide distinct styles for interactive elements, such as links and
buttons, to make them easy to identify. For example, change the
appearance of links on mouse hover, keyboard focus, and touch-
screen activation. Ensure that styles and naming for interactive
elements are used consistently throughout the website.
• Example :

5. 3. PROVIDE
CLEAR AND
CONSISTENT
NAVIGATION
OPTIONS
• Ensure that navigation across pages within a website has
consistent naming, styling, and positioning. Provide more than
one method of website navigation, such as a site search or a site
map. Help users understand where they are in a website or page
by providing orientation cues, such as breadcrumbs and clear
headings.

6. 4. ENSURE
THAT FORM
ELEMENTS
INCLUDE
CLEARLY
ASSOCIATED
LABELS
• Ensure that all fields have a descriptive label adjacent to the field.
For left-to-right languages, labels are usually positioned to the left
or above the field, except for checkboxes and radio buttons where
they are usually to the right. Avoid having too much space
between labels and fields.
• Example: Labels and input fields associated by proximity

7. 5. CREATE
DESIGNS FOR
DIFFERENT
VIEWPORT
SIZES
• Consider how page information is presented in different sized
viewports, such as mobile phones or zoomed browser windows.
Position and presentation of main elements, such as header and
navigation can be changed to make best use of the space. Ensure
that text size and line width are set to maximize readability and
legibility.
• Example: Content and navigation adapt to smaller mobile
screen

8. • PROPOSE A TECHNOLOGY THAT CAN MAKE YOUR WEB ACCESSIBLE TO PEOPLE
WITH A WIDE RANGE OF ABILITIES AND DISABILITIES
• For blind people : • For hearing impairments people : • For mobility impairment people :
• Screen readers
A screen reader is a form of assistive
technology that renders text and image
content as speech or braille output.
• Automatic transcription software
the process during which AI algorithms
listen to an audio or video file
and transcribe it into text. All automatic
transcription software products are
equipped with a Speech-to-Text
technology that generates text with
varying levels of accuracy.
• Head pointers
devices which allow the movement of the
mouse pointer to be controlled by
voluntary head movements. As intuitive as
a mouse, the smartNAV gives you control
of the pointer on the screen by tracking a
removable, reflective dot that you place
anywhere on your forehead, glasses or
finger

9. • PROPOSE A TECHNOLOGY THAT CAN MAKE YOUR WEB ACCESSIBLE TO PEOPLE WITH A WIDE RANGE
OF ABILITIES AND DISABILITIES
• For blind people : • For hearing impairments people : • For mobility impairment people :
• Screen readers • Automatic transcription software • Head pointers

10. QUESTION B

11. "WHEN ALL USERS' NEEDS ARE TAKEN INTO CONSIDERATION IN
THE INITIAL DESIGN PROCESS, THE RESULT IS A PRODUCT THAT
CAN BE USED BY THE BROADEST SPECTRUM OF USERS."
• In this verse we all know the initial design process is very important for all products to get the
perfect product. The Universal Design Principle requires a safe and user-friendly product that
can be used by everyone regardless of their age, size, ability or disability. having a design process
allows us to be more efficient and transparent while we design applications. By considering the
various needs and capabilities throughout the design process, universal design produces
products, services and environments that meet the needs of society. In short, we can ensure that
we are always moving forward and the client will trust the decisions and suggestions that we are
making.

12. ONE EXAMPLE OF
APPLYING A
UNIVERSAL
DESIGN
APPROACH
WHICH IS
‘FLEXIBILITY IN
USE’ WHEN
DESIGNING:
TOOLS,
SOFTWARE,
HARDWARE,
WORKSPACE AND
ETC
The design accommodates a wide range of individual preferences and abilities
Guidelines
• 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.
Example:
• At Aeon Mall, customers who want to shopping, they are given the option of
convenience to use the Escalator or elevator to go down or up to the floor of
the mall building.
• A museum, visited as a field trip for this course, allows each student to
choose to read or hear a description of the contents of the display

13. QUESTION C

14. UNIVERSAL DESIGN HAS BEEN MISTAKENLY DESCRIBED AS THE SEARCH FOR A
ONE-SIZE-FITS-ALL DESIGN OR “UNIVERSAL DESIGN IS NOT JUST ABOUT 'ONE
SIZE FITS ALL'.” DESCRIBE ABOUT THIS STATEMENT TO MAKE SURE DESIGNERS
SHOULD STRIVE TO CREATE A DESIGN THAT DOES NOT EXCLUDE OR
SEGREGATE ALL THE USER.
• Universal Design has been mistakenly described as the search for a one-size-fits-all design.
• Universal Design does encourage designers to consider the wide-ranging abilities of their users.
• Universal solution can also incorporate, for example, customisable features that can be adapted
from user to user, smart features that learn a user's preferences after multiple uses (most relevant
to ICT), and specialised solutions to meet particular needs.
• Provide the same (or equivalent) experiences, activities and services to everyone.
• It is accepted that these may have to be provided through slightly different routes or interfaces,
but designers should strive to create a design that does not exclude or segregate.

15. CONT
Example
• Eliminate unnecessary complexity
• Provide effective prompting and feedback during and after task completion.
• Provide compatibility with a variety of techniques or devices used by people with sensory
limitations.
• Use different modes (pictorial, verbal, tactile) for redundant presentation of essential
information.

16. QUESTION D

17. LEARNING
ENVIRONMENT IN
FIGURE 1 THAT
COULD OFFER A
WAY TO
MEANINGFULLY
PARTICIPATE IN
THE SOCIAL
ASPECTS OF
LEARNING
NOWADAYS.

18. 1. Face to face learning
• We can do face-to-face learning by following the S.O.P
rules during COVID-19 by keeping a distance of 1 meter
from people around to prevent the disease from getting
worse.
• Minimize the number of student in the
classroom around 5 - 10 people only to avoid congestion
while in the classroom.

19. 2. Online learning
• Online learning are different with face to face
learning because you are not in the same location
as your instructor or the other students. Where
instructors use online teaching platforms. In the
platform the instructor can teach or
communicate and having interaction with
students.
• With the ability to study at home, we will be able
to study comfortably, And at the same time we
can reduce the spread of COVID-19 disease.

20. 3. Recorded lesson
• It is known as asynchronous lessons because the learning
process is not the same as the time the instructor teach.
Where the instructor will record a video of the lesson and
then give it to students.
• Recorded lessons allow students to engage with a lesson
when they able to re-watch sections of the lessons to
reinforce concepts and teachers can also save the recorded
lessons to reuse with other class.
• However, recorded lesson will occur when the quality of
the direct internet connection are unsatisfactory to the
student with the instructor.