SlideShare a Scribd company logo
© Dr. Khalid Nazim S.A. B.E., M. Tech, MBA[IT], PhD, LMISTE, LMCSI, MIE
Assistant Professor,
Department of Computer Science & Information,
Majmaah University, Az- Zulfi Campus, KSA.
CSI 522: Human Computer Interaction
UI Design Paradigms
Chapter Objectives
 To understand the concept of design paradigms.
 Insight to interactive computing systems.
 Impact of Paradigm shifts in computers.
A major shift
50 years ago the cost of a computer would pay the salaries
of 200 programmers for a year
Today the salary of one programmer for a year will buy
200 computers—each vastly more powerful than the early
machines
Late 70’s: smaller and cheaper computers (PC’s) used by
non-computer experts
 Now the goal is to make computers easy to use, to save
people time
Examples of interactive computing systems
Single PC - capable of displaying
web pages.
Embedded devices, for example in
cars and in cell phones.
Handheld Global Positioning
Systems for outdoor activities.
Usability
Definitions:
A. “a measure of the ease with which a system can be learned
and used, its safety, effectiveness and efficiency, and attitude
of its users towards it” (Preece et al., 1994).
B. “the extent to which a product can be used by specified users
to achieve specified goals with effectiveness, efficiency and
satisfaction in a specified context of use” (ISO 9241-11).
 How can we measure usability?
 How can we develop a system to ensure usability?
1. Paradigms
Usually based on new technology
E.g. WIMP interface
2. Principles
Independent of technology
Usability
Paradigm
Inspiration for a conceptual model
General approach adopted by a community for carrying out research
shared assumptions, concepts, values, and practices
e.g. desktop, ubiquitous computing.
Examples of New Paradigms
 Ubiquitous computing.
 Pervasive computing.
 Wearable computing.
 Tangible bits, augmented reality.
 Attentive environments.
 Transparent computing
Why Study Paradigms????
Concerns:
 how can an interactive system be developed to ensure its usability?
 how can the usability of an interactive system be demonstrated or
measured?
History of interactive system design provides paradigms for usable
designs.
What are Paradigms
Predominant theoretical frameworks or scientific world views.
e.g., Aristotelian, Newtonian, Einsteinian (relativistic) paradigms in
physics.
Understanding HCI history is largely about understanding a series of
paradigm shifts.
Not all listed here are necessarily “paradigm” shifts, but are at least
candidates.
History will judge which are true shifts.
Paradigms of interaction
New computing technologies arrive, creating a
new perception of the human—computer
relationship.
We can trace some of these shifts in the history of
interactive technologies.
The initial paradigm
1. Batch processing
Impersonal computing
Example Paradigm Shifts
1. Batch processing
2. Time-sharing
Interactive computing
Example Paradigm Shifts
1. Batch processing
2. Timesharing
3. Networking
Community computing
Example Paradigm Shifts
1. Batch processing
2. Timesharing
3. Networking
4. Graphical displays
% foo.bar
ABORT
dumby!!!
C…P… filename
dot star… or was
it R…M?
Move this file here,
and copy this to there.
Direct manipulation
Example Paradigm Shifts
1. Batch processing
2. Timesharing
3. Networking
4. Graphical display
5. Microprocessor
Personal computing
Example Paradigm Shifts
1. Batch processing
2. Timesharing
3. Networking
4. Graphical display
5. Microprocessor
6. WWW Global information
Example Paradigm Shifts
A symbiosis of physical and electronic
worlds in service of everyday activities.
1. Batch processing
2. Timesharing
3. Networking
4. Graphical display
5. Microprocessor
6. WWW
7. Ubiquitous Computing
Time-sharing
 1940s and 1950s – explosive technological
growth
 1960s – need to channel the power
 J.C.R. Licklider at ARPA
 single computer supporting multiple users
Video Display Units
 more suitable medium than paper.
 1962 – Sutherland's Sketchpad.
 computers for visualizing and
manipulating data.
 one person's contribution could
drastically change the history of
computing.
Programming toolkits
1. Engelbart at Stanford Research Institute
2. 1963 – augmenting man's intellect
3. 1968 NLS/Augment system demonstration
4. the right programming toolkit provides building blocks to producing
complex interactive systems
Personal computing
 1970s – Papert's LOGO language for simple graphics
programming by children.
 A system is more powerful as it becomes easier to user.
 Future of computing in small, powerful machines
dedicated to the individual.
 Kay at Xerox PARC – the Dynabook as the ultimate
personal computer.
Window systems and the WIMP interface
 humans can pursue more than one task at a time.
 windows used for dialogue partitioning, to “change the topic”.
 1981 – Xerox Star first commercial windowing system.
 windows, icons, menus and pointers now familiar interaction
mechanisms.
Metaphor
relating computing to other real-world activity is effective teaching technique
LOGO's turtle dragging its tail
file management on an office desktop
word processing as typing
financial analysis on spreadsheets
virtual reality – user inside the metaphor
Problems
some tasks do not fit into a given metaphor
cultural bias
Direct manipulation
1982 – Shneiderman describes appeal of graphically-based interaction
visibility of objects
incremental action and rapid feedback
reversibility encourages exploration
syntactic correctness of all actions
replace language with action
1984 – Apple Macintosh
the model-world metaphor
What You See Is What You Get (WYSIWYG)
Hypertext
1945 – Vannevar Bush and the memex.
key to success in managing explosion of information.
mid 1960s – Nelson describes hypertext as non-linear browsing structure.
hypermedia and multimedia.
Nelson's Xanadu project still a dream today.
Multimodality
 a mode is a human communication channel.
 emphasis on simultaneous use of multiple channels
for input and output.
Computer Supported Cooperative Work
(CSCW)
 CSCW removes bias of single user / single computer system
 Can no longer neglect the social aspects
 Electronic mail is most prominent success
The World Wide Web
Hypertext, as originally realized, was a closed system.
Simple, universal protocols (e.g. HTTP) and mark-up languages (e.g. HTML) made
publishing and accessing easy.
Critical mass of users lead to a complete transformation of our information economy.
Agent-based Interfaces
 Original interfaces
 Commands given to computer
 Language-based
 Direct Manipulation/WIMP
 Commands performed on “world” representation
 Action based
 Agents - return to language by instilling proactivity and “intelligence”
in command processor
 Avatars, natural language processing
Ubiquitous Computing
“The most profound technologies are those that disappear.”
Mark Weiser, 1991
Late 1980’s: computer was very apparent
How to make it disappear?
 Shrink and embed/distribute it in the physical world
 Design interactions that don’t demand our intention
Sensor-based
and
Context-aware Interaction
Humans are good at recognizing the “context” of a situation and reacting appropriately
Automatically sensing physical phenomena (e.g., light, temp, location, identity) becoming easier
How can we go from sensed physical measures to interactions that behave as if made “aware” of
the surroundings?
Summary
 Developing a conceptual model involves good understanding of the problem
space, specifying what it is you are doing, why, and how it will support users.
 A conceptual model is a high-level description of a product in terms of what users
can do with it and the concepts they need to understand how to interact with it.
 Interaction types (e.g. conversing, instructing) provide a way of thinking about
how best to support user’s activities.
 Paradigms, visions, theories, models, and frameworks provide different ways of
framing and informing design and research.
HCI_user_interaction_Design_interaction design

More Related Content

PDF
Hci [5]paradigm
PPT
E3 chap-04
PPT
E3 chap-04
PPT
Paradigms in Human Computer Interaction.ppt
PDF
Human computer Interaction- chapter 04 -
PPT
human computer interaction I - PARADIGMS
PPTX
e3-chap-04 .pptx
PPTX
a lecture of Human- computer interactive
Hci [5]paradigm
E3 chap-04
E3 chap-04
Paradigms in Human Computer Interaction.ppt
Human computer Interaction- chapter 04 -
human computer interaction I - PARADIGMS
e3-chap-04 .pptx
a lecture of Human- computer interactive

Similar to HCI_user_interaction_Design_interaction design (20)

PPT
HCI - Chapter 4
PPT
HCI 3e - Ch 4: Paradigms
PPT
Paradigms course in Human computer interaction power point
PPT
Lecture # 8.ppt
PPT
Chapter 3 paradigm
PPT
1.lecture_07_paradigms.ppt
PPT
02 history
PPTX
Being digital, the skills of the interactive systems designer.pptx
PPT
Lcture 1
PPTX
INTERACTION AND INTERFACES MODEL OF THE INTERACTION
PPT
HCI_usable_user_interface_productivity in HCI
PPT
IMD 203 - Ch01
PPTX
617624183-Chapater-1-Introduction-to-Human-Computer-Interaction-1.pptx
PPTX
Introdction.pptx
PDF
Interaction Paradigms
PPTX
Human Computer Interaction
PPTX
HCI Presentation
PPTX
1810.mid1043.03
PPT
History of hci
HCI - Chapter 4
HCI 3e - Ch 4: Paradigms
Paradigms course in Human computer interaction power point
Lecture # 8.ppt
Chapter 3 paradigm
1.lecture_07_paradigms.ppt
02 history
Being digital, the skills of the interactive systems designer.pptx
Lcture 1
INTERACTION AND INTERFACES MODEL OF THE INTERACTION
HCI_usable_user_interface_productivity in HCI
IMD 203 - Ch01
617624183-Chapater-1-Introduction-to-Human-Computer-Interaction-1.pptx
Introdction.pptx
Interaction Paradigms
Human Computer Interaction
HCI Presentation
1810.mid1043.03
History of hci
Ad

More from nazimsattar (20)

PPTX
how to build a simple operating system type
PPTX
operating system Evolution understanding the basics
PPT
working with internet technologies using XML
PPT
working with internet technologies using CSS
PPT
different Data_Analysis concepts in data science
PPT
Data Munging in concepts of data mining in DS
PDF
Class diagram and its importance in software
PDF
GRASP_Designing Objects With Responsibilities.pdf
PPT
Memory management principles in operating systems
PPT
Deadlock principles in operating systems
PDF
overview of natural language processing concepts
PDF
introduction to natural language processing
PPT
Introduction to the operating and its types
PPT
Operating systems structures and their practical applications
PPT
Block_Chain_Technology and its concepts in reality
PPT
Edge Computing and its related technologies
PPTX
The Real time applications of Virtual Reality
PPTX
Marketing of AI technology in real life examples
PPT
system analysis and design used in software
PPTX
MYSql_Relational Data Base Management Sytem
how to build a simple operating system type
operating system Evolution understanding the basics
working with internet technologies using XML
working with internet technologies using CSS
different Data_Analysis concepts in data science
Data Munging in concepts of data mining in DS
Class diagram and its importance in software
GRASP_Designing Objects With Responsibilities.pdf
Memory management principles in operating systems
Deadlock principles in operating systems
overview of natural language processing concepts
introduction to natural language processing
Introduction to the operating and its types
Operating systems structures and their practical applications
Block_Chain_Technology and its concepts in reality
Edge Computing and its related technologies
The Real time applications of Virtual Reality
Marketing of AI technology in real life examples
system analysis and design used in software
MYSql_Relational Data Base Management Sytem
Ad

Recently uploaded (20)

PDF
Sports Quiz easy sports quiz sports quiz
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
Basic Mud Logging Guide for educational purpose
PDF
01-Introduction-to-Information-Management.pdf
PDF
Anesthesia in Laparoscopic Surgery in India
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
Classroom Observation Tools for Teachers
PDF
Complications of Minimal Access Surgery at WLH
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PPTX
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
PDF
Computing-Curriculum for Schools in Ghana
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PPTX
PPH.pptx obstetrics and gynecology in nursing
PDF
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PDF
VCE English Exam - Section C Student Revision Booklet
Sports Quiz easy sports quiz sports quiz
Abdominal Access Techniques with Prof. Dr. R K Mishra
Supply Chain Operations Speaking Notes -ICLT Program
Basic Mud Logging Guide for educational purpose
01-Introduction-to-Information-Management.pdf
Anesthesia in Laparoscopic Surgery in India
STATICS OF THE RIGID BODIES Hibbelers.pdf
Classroom Observation Tools for Teachers
Complications of Minimal Access Surgery at WLH
FourierSeries-QuestionsWithAnswers(Part-A).pdf
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
Final Presentation General Medicine 03-08-2024.pptx
Introduction_to_Human_Anatomy_and_Physiology_for_B.Pharm.pptx
Computing-Curriculum for Schools in Ghana
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Microbial diseases, their pathogenesis and prophylaxis
PPH.pptx obstetrics and gynecology in nursing
grade 11-chemistry_fetena_net_5883.pdf teacher guide for all student
Module 4: Burden of Disease Tutorial Slides S2 2025
VCE English Exam - Section C Student Revision Booklet

HCI_user_interaction_Design_interaction design

  • 1. © Dr. Khalid Nazim S.A. B.E., M. Tech, MBA[IT], PhD, LMISTE, LMCSI, MIE Assistant Professor, Department of Computer Science & Information, Majmaah University, Az- Zulfi Campus, KSA. CSI 522: Human Computer Interaction
  • 3. Chapter Objectives  To understand the concept of design paradigms.  Insight to interactive computing systems.  Impact of Paradigm shifts in computers.
  • 4. A major shift 50 years ago the cost of a computer would pay the salaries of 200 programmers for a year Today the salary of one programmer for a year will buy 200 computers—each vastly more powerful than the early machines Late 70’s: smaller and cheaper computers (PC’s) used by non-computer experts  Now the goal is to make computers easy to use, to save people time
  • 5. Examples of interactive computing systems Single PC - capable of displaying web pages. Embedded devices, for example in cars and in cell phones. Handheld Global Positioning Systems for outdoor activities.
  • 6. Usability Definitions: A. “a measure of the ease with which a system can be learned and used, its safety, effectiveness and efficiency, and attitude of its users towards it” (Preece et al., 1994). B. “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use” (ISO 9241-11).
  • 7.  How can we measure usability?  How can we develop a system to ensure usability? 1. Paradigms Usually based on new technology E.g. WIMP interface 2. Principles Independent of technology Usability
  • 8. Paradigm Inspiration for a conceptual model General approach adopted by a community for carrying out research shared assumptions, concepts, values, and practices e.g. desktop, ubiquitous computing.
  • 9. Examples of New Paradigms  Ubiquitous computing.  Pervasive computing.  Wearable computing.  Tangible bits, augmented reality.  Attentive environments.  Transparent computing
  • 10. Why Study Paradigms???? Concerns:  how can an interactive system be developed to ensure its usability?  how can the usability of an interactive system be demonstrated or measured? History of interactive system design provides paradigms for usable designs.
  • 11. What are Paradigms Predominant theoretical frameworks or scientific world views. e.g., Aristotelian, Newtonian, Einsteinian (relativistic) paradigms in physics. Understanding HCI history is largely about understanding a series of paradigm shifts. Not all listed here are necessarily “paradigm” shifts, but are at least candidates. History will judge which are true shifts.
  • 12. Paradigms of interaction New computing technologies arrive, creating a new perception of the human—computer relationship. We can trace some of these shifts in the history of interactive technologies.
  • 13. The initial paradigm 1. Batch processing Impersonal computing
  • 14. Example Paradigm Shifts 1. Batch processing 2. Time-sharing Interactive computing
  • 15. Example Paradigm Shifts 1. Batch processing 2. Timesharing 3. Networking Community computing
  • 16. Example Paradigm Shifts 1. Batch processing 2. Timesharing 3. Networking 4. Graphical displays % foo.bar ABORT dumby!!! C…P… filename dot star… or was it R…M? Move this file here, and copy this to there. Direct manipulation
  • 17. Example Paradigm Shifts 1. Batch processing 2. Timesharing 3. Networking 4. Graphical display 5. Microprocessor Personal computing
  • 18. Example Paradigm Shifts 1. Batch processing 2. Timesharing 3. Networking 4. Graphical display 5. Microprocessor 6. WWW Global information
  • 19. Example Paradigm Shifts A symbiosis of physical and electronic worlds in service of everyday activities. 1. Batch processing 2. Timesharing 3. Networking 4. Graphical display 5. Microprocessor 6. WWW 7. Ubiquitous Computing
  • 20. Time-sharing  1940s and 1950s – explosive technological growth  1960s – need to channel the power  J.C.R. Licklider at ARPA  single computer supporting multiple users
  • 21. Video Display Units  more suitable medium than paper.  1962 – Sutherland's Sketchpad.  computers for visualizing and manipulating data.  one person's contribution could drastically change the history of computing.
  • 22. Programming toolkits 1. Engelbart at Stanford Research Institute 2. 1963 – augmenting man's intellect 3. 1968 NLS/Augment system demonstration 4. the right programming toolkit provides building blocks to producing complex interactive systems
  • 23. Personal computing  1970s – Papert's LOGO language for simple graphics programming by children.  A system is more powerful as it becomes easier to user.  Future of computing in small, powerful machines dedicated to the individual.  Kay at Xerox PARC – the Dynabook as the ultimate personal computer.
  • 24. Window systems and the WIMP interface  humans can pursue more than one task at a time.  windows used for dialogue partitioning, to “change the topic”.  1981 – Xerox Star first commercial windowing system.  windows, icons, menus and pointers now familiar interaction mechanisms.
  • 25. Metaphor relating computing to other real-world activity is effective teaching technique LOGO's turtle dragging its tail file management on an office desktop word processing as typing financial analysis on spreadsheets virtual reality – user inside the metaphor Problems some tasks do not fit into a given metaphor cultural bias
  • 26. Direct manipulation 1982 – Shneiderman describes appeal of graphically-based interaction visibility of objects incremental action and rapid feedback reversibility encourages exploration syntactic correctness of all actions replace language with action 1984 – Apple Macintosh the model-world metaphor What You See Is What You Get (WYSIWYG)
  • 27. Hypertext 1945 – Vannevar Bush and the memex. key to success in managing explosion of information. mid 1960s – Nelson describes hypertext as non-linear browsing structure. hypermedia and multimedia. Nelson's Xanadu project still a dream today.
  • 28. Multimodality  a mode is a human communication channel.  emphasis on simultaneous use of multiple channels for input and output.
  • 29. Computer Supported Cooperative Work (CSCW)  CSCW removes bias of single user / single computer system  Can no longer neglect the social aspects  Electronic mail is most prominent success
  • 30. The World Wide Web Hypertext, as originally realized, was a closed system. Simple, universal protocols (e.g. HTTP) and mark-up languages (e.g. HTML) made publishing and accessing easy. Critical mass of users lead to a complete transformation of our information economy.
  • 31. Agent-based Interfaces  Original interfaces  Commands given to computer  Language-based  Direct Manipulation/WIMP  Commands performed on “world” representation  Action based  Agents - return to language by instilling proactivity and “intelligence” in command processor  Avatars, natural language processing
  • 32. Ubiquitous Computing “The most profound technologies are those that disappear.” Mark Weiser, 1991 Late 1980’s: computer was very apparent How to make it disappear?  Shrink and embed/distribute it in the physical world  Design interactions that don’t demand our intention
  • 33. Sensor-based and Context-aware Interaction Humans are good at recognizing the “context” of a situation and reacting appropriately Automatically sensing physical phenomena (e.g., light, temp, location, identity) becoming easier How can we go from sensed physical measures to interactions that behave as if made “aware” of the surroundings?
  • 34. Summary  Developing a conceptual model involves good understanding of the problem space, specifying what it is you are doing, why, and how it will support users.  A conceptual model is a high-level description of a product in terms of what users can do with it and the concepts they need to understand how to interact with it.  Interaction types (e.g. conversing, instructing) provide a way of thinking about how best to support user’s activities.  Paradigms, visions, theories, models, and frameworks provide different ways of framing and informing design and research.