The Journal of Extension - www.joe.org

December 2011 // Volume 49 // Number 6 // Tools of the Trade // 6TOT6

Web-Based Family Life Education: Spotlight on User Experience

Abstract
Family Life Education (FLE) websites can benefit from the field of user experience, which makes technology easy to use. A heuristic evaluation of five FLE sites was performed using Neilson's heuristics, guidelines for making sites user friendly. Greater site complexity resulted in more potential user problems. Sites most frequently had problems with minimalist design, visibility of system status, and consistency. Best practices for avoiding these most common problems are provided.


Jennifer Doty
Ph.D. Graduate Student
Family Social Science
St. Paul, Minnesota
University of Minnesota
dotyx093@umn.edu

Matthew Doty
User Experience Practice Lead
Chanahassan, Minnesota
Lifetime Fitness
matthewjdoty@gmail.com

Jodi Dworkin
Associate Professor
Family Social Science
St. Paul, Minnesota
University of Minnesota
jdworkin@umn.edu

Recently, family life educators have explored the use of Web-based educational programs (Kallioranta, Vlosky, & Leavengood, 2006). In their overview of Web-based family life education (FLE), Dennis and Ebata (2005) suggest that individual users will ultimately judge whether Extension works online. They suggest that "the increased availability of information makes it essential that educators explore and perhaps embrace some of the methods used by commercial providers and marketers in order to engage new audiences" (p. 203). The study reported here sought to answer that call through collaboration between family science professionals and the world of business, expanding the field by examining five parent education sites from a user experience perspective.

User Experience Applied to Family Life Education

User experience (UX) professionals put people at the center of design and make technology easy to use. Although the UX field has many methods to address usability, this study reported here focused on one of those: a heuristic evaluation. Heuristic evaluations use guiding principles to find possible problems in the usability of a website. This evaluation method has been cited as "a method for discovering the most serious [website] problems with a low investment of resources, while representing a high cost-benefit ratio" (Joshi, Arora, Dai, Price, Vizer, & Sears, 2009). Although no known heuristic evaluations have been completed in the social sciences, usability measures have been included in at least one assessment of a youth development site (Safrit, Edwards, & Flood, 2004). One study in the field of medicine used Nielsen's heuristics to evaluate a patient education website (Joshi et al., 2009); the reported here study sought to do the same.

Methods

The first author contacted parent education website administrators to obtain permission to perform a heuristic evaluation. Although five websites were reviewed, two sets of websites were designed by the same organization and were similar. Therefore, the findings are listed by the three organizations.

Each website was independently reviewed twice using Nielsen's 10 usability heuristics <http://www.useit.com/papers/heuristic/heuristic_list.html> (Nielsen, 2005). These heuristics are based on Jakob Nielsen's factor analysis of hundreds of usability problems (1994). The types of questions asked in the evaluation are found in Table 1. Employing these guidelines, family life educators may increase site utility and the time users spend on their sites.

For each heuristic, two constructs were measured: 1) frequency of potential usability problems and 2) potential impact of the problems. Frequency was rated on a scale of 0-4 with 0 as never and 4 indicating a common problem. Two evaluators then discussed the potential impact of each problem and assigned a rating to the issue using a scale from 0-4 (Joshi et al., 2009).

Table 1.
Nielsen's 10 Usability Heuristics

Usability HeuristicTypes of Questions Asked
  1. Visibility of system status
Do labels and page content match up? Are there feedback mechanisms showing the user know where they are, where they have been, and where they are going? Do progress bars show how far users have come?
  1. Match between system and real world
Does the site use familiar concepts and language? Does the design organize information in a logical way?
  1. User control and freedom
How easy is it to undo an unwanted action? Is the use of the back button supported? Are there obvious ways to return to previous pages?
  1. Consistency and standards
Is there consistent design from page to page? Are design elements consistent with well-known industry standards? Are the same elements found in the same place on different pages? Do the same elements behave the same way throughout the site?
  1. Error prevention
How successful is the site at preventing errors?
  1. Recognition rather than recall
Does the site tax the user's memory? Would users be likely to have to learn the use of design elements or are they intuitive?
  1. Flexibility and efficiency of use
Does the design provide short cuts for experienced users without excluding novice users?
  1. Aesthetic and minimalist design
Is the information relevant? Is there a hierarchy where most important information is most accessible? Is the idea "less is more" applied, or is there a problem with visual "noise"? Is the page visually appealing? Does the site appear credible?
  1. Help users recognize, diagnose, and recover from errors
When errors do occur, is the help material expressed in simple, straightforward language?
  1. Help and documentation
How easy to use is the site without help information? Is the help information available and easy to use?

Generally, more complex sites had more problems with usability. Some problems were consistent throughout a site and others were isolated (Table 2).

Table 2.
Number of Potential User Problems Based on Nielson's 10 Usability Heuristics

 1st & 2nd Site3rd Site4th & 5th Site
Number of Total Issues71727
Visibility of System Status
Lack of feedback030
Labeling problems012
Progress bar needed001
Match to Real World
Unfamiliar concepts/language100
User Control
Back button problems001
Can't return to previous page001
Consistency and Standards
Inconsistent from page to page022
Inconsistent with industry245
Error Prevention
Errors found002
Recognition Rather than Recall
Need to learn design103
Recall necessary100
Aesthetic and Minimalist Design
Lacks hierarchy024
Heavy on text 101
Visual or audio "noise"153
Help users Recognize, Diagnose, Recover
Unhelpful error messages001
Help and Documentation
Help information problems001
Avg. frequency of issues3.432.292.30
Avg. potential impact 2.502.853.17
Complexity of Site(s)123

Recommended Best Practices

Heuristic analysis of these sites revealed seven best practices for avoiding the most common problems.

Aesthetic and Minimalist Design

  1. The first page should engage users immediately, using clear calls to action, effective page organization, and appealing visuals. The most frequent problem was an overabundance of text; one or two lines of text and a striking visual would be preferred.

  2. Use visuals effectively, giving them focus and weight. One site used screen shots of another page as a visual, but they were too small to be readable or meaningful.

  3. Make copy approachable, scannable, and digestible. Break copy into visual chunks using bullets, white space, bold text, and grouping information in an organized way. Page headers and subsection headers are crucial for making visual information easy to digest (Williams, 2008).

Visibility of System Status

  1. Users should always know where they are, how they got there, and how to get back. In the UX industry, a visual indicator of page site location at the top of the page is known as a "bread crumb trail," for example: Home < Primary navigation page < Secondary navigation page < Subsection. Another common technique to distinguish different sections of a site is the use of active states for primary navigation. An effective example of this was found in one of the reviewed websites: primary navigation for the infant section was yellow; for the preschool section, green; for school age kids, orange; and for teens, purple. Progress indicators help show how much is left in a process and should be used for involved computer based training.

Consistency and Standards

  1. Establish structural anchors that remain the same from page to page. This allows users to find navigation in the same location on each page. For example, a problem on one of the reviewed sites was login buttons in different places on various pages.

  2. Visually create a clear hierarchy on each page with images, structure, or color so the user naturally focuses on important aspects of each page. The most important information should be above the point at which scrolling is not needed (the fold). For instance, a problem on one page promoting purchase was the "add to cart" button below the fold. Less important information can be lower, provided there is a compelling reason to scroll down.

  3. Follow industry conventions regarding the placement of navigation. This was a concern on all of the websites. As a general rule, primary navigation buttons are across the top, while secondary navigation goes down the left side of the page. Navigation usually appears "clickable" with a box or a button appearance.

Conclusion

While some may argue that a sleek design has no benefit without depth of content, the opposite is also true: if end users do not have a positive experience on a website, they will not return to explore even the best researched content. Generally, to be innovative it is necessary to master basic usability principles and only stray for a specific purpose. Although there are limitations to heuristic evaluations and Neilson's guidelines, this article provides a starting point for developing FLE usability guidelines while encouraging professionals to be multidisciplinary in a non-traditional way.

References

Dennis, S., & Ebata, A. T. (2005). Family life education on the technological frontier. In S.F. Duncan & H. W. Goddard (Eds.), Family Life Education: Principles and practices for effective family life outreach (pp. 180-219). Thousand Oaks , CA : Sage.

Joshi, A., Mohit, A., Dai, L., Price, K., Vizer, L., & Sears, A. (2009). Usability of a patient education and motivation tool using heuristic evaluation. Journal of Medical Internet Research, 11, e47. doi: 10.2196/jmir.1244.

Kallioranta, S. M., Vlosky, R. P., & Leavengood, S. (2006). Web-based communities as a tool for Extension and outreach. Journal of Extension [On-line], 44(2) Article 2FEA4. Available at: http://www.joe.org/joe/2006april/a4.php

Nielsen, J. (2005). Ten Usability Heuristics. Retrieved from: http://www.useit.com/papers/heuristic/heuristic_list.html

Nielsen, J. (1994). Enhancing the explanatory power of usability heuristics. Paper presented at the Proceedings of the SIGCHI Conference on Human Factors in Computing Systems: Celebrating Interdependence, 152-158.

Safrit, R. D., Edwards, H. C., & Flood, R. W. (2004). An initial assessment of an interactive Web-based Extension curriculum to engage and prepare teens as volunteer teachers. The Journal of Extension [On-line], 42(3) Article 3RIB1. Available at: http://www.joe.org/joe/2004june/rb1.php

Williams, R. (2008). The nondesigners' design book. Berkley, CA: Peachpit.