Drawer Window for Hierarchical Data on Mobile Screens
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing hierarchical data visualizations are not effectively adaptable for smaller screens and less precise input devices, such as mobile devices, as they require larger desktop screens and mouse precision for effective interaction.
Innovation Solution
The implementation of tile visualizations that partition the display area into a swim lane for ancestors and a panel for descendants, allowing for interactive navigation and selection of data items on various screen sizes, including mobile devices, using touchscreen gestures or traditional inputs.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Area of stationary object
If traditional hierarchical data visualizations are used, then detailed data presentation is achieved, but the interface becomes unusable on small mobile screens
Solution Approach 1:
The display area is segmented into multiple functional zones: a main hierarchical data view area and a drawer area that slides in from the side. This segmentation allows the interface to present detailed hierarchical data in the main area while providing additional controls and information in the drawer area, making the layout adaptable to small mobile screens without compromising usability
Solution Approach 2:
The drawer interface element is introduced as a side-panel dimension that slides in horizontally, adding a new spatial dimension to the data presentation. This allows detailed information and controls to be accessed without occupying the main vertical screen real estate, effectively utilizing the horizontal dimension to improve ease of operation on mobile devices
2Area of stationary object
If desktop-optimized hierarchical visualizations are adapted to mobile screens, then screen space is reduced, but interaction precision deteriorates
Solution Approach 1:
The drawer acts as an intermediary interface element that provides larger, more touch-friendly control targets compared to the compact main view. By placing frequently needed controls and selection options in the drawer area with sufficient spacing, the interface compensates for the reduced precision of touchscreen input on mobile devices while maintaining efficient screen space utilization
3Loss of information
If more hierarchical data is displayed simultaneously, then data overview is improved, but the interface complexity increases
Solution Approach 1:
Less frequently accessed controls, filters, and detailed configuration options are extracted from the main hierarchical data view and placed in the drawer area. This extraction allows the main view to maintain a clean, simple presentation of the hierarchical data structure while still providing comprehensive data overview, reducing interface complexity without losing information
Data Source
AI summary
Implementations generally relate to the generation of tile visualization for interactively displaying data on a user device. In some implementations, a method includes retrieving hierarchical data from a data storage system, including one or more first data items and one or more second data items descended from at least one of the first data items. The method further includes generating for display a main window including at least a portion of the hierarchical data. The method further includes enabling a user to select one or more of the first data items or the second data items. The method further includes generating for display a drawer window upon activation of a drawer function. The method further includes causing the selected data items to be displayed in the drawer window.