design - georgia tech sonification lab --...
TRANSCRIPT
Design
The light bulb goes on
Fall 2019 PSYCH / CS 6755
AgendaØIdea generationØDesign principlesØPoster, Exam, Project
Fall 2019 PSYCH / CS 6755
Design Choices...
Fall 2019 PSYCH / CS 6755
Design is Easy?ØOr is it . . .?
Fall 2019 PSYCH / CS 6755
Design ProcessØFill the design space with ideas
v Informed Brainstorming !!
ØPare down, combine
ØWhy is it so difficult?
Fall 2019 PSYCH / CS 6755
Why Design is HardØNumber of things to control has increased
dramaticallyØDisplays are more virtual/artificialØMarketplace pressure
v Adding operations cheaper (computers)v Adding controls expensive (real estate, cost)
ØErrors are becoming increasingly serious
Fall 2019 PSYCH / CS 6755
Idea CreationØ Ideas come from
v Imaginationv Analogyv Observation of current
practicev Observation of current
systems
ØBorrow from other fieldsv Animationv Theatrev Information displaysv Architecturev ...
Informed Brainstorming !!
Fall 2019 PSYCH / CS 6755
Idea Creation MethodsØ1. Consider new use for object
Ø2. Adapt object to be like something else
Ø3. Modify object for a new purpose
Ø4. Magnify - add to object
Ø5. Minimize - subtract from objectFall 2019 PSYCH / CS 6755
Idea Creation MethodsØ6. Substitute something similar
Ø7. Rearrange aspects of object
Ø8. Change the point of view
Ø9. Combine data into an ensemble
Fall 2019 PSYCH / CS 6755
Overall Guidelines for DesignØ1. Provide a good conceptual model
v User has mental model of how things workv Build design that allows user to predict effects of
actions
Ø2. Make things visiblev Visible affordances, mappings, constraintsv Remind person of what can be done and how to do
it
Fall 2019 PSYCH / CS 6755
More Specific Design PrinciplesØ1. Use simple and natural dialog in user’s
languagev Match user’s task in a natural wayv Avoid jargon, techno-speak
v Present exactly info that user needs
Insufficient funds to withdraw $100
X.25 connection discarded dueto network congestion. Locallimits now in effect
VS.
Less is more!Fewer unnecessary windows, prompts, dialogs
Fall 2019 PSYCH / CS 6755
�Fun� Examples
Fall 2019 PSYCH / CS 6755
Design PrinciplesØ2. Strive for consistency
v Sequences, actions, commands, layout, terminology
v Makes more predictable
HelpCancelOK
ApplyCancelDone
Fall 2019 PSYCH / CS 6755
Design PrinciplesØ3. Provide informative feedback
v Continuously inform user about what is occurringv Most important on frequent, substantive actions
v How to deal with delays?
Fall 2019 PSYCH / CS 6755
Design Principles
Ø4. Minimize user�s memory loadv Recognition is better than recall
v Describe required input format, include example and default• Date: _ _ - _ _ _ - _ _ (DD-Mmm-YY, e.g., 02-Aug-93)
v Use small # of generally applicable commands
Fall 2019 PSYCH / CS 6755
Design PrinciplesØ5. Permit easy reversal of actions
v Undo!
v Reduces anxiety, encourages experimentation
Fall 2019 PSYCH / CS 6755
Design PrinciplesØ6. Provide clearly marked exits
v Don�t want the user to feel trappedv Examples
• Cancel button on dialogs• Interrupt/resume on lengthy operations (modeless)• Quit - can exit anytime• Reset/defaults - restore on a property sheet
Fall 2019 PSYCH / CS 6755
Design PrinciplesØ7. Provide shortcuts
v Enable frequent users to perform often-used operations quickly• Keyboard & mouse
– Abbreviations– Menu shortcuts– Function keys– Command completion– Double click vs. menu selection
• Navigation between windows/forms• Reuse
– Provide history system
Fall 2019 PSYCH / CS 6755
Design PrinciplesØ8. Support internal locus of control
v Put user in charge, not computerv Can be major source of anxiety
System prompt: Enter next command:vs.
Ready for next command:
Fall 2019 PSYCH / CS 6755
Design PrinciplesØ9. Handle errors smoothly and positively
Ø10. Provide useful help and documentation
v (More to come later in course on these two)
Fall 2019 PSYCH / CS 6755
Graphic Design
The �look & feel�
Fall 2019 PSYCH / CS 6755
Graphic DesignØThe �look & feel� portion of an interface
ØWhat someone initially encountersv Conveys an impression, mood
Fall 2019 PSYCH / CS 6755
Design PhilosophiesØPersonal preferences:
v Economy of visual elementsv Less is morev Well organized (good info architecture!)
Fall 2019 PSYCH / CS 6755
Graphic Design PrinciplesØMetaphorØClarityØConsistencyØAlignmentØProximityØContrast
Fall 2019 PSYCH / CS 6755
MetaphorØTying presentation and visual elements to
some familiar relevant itemsv e.g., Desktop metaphorv e.g., Elevator metaphor
v If you�re building an interface for a grocery application, maybe mimic a person walking through a store with a cart
Fall 2019 PSYCH / CS 6755
Example
www.worldwidestore.com/Mainlvl.htm
Overdone?
Fall 2019 PSYCH / CS 6755
ClarityØEvery element in an interface should
have a reason for being therev Make that reason
clear too!
ØLess is morev Unless more
is more…
Fall 2019 PSYCH / CS 6755
ClarityØWhite space
v Leads the eyev Provides symmetry and balance through its usev Strengthens impact of messagev Allows eye to rest between elements of activityv Used to promote simplicity, elegance, class,
refinement
Fall 2019 PSYCH / CS 6755
ConsistencyØIn layout, color, images, icons, typography,
text, …ØWithin screen, across screensØStay within metaphor everywhere
ØPlatform may have a style guidev Follow it!
Fall 2019 PSYCH / CS 6755
Example
Home page Content page 1 Content page 2
www.santafean.com
Logo-icon principle
Fall 2019 PSYCH / CS 6755
AlignmentØWestern world
v Start from top left
ØAllows eye to parse display more easily
�Read-flow� principle
Fall 2019 PSYCH / CS 6755
AlignmentØGrids
v (Hidden) horizontal and vertical lines to help locate window components
v Align related thingsv Group items logically
v Minimize number of controls, reduce clutter
Fall 2019 PSYCH / CS 6755
AlignmentØGrids - use them
Fall 2019 PSYCH / CS 6755
Grid Example
Fall 2019 PSYCH / CS 6755
AlignmentØLeft, center, or right?
ØChoose one, use it everywhere
ØNovices often center everythingv No definition, calm, very formal
Here is somenew text
Here is some
new text
Here is some
new text
Fall 2019 PSYCH / CS 6755
ProximityØItems close together appear to have a
relationshipØDistance implies no relationship
ØColon ties label and field together
Time Time
Time:
Fall 2019 PSYCH / CS 6755
Example
Name:
Addr1:
Addr2:
City:
State:
Phone:
Fax:
Name:
Addr1:Addr2:City:State:
Phone:Fax:
Name
Addr1Addr2CityState
PhoneFax
Right-alignField labels
Enhance groupingWith boxes
Notzesty
Fall 2019 PSYCH / CS 6755
ContrastØPulls you inØGuides your eyes around the interfaceØSupports skimming
ØTake advantage of contrast to add focusor to energize an interface
ØCan be used to distinguish active control
Fall 2019 PSYCH / CS 6755
ContrastØCan be used to set off most important
itemv Allow it to dominate
ØAsk yourself what is the most important item in the interface, highlight it
ØUse geometry to help sequencing
Fall 2019 PSYCH / CS 6755
UI ExerciseØLook at interface and see where your eye
is initially drawn (what dominates?)
ØIs that the most important thing in the interface?
ØSometimes this can (mistakenly) even be white space!
Fall 2019 PSYCH / CS 6755
Example
Disorganized
Fall 2019 PSYCH / CS 6755
Example
Visual noise
Fall 2019 PSYCH / CS 6755
Example
1. Overuse of 3D effects
2. Wrong Button Order
Fall 2019 PSYCH / CS 6755
Example
Fall 2019 PSYCH / CS 6755
Economy of Visual ElementsØLess is moreØMinimize borders and heavy outlining,
section boundaries (use whitespace)ØReduce clutterØMinimize the number of controls
Fall 2019 PSYCH / CS 6755
TypographyØCharacters and symbols should be
easily noticeable and distinguishablev Avoid heavy use of all upper casev Mixed case promotes faster reading
HOW MUCH FUN IS ITTO READ ALL THIS TEXTWHEN IT�S ALL IN CAPITALS AND YOUNEVER GET A REST
How much fun is itto read all this textwhen it�s all in capitals and younever get a rest
Fall 2019 PSYCH / CS 6755
TypographyØReadability
v How easy it is to read a lot of text
ØLegibilityv How easy it is to recognize a short burst
ØTypeface = font (not really, but close enough)
Fall 2019 PSYCH / CS 6755
Wow
Yuk
Fall 2019 PSYCH / CS 6755
Typography
ØSerif font - readabilityØSans serif font - legibility
v(both are variable spaced)
ØMonospace font
Fall 2019 PSYCH / CS 6755
FontsØSerif
v Times, BookmanvPalatino
ØSans serifv Tahoma, Arial
ØOnscreen fontsvGeorgiavGenevavVerdana
ØDecorativev Comic Sans
ØScriptv Script
ØMonospacedvCourier, Lucida
Fall 2019 PSYCH / CS 6755
TypographyØGuidelines
v Use serif for long, extended text; sans serif for �headlines�
v Use 1-2 fonts/typefaces (3 max)v Use 1-3 point sizes maxv Never use bold, italics, capitals for large
sections of textv Be careful of text to background color issues
Fall 2019 PSYCH / CS 6755
More Wow
Fall 2019 PSYCH / CS 6755
Example
CRAFTS AND GAMESARTS FESTIVAL
OF ATLANTA AND DECATUR
COME AND ENJOY
SEPTEMBER 19-24
Crafts and Games:
Arts FestivalOf Atlanta and Decatur
September 19-24
Come and Enjoy!
Which do you prefer?
Applies lots of these principlesFall 2019 PSYCH / CS 6755
ColorØWe see the world via a reflective color
modelv Light strikes a surface and is reflected to our
eyes--Properties of surface dictate colorv Printers
ØColors on display follow the emittedmodel
Fall 2019 PSYCH / CS 6755
Color AttributesØHue
v native color, pigmentØSaturation
v relative purity, brightness, or intensity of a color
ØValue v lightness or darkness of a color
Fall 2019 PSYCH / CS 6755
ColorØOn monitors, typically RGB scheme
v 0-255 value each red, green, blue
v R: 170 G:43 B: 211
Fall 2019 PSYCH / CS 6755
Color GuidelinesØDesign in b/w then add color
where appropriatev Print your design out in b/w to test it
ØUse color to draw attention, communicate organization, to indicate status, to establish relationships
ØAvoid using color in non-task related ways
Fall 2019 PSYCH / CS 6755
Color GuidelinesØDisplay color images on black backgroundØChoose bright foreground color (white,
bold green,…)ØAvoid brown and green as background
colorsØBe sure foreground colors contrast in both
brightness and hue with bg colors
Fall 2019 PSYCH / CS 6755
Color GuidelinesØColor is good for supporting visual searchØDo not use color without some other
redundant cuev Color-blindnessv Monochrome monitors (and printouts)v Redundant coding enhances performance
ØBe consistent with color associations from jobs and cultures
Fall 2019 PSYCH / CS 6755
Color GuidelinesØLimit coding to 8 distinct colors (4 better)ØAvoid using saturated blues for text or
small, thin linesØUse color on b/w or gray, or b/w on colorØTo express difference, use high contrast
colors (and vice versa)
Fall 2019 PSYCH / CS 6755
How many...
Fall 2019 PSYCH / CS 6755
Find the...
V RZ
MF G
Q
J
CTD
W
A PKV
L
HIN E
B
S
U O
XYFall 2019 PSYCH / CS 6755
Color AssociationsØRed
v hot, warning, aggression, love
Ø Pinkv female, cute, cotton
candyØOrange
v autumn, warm, Halloween
ØYellowv happy, caution, joy
ØBrownv warm, fall, dirt, earth
ØGreenv lush, pastoral, envy
Ø Purplev royal, sophisticated,
Barney
Fall 2019 PSYCH / CS 6755
Color SuitesØDesigners often pick a palette of 4 or 5
colors
Professional
Monochromatic
Southwestern
Fall 2019 PSYCH / CS 6755
Icon DesignØDesign task
ØRepresent object or action in a familiar and recognizable manner
ØLimit number of different iconsØMake icon stand out from background
Fall 2019 PSYCH / CS 6755
Icon DesignØEnsure that singly selected icon is
clearly visible when surrounded by unselected ones
ØMake each icon distinctiveØMake icons harmonious members of
icon familyØAvoid excessive detail
Fall 2019 PSYCH / CS 6755
Icon Design
What do each of these signify?
Almost always want to accompany your iconsby a text label
Fall 2019 PSYCH / CS 6755
Good & Bad DesignsØwww.baddesigns.com
Fall 2019 PSYCH / CS 6755
Design of Everyday Things
Don Norman
Fall 2019 PSYCH / CS 6755
Daily ChallengesØHow many of you can use all the
functionality in yourv VCRv Digital watchv Copy machinev Stereo systemv Plumbing fixtures
Fall 2019 PSYCH / CS 6755
Important ConceptsØAffordancesØConceptual modelsØVisibilityØMappingØFeedbackØConstraints
Fall 2019 PSYCH / CS 6755
AffordanceØPerceived and actual fundamental
properties of an object that determine how it could be usedv Chair is for sittingv Ball is for throwingv Button is for pushing
ØComplex things may need explanation, but simple things should not
Fall 2019 PSYCH / CS 6755
Fun ExamplesØLeitz slide projector
v To move forward, short press
v To move backward, long press
ØWhat happens when you get frustrated?
Fall 2019 PSYCH / CS 6755
Fun ExamplesDoors
Fall 2019 PSYCH / CS 6755
Designing for PeopleØNorman�s 2 main principles
v Provide a good conceptual modelv Make things visible
Fall 2019 PSYCH / CS 6755
Conceptual ModelsØPeople build their own systems of how
things workv Example - car
ØDesigner can help user foster an appropriate conceptual modelv Appearance, instructions, behavior...
Fall 2019 PSYCH / CS 6755
VisibilityØWhen functionality is hidden, problems
in use occurv Occurs when number of functions is
greater than number of controls
ØWhen capabilities are visible, it does not require memory of how to usev Remind person how to use something
Fall 2019 PSYCH / CS 6755
Simple Example
What if both slots of the receptacle were �big� and you had toremember which side the �small� sid eof the plug went into?
Electric plugs
Fall 2019 PSYCH / CS 6755
Simple ExampleØBathroom faucets
v Two functions• Hot/cold• Pressure
Fall 2019 PSYCH / CS 6755
Bathroom Faucets 1
Can you figureout how to useit?
Are two functionsclear and independent?
Fall 2019 PSYCH / CS 6755
Bathroom Faucets 2
Can you figureout how to useit?
Are two functionsclear and independent?
Fall 2019 PSYCH / CS 6755
Bathroom Faucets 3
Can you figureout how to useit?
Are two functionsclear and independent?
Fall 2019 PSYCH / CS 6755
Two Important PrinciplesØMappingØFeedback
Fall 2019 PSYCH / CS 6755
MappingØRelationship between two objects,
here, between control and action/resultv Good:
• Car, various driving controls• Mercedes Benz seat adjustment example
v Bad• Car stereo - Knob for front/back speakers• Stoves
Fall 2019 PSYCH / CS 6755
Mapping ExamplesMoney:Euros vs. US DollarsSize::value
Fall 2019 PSYCH / CS 6755
Why Not Design Better?ØStoves
Fall 2019 PSYCH / CS 6755
FeedbackØLet someone know what just occurred
v Can be sound that�s madev Can be change in physical state
Fall 2019 PSYCH / CS 6755
Individual DifferencesØFor whom do you design?
v Everyone? Impossiblev Average? Excluding half audiencev 95%? Still may miss a lot
ØCan�t accommodate everyone
Fall 2019 PSYCH / CS 6755
Individual DifferencesØDesigners are not representative of the user
population for whom they are designing
ØDon�t expect users to think or act like you
ØPeople vary in both physical attributes and mental/cognitive attributes
Fall 2019 PSYCH / CS 6755
Example
ScissorsAffordances - Insert somethinginto holes
Constraints - Bigger hole forseveral fingers, small for thumb
Mapping - How to insert fingersinto holes suggested by visibleappearance
Conceptual model - Suggested byhow parts fit together and move
Users - Often for right handed users only
Fall 2019 PSYCH / CS 6755
Try and Try AgainØNorman thinks that it often takes 5 or 6
tries to get something �right�
ØDesigner may not have luxury of time in a competitive business environment
Fall 2019 PSYCH / CS 6755