Presentation on theme: "Introduction to Design Patterns in interaction and graphics."— Presentation transcript:
Introduction to Design Patterns 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 WroblewskiLuke 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?
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
GRAPHIC DESIGN Relevant 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)
Application: Eye-tracking From Eye-tracking studies: more than meets the eyeEye-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 GardenCSS 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 PATTERNS With 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)Dark Patterns Wiki If you can think of any more find a new example of a dark pattern, submit it!