Smart Scroller Interface for Section Navigation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional navigational user interfaces, such as scrollbars, are inadequate for efficiently displaying and navigating through large amounts of data on a screen, particularly in contexts like healthcare where quick access to medical data is crucial.
Innovation Solution
A navigational user interface element featuring a bar with equidistant section labels, a highlight indicating the current section, and the ability to click and drag to navigate, snap to the closest section upon release, and transition to editing mode upon label click, enhancing user interaction with graphical user interfaces on touchscreen devices.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If a conventional scrollbar is used to navigate through large amounts of data, then the basic scrolling function is provided, but the navigation efficiency and user experience are insufficient
Solution Approach 1:
The navigational bar is segmented into multiple clickable sections, each representing a specific data section. This segmentation allows users to directly access any section by clicking its label, transforming the linear scrolling process into a segmented navigation structure that improves access efficiency.
Solution Approach 2:
The invention adds a dimensional transformation from traditional vertical scrolling (one-dimensional) to a two-dimensional navigation approach where section labels are displayed horizontally with clickable highlights. This dimensional change enables simultaneous display of multiple navigation options and direct section access, significantly improving navigation efficiency.
2Quantity of substance
If more data sections are displayed on a screen, then the information capacity increases, but the difficulty of locating and navigating to specific sections increases
Solution Approach 1:
The navigational bar serves as an intermediary element between the user and the data sections. It provides a simplified interface with section labels and visual highlights that mediate the interaction, making it easier to locate and navigate to specific sections without overwhelming the user with the full data structure.
Solution Approach 2:
The highlight element uses color changes (visual differentiation) to indicate the current section and provide feedback during navigation. This visual cueing system helps users quickly identify the active section and understand the navigation state, reducing the difficulty of locating specific sections in large datasets.
Data Source
AI summary
A navigational user interface element includes a navigational bar displaying thereon labels associated with a plurality of sections, and a highlight indicating a section of a page that a user is currently viewing. The navigational user interface element is configured to allow a user to click on the highlight and drag it to effect navigation to a section associated with a displayed label. The navigational user interface element is configured to, when the highlight is clicked and dragged and then released, snap the highlight to the section label the highlight is closest to when the highlight is released, and display that same section. The navigational user interface element is configured to, when a label is clicked, effect navigation to the section corresponding to that label.