Building Usable Websites                OpenGovDC Presented by David Leonard and Joel Sackett
IntroductionDave Leonard, Solutions Architect(@davethesave)Joel Sackett, Senior Technical Project &Creative Manager (@joel...
What well be covering
What well be       coveringUser Engagement      Scrolling is OKContent              IconographyPrioritization             ...
User Experience
User Engagement
User Engagement
Content               PrioritizationContent Prioritization
Content               Prioritization        Fighting the urge to “hoard” old content of little        significance        ...
Content PlanningUser Engagement
Content Planning      Use focus groups to define organizational      goals & success criteria      User surveys (targeted)...
AudienceUser Engagement
AudienceUser Engagement
AudienceUser Engagement
AudienceUser Engagement
Call to ActionUser Engagement
Call to ActionUser Engagement
Pave The WayUser Engagement
Pave The WayUser Engagement
Pave The WayUser Engagement
Pave The WayUser Engagement
Pave The WayUser Engagement
Pave The WayUser Engagement
Pave The WayUser Engagement
PersonalizationUser Engagement
PersonalizationUser Engagement
PersonalizationUser Engagement
PersonalizationUser Engagement
Navigation
NavigationUse traditional navigation menus as afallback, not a primary means of interactionShould not be a direct match to...
Navigation
Navigation
Navigation
Navigation
Navigation
Design
Establish A Visual   Connection
Establish A Visual   ConnectionOne of the main goals of design is to connectusers with your brand, message, or organizatio...
Style Tiles
Style Tiles
Style Tiles
Style Tiles
Visual Hierarchy
Visual HierarchyConstructing the page in a way that makes itclear to users the order in which they areexpected to consume ...
Visual Hierarchy
Visual Hierarchy
Using Icons
Using IconsHelpful when space-constrainedRequires a fair amount of design timeCreates an lasting impact, helps establish i...
Using Icons
Using Icons
Using Icons
Using Icons
Icons
Icons
Scrolling is OK“Above the fold” discussions are passéImpact of new devices and interactionsUsability studiesPeople spend l...
Accessibility
Authentication
AuthenticationMake it easy for people to authenticateLogin to comment via Facebook, Twitter, etcwithout having to register...
Authentication
Authentication
Authentication
Authentication
Accessibility and     508
Accessibility and     508Section 508 Compliance  Alt text for images and icons  Screen reader-friendly navigation (travers...
Mobile
MobileChallenges of catering to a variety ofdevices, move towards responsive designCater primarily to mobile usage scenari...
Mobile
Mobile
Mobile
Backend UI
Backend UIStreamlining content creation formsHelp text that explains meaning behind fieldsBalancing low-level configurabil...
Questions?         Connect with us:   David Leonard (@davethesave)       Joel Sackett (@joelstweets)http://www.linkedin.co...
Upcoming SlideShare
Loading in …5
×

Building Usable Websites

637 views
599 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
637
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • There are more and more web sites and services competing for users’ attention every day\n\nAs a result, users’ attention spans continue to get shorter and shorter as they try to make sense of all of this\n\nFocus your efforts on what is unique to your web site and leverage third-party networks rather than compete against them (no matter how cluttered Facebook’s UI is, your users are used to using it already)\n\nHedging your bets (what if Facebook takes a dive like MySpace did?)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×