1. HCI Design for Web:
An overview of cognitive, social, and
emotional framework
Tze Wei Liew
Multimedia University, Malaysia
2. Human-Computer Interaction
• Focuses on the design of
computer systems.
• How people interact with
computers and the extent
to which computers have
evolved for successful
interactions with humans.
11
6. Cognitive Design
• Generally, serif fonts are considered more readable for print materials,
as they help guide the eye along the lines of text and create a sense of
continuity.
• Sans serif fonts are preferred for digital materials, as they appear
sharper and clearer on screens and reduce eye strain.
10. Cognitive Design
• First look vs Continuity
• The primary button is on
the left means a user looks
at it first. Users tend to click
the first thing they see.
• Meanwhile, the primary
button on the right means
continuity. It is easier for
users' hands, especially for
mobile apps.
15. Cognitive Design
• Voice User Interface
• Users to interact with them by
asking questions, e.g. Google
Voice, Siri, Alexa
• Natural-language systems
enable users to type in
questions and give text-based
responses, e.g., chatbots
• Speech-based menus and
instructions should be short
17. Cognitive Design
• Some examples of real-world
haptics include:
• A successful payment on a
mobile device which triggers a
brief feedback jolt.
• An error state when a
password is incorrect.
• A special gesture that unlocks
a feature.
• Playing a mobile racing game.
18. Social Design
• Presence
• Telepresence
• A sensation of being elsewhere, created by virtual reality
technology.
• A sense of immersion into a virtual world while ignoring the
physical world.
• Social Presence
• Feeling of being there with another person, real or artificial.
19.
20. Social Design
• Human pictures
• Live chat
• Forums
• Customer ratings and
reviews
• Testimonials
• Vendor introduction
• Live streaming
• Influencer
25. Emotional Design
• The golden ratio in web
or app design .
• Create a balanced and
aesthetically eye-
pleasing composition by
presenting layouts,
spacing, texts, images,
and other visual
elements of a project at
the proportion of 1 to
1.618