SlideShare a Scribd company logo
Human Computer Interaction
HCI Then & Now
Analytical Engine
Charles Babbage - 1837
Punched Cards (1950)
• According to IBM punched card became the
basic I/O methodology for computers.
• 18th century used for textile looms.
• 19th century used for enter data in to tabulate
machine.
.
Light Pen (1951)
• A device that senses the change of the
brightness of the screen.
• Whirlwind was the first computer, which used
this revolutionary new device
.
Command Line Interface
• Teletype keyboard help to input the command
through the command line.
• Later cathode ray tube use to display the
commands.
Computer Mouse (1963)
• First mouse was developed in 1963. Only one
button with wooden block.
• 1972 mouse developed with two roller wheals
with metal balls.
• 1980 made the special mouse pads and utilize
sensors to detect light and dark.
Before 1960
• There was no focus on HCI
• Focus was on computations rather than
presenting it attractively.
• Graphical and gestural user interfaces
(Sutherland 1963),
• Synchronous collaboration through direct
pointing and shared windows (Engelbart and
English 1968)
Apple Lisa (1983)
First Personal Computer with GUI
Multi touch (1984)
• First transparent multi touch screen overlay was
build on 1984.
• Surface of voltage applied across it and touch
sensors laid above the CRT display
Factors led to HCI development after 1980s
1. Prototyping and Iterative Development
2. Software Psychology and Human Factors
3. New User Interface Software
4. Models, Theories, and Frameworks
UI to UX
User Experience
The modern HCI principles
Methodologies of HCI Design
• Activity Theory
• User Centered Design
• Principles of UI design
• Value sensitive design (VSD)
Responsive Web designs
• Responsive web design (RWD) is an approach to
web design aimed at crafting sites to provide an
optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning,
and scrolling—across a wide range of devices
Gesture Recognition
• Gesture recognition involves determining the
movement of a user’s fingers, hands, arms, head or
body in three dimensions through the use of a
camera; or via a device with embedded sensors that
may be worn, held or body-mounted.
• The primary application for gestural interfaces at
present is in the gaming and home
• entertainment market.
• potential of hands-free control of devices
• Ability for several people to interact with large
datasets.
Kinect Technology
• Kinect is a line of motion sensing input devices
by Microsoft
• Came with Xbox 360 and Xbox One video game
consoles and Windows PCs.
• Based around a webcam-style add-on peripheral,
it enables users to control and interact with their
console/computer without the need for a game
controller, through a natural user interface using
gestures and spoken commands
Multi touch Devices
• Provides a realistic User Experience
• Became popular with handheld devices
• Still have some drawbacks when adopting for
critical systems.
Intelligent Personal Assistants
• Siri by Apple Inc.
• Cortana by Microsoft
• Speech recognition
• Natural language processing
• Knowledge management
Virtual Reality
Microsoft developing VR applications
Virtual Reality
• Virtual Reality sometimes referred to as
immersive multimedia, is a computer-simulated
environment that can simulate physical presence
in places in the real world or imagined worlds.
Virtual reality can recreate sensory experiences,
which include virtual taste, sight, smell, sound &
touch
Devices Used in a VR system
• Head Mounted Displays
• Head Trackers
• Motion Trackers
• Data Gloves
• 3D Controllers
• Haptic Devices
• Stereoscopic 3D Displays
• VR Domes.
Advantages of VR
• Real life simulations
• Cost effective
• Safe environments
• More practical than a theoretical lesson
• Real life situations
Disadvantages of VR
• Cost
• Uncomfortable devices
• Communication problems
Augmented Reality
Volkswagen MARTA
Augmented Reality
• Augmented reality (AR) is a live direct or indirect
view of a physical, real-world environment whose
elements are augmented (or supplemented) by
computer-generated sensory input such as
sound, video, graphics or GPS data.
Advantages of AR
• Mobility
• Wear ability
• Hands free
• Multi model (google Glass)
Augmented Reality Demo
Thank you
Haritha Thilakarathne | Hashan Hikkaduwa
Shehan Chathuranga | Manoj Vidanage
Anjalee Ekanayake | MF Shafra

More Related Content

PDF
Touchless interactivity is the new frontier
PDF
Web cam sensing using sdk tool
PPTX
Leap Motion ppt
PPTX
Leap motion
PPT
SIXTH SENSE TECHNOLOGY
PPTX
6th sense device
PPT
Microsoft surface by NIRAV RANA
PPTX
02 gui history
Touchless interactivity is the new frontier
Web cam sensing using sdk tool
Leap Motion ppt
Leap motion
SIXTH SENSE TECHNOLOGY
6th sense device
Microsoft surface by NIRAV RANA
02 gui history

What's hot (20)

PPT
Sixth sense techno_ppt
PPTX
Leap motion controller
PPTX
Leap Motion
PPTX
Augmented Reality (AR)
PPTX
Augmented Reality
PPTX
Augmented reality (Access virtual world)
PDF
11.19 hong quan_leapmotion-beyondthemouseandkeyboard
PPTX
Virtual reality
PPTX
Leap motion
PPTX
Touchless technology Seminar Presentation
PPT
Virtual Mouse
PPTX
6th sense technology
DOCX
leap motion controller
PPTX
Virtual reality
PPTX
What is touch screen ?
PPTX
Leap Motion seminar presentation ppt
PPTX
Final power point 2
PPTX
Augmented Reality
PPTX
Surface computer
PDF
The Mobile Future of Augmented Reality
Sixth sense techno_ppt
Leap motion controller
Leap Motion
Augmented Reality (AR)
Augmented Reality
Augmented reality (Access virtual world)
11.19 hong quan_leapmotion-beyondthemouseandkeyboard
Virtual reality
Leap motion
Touchless technology Seminar Presentation
Virtual Mouse
6th sense technology
leap motion controller
Virtual reality
What is touch screen ?
Leap Motion seminar presentation ppt
Final power point 2
Augmented Reality
Surface computer
The Mobile Future of Augmented Reality
Ad

Similar to Human Computer Interacton (20)

PPTX
Surface computer
PPTX
NUX Presentation from TechMixer Birmingham 2011
PPT
Introduction uc
PPTX
Computer Hardware - By Muhammad Yasir Mangrio.pptx
PPT
Microsoft surface .. sohan singh grover 9996402177
PPTX
Ubiquitous Computing: an Introduction
PPTX
Virtual reality-What you see is what you believe
PPT
virtual and augmented slides detailed wxplanation
PPT
virtual and augmented reality also includes their types and detailed explanation
PDF
Surface computing
PPTX
Virtual World
PPTX
Virtual Reality
PPTX
Next generation User interfaces
PDF
virtual reality Information-160422181930.pdf
PPTX
Human_Computer_Interaction_HCI_Presentation.pptx
PPTX
Touchless Touchscreen Technology
PPTX
Virtual reality
PDF
ARI2132 lecture 8
PPTX
AUGMENTED REALITY
Surface computer
NUX Presentation from TechMixer Birmingham 2011
Introduction uc
Computer Hardware - By Muhammad Yasir Mangrio.pptx
Microsoft surface .. sohan singh grover 9996402177
Ubiquitous Computing: an Introduction
Virtual reality-What you see is what you believe
virtual and augmented slides detailed wxplanation
virtual and augmented reality also includes their types and detailed explanation
Surface computing
Virtual World
Virtual Reality
Next generation User interfaces
virtual reality Information-160422181930.pdf
Human_Computer_Interaction_HCI_Presentation.pptx
Touchless Touchscreen Technology
Virtual reality
ARI2132 lecture 8
AUGMENTED REALITY
Ad

More from Haritha Thilakarathne (10)

PDF
What's inside AI
PPTX
Deep Learning with Microsoft Azure
PDF
Introduction to keras
PPTX
Azure for Machine Learning & Deep Learning
PPTX
Democratizing Machine Learning with the Power of Cloud
PPTX
Data Science Orientation
PPTX
"Something worth ten Microsofts" - Azure Machine Learning 101
PPTX
PPTX
Facebook Addiction Disorder
PPTX
Virtualization with Client Hyper V in Windows 8
What's inside AI
Deep Learning with Microsoft Azure
Introduction to keras
Azure for Machine Learning & Deep Learning
Democratizing Machine Learning with the Power of Cloud
Data Science Orientation
"Something worth ten Microsofts" - Azure Machine Learning 101
Facebook Addiction Disorder
Virtualization with Client Hyper V in Windows 8

Recently uploaded (20)

PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PPTX
Big Data Technologies - Introduction.pptx
PPTX
Spectroscopy.pptx food analysis technology
PPT
Teaching material agriculture food technology
PDF
KodekX | Application Modernization Development
PDF
Electronic commerce courselecture one. Pdf
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
cuic standard and advanced reporting.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Approach and Philosophy of On baking technology
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Big Data Technologies - Introduction.pptx
Spectroscopy.pptx food analysis technology
Teaching material agriculture food technology
KodekX | Application Modernization Development
Electronic commerce courselecture one. Pdf
20250228 LYD VKU AI Blended-Learning.pptx
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Understanding_Digital_Forensics_Presentation.pptx
NewMind AI Weekly Chronicles - August'25 Week I
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Network Security Unit 5.pdf for BCA BBA.
Review of recent advances in non-invasive hemoglobin estimation
MIND Revenue Release Quarter 2 2025 Press Release
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Spectral efficient network and resource selection model in 5G networks
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
cuic standard and advanced reporting.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
Approach and Philosophy of On baking technology

Human Computer Interacton

  • 3. Punched Cards (1950) • According to IBM punched card became the basic I/O methodology for computers. • 18th century used for textile looms. • 19th century used for enter data in to tabulate machine. .
  • 4. Light Pen (1951) • A device that senses the change of the brightness of the screen. • Whirlwind was the first computer, which used this revolutionary new device .
  • 5. Command Line Interface • Teletype keyboard help to input the command through the command line. • Later cathode ray tube use to display the commands.
  • 6. Computer Mouse (1963) • First mouse was developed in 1963. Only one button with wooden block. • 1972 mouse developed with two roller wheals with metal balls. • 1980 made the special mouse pads and utilize sensors to detect light and dark.
  • 7. Before 1960 • There was no focus on HCI • Focus was on computations rather than presenting it attractively. • Graphical and gestural user interfaces (Sutherland 1963), • Synchronous collaboration through direct pointing and shared windows (Engelbart and English 1968)
  • 8. Apple Lisa (1983) First Personal Computer with GUI
  • 9. Multi touch (1984) • First transparent multi touch screen overlay was build on 1984. • Surface of voltage applied across it and touch sensors laid above the CRT display
  • 10. Factors led to HCI development after 1980s 1. Prototyping and Iterative Development 2. Software Psychology and Human Factors 3. New User Interface Software 4. Models, Theories, and Frameworks
  • 11. UI to UX User Experience
  • 12. The modern HCI principles
  • 13. Methodologies of HCI Design • Activity Theory • User Centered Design • Principles of UI design • Value sensitive design (VSD)
  • 14. Responsive Web designs • Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices
  • 15. Gesture Recognition • Gesture recognition involves determining the movement of a user’s fingers, hands, arms, head or body in three dimensions through the use of a camera; or via a device with embedded sensors that may be worn, held or body-mounted. • The primary application for gestural interfaces at present is in the gaming and home • entertainment market. • potential of hands-free control of devices • Ability for several people to interact with large datasets.
  • 16. Kinect Technology • Kinect is a line of motion sensing input devices by Microsoft • Came with Xbox 360 and Xbox One video game consoles and Windows PCs. • Based around a webcam-style add-on peripheral, it enables users to control and interact with their console/computer without the need for a game controller, through a natural user interface using gestures and spoken commands
  • 17. Multi touch Devices • Provides a realistic User Experience • Became popular with handheld devices • Still have some drawbacks when adopting for critical systems.
  • 18. Intelligent Personal Assistants • Siri by Apple Inc. • Cortana by Microsoft • Speech recognition • Natural language processing • Knowledge management
  • 20. Virtual Reality • Virtual Reality sometimes referred to as immersive multimedia, is a computer-simulated environment that can simulate physical presence in places in the real world or imagined worlds. Virtual reality can recreate sensory experiences, which include virtual taste, sight, smell, sound & touch
  • 21. Devices Used in a VR system • Head Mounted Displays • Head Trackers • Motion Trackers • Data Gloves • 3D Controllers • Haptic Devices • Stereoscopic 3D Displays • VR Domes.
  • 22. Advantages of VR • Real life simulations • Cost effective • Safe environments • More practical than a theoretical lesson • Real life situations
  • 23. Disadvantages of VR • Cost • Uncomfortable devices • Communication problems
  • 25. Augmented Reality • Augmented reality (AR) is a live direct or indirect view of a physical, real-world environment whose elements are augmented (or supplemented) by computer-generated sensory input such as sound, video, graphics or GPS data.
  • 26. Advantages of AR • Mobility • Wear ability • Hands free • Multi model (google Glass)
  • 28. Thank you Haritha Thilakarathne | Hashan Hikkaduwa Shehan Chathuranga | Manoj Vidanage Anjalee Ekanayake | MF Shafra

Editor's Notes

  • #9: Xerox star 8010 was the first commercial computer system with GUI and Mouse.
  • #12: Till 1970s computers only for technicians User interface is not the only user experience
  • #13: The user interacts directly with hardware for the human input and output such as displays, e.g. through a graphical user interface. The user interacts with the computer over this software interface using the given input and output (I/O) hardware. Software and hardware must be matched, so that the processing of the user input is fast enough, the latency of the computer output is not disruptive to the workflow.
  • #15: Social networks – Facebook/twitter Wide range of mobile devices
  • #28: Using layar app for the AR