S TATE B OARD W EBSITE E XEMPLARS Christine Andrews Paulsen, Ph.D. Concord Evaluation Group June 9, 2011 NCSBN NLC and Consumer Conference in Chicago,

STATE BOARD WEBSITE EXEMPLARSChristine 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

Involves consumers at all stages of website developmentPlanningPrototypesContent writingLaunch Website revisions

Needs assessments Usability testing Focus groups Surveys Observations Polls Feedback link Can be formal or informal

When What

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

SOURCES1. Farkas, D.K. & Farkas, J.B. (2000). Guidelines for designing web navigation. Technical

Communication, 47(3), 341-358.

2. 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.

3. 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.

4. Rosenholtz, R., Li, Y., Mansfield, J. & Jin, Z. (2005). Feature congestion: a measure of display. CHI 2005 Proceedings.

5. 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.

6. Faraday, P. (2001). Attending to web pages. Proceedings of CHI 2001, 159-160.

7. Lynch, P.J. & Horton, S. (2002). Web Style Guide (2nd Edition). New Haven, CO: Yale University Press.

8. 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

SOURCES9. Badre, A.N. (2002). Shaping Web Usability: Interaction Design in Context. Boston, MA:

Addison Wesley Professional.

10. Hull, S.S. (2004), Influence of training and exposure on the usage of breadcrumb navigation, Usability News, 6.1.

11. 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.

12. Ibid.

13. Tullis, T.S. (2001). Web usability lessons learned. Fidelity Center for Applied Technology Technical Report. Fidelity Investments.

14. Nielsen, J. & Tahir, M. (2002). Homepage Usability: 50 Sites Deconstructed. Indianapolis, IN: New Riders Publishing.

15. Williams, T.R. (2000). Guidelines for designing and evaluating the display of information on the Web. Technical Communication, 47(3), 383-396.

16. 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

SOURCES17. Section 508 Standards outlined in Subpart B, Technical Standards (§ 1194.22 Web-

based intranet and internet information and applications).

18. Ozok, A.A. & Salvendy, G. (2000). Measuring consistency of web page design and its effects on performance and satisfaction. Ergonomics, 43(4), 443-460.

19. Nielsen, J. & Tahir, M. (2002). Homepage Usability: 50 Sites Deconstructed. Indianapolis, IN: New Riders Publishing.

20. 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.

21. Detweiler, M.C. & Omanson, R.C. (1996). Ameritech Web Page User Interface Standards and Design Guidelines. Ameritech (now SBC).

22. Williams, T.R. (2000). Guidelines for designing and evaluating the display of information on the Web. Technical Communication, 47(3), 383-396.

23. Section 508 Standards outlined in Subpart B, Technical Standards (§ 1194.22 Web-based intranet and internet information and applications).

29

SOURCES24. Nielsen, J. (2003, November 10). The ten most violated homepage design guidelines.

Alertbox.

25. Spool, J., Schroeder, W., & Ojakaar, E. (2001, November). Users don’t learn to search better. UIEtips.

26. Rosenfeld, L. & Morville, P. (2002). Information Architecture for the World Wide Web (second edition). Sebastopol, CA: O’Reilly.