Presentation on theme: "IMPROVING YOUR WEBSITE W/ USER CENTERED DESIGN Joy Mooney Lunchtime Lesson at WORK Petaluma."— Presentation transcript:
IMPROVING YOUR WEBSITE W/ USER CENTERED DESIGN Joy 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
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”
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.
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: people-view-websites/# people-view-websites/#
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 font-should-i-use-five-principles-for-choosing-and-using- typefaces/ 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 19 th 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:
Kerning and Tracking Kerning – IMPORTANT – adjustment of the spacing between individual characters. 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.
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 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
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 creativity Bright purple – magical feeling, darker purples, gloominess/sadness Cool: feelings of trust, authority and establishment. Best for clean and professional sites. 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
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.
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.
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”
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
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
References introduction-to-color-theory-for-web-designers/ introduction-to-color-theory-for-web-designers/ theory theory infographic/ infographic/ in-web-design/ in-web-design/