Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Nifty UX Goodies - just a few takeaways

A brief overview of a few UX basics, a la Kelly McCann.
incentive, intuition, tone & positive feedback

  • Login to see the comments

  • Be the first to like this

Nifty UX Goodies - just a few takeaways

  1. 1. Nifty UX Goodies just a few takeaways
  2. 2. Overall In order to advocate for your company/client, you must first advocate for their most critical, miserable, non-techy savvy user. SO, put on your grumpy pants and honestly ask yourself: Why should I care about this? What do I get within the first 3-5 seconds upon arriving on the page? Do I have to think about what to do? If I do, am I (guided, intrigued, annoyed, delayed, entertained) in doing so? Is it worth it to repeat that action? What is the tone of this website? Does it match my motivation for being here? Am I rewarded positively for my engagement?
  3. 3. Overall Why should I care about this? INCENTIVE Do I have to think about what to do? INTUITION What is the tone of this website? TONE Am I rewarded positively for my engagement? POSITIVE FEEDBACK
  4. 4. Incentive Calls to Action: visually striking brief alluring easy to find the rest of the page is not overwhelming the page should guide the user to the CTA they should promise no obligation encourage the user to act now
  5. 5. Incentive CTAs can be simple further instruction to the user. Used tastefully, they should be received warmly, as they take the thinking out of the workflow for the user.
  6. 6. Intuition A certain level of web- literacy and contextual understanding must be assumed depending upon your audience (bare minimum: they knew to navigate to your site). Understanding the audience’s pre- established expectations and web literacy is the first step in designing a workflow.
  7. 7. Intuition Consider existing knowledge when adding features ex: Login is always on the top right Zero-in on the perfect balance between simplicity and capability ex: the iPad: high simplicity, limited capability. Know your audience and strive to accommodate accordingly Progressively reveal features as the user explores ex: filing taxes online The user should always know where he/she is ex: breadcrumbs, highlights on the navbar, etc. User Status: loading %, page #, % completed, etc. Transition animations transition animations give the user context (ex, a horizontal flyout) When things get tricky, minimalistic tours/tooltips are your friend. Examples:
  8. 8. TONE What is the feel of this website? What do you/your client want it to be? What tone will be most likely to cultivate interest, conversions, and/or continuous engagement with the target audience? HINT: they aren’t always the same The design must be congruent to the messaging. The design gives the user context for understanding the messaging. Think:
  9. 9. TONE Keep in Mind: Colors fonts, uppercase/lowercase/ capitalize sharp & rounded edges animations & graphics
  10. 10. VOICE color
  11. 11. TONE FONTS general trends: Serif fonts – tradition, heritage, respectability and reliability Modern fonts – strength, dependability, sophistication Sans serif – cleanliness, simplicity, forward-thinking, reliability and honesty Script – elegance, femininity and/or creativity care must be taken to ensure legibility (not advised for main text) Serif v. sans-serif: Serif fonts are easier to read in printed works, but sans-serif are easier to read on the web because a screen has significantly lower resolution than books do. CHECK OUT:
  12. 12. On font sizing: 14px is standard, 16px is desirable: Taking reading distance into account (a user is typically sitting 20-23in from his/her screen) 16px text on a screen is roughly the same size as text printed in a magazine or book, which are often set at ~10pt fonts. Left: 16px text on a 24in screen, Right: 12pt text on a printed piece of paper
  13. 13. POSITIVE FEEDBACK These are the extras that add reassurance to the user: Responses to user interaction Complements on the users’ journey Confirmations Feedback: visual audio animated
  15. 15. Devices & Device Sizes Wearables, phones, fablets, tablets, laptops/desktops low-end windows smartphone: ~480px; Mainstream large screens: ~1680px Mind & account for differences in interaction using responsive design: navigation features, swiping vs. clicking, scrolling (vert/horizontal, modular), differing use of margins/navbars/icongraphy
  16. 16. Trending Complaint: CMS’s like Wordpress & Squarespace are mainstream, allowing people access to semi- customizable templates. Twitter Bootstrap offers easy-to-use components that works straight out of the box along with a readily accepted (and copied!) grid system EVERYTHING LOOKS THE SAME! (some people are sayin’ it. Stay creative! Like the old school: Space Jam website: