Post on 19-Jan-2016
transcript
Introduction to DesignPatterns in interaction and graphics
Agenda• Common user interaction patterns• Major concepts in graphic design• Layout• Color• Typography
• Application: “dark patterns”
USER INTERACTION PATTERNS
“Life is not one damn thing after another. It's the same damned thing over and over again.” – Edna St. Vincent Millay
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
Apple Human Interface Guidelines
MSDN
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
GRAPHIC DESIGNRelevant concepts for GUI 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
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
DARK PATTERNSWith great power comes great responsibility.
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!