Top 10 Ways to Make Your Site More User-Friendly

1,845 views

Published on

The screenshot on Slide #12 is a usability testing app called Silverback: http://silverbackapp.com/

Did you know that moving a button on your website a few pixels or putting your form labels in a different place can increase the number of times users sign petitions, join your email list or donate on your site by 25 or even 50%? Learn about quick fixes for your organization's website that will make sure your site's design is amplifying your message rather than getting in the way. This session will also include an introduction to user experience design and usability testing methodology-- proven means for making your site more visitor friendly.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,845
On SlideShare
0
From Embeds
0
Number of Embeds
102
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Always take paper notes in case the recording tools fail, because trust me, they always will. And it’s always that one day you chose not to take notes.
  • Read sample chapters online at sensible.com
  • Try using your iPhone or iPad to type in Hebrew. It will turn your understanding of digital interfaces upside down (or rather, flip horizontally).
  • Could your mother or grandmother fill this out? Imagine them struggling with it!
  • Top 10 Ways to Make Your Site More User-Friendly

    1. 1. Top 10 Ways to Make Your Site More User-Friendly aka Usability 101 Organizing New York March 23, 2013 Julie Blitzer User Experience Designer
    2. 2. Who are you?Raise your hand if you…• Work for a labor organization• Work for a non-profit• Work for a candidate or elected official• None of the above
    3. 3. Who are you?Raise your hand if your title is…• Communications Director• Director of New Media/Digital/Online• IT (misnomer!)• None of the above
    4. 4. How familiar are you with UX & usability?• User Experience aka “UX”• Usability testing• Information Architecture (IA)• Persona• SEO• Wireframe• Quality Assurance (QA)• A/B and Multivariate Testing
    5. 5. What is User Experience?Stephen P. Anderson, “The Fundamentals of Experience Design”http://www.poetpainter.com/thoughts/article/ia-summit-2009-the-fundamentals-of-experience-design-
    6. 6. UX includes… Interaction DesignBusiness Strategy Usability Analysis User Research Content Strategy Information Architecture
    7. 7. What UX/Usability is NotCoding“Making things pretty”/ visual design:Project managementProduct managementA panacea: It’s a symbiotic relationship.
    8. 8. Who am I?User Experience Designer for over four years
    9. 9. Who am I?Started my career in NY politics at CitizensUnion, NY State Senate, an AG campaign andfor Rep. Jerry Nadler
    10. 10. Why you’re here….1. Usability Testing2. Content Strategy 6. Readability & Contrast3. It’s not all about the 7. Carousels home page 8. Form Layout4. Obvious Navigation 9. Mobile/Responsive5. The F-Pattern Design 10.The Forgotten pages
    11. 11. 1. Usability TestingWhat?Watch real users try (and often fail) to dotasks on your website.Sample tasks: • Donate $10 to our organization • Organize your own house party • Sign up for our annual fundraiser
    12. 12. 1. Usability TestingWhy?Nothing beats the real thing.“Put yourself in someone else’s shoes.” onlygets you so far.Validate (or repudiate) your assumptions anddiscover some very interesting surprises.
    13. 13. 1. Usability TestingHow?Recruit: ethnio, your membership list, craigslistPlan: Write unbiased test tasks for your scriptRecord: Silverback, iOS Voice Memos, take notesAnalyze: Watch those recordings: • What three things do you want to change? • What surprised you most? • What worked well?Quantitative vs. Qualitative Usability Testing
    14. 14. 1. Usability Testing “You can read it on a long airplane ride.” - Steve Krug on Don’t Make Me Think
    15. 15. 2. Content Strategy• New site: Plan around the content• Current site or redesign: Audit for R-O-T• Who is going to own content creation?• How much can you really commit to doing?• What content most relates to your organization’s goals?• What do your users want?
    16. 16. 2. Content Strategy Kristina Halvorson’s book is great for those new to managing web content http://contentstrategy.com A sample content inventory or audit spreadsheet
    17. 17. 3. It’s not all about the home pageMany users willcome to your site viaa secondary page:• Event registration• Donation form• Press release• Blog post
    18. 18. 4. Obvious NavigationSimple page titles mean users can quickly findwhat they are looking for.
    19. 19. 5. The F-Pattern*Exception: If the content is written in (or read by speakers of) a right-to-left language such as Hebrew or Arabic.
    20. 20. 6. Readability & ContrastContent has to be more than just a block of copy – Large blocks of text work much better on paper than they do on the screenProper use of headers and line breaks • A clean style sheet works magic • Help users quickly identify which content is significant • Don’t over use bold, it’s as bad as writing in all caps
    21. 21. 6. Readability & ContrastReadability, readability, ReAdAbILiTYPay attention to font sizeWhite spaceLet your text (( breathe )) and it will be easier to read and understandContrast and Colors: make it readable first, pretty second
    22. 22. 6. Readability and Contrast
    23. 23. 6. Readability and Contrast Which one is easier to read?
    24. 24. 7. Carousels• Allow user to play/pause• Don’t skip to the next story or image too fast!• How many clicks do you actually get from links in a carousel?
    25. 25. 8. Form Layout Can you find the submit button?Presenter’s note: This might just be one of the worst forms I’ve EVER seen.
    26. 26. 8. Form Layout Give your users enough space to type in the information and review what they entered.Make buttons look clickable. Never put your form labels(Don’t copy this one!) inside of the form fields.
    27. 27. 8. Form Layout Do NOT put radio buttons or check boxes horizontally/on the same row.
    28. 28. 8. Form Layout Give the user a clear path to completionFrom Web Form Design: Filling in the Blanks by Luke Wroblewskihttp://www.flickr.com/photos/rosenfeldmedia/sets/72157604272550634/with/2367261684/
    29. 29. 8. Form Layout A long form that extends “below the fold” is completely acceptable. Give your users room tobre a theand the experience will be more pleasant for them and you. (They will be less likely to make mistakes!)
    30. 30. 8. Form LayoutWant to really geek out on this stuff?The definitive book on this subject isWeb Form Design: Filling in theBlanksby Luke Wroblewski.Also see Luke’s full blog archive:http://www.lukew.com/ff/He did hours of quantitative usabilitytesting to write this book. I refer to thisresource again and again and again.
    31. 31. 9. Mobile/Responsive Design• How many of your site visits come from mobile devices?• Native app vs. mobile site vs. hybrid• Avoid flash video:Use HTML5 instead.
    32. 32. 9. Mobile/Responsive Design or
    33. 33. 9. Mobile/Responsive Designhttp://mashable.com/2012/12/11/responsive-web-design/
    34. 34. 10. The Forgotten PagesThe 404 Page1. Make it fun/funny2. Popular links3. Contact Information
    35. 35. 10. The Forgotten Pages No Search Results Found 1. Did you mean…? 2. Popular Links
    36. 36. 10. The Forgotten Pages Past Events 1. Tell the user the event is over 2. Give users the opportunity to donate anyway. 3. Link to other events
    37. 37. Additional Resources• My incomplete UX book list: http://t.co/KNZ18uvgYO• Usability test recording: http://silverbackapp.com• Prototyping tool: http://invisionapp.com• Whitney Hess’s book list: http://whitneyhess.com/blog/2009/06/30/so -you-wanna-be-a-user-experience-designer-step- 1-resources/
    38. 38. Additional Resources• http://www.uxbooth.com/blog/complete-beginners-guide-to-design-research/• http://www.uxbooth.com/blog/leveraging-user-research-for-more-effective- feature-prioritization/• http://www.uxbooth.com/blog/better-experimental-design-for-better-user- testing/• http://uxmag.com/articles/five-ux-research-pitfalls• http://uxmag.com/articles/usability-testing-includes-users-as-stakeholders• http://uxmag.com/articles/paying-attention-the-most-valuable-skill-in-ux- research• http://www.optimalusability.com/2012/01/10-tips-for-mobile-usability- testing/• http://www.optimalusability.com/2012/05/how-to-put-the-real-in-realistic- user-testing-10-tips/
    39. 39. Thanks!How to follow up with me: Twitter @zhuli Contact form at http://julieblitzer.com (Yes, I will email you back.)

    ×