CS2501 – D ESIGN P RINCIPLES AND P APER P ROTOTYPING * From Norman’s 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. Consistency
1. V ISIBILITY Users should always be able to: See the state of the device See the possible set of actions
1. V ISIBILITY Problems arise if we can’t see how to use something. Auto faucets have invisible “active zone”
2. F EEDBACK What is the system doing now? What action has been performed? How did the system interpret my action?
2. F EEDBACK
2. F EEDBACK
2. F EEDBACK 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?
3. A FFORDANCE Coined by American psychologist J.J. Gibson in mid- 1900’s “The affordances of the environment are what it offers 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”
3. A FFORDANCE
3. A FFORDANCE
3. A FFORDANCE
3. A FFORDANCE
3. A FFORDANCE
4. M APPING Relationship of controls to their effects.
4. M APPING
4. M APPING What should pulling back on joystick do? Look up or look down?
5. C ONSTRAINT 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?
5. C ONSTRAINT Easy to setup the console because each cord only fits one slot.
6. C ONSISTENCY Four types of consistency (two new ones) Aesthetic Functional Internal External
6. C ONSISTENCY Aesthetic Consistency: Style and appearance is repeated. Communicates membership and sets tone.
6. C ONSISTENCY Functional Consistency: Consistent use of colors (colors always represent the same thing) Consistent use of symbols to represent actions
6. C ONSISTENCY Internal Consistency: Consistency within your application External Consistency: Consistency with other applications Hmmmmm …is this why every FPS uses the same control scheme (generally)?
6. C ONSISTENCY
B ONUS : P EOPLE H ATE R EADING !
B ONUS : P EOPLE H ATE R EADING !
P APER P ROTOTYPING
P APER P ROTOTYPING ! Quite literally, using paper to produce a potential interface design.
P APER P ROTOTYPING 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
D EMONSTRATION V IDEO https://www.youtube.com/watch?v=GrV2SZuRPv 0
P APER P ROTOTYPING T IPS AND T RICKS 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.
P APER P ROTOTYPING T IPS AND T RICKS 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.
P APER P ROTOTYPING M ATERIALS Widgets!
P APER P ROTOTYPING M ATERIALS Connectors
P APER P ROTOTYPING M ATERIALS Drawing
P APER P ROTOTYPING M ATERIALS …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!
M ORE T IPS ! 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.
A NOTHER E XAMPLE
Recommend
More recommend
