Top 10 Ways to Make Your Site More User-Friendly

aka Usability 101

Julie BlitzerUser Experience Designer

Organizing New YorkMarch 23, 2013

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

Who are you?

Raise your hand if your title is…

• Communications Director

• Director of New Media/Digital/Online

• IT (misnomer!)

• None of the above

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

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-

UX includes…

Usability Analysis

Business Strategy

Interaction Design

Content Strategy

User Research

Information Architecture

What UX/Usability is Not

Coding

“Making things pretty”/ visual design:

Project management

Product management

A panacea: It’s a symbiotic relationship.

Who am I?

User Experience Designer for over four years

Who am I?

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

Why you’re here….

1. Usability Testing2. Content Strategy3. It’s not all about the

home page4. Obvious Navigation5. The F-Pattern

6. Readability & Contrast

7. Carousels8. Form Layout9. Mobile/Responsive

Design10.The Forgotten pages

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

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.

1. Usability Testing

How?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

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

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?

2. Content Strategy

Kristina Halvorson’s book is great for those new to managing web contenthttp://contentstrategy.com

A sample content inventory or audit spreadsheet

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

4. Obvious Navigation

Simple page titles mean users can quickly find what they are looking for.

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.

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

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

6. Readability and Contrast

6. Readability and Contrast

Which one is easier to read?

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?

8. Form LayoutCan you find the submit

button?

Presenter’s note: This might just be one of the worst forms I’ve EVER seen.

8. Form Layout

Never put your form labels inside of the form fields.

Give your users enough space to type in the information and review what they entered.

Make buttons look clickable. (Don’t copy this one!)

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

8. Form LayoutGive the user a clear path to

completion

From Web Form Design: Filling in the Blanks by Luke Wroblewskihttp://www.flickr.com/photos/rosenfeldmedia/sets/72157604272550634/with/2367261684/

8. Form LayoutA long form that extends “below the fold” is completely acceptable.

Give your users r o o m t o b r e a t h e and the experience will be more pleasant for them and you. (They will be less likely to make mistakes!)

8. Form LayoutWant to really geek out on this stuff? The definitive book on this subject is Web Form Design: Filling in the Blanks by 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.

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.

9. Mobile/Responsive Design

or

9. Mobile/Responsive Design

http://mashable.com/2012/12/11/responsive-web-design/

10. The Forgotten Pages

The 404 Page

1.Make it fun/funny

2.Popular links

3.Contact Information

10. The Forgotten Pages

No Search Results Found

1.Did you mean…?

2.Popular Links

10. The Forgotten Pages

Past Events1.Tell the user

the event is over

2.Give users the opportunity to donate anyway.

3.Link to other events

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/

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/

Thanks!

How to follow up with me:

Twitter @zhuli

Contact form at http://julieblitzer.com

(Yes, I will email you back.)