Creating UIs

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

Color Theory

• Learn more at littletownmart

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!