Creating UIs
Design
How to create a UI?
Plan TestDesign
Step 1 Step 3Step 2
How to create a UI?
Plan Test
Step 1 Step 3Step 2
Design
Design Outline
A. Visual StructureB. TextC. ColorsD. ResponsivenessE. Facilitate LearningF. Delivering Information
Visual Structure
• Is all about helping users find information more quickly.
Design Outline
A. Visual StructureA. Gestalt PrinciplesB. Visual HierarchyC. Structure enhances readability
B. TextC. ColorsD. ResponsivenessE. Facilitate LearningF. Delivering InformationG. Sketching and Paper Prototypes
Gestalt Principles
Our visual system automatically imposes structure on visual input and is wired to perceive whole shapes, figures, and objects rather than disconnected edges, lines, and areas.
7 Gestalt Principles
1. Proximity2. Similarity3. Continuity4. Closure5. Symmetry6. Figure/Ground7. Common Fate
Proximity
• Items that are close appear grouped
Proximity
Microsoft Office’s File Info Tab
Similarity
• Items will appear grouped together if they look more similar to each other than contrasting objects.
Similarity
Taken from cnn.com
Similarity
Continuity
• Our visual perception is biased to perceive continuous forms rather than disconnected segments.
Continuity
Continuity II
• Items placed on a certain row or direction are seen as a group
Continuity III
Closure
• Human vision is biased to see whole objects, even when they are incomplete.
Closure
• Mostly used for logos, icons, and art
Symmetry
• The data in our visual field often has more than one interpretation, but our vision automatically organizes and interprets data as to simplify it and give it symmetry.
[ ] [ ] [ ]
We see 3 pairs of brackets instead of 6 individual brackets.
Figure/Ground
• The figure is what you notice, and the ground is everything else.
Figure/Ground
• The figure is content (helps draw a user’s focus to a certain area)
• The ground is the background
Figure/Ground
The white area is the figure b/c its on top and casts a shadow on the other content.
Common Fate
• Items appear grouped/related if they move together.
Common Fate• Useful for animations that convey information• Drop down menus• Tool tips
Design Outline
A. Visual StructureA. Gestalt PrinciplesB. Visual HierarchyC. Structure enhances readability
B. TextC. ColorsD. ResponsivenessE. Facilitate LearningF. Delivering InformationG. Sketching and Paper Prototypes
Visual Hierarchy
One of the most important goals in structuring information is to provide a visual hierarchy.
Visual Hierarchy Example
You are booked on United flight 237, which departs from Auckland at 14:30 on Tuesday 15 Oct and arrives at San Francisco at 11:40 on Tuesday 15 Oct.
Flight: United 237, Auckland San FranciscoDepart: 14:30 Tue 15 OctArrive: 11:40 Tue 15 Oct
You are booked on United flight 237, which departs from Auckland at 14:30 on Tuesday 15 Oct and arrives at San Francisco at 11:40 on Tuesday 15 Oct.
What visual hierarchy can do for you
• Breaks the information into distinct sections, and large sections into subsections
• Labels sections in a way that clearly identifies its content
• Presents higher level sections more strongly than lower level ones.
Design Outline
A. Visual StructureA. Gestalt PrinciplesB. Visual HierarchyC. Structure enhances readability
B. TextC. ColorsD. ResponsivenessE. Facilitate LearningF. Delivering Information
Structure Enhances Readability
The more structured and terse the presentation of information, the more quickly and easily people can scan and comprehend it.
Structure Enhances Readability
• Western cultures read from top to bottom and left to right.
• Don’t force users to read information in an unnatural way.
Structure Enhances Readability
• Long numbers are easier to scan and understand when segmented.– Telephone numbers– Credit cards– SSN
• The use of data specific controls provide better readability for input and output.
Design Outline
A. Visual StructureB. Text
A. People don’t readB. Font choiceC. Vocabulary
C. ColorsD. ResponsivenessE. Facilitate LearningF. Delivering InformationG. Sketching and Paper Prototypes
People don’t read
• The more words on a page, the fewer people will actually read it.
• Shorten, dumb down, and simplify text.
• Even adding ‘please’, which is helpful and polite, slows down readers.
Font Choice
• Use readable typefaces to increase readability.
• Avoid tiny fonts. – People use tiny fonts when they have a lot of text but a
small amount of display space.– Wanting to use tiny font might be a warning sign that
you’re about to commit bad design.
Font Choice
• Old people can’t read small font. – If you feel that you must use small font. At least provide an
option to increase text size.
• Western people read naturally from left to right
• Using centered and right aligned text hinder the reader’s flow.
Text-Align Readability Example
In West Philadelphia born and raisedOn the playground is where I spent most of my days
Chillin’ out maxin’ relaxin’ all coolShootin some b-ball outside of school
In West Philadelphia born and raisedOn the playground is where I spent most of my daysChillin’ out maxin’ relaxin’ all coolShootin some b-ball outside of school
In West Philadelphia born and raisedOn the playground is where I spent most of my days
Chillin’ out maxin’ relaxin’ all coolShootin some b-ball outside of school
In West Philadelphia born and raisedOn the playground is where I spent most of my daysChillin’ out maxin’ relaxin’ all coolShootin some b-ball outside of school
Font Choice
• Font color is also very important.
• So is the background color/image
• Font color is also very important.
Design Outline
A. Visual StructureB. TextC. Colors
A. Color Theory and HarmonyB. Picking a color palette
D. ResponsivenessE. Facilitate LearningF. Delivering InformationG. Sketching and Paper Prototypes
Color Theory
• Techniques for combining color– Complementary– Analogous– Triad– Split-Complementary– Rectangle– Square
Color Harmony
A combination of colors that are pleasing to the eye
Color Theory: Complementary
Colors that are opposite on the color wheel.
• The high contrast of color creates a ‘vibrant/bold’ look.
• This color scheme makes it difficult to focus the user on key areas.
• A really bad choice for text and background combinations.
Color Theory: Analogous
Colors that are next to each other on the color wheel.
• This color scheme is often found in nature and is harmonious.
• Choose one color to dominate, a second to support, and a third for accent.
• Suffers from a lack of contrast.
Color Theory: Triad
Colors that are evenly spaced around the color wheel.
• This color scheme tends to be quite vibrant.
• Let one color dominate and use the other two as accents.
Color Theory: Split-Complementary
One complementary base color, it uses two colors analogous to its complement
• Still maintains a strong contrast, but has less tension than complementary.
• This color scheme is good for beginners because it is hard to mess up.
Color Theory: Tetradic
Two complementary and two analogous colors
• Offers the largest option of color, but can give problems for good harmony.
• Let one color dominate.
Rectangle Square
Design Outline
A. Visual StructureB. TextC. Colors
A. Color Theory and HarmonyB. Picking a color palette
D. ResponsivenessE. Facilitate LearningF. Delivering InformationG. Sketching and Paper Prototypes
How to pick a color palette
• Pick one color from the color wheel and use color theory
• Steal someone else’s colors
• Steal something else’s colors
• Use tools
Steal color from someone
• Go to a website that has pleasing colors and inspect the source.
Steal color from someone
• Find art and steal the artist’s colors
Steal color from something
Use Tools
• ColourLovers– Millions of patterns, colors, and color palettes– Search color palettes by query
• Kuler– Create, save, and share color palettes
Color Tip
• Be mindful of the colorblind.
• A good test for checking if your website is colorblind friendly is to see how it looks in greyscale.
• Chrome Daltonize is an extension which will render a webpage in greyscale.
Design Outline
A. Visual StructureB. TextC. ColorsD. ResponsivenessE. Facilitate LearningF. Delivering InformationG. Sketching and Paper Prototypes
Responsiveness
User satisfaction and responsiveness go hand in hand.
How to be responsive
• Do as little as possible (less code)
• Use as little as possible (less images, files, fonts, etc.)
Perceiving responsiveness
• Show busy indicator for short operations
• Show progress bar for long operations
Perceiving Responsiveness
• Load important information first, then details, and auxiliary info.
• Pre-compute responses to high-probability requests during low load.
• Process user input based on priority, not by order.
Design OutlineA. Visual StructureB. TextC. ColorsD. ResponsivenessE. Facilitate Learning
A. Design for the common taskB. Be consistentC. Think outside-inD. Provide a low risk environment
F. Delivering InformationG. Sketching and Paper Prototypes
Design for the common task
In any task domain, users will have goals ranging from common to rare. Design your application to recognize this range.
Do a little, get a lot
• Makes common tasks easier by providing:– Sensible defaults– “canned” solutions or templates– Wizards– Customization
Two types of ‘common’
1. How many users will need the feature?
2. How often will users need the feature?
The optimal UI for a feature depends on both factors.
How many use it?
• A feature with high usage should be more visible and prominent.
• Actions that few will use can be less prominent.
How often is it used?
• Frequently used features should require very few clicks and keystrokes.
• User’s don’t mind more clicking/keystrokes for features used less frequently.
Design for core cases
More visible ↔ Less visible
Fewer clicks By most By few
Frequently Highly visible; Barely visible;
↕ few clicks few clicks
Rarely Barely visible; Hidden;
More clicks more clicks OK
more clicks
Design OutlineA. Visual StructureB. TextC. ColorsD. ResponsivenessE. Facilitate Learning
A. Design for the common taskB. Be consistentC. Think outside-inD. Provide a low risk environment
F. Delivering InformationG. Sketching and Paper Prototypes
Be consistent
Consistency is a fundamental principle of good UI design.
Consistency, consistency, consistency
• UIs should foster the development of usage habits.
• Users want to ignore the software/device and focus on the task.
• The more consistent software is, the less a user has to think about what they are doing.
Consistency, consistency, consistency
• When beginning design, use your conceptual model and objects/actions analysis to find common tasks.
• Use generic commands or similar UI for these common tasks.
Make consistency user-centered
• When investigating users, determine how they perceive consistency.
• What software/tools do they find consistent or inconsistent?
Design OutlineA. Visual StructureB. TextC. ColorsD. ResponsivenessE. Facilitate Learning
A. Design for the common taskB. Be consistentC. Think outside-inD. Provide a low risk environment
F. Delivering InformationG. Sketching and Paper Prototypes
Inside-out thinking
• Designers often assume users will automatically know their intensions.
• Designers believe that users will perceive and understand things the way they intended.
• The problem is, users don’t know what the designer knows.
Inside-out Thinking
• Thinking inside out from your application http://www.youtube.com/watch?v=qbToDF1M7j0&feature=related
Symptoms of Inside-out thinking
• Textual ambiguity
• Graphical ambiguity
Textual Ambiguity
When text is interpreted differently than the designer intended.
“Crowds Rushing to See Pope Trample 6 to Death”
Graphical Ambiguity
Think outside-in
• Make sure it makes sense to people who do not know everything about the app.
• User’s will often know more about the task you are trying to support than you, what they don’t know is your intentions.
Design OutlineA. Visual StructureB. TextC. ColorsD. ResponsivenessE. Facilitate Learning
A. Design for the common taskB. Be consistentC. Think outside-inD. Provide a low risk environment
F. Delivering InformationG. Sketching and Paper Prototypes
Provide a low risk environment
• People make mistakes
• Don’t make software that doesn’t allow you to correct mistakes.
• Don’t make it costly/time consuming to fix mistakes.
• Have an undo button.
Provide a low risk environment
• Risky situations which are hard to correct don’t promote exploration.
• Low risk situations reduces stress and encourages exploration.
• A user wanting to explore your app is a good thing!
Design Outline
A. Visual StructureB. TextC. ColorsD. ResponsivenessE. Facilitate LearningF. Delivering Information
A. Presentation GoalsG. Sketching and Paper Prototypes
Delivering information
Software should focus user’s attention on the important data and help them extract info from it.
People want info not just data
• Is my boss in the office? Yes or no?
• Regardless of the method used, energy exhausted, or amount of data transferred, you only care about “yes” or “no.”
Delivering information
• You need to take presentation seriously and cautiously.
• Goals for a great presentation include:– Visual order and user focus– Scannability– Matching the medium– Attention to detail
Visual order and user focus
• Direct the user’s attention toward what is important.– Use color, contrast, and organization– Don’t use a popup, blinking text, or clippy
Scannability
• People don’t read
• Design screens to be scannable
• Break up info into:– Headings, bullets, lists, tables
• Use graphics where possible
Match the medium
• Well designed user interfaces match the medium in which they are presented.
• A desktop top UI usually won’t work on a tablet/phone.
• Each medium has advantages and disadvantages. Design for both.
Attention to detail
• Success is in the details (Google Logo Ambulance)
• Serious app makers should invest in a UI or graphic designer.
• If programmers must design without the support of specialists, use people who are sticklers for details.
Bringing it all together
• Our eyes automatically impose structure on visual input (Gestalt Principles). Take advantage of it.
• Increase readability. – Add Visual Hierarchy– Pick the right font!
• Choosing the correct color palette sets the right mood.
Bringing it all together
• Make common tasks easy
• Be consistent!!!
• Users think differently than a designer or programmer.
• Make information easy to find.
• Test your design on the user.
Sketching & Paper Prototypes
Iterative Ideation and Prototyping
• http://www.designbycandlelight.com/ux-video-week-sketching-paper-prototyping/
Paper Prototype Demonstration
• http://www.youtube.com/watch?v=iklcqLlXOok&feature=related
Paper Prototype Interaction Testing
• http://www.youtube.com/watch?v=GrV2SZuRPv0&feature=player_embedded
Benefits of Paper Prototypes
• Cheap• Fast• Helps the designer wrap their heads around
the product.• Easy to change• Helps communicate ideas quickly• Helps get feedback faster• Don’t need to be a photoshop ninja!