Scrollable Filter Chip Controller for Compact GUI Display
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Graphical user interfaces face challenges in displaying a large volume of data in compact spaces without cluttering the interface, making it difficult for users to efficiently interact with and interpret the information.
Innovation Solution
The implementation of a filter chip controller that allows for horizontal scrolling of filter chips, enabling users to easily manage and modify filters within a limited display space by rendering scroll toggles when content overflows, and providing a 'More Filters' modal for additional options, thereby maintaining a clutter-free and user-friendly interface.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If filter chips are displayed in a compact space, then the interface remains clean and uncluttered, but users cannot easily access all filters when there are many options
Solution Approach 1:
The patent implements horizontal scrolling capability that transforms the vertical stacking of filter chips into a horizontal navigation experience. When the filter section contains more filters than can fit in the visible area, users can scroll horizontally to access additional filters, effectively utilizing the horizontal dimension to expand capacity without increasing vertical space occupation.
Solution Approach 2:
The filter section transitions from a static display to a dynamic scrolling container. The container automatically detects when its content width exceeds its available space and enables horizontal scrolling, allowing the interface to adapt its behavior based on the number of filters present.
2Adaptability or versatility
If all filter options are displayed at once, then users have full access to all filters, but the interface becomes cluttered and difficult to navigate
Solution Approach 1:
The filter section is segmented into a visible area and additional scrollable content. Filters are divided into those that fit within the visible container and those that require horizontal scrolling to access, creating a structured organization that maintains interface simplicity while providing comprehensive filter options.
Solution Approach 2:
Instead of displaying all filters simultaneously in a cluttered manner, the interface displays only the necessary portion (filters that fit in the visible area) and provides a scrolling mechanism for additional filters, applying partial action to maintain cleanliness while offering full functionality when needed.
3Area of stationary object
If the filter section width is limited to fit the view, then the interface maintains a compact layout, but overflowed filter chips are cut off and inaccessible
Solution Approach 1:
Horizontal scrolling acts as an intermediary mechanism between the limited container width and the need to display all filter chips. The scrolling capability serves as a mediator that allows users to access overflowed content without requiring the container to expand its width, preserving the compact layout while preventing information loss.
Data Source
AI summary
Methods, apparatus, systems, and articles of manufacture are disclosed to display data in compact spaces. Examples instructions that, when executed, cause a processor to at least render a view container and a scroll container included in a graphics user interface (GUI); in response to a left edge of the scroll container being closer to a left side of the GUI than a left edge of the view container, render a left scroll toggle actionable to scroll the scroll container left; and in response to a right edge of the view container being closer to the left side of the GUI than a right edge of the scroll container, render a right scroll toggle actionable to scroll the scroll container right.