BetterUser Experiencefor WordPress sitesWordPress Geneva | April 23, 2013@AdamUngstad
• Senior Information Architect, Province ofBritish Columbia (Canada)• UX Specialist, Province of British Columbia(Canada)•...
2012, 2013EuroIA - Edinburgh Sept 26-28WordCamp Victoria 2012UX Romandie April 2013
User Experience
User Experience is…“the way a person feels about using aproduct, system or service.”- Wikipedia
“a persons perceptions and responsesthat result from the use or anticipated useof a product, system or service”- Internati...
“how a person feels when interfacingwith a system.”-Smashing MagazineUser Experience is…
www.jjg.net/elements/pdf/elements.pdf
http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/
http://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.html
Source: http://www.flickr.com/photos/curtisperry/57104815/sizes/z/in/photostream/
Source: http://www.flickr.com/photos/khalid-
Good UX Helps Users...• Find what they came for• Complete tasks quickly• Understand primary content• Discover related cont...
A Few UX Methods• Content Inventory• Card Sorting• Contextual Inquiry• Diary Studies• Personas• Scenarios• Co-Design Studi...
A Few UX Deliverables• Site Maps• Wireframes• Wireflows• Storyboards• Journey maps• Functional Specifications• Prototypes•...
UX takes a lot of work!But there are some ‘universal’principles and patterns.
Q: What is the mostimportant page on your site?
Q: What is the mostimportant page on your site?A: Whatever page the user landson.
Source: http://en.wikipedia.org/wiki/Main_PageEver seen this before?
Navigation4 Types:1. Primary (menus)2. Secondary (tags, breadcrumb, footer)3. Inline (content)4. Search
Vertical• StaticPrimary Navigation
Primary NavigationVertical• Accordion
Primary NavigationVertical• Flyouts
Primary NavigationHorizontal• Static
Primary NavigationSource:Horizontal• Dropdowns
Primary NavigationHorizontal• Flyouts
Primary NavigationHorizontal• Mega-Dropdowns
Primary NavigationHorizontal• Tabs
Static is generally best
Flyouts obscure content & aredifficult to use with a mouse
Use an accordionorIf you need 2 levels...
Use TabsIf you need 2 levels...
Secondary NavigationSupports Primary Navigation:• Tags• Breadcrumbs• Related Posts• Footers
CategoriesPrimary Topics
TagsSecondary Topics
TagsUse Tags to:• Link content across categories• Create an index• Help users discover what they didn’tknow they were look...
Secondary NavigationBreadcrumbsTell users• where they are• what’s around them1 2 3 4
Secondary Navigation1 2 3 4BreadcrumbsUse them only if:• You have highly structured, layered,deep hierarchical content.
Secondary NavigationFooters....don’t hold back.Mega footers area good thing.
Source: www.theglobeandmail.com
Source: www.lynda.com
Inline Navigation
Source: www.apple.com
Source: www.amazon.ca
Source: www.theglobeandmail.com
Q: What type of navigation dousers use most?a) Primaryb) Secondaryc) Inline
Q: What type of navigation dousers use most?a) Primaryb) Secondaryc) Inline
Making the most of inline navigation…
“Store hours are Monday 9 – 5 PM,Tuesday 9-6 PM, Wednesdays closed,Thursdays 9-9PM, Fridays 9-5PMSaturdays 10-5 PM, Sunday...
Use tables to help users scan content
Use tables to help users scan contentYou use tables in MS Word all the time...
The standard WP Editor doesn’t supporttables, but you don’t have to use HTML...Use tables to help users scan content
Two options:1. Change your editor(get CK Editor plugin), orUse tables to help users scan content
Or:2. Use an offline editor such as WindowsLive Editor or Mars EditUse tables to help users scan content
Don’t Expect, Suggest.vYour PostRelated Posts
Search
Use Columns
Use Columns
Ouch!
3 is the magic number...
1 2 3
1 2 3
1 2 3
Use ContrastUsing contrast is a good thing. It helpspeople to read your content.Using contrast is a good thing. It helpspe...
Default shapesfor thumbnailsare square:Image Gallery Thumbnails
But think about the things you look atall day:• Your Computer Monitor• Your TV• Your SmartPhone• Your Photographs• The win...
Yes, they are all rectangles.
Image Gallery Thumbnails
It’s easy to change the size of thethumbnails for your galleries...
Settings  Media  Thumbnail Size
NOTE: this setting only appliesto photos added after the settingis changed
Q: What is the easiest way tomake your site look good?
Q: What is the easiest way tomake your site look good?A: Let other people do the workfor you.
This doesn’t mean you should hire expensive:• graphic designers• photographers• flash developers• UX Designers(well, maybe...
You bought a premium theme for $30.For a couple dollars more you can buy:• fancy sliders• icons & backgrounds• stock photo...
Spend $20, get that responsive jqueryslider, and impress your users like you wantto.Spend $3, and get the background you w...
activeden.com
wpplugins.com
photodune.com
compfight.com
• Comfight lets you search Flickr with specificcriteria on usage rights (IE CreativeCommons).• Need a picture of a garden ...
• Metacontent• Readability• Contact on every page• FontsContent
The excerpt…. Not just for search results!Metadata
The excerpt appears when your post isshared on social networks.Metadata
Always, Always, Always...1. Have a relevant image with your post.2. Write a good excerpt.Metadata
Readability is more than“write at a grade 8 reading level”Readability
Use Active / Positive Tense. Change thesesentences:• Geneva is not a large city• I don’t like the cold• WordPress does not...
Use Active / Positive Tense. Change thesesentences:• Geneva is not a large cityGeneva is a small city• I don’t like the co...
Talk about what things are,not about what they aren’t.
Use white space:• Small paragraphs• Small column widths• Bullet points, numbered lists• Subheaders• TablesReadability
Good typography is like new paint for thewalls of your living room...It is:• inexpensive,• easy, and• it makes you look go...
The easiest way to use good fontson your site is to use anonline service.
• 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 c...
google.com/webfonts
typekit.com
fontsquirrel.com
Put it on every page.• Good for findability• Good for SEO• Builds trustContact Information
This doesn’t mean put a link to your“contact us” form.If you have an address or phonenumber, put it on each page. Then peo...
• Scrolling vs Clicking• Calls to Action• Responsive Design• The Last WordMiscellaneous
Scrolling is better because:• It is faster• Requires less effort• Doesn’t load new pages• Mouse wheels and swipesScrolling...
No one uses scroll bars anymore, becausewe have mouse wheels and swipes.Don’t be afraid of long pages.Scrolling vs Clicking
• Use High Contrast• Consider bundling products• Place them before and after the fold• Don’t interrupt a sequential proces...
Get a Responsive theme, especially if youare using social media.Don’t worry if your home page looks weirdwith it... chance...
The Last Word...
• Awesome• Important• Engaging• Critical• Time consuming....User Experience is….
But don’t forget...
Content is still king.
Thank you!@AdamUngstad
Better User Experience for WordPress Sites
Better User Experience for WordPress Sites
Better User Experience for WordPress Sites
Better User Experience for WordPress Sites
Better User Experience for WordPress Sites
Upcoming SlideShare
Loading in...5
×

Better User Experience for WordPress Sites

827

Published on

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!

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

No Downloads
Views
Total Views
827
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • The Elements of User Experience Design by Jesse James Garrett
  • TheBoersma T-Model
  • User Experience adds value to products and services.
  • Better User Experience for WordPress Sites

    1. 1. BetterUser Experiencefor WordPress sitesWordPress Geneva | April 23, 2013@AdamUngstad
    2. 2. • Senior Information Architect, Province ofBritish Columbia (Canada)• UX Specialist, Province of British Columbia(Canada)• Independent UX Consultant• WordPress Developer• Author & PublisherAdam Ungstad
    3. 3. 2012, 2013EuroIA - Edinburgh Sept 26-28WordCamp Victoria 2012UX Romandie April 2013
    4. 4. User Experience
    5. 5. User Experience is…“the way a person feels about using aproduct, system or service.”- Wikipedia
    6. 6. “a persons perceptions and responsesthat result from the use or anticipated useof a product, system or service”- International Standards OrganizationUser Experience is…
    7. 7. “how a person feels when interfacingwith a system.”-Smashing MagazineUser 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 mostimportant page on your site?
    18. 18. Q: What is the mostimportant page on your site?A: Whatever page the user landson.
    19. 19. Source: http://en.wikipedia.org/wiki/Main_PageEver seen this before?
    20. 20. Navigation4 Types:1. Primary (menus)2. Secondary (tags, breadcrumb, footer)3. Inline (content)4. Search
    21. 21. Vertical• StaticPrimary Navigation
    22. 22. Primary NavigationVertical• Accordion
    23. 23. Primary NavigationVertical• Flyouts
    24. 24. Primary NavigationHorizontal• Static
    25. 25. Primary NavigationSource:Horizontal• Dropdowns
    26. 26. Primary NavigationHorizontal• Flyouts
    27. 27. Primary NavigationHorizontal• Mega-Dropdowns
    28. 28. Primary NavigationHorizontal• Tabs
    29. 29. Static is generally best
    30. 30. Flyouts obscure content & aredifficult to use with a mouse
    31. 31. Use an accordionorIf you need 2 levels...
    32. 32. Use TabsIf you need 2 levels...
    33. 33. Secondary NavigationSupports Primary Navigation:• Tags• Breadcrumbs• Related Posts• Footers
    34. 34. CategoriesPrimary Topics
    35. 35. TagsSecondary Topics
    36. 36. TagsUse Tags to:• Link content across categories• Create an index• Help users discover what they didn’tknow they were looking for...
    37. 37. Secondary NavigationBreadcrumbsTell users• where they are• what’s around them1 2 3 4
    38. 38. Secondary Navigation1 2 3 4BreadcrumbsUse them only if:• You have highly structured, layered,deep hierarchical content.
    39. 39. Secondary NavigationFooters....don’t hold back.Mega footers area 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 dousers use most?a) Primaryb) Secondaryc) Inline
    47. 47. Q: What type of navigation dousers use most?a) Primaryb) Secondaryc) 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-5PMSaturdays 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 contentYou use tables in MS Word all the time...
    52. 52. The standard WP Editor doesn’t supporttables, 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), orUse tables to help users scan content
    54. 54. Or:2. Use an offline editor such as WindowsLive Editor or Mars EditUse tables to help users scan content
    55. 55. Don’t Expect, Suggest.vYour PostRelated 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 ContrastUsing contrast is a good thing. It helpspeople to read your content.Using contrast is a good thing. It helpspeople to read your content.Using contrast is a good thing. It helpspeople to read your content.
    65. 65. Default shapesfor thumbnailsare square:Image Gallery Thumbnails
    66. 66. But think about the things you look atall day:• Your Computer Monitor• Your TV• Your SmartPhone• Your Photographs• The windshield on your carImage Gallery Thumbnails
    67. 67. Yes, they are all rectangles.
    68. 68. Image Gallery Thumbnails
    69. 69. It’s easy to change the size of thethumbnails for your galleries...
    70. 70. Settings  Media  Thumbnail Size
    71. 71. NOTE: this setting only appliesto photos added after the settingis changed
    72. 72. Q: What is the easiest way tomake your site look good?
    73. 73. Q: What is the easiest way tomake your site look good?A: Let other people do the workfor 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 jqueryslider, and impress your users like you wantto.Spend $3, and get the background you wantso 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 specificcriteria on usage rights (IE CreativeCommons).• Need a picture of a garden to go with yourpost? Try compfight.Give credit where it is due.compfight.com
    82. 82. • Metacontent• Readability• Contact on every page• FontsContent
    83. 83. The excerpt…. Not just for search results!Metadata
    84. 84. The excerpt appears when your post isshared 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 thesesentences:• Geneva is not a large city• I don’t like the cold• WordPress does not cost a lot of moneyReadability
    88. 88. Use Active / Positive Tense. Change thesesentences:• Geneva is not a large cityGeneva is a small city• I don’t like the coldI like the heat• WordPress does not cost a lot of moneyWordPress is affordableReadability
    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• TablesReadability
    91. 91. Good typography is like new paint for thewalls of your living room...It is:• inexpensive,• easy, and• it makes you look good.Typography
    92. 92. The easiest way to use good fontson your site is to use anonline 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 finefor 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 trustContact Information
    98. 98. This doesn’t mean put a link to your“contact us” form.If you have an address or phonenumber, put it on each page. Then peopleknow you are real.Contact Information
    99. 99. • Scrolling vs Clicking• Calls to Action• Responsive Design• The Last WordMiscellaneous
    100. 100. Scrolling is better because:• It is faster• Requires less effort• Doesn’t load new pages• Mouse wheels and swipesScrolling vs Clicking
    101. 101. No one uses scroll bars anymore, becausewe 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 processCalls to Action
    103. 103. Get a Responsive theme, especially if youare using social media.Don’t worry if your home page looks weirdwith it... chances are no one will see thehome 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×