Context Toolbar Dynamic Layout for Small Screens
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current methods for displaying context toolbars on handheld devices with low resolution struggle to provide a good user experience due to limited screen space, leading to either hiding buttons behind a 'more' button or displaying them in crowded multiple rows, both of which result in poor usability.
Innovation Solution
A method that adjusts the display of context toolbars based on screen touch signals, determining the selected object and function buttons, and comparing their total width to a preset value to decide whether to display all or some buttons, with an option to slide adjust when space is limited, incorporating a close button for user convenience.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If all function buttons are displayed on the context toolbar, then the user can access all functions, but the toolbar becomes too wide for low-resolution screens and buttons become too small
Solution Approach 1:
The context toolbar is designed to dynamically adjust its display mode between horizontal and vertical orientations based on the number of function buttons. When there are fewer buttons (≤5), they are displayed horizontally in a single row. When there are more buttons (>5), the toolbar automatically switches to a vertical layout, allowing all buttons to be accessible while maintaining appropriate button sizes on low-resolution screens.
2Adaptability or versatility
If function buttons are displayed in multiple rows to fit the screen, then all buttons are visible, but the visual effect deteriorates and the display becomes crowded
Solution Approach 1:
The toolbar dynamically selects between horizontal and vertical display modes based on the number of buttons. This dynamic adaptation prevents the need for complex multi-row layouts by switching to a vertical orientation that naturally accommodates more buttons in a clean, single-column arrangement, thereby maintaining visual clarity while ensuring all buttons are visible.
3Ease of operation
If a 'more' button is added to hide additional functions, then the toolbar remains compact, but the user experience deteriorates due to repeated opening and closing
Solution Approach 1:
Instead of using a 'more' button that requires repeated opening and closing, the toolbar dynamically expands to a vertical layout to display all function buttons simultaneously. This eliminates the need for the 'more' button interaction pattern, allowing users to access all functions in a single toolbar instance without repeated opening and closing operations.
Data Source
AI summary
The present invention relates to a method for controlling display of a context toolbar, comprising: receiving a screen touch signal for displaying the context toolbar; determining a selected object according to the screen touch signal; selecting function buttons corresponding to the selected object, and obtaining an overall display width by summating the display width of the selected function buttons; comparing the overall display width with a preset value, when the overall display width≦the preset value, displaying the context toolbar, and displaying all the selected function buttons and a close button for closing the context toolbar in the context toolbar; and when the overall display width>the preset value, displaying the context toolbar, and displaying some of the selected function buttons and a close button for closing the context toolbar in the context toolbar, and in response to slide touch information.