UI Control with Segmented Track for Precise Value Selection
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing user interface (UI) controls, such as sliders, often waste screen space by including non-selectable values outside the desired range, making it difficult to visualize and select only the permitted values.
Innovation Solution
The implementation of a UI control with a manipulable portion and a non-manipulable portion along a track, where the non-manipulable portions represent values outside the limits and are visually distinguished using guardrails or other visual elements, allowing for a more intuitive selection within the permissible range.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If existing UI controls include non-selectable values outside the desired range, then the control can display the full range of possible values, but screen space is wasted and it becomes difficult to visualize and select only the permitted values
Solution Approach 1:
The track is segmented into a manipulable portion (displaying only permitted values within the desired range) and non-manipulable portions (representing values outside the range). This segmentation allows the UI control to focus screen space on selectable values while still indicating the presence of non-selectable areas through visual boundaries like guardrails.
Solution Approach 2:
Different portions of the track have different qualities: the manipulable portion allows interaction and displays permitted values, while the non-manipulable portions are visually distinguished (e.g., using guardrails or different styling) to indicate non-selectability. This local differentiation optimizes screen space usage by making permitted values prominent and easily distinguishable.
2Ease of operation
If existing UI controls include non-selectable values outside the desired range, then the control maintains a continuous track, but user experience deteriorates due to difficulty in distinguishing selectable and non-selectable areas
Solution Approach 1:
The manipulable and non-manipulable portions of the track are visually distinguished using different colors, shades, or visual styles. Guardrails or boundary indicators may use contrasting colors to clearly mark the limits of the manipulable portion, making it immediately obvious to users which areas are selectable and which are not.
Solution Approach 2:
By visually segmenting the track into manipulable and non-manipulable portions through distinct styling, the UI control enhances ease of operation. Users can quickly identify the selectable range without confusion, improving the overall user experience.
3Measurement precision
If existing UI controls include non-selectable values outside the desired range, then the control displays the complete value spectrum, but precision of value selection decreases due to cluttered interface
Solution Approach 1:
The non-selectable values outside the desired range are effectively extracted or removed from the manipulable portion of the track. By excluding these values from the interactive area and using visual boundaries to indicate their presence, the UI control maximizes screen space dedicated to precise selection of permitted values, thereby improving measurement precision.
Solution Approach 2:
Segmenting the track into manipulable and non-manipulable portions allows the manipulable portion to be optimized for precise value selection. The excluded non-manipulable portions do not interfere with selection precision, as they are visually distinguished and non-interactive.
Data Source
AI summary
A user interface control is provided. The user interface control presents a first user interface control extending as a first extent between a first display position and a second display position and defining a first track with a first upper value corresponding to a first total value allocated between a first proportion and a second proportion based on a position of a first selector movable along the first track; and presents a second user interface control extending as a second extent between a third display position and a fourth display position and defining a second track with a second upper value corresponding to either the first proportion or the second proportion set by the first user interface control, the second upper value being allocated between a third proportion and a fourth proportion based on a position of a second selector moveable along the second track.