Literature Review: Accordion Menu
Introduction
The accordion menu is a common interactive element on most modern websites, with numerous implementations in checkout flows, navigational elements, and main body content. The intention behind the accordion menu is straightforward: discrete chunks of text can be hidden behind a label which summarizes or hints at its content, and revealed by the user with a click on an indicative icon. The accordion menu attempts to address the problem of information overload, allowing users who have come to a website with a specific goal the option of processing only that text which is relevant to their goal.
Like any web design element, accordion menus must be utilized with intention, and there exists, at this time, a litany of established best practices—some evidence-based—to guide their implementation. But while these best practices were established with the average web user in mind, we have questions concerning whether accordion menus solve problems in the same way for all web users.
There is relatively limited research examining how low literacy readers interact with websites that are unique to their reading level and distinct from average and higher-literacy readers. The research examining how low literacy readers contend with accordion menus is more limited still. This is particularly problematic today, as accordion menus are starting to find their way onto websites for government services, healthcare, and other resources critical to vulnerable populations, especially when the correlations between socioeconomic factors and low literacy are considered.
We set out to design a study that would shed some light on how low literacy web users navigate content that is housed within an accordion menu. To inform the design of this study, we reviewed the current literature related to several key study considerations: known reading behavior of low literacy users, known behavior of average literacy users interacting with accordion menus and related best practices, and the experimental methods employed when studying web user reading behavior, namely, eye tracking.
Background Information
In 2017, the Programme for the International Assessment of Adult Competencies (PIAAC) found that 49% of America’s population read at a basic or below basic reading level. Those with low literacy skills--which refers to those who read at a basic or below basic reading level--face countless challenges in their everyday lives. They struggle when it comes to filling out forms, understanding medical information, and making good financial decisions as consumers. In Amy Rea’s “How Serious Is America’s Literacy Problem?”, the author portrays the number of people who can’t read or can barely read as a national crisis with wide-ranging effects.
In the United States, literacy is defined as “an individual’s ability to read, write and speak, compute and solve problems at levels of proficiency necessary to function on the job and in society” (National Literacy Act of 1991). The National Center for Education Statistics further defines literacy across four distinct levels--below basic, basic, intermediate, and proficient. People with below basic literacy skills can easily identify information in short texts, mainly relying on basic vocabulary to achieve tasks. They struggle navigating through digital texts and making use of features specific to digital texts. They can perform simple mathematical operations, mainly addition.
A person with basic literacy levels is more capable of reading and understanding information, however, like below basic literacy readers, the text must be short. They can make low-level inferences or identify simple paraphrases, but they also struggle to understand dense, lengthy texts or navigate more complex online digital documents. While they are able to compare and contrast information, these readers struggle with interpreting or evaluating one or more pieces of information. Additionally both levels--which will subsequently be referred to as adults with “low literacy”-- struggle with tasks that require them to construct meaning across larger chunks of text. Low literacy readers find themselves distracted from competing information, giving more attention to irrelevant or inappropriate content than more proficient readers.
Multiple higher-level brain processes--known as executive functions--are required to read competently (Jacobson et. al, 2017). Research suggests that people with reading difficulties struggle with numerous cognitive processes related to comprehension, such as speed of processing, auditory sustained attention, fluency, visual-spatial abilities, and other skills in which executive functions are involved. Working memory plays a significant role in all components of reading while attentional switching has been linked to reading fluency (Jacobson et. al, 2017). Consequently, for those with low literacy skills, reading puts a huge load on working memory and visual attention (Jarrett et. al, 2017).
With the aid of eye tracking systems, researchers Summers and Summers (2006) found that low literacy users struggle with scanning text, instead reading nearly every word on a page. As a result of the increased cognitive load required for them to process the text, lower literacy users have a narrower field of view, meaning they’re less likely to notice peripheral content, potentially overlooking relevant content, search signposts, and markers of information scent.
Lower literacy users are also uniquely challenged when it comes to navigating certain textual features; they have a tendency to skip large sections of content when confronted with dense passages of text, long pages requiring scrolling, numerals, difficult, long, or unfamiliar words, parenthetical text. Additionally, these users have a tendency to fixate on hyperlinks while skipping over non-hyperlinked text, a behavior which risks diverting their focus away from the main content – particularly if links are located in the margins of the page. Because of how cognitively taxing reading is for lower literacy, they tend to “satisfice” quickly, i.e. they will make navigational decisions based on what they consider to be “enough” information, though it may, in actuality, be incomplete or vague, or lead them away form their target content (Coulter & Summers, 2014). Summers and Summers (2006) also found that low literacy users have a tendency to avoid using search engines due to the challenging format. The authors point out Google’s search results as an example, noting the text-heavy results page, “frequently contain extraneous or confusing words, some text excerpts pulled from page content that are often not even complete sentences, and funny-looking, hard-to-read URLs” (2006). Additionally, not all search engines account for misspellings in search queries. In general, reading can be a challenging and exhaustive task for low literacy adults that they soon become mentally overwhelmed due to the complexity of the information and give up.
Low literacy skills in adults are correlated with a multitude of contributing factors affecting the individual, including as a result of a learning disability, hearing or vision loss, speaking English as a second language, poverty, or other socioeconomic factors. In the United States, low literacy adults make up a significant portion of the national population. Furthermore, low literacy rates are not distributed equitably across demographics: 42% of white adults are considered to have low literacy skills, as compared with 77% of black adults and 68% of Hispanic adults. Additionally, over half of those with low literacy levels are unemployed or out of the labor force. What’s more concerning is that the 2017 survey showed that 69% of adults with basic or below basic literacy levels reported their health as “fair” or “poor” (U.S. Dept of Education, 2017). Literacy rates and well-being are positively and significantly correlated; several research studies have shown that low literacy skills are associated with worse health outcomes (Lincoln et. al. 2015). Furthermore, the World Health Organization (WHO) indicates that poor health literacy results in “Less healthy choices, riskier behaviour, poorer health, less self-management, and more hospitalization” (Kickbusch et. al, 2013).
Indeed, low literacy is a national crisis, affecting one in five Americans, and this crisis is only compounded by the obstacles low literacy presents to these individuals’ access to basic services and health and economic opportunities. Fortunately, research has identified ways to increase the readability of text for low literacy adults, and help them succeed at tasks requiring textual comprehension. Summers and Summers suggest displaying large text (at least 14 pt) written at a sixth to eighth grade reading level, and using short sentences and paragraphs. Because of how easily low literacy users can be distracted, they also recommend reducing the number of links present within text (2006). Critically, Summers and Summers’s suggested supports for low literacy readers doesn’t stop at textual composition; overall site structure should guide users along a linear information path, reducing the need for low literacy readers to rely on wayfinding or ancillary information scent.
In Rhetorical Accessibility, the authors recommend presenting information using a “bite to snack to meal” approach; starting with the key message and then following with additional details and more details. The authors write:
For people who have trouble reading, the ‘bite’ may be all they need--if the bite conveys the key message. With a little more effort, they may take in the ‘snack’--a few sentences, short paragraphs, or set of relevant questions and answers. That leaves the ‘meal’ for those who need the details or have the time, stamina, or ability to read in depth. (Jarrett et. al, 2017).
This approach is similar to an interaction design pattern known as “progressive disclosure,” i.e. progressively revealing information to the user in sequence, so as to avoid information overload. The concept of progressive disclosure forms the basis of our research.
Accordion Menus
Accordion menus are an interactive webpage design element providing users with the ability to show or hide content based on its relevance to them. A key use case for accordion menus is when a page contains a large amount of related, yet modular information, only a portion of which may be relevant to a given user segment. “By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter” (Loranger, 2014). A 2017 study exploring the use of collapsible accordion menus to present electronic health record (EHR) notes for physicians supports this use case, finding that physicians acquired information about their patients more quickly, more accurately, and more efficiently when using the accordions as compared with the standard EHR format, which the authors described as “long and challenging to read” (Belden et al, 2017). Conversely, the use of accordion menus may result in information being completely ignored. Loranger notes that, “Headings and titles must be descriptive and enticing enough to motivate people to ‘spend’ clicks on them” (Loranger, 2014). Our research aims to explore the possible advantages low literacy users may gain using accordion menus. Our question for this research study is: Does progressive disclosure, in the form of accordion interface design, improve the readability of webpages for low literacy users?
While the efficacy of proper accordion menu implementation has been established with average literacy readers, the number of relevant peer reviewed research studies using eye tracking on accordion menus and with participants that have low literacy is scant. To better understand where these gaps in knowledge persist, and to inform our approach to study design, we first looked at sources relevant to accordion menu implementation. Several studies have shown that situating the according-indicating icon to the left of the label results in quicker time-to-acquisition and shorter overall task times. “In every case, designs with icons to the right resulted in slower task times” (Gutin, 2020). Research findings concerning which type of icon to use on accordion menus is less clear. For example, Gutin (2020) found that “in terms of icon choice, results were more difficult to decipher. . . most of the task times did not differ statistically and none of them differed practically.”. Still other research suggests that the caret icon (“^”) most clearly established an expectation of accordion menu interactivity as compared with other commonly utilized icons.
For accordion patterns, people tend to tap fairly equally on the icon and on the label for most standard icons. The only exception is the caret, where people tend to tap somewhat more on the icon, but still 29% of the taps fall on the label… Using a caret is definitely better than using no icon at all or a random icon in terms of conveying the expectation to stay on the page (and open an accordion). (Laubheimer & Budiu).
We would like to be careful not to advocate too strongly for the use of the caret in accordion menu design, for two reasons: (1) the evidence supporting caret icons as a best-practice for accordions is limited; and (2) some research points to other, more important variables affecting affordance. For example, Friedman (2017) places a greater emphasis on a consistency of icon use, both within a given website and in relation to common practice. “In my experience, it appears that the choice of icon doesn’t really matter as long as it isn’t overloaded with various meanings in the same...e.g.,you could potentially use circled plus [sic] to indicate expansion, zooming and a bundle of two items in a pricing plan — and that might introduce confusion” (2017).
Eye Tracking
To produce data in support of our hypothesis, and so that our study would be in conversation with the established research regarding both accordion menu design and low literacy web reading behaviors, we designed our study to incorporate the use of eye tracking equipment. To inform the design of our study, and to ensure the accuracy of our interpretations of the findings, we reviewed the foundational literature regarding this method. “Eye tracking is a process of identifying where someone is looking and how” (Bojko, 2013, p. 4). A typical, current day eye tracker consists of two components. The first component is a source of near-infrared light, which creates the reflection in the eye. The second component is a camera that is sensitive to near-infrared light. The camera is focused on the eye and the reflection is recorded. The eye tracking software then maps out the locations of the gaze and superimposes it onto an image of the stimuli that had been presented to the participant, such as a web page (Bojko, 2013, p. 8). Eye tracking captures foveal vision, i.e.what the eye is fixating on directly, providing information about visual attention, as fixation typically coincides with attention. (Bojko, 2013, p. 19). In eye tracking software, fixations and Saccades are represented as dots and lines, and can be visualized as a static gaze plot or compiled as a gaze video, (Bojko, 2013, p. 236).
What we learn from eye tracking is highly dependent on the study design. It is crucial to provide participants with a task, goal or some context. To be able to interpret the data, it is important to never ask participants to just look at something without an objective, (Bojko, 2013, p. 93). “Special emphasis should be placed on limiting task scope, ensuring clarity and brevity of instructions, and clearly defining task start and end points” (Bojko, 2013, p. 93). Without following this advice your data is harder to interpret, and the potential of eye tracking insights is diminished. Additionally, quantitative analysis should never be performed based solely on visualizations (Bojko, 2013, p. 236). A single gaze pattern can have different meanings, because it depends on what the task assigned to the participant (Bojko, 2013, p. 93). Without a proper setup eye tracking data can be wasted.
We want to know what we can learn from eye tracking that we can’t learn from other methods. Questions about actions, acceptance, comprehension outcomes, and memory are examples of research questions that eye tracking can’t answer. Answers come from observing what study participants do and actively listening to their responses (Bojko, 2013, p. 105). Interpreting eye tracking measurements depends on the stimuli used in the study and task goals. It is important to note that the same measures can have different meanings in different contexts (Bojko, 2013, p. 143). For comprehension tasks you should look for signs of reading difficulties, which may include regressions in the scanpaths, higher fixation density on the text, and longer fixation durations. Success for these tasks depends on understanding content rather than locating targets (Bojko, 2013, p. 266). A number on its own, without anything to compare it to, is neither actionable nor meaningful. As a result, quantitative eye tracking analysis needs to compare between two designs or a design and a benchmark (Bojko, 2013, p. 287). The starting point for quantitative analysis is selecting eye tracking measures. It is crucial that they address the research objectives. Finally, the collected data will be extracted from the software and cleansed (Bojko, 2013, p. 287).
We used eye tracking for our study because people with low literacy will often use strategies to avoid revealing their reading deficiencies. Using eye tracking to observe how people read can provide insights to where they run into difficulties and save them from the burden of explaining why the content is not working for them (Bergstrom & Schall, 2014, p. 334). Eye tracking can also help reduce the cognitive effort required of your participant during a study, because usability tests commonly use the “think-aloud” method, but this is an additional burden on participants. They have to complete tasks and verbalize their thoughts (Bergstrom & Schall, 2014, p. 334). “By understanding the reading process and observing a person’s reading behaviors during an eye-tracking study, we can make inferences about the effort a reader is exerting” (Bergstrom & Schall, 2014, p. 334). One of the most useful applications of eye tracking to low literacy participants is witnessing which parts of an interface are distracting (Bergstrom & Schall, 2014, p. 338).
One eye tracking study assessing how low-literacy adults access health information focused on improving safety information from the CDC. While this study used between subjects methodology and we are using within-subjects, it is helpful as a reference for what we already know about optimal communication formats. They were successful in showing that their revised version (included less text, illustrations, and color to signify section) of the CDC’s safety guide was better at helping people with low literacy understand the content (Bass et al., 2016). These results help strengthen our hypothesis that the accordion menu intervention is better for comprehension than multiple paragraphs of content presented all at once.
Additional limitations come from an examination of search behavior as related to click-down menus, supported by eye tracking evidence. “While it is very likely that users will see one of the initial items, it cannot be assumed that users will have seen intermediate items, particularly for longer menus” (Byrne et al., 2014). An attempt to discern a psychological explanation for menu item search behavior; do users more quickly acquire items at the beginnings and ends of menus? Do they more quickly acquire items that are relevant to their search goals? Both hypotheses were rejected as no statistically significant patterns were found. Each user was likely to have his or her own searching behaviour and this could be affected by other factors such as the graphic design of the menu (DeWitt, 2010).
Conclusion
There are many gaps in research for people with low literacy. As more information comes online, it is imperative that low literacy populations are taken into consideration. Beyond the organization of content, as discussed in this literature review, selecting vocabulary needs to be carefully thought out and validated for efficiency. Vocabulary has at least two dimensions: breadth and depth, but not much research has covered the depth dimension. “Vocabulary depth consists of different components including morphological awareness, semantic relations, and syntactic awareness,” (Tran et al., 2020).The importance of clear communication for people with low literacy can be between life and death, as research on prescription drug warning labels shows. We need to make sure text is simple and that the people in charge of creating the text are properly trained in literacy issues and communication (Wolf et al., 2006). Low literacy is a serious problem in many societies. Information and services will continue to grow online, and it is imperative to make sure that members of our target audiences can read, understand, and act on the information they find (Bergstrom & Schall, 2014, p. 346).
References
Bass, S. B., Gordon, T. F., Gordon, R., & Parvanta, C. (2016). Using eye tracking and gaze pattern analysis to test a “dirty bomb” decision aid in a pilot RCT in urban adults with limited literacy. BMC Medical Informatics and Decision Making, 16, 67. https://doi-org.proxy-ub.researchport.umd.edu/10.1186/s12911-016-0304-5
Bergstrom, R. J., & Schall, A. (2014). Eye Tracking in User Experience Design (pp. 331 - 346). Morgan Kaufmann.
Bojko, A. (2013). Eye Tracking the User Experience: A Practical Guide to Research (pp. 4 - 287). Rosenfeld Media.
Byrne, M., Anderson, J., Douglass, S., & Matessa, M. (2014, May). Eye Tracking the Visual Search of Click-Down Menu. Carnegie Mellon University. http://act-r.psy.cmu.edu/wordpress/wp-content/uploads/2014/05/chi99menu.pdf
Coulter, A., & Summers, K. (2014). Low Literacy Users. In R. J. Bergstrom & A. Schall (Eds.), Eye Tracking in User Experience Design (1st ed., pp. 331–348). Morgan Kaufmann.
DeWitt, A. J. (2010, November). Examining the Order Effect of Website Navigation Menus With Eye Tracking. The Journal of Usability Studies. https://uxpajournal.org/examining-the-order-effect-of-website-navigation-menus-with-eye-tracking/
Friedman, V. (2017, June 21). Designing The Perfect Accordion. Smashing Magazine. https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/
Highlights of the 2017 U.S. PIAAC Results Web Report (NCES 2020-777). U.S. Department of Education. Institute of Education Sciences, National Center for Education Statistics. Available at https://nces.ed.gov/surveys/piaac/current_results.asp.
Gutin, L. (2020, October 14). Testing Accordion Menu Designs & Iconography. Viget. https://www.viget.com/articles/testing-accordion-menu-designs-iconography/
Jacobson, L.A., Koriakin, T.A., Lipkin, P.H., Boada, R., Frijters, J.C., Lovett, M.W., Hill, D.E., Willcutt, E.G., Gottwald, S., Wolf, M., Bosson-Heenan, J., Gruen, J.R., & Mahone, E.M. (2017). Executive Functions Contribute Uniquely to Reading Competence in Minority Youth. Journal of Learning Disabilities, 50, 422 - 433.
Laubheimer, P. and Budiu, R. (2020, August 23). Accordion Icons: Which Signifiers Work Best? Nielsen Norman Group. https://www.nngroup.com/articles/accordion-icons/
Lincoln, Alisa & Arford, Tammi & Doran, Meghan & Guyer, Margaret & Hopper, Kim. (2015). A preliminary examination of the meaning and effect of limited literacy in the lives of people with serious mental illness. Journal of Community Psychology. 43. 10.1002/jcop.21680.
Loranger, H. (2014, May 18). Accordions for Complex Website Content on Desktops. Nielsen Norman Group. https://www.nngroup.com/articles/accordions-complex-content/
Kickbusch, I., Pelikan Jürgen M., Apfel, F., & Tsouros, A. D. (2013). Health literacy: The solid facts. World Health Organization Regional Office for Europe.
Jarrett, C., Redish, J., & Summers, K. (2017). Designing for People Who Do Not Read Easily. In L. Melonçon, (Ed.). Rhetorical accessability: At the intersection of Technical Communication and Disability Studies (pp. 39–66). Routledge, Taylor & Francis Group.
Ozeri-Rotstain, A., Shachaf, I., Farah, R. et al. Relationship Between Eye-Movement Patterns, Cognitive Load, and Reading Ability in Children with Reading Difficulties. Journal of Psycholinguistic Research 49, 491–507 (2020). https://doi-org.proxy-ub.researchport.umd.edu/10.1007/s10936-020-09705-8
Summers, Kathryn & Summers, Michael. (2006). Reading and Navigational Strategies of Web Users with Lower Literacy Skills. Proceedings of the American Society for Information Science and Technology. 42. 10.1002/meet.1450420179.
Tran, A. H., Tremblay, K. A., & Binder, K. S. (2020). The Factor Structure of Vocabulary: An Investigation of Breadth and Depth of Adults with Low Literacy Skills. Journal of Psycholinguistic Research, 49(2), 335–350. https://doi-org.proxy-ub.researchport.umd.edu/10.1007/s10936-020-09694-8
Wolf, M. S., Davis, T. C., Tilson, H. H., Bass, P. F., 3rd, & Parker, R. M. (2006). Misunderstanding of prescription drug warning labels among patients with low literacy. American Journal of Health-System Pharmacy : AJHP : Official Journal of the American Society of Health-System Pharmacists, 63(11), 1048–1055. https://doi-org.proxy-ub.researchport.umd.edu/10.2146/ajhp050469