Design of Everyday Things. Agenda Questions? Project Part 1: Now what? Test review One last bit on prototyping Design of Everyday Things.

Slides:



Advertisements
Similar presentations
Structured Design The Structured Design Approach (also called Layered Approach) focuses on the conceptual and physical level. As discussed earlier: Conceptual.
Advertisements

Design, prototyping and construction
Interaction Techniques Level 2 Prepared by: RHR First Prepared on: Nov 23, 2006 Last Modified on: Quality checked by: MOH Copyright 2004 Asia Pacific Institute.
Human Capabilities: Mental Models CS352. Announcements Notice upcoming due dates (web page). Where we are in PRICPE: –Predispositions: Did this in Project.
Design of Everyday Things Chapter One
SECOND MIDTERM REVIEW CS 580 Human Computer Interaction.
Copyright 1999 all rights reserved The HCI Design Process n User Interfaces are not just built by sitting down and drawing up designs for them n Just like.
CISB213 Human Computer Interaction Design Principles
Fall 2002CS/PSY Design of Everyday Things Agenda Discuss Norman’s views on HCI & design Discussion What did you take away from DOET book.
What is Design? Professor: Tapan Parikh TA: Eun Kyoung Choe
Good Design Visibility is key to interaction design Take advantage of affordances/constraints Provide a good conceptual model for the user.
Semester in review. The Final May 7, 6:30pm – 9:45 pm Closed book, ONE PAGE OF NOTES Cumulative Similar format to midterm (probably about 25% longer)
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 10, 2005.
Design of Everyday Things
SIMS 213: User Interface Design & Development
Class 6 LBSC 690 Information Technology Human Computer Interaction and Usability.
Design of Everyday Things
Midterm Exam Review IS 485, Professor Matt Thatcher.
Semester wrap-up …my final slides.. More on HCI Class on Ubiquitous Computing next spring Courses in visualization, virtual reality, gaming, etc. where.
Semester wrap-up …the final slides.. The Final  December 13, 3:30-4:45 pm  Closed book, one page of notes  Cumulative  Similar format and length to.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 10, 2004.
Mental Models and Affordances Lecture #5 - February 12th, : User Interface Design and Development.
Course Wrap-Up IS 485, Professor Matt Thatcher. 2 C.J. Minard ( )
Design of Everyday Things Don Norman on Design & HCI.
Mental Models and Affordances Professor: Tapan Parikh TA: Eun Kyoung Choe
Semester wrap-up …the final slides.. The Final December 15, 3:30-6:30 pm Close book, one page of notes Cumulative Similar format to midterm (probably.
Introduction to HCI Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development January 21, 1999.
SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 11, 2003.
Mid-Term Exam Review IS 485, Professor Matt Thatcher.
1 ISE 412 Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation.
What is an interface? How many different types of interfaces can you think of?
Mestrado em Informática Médica SIntS 13/14 – T5 Design Concepts Miguel Tavares Coimbra.
Fall 2002CS/PSY Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios Agenda Dimensions and terminology Non-computer methods Computer methods.
User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed.
JENNIFER WONG CHAPTER 7: USER – CENTERED DESIGN. The point of the book was to advocate a user- centered design which is a philosophy that things should.
SBD: Interaction Design Chris North cs3724: HCI. Problem scenarios summative evaluation Information scenarios claims about current practice analysis of.
Design of Everyday Things. Grade summaries Assignments 1-4 (out of 10) P0 (out of 10) P1 group grade (out of 100) P1 individual grade (out of 50) Midterm.
What Is The User Interface Design Gabriel Spitz1 Lecture # 2.
Chapter 2.2 Game Design. CS Overview This introduction covers: –Terms –Concepts –Approach All from a workaday viewpoint.
Wizard of Oz Prototyping + Making Video Scenarios HCC 729 4/17/14.
Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.
CS2003 Usability Engineering Human-Centred Design Dr Steve Love.
More on Design of Everyday Things. Turn it up, or shut it down?
The Design of Everyday Things Darn these hooves! I hit the wrong switch again! Who designs these instrument panels, raccoons?
Interaction Design John Kelleher. Interaction Design “Designing interactive products to support people in their everyday and working lives” Software.
Prototyping 1. Design Document How express your design ideas. How express your design ideas. Key notions Key notions Cheap, FastCheap, Fast Flexibility.
1 Human Computer Interaction Week 7 Prototyping. 2 Introduction Prototyping is a design technique where users can be involved in testing design ideas.
Chapter 1: What is interaction design?. Bad designs From:
Interaction design Xiangming Mu.
Understanding Users Cognition & Cognitive Frameworks
Theories and Practice of Interactive Media 13 October 2003 Kathy E. Gill.
Task Analysis Lecture # 8 Gabriel Spitz 1. Key Points  Task Analysis is a critical element of UI Design  It describes what is a user doing or will.
Task Analysis Lecture # 8 Gabriel Spitz 1. Key Points  Task Analysis is a critical element of UI Design  It specifies what functions the user will need.
Human-Computer Interaction Design process Task and User Characteristics Guidelines Evaluation ISE
Overview Prototyping Construction Conceptual design Physical design Generating prototypes Tool support.
Human Capabilities: Mental Models CS352. Announcements Project – your users: due next Wed. 7/7 Quiz #3 (human capabilities) next Tue. 2.
Design, prototyping and construction(Chapter 11).
The Design of Everyday Things Donald A. Norman. The psychopathology of everyday things Doors Doors Light switches Light switches Taps Taps Telephones.
Design CSE 403. Announcements Design How do people interact with computers? Tremendous flexibility in designing/building interactions Look at physical.
Interaction Frameworks COMPSCI 345 S1 C and SoftEng 350 S1 C Lecture 3 Chapter (Heim)
CS 3120 USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION (UIDIE)
User-centred system design process
Digital media & interaction design
Design, prototyping and construction
The Design of Everyday Things
Rapid Prototyping Sketches, Storyboards, Mock-Ups and Scenarios
Human Capabilities: Mental Models
Design of Everyday Things
Design of Everyday Things
Design, prototyping and construction
Presentation transcript:

Design of Everyday Things

Agenda Questions? Project Part 1: Now what? Test review One last bit on prototyping Design of Everyday Things

What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space – Vary what you can – hardware, forms of input, forms of output, features, requirement priorities, usability priorities Be off the wall, crazy – This will lead to less crazy but original ideas Project poster – October 20 Project report + prototype: Nov. 10

Midterm review How to study: – Look at slides for topics, bullets, vocabulary, etc. – Find details and examples in the books as needed Test format – 25-50% true/false, multiple choice, fill-in-blank – Rest short answer, probably with one longer answer

Review What is usability? What is design? Why is it hard? The user centered design process – General steps – various models – high level understanding – Waterfall vs. other models

Requirements Review Functional vs. non functional Summative eval vs. formative eval What pieces are part of this? – User characteristics, task analysis, environment, etc.etc. – Persona – what is it and what makes a good one? – Scenario – what is it and what makes a good one? – Stakeholders (primary, secondary, tertiary, facilitating) How do you gather data? Tradeoffs? – Interview, questionnaire, observation, etc. etc. Task models – Hierarchical task analysis - how to do it? – Other models – what can they represent?

Humans review What are issues concerning our senses? Model Human Processor model of memory – What are pieces of memory (STM, LTM, etc.) – What’s a chunk? Why do we care? – What are implications? (recognition over recall, etc.) Other processes – what are they? (attention, learning) – What are the implications?

Interaction Review Command line WIMP Direction manipulation Pen & mobile Speech & natural language Issues, advantages, disadvantages, etc.

Prototyping – What’s vertical vs. horizontal? – What’s low vs. high fidelity? – What are various methods? Scenarios, mockups/sketches, etc. Issues and tradeoffs?

Prototyping Technique Wizard of Oz - Person simulates and controls system from “behind the scenes” – Use mock interface and interact with users – Good for simulating system that would be difficult to build Can be either computer-based or not

Wizard of Oz Method: – Behavior should be algorithmic – Good for voice recognition systems Advantages: – Allows designer to immerse oneself in situation – See how people respond, how specify tasks

Review Low-fidelity Medium-fidelityHigh-fidelity Sketches, mock-ups Slide shows Simulations System prototypes Scenarios Storyboards For more: take ITIS 3150 Rapid Prototyping and Interface Building Offered next fall

Summary Darn these hooves! I hit the wrong switch again! Who designs these instrument Panels, raccoon?!

Don Norman Professor at Northwestern and Principal of Nielsen Norman group Previously Professor at UCSD, senior positions at Apple & HP ACM/CHI Lifetime Achievement Award Prolific author

Discussion What did you take away from DOET book so far?

Here are some Affordances are important Minimize the gulf of interpretation and gulf of execution Use natural mappings Make state visible Use a conceptual model that makes sense Provide feedback

Daily Challenges How many of you can use all the functionality in your – VCR – Digital watch – Copy machine – Stereo system – Plumbing fixtures

Hall of Shame Example Leitz slide projector – To move forward, short press – To move backward, long press What happens when you get frustrated?

Fun Examples Phones How do you - transfer a call - change volume - store a number -...

Changing Ringer Volume Press “Program” Press “6” Set volume – Low - Press “1” – Medium - Press “2” – High - Press “3” Press “Program”

Much better…

Important Concepts Affordances Visibility Conceptual models Mapping Feedback Constraints

Affordances Perceived and actual properties of an object that determine how it could be used – Chair is for sitting – Button is for pushing – Door handle is for …. – Scroll arrow is for … – Icon is for …

Door Opening Affordances Which doors are easy to open? Which doors are hard to open? Why?

Affordances in interfaces Interfaces are virtual and do not have ‘real’ affordances like physical objects Interfaces have ‘perceived’ affordances – Learned conventions of arbitrary mappings between action and effect at the interface – Some mappings are better than others

Mantra Complex things may need explanation, but simple things should not – If a simple thing requires instructions, it is likely a failed design Norman’s 2 main principles – Provide a good conceptual model – Make things visible Affordances is part of this

Conceptual Models People build their own systems of how things work – Example - thermostat Designer can help user foster an appropriate conceptual model – Appearance, instructions, behavior...

Conceptual Models Mental models are not always right Two Classes: – Functional model Stimulus - response “Press the accelerator once, then turn the key” At surface or superficial level – Structural model Deeper sense of why it happens, not just what happens “Press the accelerator to engage the automatic choke on a carburetor”

Visibility When functionality is hidden, problems in use occur – Occurs when number of functions is greater than number of controls When capabilities are visible, it does not require memory of how to use – Recognition over Recall – in the world vs. in the head

Simple Example Bathroom faucets – Two functions Hot/cold Flow

Bathroom Faucets 1 Can you figure out how to use it? Are two functions clear and independent?

Bathroom Faucets 2 Can you figure out how to use it? Are two functions clear and independent?

Bathroom Faucets 3 Can you figure out how to use it? Are two functions clear and independent?

My parent’s microwave 5:45

My microwave

About that VCR… That old joke - “how many of you have a VCR that is blinking 12:00?” :-) Still true today :-(

Which is Faster for Setting Time?

Mapping Relationship between control and action/result in the world Take advantage of physical analogies or cultural understandings – Good: Car, various driving controls Mercedes Benz seat adjustment example – Bad Car stereo - Knob for front/back speakers

Which is better? or

Mapping Example: Euros Size::value

Mapping Example: Stove Which controls which?

Why not this?

Yikes!

Why Not Design Better Stove Speakers Physical, monetary, convenience, etc., constraints dictate otherwise

Feedback Sending information back to the user about what has been done Includes sound, highlighting, animation and combinations of these – e.g. when screen button clicked on provides sound or red highlight feedback: “ccclichhk”

Execution-Evaluation cycle Norman (DOET, p. 46) User Goals Physical System Gulf of Execution Gulf of Evaluation

Goals, Execution, Evaluation Physical System Goals What we want to happen Execution What we do to the world Evaluation Comparing what happened with what we wanted to happen (Gulf of Execution) (Gulf of Evaluation)

Execution Goals What we want to happen An intention to act so as to achieve the goal The actual sequence of actions that we plan to do The physical execution of that action sequence Physical System

Evaluation Goals What we want to happen Evaluation of the interpretations with what we expected to happen Interpreting the perception according to our expectations Perceiving the state of the world Physical System

Seven Stages - All Together Goals What we want to happen Evaluation of the interpretations with what we expected to happen Interpreting the perception according to our expectations Perceiving the state of the world An intention to act so as to achieve the goal The actual sequence of actions that we plan to do The physical execution of that action sequence Physical System

Implications – Which Gulf does these Address? Make current state and action alternatives visible Need good conceptual model with consistent system image Interface should include mappings that reveal relationships between stages User should receive continuous feedback Provide affordances

Goal: Minimize Gulfs Gulf of Execution – Conceptual model – Affordances – Natural mappings Gulf of Evaluation – Make state visible – Feedback

Try and Try Again Norman thinks that it often takes 5 or 6 tries to get something “right” Simply may not have that luxury in a competitive business environment