State Board Website Exemplars

1. State Board Website Exemplars Christine Andrews Paulsen, Ph.D. Concord Evaluation Group June 9, 2011 NCSBN NLC and Consumer Conference in Chicago, Ill

2. Conference Objectives • The conference is consumer-focused: • Describe the current state of consumer protection from the viewpoint of the consumer. • Describe the consumer perspective on scope of practice. • Understand the consumer view of discipline and accountability. • Identify the importance of transparency in a state board website. • Describe performance measurement and its role in accountability.

3. Presentation Objectives • This presentation is also consumer-focused: • Importance of consumer-driven websites • Best practices and exemplars • Based on our review of State Board of Nursing websites

4. What is a Consumer-Driven Website? • Usable • Accessible • Transparent • Understandable • Meets the consumers’ needs and expectations

5. What Does “Not Usable” Look Like? • It may help to start with examples of poorly designed websites. Have you ever visited a website that made you ask, “What were they thinking?!”

6. What Does “Not Usable” Look Like? • Cool and sleek design does not always equal usable design

7. What Does “Not Usable” Look Like? • Poorly designed sites do not match users’ expectations

8. What Does Usable Look Like? • Most of the topics I will cover are discussed further in the Research-Based Web Design & Usability Guidelines (U.S. DHHS) at http://usability.gov/ • I will draw upon examples of State Board of Nursing websites as exemplars. • Keep in mind that consumers seek out websites for basically 3 reasons: • To buy something • To play/socialize • To find information* • This presentation will focus on the third consumer type

9. Consumer-Driven Design When What • Involves consumers at all stages of website development • Planning • Prototypes • Content writing • Launch • Website revisions • Needs assessments • Usability testing • Focus groups • Surveys • Observations • Polls • Feedback link • Can be formal or informal

10. Consumer-Driven Design • The goal is to create a site that meets the needs of the consumers who will be using the site, not just the needs of the organization • Who are your users? • Why will they visit your site? • What information do they need? • In what format do they need it? • How do your consumers expect your site to work? • How experienced are your consumers with websites? • What accessibility challenges do your consumers have?

11. The Homepage • Different and, in some ways, more important than other pages • Must quickly and clearly convey the purpose of the site • Users should always be able to access the homepage from all pages within a site.1

12. The Homepage • Try to limit the amount of text/prose on your homepage so users can quickly determine what they can do with the site and where to navigate.2 • This is also more accessible for blind users who rely on screen readers to read all the text on the screen.

13. The Homepage • Use the homepage to create a positive first impression of your website and build it’s credibility.3

14. Page Layout • Don’t use cluttered pages.4 • Use moderate white space.5 • Place important information in a prominent location.6

15. Navigation • All pages should contain navigational options (again, more accessible for screen readers).7 • Long pages should provide a table or list of contents with jump links that take users to the corresponding content further down the page.8 Long pages should also include a “skip navigation” link for screen reader users.

16. Navigation • Ensure that tab labels tell users exactly what function they serve or their destination (more accessible).9 • Do not rely solely on breadcrumbs for navigation.10

17. Links • Link labels should be meaningful and easy to understand (essential for accessibility).11 • Link names should match their destination pages.12 • Don’t confuse users with links that are not clearly clickable.13 • Let users know when a link will take them to a document or an external page (more accessible).14

18. Text Appearance • Use plain (e.g., sans-serif) fonts on high-contrast backgrounds (e.g., black on white).15 This is critically important for blind, low vision, and aging users. • Use bold text sparingly.16

19. Text Appearance • Do not convey important information with color alone. Use font, special characters, images with alt-text or other context in addition to using color (accessibility).17 What NOT to Do What TO Do From http://jimthatcher.com/webcourse7.htm

20. Content • Arrange lists and tasks in a logical and efficient order.18 • Make lists and prose easy to scan, using clear, well-located headings; short phrases and sentences; and small readable paragraphs.19 • Avoid the use of jargon and acronyms.20

21. Media • Use background images sparingly and make them simple, especially when used behind text.21 • All clickable images should be labeled with alt-text.22 • All non-text elements, including video, should provide a text alternative. So, videos should always offer closed captioning for users with hearing difficulties.23

22. Media • If an image is not essential to understanding the content (see example) then alt-text is not required. • In this case (buttons), alt-text would be required.

23. Frequently Asked Questions • Include a comprehensive and useful set of Frequently Asked Questions (FAQs) that apply to each of the main content sections of the website.24

24. Search Functionality • Include search features that are easy to use and allow for successful searches using basic search terms.25 • Program search features to return as many relevant search results as possible.26

25. Additional Resources • http://usability.gov • http://section508.gov • http://www.w3.org/WAI/intro/wcag

26. Sources • Farkas, D.K. & Farkas, J.B. (2000). Guidelines for designing web navigation. Technical Communication, 47(3), 341-358. • Bailey, R.W., Koyani, S., & Nall, J. (2000, September 7). Usability testing of several health information Web sites, National Cancer Institute Technical Report. Bethesda, MD. • Amento, B., Hill, W., Terveen, L., Hix, D., & Ju, P. (1999). An empirical evaluation of user interfaces for topic management of web sites. Proceedings of CHI’99, 552-559. • Rosenholtz, R., Li, Y., Mansfield, J. & Jin, Z. (2005). Feature congestion: a measure of display. CHI 2005 Proceedings. • Chaparro, B.S. & Bernard, M.L. (2001). Finding information on the Web: Does the amount of whitespace really matter? Proceedings of the Tenth Annual Usability Professionals’ Association Conference. • Faraday, P. (2001). Attending to web pages. Proceedings of CHI 2001, 159-160. • Lynch, P.J. & Horton, S. (2002). Web Style Guide (2nd Edition). New Haven, CO: Yale University Press. • Zimmerman, D.E., Slater, M., & Kendall, P. (2001). Risk communication and a usability case study: Implications for Web site design. Proceedings of the IEEE International Professional Communication Conference, 445-452.

27. Sources • Badre, A.N. (2002). Shaping Web Usability: Interaction Design in Context. Boston, MA: Addison Wesley Professional. • Hull, S.S. (2004), Influence of training and exposure on the usage of breadcrumb navigation, Usability News, 6.1. • Mobrand, K.A. & Spyridakis, J.H. (2002). A web-based study of user performance with enhanced local navigational cues. Proceedings of the IEEE International Professional Communication Conference, 500-508. • Ibid. • Tullis, T.S. (2001). Web usability lessons learned. Fidelity Center for Applied Technology Technical Report. Fidelity Investments. • Nielsen, J. & Tahir, M. (2002). Homepage Usability: 50 Sites Deconstructed. Indianapolis, IN: New Riders Publishing. • Williams, T.R. (2000). Guidelines for designing and evaluating the display of information on the Web. Technical Communication, 47(3), 383-396. • Joseph, K.M., Knott, B.A. & Grier, R.A. (2002). The effects of bold text on visual search of form fields. Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting, 583-587.

28. Sources • Section 508 Standards outlined in Subpart B, Technical Standards (§ 1194.22 Web-based intranet and internet information and applications). • Ozok, A.A. & Salvendy, G. (2000). Measuring consistency of web page design and its effects on performance and satisfaction. Ergonomics, 43(4), 443-460. • Nielsen, J. & Tahir, M. (2002). Homepage Usability: 50 Sites Deconstructed. Indianapolis, IN: New Riders Publishing. • Morrell, R.W., Dailey, S.R., Feldman, C., Mayhorn, C.B., & Echt, K.V. (2002, April). Older adults and information technology: A compendium of scientific research and web site accessibility guidelines. National Institute on Aging Report. Bethesda, MD. • Detweiler, M.C. & Omanson, R.C. (1996). Ameritech Web Page User Interface Standards and Design Guidelines. Ameritech (now SBC). • Williams, T.R. (2000). Guidelines for designing and evaluating the display of information on the Web. Technical Communication, 47(3), 383-396. • Section 508 Standards outlined in Subpart B, Technical Standards (§ 1194.22 Web-based intranet and internet information and applications).

29. Sources • Nielsen, J. (2003, November 10). The ten most violated homepage design guidelines. Alertbox. • Spool, J., Schroeder, W., & Ojakaar, E. (2001, November). Users don’t learn to search better. UIEtips. • Rosenfeld, L. & Morville, P. (2002). Information Architecture for the World Wide Web (second edition). Sebastopol, CA: O’Reilly.