This document provides an overview of human-computer interaction design frameworks for the web, including cognitive, social, and emotional design. It discusses cognitive design principles like font choice, button placement, minimizing distractions, and intuitive interactions. Social design focuses on elements that promote a sense of social presence like user-generated content, live chat, and avatars. Emotional design aims to elicit positive emotions through techniques such as expressive robots, aesthetically pleasing layouts, and cute or humorous design elements. The document presents these frameworks to inform the design of interfaces that facilitate successful human-computer interactions.

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

3. What is user?
11

4. Cognitive

5. Cognitive Design

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.

7. Cognitive Design

8. Cognitive Design

9. Cognitive Design

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.

11. Cognitive Design

12. Cognitive Design

13. Cognitive Design

14. Cognitive Design
• Visuals and Sound
• Distraction versus Attraction
• Pop-ups
• Timers
• Alert sounds
• Animated videos
• Flashing lights

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

16. Cognitive Design
• Intuitive actions
• Swiping
• Clicking
• Tapping
• Emoticons
• Pinching

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.

20. Social Design
• Human pictures
• Live chat
• Forums
• Customer ratings and
reviews
• Testimonials
• Vendor introduction
• Live streaming
• Influencer

21. Social Design
• Chatbot
• Virtual influencer (e.g., Thalasya)

22. Social Design
Telepresence
•Metaverse
•Avatars
•Augmented Reality
•Haircut, make-
ups, cloths,
furniture,
watches, etc.
•Social Games

23. Emotional Design

24. Emotional Design
• Expressive robot eliciting
sympathy.
• Users may be less
frustrated.

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

26. Emotional Design

27. Emotional Design
• Kawaii Aesthetic
• Baby-face
• Anthropomorphism
• Humor
• Memes

28. What is user?
11

29. Thank You
58