CS 102 Human-Computer Interaction
Lecture 11: The Design of Everyday Things HTML, HTTP & CSS
CS102: Monsoon 2015 1 Course updates
Project user understanding phase: writeup due Monday Oct 12
Home page for each user due Wednesday Oct 14 (every student)
2 CS102: Monsoon 2015 Ubiquitous computing
Reactions to Mark Weiser’s “The Computer for the 21st Century”?
3 CS102: Monsoon 2015 Recap
4 CS102: Monsoon 2015 In-class exercise
1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Preventing errors
6. Recognition over recall
7. Flexibility and efficiency
8. Aesthetic and minimalist design
9. Recover from errors
10. Help and Documentation
5 CS102: Monsoon 2015 The Design of Everyday Things
human
6 CS102: Monsoon 2015 An influential book
Don Norman
7 CS102: Monsoon 2015 The 2 Gulfs
Gulf of evaluation: distance between the system state and the user’s understanding of it
“The gulf is small when the system provides information about its state in a form that is easy to get, is easy to interpret, and matches the way the person thinks of the system”
Gulf of execution: difference between the intentions of the users and what the system allows them to do
8 CS102: Monsoon 2015 Norman’s 7
Discoverability & Signifiers
Feedback
Mapping
Constraints
Affordances
Conceptual model
9 CS102: Monsoon 2015 Discoverability & Signifiers
10 CS102: Monsoon 2015 Discoverability & Signifiers
Use signifiers
Standard icons
Text on hover (for touch screens?)
Random popup
…
11 CS102: Monsoon 2015 Feedback
See “visibility of system status”
12 CS102: Monsoon 2015 Mapping
13 CS102: Monsoon 2015 Mapping: scroll direction
14 CS102: Monsoon 2015 Constraints
Examples:
Circuit breakers
Interlock (operations must happen in sequence)
Lockin (“Don’t hit the back button!”)
Lockout (grayed out menu items)
15 CS102: Monsoon 2015 Affordances
Affordance: the term affordance was made up by James J. Gibson in an essay in 1977.
"The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, but the noun affordance is not. I have made it up.”
16 http://cs.brown.edu/courses/cs137/readings/Gibson-AFF.pdf CS102: Monsoon 2015 Mental and conceptual models
Mental model: idea of how the world works
Conceptual models: concept of how an interface works
17 CS102: Monsoon 2015 Conceptual models
18 CS102: Monsoon 2015 Mental and conceptual models
What is your mental model of web search?
What is your mental model of TV + set-top-box receiver?
19 CS102: Monsoon 2015 Norman’s 7
Discoverability & Signifiers
Feedback
Mapping
Constraints
Affordances
Conceptual model
20 CS102: Monsoon 2015 Model-View-Controller
human
21 CS102: Monsoon 2015 MVC pattern
A standard design pattern for GUIs (originally from Smalltalk)
Model: manages data
View: handles presentation
Controller: allows user interaction
22 CS102: Monsoon 2015 MVC benefits
Separation of concerns
Loose coupling between M, V and C, allows them to developed, updated and tested independently
Multiple views/controllers possible on the same model (e.g. mobile and web)
Reusable across projects
23 CS102: Monsoon 2015 HTML, HTTP & CSS
human
24 CS102: Monsoon 2015 Evolution of HTML
Hypertext Markup Language (based on SGML)
Created by Tim Berners-Lee at CERN in 1989
Great example of a robust distributed system
25 CS102: Monsoon 2015 Evolution of HTML
Very interesting language features
Error tolerant
Declarative
Non-context-free grammar
Dangling links are ok
Original idea: Users would be able to edit pages
End user customization
26 CS102: Monsoon 2015 HTML
How could it have been different?
27 CS102: Monsoon 2015 HTTP
Stateless protocol
4 primary operations
GET
PUT
POST
DELETE
(all but POST are idempotent)
28 CS102: Monsoon 2015 Cookies
One way of maintaining state in a session
Client offers a cookie to the server to identify itself
Server can customize response based on the cookie
29 CS102: Monsoon 2015 HTML overview tags: attributes, matched open/close
,
| ,
|