Design Principles Design Principles John C. TangJohn C. TangSeptember 13, 2007September 13, 2007 NEEDS

DESIGN

IMPLEMENTEVALUATE

TodayToday Updates on facebook projectUpdates on facebook project Conceptual modelConceptual model Feedback Feedback ConstraintsConstraints AffordancesAffordances Action cycleAction cycle

– Gulf of executionGulf of execution– Gulf of evaluationGulf of evaluation

Time for group workTime for group work

facebook group projectfacebook group project Discussion section topic, Sept. 19Discussion section topic, Sept. 19

– Introduction to facebook platformIntroduction to facebook platform– Basic familiarity with features, constraints Basic familiarity with features, constraints

of platformof platform Project ideasProject ideas

– Yes! You need to do something differentYes! You need to do something different– We know about the applications in listsWe know about the applications in lists– Group design process Group design process generate new idea generate new idea– Convince us why it is better than prior ideasConvince us why it is better than prior ideas

facebook group project facebook group project (2)(2) Implementation effort should be Implementation effort should be

realisticrealistic Must demonstrate working prototypeMust demonstrate working prototype

– OK if not OK if not allall aspects are working aspects are working User study must test for complete User study must test for complete

ideaidea– Hybrid working prototype, paper Hybrid working prototype, paper

prototypeprototype– Wizard of OzWizard of Oz

Great discussion Great discussion sections!sections! Really appreciated good workReally appreciated good work All slides uploaded to the web siteAll slides uploaded to the web site Allowing extra time (until 5:00pm Allowing extra time (until 5:00pm

today) to form groupstoday) to form groups Take advantage of office hours Take advantage of office hours

(Brian, me, Christine) for (Brian, me, Christine) for feedback on topic ideasfeedback on topic ideas

Stanford Big Face(book)-off?Stanford Big Face(book)-off?

Social networkingSocial networking Social networking fueled by Social networking fueled by

“exhibitionism” “exhibitionism” – Social statusSocial status– ContestsContests– PopularityPopularity

AlternativesAlternatives– CollectivismCollectivism– ActivismActivism

?

FB: CausesFB: Causes Promote awareness of UN Promote awareness of UN

Millennium project goalsMillennium project goals– Educate people Educate people

about goalsabout goals– Award “badge” for Award “badge” for

passing quizpassing quiz– Community Community

recognition for recognition for shared awarenessshared awareness

Criteria: Review facebook Criteria: Review facebook application (Due Sept. application (Due Sept. 18)18) Pick an interesting applicationPick an interesting application Clearly explain to us what it does Clearly explain to us what it does

(illustrated)(illustrated) Observe at least 2 Observe at least 2 non CS160non CS160 people using people using

application (give demographic info)application (give demographic info) Write reviewWrite review

– What works wellWhat works well– What doesn’t work wellWhat doesn’t work well– Support with evidence from observationsSupport with evidence from observations– Suggested improvementsSuggested improvements– Shouldn’t be more than around 5 pagesShouldn’t be more than around 5 pages

Design nuts & boltsDesign nuts & bolts Identified needIdentified need Conducted Contextual InquiryConducted Contextual Inquiry Stimulated ideating skillsStimulated ideating skills Exercised visualizing skillsExercised visualizing skills Working towards getting pixels on Working towards getting pixels on

screenscreen

Conceptual modelConceptual model

View of the system as the user View of the system as the user believes it to be, especially how believes it to be, especially how the user can act upon it and what the user can act upon it and what the system’s responses meanthe system’s responses mean

Conceptual Model of a Conceptual Model of a SystemSystem Design ModelDesign Model

– The model the designer The model the designer has of how the system has of how the system worksworks

System ImageSystem Image– How the system actually How the system actually

works works – The structure and behavior The structure and behavior

of the systemof the system User’s ModelUser’s Model

– How the user understands How the user understands how the system workshow the system works

The most important thing to design is the user’s model. Everything else should be subordinated to making that model clear, obvious, and substantial. That is almost exactly the opposite of how most software is designed. David Liddle

Raising the bar: Raising the bar: self-evident designself-evident design Back in 1946, users Back in 1946, users

had to be highly had to be highly trained to use ENIACtrained to use ENIAC– ResearchersResearchers– MilitaryMilitary– technicianstechnicians

Today’s computer Today’s computer manualmanual

Conceptual Model of a Conceptual Model of a System (augmented)System (augmented) Design ModelDesign Model

– The model the designer The model the designer has of how the system has of how the system worksworks

System ImageSystem Image– How the system actually How the system actually

works works – The structure and The structure and

behavior of the system behavior of the system User’s ModelUser’s Model

– How the user understands How the user understands how the system workshow the system works

Some “repair” between the designer and userSome “repair” between the designer and user– User manualUser manual– FAQFAQ

A bad exampleA bad example Radiator controlRadiator control

HOT

COLD

A good conceptual A good conceptual modelmodel Allows users to reason through:Allows users to reason through:

– What can I do?What can I do?– How do I do it?How do I do it?– What result will it have?What result will it have?– What is it telling me?What is it telling me?

Conceptual Model and Conceptual Model and RealityReality User’s conceptual model does not User’s conceptual model does not

always have to match realityalways have to match reality– Must be consistent with system’s Must be consistent with system’s

behavior, reactionsbehavior, reactions

My new refrigeratorMy new refrigerator

Temperature controls for GE Temperature controls for GE EnergyStar refrigeratorEnergyStar refrigerator

We know from Norman that this is We know from Norman that this is probably not how refrigerators workprobably not how refrigerators work

But it’s how we want to control But it’s how we want to control temperaturetemperature

Iterative revision of Iterative revision of the conceptual modelthe conceptual model As user interacts, conceptual As user interacts, conceptual

model is revised model is revised – Breakdowns (unfulfilled expectations Breakdowns (unfulfilled expectations

or unclear representations) require or unclear representations) require explicilty revising conceptual modelexplicilty revising conceptual model

– Consistency is key for developing Consistency is key for developing robust conceptual modelrobust conceptual model

What’s your What’s your conceptual modelconceptual model

ReadRead??

FeedbacFeedback?k?

ArchivalArchival??

ContributContribute?e?

EmailEmail

IMIM

WikiWiki

BlogBlog

Norman’s 7 stages of Norman’s 7 stages of actionaction UserUser Translating Translating

goalsgoals To actionsTo actions Based on Based on

user’s user’s model model

Norman’s 7 stages of Norman’s 7 stages of actionaction System System

presents presents results back results back to userto user

According to According to design design modelmodel

Gulfs of execution and Gulfs of execution and evaluationevaluation Note: Note:

We’re We’re even even assuming assuming the the computer computer works works perfectly!perfectly!

The Gulfs The Gulfs Where thought is Where thought is requiredrequired Gulf of executionGulf of execution -- thinking -- thinking

required to figure out how to get required to figure out how to get something done -- transforming high-something done -- transforming high-level intention into specific physical level intention into specific physical actions actions

Gulf of evaluationGulf of evaluation -- thinking -- thinking required to understand what is being required to understand what is being perceived -- transforming raw sensory perceived -- transforming raw sensory data into an understanding of objects, data into an understanding of objects, properties and eventsproperties and events

The gulfs simplifiedThe gulfs simplified Gulf of executionGulf of execution

– How do I do it?How do I do it? Gulf of evaluationGulf of evaluation

– What did it do?What did it do?evaluation

execution

ExampleExample

Overcoming the gulfsOvercoming the gulfs Gulf of executionGulf of execution

– Make commands and mechanisms of Make commands and mechanisms of the system match the thoughts and the system match the thoughts and goals of the usergoals of the user

Gulf of evaluationGulf of evaluation– Make output displays present a good Make output displays present a good

conceptual model of the system that conceptual model of the system that is readily perceived, interpreted, and is readily perceived, interpreted, and evaluatedevaluated

Design PrinciplesDesign Principles VisibilityVisibility Natural mappingNatural mapping FeedbackFeedback

AffordancesAffordances

VisibilityVisibility Primary controls visiblePrimary controls visible Secondary controls discoverableSecondary controls discoverable

Three crucial Three crucial “visibilities”“visibilities”1.1. Of objects of interestOf objects of interest2.2. Of available actionsOf available actions3.3. Of system status (feedback)Of system status (feedback)

Remote control (good)Remote control (good)

Remote controls (bad)Remote controls (bad)

Car radioCar radio

Primary controls visiblePrimary controls visible But how do you set radio station preset? But how do you set radio station preset?

iPodiPod

How do you scan forward?How do you scan forward?

Learned conventionsLearned conventions De facto standards that become De facto standards that become

established over timeestablished over time

Natural mappingNatural mapping Naturally connecting user’s model with Naturally connecting user’s model with

system model system model – taking advantage of physical analogies and taking advantage of physical analogies and

cultural standards cultural standards – Physical properties (stove burner layout)Physical properties (stove burner layout)– Metaphorical/linguistic (on is up)Metaphorical/linguistic (on is up)– Analogous function (playback control Analogous function (playback control

buttons)buttons)““Natural” is individual and culture-specificNatural” is individual and culture-specific

Stovetop controlStovetop control

Natural mappingsNatural mappings Minimize the number of cognitive Minimize the number of cognitive steps to transform action into effect, steps to transform action into effect, or perception into comprehension.or perception into comprehension. Applicable to both action and Applicable to both action and displays (execution and evaluation).displays (execution and evaluation). Minimize the need for labels, Minimize the need for labels, instructions, help systems.instructions, help systems.

Different contexts for Different contexts for “natural”“natural” Social and organizational contextsSocial and organizational contexts

– Office workOffice work– Off the desktopOff the desktop– Out-of-doorsOut-of-doors

Cultural normsCultural norms– Red and greenRed and green– Reading directionReading direction– What may be offensiveWhat may be offensive

Conflicting mappings?Conflicting mappings?

FeedbackFeedback Timely communication of system Timely communication of system

statusstatus

Visibility of system Visibility of system status, feedbackstatus, feedback At all times, the system visually At all times, the system visually indicates what state it is in.indicates what state it is in. Examples:Examples: - Hourglass “wait” icon- Hourglass “wait” icon - Progress bars- Progress bars - Security padlock on browser- Security padlock on browser

Progressive vs. Progressive vs. interruptive feedbackinterruptive feedback

Feedback can be Feedback can be progressive,progressive, a a part of the sequence of actions part of the sequence of actions themselvesthemselves

Feedback can also be Feedback can also be interruptive,interruptive, a break in the a break in the sequence of actionssequence of actions

Smooth is usually preferred to Smooth is usually preferred to interruptiveinterruptive

No_l.cur

Multimodal feedbackMultimodal feedback VisualVisual AuralAural TactileTactile Smell?Smell?

AffordancesAffordances ““...the perceived and actual ...the perceived and actual

propertiesproperties of the thing, primarily of the thing, primarily those fundamental properties that those fundamental properties that determine just determine just howhow the thing could the thing could possibly be possibly be usedused.” [Norman].” [Norman]

In other wordsIn other wordsHow a thing appears tells us how How a thing appears tells us how the thing can be used.the thing can be used.

(Whether the implied use matches (Whether the implied use matches the intended use is a question for the intended use is a question for design.)design.)

ExampleExample

Knurling provides a visual affordance for “gripping.”

ExampleExample

I’m Clickable I'm Not Clickable

William Gaver, 1991William Gaver, 1991 “ “People perceive the environment directly People perceive the environment directly in terms of its potentials for action.”in terms of its potentials for action.” “ “An affordance of an object … refers to An affordance of an object … refers to attributes of both the object and the actor.”attributes of both the object and the actor.” “… “…when the apparent affordances of an when the apparent affordances of an artifact matches its intended use, the artifact matches its intended use, the artifact is easy to operate. When apparent artifact is easy to operate. When apparent affordances suggest different actions than affordances suggest different actions than those for which the object is designed, those for which the object is designed, errors are common.”errors are common.”

Affordances and Affordances and metaphorsmetaphors Metaphors meant to “jump start” Metaphors meant to “jump start” user’s conceptual model for a systemuser’s conceptual model for a system Affordances meant to “jump start” Affordances meant to “jump start” user’s conceptual model for user’s conceptual model for interacting with an artifact interacting with an artifact As with metaphors, if affordances As with metaphors, if affordances are designed poorly, they thwart are designed poorly, they thwart developing a correct conceptual developing a correct conceptual modelmodel

Perceptible affordancePerceptible affordance When there is perceptual When there is perceptual information for an existing information for an existing affordance.affordance. Knurling communicates that you Knurling communicates that you can actually move and resize the can actually move and resize the window with it.window with it.

Hidden affordanceHidden affordanceWhen there is When there is notnot perceptual perceptual information for an existing affordance.information for an existing affordance.

This is actually a button.

False affordanceFalse affordanceWhen there is perceptual information When there is perceptual information for an affordance that for an affordance that does not existdoes not exist..

OK

False affordance?False affordance?

OK

Sequential affordanceSequential affordance Acting correctly on a perceptible Acting correctly on a perceptible affordance leads to information indicating affordance leads to information indicating new affordancesnew affordances

Perceived affordancesPerceived affordances Norman primarily concerned with Norman primarily concerned with

perceived affordancesperceived affordances - what the user - what the user understands the affordances to beunderstands the affordances to be

The correct parts must be visible and The correct parts must be visible and they must convey the correct message they must convey the correct message

If you can't see it (or find it) you can't If you can't see it (or find it) you can't use ituse it

Perceived affordance is a combination of Perceived affordance is a combination of what you see, and what you know what you see, and what you know

Experts and novicesExperts and novices

NovicesNovices Unfamiliar with the systemUnfamiliar with the system Possibly unfamiliar with the Possibly unfamiliar with the context and domaincontext and domain Often apprehensive about Often apprehensive about technologytechnology Often unwilling to explore Often unwilling to explore interfaces for fear of inflicting interfaces for fear of inflicting permanent damagepermanent damage Confidence develops slowly at firstConfidence develops slowly at first

ExpertsExperts Familiar with the system, Familiar with the system, context, and domaincontext, and domain Usually comfortable with Usually comfortable with technologytechnology Willing to explore interfaces, try Willing to explore interfaces, try new things, teach themselves (Rely new things, teach themselves (Rely heavily on undo.)heavily on undo.) Confidence develops quicklyConfidence develops quickly

Usability curves for Usability curves for different system typesdifferent system types

Profi

cienc

y

Time

Intermediate

Profi

cienc

y

Time

Novice

Profi

cienc

y

Time

Info Kiosk

Profi

cienc

y

Time

Expert

Designing for experts Designing for experts and novicesand novicesOften difficult to design for both at Often difficult to design for both at onceonceExperts require rapid control and Experts require rapid control and feedback. The computer is feedback. The computer is interrupted more by theminterrupted more by themNovices require steady and Novices require steady and comprehensible control and comprehensible control and feedback. They are interrupted more feedback. They are interrupted more by the computerby the computer

Experts and NovicesExperts and Novices In direct manipulation interfaces:In direct manipulation interfaces:- Provide menu accelerators, - Provide menu accelerators,

keyboard shortcutskeyboard shortcuts- Command lines within GUIs (e.g., - Command lines within GUIs (e.g.,

Visual Studio)Visual Studio)- Reveal complexity over time- Reveal complexity over time- Nest complexity in space- Nest complexity in space- Make first tier actions most apparent- Make first tier actions most apparent

AssignmentsAssignments First group assignments!First group assignments! Project topic (Due Sept. 18)Project topic (Due Sept. 18)

– Team name (branding)Team name (branding) Contextual inquiry (Due Sept. 27)Contextual inquiry (Due Sept. 27)

– Pick appropriate methodPick appropriate method– Group analysisGroup analysis– ReportReport

Project topic (due Project topic (due Sept. 18)Sept. 18) 1 pg. description of project area1 pg. description of project area

– NeedNeed– Conceptual approachConceptual approach– Similar to “commercial” presentationsSimilar to “commercial” presentations– Email addressesEmail addresses

Preferably due in class, but if you Preferably due in class, but if you need more time, 5:00pm Tuesdayneed more time, 5:00pm Tuesday– Take advantage of office hoursTake advantage of office hours

Grading criteria: Just do it!Grading criteria: Just do it!

Contextual Inquiry Contextual Inquiry (Due Sept. 27)(Due Sept. 27) Pick appropriate methodPick appropriate method

– Direct observationDirect observation– SurveysSurveys– Diary studyDiary study– ESMESM

Each team member must do at Each team member must do at least one first-hand data least one first-hand data collection!collection!

Contextual Inquiry Contextual Inquiry (Due Sept. 27)(Due Sept. 27) Group analysis of dataGroup analysis of data ReportReport

– Method usedMethod used ParticipantsParticipants ActivityActivity

– AnalysisAnalysis Resources usedResources used Hindrances encounteredHindrances encountered Design implications for improvementDesign implications for improvement (Persona)(Persona)

Contextual Inquiry: Contextual Inquiry: Grading criteriaGrading criteria Picking appropriate methodPicking appropriate method Conducting method properlyConducting method properly

– What participants you pickWhat participants you pick– Appropriate description of methodAppropriate description of method

AnalysisAnalysis– Including data from contextual inquiryIncluding data from contextual inquiry– Drawing appropriate conclusionsDrawing appropriate conclusions– Design implicationsDesign implications

Extra slides (not Extra slides (not presented in class)presented in class)

Next timeNext time ReadingsReadings

– Norman, DOET, Chapter 3Norman, DOET, Chapter 3 AssignmentsAssignments

– facebook application reviewfacebook application review– Group project topicGroup project topic

Visibility (bad Visibility (bad examples)examples)

Clear what to do, but is this the Clear what to do, but is this the best way to enter Social Security best way to enter Social Security number?number?

All the states are visible,All the states are visible, but but is this the most effectiveis this the most effective way to way to select state?select state?

Overwhelming tabsOverwhelming tabs

Everything is discoverable, but Everything is discoverable, but way too much informationway too much information