F1. Confusion about digital library structure or browse categories

Situation Definition:

A situation that arises from a user’s disorientation within the overall structure, layout, or browse categories of a DL.

Factor(s) Leading to the Situation:

    • Complex information presentation:

    • Complex information presentation:

    • Complex information presentation:

    • Complex information presentation:

    • Inadequate knowledge:

    • Inadequate support:

    • Inappropriate labeling:

    • Inappropriate labeling:

    • Inappropriate labeling:

    • Unclear instruction:

    • Unclear instruction:

Guideline or Design Recommendation:

    1. Maintain a logical hierarchical structure for a DL, including page layout, content organization, and browse categories
    2. Ensure that structural elements have meaningful

    3. Explain the structure of a DL and its

Rationale and Objective:

For

users, a complicated DL structure may pose a challenge for navigating a DL. They may be unable to recognize the structure of a DL, thereby failing to determine the appropriate course of action (1). A simple, predictive, and hierarchical structure is more easily understood.

are one of the main features that allow for BVI users to interact with a DL, but due to sophisticated information presentation, browse categories may be too complicated for users, and they avoid taking this route.

Techniques and Methods:

1.1. Organize a DL from general to specific in its overall structure and browsing structure up to a maximum of three nested levels
1.2. Place the most frequently used information at the top of each level of its structure
1.4. Maintain a logical hierarchical heading structure across a DL
1.5. Maintain a consistent and simplified page layout across a DL
1.6. Provide options for

by subjects, creators, etc.
2.1. Assign meaningful and unique titles to individual sections of the DL
2.2. Assign meaningful and unique labels with hyperlinks for each of the

and subcategories
3.1. Provide instruction (help) that explains the DL structure and browse category structure

Recommended Features:

1.1. General-to-specific structure (See example 1.1/1.2/1.5)
1.2. Frequently-used information at the top level (See example 1.1/1.2/1.5)
1.3.a. Single-column layout, if possible (See example 1.3.a)
1.3.b. Linear structure (See example 1.3.b)
1.4. Nested heading structure (See example 1.4/1.6)
1.5. Consistent layout (See example 1.1/1.2/1.5)
1.6. Facet-based browsing (See example 1.4/1.6)
2.1. Section titles (See example 2.1)
2.2. Meaningful browse category labels with hyperlinks (See example 2.2)
3.1. Tutorial/instruction/tips (See example 3.1)

Examples:

1.1/1.2/1.5. General to specific structure: Good design

HathiTrust’s structure starts from a simple and general homepage to a specific item’s content page. Also, webpages at the same level have a consistent layout.

    • Homepages have a simple and general layout and frequently used information with the most important features (e.g., search box and Help) located at the top level.

HathiTrust search interface featuring basic menu in top left corner (Home, About, Collections, Help, Feedback) and search bar and options at top of page

    • The search results list page provides more information and additional features compared to the homepage. Important information (e.g., number of search results) is located at the beginning of the section.

HathiTrust search results page with number of search results at top of page and important features (filters) on the lefthand side of the page

    • Content of an item provides more specific information and features. All item pages have a consistent layout.

HathiTrust item page with features such as About this Book, Get this Book, and Download on the left and interactive features such as skips to end or next page buttons on the right

1.3.a. Single-column layout: How-to example

Single-column layouts can be used in detail pages. Three-column layouts can be used for the homepage, landing pages, and main navigation. Fourth-column layouts can be used for the filters page and detail pages within page navigation. (European Commission, 2018).

1.3.b. A linear structure in the page layout: Good design

European Commission page uses a linear structure all the time.

Example of a linear structure in the page layout with content flowing down the page

1.4/1.6. Nested Heading and facet-based browsing: Good design

DPLA uses headings for main contents such as search results (h1), search features (h3) in the filter section “refine your search” (h2), and item names (h2) in the search results list.

Also, users can narrow down search results using facet-based filters in the “Refine your search” section.

Results page with headings hierarchy identified using h1, h2, and h3 elements

2.1. Section title: How-to example and Good design

  • The following example shows that there is no section title in the right text section. BVI users might be confused about what it is and where they are now.

March on Milwaukee page that has no section title

  • Adding a section title before the content allows BVI users to immediately identify what it is.

March on Milwaukee page with a section title reading "About March on Milwaukee Digital Collections" directly before the content

2.2. Browse category labels with hyperlinks: How-to example and Good design

  • Provide browse categories with hyperlinks to allow BVI users to explore
Browse menu with hyperlinked menu items sorted categorically by Events and PeopleBrowse menu with hyperlinked menu items sorted categorically by Places and Organizations
  • Add a section name with a heading tag to allow BVI users to explore easily
Content page with added section name "About the March on Milwaukee project" before content
  • Use a “Search” label for the search box, and consistently use a “Go” label for facet-filters. Consistency in labeling helps users to understand the structure of a DL.

March on Milwaukee page with Search button renamed Go for consistency

  • Add Link and Date into Browse category labels so BVI users can know what it is and where it goes

"Brown v. Board of Education" label renamed "May 17, 1954 Brown v. Board of Education" to provide more detailed information

3.1. Tutorial/instruction/tips: How-to example and Good design

  • Brief instructions are added to explain the browse structure, and section header labels are applied so that the instructions can also be skipped by screen reader.

Browse interface with description added: "The Browse page is a series of links on various topics about the March on Milwaukee. Eight categories are listed: Events, people, places, organizations, subjects, media types, newspapers, and Collections A-Z. Below each of these headings are links to important events or topics, in alphabetical order."

  • Descriptions are added for categories (e.g., Timeline, Key terms) so that BVI users easily know what they are.

Key Terms page with description added: "Key Terms includes a list of important topics related to March on Milwaukee, along with a brief description of these topics..."

 

Timeline page with Title and description added: "Timeline, The Timeline feature is primarily a visual feature that contains dynamic Web content. It offers an alternative approach for accessing information on the dates and locations of events related to the March on Milwaukee..."

Related Resources:

    1. Xie, I., Babu, R., Joo, S., & Fuller, P. (2015). Using digital libraries non-visually: Understanding the help-seeking situations of blind users. Information Research: An International Electronic Journal, 20(2), paper 673. Retrieved from http://InformationR.net/ir/20-2/paper673.html.
    2. Croxford, S., & Rundle, C. (2013). Blind People and Apps on Mobile Phones and Tablets–Challenges and Possibilities. In Contemporary Ergonomics and Human Factors 2013(Vol. 343, No. 346, pp. 343-346). ROUTLEDGE in association with GSE Research.
    3. European Commission. (2018). Grid and page layout. Retrieved from https://ec.europa.eu/info/resources-partners/guidelines-websites-under-eceuropaeu/grid-and-page-layout_en#grid
    4. Jasek, C. (2004). How to design library websites to maximize usability. Elsevier: San Diego.
    5. Lynch, P. & Horton, S. Site Structure. Retrieved from http://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html
    6. W3C. (2018). WCAG 2.1 Guideline 2.4 Navigable. Retrieved from https://www.w3.org/TR/WCAG21/#navigable
    7. W3C. (2018). WCAG 2.1 Guideline 2.4 Navigable. Retrieved from https://www.w3.org/TR/WCAG21/#navigable
    8. W3C. (2018). WCAG 2.1 Guideline 3.2 Readable. Retrieved from https://www.w3.org/TR/WCAG21/#readable
    9. W3C. (2018). WCAG 2.1 Guideline 3.2 Predictable. Retrieved from https://www.w3.org/TR/WCAG21/#predictable
    10. Whitenton, K. (2013). Flat vs. Deep Website Hierarchies. https://www.nngroup.com/articles/flat-vs-deep-hierarchy/

See also:

Help-seeking Situations > F. Confusion about multiple programs, DL structures, or search results structure

Contact Us: Professor Iris Xie (hiris@uwm.edu), University of Wisconsin – Milwaukee