This document discusses best practices for building usable websites. It covers topics like user engagement, content prioritization, navigation, visual hierarchy, accessibility, and mobile interfaces. The key points are that content and design should focus on the user experience, important content should be prioritized, navigation should be action-oriented, visual hierarchy helps guide users, and accessibility and responsive design are important for all devices.

1. Building Usable Websites
OpenGovDC
Presented by David Leonard and Joel Sackett

2. Introduction
Dave Leonard, Solutions Architect
(@davethesave)
Joel Sackett, Senior Technical Project &
Creative Manager (@joelstweets)

3. What we'll be
covering

4. What we'll be
covering
User Engagement Scrolling is OK
Content Iconography
Prioritization
Registration and
Visual Connections Authentication
Visual Hierarchy Accessibility
Navigation Menus Mobile Interfaces

5. User Experience

6. User Engagement

7. User Engagement

8. Content
Prioritization
Content Prioritization

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. Content Planning
User Engagement

11. Content Planning
Use focus groups to define organizational
goals & success criteria
User surveys (targeted)
Let needs drive the techniques
User Engagement

12. Audience
User Engagement

13. Audience
User Engagement

14. Audience
User Engagement

15. Audience
User Engagement

16. Call to Action
User Engagement

17. Call to Action
User Engagement

18. Pave The Way
User Engagement

19. Pave The Way
User Engagement

20. Pave The Way
User Engagement

21. Pave The Way
User Engagement

22. Pave The Way
User Engagement

23. Pave The Way
User Engagement

24. Pave The Way
User Engagement

25. Personalization
User Engagement

26. Personalization
User Engagement

27. Personalization
User Engagement

28. Personalization
User Engagement

29. Navigation

30. Navigation
Use traditional navigation menus as a
fallback, not a primary means of interaction
Should not be a direct match to your site’s
information architecture or organizational
structure (minimal depth/hierarchy)
Use action-oriented verbiage when possible

31. Navigation

32. Navigation

33. Navigation

34. Navigation

35. Navigation

36. Design

37. Establish A Visual
Connection

38. Establish A Visual
Connection
One of the main goals of design is to connect
users with your brand, message, or organization
Collaborate: get designers and stakeholders in the
same room & spark a discussion - designers are
another type of problems solvers & critical thinkers
Design surveys
Use iterative design strategies, like style tiles, to
collaborate with clients before doing full-blown
design

39. Style Tiles

40. Style Tiles

41. Style Tiles

42. Style Tiles

43. Visual Hierarchy

44. Visual Hierarchy
Constructing the page in a way that makes it
clear to users the order in which they are
expected to consume the information
Font sizes / choices
Color application
White space
Verbiage and design elements that draw
attention to action-oriented content

45. Visual Hierarchy

46. Visual Hierarchy

47. Using Icons

48. Using Icons
Helpful when space-constrained
Requires a fair amount of design time
Creates an lasting impact, helps establish identity/
branding
Use sparingly for maximum effectiveness
Accessibility concerns / alt or descriptive text to
accompany
Caution - can be subjective, different icons mean
different things to different people

49. Using Icons

50. Using Icons

51. Using Icons

52. Using Icons

53. Icons

54. Icons

55. Scrolling is OK
“Above the fold” discussions are passé
Impact of new devices and interactions
Usability studies
People spend lots of time on the web, if you
hook them early they will stay engaged

56. Accessibility

57. Authentication

58. Authentication
Make it easy for people to authenticate
Login to comment via Facebook, Twitter, etc
without having to register.
Disqus
...

59. Authentication

60. Authentication

61. Authentication

62. Authentication

63. Accessibility and
508

64. Accessibility and
508
Section 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/contrasting
Why content strategy and training is key

65. Mobile

66. Mobile
Challenges of catering to a variety of
devices, move towards responsive design
Cater primarily to mobile usage scenarios,
don't assume any parity in terms of user
experience
Exposing your site’s content to a mobile app

67. Mobile

68. Mobile

69. Mobile

70. Backend UI

71. Backend UI
Streamlining content creation forms
Help text that explains meaning behind fields
Balancing low-level configurability with
making commonly performed tasks easy to
do
Building flexible tools for content editors

72. Questions?
Connect with us:
David Leonard (@davethesave)
Joel Sackett (@joelstweets)
http://www.linkedin.com/in/joelsackett