 |
December 2011
|
December 2011 // Volume 49 // Number 6 // Tools of the Trade // v49-6tt6
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.
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).
| Usability Heuristic | Types of Questions Asked |
| 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? |
| Does the site use familiar concepts and language? Does the design organize information in a logical way? |
| 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? |
| 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? |
| How successful is the site at preventing errors? |
| 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? |
| Does the design provide short cuts for experienced users without excluding novice users? |
| 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? |
| When errors do occur, is the help material expressed in simple, straightforward language? |
| 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).
| 1st & 2nd Site | 3rd Site | 4th & 5th Site | |
| Number of Total Issues | 7 | 17 | 27 |
| Visibility of System Status | |||
| Lack of feedback | 0 | 3 | 0 |
| Labeling problems | 0 | 1 | 2 |
| Progress bar needed | 0 | 0 | 1 |
| Match to Real World | |||
| Unfamiliar concepts/language | 1 | 0 | 0 |
| User Control | |||
| Back button problems | 0 | 0 | 1 |
| Can't return to previous page | 0 | 0 | 1 |
| Consistency and Standards | |||
| Inconsistent from page to page | 0 | 2 | 2 |
| Inconsistent with industry | 2 | 4 | 5 |
| Error Prevention | |||
| Errors found | 0 | 0 | 2 |
| Recognition Rather than Recall | |||
| Need to learn design | 1 | 0 | 3 |
| Recall necessary | 1 | 0 | 0 |
| Aesthetic and Minimalist Design | |||
| Lacks hierarchy | 0 | 2 | 4 |
| Heavy on text | 1 | 0 | 1 |
| Visual or audio "noise" | 1 | 5 | 3 |
| Help users Recognize, Diagnose, Recover | |||
| Unhelpful error messages | 0 | 0 | 1 |
| Help and Documentation | |||
| Help information problems | 0 | 0 | 1 |
| Avg. frequency of issues | 3.43 | 2.29 | 2.30 |
| Avg. potential impact | 2.50 | 2.85 | 3.17 |
| Complexity of Site(s) | 1 | 2 | 3 |
Recommended Best Practices
Heuristic analysis of these sites revealed seven best practices for avoiding the most common problems.
Aesthetic and Minimalist Design
- 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.
- 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.
- 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
- 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
- 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.
- 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.
- 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.