1 Course updates Project user understanding phase: writeup due - - PowerPoint PPT Presentation

CS102: Monsoon 2015

CS 102 Human-Computer Interaction Lecture 11: The Design of Everyday Things HTML, HTTP & CSS

1

CS102: Monsoon 2015

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

6

CS102: Monsoon 2015

An influential book

7

Don Norman

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

16

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

• r ill. The verb to afford is found in the dictionary, but

the noun affordance is not. I have made it up.”

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

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

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 <html>, <body> <table>, <tr>, <td> <div>, <span> <img> <iframe> <a href=“…”> and <a name=“…”> ul/ol, li form, input, select

30

CS102: Monsoon 2015

Please complete

https://www.codecademy.com/en/tracks/htmlcss

31

CS102: Monsoon 2015

Simple assignment

Create a home page for yourself and email it to us by

• Wed. Oct 14

32