creating uis n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Creating UIs PowerPoint Presentation
Download Presentation
Creating UIs

Loading in 2 Seconds...

play fullscreen
1 / 97

Creating UIs - PowerPoint PPT Presentation


  • 128 Views
  • Uploaded on

Creating UIs. Design. How to create a UI?. Step 3. Step 2. Step 1. Design. Test. Plan. How to create a UI?. Step 3. Step 2. Step 1. Design. Test. Plan. Design Outline. Visual Structure Text Colors Responsiveness Facilitate Learning Delivering Information. Visual Structure.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Creating UIs' - monifa


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
how to create a ui
How to create a UI?

Step 3

Step 2

Step 1

Design

Test

Plan

how to create a ui1
How to create a UI?

Step 3

Step 2

Step 1

Design

Test

Plan

design outline
Design Outline
  • Visual Structure
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
  • Delivering Information
visual structure
Visual Structure
  • Is all about helping users find information more quickly.
design outline1
Design Outline
  • Visual Structure
    • Gestalt Principles
    • Visual Hierarchy
    • Structure enhances readability
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
  • Delivering Information
  • Sketching and Paper Prototypes
gestalt principles
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
7 Gestalt Principles
  • Proximity
  • Similarity
  • Continuity
  • Closure
  • Symmetry
  • Figure/Ground
  • Common Fate
proximity
Proximity
  • Items that are close appear grouped
proximity1
Proximity

Microsoft Office’s File Info Tab

similarity
Similarity
  • Items will appear grouped together if they look more similar to each other than contrasting objects.
similarity1
Similarity

Taken from cnn.com

continuity
Continuity
  • Our visual perception is biased to perceive continuous forms rather than disconnected segments.
continuity ii
Continuity II
  • Items placed on a certain row or direction are seen as a group
closure
Closure
  • Human vision is biased to see whole objects, even when they are incomplete.
closure1
Closure
  • Mostly used for logos, icons, and art
symmetry
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
Figure/Ground
  • The figure is what you notice, and the ground is everything else.
figure ground1
Figure/Ground
  • The figure is content(helps draw a user’s focus to a certain area)
  • The ground is the background
figure ground2
Figure/Ground

The white area is the figure b/c its on top and casts a shadow on the other content.

common fate
Common Fate
  • Items appear grouped/related if they move together.
common fate1
Common Fate
  • Useful for animations that convey information
  • Drop down menus
  • Tool tips
design outline2
Design Outline
  • Visual Structure
    • Gestalt Principles
    • Visual Hierarchy
    • Structure enhances readability
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
  • Delivering Information
  • Sketching and Paper Prototypes
visual hierarchy
Visual Hierarchy

One of the most important goals in structuring information is to provide a visual hierarchy.

visual hierarchy example
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.

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 Francisco
    • Depart: 14:30 Tue 15 Oct
    • Arrive: 11:40 Tue 15 Oct
what visual hierarchy can do for you
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 outline3
Design Outline
  • Visual Structure
    • Gestalt Principles
    • Visual Hierarchy
    • Structure enhances readability
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
  • Delivering Information
structure enhances readability
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 readability1
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 readability2
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 outline4
Design Outline
  • Visual Structure
  • Text
    • People don’t read
    • Font choice
    • Vocabulary
  • Colors
  • Responsiveness
  • Facilitate Learning
  • Delivering Information
  • Sketching and Paper Prototypes
people don t read
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
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 choice1
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
Text-Align Readability Example

In West Philadelphia born and raised

On the playground is where I spent most of my days

Chillin’ out maxin’ relaxin’ all cool

Shootin some b-ball outside of school

In West Philadelphia born and raised

On the playground is where I spent most of my days

Chillin’ out maxin’ relaxin’ all cool

Shootin some b-ball outside of school

In West Philadelphia born and raised

On the playground is where I spent most of my days

Chillin’ out maxin’ relaxin’ all cool

Shootin some b-ball outside of school

In West Philadelphia born and raised

On the playground is where I spent most of my days

Chillin’ out maxin’ relaxin’ all cool

Shootin some b-ball outside of school

font choice2
Font Choice
  • Font color is also very important.
  • Font color is also very important.
  • So is the background color/image
design outline5
Design Outline
  • Visual Structure
  • Text
  • Colors
    • Color Theory and Harmony
    • Picking a color palette
  • Responsiveness
  • Facilitate Learning
  • Delivering Information
  • Sketching and Paper Prototypes
color theory
Color Theory
  • Techniques for combining color
    • Complementary
    • Analogous
    • Triad
    • Split-Complementary
    • Rectangle
    • Square
color harmony
Color Harmony

A combination of colors that are pleasing to the eye

color theory complementary
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
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
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
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
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 theory1
Color Theory
  • Learn more at littletownmart
design outline6
Design Outline
  • Visual Structure
  • Text
  • Colors
    • Color Theory and Harmony
    • Picking a color palette
  • Responsiveness
  • Facilitate Learning
  • Delivering Information
  • Sketching and Paper Prototypes
how to pick a color palette
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
Steal color from someone
  • Go to a website that has pleasing colors and inspect the source.
steal color from someone1
Steal color from someone
  • Find art and steal the artist’s colors
use tools
Use Tools
  • ColourLovers
    • Millions of patterns, colors, and color palettes
    • Search color palettes by query
  • Kuler
    • Create, save, and share color palettes
color tip
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 Daltonizeis an extension which will render a webpage in greyscale.
design outline7
Design Outline
  • Visual Structure
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
  • Delivering Information
  • Sketching and Paper Prototypes
responsiveness
Responsiveness

User satisfaction and responsiveness go hand in hand.

how to be responsive
How to be responsive
  • Do as little as possible (less code)
  • Use as little as possible (less images, files, fonts, etc.)
perceiving responsiveness
Perceiving responsiveness
  • Show busy indicator for short operations
  • Show progress bar for long operations
perceiving responsiveness1
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 outline8
Design Outline
  • Visual Structure
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
    • Design for the common task
    • Be consistent
    • Think outside-in
    • Provide a low risk environment
  • Delivering Information
  • Sketching and Paper Prototypes
design for the common task
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
Do a little, get a lot
  • Makes common tasks easier by providing:
    • Sensible defaults
    • “canned” solutions or templates
    • Wizards
    • Customization
two types of common
Two types of ‘common’
  • How many users will need the feature?
  • How often will users need the feature?

The optimal UI for a feature depends on bothfactors.

how many use it
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
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 outline9
Design Outline
  • Visual Structure
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
    • Design for the common task
    • Be consistent
    • Think outside-in
    • Provide a low risk environment
  • Delivering Information
  • Sketching and Paper Prototypes
be consistent
Be consistent

Consistency is a fundamental principle of good UI design.

consistency consistency consistency
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 consistency1
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
Make consistency user-centered
  • When investigating users, determine how they perceive consistency.
  • What software/tools do they find consistent or inconsistent?
design outline10
Design Outline
  • Visual Structure
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
    • Design for the common task
    • Be consistent
    • Think outside-in
    • Provide a low risk environment
  • Delivering Information
  • Sketching and Paper Prototypes
inside out thinking
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 thinking1
Inside-out Thinking
  • Thinking inside out from your application http://www.youtube.com/watch?v=qbToDF1M7j0&feature=related
symptoms of inside out thinking
Symptoms of Inside-out thinking
  • Textual ambiguity
  • Graphical ambiguity
textual ambiguity
Textual Ambiguity

When text is interpreted differently than the designer intended.

“Crowds Rushing to See Pope Trample 6 to Death”

think outside in
Think outside-in
  • Make sure it makes sense to people who do notknow 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 outline11
Design Outline
  • Visual Structure
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
    • Design for the common task
    • Be consistent
    • Think outside-in
    • Provide a low risk environment
  • Delivering Information
  • Sketching and Paper Prototypes
provide a low risk environment
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 environment1
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 outline12
Design Outline
  • Visual Structure
  • Text
  • Colors
  • Responsiveness
  • Facilitate Learning
  • Delivering Information
    • Presentation Goals
  • Sketching and Paper Prototypes
delivering information
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
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 information1
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
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
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
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
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
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 together1
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.
iterative ideation and prototyping
Iterative Ideation and Prototyping
  • http://www.designbycandlelight.com/ux-video-week-sketching-paper-prototyping/
paper prototype demonstration
Paper Prototype Demonstration
  • http://www.youtube.com/watch?v=iklcqLlXOok&feature=related
paper prototype interaction testing
Paper Prototype Interaction Testing
  • http://www.youtube.com/watch?v=GrV2SZuRPv0&feature=player_embedded
benefits of paper prototypes
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!