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

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

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!