EasyUser Experience Improvements    for yourWordPress Site  @AdamUngstad                 @AdamUngstad
About Me• In various IT roles for 10 years• Photographer• Writer – Poetry & Non-Fiction• Freelance WordPress work in  2011...
Living Water Smart              @AdamUngstad
What is User Experience?“the way a person feels about    using a product, system          or service.”                    ...
What is User Experience? "a persons perceptions and  responses that result from the use or anticipated use of     a produc...
What is User Experience? “how a person feels when interfacing with a system.”      - Smashing Magazine                    ...
The Original ElementsSource: www.jjg.net/elements/pdf/elements.pdf   @AdamUngstad
The Boersma T-modelSource:   http://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.html   @AdamUngstad
Source:   http://www.flickr.com/photos/curtisperry/57104815/sizes/z/in/photostream/   @AdamUngstad
Source:   http://www.flickr.com/photos/khalid-   @AdamUngstad
UserExperience   adds  VALUE             @AdamUngstad
Good UX Helps Users...• Find what they came for• Discover related content• Complete tasks quicker• Understand content• Nav...
UX Deliverables• User Research / Testing• Personas, Use Cases• Wireframes• Prototypes• Journey Maps                       ...
Easy UX for WordPress        • Navigation        • Visual Elements        • Content        • Miscellaneous                ...
Q: What is   the mostimportant page on your site?            @AdamUngstad
A: Whatever page the   user lands on.Most users arrive at a page withina site, rather than the home page.                 ...
Ever seen this before?Source:   http://en.wikipedia.org/wiki/Main_Page   @AdamUngstad
Navigation4 Types:  1. Primary (menus)  2. Secondary (tags, breadcrumb, footer)  3. Inline (content)  4. Search           ...
Primary NavigationVertical • Static                @AdamUngstad
Primary NavigationVertical • Accordion                @AdamUngstad
Primary NavigationVertical • Flyouts                @AdamUngstad
Primary NavigationHorizontal • Static                @AdamUngstad
Primary Navigation   Horizontal          • DropdownsSource:                 @AdamUngstad
Primary NavigationHorizontal • Flyouts                @AdamUngstad
Primary NavigationHorizontal • Mega-Dropdowns                    @AdamUngstad
Primary NavigationHorizontal • Tabs                @AdamUngstad
Static is generally best                  @AdamUngstad
Flyouts obscure content                 @AdamUngstad
If you need 2 levels...       Use an accordion             or                          @AdamUngstad
If you need 2 levels...         Use Tabs                    @AdamUngstad
Secondary NavigationSupporting Primary Navigation:  • Tags  • Breadcrumbs  • Footers                        @AdamUngstad
Secondary NavigationCategories        TagsPrimary Subject   Secondary Subject                            @AdamUngstad
Secondary NavigationUse Tags to: • Link content across categories • Create an index • Help users discover what they   didn...
Secondary NavigationBreadcrumbs      1       2    3       4Tell users  • where they are  • what’s around them             ...
Secondary NavigationBreadcrumbs      1       2      3       4Use them only if: • You have highly structured,   layered, hi...
Secondary NavigationFooters....don’t holdback.Mega footers area good thing.                   @AdamUngstad
Source: www.theglobeandmail.com   @AdamUngstad
Source: www.lynda.com   @AdamUngstad
Inline Navigation              @AdamUngstad
Source: www.apple.com   @AdamUngstad
Source: www.amazon.ca   @AdamUngstad
Source: www.theglobeandmail.com   @AdamUngstad
Q: What do users   use most?a) Primaryb) Secondaryc) Inline               @AdamUngstad
Q: What do users   use most?a) Primaryb) Secondaryc) Inline               @AdamUngstad
EasyInline Navigation     on Your  Home Page....              @AdamUngstad
1) Create a Sticky Post                 @AdamUngstad
2) Use Tables for layoutYou use tables in MS Word all the time...                               @AdamUngstad
2) Use Tables for layoutThe standard WP editor doesn’t supporttables, but you don’t have to use HTML...                   ...
2) Use Tables for layoutTwo options:1. Change your editor   (get Ultimate Tiny MCE   plugin), or2. Use an offline editor s...
Don’t Expect, Suggest.     Your Post                 v      Related Posts                      @AdamUngstad
Search         @AdamUngstad
Next up....  • Navigation  • Visual Elements  • Content  • Miscellaneous              @AdamUngstad
Visual Elements• Columns• Contrast• The Magic Number• Thumbnails• Fonts                     @AdamUngstad
Use Columns          @AdamUngstad
Use Columns          @AdamUngstad
Ouch!        @AdamUngstad
@AdamUngstad
3 Is the magic number...                  @AdamUngstad
@AdamUngstad
1   2     3        @AdamUngstad
@AdamUngstad
1   2   3        @AdamUngstad
@AdamUngstad
1   2   3        @AdamUngstad
ContrastUsing contrast is a good thing. Ithelps people to read your content.Not everyone sees as well as you do.Using cont...
Gallery ThumbnailsDefault sizesare square:                 @AdamUngstad
Gallery ThumbnailsBut think about the things youlook at all day:  • Your Computer Monitor  • Your TV  • Your Paintings / P...
Gallery ThumbnailsYes, they are all rectangles.                        @AdamUngstad
@AdamUngstad
It’s easyto change the size of the thumbnailsfor your galleries...                 @AdamUngstad
Settings -> Media              @AdamUngstad
Note:    This setting   only applies to   photos you add        afterthe setting is changed.                 @AdamUngstad
This next one is  important...             @AdamUngstad
What is theeasiest way  to make  your sitelook good?          @AdamUngstad
Let other people do the     work for you.  Don’t re-invent the wheel!                       @AdamUngstad
Don’t re-invent the wheelThis doesn’t mean you should hireexpensive:  • graphic designers  • photographers  • flash develo...
Don’t re-invent the wheelJust as you bought a premium themefor $30. For a couple dollars moreyou can buy:   • fancy slider...
Don’t re-invent the wheelSpend $20, get the superduper flashslider, and impress your users like youwant to.Spend $3, and g...
activeden.com           @AdamUngstad
wpplugins.com           @AdamUngstad
photodune.com           @AdamUngstad
compfight.com• Comfight lets you search Flickr  with specific criteria on usage  rights (IE Creative Commons).• Need a pic...
compfight.com           @AdamUngstad
Next up....  • Navigation  • Visual Elements  • Content  • Miscellaneous               @AdamUngstad
Content• Metacontent• Readability• Contact on every page• Fonts                          @AdamUngstad
MetacontentNot just for search engines...Your WP Excerpt:                           @AdamUngstad
MetacontentShows up when people sharewith their networks.                       @AdamUngstad
MetacontentAlways, Always, Always...1. Have a relevant image with   your post.2. Write a good excerpt.                    ...
Readability    Readability is more than“write at a grade 8 reading level”                          @AdamUngstad
ReadabilityUse Active / Positive Tense.Change:• Victoria is not a large city• I don’t like the cold                       ...
ReadabilityUse Active / Positive Tense.Change:• Victoria is not a large city• Victoria is a small city• I don’t like the c...
Talk about what things are       notwhat they are not.               @AdamUngstad
ReadabilityUse white space:• Small paragraphs• Small column widths• Bullet points, numbered lists• Subheaders• Tables     ...
FontsGood fonts are like new paint forthe walls of your living room...They are inexpensive, easy, andthey make you look go...
The easy wayto use good fonts on     your site....                @AdamUngstad
... Is to use an online   web font service.                  @AdamUngstad
Web Fonts• You (usually) pay a small fee• You drop some code into your  header• You can use all kinds of cool fonts.• Don’...
google.com/webfonts               @AdamUngstad
typekit.com              @AdamUngstad
fontsquirrel.com              @AdamUngstad
Contact InformationPut it on every page. • Good for findability • Good for SEO • Builds trust                          @Ad...
Contact InformationThis doesn’t mean put a link toyour “contact us” form.If you have an address or phonenumber, put it on ...
Next up....  • Navigation  • Visual Elements  • Content  • Miscellaneous               @AdamUngstad
Miscellaneous• Scrolling vs Clicking• Mobile• The Last Word                          @AdamUngstad
Scrolling vs ClickingScrolling is better because:  •   It is faster  •   Requires less effort  •   Doesn’t load new pages ...
Scrolling vs ClickingNo one uses scroll barsanymore, because we havemouse wheels and swipes.Don’t be afraid of long pages....
MobileGet a mobile theme, especially ifyou are using social media.Don’t worry if your home pagelooks weird with it... chan...
The Last Word...              @AdamUngstad
User Experience Is:• Awesome• Important• Engaging• Critical• Time consuming....                       @AdamUngstad
But don’t forget...                @AdamUngstad
Content is still king.                 @AdamUngstad
Thank you!@AdamUngstad              @AdamUngstad
Upcoming SlideShare
Loading in …5
×

Easy User Exerpience Improvements for Your WordPress Site - Make Your Site Easier to Use and Understand

1,943
-1

Published on

A collection of simple and practical ways to make improvements to your WordPress Sites. Anyone with a website really will be ab

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,943
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Easy User Exerpience Improvements for Your WordPress Site - Make Your Site Easier to Use and Understand

  1. 1. EasyUser Experience Improvements for yourWordPress Site @AdamUngstad @AdamUngstad
  2. 2. About Me• In various IT roles for 10 years• Photographer• Writer – Poetry & Non-Fiction• Freelance WordPress work in 2011 @AdamUngstad
  3. 3. Living Water Smart @AdamUngstad
  4. 4. What is User Experience?“the way a person feels about using a product, system or service.” - Wikipedia @AdamUngstad
  5. 5. What is User Experience? "a persons perceptions and responses that result from the use or anticipated use of a product, system or service” - ISO 9421-210 @AdamUngstad
  6. 6. What is User Experience? “how a person feels when interfacing with a system.” - Smashing Magazine @AdamUngstad
  7. 7. The Original ElementsSource: www.jjg.net/elements/pdf/elements.pdf @AdamUngstad
  8. 8. The Boersma T-modelSource: http://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.html @AdamUngstad
  9. 9. Source: http://www.flickr.com/photos/curtisperry/57104815/sizes/z/in/photostream/ @AdamUngstad
  10. 10. Source: http://www.flickr.com/photos/khalid- @AdamUngstad
  11. 11. UserExperience adds VALUE @AdamUngstad
  12. 12. Good UX Helps Users...• Find what they came for• Discover related content• Complete tasks quicker• Understand content• Navigate on different platforms @AdamUngstad
  13. 13. UX Deliverables• User Research / Testing• Personas, Use Cases• Wireframes• Prototypes• Journey Maps @AdamUngstad
  14. 14. Easy UX for WordPress • Navigation • Visual Elements • Content • Miscellaneous @AdamUngstad
  15. 15. Q: What is the mostimportant page on your site? @AdamUngstad
  16. 16. A: Whatever page the user lands on.Most users arrive at a page withina site, rather than the home page. @AdamUngstad
  17. 17. Ever seen this before?Source: http://en.wikipedia.org/wiki/Main_Page @AdamUngstad
  18. 18. Navigation4 Types: 1. Primary (menus) 2. Secondary (tags, breadcrumb, footer) 3. Inline (content) 4. Search @AdamUngstad
  19. 19. Primary NavigationVertical • Static @AdamUngstad
  20. 20. Primary NavigationVertical • Accordion @AdamUngstad
  21. 21. Primary NavigationVertical • Flyouts @AdamUngstad
  22. 22. Primary NavigationHorizontal • Static @AdamUngstad
  23. 23. Primary Navigation Horizontal • DropdownsSource: @AdamUngstad
  24. 24. Primary NavigationHorizontal • Flyouts @AdamUngstad
  25. 25. Primary NavigationHorizontal • Mega-Dropdowns @AdamUngstad
  26. 26. Primary NavigationHorizontal • Tabs @AdamUngstad
  27. 27. Static is generally best @AdamUngstad
  28. 28. Flyouts obscure content @AdamUngstad
  29. 29. If you need 2 levels... Use an accordion or @AdamUngstad
  30. 30. If you need 2 levels... Use Tabs @AdamUngstad
  31. 31. Secondary NavigationSupporting Primary Navigation: • Tags • Breadcrumbs • Footers @AdamUngstad
  32. 32. Secondary NavigationCategories TagsPrimary Subject Secondary Subject @AdamUngstad
  33. 33. Secondary NavigationUse Tags to: • Link content across categories • Create an index • Help users discover what they didn’t know they were looking for... @AdamUngstad
  34. 34. Secondary NavigationBreadcrumbs 1 2 3 4Tell users • where they are • what’s around them @AdamUngstad
  35. 35. Secondary NavigationBreadcrumbs 1 2 3 4Use them only if: • You have highly structured, layered, hierarchical content. @AdamUngstad
  36. 36. Secondary NavigationFooters....don’t holdback.Mega footers area good thing. @AdamUngstad
  37. 37. Source: www.theglobeandmail.com @AdamUngstad
  38. 38. Source: www.lynda.com @AdamUngstad
  39. 39. Inline Navigation @AdamUngstad
  40. 40. Source: www.apple.com @AdamUngstad
  41. 41. Source: www.amazon.ca @AdamUngstad
  42. 42. Source: www.theglobeandmail.com @AdamUngstad
  43. 43. Q: What do users use most?a) Primaryb) Secondaryc) Inline @AdamUngstad
  44. 44. Q: What do users use most?a) Primaryb) Secondaryc) Inline @AdamUngstad
  45. 45. EasyInline Navigation on Your Home Page.... @AdamUngstad
  46. 46. 1) Create a Sticky Post @AdamUngstad
  47. 47. 2) Use Tables for layoutYou use tables in MS Word all the time... @AdamUngstad
  48. 48. 2) Use Tables for layoutThe standard WP editor doesn’t supporttables, but you don’t have to use HTML... @AdamUngstad
  49. 49. 2) Use Tables for layoutTwo options:1. Change your editor (get Ultimate Tiny MCE plugin), or2. Use an offline editor such as Windows Live Editor @AdamUngstad
  50. 50. Don’t Expect, Suggest. Your Post v Related Posts @AdamUngstad
  51. 51. Search @AdamUngstad
  52. 52. Next up.... • Navigation • Visual Elements • Content • Miscellaneous @AdamUngstad
  53. 53. Visual Elements• Columns• Contrast• The Magic Number• Thumbnails• Fonts @AdamUngstad
  54. 54. Use Columns @AdamUngstad
  55. 55. Use Columns @AdamUngstad
  56. 56. Ouch! @AdamUngstad
  57. 57. @AdamUngstad
  58. 58. 3 Is the magic number... @AdamUngstad
  59. 59. @AdamUngstad
  60. 60. 1 2 3 @AdamUngstad
  61. 61. @AdamUngstad
  62. 62. 1 2 3 @AdamUngstad
  63. 63. @AdamUngstad
  64. 64. 1 2 3 @AdamUngstad
  65. 65. ContrastUsing contrast is a good thing. Ithelps people to read your content.Not everyone sees as well as you do.Using contrast is a good thing. Ithelps people to read your content.Not everyone sees as well as you do. @AdamUngstad
  66. 66. Gallery ThumbnailsDefault sizesare square: @AdamUngstad
  67. 67. Gallery ThumbnailsBut think about the things youlook at all day: • Your Computer Monitor • Your TV • Your Paintings / Pictures @AdamUngstad
  68. 68. Gallery ThumbnailsYes, they are all rectangles. @AdamUngstad
  69. 69. @AdamUngstad
  70. 70. It’s easyto change the size of the thumbnailsfor your galleries... @AdamUngstad
  71. 71. Settings -> Media @AdamUngstad
  72. 72. Note: This setting only applies to photos you add afterthe setting is changed. @AdamUngstad
  73. 73. This next one is important... @AdamUngstad
  74. 74. What is theeasiest way to make your sitelook good? @AdamUngstad
  75. 75. Let other people do the work for you. Don’t re-invent the wheel! @AdamUngstad
  76. 76. Don’t re-invent the wheelThis doesn’t mean you should hireexpensive: • graphic designers • photographers • flash developers • UX Designers (well, maybe UX designers... ;-) @AdamUngstad
  77. 77. Don’t re-invent the wheelJust as you bought a premium themefor $30. For a couple dollars moreyou can buy: • fancy sliders • icons & backgrounds • stock photos • anything you need really! @AdamUngstad
  78. 78. Don’t re-invent the wheelSpend $20, get the superduper flashslider, and impress your users like youwant to.Spend $3, and get the backgroundyou want so you can stop trying todesign it yourself. You have contentto write! @AdamUngstad
  79. 79. activeden.com @AdamUngstad
  80. 80. wpplugins.com @AdamUngstad
  81. 81. photodune.com @AdamUngstad
  82. 82. compfight.com• 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. @AdamUngstad
  83. 83. compfight.com @AdamUngstad
  84. 84. Next up.... • Navigation • Visual Elements • Content • Miscellaneous @AdamUngstad
  85. 85. Content• Metacontent• Readability• Contact on every page• Fonts @AdamUngstad
  86. 86. MetacontentNot just for search engines...Your WP Excerpt: @AdamUngstad
  87. 87. MetacontentShows up when people sharewith their networks. @AdamUngstad
  88. 88. MetacontentAlways, Always, Always...1. Have a relevant image with your post.2. Write a good excerpt. @AdamUngstad
  89. 89. Readability Readability is more than“write at a grade 8 reading level” @AdamUngstad
  90. 90. ReadabilityUse Active / Positive Tense.Change:• Victoria is not a large city• I don’t like the cold @AdamUngstad
  91. 91. ReadabilityUse Active / Positive Tense.Change:• Victoria is not a large city• Victoria is a small city• I don’t like the cold• I like it when it is warm @AdamUngstad
  92. 92. Talk about what things are notwhat they are not. @AdamUngstad
  93. 93. ReadabilityUse white space:• Small paragraphs• Small column widths• Bullet points, numbered lists• Subheaders• Tables @AdamUngstad
  94. 94. FontsGood fonts are like new paint forthe walls of your living room...They are inexpensive, easy, andthey make you look good. @AdamUngstad
  95. 95. The easy wayto use good fonts on your site.... @AdamUngstad
  96. 96. ... Is to use an online web font service. @AdamUngstad
  97. 97. Web Fonts• 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! @AdamUngstad
  98. 98. google.com/webfonts @AdamUngstad
  99. 99. typekit.com @AdamUngstad
  100. 100. fontsquirrel.com @AdamUngstad
  101. 101. Contact InformationPut it on every page. • Good for findability • Good for SEO • Builds trust @AdamUngstad
  102. 102. Contact InformationThis doesn’t mean put a link toyour “contact us” form.If you have an address or phonenumber, put it on each page.Then people know you are real. @AdamUngstad
  103. 103. Next up.... • Navigation • Visual Elements • Content • Miscellaneous @AdamUngstad
  104. 104. Miscellaneous• Scrolling vs Clicking• Mobile• The Last Word @AdamUngstad
  105. 105. Scrolling vs ClickingScrolling is better because: • It is faster • Requires less effort • Doesn’t load new pages • Mouse wheels and swipes @AdamUngstad
  106. 106. Scrolling vs ClickingNo one uses scroll barsanymore, because we havemouse wheels and swipes.Don’t be afraid of long pages. @AdamUngstad
  107. 107. MobileGet a mobile theme, especially ifyou are using social media.Don’t worry if your home pagelooks weird with it... chances areno one will see the home pageanyways. @AdamUngstad
  108. 108. The Last Word... @AdamUngstad
  109. 109. User Experience Is:• Awesome• Important• Engaging• Critical• Time consuming.... @AdamUngstad
  110. 110. But don’t forget... @AdamUngstad
  111. 111. Content is still king. @AdamUngstad
  112. 112. Thank you!@AdamUngstad @AdamUngstad

×