Condensable Scrollable UI for Faster Section Navigation

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Navigating through large volumes of information in scrollable user interfaces (UIs) on devices with limited display screens is tedious and resource-intensive, often requiring multiple user inputs and leading to overshooting and inefficiencies.

Innovation Solution

Implementing a UI that automatically condenses sections in response to high scrolling rates, with sections expanding when the scrolling rate decreases or stops, and optionally auto-completing input fields with available data, to enhance navigation efficiency.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Loss of information

If the UI displays all sections in full detail, then information completeness is improved, but navigation time and user effort increase significantly

Engineering Contradiction:

Improveinformation completenessVSAvoidnavigation time

Core Design Contradiction:

Loss of informationVSLoss of time

Solution Approach 1:

The UI sections dynamically change their display state between expanded and condensed forms based on the scrolling activity. When scrolling is detected, sections automatically condense to minimize navigation time. When scrolling stops, sections expand to restore information completeness. This dynamic adaptation resolves the contradiction by making the UI structure flexible rather than static.

Inventive Principle:

Principle #15Dynamics

Solution Approach 2:

The patent changes the display parameter of UI sections (expanded/condensed state) in response to scrolling rate changes. By monitoring scrolling parameters and adjusting section display accordingly, the system maintains information completeness when needed while reducing navigation time during active scrolling through parameter-driven state transitions.

Inventive Principle:

Principle #35Parameter changes

2Productivity

If the UI sections are condensed during scrolling, then navigation efficiency is improved, but information visibility deteriorates

Engineering Contradiction:

Improvenavigation efficiencyVSAvoidinformation visibility

Core Design Contradiction:

ProductivityVSLoss of information

Solution Approach 1:

The UI sections periodically transition between condensed and expanded states based on scrolling cycles. During active scrolling phases, sections are condensed to improve navigation efficiency. When scrolling stops or slows, sections expand to restore information visibility. This periodic switching resolves the contradiction by aligning section display state with the user's current interaction phase.

Inventive Principle:

Principle #19Periodic action

Solution Approach 2:

The sections are made dynamic by allowing them to change their condensation state in response to scrolling conditions. This dynamic behavior enables the UI to optimize for navigation efficiency during scrolling while maintaining information visibility when the user is stationary, resolving the trade-off between these two competing requirements.

Inventive Principle:

Principle #15Dynamics

3Measurement precision

If multiple user inputs are required to navigate through sections, then precise navigation control is improved, but user effort and complexity increase

Engineering Contradiction:

Improvenavigation control precisionVSAvoiduser effort

Core Design Contradiction:

Measurement precisionVSEase of operation

Solution Approach 1:

The UI system performs self-service by automatically detecting scrolling actions and responding with appropriate section condensation/expansion. This eliminates the need for users to manually control each section transition, reducing user effort while maintaining precise navigation control through automatic system response to user scrolling inputs.

Inventive Principle:

Principle #25Self-service

Solution Approach 2:

The system implements feedback by monitoring scrolling rate and automatically adjusting section display states in response. When scrolling is detected, sections condense to facilitate faster navigation. When scrolling stops, sections expand to ensure information visibility. This automatic feedback loop reduces user effort by eliminating manual section-by-section navigation while maintaining precise control through scrolling-based input.

Inventive Principle:

Principle #23Feedback

4Adaptability or versatility

If the UI is designed for devices with limited display screens, then device compatibility is improved, but navigation complexity and time increase

Engineering Contradiction:

Improvedevice compatibilityVSAvoidnavigation time

Core Design Contradiction:

Adaptability or versatilityVSLoss of time

Solution Approach 1:

The UI dynamically adapts its section display state based on scrolling detection, which is particularly beneficial for devices with limited display screens. By condensing sections during scrolling on small screens, the system reduces navigation time while maintaining the ability to expand sections for information completeness when needed, thus resolving the contradiction between device compatibility and navigation efficiency.

Inventive Principle:

Principle #15Dynamics

Data Source

PatentUS12487739B2Methods and apparatuses for providing condensable user interface

Publication Date: 2025.12.02 SHOPIFY INC

AI summary

Apparatuses and methods for providing a condensable user interface (UI) are disclosed. A scrollable UI having a plurality of sections is outputted by a display device. A first signal corresponding to a first command to scroll the UI at a first scrolling rate is received. In response to a determination that the first scrolling rate exceeds a first threshold, one or more sections of the plurality of sections of the UI are condensed.