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.

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. 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. 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. 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. 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. UX includes…
Interaction Design
Business Strategy
Usability Analysis
User Research
Content Strategy
Information Architecture

7. What UX/Usability is Not
Coding
“Making things pretty”/ visual design:
Project management
Product management
A panacea: It’s a symbiotic relationship.

8. Who am I?
User Experience Designer
for over four years

9. Who am I?
Started my career in NY politics at Citizens
Union, NY State Senate, an AG campaign and
for Rep. Jerry Nadler

10. Why you’re here….
1. Usability Testing
2. Content Strategy 6. Readability & Contrast
3. It’s not all about the 7. Carousels
home page 8. Form Layout
4. Obvious Navigation 9. Mobile/Responsive
5. The F-Pattern Design
10.The Forgotten pages

11. 1. Usability Testing
What?
Watch real users try (and often fail) to do
tasks on your website.
Sample tasks:
• Donate $10 to our organization
• Organize your own house party
• Sign up for our annual fundraiser

13. 1. Usability Testing
Why?
Nothing beats the real thing.
“Put yourself in someone else’s shoes.” only
gets you so far.
Validate (or repudiate) your assumptions and
discover some very interesting surprises.

14. 1. Usability Testing
How?
Recruit: ethnio, your membership list, craigslist
Plan: Write unbiased test tasks for your script
Record: Silverback, iOS Voice Memos, take notes
Analyze: Watch those recordings:
• What three things do you want to change?
• What surprised you most?
• What worked well?
Quantitative vs. Qualitative Usability Testing

15. 1. Usability Testing
“You can read it on a long airplane ride.”
- Steve Krug on Don’t Make Me Think

16. 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?

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

18. 3. It’s not all about the home page
Many users will
come to your site via
a secondary page:
• Event registration
• Donation form
• Press release
• Blog post

19. 4. Obvious Navigation
Simple page titles mean users can quickly find
what they are looking for.

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

21. 6. Readability & Contrast
Content has to be more than just a block of copy
– Large blocks of text work much better on paper
than they do on the screen
Proper 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

22. 6. Readability & Contrast
Readability, readability, ReAdAbILiTY
Pay attention to font size
White space
Let your text (( breathe )) and it will be easier
to read and understand
Contrast and Colors: make it readable first,
pretty second

23. 6. Readability and Contrast

24. 6. Readability and Contrast
Which one is
easier to read?

25. 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?

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

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

28. 8. Form Layout
Do NOT put radio buttons or check
boxes horizontally/on the same
row.

29. 8. Form Layout
Give the user a clear path to completion
From Web Form Design: Filling in the Blanks by Luke Wroblewski
http://www.flickr.com/photos/rosenfeldmedia/sets/72157604272550634/with/2367261684/

30. 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!)

31. 8. Form Layout
Want to really geek out on this stuff?
The definitive book on this subject is
Web Form Design: Filling in the
Blanksby Luke Wroblewski.
Also see Luke’s full blog archive:
http://www.lukew.com/ff/
He did hours of quantitative usability
testing to write this book. I refer to this
resource again and again and again.

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

33. 9. Mobile/Responsive Design
or

34. 9. Mobile/Responsive Design
http://mashable.com/2012/12/11/responsive-web-design/

35. 10. The Forgotten Pages
The 404 Page
1. Make it
fun/funny
2. Popular links
3. Contact
Information

36. 10. The Forgotten Pages
No Search
Results Found
1. Did you mean…?
2. Popular Links

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

38. 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/

39. 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/

40. Thanks!
How to follow up with me:
Twitter @zhuli
Contact form at http://julieblitzer.com
(Yes, I will email you back.)