B ONUS : P EOPLE H ATE R EADING ! B ONUS : P EOPLE H ATE R EADING ! P - - PowerPoint PPT Presentation

▶
b onus p eople h ate r eading b onus p eople h ate r
SMART_READER_LITE
LIVE PREVIEW

B ONUS : P EOPLE H ATE R EADING ! B ONUS : P EOPLE H ATE R EADING ! P - - PowerPoint PPT Presentation

Feb 03, 2024 183 likes •576 views

CS2501 D ESIGN P RINCIPLES AND P APER P ROTOTYPING * From Normans Design of Everyday Things and our textbook. D ON N ORMAN S D ESIGN P RINCIPLES 1. Visibility 2. Feedback 3. Affordance 4. Mapping 5. Constraint 6.

slide-1
SLIDE 1

CS2501 – DESIGN PRINCIPLES

AND PAPER PROTOTYPING

* From Norman’s Design of Everyday Things and

  • ur textbook.
slide-2
SLIDE 2

DON NORMAN’S DESIGN PRINCIPLES

 1. Visibility  2. Feedback  3. Affordance  4. Mapping  5. Constraint  6. Consistency

slide-3
SLIDE 3
  • 1. VISIBILITY

 Users should always be able to:  See the state of the device  See the possible set of actions

slide-4
SLIDE 4
  • 1. VISIBILITY

 Problems arise if we can’t see how to use

something.

 Auto faucets have invisible “active zone”

slide-5
SLIDE 5
  • 2. FEEDBACK

 What is the system doing now?  What action has been performed?  How did the system interpret my action?

slide-6
SLIDE 6
  • 2. FEEDBACK
slide-7
SLIDE 7
  • 2. FEEDBACK
slide-8
SLIDE 8
  • 2. FEEDBACK

 Examples of feedback:  Scrolling text fields make it obvious that the value is

changing.

 Flashing red let’s you know you’ve been hit by an

enemy.

 Sound effects when action taken (assures player the

button was pressed correctly).

 Progress bars (user knows the game is making

progress towards its goal)

 Others?

slide-9
SLIDE 9
  • 3. AFFORDANCE

 Coined by American psychologist J.J. Gibson in

mid-1900’s

 “The affordances of the environment are what it

  • ffers the animal, what it provides or furnishes,

either for good or ill.”

 Don Norman replaced this concept of objective

affordances with that of “perceived affordances”

slide-10
SLIDE 10
  • 3. AFFORDANCE
slide-11
SLIDE 11
  • 3. AFFORDANCE
slide-12
SLIDE 12
  • 3. AFFORDANCE
slide-13
SLIDE 13
  • 3. AFFORDANCE
slide-14
SLIDE 14
  • 3. AFFORDANCE
slide-15
SLIDE 15
  • 4. MAPPING

 Relationship of controls to their effects.

slide-16
SLIDE 16
  • 4. MAPPING
slide-17
SLIDE 17
  • 4. MAPPING

What should pulling back on joystick do? Look up or look down?

slide-18
SLIDE 18
  • 5. CONSTRAINT

 Constrain the kinds of

interactions that can take place. Helps reduce user’s memory load.

 *For games, only show

the user exactly what they need. No more!

 Don’t allow user to do

actions that aren’t

  • relevant. Example?
slide-19
SLIDE 19
  • 5. CONSTRAINT

Easy to setup the console because each cord only fits one slot.

slide-20
SLIDE 20
  • 6. CONSISTENCY

 Four types of consistency (two new ones)  Aesthetic  Functional  Internal  External

slide-21
SLIDE 21
  • 6. CONSISTENCY

 Aesthetic Consistency:  Style and appearance is repeated.  Communicates membership and sets tone.

slide-22
SLIDE 22
  • 6. CONSISTENCY

 Functional Consistency:  Consistent use of colors

(colors always represent the same thing)

 Consistent use of symbols to

represent actions

slide-23
SLIDE 23
  • 6. CONSISTENCY

 Internal Consistency:  Consistency within your application  External Consistency:  Consistency with other applications  Hmmmmm…is this why every FPS uses the same

control scheme (generally)?

slide-24
SLIDE 24
  • 6. CONSISTENCY
slide-25
SLIDE 25

BONUS: PEOPLE HATE READING!

slide-26
SLIDE 26

BONUS: PEOPLE HATE READING!

slide-27
SLIDE 27

PAPER PROTOTYPING

slide-28
SLIDE 28

PAPER PROTOTYPING!

 Quite literally, using paper to produce a potential

interface design.

slide-29
SLIDE 29

PAPER PROTOTYPING

 Has several benefits:  Very Fast!  Very Cheap!  Easy to change and adapt

 Estimated to be 100 times cheaper if NO code is written.  Can be used to collect important usability information!

*Jakob Nielson

slide-30
SLIDE 30

DEMONSTRATION VIDEO

 https://www.youtube.com/watch?v=GrV2SZuRPv

slide-31
SLIDE 31

PAPER PROTOTYPING TIPS AND TRICKS

 1) Keep materials in one place! Small interface

widgets tend to get lost or damaged easily.

 2) Work quickly and make reusable components.  3) If something is difficult to simulate (progress

indicators, right mouse menus, hyperlinks), have the user ask if it is available and then verbally describe the interaction.

slide-32
SLIDE 32

PAPER PROTOTYPING TIPS AND TRICKS

 4) Backgrounds (Poster Board, etc.) can be useful

to contain the prototype and provide context for the user.

 5) Don’t be afraid to mix and match hardware

and software! Maybe a physical block of wood with paper on it!

 6) When appropriate, add context by including

familiar operating system elements.

slide-33
SLIDE 33

PAPER PROTOTYPING MATERIALS

 Widgets!

slide-34
SLIDE 34

PAPER PROTOTYPING MATERIALS

 Connectors

slide-35
SLIDE 35

PAPER PROTOTYPING MATERIALS

 Drawing

slide-36
SLIDE 36

PAPER PROTOTYPING MATERIALS

 …and more!  Don’t be afraid to get creative with the materials

you use!

 Just remember that the point of PP is to be FAST

and CHEAP!

slide-37
SLIDE 37

MORE TIPS!

 Removable tape or restickable glue is useful for

changing components quickly.

 You can use transparent plastic for input fields,

and erasable marker for allowing users to provide input.

 When in doubt, use wide tip pens and markers.  Stacks of cards can be used to simulate tabbed

dialog boxes.

slide-38
SLIDE 38

ANOTHER EXAMPLE