Successfully reported this slideshow.

Better User Experience for WordPress Sites

8

Share

Loading in …3
×
1 of 113
1 of 113

Better User Experience for WordPress Sites

8

Share

Download to read offline

An introduction to a handful of universal principles of User Experience (UX) design with tips on how to implement them on a WordPress site. Many of the ideas are easy to implement and will be useful for any site really - large or small, wordpress or not.

Presented to the WordPress Geneva group on April 23, 2013. Thanks & enjoy!

An introduction to a handful of universal principles of User Experience (UX) design with tips on how to implement them on a WordPress site. Many of the ideas are easy to implement and will be useful for any site really - large or small, wordpress or not.

Presented to the WordPress Geneva group on April 23, 2013. Thanks & enjoy!

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Better User Experience for WordPress Sites

  1. 1. Better User Experience for WordPress sites WordPress Geneva | April 23, 2013 @AdamUngstad
  2. 2. • Senior Information Architect, Province of British Columbia (Canada) • UX Specialist, Province of British Columbia (Canada) • Independent UX Consultant • WordPress Developer • Author & Publisher Adam Ungstad
  3. 3. 2012, 2013 EuroIA - Edinburgh Sept 26-28 WordCamp Victoria 2012 UX Romandie April 2013
  4. 4. User Experience
  5. 5. User Experience is… “the way a person feels about using a product, system or service.” - Wikipedia
  6. 6. “a person's perceptions and responses that result from the use or anticipated use of a product, system or service” - International Standards Organization User Experience is…
  7. 7. “how a person feels when interfacing with a system.” -Smashing Magazine User Experience is…
  8. 8. www.jjg.net/elements/pdf/elements.pdf
  9. 9. http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/
  10. 10. http://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.html
  11. 11. Source: http://www.flickr.com/photos/curtisperry/57104815/sizes/z/in/photostream/
  12. 12. Source: http://www.flickr.com/photos/khalid-
  13. 13. Good UX Helps Users... • Find what they came for • Complete tasks quickly • Understand primary content • Discover related content • Navigate across channels • Recall content later • Feel that they got what they came for
  14. 14. A Few UX Methods • Content Inventory • Card Sorting • Contextual Inquiry • Diary Studies • Personas • Scenarios • Co-Design Studios • A / B Testing
  15. 15. A Few UX Deliverables • Site Maps • Wireframes • Wireflows • Storyboards • Journey maps • Functional Specifications • Prototypes • Design Guidelines
  16. 16. UX takes a lot of work! But there are some ‘universal’ principles and patterns.
  17. 17. Q: What is the most important page on your site?
  18. 18. Q: What is the most important page on your site? A: Whatever page the user lands on.
  19. 19. Source: http://en.wikipedia.org/wiki/Main_Page Ever seen this before?
  20. 20. Navigation 4 Types: 1. Primary (menus) 2. Secondary (tags, breadcrumb, footer) 3. Inline (content) 4. Search
  21. 21. Vertical • Static Primary Navigation
  22. 22. Primary Navigation Vertical • Accordion
  23. 23. Primary Navigation Vertical • Flyouts
  24. 24. Primary Navigation Horizontal • Static
  25. 25. Primary Navigation Source: Horizontal • Dropdowns
  26. 26. Primary Navigation Horizontal • Flyouts
  27. 27. Primary Navigation Horizontal • Mega- Dropdowns
  28. 28. Primary Navigation Horizontal • Tabs
  29. 29. Static is generally best
  30. 30. Flyouts obscure content & are difficult to use with a mouse
  31. 31. Use an accordion or If you need 2 levels...
  32. 32. Use Tabs If you need 2 levels...
  33. 33. Secondary Navigation Supports Primary Navigation: • Tags • Breadcrumbs • Related Posts • Footers
  34. 34. Categories Primary Topics
  35. 35. Tags Secondary Topics
  36. 36. Tags Use Tags to: • Link content across categories • Create an index • Help users discover what they didn’t know they were looking for...
  37. 37. Secondary Navigation Breadcrumbs Tell users • where they are • what’s around them 1 2 3 4
  38. 38. Secondary Navigation 1 2 3 4 Breadcrumbs Use them only if: • You have highly structured, layered, deep hierarchical content.
  39. 39. Secondary Navigation Footers.... don’t hold back. Mega footers are a good thing.
  40. 40. Source: www.theglobeandmail.com
  41. 41. Source: www.lynda.com
  42. 42. Inline Navigation
  43. 43. Source: www.apple.com
  44. 44. Source: www.amazon.ca
  45. 45. Source: www.theglobeandmail.com
  46. 46. Q: What type of navigation do users use most? a) Primary b) Secondary c) Inline
  47. 47. Q: What type of navigation do users use most? a) Primary b) Secondary c) Inline
  48. 48. Making the most of inline navigation…
  49. 49. “Store hours are Monday 9 – 5 PM, Tuesday 9-6 PM, Wednesdays closed, Thursdays 9-9PM, Fridays 9-5PM Saturdays 10-5 PM, Sundays 12- 4PM” Use tables to help users scan content
  50. 50. Use tables to help users scan content
  51. 51. Use tables to help users scan content You use tables in MS Word all the time...
  52. 52. The standard WP Editor doesn’t support tables, but you don’t have to use HTML... Use tables to help users scan content
  53. 53. Two options: 1. Change your editor (get CK Editor plugin), or Use tables to help users scan content
  54. 54. Or: 2. Use an offline editor such as Windows Live Editor or Mars Edit Use tables to help users scan content
  55. 55. Don’t Expect, Suggest. v Your Post Related Posts
  56. 56. Search
  57. 57. Use Columns
  58. 58. Use Columns
  59. 59. Ouch!
  60. 60. 3 is the magic number...
  61. 61. 1 2 3
  62. 62. 1 2 3
  63. 63. 1 2 3
  64. 64. Use Contrast Using contrast is a good thing. It helps people to read your content. Using contrast is a good thing. It helps people to read your content. Using contrast is a good thing. It helps people to read your content.
  65. 65. Default shapes for thumbnails are square: Image Gallery Thumbnails
  66. 66. But think about the things you look at all day: • Your Computer Monitor • Your TV • Your SmartPhone • Your Photographs • The windshield on your car Image Gallery Thumbnails
  67. 67. Yes, they are all rectangles.
  68. 68. Image Gallery Thumbnails
  69. 69. It’s easy to change the size of the thumbnails for your galleries...
  70. 70. Settings  Media  Thumbnail Size
  71. 71. NOTE: this setting only applies to photos added after the setting is changed
  72. 72. Q: What is the easiest way to make your site look good?
  73. 73. Q: What is the easiest way to make your site look good? A: Let other people do the work for you.
  74. 74. This doesn’t mean you should hire expensive: • graphic designers • photographers • flash developers • UX Designers (well, maybe UX designers... ;-) Don’t re-invent the wheel
  75. 75. You bought a premium theme for $30. For a couple dollars more you can buy: • fancy sliders • icons & backgrounds • stock photos • Responsive plugins • anything you need really! Don’t re-invent the wheel
  76. 76. Spend $20, get that responsive jquery slider, and impress your users like you want to. Spend $3, and get the background you want so you can stop trying to design it yourself. You have content to write! Don’t re-invent the wheel
  77. 77. activeden.com
  78. 78. wpplugins.com
  79. 79. photodune.com
  80. 80. compfight.com
  81. 81. • Comfight lets you search Flickr with specific criteria on usage rights (IE Creative Commons). • Need a picture of a garden to go with your post? Try compfight. Give credit where it is due. compfight.com
  82. 82. • Metacontent • Readability • Contact on every page • Fonts Content
  83. 83. The excerpt…. Not just for search results! Metadata
  84. 84. The excerpt appears when your post is shared on social networks. Metadata
  85. 85. Always, Always, Always... 1. Have a relevant image with your post. 2. Write a good excerpt. Metadata
  86. 86. Readability is more than “write at a grade 8 reading level” Readability
  87. 87. Use Active / Positive Tense. Change these sentences: • Geneva is not a large city • I don’t like the cold • WordPress does not cost a lot of money Readability
  88. 88. Use Active / Positive Tense. Change these sentences: • Geneva is not a large city Geneva is a small city • I don’t like the cold I like the heat • WordPress does not cost a lot of money WordPress is affordable Readability
  89. 89. Talk about what things are, not about what they aren’t.
  90. 90. Use white space: • Small paragraphs • Small column widths • Bullet points, numbered lists • Subheaders • Tables Readability
  91. 91. Good typography is like new paint for the walls of your living room... It is: • inexpensive, • easy, and • it makes you look good. Typography
  92. 92. The easiest way to use good fonts on your site is to use an online service.
  93. 93. • You (usually) pay a small fee • You drop some code into your header • You can use all kinds of cool fonts. • Don’t go too crazy however. Arial is fine for the body of your posts! Online Font Services
  94. 94. google.com/webfonts
  95. 95. typekit.com
  96. 96. fontsquirrel.com
  97. 97. Put it on every page. • Good for findability • Good for SEO • Builds trust Contact Information
  98. 98. This doesn’t mean put a link to your “contact us” form. If you have an address or phone number, put it on each page. Then people know you are real. Contact Information
  99. 99. • Scrolling vs Clicking • Calls to Action • Responsive Design • The Last Word Miscellaneous
  100. 100. Scrolling is better because: • It is faster • Requires less effort • Doesn’t load new pages • Mouse wheels and swipes Scrolling vs Clicking
  101. 101. No one uses scroll bars anymore, because we have mouse wheels and swipes. Don’t be afraid of long pages. Scrolling vs Clicking
  102. 102. • Use High Contrast • Consider bundling products • Place them before and after the fold • Don’t interrupt a sequential process Calls to Action
  103. 103. Get a Responsive theme, especially if you are using social media. Don’t worry if your home page looks weird with it... chances are no one will see the home page anyways. Responsive Design
  104. 104. The Last Word...
  105. 105. • Awesome • Important • Engaging • Critical • Time consuming.... User Experience is….
  106. 106. But don’t forget...
  107. 107. Content is still king.
  108. 108. Thank you! @AdamUngstad

Editor's Notes

  • The Elements of User Experience Design by Jesse James Garrett
  • TheBoersma T-Model
  • User Experience adds value to products and services.
  • ×