Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

10 Ways to Improve the User Experience of Your Wordpress Site

461 views

Published on

presentation by Sara Smith of Sapient Design at Santa Cruz Wordpress Meetup, Aug 21, 2013

Published in: Design, Technology, Business
  • Login to see the comments

10 Ways to Improve the User Experience of Your Wordpress Site

  1. 1. 10 Ways to Improve the User Experience of Your Wordpress Site Sara Smith Web Designer and UX Specialist
  2. 2. “UX is really just good marketing. It’s about knowing who your market is, knowing what is important to them, knowing why it is important to them, and designing accordingly.” Joshua Porter
  3. 3. Some principles to good design 1. Make your website easy to navigate 2. Format text to maximize readability 3. Don't make users wait 4. Keep your message simple and provide clear calls to action
  4. 4. P1 - Make your website easy to navigate Don’t Place navigation where it’s difficult to find Blend it in with the design Move the position of the menu around Use low contrast between background and font color Use ornate, difficult to read fonts
  5. 5. P1 - Make your website easy to navigate Do Keep main navigation to no more than 7 items Put navigation near the top of the page Keep the placement and appearance consistent on all pages Show users where they are by highlighting the active menu item Put menu items in a logical order
  6. 6. Fixing Nav problems in Wordpress Tip#1 - Move position of menu using Hooks Code and method are dependent on your theme or framework.
  7. 7. Fixing Nav problems in Wordpress Tip#2 - Style your menu good contrast between background and font Contrasting hover and current (active) menu item
  8. 8. Fixing Nav problems in Wordpress Tip#3 - Use Appearance > Menus in WP to create custom menus and change default order of items
  9. 9. P2 - Format text to maximize readability Don’t Center large quantities of text Don’t go crazy with the fonts – 2 max Have odd gaps between paragraphs Mix center, right, and left alignment Put text all in same color unless you vary size and weight of headings, sub- headings, etc.
  10. 10. P2 - Format text to maximize readability Do Use sans-serif fonts for body text Use a consistent color/style for links Clean up text when pasting from another source Visually break up long passages with pull- out quotes, bullets, highlighting, etc. Create a visual hierarchy for headings, sub- headings, etc. Use color for emphasis, but keep most text in black/gray
  11. 11. Text formatting tips in Wordpress Tip#4 - Look to see if your theme settings allow you to set font styles Or Install a typography plugin Google Typography WP Google Fonts
  12. 12. Text formatting tips in Wordpress Apply headings in the Page/Posts editor
  13. 13. Text formatting tips in Wordpress Tip#5 - Make use of shortcodes for styling text
  14. 14. Text formatting tips in Wordpress Look to see if your theme has options for inserting shortcodes Or Install a shortcodes plugin Wordpress Shortcodes Symple Shortcodes
  15. 15. Text formatting tips in Wordpress Tip#6 - Use custom post types when you will have blocks of text in a repeating style Examples:  Testimonials  Address List  Product List DEMO – Plugin: Quotes Collection
  16. 16. P3. Don't make users wait How does page load time impact UX? Consider these statistics:  47% of consumers expect a web page to load in 2 seconds or less.  40% of people abandon a website that takes more than 3 seconds to load.  A 1 second delay in page response can result in a 7% reduction in conversions.  75% of users will leave after a 4 second delay Source: Akamai, 2009
  17. 17. P3. Don't make users wait What factors contribute to page load time? Bulky, code heavy themes Large image sizes Lots of Javascript Inefficient CSS Website hosting Lots of redirects
  18. 18. P3. Don't make users wait How can you test the speed of your website? Tools.pingdom.com
  19. 19. P3. Don't make users wait How can you test the speed of your website? http://developers.google.com/speed/pagespeed/insight s/
  20. 20. Page speed tips in Wordpress Tip#7 – Resize your images automatically to use less memory (or do it manually before uploading). Plugin: Auto Image Resizer or similar
  21. 21. Page speed tips in Wordpress Tip#8 – Condense your CSS and javascripts using a minification plugin Tip#9 – Use a caching plugin to increase server performance Plugin: W3 Total Cache (does both)
  22. 22. Page speed tips in Wordpress Plugin: W3 Total Cache (does both) Before: function toggleImage(id){ if (document.getElementById(id).src.indexOf("1.png") > -1){ document.getElementById(id).src = document.getElementById » (id).src.replace("1.png", "2.png"); } } After: function toggleImage(a){ if(document.getElementById(a).src.indexOf » ("1.png")>- 1){document.getElementById(a).src=document.getElementBy » Id(a).src.replace("1.png","2.png")}};
  23. 23. Page speed tips in Wordpress Tip#10 – Clean out your database Plugin: WP Optimize
  24. 24. P4 - Keep your message simple and provide clear calls to action Only 28% of website text is read Source: Nielsen Norman Group
  25. 25. P4 - Keep your message simple and provide clear calls to action People tend to focus on F shaped areas of the page according to eye-tracking studies Source: Nielsen Norman Group
  26. 26. Messaging tips in Wordpress Bonus Tip – Put only excerpts on top level pages with short descriptions – then link to more information. Many themes come with predefined sections.
  27. 27. Messaging tips in Wordpress Bonus Tip – Put your most important information on the top and left of your page (if in US where we read left to right). Bonus Tip – Use a Word Counting tool (like in Google Docs or Word) to see how long your text is. Then reduce it by 50%
  28. 28. Good Design in Wordpress In Summary: 1.Make your website easy to navigate 2. Format text to maximize readability 3. Don't make users wait 4. Keep your message simple and provide clear calls to action
  29. 29. Thank you! sara@sapientdesign.net @slorien http://www.sapientdesign.net

×