The design of your website has implications for what your users can do. In the end, it can influence whether a user buys your product. Learn six basic UX design strategies that can help amplify your website’s message. After this class, you’ll be able to think about a range of design issues — from readability and contrast to the layout of your forms.

1. SIX UX STRATEGIES
TO MAKE YOUR SITE
MORE USER-FRIENDLY
Julie Blitzer
User Experience Consultant

2. GET THE FULL EXPERIENCE:
LEARN WHAT YOU WANT,
WHEN YOU WANT
Unlimited access to all upcoming live streams
On-demand streaming classes taught by top
practitioners
A growing video library, updated weekly
Get access for only $25 USD/month.
No risk—you can cancel at any time!
START 14-DAY FREE TRIAL

3. INTRODUCTION
JULIE BLITZER
‣ Independent User Experience Consultant for digital agencies, startups and
technology companies
‣ Previously UX Designer for Joor, AppNexus and UX Lead for Advomatic
‣ Instructor and mentor for Girls Who Code and Startup Weekend NYC
‣ Speaking appearances at SXSW Interactive, Netroots Nation, IPDI
(Institute for Politics, Democracy and the Internet)

4. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
WHAT IS USER EXPERIENCE?
Who makes
it possible
What you do
Who you are
PEOPLE
CONTEXT
ACTIVITIES
Why you do it
What’s going
on with you
Stephen P Anderson, “The Fundamentals of Experience Design”
.
http://www.poetpainter.com/thoughts/article/ia-summit-2009-the-fundamentals-of-experience-design-
Where it
takes place

5. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
UX INCLUDES…
Business Strategy
Interaction Design
Usability Analysis
User Research
Content Strategy
Information Architecture

6. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
UX INCLUDES…
Business Strategy
Interaction Design
Usability Analysis
User Research
Content Strategy
Information Architecture

7. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
JUST THE UX PROCESS
Concept
Prototype
Validate
internally
Test
externally
Learn from user
behavior
Iterate

8. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
WHAT UX / USABILITY IS NOT
‣ Coding
‣ “Making things pretty”/ visual design
‣ Project management
‣ Product management
‣ A panacea: It’s a symbiotic relationship

9. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
WHY YOU’RE HERE…
1. It’s not all about the home page
2. Obvious Navigation
3. The F-Pattern
4. Readability & Contrast
5. Form Layout
6. The Forgotten pages

10. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
1. IT’S NOT ALL ABOUT THE HOME PAGE
Many users will come to your site
via a secondary page:
‣ Product page
‣ Event registration
‣ Blog Post
‣ Donation Form

11. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
2. OBVIOUS NAVIGATION
Simple page titles mean users can quickly find what they are looking for.

12. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
3. 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.

13. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
3. 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.

14. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
4. READABILITY AND 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

15. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
4. READABILITY AND 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

16. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
4. READABILITY AND CONTRAST

17. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
4. READABILITY AND CONTRAST
Which one is easier to read?

18. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
5. FORM LAYOUT
Can you find the submit button?

19. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
5. FORM LAYOUT
Give your users enough space
to type in the information and
review what they entered.
Make buttons look clickable.
(Don’t copy this one!)
Never put your form labels
inside of the form fields.

20. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
5. FORM LAYOUT
Do NOT put radio buttons or check boxes horizontally / on the same row.

21. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
5. 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/

22. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
5. FORM LAYOUT
A long form that extends
“below the fold” is completely
acceptable.
Give your users room
to breathe and the experience
will be more pleasant for them
and you. (They will be less
likely to make mistakes!)

23. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
5. FORM LAYOUT
Want 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.

24. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
6. THE FORGOTTEN PAGES
The 404 Page
1. Make it fun / funny
2. Popular links
3. Contact Information

25. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
6. THE FORGOTTEN PAGES
No Search Results Found
1. Did you mean…?
2. Popular Links

26. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
6. 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

27. SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
THANKS!
How to follow up with me:
‣ Twitter @zhuli
‣ Contact form at http://julieblitzer.com
(Yes, I will email you back.)