Circular Node Navigation for Hierarchical Data on Small Screens
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Navigating hierarchical node structures on small-screen devices is challenging due to clutter and complexity, as existing GUIs often display multiple levels simultaneously, overwhelming users with excessive information.
Innovation Solution
A graphical user interface is designed to display only one or two levels of a hierarchical node structure at a time, with graphical elements arranged in a circular formation around a central parent node, allowing users to traverse up and down the structure by selecting nodes, and animating transitions to maintain a clear and focused interface.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Quantity of substance
If multiple levels of hierarchical node structure are displayed simultaneously in existing GUIs, then comprehensive information is provided, but the interface becomes cluttered and overwhelming for users
Solution Approach 1:
The hierarchical node structure is segmented into multiple circular arrangements, with each circle representing a different level of the hierarchy. Only one level (one circle) is displayed at a time, preventing information overload while maintaining comprehensive access to all nodes through sequential navigation between circles.
Solution Approach 2:
The patent transitions from a traditional two-dimensional flat layout to a multi-dimensional circular arrangement where nodes are organized concentrically. This dimensional reorganization allows the system to manage complex hierarchical data by distributing nodes across multiple circular levels, reducing visual clutter while preserving structural relationships.
2Quantity of substance
If traditional tree-like hierarchical structures are displayed on small-screen devices, then complete hierarchy is shown, but the interface becomes cluttered and difficult to navigate
Solution Approach 1:
The hierarchical information is segmented into discrete circular levels, with each circle containing nodes from a specific hierarchy level. This segmentation reduces interface complexity on small screens by presenting only one level at a time, while the complete hierarchy remains accessible through navigation between circles.
Solution Approach 2:
The patent employs circular arrangements to organize nodes, replacing traditional linear or rectangular layouts. This curved, radial organization optimizes space utilization on small screens and creates a more intuitive navigation pattern, reducing perceived interface complexity while maintaining complete hierarchical information across multiple circles.
3Loss of information
If all levels of hierarchical structure are displayed at once, then full context is available, but touch device usability deteriorates due to small interaction targets and clutter
Solution Approach 1:
The display is segmented into separate circular levels, showing one hierarchy level per circle. This prevents information overload and creates adequate spacing between interaction targets, improving touch usability. Full context is preserved because users can navigate between circles to access any level of the hierarchy.
Solution Approach 2:
The interface dynamically transitions between different circular levels based on user interaction. When a user selects a node, the system dynamically shifts to the next level's circle, maintaining an uncluttered display with large, easily targetable nodes while preserving access to the complete hierarchical context through sequential navigation.
Data Source
AI summary
Techniques are disclosed for navigation in a hierarchical node structure. A first graphical element representing a parent node in a hierarchical node structure is displayed via a graphical user interface (GUI). One or more second graphical elements, each representing a first child node of the parent node, are further displayed via the GUI on a first imaginary curve adjacent to or at least partially surrounding the parent node. In response to a user selection of one of the first child nodes, one or more third graphical elements each representing a second child node of the first child node are displayed via the GUI on a second imaginary curve adjacent to or at least partially surrounding the selected child node.