Human Computer Interaction Prelim Lesson

The Prelim period of this course lays the foundation for understanding Human-Computer Interaction (HCI) — an interdisciplinary field focused on designing user-centered digital systems. Students are introduced to the core principles, historical evolution, and importance of HCI in creating intuitive, efficient, and accessible technologies.

Throughout these lessons, learners explore how humans interact with computers, how to design usable interfaces, and how to evaluate interaction effectiveness. Real-world examples and case studies highlight how good design can enhance usability, while poor design can lead to frustration and inefficiency.

This phase builds essential knowledge that empowers students to think like interaction designers — balancing technical functionality with human needs.

1. SLIDESMANIA.COM
INTRODUCTION TO HUMAN
COMPUTER INTERACTION
[HCI]

2. SLIDESMANIA.COM
Lesson Objectives:
➔Describe the Human-Computer Interaction (HCI).
➔Understand some of the areas where HCI can be implemented
with distinctive importance.
➔Discuss the historical evolution of HCI.

3. SLIDESMANIA.COM
SLIDESMANIA.COM
INTRODUCTI
ON

4. SLIDESMANIA.COM
HumanComputerInterface(HCI)waspreviously
knownastheman-machinestudiesorman-
machineinteraction.Itdealswiththedesign,
executionandassessmentofcomputersystems
and
relatedphenomenonthatareforhumanuse.HCI
canbeusedinalldisciplineswhereverthereisa
possibilityofcomputerinstallation

5. SLIDESMANIA.COM
HCIcanbeusedinalldisciplineswhereverthereis
apossibilityofcomputerinstallation.Someof
theareaswhereHCIcanbeimplementedwith
distinctiveimportanceasmentionedtothefollowing:

6. SLIDESMANIA.COM
COMPUTER
SCIENCE
For application design and
engineering.

7. SLIDESMANIA.COM
PSYCHOLOGY
For application of theories and
analytical purpose.

8. SLIDESMANIA.COM
SOCIOLOGY
For interaction between technology
and organization.

9. SLIDESMANIA.COM
INDUSTRIAL
DESIGN
For interactive products like mobile
phones, microwave oven, etc.

10. SLIDESMANIA.COM
Theworld’sleadingorganizationinHCIisACM−
SIGCHI,whichstandsforAssociationfor
ComputerMachinery−SpecialInterestGroupon
Computer–HumanInteraction.SIGCHIdefines
ComputerSciencetobethecoredisciplineofHCI.
InIndia,itemergedasaninteractionproposal,
mostlybasedinthefieldofDesign.

11. SLIDESMANIA.COM
Objectives:
The intention of this subject is to learn the ways of designing
user-friendly interfaces or interactions. Considering which, we
will learn the following:
➔Ways to design and assess interactive systems
➔Ways to reduce design time through cognitive system and task
models
➔Procedures and heuristics for interactive system design

12. SLIDESMANIA.COM
HISTORICAL
EVOLUTION
Fromtheinitialcomputersperforming
batchprocessingtotheuser-centric
design,therewereseveralmilestones
whicharementioned:

13. SLIDESMANIA.COM
Early computer (e.g. ENIAC,
1946)
-ImprovementintheH/W
technologybroughtmassive
increaseincomputingpower.
Peoplestartedthinkingon
innovativeideas.

14. SLIDESMANIA.COM
Visual Display Unit (1950s)
-SAGE (semi-automatic ground
environment), an air defense
system of the USA used the
earliest version of VDU.

15. SLIDESMANIA.COM
Development of the
Sketchpad (1962)
-Ivan Sutherland developed
Sketchpad and proved that
computer can be used for more
than data processing.

16. SLIDESMANIA.COM
Douglas Engelbart
introduced the idea of
programming toolkits (1963)
-Smaller systems created
larger systems and
components.

17. SLIDESMANIA.COM
Introduction of Word
Processor, Mouse (1968)
-Design of NLS (oNLine
System).

18. SLIDESMANIA.COM
Introduction of personal
computer Dynabook(1970s)
-Developed smalltalkat Xerox
PARC.

19. SLIDESMANIA.COM
Windows and WIMP
interfaces
-Simultaneous jobs at one
desktop, switching between
work and screens, sequential
interaction.

20. SLIDESMANIA.COM
The idea of metaphor
-Xerox star and alto were the
first systems to use the concept
of metaphors, which led to
spontaneity of the interface.

21. SLIDESMANIA.COM
Direct Manipulation
introduced by Ben
Shneiderman(1982)
-First used in Apple Mac PC
(1984) that reduced the
chances for syntactic errors.

22. SLIDESMANIA.COM
VannevarBush introduced
Hypertext (1945)
-To denote the non-linear
structure of text.

23. SLIDESMANIA.COM
Multimodality
(1980)

24. SLIDESMANIA.COM
Computer Supported
Cooperative Work (1990’s)
-Computer mediated
communication.

25. SLIDESMANIA.COM
WWW (1989)
-The first graphical browser
(Mosaic) came in 1993.

26. SLIDESMANIA.COM
Ubiquitous Computing
-Currently the most active
research area in HCI. Sensor
based/context aware
computing also known as
pervasive computing.

27. SLIDESMANIA.COM
SLIDESMANIA.COM
Thank you!

28. GUIDELINES IN
HCI

29. Lesson Objectives:
Learn all the guidelines of HCI in different aspects
Understand the eight golden rule of Shneiderman
Understand heuristic evaluation and interface design guidelines
01
02
04
Know the seven principles of Norman03

30. Table of
Contents
Shneiderman’s
Eight Golden
Rules
Norman’s Seven
Principles
Interface Design
Guidelines
Heuristic
Evaluation

31. Ben
Shneiderman
American computer scientist
consolidatedsomeimplicitfactsabout
designingandcameupwiththe
followingeightgeneralguidelines:

32. Shneiderman’s Eight Golden Rules:
Strive for Consistency
Cater to Universal Usability
Design Dialogs to yield closure
01
02
04
Offer Informative feedback03

33. Shneiderman’s Eight Golden Rules:
Prevent Errors
Permit easy reversal of actions
Reduce short term memory load
05
06
08
Support internal locus of control07

34. Theseguidelinesarebeneficialfornormal
designersaswellasinterfacedesigners.Using
theseeightguidelines,itispossibletodifferentiate
agoodinterfacedesignfromabadone.These
arebeneficialinexperimentalassessmentof
identifyingbetterGUIs.
Shneiderman’s Eight Golden Rules

35. Donald
Norman
Toassesstheinteractionbetween
humanandcomputers,Heproposedin
1988his7principleswhichistheseven
stagesthatcanbeusedtotransform
difficulttasks.

36. Norman’s Seven Principles:
Use both knowledge in world & knowledge in the head
Simplify task structures
Get the mapping right (User mental model = Conceptual model = Designed model)
01
02
04
Make things visible03

37. Norman’s Seven Principles:
Convert constrains into advantages (Physical constraints, Cultural
constraints, Technological constraints)
Design for Error
05
06
When all else fails − Standardize07

38. Jakob Nielsen
isaUserAdvocateandprincipaloftheNielsenNorman
Groupwhichheco-foundedwithDr.DonaldA.Norman
(formerVPofresearchatAppleComputer).Dr.Nielsen
establishedthe"discountusabilityengineering"
movementforfastandcheapimprovementsofuser
interfacesandhasinventedseveralusabilitymethods,
includingheuristicevaluation.Heholds79UnitedStates
patents,mainlyonwaysofmakingtheInterneteasierto
use.

39. Heuristicsevaluationisamethodicalproceduretocheck
user interfacefor usabilityproblems.
Onceausabilityproblemisdetectedindesign,theyare
attendedasanintegralpartofconstant
designprocesses.Heuristicevaluationmethodincludes
someusabilityprinciplessuchasNielsen’sten
Usabilityprinciples
Heuristic Evaluation

40. Nielsen's Ten Heuristic Principles:
Visibility of system status
Match between system and real world
Consistency and standards
01
02
04
User control and freedom03
05 Error prevention

41. Nielsen's Ten Heuristic Principles:
Recognition rather than Recall
Flexibility and efficiency of use
Help, diagnosis and recovery from errors
06
07
09
Aesthetic and minimalist design08
10 Documentation and Help

42. Interface Design
Guidelines
SomemoreimportantHCIdesignguidelinesare
presentedinthissection.Generalinteraction,
informationdisplay,anddataentryarethree
categoriesofHCIdesignguidelinesthatare
explainednext:

43. Guidelinesforgeneralinteractionare
comprehensiveadvicesthatfocusongeneral
instructionssuchas:
General Interaction

44. General Interaction:
Be consistent
Offer significant feedback
Authorize easy reversal of most actions
01
02
04
Ask for authentication of any non-trivial critical action03
05
Lessen the amount of information that must be remembered in between actions

45. General Interaction:
Seek competence in dialogue, motion and thought
Excuse mistakes
Deliver help services that are context sensitive
06
07
09
Classify activities by function and establish screen geography accordingly08
10 Use simple action verbs or short verb phrases to name commands

46. InformationprovidedbytheHCIshouldnotbe
incompleteorunclearorelsetheapplicationwill
notmeettherequirementsoftheuser.To
providebetterdisplay,thefollowingguidelines
areprepared:
Information Display

47. Information Display:
Exhibit only that information that is applicable to the present context
Don't burden the user with data, use a presentation layout that allows rapid integration
of information
Permit the user to maintain visual context
01
02
04
Use standard labels, standard abbreviations and probable colors03
05 Generate meaningful error messages

48. Information Display:
Use upper and lower case, indentation and text grouping to aid in understanding
Use windows (if available) to classify different types of information
Consider the available geography of the display screen and use it efficiently
06
07
09
Use analog displays to characterize information that is more easily integrated with this
form of representation
08

49. Thefollowingguidelinesfocusondataentrythat
isanotherimportantaspectofHCI:
Data Entry

50. Data Entry:
Reduce the number of input actions required of the user
Uphold steadiness between information display and data input
Interaction should be flexible but also tuned to the user's favored mode of input
01
02
04
Let the user customize the input03

51. Data Entry:
Disable commands that are unsuitable in the context of current actions
Allow the user to control the interactive flow
Remove "mickey mouse" input
05
06
08
Offer help to assist with all input actions07

52. Thank
you!

53. SLIDESMANIA.C OM
ELEMENTS AND
PRINCIPLES OF
DESIGN

54. SLIDESMANIA.C OM
●Know the design and colourthat can be applied to HCI design.
●Understand the different elements of design.
●Understand the principles of design that can be used in HCI.
Lesson
Objectives:

55. SLIDESMANIA.C OM
Design and
Colour

56. SLIDESMANIA.C OM
Design and Colour
Theelementsandprinciplesofdesignare
thebuildingblocksusedtocreateaworkof
art.Theelementsofdesigncanbethought
ofasthethingsthatmakeupapainting,
drawing,designetc.Goodorbad-all
paintingswillcontainmostofifnotall,the
sevenelementsofdesign.ThePrinciplesof
designcanbethoughtofaswhatwedoto
theelementsofdesign.Howweapplythe
Principlesofdesigndetermineshow
successfulweareincreatingaworkofart.

57. SLIDESMANIA.C OM
Elements and
Principles of
Design

58. SLIDESMANIA.C OM
Elements and Principles of Design

59. SLIDESMANIA.C OM
Elements and Principles of Design

60. SLIDESMANIA.C OM
Elements and Principles of Design

61. SLIDESMANIA.C OM
Elements and Principles of Design

62. SLIDESMANIA.C OM
Elements and Principles of Design

63. SLIDESMANIA.C OM
Elements and Principles of Design

64. SLIDESMANIA.C OM
Elements and Principles of Design

65. SLIDESMANIA.C OM
Elements and Principles of Design

66. SLIDESMANIA.C OM
Elements and Principles of Design

67. SLIDESMANIA.C OM
Elements and Principles of Design

68. SLIDESMANIA.C OM
SHAPE
Ashapeisaself-containeddefined
areaofgeometricororganicform.A
positiveshapeinapainting
automaticallycreatesanegativeshape.
Elements and Principles of Design

69. SLIDESMANIA.C OM
SIZE
Sizeissimplytherelationshipofthe
areaoccupiedbyoneshapetothatof
another.
Elements and Principles of Design

70. SLIDESMANIA.C OM
COLOR
AlsocalledasHue.
Elements and Principles of Design

71. SLIDESMANIA.C OM
VALUE
Valueisthelightnessordarknessofa
colour.ValueisalsocalledTone.
Elements and Principles of Design

72. SLIDESMANIA.C OM
GRADATION
Gradationofsizeanddirectionproduce
linearperspective.Gradationofcolour
fromwarmtocoolandtonefromdarkto
lightproduceaerialperspective.
Gradationcanaddinterestand
movementtoashape.Agradationfrom
darktolightwillcausetheeyetomove
alongashape.
Elements and Principles of Design

73. SLIDESMANIA.C OM
HARMONY
Harmonyinpaintingisthevisually
satisfyingeffectofcombiningsimilar,
relatedelements.Examplesare
adjacentcolours,similarshapesand
relatedtextures.
Elements and Principles of Design

74. SLIDESMANIA.C OM
UNITY
Relatingthedesignelementstothethe
ideabeingexpressedinapainting
reinforcestheprincipalofunity.eg.a
paintingwithanactiveaggressivesubject
wouldworkbetterwithadominantoblique
direction,course,roughtexture,angular
linesetc.whereasaquietpassivesubject
wouldbenefitfromhorizontallines,soft
textureandlesstonalcontrast.Unityina
paintingalsoreferstothevisuallinkingof
variouselementsofthework.
Elements and Principles of Design

75. SLIDESMANIA.C OM
Thank you!