Upload
general-assembly
View
1.114
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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.)