UI Region Pre-allocation for Latency-Induced Layout Shifts
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
User interface components on mobile devices experience jerky movements when items from sources with varying latencies are loaded, causing a poor user experience as faster-loaded items shift unexpectedly to make room for slower-loaded items.
Innovation Solution
Pre-allocating a region on the display screen for slower-loading items intended to appear higher, ensuring faster-loaded items remain in their original position by displaying them outside the pre-allocated region.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Speed
If items are loaded from sources with varying latencies without pre-allocation, then faster items can be displayed immediately, but items will shift position on screen causing jerky movements
Solution Approach 1:
The patent pre-allocates display regions for different content groups before the content is actually loaded. By reserving space in advance for slower-loading content, the system prevents position shifts when faster content arrives, eliminating jerky movements while maintaining stable item positions on screen
2Stability of the object's composition
If pre-allocation is used for slower-loading items, then position stability is maintained, but display space may be wasted if items do not load
Solution Approach 1:
The patent implements dynamic region adjustment where pre-allocated display regions can be resized or reassigned based on actual content loading outcomes. If slower content fails to load or loads quickly, the reserved space is dynamically adjusted to maximize display utilization while maintaining position stability for loaded content
Data Source
AI summary
In one embodiment, a method includes by a client computing device, sending a request for two or more categories of content for display in a user interface, wherein each of the categories of content are received from a different content source, and wherein each of the categories of content are displayed in a corresponding region of the user interface. The method further includes determining a space requirement for each of the categories of content, wherein the determining is based at least in part on information in the request and information stored on the client computing device. The method further includes allocating, based on the space requirements, space for each of the regions of the user interface, and displaying each of the categories of content in its corresponding region as the content is received.