SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLYJulie BlitzerUser Experience Consultant

START 14-DAY FREE TRIAL

GET THE FULL EXPERIENCE:LEARN WHAT YOU WANT, WHEN YOU WANT

Unlimited access to all upcoming live streamsOn-demand streaming classes taught by toppractitionersA growing video library, updated weekly

Get access for only $25 USD/month.No risk—you can cancel at any time!

INTRODUCTION

‣ 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)

JULIE BLITZER

Stephen P. Anderson, “The Fundamentals of Experience Design”http://www.poetpainter.com/thoughts/article/ia-summit-2009-the-fundamentals-of-experience-design-

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

WHAT IS USER EXPERIENCE?

PEOPLE ACTIVITIESCONTEXT

Who makes it possible

What’s going on with you

Where it takes place

What you doWho you are

Why you do it

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

UX INCLUDES…

Business Strategy Interaction Design

Usability Analysis User Research

Content Strategy Information Architecture

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

UX INCLUDES…

Business Strategy Interaction Design

Usability Analysis User Research

Content Strategy Information Architecture

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

JUST THE UX PROCESS

Prototype Validate internally

Test externally

Learn from user behavior

IterateConcept

‣Coding‣“Making things pretty”/ visual design‣Project management‣Product management‣A panacea: It’s a symbiotic relationship

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

WHAT UX / USABILITY IS NOT

1.It’s not all about the home page2.Obvious Navigation3.The F-Pattern4.Readability & Contrast5.Form Layout6.The Forgotten pages

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

WHY YOU’RE HERE…

Many users will come to your site via a secondary page:‣Product page‣Event registration‣Blog Post‣Donation Form

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

1. IT’S NOT ALL ABOUT THE HOME PAGE

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

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

2. OBVIOUS NAVIGATION

*Exception: If the content is written in (or read by speakers of) a right-to-left language such as Hebrew or Arabic.

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.

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

3. THE F-PATTERN

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

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

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

4. READABILITY AND CONTRAST

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

4. READABILITY AND CONTRAST

Which one is easier to read?

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

4. READABILITY AND CONTRAST

Can you find the submit button?

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

5. FORM LAYOUT

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

5. FORM LAYOUT

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

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.

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.

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

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

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

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.

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

5. FORM LAYOUT

The 404 Page1.Make it fun / funny2.Popular links3.Contact Information

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

6. THE FORGOTTEN PAGES

No Search Results Found1.Did you mean…?2.Popular Links

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

6. THE FORGOTTEN PAGES

Past Events1.Tell the user the event is over2.Give users the opportunity to

donate anyway3.Link to other events

SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY

6. THE FORGOTTEN PAGES

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