Dynamic List Scroll Bar Index Segmentation for Mobile Navigation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Mobile devices face difficulties in easily displaying and selecting indices for lists containing numerous characters, numbers, or symbols, as the large number of options makes it hard to generate and choose the correct index for scrolling to a specific item.
Innovation Solution
A method is provided for controlling a list scroll bar that includes displaying a partial area of the list, expanding and displaying a first index area for the first item, downscaling a second index area, and representing it with a representative index, and upon selection, expanding the second index area while downscaling the first index area, allowing for easy navigation through the list.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Quantity of substance
If all indices corresponding to numerous characters, numbers, or symbols are displayed in the list scroll bar, then complete index coverage is achieved, but the scroll bar becomes too crowded and difficult to navigate
Solution Approach 1:
The list scroll bar is segmented into multiple index areas, each corresponding to a different language. Each index area is further divided into expanded and collapsed states, allowing indices to be organized hierarchically by language and then by individual characters/numbers/symbols.
Solution Approach 2:
The index areas are made dynamic through expansion and collapse operations. When a user selects an index area, it expands to show all indices within that language, while other index areas collapse to conserve space. This dynamic behavior allows the scroll bar to adapt its display based on user interaction.
2Loss of information
If the list scroll bar displays detailed index information for all languages, then comprehensive navigation is enabled, but the available screen space is insufficient
Solution Approach 1:
Index areas are nested within the list scroll bar structure, with each language's indices contained within its own index area. The index areas themselves are nested within the overall scroll bar container, creating a hierarchical nesting arrangement that efficiently uses available space.
Solution Approach 2:
The scroll bar dynamically adjusts the display state of index areas based on user selection. Selected index areas expand to show detailed indices, while unselected areas collapse to minimal representation, allowing the scroll bar to maintain comprehensive information while adapting to limited display space.
3Adaptability or versatility
If multiple index areas are displayed simultaneously in the scroll bar, then navigation options increase, but the complexity of the scroll bar interface increases
Solution Approach 1:
Different index areas are given distinct visual characteristics based on their language. Each index area can be styled differently to represent its language origin, and the expansion/collapse behavior is applied locally to each area rather than uniformly to the entire scroll bar.
Solution Approach 2:
The scroll bar interface dynamically simplifies itself based on user interaction. When no index area is selected, all areas remain collapsed showing only language identifiers. When an area is selected, it expands while others collapse, dynamically adjusting the level of detail shown based on current user focus.
Data Source
AI summary
A method controls a list scroll bar, including displaying a partial area of a list having at least one first item, and a list scroll bar to scroll the list; expanding and displaying a first index area having at least one first index corresponding to the at least one first item in the list scroll bar; downscaling a second index area having at least one second index corresponding to at least one second item different from the at least one first item and displaying a representative second index representing the second index area in the list scroll bar; and upon detecting a gesture to select the representative second index, expanding and displaying the second index area in the list scroll bar while downscaling the first index area and displaying a representative first index representing the first index area in the list scroll bar.