Canvas GUI Icon Opacity Dynamics for Touch Navigation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing graphical user interfaces (GUIs) lack an elegant and engaging way to navigate large display spaces, particularly on touchscreen devices, where interactive elements become difficult to manage as they move in and out of the screen's view, leading to suboptimal user interaction.
Innovation Solution
The system changes the status of interactive elements in response to navigation by making them more opaque as they move towards the center of the display space and less opaque as they move away, allowing for visual transforms to indicate selectability, ensuring that elements become fully selectable only when near the center, enhancing user interaction by making it intuitive and organic.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If traditional scrolling navigation is used in large canvas GUIs, then users can access all content, but the interaction becomes cumbersome and less engaging
Solution Approach 1:
The patent applies dynamics by making interactive elements dynamically change their visual properties (opacity, scale, brightness) based on their position relative to the center of the display space. As elements move toward the center through navigation, they become more prominent and selectable, creating a dynamic interaction model that replaces static scrolling with adaptive visual feedback.
Solution Approach 2:
The patent utilizes color and opacity changes to indicate interactability. Interactive elements gradually increase in opacity and visual prominence as they approach the center of the display space, providing intuitive visual cues about which elements are currently selectable without requiring additional UI controls or complex navigation gestures.
2Loss of information
If all interactive elements are always visible, then users have full awareness of available options, but it becomes difficult to determine which elements are currently selectable
Solution Approach 1:
The patent applies local quality by making different parts of the interface have different visual properties based on their position. Elements near the center of the display space have high opacity and are fully selectable, while elements farther away have reduced opacity and are not selectable. This creates a gradient of interactability that is immediately visible to users.
Solution Approach 2:
The system provides continuous visual feedback about element selectability based on navigation position. As users navigate the canvas, elements automatically adjust their opacity and visual prominence to reflect their current selectability status, eliminating the need for separate indicators or modes to communicate interactability.
3Illumination intensity
If interactive elements maintain constant opacity, then all elements are equally visible, but users cannot intuitively understand which elements are interactable at any given moment
Solution Approach 1:
The patent applies preliminary action by pre-positioning elements in the canvas space and establishing fixed relationships between element position and selectability. The visual properties of elements are automatically adjusted based on their predetermined positions relative to the display center, eliminating the need for users to query or test each element's interactability.
Data Source
AI summary
A method includes: controlling a touch screen to display a first application icon in a first location of a display space of the touch screen and display a second application icon in a second location of the display space of the touch screen; controlling the touch screen to display a third application icon in a third location of the display space of the touch screen; detecting a sliding gesture on the touch screen; in response to the sliding gesture, controlling the touch screen to display the first application icon and the second application icon from being invisible to becoming gradually more opaque as the sliding gesture continuously performs on the touch screen.