Dynamic Target Highlighting for Drag and Drop on Small Touch Screens
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
The existing drag and drop operations on small touch screens, such as smartphones and tablets, lack sufficient visual guidance, making it difficult for users to accurately target icons due to limited feedback and increased difficulty in precise movements, especially in dynamic environments like buses or subways.
Innovation Solution
The method enhances the drag and drop experience by dynamically changing the appearance of non-target objects as the user approaches the intended target, using techniques like distance-based, direction-based, and probabilistic predictions to differentiate potential drop targets from non-targets through distinct rendering modes, reducing the number of visible options and providing clearer feedback.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If a visual highlight of the target icon is provided only in the last stage of drag and drop, then the simplicity of the interface is maintained, but the user guidance and feedback are insufficient on small touch screens
Solution Approach 1:
The rendering mode of non-target objects is dynamically changed during the drag operation based on the dragged object's position. As the user drags closer to the target, more non-target objects are rendered in a faded state, creating a dynamic filtering effect that adapts to the user's current action stage.
Solution Approach 2:
Different rendering modes are applied to different groups of objects: target objects maintain their normal appearance while non-target objects are rendered in faded or dimmed states. This visual differentiation guides the user's attention to potential drop targets without requiring complex highlight animations.
2Measurement precision
If all second objects are rendered with the same appearance, then the interface simplicity is maintained, but the user cannot easily identify potential targets on small displays
Solution Approach 1:
Different parts of the interface (different groups of second objects) are rendered with different visual properties. Objects in the first group (potential targets) are rendered normally while objects in the second group (non-targets) are rendered faded, creating local visual differentiation that helps users identify relevant targets.
Solution Approach 2:
The set of second objects is segmented into two distinct groups based on their relevance to the current drag operation: first group objects that are potential drop targets and second group objects that are not. This segmentation allows for differentiated rendering that improves target identification.
3Ease of operation
If the drag and drop operation provides detailed visual feedback throughout the process, then the user experience is improved, but the processing resources and rendering complexity increase on mobile devices
Solution Approach 1:
Instead of providing full visual feedback for all objects throughout the entire drag operation, the system applies faded rendering selectively to non-target objects only when necessary. This partial application of visual differentiation reduces processing overhead while maintaining sufficient user guidance.
Data Source
Figure 1
Figure 2
Figure 3A
AI summary
The present invention relates to a method of indicating drag and drop targets for a first object among a plurality of second objects in a graphical user interface (GUI), the method comprising rendering with a first rendering mode a first group of second objects within the GUI onto which a selected first object is likely to be dropped, rendering with a second rendering mode distinct from the first rendering mode a second group of second objects, the second group consisting of the remaining second objects, receiving a drag input on the first object, updating the groups based at least upon the updated position of the first object derived from the received drag input.