Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Don't just build Pretty Websites! UX in the Real World

Don't just build Pretty Websites! UX in the Real World

WordCamp Philly 2014
Everybody’s talking about User Experience, but how can you release your inner UX mojo today to improve the usability and experience of your website? Time to share some practical, real-world examples and tips to boost your WordPress design skills. Don’t just build pretty websites, make smart design decisions and add UX best practices to your workflow. Ask smart questions like: Do I really need a large slider on my homepage? Are there clear nav menus and Calls-to-Action to guide my visitors? How does my site displays on other devices? A good UX job continues after launch. Use mad tools to analyze and improve your UX Design.

C3312856d17db180d7a470f44a065376?s=128

Sonja Leix

June 07, 2014
Tweet

More Decks by Sonja Leix

Other Decks in Design

Transcript

  1. WordCamp Philly 2014 Don’t just build Pretty Websites ~ UX

    in the Real World ~ by Sonja Leix
  2. Who am I? Sonja Leix New York based WordPress Front-End

    Designer Freelance Twitter: @sonjanyc www: sonjaleix.com
  3. What is UX?

  4. noun the overall experience of a person using a product

    such as a website or computer application, especially in terms of how easy or pleasing it is to use. "if a website degrades the user experience too much, people will simply stay away" us·er ex·pe·ri·ence
  5. –Steve Jobs “Design is not just what it looks like

    and feels like. Design is how it works.”
  6. Users & Goals

  7. What is the purpose or goal of your website? Is

    the message consistent?
  8. –Jakob Nielsen “Usability rules the Web. Simply stated, 
 if

    the customer can’t find a product, 
 then he or she will not buy it.”
  9. Do you know your users? What is your target audience?

  10. WHO are the users? WHAT are the activities they wish

    to perform? WHY do they want to use/buy our product? HOW does your product/service fit the context of their life? Create Personas
  11. Let’s call this (very simple) example persona: 
 Tech-Unsavvy Customer

    Support’s Worst Nightmare - He is not good with computers and very impatient - He prefers to talk to a real person when he has questions or a problem instead of doing research himself online We need to make our website very easy to use and navigate for him. Provide: effective CTAs, FAQs, user-friendly support forums and if all else fails a number or email to reach customer support.
  12. –Paul Boag “Users are not always logical, at least 


    not on the surface.To be a great designer you need to look a little deeper into 
 how people think and act.”
  13. Your client is often not 
 your target audience! Design

    for the User!
  14. Where do your users come from? Direct? Referrals? Social Media?

    Search?
  15. Where do your users land? Most likely not always on

    your homepage.
  16. How do your users interact with your site? Analyse existing

    site or make assumptions for new sites
  17. Layout & Structure

  18. Do you always use the same layout structure? Content /

    Sidebar Full-Width
  19. None
  20. None
  21. Guide your users! Provide useful, simplified navigation menus.

  22. None
  23. CTAs! Add effective Calls to Action to convert 
 and

    guide users!
  24. What the Fold? Place important information and CTAs 
 higher

    up on page!
  25. None
  26. Sliders?! Are your clients still asking for these 
 for

    every project, too?
  27. None
  28. Responsive Design, duh! for best User Experience across all devices

  29. None
  30. Beyond the Coat of Paint

  31. Site Speed Usability also depends on how fast your site

    is!
  32. Cross-Browser Compatibility Remember that day you put IE 7 to

    rest?!
  33. Accessibility Supports social inclusion for people with a diverse range

    of hearing, movement, sight, 
 and cognitive ability. http://make.wordpress.org/accessibility/useful-tools/
  34. –Tim Berners-Lee “The power of the Web is in it’s

    universality. Access by everyone regardless of disability is an essential aspect.”
  35. You’ve launched!

  36. None
  37. Time to relax?

  38. Uhm?! NOPE!

  39. After Launch: Analyse! Review your assumptions! Get user feedback! Iterate!

  40. –Alan Lewis “Failure comes when you don’t listen. 
 You

    can’t put something out there and assume it’s great. It’s up to us to make sure we’re listening to improve our chances 
 for success—if not this time, next time.”
  41. Analytics Tools Google Analytics Kissmetrics Crazyegg

  42. Google Analytics User Data

  43. Google Analytics User and Behavior Flows

  44. Google Analytics In-Page Analytics

  45. Question Everything! Iterate Often!

  46. 5 Key UX Questions 
 to ask before (and while)

    designing any website http://bit.ly/5UXQuestions
  47. Thank You! Questions? Sonja Leix Follow me: @sonjaleix sonjaleix.com