Improving your website w/ user centered design

1. Improving your website w/ user centered design Joy Mooney Lunchtime Lesson at WORK Petaluma

2. 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

3. USABILITY

4. 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.

5. 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.

6. 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.

7. Usability: What works? • Simple. • Think of the user. Always. • Create a good experience. • Efficient.

8. 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”

9. WEBSITES

10. 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

11. 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/

12. Navigation • Easy to find • Consistent on all pages • Add secondary menu if needed – sidebar/footer • Limit number of menu options • Use Call to Actions

13. 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/#

14. TYPOGRAPHY

15. 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.

16. Typography • When to use • http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/

17. 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

18. 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

19. Serif vs. San-Serif Todays New York Times: http://www.nytimes.com/

20. 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.

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

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

23. 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.

24. 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.

25. COLOR THEORY

26. 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?

27. 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.

28. Make Your Own Sites to help with Color Schemes http://paletton.com/ http://kuler.adobe.com/

29. Emotional Responses to Colors • Warm: feelings of happiness and joy. • 2009: Yellow became popular. + fire, power = passion, importance - rage, emergency, anger + happiness, joy, sunshine - stimulating mentally, ignorance, deceit + joy, intelligence, brightness, energy, optimism, happiness - caution, criticism, laziness, jealousy

30. Emotional Responses to Colors • Cool: feelings of trust, authority and establishment. • Best for clean and professional sites. + nature, healing, growth, harmony, safe - money, showing greed, jealousy + peaceful, calming, stability, expertise - depression, coldness, passiveness + royalty, sophistication, wealth, luxury, encourages creativity Bright purple – magical feeling, darker purples, gloominess/sadness

31. Emotional Responses to Colors • Black or White + purity, innocence, clean, safe - cold, distant – think winter + power, elegance, sophistication - death, mystery, unknown

32. 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

33. Color Palettes

34. Color Palettes

35. Color Palettes

36. 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.

37. 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

38. 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.

39. CALL TO ACTION

40. 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/

41. 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/

42. 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 copy http://www.copyblogger.com/call-to-action-buttons/

43. 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/