FIL2/RED3. Difficulty finding/locating/distinguishing search features at different levels

Definition

A situation that arises from difficulty finding/locating/distinguishing search features at different levels (e.g., search within an institution (text with tooltip) A feature that allows users to search for information, resources, or content specifically within the context of a particular organization, such as a library website, and library collections. , search within a digital library, search within a collection (text with tooltip) A feature that allows users to perform a targeted search within a specific digital collection rather than searching the entire database or website. , and search/filter within search results) due to inappropriate placement and inappropriate/unclear labeling.

Factors Leading to the Situation

  • Complex information presentation: illogical structure (text with tooltip) A structure of a digital library (DL) that does not present page elements in a logical way.
  • Complex information presentation: mismatched with users’ cognitive schema (text with tooltip) A mental framework that assists individuals in understanding complex concepts and making more informed decisions.
  • Inappropriate labeling: unlabeled active elements (text with tooltip) An interactive HTML component that reacts to user actions such as input, textarea, button, and 'a' tags.  or features

Guidelines

  1. Ensure that search features at different levels are placed in appropriate/relevant
  2. Ensure the labels for search features are intuitive and specify different levels of searches.

Rationale for Suggesting the above Guidelines

DLs (text with tooltip) The acronym for digital library (DL) provide various search features at different levels (e.g., search within an institution (text with tooltip) A feature that allows users to search for information, resources, or content specifically within the context of a particular organization, such as a library website, and library collections. , search within a digital library, search within a collection (text with tooltip) A feature that allows users to perform a targeted search within a specific digital collection rather than searching the entire database or website. , and search/filter within search results). The absence of a logical structure that introduces search features at different levels could lead to users’ difficulty finding or locating such features. Meanwhile, inappropriate or unclear labeling can also cause confusion for BVI (text with tooltip) The acronym for Blind and Visually Impaired. It refers to BVI users who rely on screen readers to interact with digital libraries (DLs).  users, especially when distinguishing similar search features. As a result, the guidelines suggest providing a logical structure where search features at different levels are placed in appropriate locations and providing clear and intuitive labels for diverse search features.

Techniques and Methods to Comply with a Specific Design Guideline

1.1. Place search within a digital library and/or search within an institution (text with tooltip) A feature that allows users to search for information, resources, or content specifically within the context of a particular organization, such as a library website, and library collections.  (e.g., a library, a museum) at the top of the page.
1.2. Place search within a collection (text with tooltip) A feature that allows users to perform a targeted search within a specific digital collection rather than searching the entire database or website.  feature below the collection title.
1.3. Place search within search results on top of the search results to refine them.
1.4. Use landmarks to designate and label different levels of searches
2.1. For search-box-based search feature labels, provide semantic HTML (text with tooltip) A set of elements that clearly describe their purpose and content to improve accessibility and provide meaningful structure to web pages.  , such as “search within a collection” and “search this collection.”
2.2. For search-box-based (text with tooltip) A feature that revolves around or is centered on the use of a search box for inputting queries and retrieving information search features, use the placeholders (text with tooltip) An HTML attribute of the input tag that indicates the expected input for a field, such as an example value or a short description of the required format.  attribute, such as “placeholder = “search within collection” and use aria-describedby.

Features Suggested for Users

1.1.1. “Search within a digital library” and/or “ search within an institution (text with tooltip) A feature that allows users to search for information, resources, or content specifically within the context of a particular organization, such as a library website, and library collections. ” (See example 1.1.1.a1. and 1.1.1.a2.)
1.2.1. “ Search within a collection (text with tooltip) A feature that allows users to perform a targeted search within a specific digital collection rather than searching the entire database or website. ” (See example 1.2.1.a.)
1.3.1. “Search/filter” within search results (See example 1.3.1.a1. and 1.3.1.a2.)
1.4.1. Different levels of search features
2.1.1. “Search buttons/icons” labels (See example 2.1.1.a./2.2.1.a1.)
2.2.1. Search box prompts (text with tooltip) A placeholder text that appears inside a search box to guide users on what they can search for and search from.   (See example 2.2.1.a2.)

Examples of Best Practice

1.1.1.a1. “Search within a library website” and “search within library collections”

In FIL2/RED3 Figure a1, the DL provides options (search website and search collection) using a dropdown feature for users to choose from before making the search (Click here to view the digital library).

This image shows dropdown feature with the HTML code needed to implement a dropdown feature.

FIL2/RED3 Figure a1. An example of codes for different levels of searches

1.1.1.a2. “Search within a library website” and “search within library collections”

FIL2/RED3 Figure a2 shows search features with different scopes and they are placed at easily identifiable locations. This allows users to easily locate and utilize these search features when searching through the DL.

This image illustrates an example of easily identifiable locations for search within a library or collection.

FIL2/RED3 Figure a2. An example of search features indicating their scope

1.2.1.a. “Search within a digital collection”

The FIL2/RED3 Figure a3 illustrates that the scope of the search feature is limited to “search this collection.”

This image presents a search box for searching within a digital collection.

FIL2/RED3 Figure a3. An example of search within a digital collection feature indicating their scope

1.3.1.a1. “Search filters” to refine a search

The search/filter within the search results is positioned near the top for easy identification and refinement (FIL2/RED3 Figure a4).

This image shows before and after interacting with dropdown menus labeled the 'Add filters’.

FIL2/RED3 Figure a4. An example of search filter positioned at the top of the search results

1.3.1.a2. “Search filters” to refine a search

The “refine” feature is located near the top for easy identification and refinement (FIL2/RED3 Figure a5).

This image shows a search filter for refining a search, labeled ‘Refine.’

FIL2/RED3 Figure a5. An example of search filter positioned at the top of the search results

2.1.1.a/2.2.1.a1. Provide semantic HTML to comprehend search buttons/icons labels

In FIL2/RED3 Figure a6, the search button (“Submit search,”) includes an ARIA label (text with tooltip) An HTML attribute that provides a text label for an object, such as a button. to clarify its purpose. This attribute ensures the search button and input field are properly described for users relying on screen readers.

This image shows an example of semantic HTML with accompanying HTML code.

FIL2/RED3 Figure a6. An example of ARIA code for search button

2.2.1.a2. Provide a placeholder attribute

FIL2/RED3 Figure a7 presence the use of a placeholder to specify the search type. This helps users to know what to search for and where they are searching from (Click here to view this example).

This image shows HTML codes that illustrates the use of the placeholder attribute in a search input field. The placeholder, "Search across collections," guides users on what to search for and the context of the search.

FIL2/RED3 Figure a7. An example of placeholder for search box

Examples of Poor Practice

1.1.1.b. Difficulty finding/locating/distinguishing search feature at different levels

As shown in FIL2/RED3 Figure b1, the search feature is situated at the middle of the page. Therefore, for novice users they would have to scroll and venture around the page to locate the main search feature of a library.

This image shows an example of inappropriate placement of a search box within a library.

FIL2/RED3 Figure b1. Screenshot of difficulty finding/locating/distinguishing search feature at different levels

1.3.1.b. Difficulty finding/locating/distinguishing search feature at different levels

The participant was not aware of the location of the search button as it was at the bottom of the advanced search feature as indicated in the red box in FIL2/RED3 Figure b2. The inappropriate placement of the search filter feature led the participant to seek for the button for a longer period of time.

“Well, you know what? Let’s see. No, no, no. Of course the search filter button. Poster ah. OK… no, no, no. I’m just trying to find the search filter button now…. Took me 5 minutes to find the search filter button.” (IP10-AL)

This image shows an example of inappropriate placement of a search filter feature.

FIL2/RED3 Figure b2. Screenshot of difficulty finding/locating/distinguishing search feature at different levels

2.1.1.b. Difficulty finding/locating/distinguishing search feature at different levels

The FIL2/RED3 Figure b3 shows that the system presented the same search feature labels for different search features, each with different levels of search functionality.

“But fun thing that’s seems to confuse me a little bit. I always of the 2 search. Two search Options… So with the search, icons. It was very confusing because there were 2 options so I couldn’t tell you which was to be used, what situation.” (AT19-LM)

This image shows search features with identical labels that lead to different levels of search (e.g., website versus collection).

FIL2/RED3 Figure b3. Screenshot of difficulty finding/locating/distinguishing search feature at different levels

Resources

See also: