IMPROVING YOUR WEBSITE W/ USER CENTERED DESIGNJoy Mooney

Lunchtime Lesson at WORK Petaluma

Overview

Why is Usability SOO Important? Web Layout – Choosing the right one Typography – Understanding font usage Color Theory – Inspire with inviting colors Call to Action Button

USABILITY

Why is Usability SOO Important? Usability or User Experience can be the

difference between a successful product or a failed one.

How does the product/site make a user feel? Good products and sites may take a little

extra effort, but in the end they will be worth it. Happy users spreading the word about their wonderful experience with your product or site.

Good User Experience

…Is Good Business The average person can use site/product How to have a good user experience:

Take user into account every SINGLE step of the way. Break down the user experience Look at from several perspectives User experience should matter to you because

it matters to your users.

Bad User Experience

No Second Chances. Difficult site could register as difficult

company. No positive experience – they won’t use your

product, worse, they go to your competitor! User Overload

FEATURITIS: Cramming as many features as possible into a site to gain new customers.

User VS Themselves/site to figure out A working site for the user should NEVER be

an afterthought.

Usability: What works?

Simple. Think of the user. Always. Create a good experience. Efficient.

Don’t Make Me Think

“If a user has to think too long about how to use a product or a site, they are less likely to use it. Which means less likely to share with their friends/family.”

- Steve Krug“Don’t Make Me Think”

WEBSITES

Don’t Make Me Feel Stupid

“Websites are complicated pieces of technology and something funny happens when people have trouble using complicated pieces of technology: They blame themselves. They feel like they must have done something wrong. They feel like they weren’t paying enough attention. They feel stupid.”

The Elements of User Experience

by Jesse James Garret

Web Layout Design

Definition The positioning of the various elements

that make a website. The layout is the hardest to change and thus must be settled and agreed upon early in the development process.http://www.azurewebdesign.com/glossary-of-web-terminology/

Navigation

Easy to find Consistent on all pages

Add secondary menu if needed – sidebar/footer

Limit number of menu options Use Call to Actions

Layouts – Bigger Picture

Responsive Layout Adjusts to different screen sizes

Layout needs as much attention as: Fonts used Color theme

Important information above the fold How do users view or scan websites:

http://conversionxl.com/10-useful-findings-about-how-people-view-websites/#

TYPOGRAPHY

Typography

Typography is: The art and process of arranging type on a page. Changing the typeface/font, size, color, weight and placement of type in your design can add extra emphasis to your words and enhance the visual appeal of your message.

Typography plays a huge role in not only graphic design but in the design of logos, website and interfaces, it is also one of the hardest things to get right.

Typography

When to use http://www.smashingmagazine.com/2010/12/14

/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/

Serif vs. San-Serif

Serif More traditional Used for Titles and Print Short line or finishing stroke on the end of

character strokes and stems

Elephant, Book Antiqua, Trajan Pro, Imprint MT Shadow, Garamond

Serif vs. San-Serif

San-Serif Lack of Serifs Became popular in the 19th Century Considered modern Used for body text on websites and mobile

Century Gothic, Franklin Gothic Book,Verdana, Pea Hollee, Eras Light ITC

Serif vs. San-Serif

Todays New York Times: http://www.nytimes.com/

Kerning and Tracking

Kerning – IMPORTANT – adjustment of the spacing between individual characters. www.youtube.com/watch?v=-dFemRuonyk

Tracking – spacing of a group of characters. This is normal tracking. This is extra spaced tracking.

Ligatures

When characters become combined by parts of their anatomy which clash or look too close together.

Typography

Which best describes the feeling of anger? Why did you pick it? Size, color, weight, font?

Reversing Out

When reversing color out, white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.

If you are happy and you know it, clap your hands.

If you are happy and you know it, clap your hands.

If you are happy and you know it, clap your hands.

If you are happy and you know it, clap your hands.

Typography

Designing sites on a Mac vs. PC Standard fonts do not always exist

CSS – Cascading Style Sheets Allow to keep font use consistent Use Google fonts/embed fonts Change size of fonts as media screen

increases or decreases.

COLOR THEORY

Color Wheel

Colors that are opposite of each other on the color wheel complement each other.

How many products, sports teams or logos use these color combos?

Color Schemes

Triadic Color Scheme – three colors on

separate ends the Tertiary Color Wheel.

Compound Color Scheme – two colors

opposite on the Tertiary Color Wheel.

Make Your Own

Sites to help with Color Schemes

http://paletton.com/

http://kuler.adobe.com/

Emotional Responses to Colors

+ fire, power = passion, importance- rage, emergency, anger

+ happiness, joy, sunshine- stimulating mentally, ignorance, deceit

+ joy, intelligence, brightness, energy, optimism, happiness- caution, criticism, laziness, jealousy

Warm: feelings of happiness and joy. 2009: Yellow became popular.

+ nature, healing, growth, harmony, safe- money, showing greed, jealousy

+ peaceful, calming, stability, expertise- depression, coldness, passiveness

+ royalty, sophistication, wealth, luxury, encourages creativityBright purple – magical feeling, darker purples, gloominess/sadness

Cool: feelings of trust, authority and establishment.

Best for clean and professional sites.

Emotional Responses to Colors

Emotional Responses to Colors

+ power, elegance, sophistication- death, mystery, unknown

+ purity, innocence, clean, safe- cold, distant – think winter

Black or White

Color Palettes

Color can be one of the most effective ways to communicate a brand identity. Coca-Cola, UPS, Kodak, NBC (older

companies) Facebook, Google (newer)

Consistent w/ using the same color over the years

Color Palettes

Color Palettes

Color Palettes

Contrast

By using contrast a designer can focus the attention of their viewer to certain sections

of a web page.

The brown dog quickly jumps over a lazy dog.

The brown dog quickly jumps over a lazy dog.

The brown dog quickly jumps over a lazy dog.

The brown dog quickly jumps over a lazy dog.

Color Context

Red appears more brilliant against a black background and somewhat duller against the white background. In contrast with orange, the red appears lifeless; in contrast with blue-green, it exhibits brilliance. Notice that the red square appears larger on black than on other background colors. http://www.colormatters.com/color-and-design/basic-color-theory

Vibrancy

The emotion of a site is determined by the vibrancy you choose. For a more energized site, use brighter colors. If

you are looking to calm the user choose darker shades.

CALL TO ACTION

Why A Call To Action

INCREASE click conversion Getting users to your site is one thing but you

want them to CLICK. Give them a reason Guides user

“I am ready to check out” “I want ______” “End my subscription”

http://www.copyblogger.com/call-to-action-buttons/

Where To Place CTA button

Anywhere above the fold. Enhance the button you WANT user to click. Have more than one call to action button

With a layout that allows it without overwhelming user

http://www.copyblogger.com/call-to-action-buttons/

What do CTA button’s Look Like Call to Action Buttons should look like a

BUTTON! “Users need to identify it quickly as an element to

click in order to initiate an act.”

3D effect Contrasting, non gray color Feedback on hover (button changes) Whitespace around it An Arrow pointing to it with instructional copyhttp://www.copyblogger.com/call-to-action-buttons/

References

http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-designers/

http://www.colormatters.com/color-and-design/basic-color-theory

http://mashable.com/2010/09/16/colors-of-the-web-infographic/

http://sixrevisions.com/web_design/a-look-into-color-theory-in-web-design/

http://www.copyblogger.com/call-to-action-buttons/