design principles john c. tang september 13, 2007 needs design implementevaluate
Post on 19-Dec-2015
213 views
TRANSCRIPT
Design Principles Design Principles
John C. TangJohn C. Tang
September 13, 2007September 13, 2007NEEDS
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 generate new
ideaidea– Convince us why it is better than prior Convince us why it is better than prior
ideasideas
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 The structure and
behavior of the systembehavior of the system User’s ModelUser’s Model
– How the user understands How the user understands how the system workshow the system worksThe 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
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 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
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 interest
2.2. Of available actionsOf available actions
3.3. Of system status (feedback)Of system status (feedback)
Car radioCar radio
Primary controls visiblePrimary controls visible But how do you set radio station preset? But how do you set radio station preset?
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
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
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
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 words
How 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.)
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 affordance
When 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 affordance
When there is perceptual information When there is perceptual information for an affordance that for an affordance that does not existdoes not exist..
OK
Sequential affordanceSequential affordance
Acting correctly on a perceptible Acting correctly on a perceptible affordance leads to information affordance leads to information indicating new affordancesindicating new 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 Perceived affordance is a combination of what you see, and what you know of what you see, and what you know
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
Pro
fici
enc
y
Time
Intermediate
Pro
fici
ency
Time
Novice
Pro
fici
ency
Time
Info Kiosk
Pro
fici
enc
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
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 is this the most effective but is this the most effective
way to select state? way to select state?