The Design of Everyday Things HTML, HTTP &

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

The Design of Everyday Things HTML, HTTP &

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support