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.

Building Usable Websites

720 views

Published on

Guide to building usable websites presented at OpenGovDC.com on June 14, 2011

Published in: Technology
  • Be the first to comment

Building Usable Websites

  1. 1. Building Usable Websites OpenGovDC Presented by David Leonard and Joel Sackett
  2. 2. IntroductionDave Leonard, Solutions Architect(@davethesave)Joel Sackett, Senior Technical Project &Creative Manager (@joelstweets)
  3. 3. What well be covering
  4. 4. What well be coveringUser Engagement Scrolling is OKContent IconographyPrioritization Registration andVisual Connections AuthenticationVisual Hierarchy AccessibilityNavigation Menus Mobile Interfaces
  5. 5. User Experience
  6. 6. User Engagement
  7. 7. User Engagement
  8. 8. Content PrioritizationContent Prioritization
  9. 9. Content Prioritization Fighting the urge to “hoard” old content of little significance What to keep, what to toss, what to "archive" (dubious value) Analytics are your ally in these conversations Quality over quantity! Consider the ‘curation’ effect - what do you want your users to do after reading your content.Content Prioritization
  10. 10. Content PlanningUser Engagement
  11. 11. Content Planning Use focus groups to define organizational goals & success criteria User surveys (targeted) Let needs drive the techniquesUser Engagement
  12. 12. AudienceUser Engagement
  13. 13. AudienceUser Engagement
  14. 14. AudienceUser Engagement
  15. 15. AudienceUser Engagement
  16. 16. Call to ActionUser Engagement
  17. 17. Call to ActionUser Engagement
  18. 18. Pave The WayUser Engagement
  19. 19. Pave The WayUser Engagement
  20. 20. Pave The WayUser Engagement
  21. 21. Pave The WayUser Engagement
  22. 22. Pave The WayUser Engagement
  23. 23. Pave The WayUser Engagement
  24. 24. Pave The WayUser Engagement
  25. 25. PersonalizationUser Engagement
  26. 26. PersonalizationUser Engagement
  27. 27. PersonalizationUser Engagement
  28. 28. PersonalizationUser Engagement
  29. 29. Navigation
  30. 30. NavigationUse traditional navigation menus as afallback, not a primary means of interactionShould not be a direct match to your site’sinformation architecture or organizationalstructure (minimal depth/hierarchy)Use action-oriented verbiage when possible
  31. 31. Navigation
  32. 32. Navigation
  33. 33. Navigation
  34. 34. Navigation
  35. 35. Navigation
  36. 36. Design
  37. 37. Establish A Visual Connection
  38. 38. Establish A Visual ConnectionOne of the main goals of design is to connectusers with your brand, message, or organizationCollaborate: get designers and stakeholders in thesame room & spark a discussion - designers areanother type of problems solvers & critical thinkersDesign surveysUse iterative design strategies, like style tiles, tocollaborate with clients before doing full-blowndesign
  39. 39. Style Tiles
  40. 40. Style Tiles
  41. 41. Style Tiles
  42. 42. Style Tiles
  43. 43. Visual Hierarchy
  44. 44. Visual HierarchyConstructing the page in a way that makes itclear to users the order in which they areexpected to consume the informationFont sizes / choicesColor applicationWhite spaceVerbiage and design elements that drawattention to action-oriented content
  45. 45. Visual Hierarchy
  46. 46. Visual Hierarchy
  47. 47. Using Icons
  48. 48. Using IconsHelpful when space-constrainedRequires a fair amount of design timeCreates an lasting impact, helps establish identity/brandingUse sparingly for maximum effectivenessAccessibility concerns / alt or descriptive text toaccompanyCaution - can be subjective, different icons meandifferent things to different people
  49. 49. Using Icons
  50. 50. Using Icons
  51. 51. Using Icons
  52. 52. Using Icons
  53. 53. Icons
  54. 54. Icons
  55. 55. Scrolling is OK“Above the fold” discussions are passéImpact of new devices and interactionsUsability studiesPeople spend lots of time on the web, if youhook them early they will stay engaged
  56. 56. Accessibility
  57. 57. Authentication
  58. 58. AuthenticationMake it easy for people to authenticateLogin to comment via Facebook, Twitter, etcwithout having to register.Disqus...
  59. 59. Authentication
  60. 60. Authentication
  61. 61. Authentication
  62. 62. Authentication
  63. 63. Accessibility and 508
  64. 64. Accessibility and 508Section 508 Compliance Alt text for images and icons Screen reader-friendly navigation (traversable, skip navigation) Use true semantic headers (h1, h2, h3) and reasonable font sizes Label forms clearly Color coding/contrastingWhy content strategy and training is key
  65. 65. Mobile
  66. 66. MobileChallenges of catering to a variety ofdevices, move towards responsive designCater primarily to mobile usage scenarios,dont assume any parity in terms of userexperienceExposing your site’s content to a mobile app
  67. 67. Mobile
  68. 68. Mobile
  69. 69. Mobile
  70. 70. Backend UI
  71. 71. Backend UIStreamlining content creation formsHelp text that explains meaning behind fieldsBalancing low-level configurability withmaking commonly performed tasks easy todoBuilding flexible tools for content editors
  72. 72. Questions? Connect with us: David Leonard (@davethesave) Joel Sackett (@joelstweets)http://www.linkedin.com/in/joelsackett

×