six ux strategies to make your site more user-friendly: julie blitzer/general assembly
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.TRANSCRIPT
![Page 1: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/1.jpg)
SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLYJulie BlitzerUser Experience Consultant
![Page 2: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/2.jpg)
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!
![Page 3: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/3.jpg)
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
![Page 4: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/4.jpg)
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
![Page 5: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/5.jpg)
SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
UX INCLUDES…
Business Strategy Interaction Design
Usability Analysis User Research
Content Strategy Information Architecture
![Page 6: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/6.jpg)
SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
UX INCLUDES…
Business Strategy Interaction Design
Usability Analysis User Research
Content Strategy Information Architecture
![Page 7: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/7.jpg)
SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
JUST THE UX PROCESS
Prototype Validate internally
Test externally
Learn from user behavior
IterateConcept
![Page 8: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/8.jpg)
‣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
![Page 9: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/9.jpg)
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…
![Page 10: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/10.jpg)
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
![Page 11: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/11.jpg)
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
![Page 12: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/12.jpg)
*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
![Page 13: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/13.jpg)
*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
![Page 14: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/14.jpg)
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
![Page 15: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/15.jpg)
‣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
![Page 16: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/16.jpg)
SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
4. READABILITY AND CONTRAST
![Page 17: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/17.jpg)
Which one is easier to read?
SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
4. READABILITY AND CONTRAST
![Page 18: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/18.jpg)
Can you find the submit button?
SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
5. FORM LAYOUT
![Page 19: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/19.jpg)
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.
![Page 20: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/20.jpg)
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.
![Page 21: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/21.jpg)
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/
![Page 22: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/22.jpg)
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!)
![Page 23: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/23.jpg)
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
![Page 24: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/24.jpg)
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
![Page 25: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/25.jpg)
No Search Results Found1.Did you mean…?2.Popular Links
SIX UX STRATEGIES TO MAKE YOUR SITE MORE USER-FRIENDLY
6. THE FORGOTTEN PAGES
![Page 26: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/26.jpg)
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
![Page 27: Six UX Strategies to Make Your Site More User-Friendly: Julie Blitzer/General Assembly](https://reader034.vdocuments.us/reader034/viewer/2022051816/5455c7a1af795994188b4abc/html5/thumbnails/27.jpg)
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.)