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

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) CS102: Monsoon 2015 2

Ubiquitous computing Reactions to Mark Weiser’s “The Computer for the 21st Century”? CS102: Monsoon 2015 3

Recap CS102: Monsoon 2015 4

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 e ffi ciency 8. Aesthetic and minimalist design 9. Recover from errors 10. Help and Documentation CS102: Monsoon 2015 5

The Design of Everyday Things 6 CS102: Monsoon 2015

An in fl uential book Don Norman CS102: Monsoon 2015 7

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: di ff erence between the intentions of the users and what the system allows them to do CS102: Monsoon 2015 8

Norman’s 7 Discoverability & Signi fi ers Feedback Mapping Constraints A ff ordances Conceptual model CS102: Monsoon 2015 9

Discoverability & Signi fi ers CS102: Monsoon 2015 10

Discoverability & Signi fi ers Use signi fi ers Standard icons Text on hover (for touch screens?) Random popup … CS102: Monsoon 2015 11

Feedback See “visibility of system status” CS102: Monsoon 2015 12

Mapping CS102: Monsoon 2015 13

Mapping: scroll direction CS102: Monsoon 2015 14

Constraints Examples: Circuit breakers Interlock (operations must happen in sequence) Lockin (“Don’t hit the back button!”) Lockout (grayed out menu items) CS102: Monsoon 2015 15

A ff ordances A ff ordance: the term a ff ordance was made up by James J. Gibson in an essay in 1977. "The a ff ordances of the environment are what it o ff ers the animal, what it provides or furnishes, either for good or ill. The verb to a ff ord is found in the dictionary, but the noun a ff ordance is not. I have made it up.” CS102: Monsoon 2015 16 http://cs.brown.edu/courses/cs137/readings/Gibson-AFF .pdf

Mental and conceptual models Mental model: idea of how the world works Conceptual models: concept of how an interface works CS102: Monsoon 2015 17

Conceptual models CS102: Monsoon 2015 18

Mental and conceptual models What is your mental model of web search? What is your mental model of TV + set-top-box receiver? CS102: Monsoon 2015 19

Norman’s 7 Discoverability & Signi fi ers Feedback Mapping Constraints A ff ordances Conceptual model CS102: Monsoon 2015 20

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 CS102: Monsoon 2015 22

MVC bene fi ts 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 CS102: Monsoon 2015 23

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 CS102: Monsoon 2015 25

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 CS102: Monsoon 2015 26

HTML How could it have been di ff erent? CS102: Monsoon 2015 27

HTTP Stateless protocol 4 primary operations GET PUT POST DELETE (all but POST are idempotent) CS102: Monsoon 2015 28

Cookies One way of maintaining state in a session Client o ff ers a cookie to the server to identify itself Server can customize response based on the cookie CS102: Monsoon 2015 29

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 CS102: Monsoon 2015 30

Please complete https://www.codecademy.com/en/tracks/htmlcss CS102: Monsoon 2015 31

Simple assignment Create a home page for yourself and email it to us by Wed. Oct 14 CS102: Monsoon 2015 32