Transcript Introduction to Design - Brown University Computer Science

Introduction to
Design
Patterns in interaction and graphics
Agenda
• Common user interaction patterns
• Major concepts in graphic design
• Layout
• Color
• Typography
• Application: “dark patterns”
“Life is not one damn thing after another. It's the same
damned thing over and over again.”
– Edna St. Vincent Millay
USER INTERACTION PATTERNS
Patterns in behavior
• Every user is unique, has a unique knowledge base and a
unique set of goals
• However, human behavior tends to follow certain patterns
• Software which supports these patterns can help users
accomplish their goals with greater ease and satisfaction
Safe exploration
• Users are more likely to explore a system if they feel they can
do so without suffering negative consequences (e.g. making
an un-undoable change, making private data public, being
charged a fee, etc.)
Application: Navigation & undo
Instant gratification
• Users do not like to wait
• Remember the days of dial-up? Weren’t they lame?
• If users can have a “success experience” within the first few
seconds of opening a program, they will feel more confident in
themselves and in the software
• Design solid initial experiences
• Out-of-box experience (OOBE)
• Initial state for each subsequent run
• Do not hide initial functionality
Application: Lazy registration
• “I’ll just come out and say this: sign-up forms must die.” – Luke
Wroblewski
• Imagine you just found a new website that lets you do that
thing you always wanted to do with that stuff you like
• Or maybe it lets you do something so awesome you had never
even thought it up before
• Is your first inclination: (a) to want to play around with the
cool new functionality or (b) to want to fill out a long and
boring registration form, then wait for the account activation
email to be caught by your spam filter?
Vs.
Deferred choices
• This is a logical extension of the desire for instant gratification
• Sometimes users will not want to bother making all of their
choices up front
• Other times, they will not have enough information to do so
• There are a number of good practices you can implement
here:
• Don’t accost the user with too many up-front choices.
• Clearly mark what form fields are required. Do not force the user
to fill in optional fields.
• Use good defaults
• Make it possible for users to return to deferred fields later.
Application: Optional fields
Satisficing
• Satisficing = satisfying + sufficing
• Term coined by Herbert Simon in 1957 to describe the behavior
of people in economic and social situations
• Relevance to interface design: users do not sit down and
peruse the entirety of a screen to determine which button will
bring them closest to their goal
• Instead, they rapidly scan the interface and pick the first
object that seems likely to be relevant to their goal
Changes in midstream
• Users tend to change their minds, sometimes even while in
the middle of doing something.
• A user may wish to change their goal (e.g., remove something
from their shopping cart) or switch tasks altogether (e.g., go
on Facebook rather than answer TA emails)
• A user may also wish to quit an application and then come
back to whatever they were working on
• This is called “reentrance”
Application: Saved item carts
Application: Saved data
Spatial memory
• When people manipulate objects on a screen, they often find
them again later by remembering where they are, not what
they’re named
• Obvious application: Don’t try to organize your users’
desktops, etc. for them
• Trickier application: Menu redesign
• Adding a feature is easy
• Rearranging existing features is difficult
Application: New tab screens
Prospective memory
• Here is a philosophically interesting pattern: Sending a
message to Future-You
• Users engage in prospective memory when they arrange some
way of reminding themselves of something (typically, a task)
• Folk example: Tying a string around one’s finger
• Real examples: Flagging emails as important, adding comments to
a document, leaving something you need to take with you to
work tomorrow morning on top of your shoes
Application: Location-aware
notes
Keyboard only
• Switching back and forth between mouse and keyboard can
test expert users’ patience
• Applications can be designed to be “driven” completely by the
keyboard
• Standard techniques:
• Keyboard shortcuts (e.g. CTRL+C, CTRL+V)
• Selection from lists, radio buttons, checkboxes, etc. using arrow
keys, Enter, Shift, and CTRL
• Tab traversal (using Tab to move keyboard focus)
• Dialog boxes with a default button selected
Caveat: Keyboard guidelines
MSDN
Apple Human
Interface Guidelines
Other people’s advice
• Humans are social creatures
• They enjoy sharing their opinions
• See: Tech House Budget meetings
• They also rely on the advice of others when looking to invest
in an unfamiliar product
Application: Comments
Relevant concepts for GUI design
GRAPHIC DESIGN
Layout
• Page layout can be used to manipulate a user’s locus of
attention
• You can draw a user’s eye to what is important
• This is as much an art as it is a science
Visual hierarchy
• The most important content on a page should stand out the
most
• Just look at this slide: the title is obviously a title, the content
is obviously content
• How can this be accomplished?
•
•
•
•
•
Whitespace
Font size
Font weight
Contrasting colors
Graphics for emphasis (lines, boxes, etc.)
Example: No hierarchy
Dear friends of Technology House: You are invited to
Javaspook! Come dance the night away with free baked
goods, coffee, and music. Email the social chair if you’d like
to tableslip or bring a baked good. Date: October 30 Time:
10:30-??? Where: Tech House Lounge If you need
directions, check our website. Please RSVP by October 20.
Thanks!
Example: With whitespace
Dear friends of Technology House:
You are invited to Javaspook!
Come dance the night away with free baked goods, coffee,
and music. Email the social chair if you’d like to tableslip or
bring a baked good.
Date: October 30
Time: 10:30-???
Where: Tech House Lounge
If you need directions, check our website.
Please RSVP by October 20. Thanks!
Example: Properly
hierarchized
Dear friends of Technology House:
You are invited to Javaspook!
Come dance the night away with free baked goods, coffee, and
music. Email the social chair if you’d like to tableslip or bring a
baked good.
Date: October 30
Time: 10:30-???
Where: Tech House Lounge
If you need directions, check our website.
Please RSVP by October 20. Thanks!
Visual flow
• Visual flow deals with the path a reader’s eye will tend to take
as they scan the page
• This is influenced by visual hierarchy
• It is also important to consider scanning patterns
• (That’s left->right, then top->bottom for English speakers)
Gutenberg rule
Application: Eye-tracking
From Eye-tracking studies: more than meets the eye
Color
• Color can cause an observer to form an immediate, emotional
response
• It can also make your UI illegible, so be careful
• Always put dark foregrounds against light backgrounds, or vice
versa
• Test: desaturate (i.e. convert to greyscale) and see if it’s still
readable)
• Never use red/green as a critical color distinction
• 1:10 men and 1:100 women are colorblind
• Never put text of one color on a background in a
complimentary color (e.g. bright blue text on a bright orange
background)
The Color wheel
• Warm colors connote excitement and
passion
• Cool colors connote respectability
and conservativeness
• The two can be combined for a
balanced look
Compare
See more at the CSS Zen Garden
Typography
• Fonts (or “typefaces”, if you prefer) visually represent the
voice of your text
• Sans-serif fonts tend to work better at small point sizes on
computer displays (for print, serifs are better)
• Italicized, cursive, or highly geometric fonts are unreadable at
small sizes
• Capital letters are harder to distinguish than lower-cased
letters, so avoid all-caps
• Guideline: set large amounts of text in a medium-width
column (~10-12 English words) and do not right-justify
narrower columns of text
With great power comes great responsibility.
DARK PATTERNS
What are dark patterns?
• So far, we have discussed patterns in human behavior and
interface design as they relate to improving the user’s
experience.
• Some patterns, however, have been developed specifically to
take advantage of the user.
• These patterns are called dark patterns. They are typically
used by commercial web app designers.
Example: Friend spam
How “friend spam” works
• “Friend spam” typically occurs on social media sites
• An app is developed which provides some sort of fun but
meaningless service
• In order to use the app, the user implicitly agrees to the (often
obscured) term that the app can publish to their feed
• The problem then becomes viral
Example: Disguised ads
How “disguised ads” work
• Softpedia is a website which offers users free software
downloads
• On the previous screenshot, what link do you think would
have led to the file you wanted to download?
• Hint: It doesn’t have the word “download” in it
For more dark patterns
• These and other dark patterns can be found on the Dark
Patterns Wiki (not maintained by or affiliated with Brown CS)
• If you can think of any more find a new example of a dark
pattern, submit it!