IMPROVING YOUR WEBSITE W/ USER CENTERED DESIGN Joy Mooney Lunchtime Lesson at WORK Petaluma.
-
Upload
melina-cookson -
Category
Documents
-
view
219 -
download
0
Transcript of IMPROVING YOUR WEBSITE W/ USER CENTERED DESIGN Joy Mooney Lunchtime Lesson at WORK Petaluma.
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/