Dynamic Graphical Control Transformation for Small Displays
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Small display screens on devices like smartphones and tablets make it difficult for users to interact with graphical controls due to the size disparity between fingers and controls, requiring frequent zooming in and out, which is cumbersome, especially for users with impaired eyesight or motor skills.
Innovation Solution
Implementing a system where static controls are displayed with a reminder to 'tap to interact,' and when activated, they transform into larger, visually distinct indirect controls that allow easy editing without dimming the underlying visualization, facilitating easier interaction by providing clear visual cues and larger interactive elements.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Area of stationary object
If graphical controls are made small to fit on a small display screen, then the display can show more information, but it becomes difficult for users to interact with the controls accurately
Solution Approach 1:
The control interface dynamically transforms between two states: a compact static control state for display efficiency and an expanded indirect control state for interaction. When a user activates a static control, it transitions to an indirect control with larger interaction elements, and when dismissed, it returns to the static state. This dynamic transformation allows the interface to optimize for both display area and ease of operation at different times.
Solution Approach 2:
The indirect control serves as an intermediary between the user's finger and the underlying static control. It provides a larger, more easily manipulated interface that translates user input to the smaller static control, effectively mediating the interaction between the user's large finger and the small control element on the display.
2Measurement precision
If users zoom in to interact with graphical controls on a small display, then interaction accuracy improves, but the user must repeatedly zoom in and out to see results, increasing interaction time
Solution Approach 1:
The system prepares the interaction interface in advance by providing clearly visible static controls that describe their current settings. When activated, the indirect control is pre-configured with the current parameter values, allowing users to make adjustments without needing to zoom in to see the details. The indirect control maintains a size that is easily manipulable without requiring zoom operations.
3Area of stationary object
If static controls are made visually compact to maximize display space, then more controls can be shown, but visual distinction between static and interactive elements becomes difficult
Solution Approach 1:
The system uses color and visual styling to distinguish between static and indirect controls. Static controls have a distinct visual appearance that differs from indirect controls, providing clear visual cues about their non-interactive nature. When indirect controls are activated, they maintain visual distinction through their larger size and different styling, ensuring users can easily tell which elements are interactive without requiring zoom operations.
Data Source
AI summary
A user interacts with a graphical user interface on a client device. The device displays a data visualization that includes configuration parameters. The device also displays one or more read-only static controls, each static control corresponding to a respective parameter. Each static control indicates the value assigned to the corresponding parameter. A first user action activates a first static control. The first static control corresponds to a first parameter with a first value. The device displays an editable indirect control in the graphical user interface, which displays the first value. The editable indirect control is larger than the first static control, and is superimposed over the corresponding static control. The user changes the first value to a second value, and the device updates the displayed data visualization based on the second value for the first parameter. The editable indirect control is subsequently removed from display in the graphical user interface.