Human Computer Interaction 2014, Lecture 4 1 Issues • Thursday September 18 – Explanation Practical • Monday September 22, – Team Formation • Thursday October 30 – Written Exam (extra) LECTURE 4 HISTORY, MENTAL MODELS September 15 th , 2014 human computer interaction 2014, fjv 2 Recapitulation Lecture 3 • Principles of Reasoning • Principles of Human Vision • Principles of Gestalt • Colour models (HSL) • Principles of Human Hearing • Principles of Human Touch – Haptics • 1 more Key principle of HCI • Affordance human computer interaction 2014, fjv 3 A self explanatory Gestalt 4 human computer interaction 2014, fjv • What do you see …
24
Embed
Issues - liacs.leidenuniv.nlliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-04.pdf · • Cognetics – Locus of Attention • Affordance – what sort of operations and manipulations
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Human Computer Interaction 2014, Lecture 4 1
Issues
• Thursday September 18
– Explanation Practical
• Monday September 22,
– Team Formation
• Thursday October 30
– Written Exam (extra)
LECTURE 4
HISTORY, MENTAL MODELS
September 15th, 2014
human computer interaction 2014, fjv 2
Recapitulation Lecture 3
• Principles of Reasoning
• Principles of Human Vision
• Principles of Gestalt
• Colour models (HSL)
• Principles of Human Hearing
• Principles of Human Touch – Haptics
• 1 more Key principle of HCI
• Affordance
human computer interaction 2014, fjv 3
A self explanatory Gestalt
4human computer interaction 2014, fjv
• What do you see …
Human Computer Interaction 2014, Lecture 4 2
A self explanatory cognition
• Read this text aloud …
• Perceptual Set,
– link between expectation and perception.
– Paris in the
the spring
human computer interaction 2014, fjv 5
Perceptual Set
• It stresses the idea of perception as an active process involving selection, inference and interpretation.
• Perceptual set is a bias or readiness to perceive certain aspects of available sensory data and to ignore others. -filtering!-
• How proficient are we in filtering?
human computer interaction 2014, fjv 6
Example Perceptual Set
I2
I3
I4
human computer interaction 2014, fjv 7
Example Perceptual Set
A I3 C
human computer interaction 2014, fjv 8
Human Computer Interaction 2014, Lecture 4 3
Example Perceptual Set
I2
A I3 C
I4
• Minturn & Bruner, 1951
human computer interaction 2014, fjv 9 10
Key Concepts of HCI
• Usability
• Cognetics – Locus of Attention
• Affordance
– what sort of operations and manipulations can be done to object
– crucial is the Perceived Affordance
• Visibility (Transparency)
– mapping between controls and effects should be sensible and meaningful
– feedback
• Task orientation – Fit, Analysis
human computer interaction 2014, fjv
11
•The extent to which functions and their results
are visible to the user as well as how easy it is to
find and use these functions
User Goals User Actions Results
Feedback
Interface components
(controls)
Functions of the system
Definition of Visibility
• The User can reason - internalize knowledge in interface
human computer interaction 2014, fjv 12
Visibility
• Phones vs. Cars
– What feedback do you get …
• Important concept: constraining interfaces.
restricting the way we can use them
– GUI: de-activation (greying-out)
– Categories of constraints:
• Physical - e.g. disk
• Logical - rely on knowledge of how world works
• Cultural - learned conventions (“arbitrary”)
– These categories are used in design;
human computer interaction 2014, fjv
Human Computer Interaction 2014, Lecture 4 4
13
Exercise
• What is the visibility of HCI Course Enrolment
• What is the visibility of a file/copy operation
– In Linux
– In MacOS
– In Win 7/8
• How would you rate the visibility of the
Cut/Paste function in most software?
human computer interaction 2014, fjv
HISTORY OF THE
GRAPHICAL USER INTERFACE
What came first, how did it look, who were the pioneers.
Things you sould know about graphical user interfaces but were afraid to
ask about ...
human computer interaction 2014, fjv 14
GUI related Landmarks
• Dynabook– Alan Kay (1977)
• VisiCalc– Frankston & Bricklin (1977)
• Hypertext (keywords & cross references)
– Memex: Vannevar Bush (1945)
– Hopscotch, Rayuela, J. Cortazar (1963)
– Ted Nelson, coined the term (1965)
– WWW: Tim Berners-Lee (1990)
• Ubiquitous Computing – Mark Weiser (1991)
• #
15human computer interaction 2014, fjv
• Memex = Memory Extension
• Collection of aids to assist in makingassociative relations
• In its organization predecessor of hypertext.
• Ted Nelson coined Hypertext (1965)
• Continues to exist as XANADU
• #
Memex & Hypertext
16
t.nelson
v.bush
human computer interaction 2014, fjv
Human Computer Interaction 2014, Lecture 4 5
Landmarks in GUI: DynaBook
DynaBook (1977), Xerox Parc (Palo Alto Research Centre)
– “User interface is learning environment”
– Introduced the GUI & Hyper Media
– Notion of handheld dynamic Book, medium for thought
17
?
human computer interaction 2014, fjv
2009
Landmarks in GUI: STAR
• STAR, Xerox Parc (1981)• 1st Commercial PC with WYSIWYG
• Designed for business professionals
• Complete implementation of
DeskTop Metaphor
• Network & Printing integration
• Not a commercial success!?
• First system based on usability engineering
18human computer interaction 2014, fjv
Landmarks in GUI: Apple
Apple Lisa (1983)
– predecessor of Apple-Mac
– GUI’s (simple but complete)
– WYSIWYG: what you see is what you get.
– One-button mouse
– First computers still equipped with 5.25 FDD
19human computer interaction 2014, fjv
Evolving from Apple Lisa GUI
20
Apple Lisa GUI MacPlus GUI
human computer interaction 2014, fjv
Human Computer Interaction 2014, Lecture 4 6
21human computer interaction 2014, fjv
... Evolved to The MacOS X GUI interface components.
Typically holds a lot of different metaphores ...
Is the desktop metaphore still valid?
MENTAL MODELS
METAPHORS AND …
How we support our reasoning and thinking on artifacts.
human computer interaction 2014, fjv 22
Contents
• Knowledge representation
• Schemata
• Mental models
• Relation Mental model to User
• Relation Mental model to Designer
• Metaphors
human computer interaction 2014, fjv 23
Case Study
• Food has an expiry date
– Do not buy food past it expiry date
– Remove food after expiry date
• Credit cards have an expiry date
– Can not use Credit Card after expiry date
– Throw away expired Credit Card
• Email certificates have expiry datePassport has expiry date
– What to do after certificate/passport expires ?
Throw away: will block email with certificate!
– Emails become unreadable and unusable!
will complicate obtaining a new passport!
24human computer interaction 2014, fjv
Human Computer Interaction 2014, Lecture 4 7
Case Study & Mental Models
• Mental Model of expiry date
– Seems not to be context sensitive
– Food, Credit Card: same behavior
– Email certificate/ Passport: different behavior whilst same mental model is appealed on!
• Design requires a good Mental model
– Designers use it
– Users use it
– Based on former knowledge
• How do we deal with knowledge …
25human computer interaction 2014, fjv
Knowledge and HCI
• One should realize:
Understanding of the way that knowledge is
represented, organized and retrieved is
important. It can be used so that then perhaps
it is possible to develop interfaces that
facilitate thinking and problem solving.
• Prediction of behavior of the machine
(comp. Prediction human behavior)
26human computer interaction 2014, fjv
Knowledge Representation
Symbolic Representation
• Cognition depends on rule-like manipulation of symbolic structures
– For a driver a functional model of a car is sufficient
• Structural Mental Model
– Understanding a structure: the why
– Referred to as the how-it-works model
– Context free
– For a mechanic a structural model of a car is a necessity
45human computer interaction 2014, fjv
Applied to Design
• System Model
– Systems hardware & software components
• Designer Model
– Conceptual model of the designer
• System Image
– User interface (screen design)
• User Model (= Mental Model)
– Conceptual model of the user
(*)
46human computer interaction 2014, fjv
Users & Designers
47
Metaphors
Graphics
Icons
Language
Documentation
Tutorials
human computer interaction 2014, fjv
Metaphor
• To map familiar to unfamiliar knowledge:
helps understanding and learning in new
domain
• The transference of the relation between one
set of objects to another set for the purpose
of brief explanation (Webster’s revised)
• l. metaphora,
fr. to carry over, transfer; meta: beyond, over
48human computer interaction 2014, fjv
Human Computer Interaction 2014, Lecture 4 13
Analogy
• Analogy suggests that the mode of operation of the analogon is completely the same as the original
• A resemblance of relations; an agreement or likeness between things in some circumstances or effects, when the things are otherwise entirely different. (Webster’s revised)
– 1. Similarity in some respect between things that are otherwise dissimilar: "the operation of a computer presents an interesting analogy to the working of the brain“ (WordNet)
– 2. (logic) inference that if things agree in some respects they probably agree in others (WordNet)
49human computer interaction 2014, fjv
Metaphors in daily life
• Lakoff & Johnson
– “...the way we think, what we experience, and what we do every day is very much a matter of metaphor.''
• In our language & thinking - “argument is war”
– … he attacked every weak point
– ... criticisms right on target
– ... if you use that strategy
– … soccer is war!
• In our language & thinking – “time is money”
– … this GUI really saves me time
– … installing the latest version was a waste of time
– … on what subject did you spend most of your time
50human computer interaction 2014, fjv
Metaphore or Simile
A simile, aka open comparison,
• form of metaphor that compares two different things to create a new meaning.
• always uses "like" or "as" within the phrase and is more explicit than a metaphor.
• e.g.
– The spy was close as a shadow.
– She runs like a cheetah.
• metaphor and simile used to enhance creative expression
human computer interaction 2014, fjv 51
Metaphors
• The book metaphor
– Strength and weakness
• The desktop metaphor
– History and examples
• The internet metaphor
– Strength and weakness
• The spatial metaphor
– In development, examples
• The social metaphor
– In development, example
52human computer interaction 2014, fjv
Human Computer Interaction 2014, Lecture 4 14
Composite Metaphors
• While analyzing a metaphor, often more than
one metaphor is found.
• Example: desktop
– Menu, is a metaphor from a restaurant
– Button is a metaphor of an electrical device
• Users develop mental model to deal with
composite metaphors
53human computer interaction 2014, fjv
The Book Metaphor
• (Early application of) CD-Rom in multi media
– Content page
– Page numbering
– Index
– Help navigating the data
• Disadvantages of the book metaphor
– Not capable of dynamic look-up
– Turning pages does not fit with fast search
– … a bit limited in current use
54human computer interaction 2014, fjv
Modern Book Metaphor
55human computer interaction 2014, fjv
The Desktop Metaphor
• Started at Xerox PARC
– Xerox Star (next slide)
– Bitmapped screens made it possible
• Not meant to be a real desktop
– Idea is to organize information in away to allow people to use it comparable to the way they use information on their desktops
– Allow windows to overlap
– Make the screen act as if there were objects on it