Top Banner
PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh
56

PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Dec 29, 2015

Download

Documents

Robert Ward
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

PSU

Preliminaries

CS 365HCI

Prof. Ahmed Sameh

Page 2: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

PSU

Page 3: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 33Fall 2007

Affordances

• Affordances refers to the perceived

and actual properties, esp wrt how it

is used or applied

• Affordances provide “strong clues” to

the operation of things

Page 4: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 44Fall 2007

Mappings

• Mappings refers to the relationship between two things

• Eg, control and movement- Steering wheel- Door handle

Page 5: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 55Fall 2007

Map’s & Afford’s: Ex’s - 1

• Door Knobs v Levers

Page 6: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 66Fall 2007

Map’s & Afford’s: Ex’s - 2

Doors open left or right ?

Page 7: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 77Fall 2007

Map’s & Afford’s: Ex’s - 3

Lego pieces

Page 8: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 88Fall 2007

Map’s & Afford’s: Ex’s - 4

• Bicycle- Seat, position, handlebars, brakes

Page 9: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 99Fall 2007

Map’s & Afford’s: Ex’s - 5

• Mercedes power seat adjustment

Page 10: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1010Fall 2007

Map’s & Afford’s: Ex’s - 6

• Motorcycle- Clutch, shifting pattern

• Climate Control in a car-- Want to set temperature- Really setting amount of hot water circulating

through radiator

Page 11: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1111Fall 2007

Mappings & Affordances: Ex’s -2

• Stereo Controls- Knobs v Sliders

• TV Controls- Menus

• Triggers

Page 12: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1212Fall 2007

WidgetsWidgets

Page 13: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1313Fall 2007

7 Stages of Action - 1

1. Form Goal

2. Form Intent

3. Specify Action

4. Execute Action

5. Perceive State of World

6. Evaluate Outcome

7. Interpret State of World

Page 14: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1414Fall 2007

7 Stages of Action - 1

A. Abstraction1. Form Goal

B. Execution Phase2. Form Intent3. Specify Action4. Execute Action

C. Evaluation Phase5. Perceive State of World6. Evaluate Outcome7. Interpret State of World

Page 15: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1515Fall 2007

7 Stages of Action - 2

1. Form Goal

Get more light to read

Page 16: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1616Fall 2007

7 Stages of Action - 2

2. Form Intent

Flip on a wall switch

3. Specify Action (Instantiate Plan)

Get out of chair, walk to switch …

4. Execute Action

Carry out plan

Page 17: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1717Fall 2007

7 Stages of Action - 4

5. Perceive State of World

Collect external data

6. Evaluate Outcome

7. Interpret State of World

Page 18: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1818Fall 2007

Issues

• Gulf of Execution- Wrong thing happened- Unexpected response

• Gulf of Evaluation- What is going on?- What am I?

Page 19: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 1919Fall 2007

Control Structures

• Shallow structures

- ice cream store menu

• Narrow structures

• Cooking recipe

- small vocab

- many steps

Page 20: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2020Fall 2007

Errors

• Design for errors

• Making mistakes is normal

• Implement fault tolerant designs

- redundancy

Page 21: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2121Fall 2007

Designing for Errors - 1

• Understand the cause, and minimize• Implement UNDO • Make errors easy to

- detect- Correct

• Think of user as - engaged in approximate behavior - don’t think of it as wrong behavior

Page 22: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2222Fall 2007

Designing for Errors - 2

• Example: Locking keys in car- various alerts and inhibitions- don’t want a voice telling you that you just

locked your keys in car!

Page 23: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2323Fall 2007

Forcing Functions - 1

• Forcing Functions are a form of physical constraint- make this hard to turn, hard to open- barriers- loud fire alarms (120 db !)

Page 24: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2424Fall 2007

Forcing Functions: Examples - 2

• Child-proof medicine containers

• Engaging reverse in a car

• Inhibit start w transmission

• Critical military decisions- Requires two authorized people

• Fire extinguisher

Page 25: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2525Fall 2007

Forcing Functions - 3

• Recessed reset button on equipment

• Turnstiles and automatic gates

• Speed governors on fleet cars

• Function car locks- Child locks on rear doors- Automatic locking when in Drive- Locked steering wheel w/o key

Page 26: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2626Fall 2007

Forcing Functions - 4

• Automatic seatbelts restraints

• Open microwave door inhibits ON

• Self-cleaning oven – door stays locked

• Firearm safety settings

• Double instead of single mouse click

• Elevator – door must be closed

Page 27: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2727Fall 2007

Forcing Functions - 5

• Legal and psychological- Policeman at intersection- Police car at roadside

• Security- Security guard- Surveillance camera- Surveillance sign (not for sale, officially)- Guard dog – or any dog

Page 28: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2828Fall 2007

Forcing Functions: Advisories - 6

• “Shoplifters will be prosecuted to the fullest extend of law”

• “Speed enforced by radar”

• Radio alert provided by police- Radar in operation in following areas

• Reminder of consequences- Punishable by fine, jail, suspension,

removal, etc.

Page 29: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 2929Fall 2007

Forcing Function Approach- 7

• Drastic, imposing, assertive, militant, authoritative, officious, Big Brother, risky

• When to use?- This is a choice of the stick over carrot- Often has a goodwill cost

Motorcycle helmets Seatbelts Child restraining seats

Page 30: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3030Fall 2007

Forcing Function Approach- 8

• What circumstances justifies this approach?- Safety?- Potential for major damage?

Page 31: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3131Fall 2007

Forcing Function Approach- 8

• When does the user subscribe to the approach; when is it resented?- Gun control- Restricted (superuser) functions

Page 32: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3232Fall 2007

Forcing Function Approach- 8

• When does the user subscribe to the approach; when is it resented?- Drug control

Need a prescription Only dispensed for 1 month supply; cannot

renew Cannot call-in to pharmacy ID required Not honored from out of state prescription

Page 33: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3333Fall 2007

Fault “Intolerance”

• Design so that only correct actions can be taken.

• Nuclear power plants

• Cockpits: Flaps down

• Shifting into reverse

• Assemble only one way: right way!

Page 34: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3434Fall 2007

Visibility

• Allow the user to be informed

• Show him the state- where is the elevator? - can I see the elevator in its shaft?

• Is the tape in correctly? Is it engaged

Page 35: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3535Fall 2007

Interpreting Data

• Swiss Air flight- low oil pressure, level on Eng 1

turn off Eng 1

- ditto on Eng 2 & 3 impossible, not reasonable!

Page 36: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3636Fall 2007

Interpreting Data

• This happened!- new procedure- same mistake on all engines- oil ran out because of maintenance error on

new proc- our world view was wrong

Page 37: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3737Fall 2007

Effecting Actions

• Command mode- 3rd Person- Proxy- “fly by wire”

• Direct control- “hands on experience”- good haptic feedback

Page 38: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3838Fall 2007

Make Complicated Simpler - 1

• Use both world and user knowledge- can lead to difficult choices

• Simplify structure of tasks

• Make things visible- Bridging execution and evaluation

Page 39: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 3939Fall 2007

Make Complicated Simpler - 2

• Get mappings right- test and validate

• Exploit constraints

• Design for error

• Standardize

Page 40: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

PSU

End Lecture Set 3 D A Norman Notes

Page 41: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 4141Fall 2007

Page 42: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 4242Fall 2007

Page 43: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

PSU

End of Lecture Set 1 Preliminaries

Page 44: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 4444

CS365 Term project: New Look

• Choose from any of the top Internet applications, web services, or machines (e.g. Play station III, Personal Digital Assistant –PDAs) one for your term project to produce a new look for its interface.

• Exs: iTune, Face-Book, Flickr, Google earth, etc.

Page 45: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 4545

New Look HCI project

• Deliverables: An implemented HCI – GUI for the new look. The new look will improve over the original one by avoiding all the bad features and adding whole new features.

• A Wiki site for the new look, that explains the changes and their benefits.

Page 46: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 4646

Ex: New Look iTune

• The project has three phases:• Phase I: Analysis and Initial Wiki site:• In this phase you will have to deliver a

Wiki site with the title: “New Look iTune”• In phase I, the site will contain description

of the current “iTune”’s GUI. Explaining all its HCI features (this is the result of the analysis)

Page 47: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 4747

New Look HCI-GUI Project

• In phase II: Critique of the cuurent “iTune”, you will have to deliver a modified Wiki site that adds to the one in pahse I, a new section that critizes the HCI GUI of the current “iTune” according to the good/bad HCI-GUI that you are learning in this course. The newly added features will be demonstrated in the Wiki format in the new Wiki site.

Page 48: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 4848

New Look HCI-GUI Project

• In phase III: You will have to deliver the final Wiki site that will refer to the newly implemented :New Look iTune. With Wiki explanations of the HCI-GUI features and their benefits.

Page 49: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 4949

New Look HCI-GUI Project

• This is a Term Project. The due dates for deliverables are:

• -Phase I: March 30

• -Phase II: April 20

• -Phase III: May 18

• Final Demo: May 25

Page 50: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 5050

New Look HCI-GUI Project

Page 51: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 5151

Page 52: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 5252

Page 53: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 5353

Page 54: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 5454

Page 55: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 5555

Page 56: PSU Preliminaries CS 365 HCI Prof. Ahmed Sameh PSU.

Student Name ServerUtah School of Computing slide slide 5656