InnovationQ will be updated on Sunday, Oct. 22, from 10am ET - noon. You may experience brief service interruptions during that time.
Browse Prior Art Database

Progressively Disclosed/Compressed Breadcrumb Model for Complex Hierarchies

IP.com Disclosure Number: IPCOM000240335D
Publication Date: 2015-Jan-23
Document File: 7 page(s) / 338K

Publishing Venue

The IP.com Prior Art Database


Disclosed is a method to balance the user’s ability to view content in a complex hierarchy by progressively displaying the location of the content in the document hierarchical structure. The method shows the breadcrumb hierarchy tree in three levels: the current page that is displayed in the content area and two other levels.

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 42% of the total text.

Page 01 of 7

Progressively Disclosed/Compressed Breadcrumb Model for Complex Hierarchies

Browsing for information on small devices such as smart phones can be difficult considering the limited screen real estate . This experience is further exacerbated when navigating large volumes of structured information using breadcrumbs. Two options of breadcrumb designs are frequently used on the Internet, specifically on smart phones. One is a string of links separated by a "greater than" arrow (>). Another is a graphical representation of a series of large, thick right-pointing arrows each containing a text string link

These two breadcrumb designs are sufficient for displaying navigation up to three of four levels of hierarchical information without causing clutter, especially if the linked text is short. However, these designs are insufficient when displaying a document nested in a hierarchy of five levels or more containing long, descriptive linked text. The screens of smart phones are filled with breadcrumbs; perhaps not all levels are visible in the initial screen and content and the area of interest is hidden . (Figures 1 and 2)

Figure 1: Lengthy breadcrumbs with long descriptive links separated by a "greater than" arrow

Figure 2: Lengthy breadcrumbs with long descriptive linkable text within an arrow graphic

The core problem lies in the limitation of small screens for smartphones . Considering that a user's main goal when landing on a content page is to read information, hindrances in the user interface (UI) must be minimized. The secondary use case of accessing and reading breadcrumbs falls to a lower priority. The design must reflect this goal.


Page 02 of 7

The novel solution is a breadcrumb design that balances the user's ability to view content (e.g., topics, news articles, etc.) and progressively display the location of the content in the document hierarchical structure. (Figure 3)

Figure 3: Position of Breadcrumbs icon (1) in the header only visible in the topic page and the content area (2)

If interested in navigating through the content's structure away from the current page, the user can access the breadcrumbs by tapping the breadcrumbs icon to view other topics at a different level inn the hierarchy. (Figure 4)

Figure 4: Opaque breadcrumbs UI window (1) open superimposed over the content area (2)


Page 03 of 7

The breadcrumbs UI window appears fully opaque overlapping the content. The breadcrumbs UI window is broken down in to the following components: (Figure 5)

1) Up arrow
2) Keylines separating the three level of the hierarchical breadcrumbs
3) Down arrow (disable state)

4) Level 3 of the hierarchical tree emboldened indicating that this topic is being displayed in the content area
5) Breadcrumb icon
6) "Nipple" pointing from the breadcrumbs menu to the breadcrumbs icon
7) Breadcrumb drop-down
8) Level 1 of the hierarchical tree
9) Level 2 of the hierarchical tree
10)Check mark icon


Page 04 of 7

Figure 5: Breadcrumbs window elements