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.

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

    View Slide

  2. Who am I?
    Sonja Leix
    New York based
    WordPress Front-End Designer
    Freelance
    Twitter: @sonjanyc
    www: sonjaleix.com

    View Slide

  3. What is UX?

    View Slide

  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

    View Slide

  5. –Steve Jobs
    “Design is not just what it looks like and
    feels like. Design is how it works.”

    View Slide

  6. Users & Goals

    View Slide

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

    View Slide

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

    View Slide

  9. Do you know your
    users?
    What is your target audience?

    View Slide

  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

    View Slide

  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.

    View Slide

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

    View Slide

  13. Your client is often not 

    your target audience!
    Design for the User!

    View Slide

  14. Where do your
    users come from?
    Direct?
    Referrals?
    Social Media?
    Search?

    View Slide

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

    View Slide

  16. How do your users
    interact with your site?
    Analyse existing site
    or
    make assumptions for new sites

    View Slide

  17. Layout & Structure

    View Slide

  18. Do you always use the
    same layout structure?
    Content / Sidebar
    Full-Width

    View Slide

  19. View Slide

  20. View Slide

  21. Guide your users!
    Provide useful, simplified navigation menus.

    View Slide

  22. View Slide

  23. CTAs!
    Add effective Calls to Action to convert 

    and guide users!

    View Slide

  24. What the Fold?
    Place important information and CTAs 

    higher up on page!

    View Slide

  25. View Slide

  26. Sliders?!
    Are your clients still asking for these 

    for every project, too?

    View Slide

  27. View Slide

  28. Responsive
    Design, duh!
    for best User Experience across all devices

    View Slide

  29. View Slide

  30. Beyond the
    Coat of Paint

    View Slide

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

    View Slide

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

    View Slide

  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/

    View Slide

  34. –Tim Berners-Lee
    “The power of the Web is in it’s universality.
    Access by everyone regardless of disability
    is an essential aspect.”

    View Slide

  35. You’ve launched!

    View Slide

  36. View Slide

  37. Time to relax?

    View Slide

  38. Uhm?! NOPE!

    View Slide

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

    View Slide

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

    View Slide

  41. Analytics Tools
    Google Analytics
    Kissmetrics
    Crazyegg

    View Slide

  42. Google Analytics
    User Data

    View Slide

  43. Google Analytics
    User and Behavior Flows

    View Slide

  44. Google Analytics
    In-Page Analytics

    View Slide

  45. Question Everything!
    Iterate Often!

    View Slide

  46. 5 Key UX Questions 

    to ask before (and while)
    designing any website
    http://bit.ly/5UXQuestions

    View Slide

  47. Thank You!
    Questions?
    Sonja Leix
    Follow me: @sonjaleix
    sonjaleix.com

    View Slide