Image Display Environment for Fluid User Experience
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing image display environments experience visual latency when expanded for in-line display of image content items, leading to a less-than-fluid user experience, as users are left with a 'blank' space while the image is requested, received, and resized.
Innovation Solution
The method involves generating an image display environment between rows of image content items, expanding the representative image to larger dimensions, and concurrently requesting and adjusting the image resource to match the display environment dimensions, ensuring immediate display without latency.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If the image display environment is generated and the representative image is expanded to larger dimensions, then the user experience becomes more fluid and immediate, but the system must concurrently request and adjust the image resource to match display dimensions, increasing processing complexity
Solution Approach 1:
The system performs preliminary actions by expanding the representative image to the target display dimensions immediately when the image display environment is generated, before the actual image resource is received. This preliminary expansion provides immediate visual feedback to users, improving experience fluidity while the background process concurrently handles the image resource request and adjustment.
Solution Approach 2:
The expanded representative image serves as an intermediary placeholder that fills the image display environment immediately. While the actual image resource is being requested and adjusted in the background, this intermediary expanded image provides immediate visual content, bridging the gap between environment generation and final image display.
2Loss of time
If the representative image is expanded immediately to larger dimensions, then visual latency is reduced and users see content immediately, but the image resource must still be requested and adjusted to match dimensions, creating a parallel processing requirement
Solution Approach 1:
The system performs the image expansion action preliminarily and immediately when the display environment is created, eliminating visual latency. The actual image resource request and dimension adjustment occur in parallel in the background, so the time loss is minimized while processing complexity is managed through concurrent operations.
Solution Approach 2:
The system maintains continuous useful action by having the representative image expanded immediately for display while simultaneously initiating the image resource request and adjustment process. This continuous parallel processing ensures no idle time in the display pipeline while efficiently utilizing system resources.
3Adaptability or versatility
If the image display environment is generated between rows of image content items, then the layout adapts to viewport dimensions dynamically, but the viewport height calculation and proportional scaling adds computational overhead
Solution Approach 1:
The image display environment height is determined dynamically through viewport height calculations and proportional scaling relationships. The system adapts the layout to different viewport dimensions by computing proportional heights and gaps, enabling responsive design that adjusts to various screen sizes and orientations.
Solution Approach 2:
The system changes geometric parameters (viewport height, display environment height, gap proportions) based on the detected viewport dimensions. By calculating proportional relationships between these parameters, the layout adapts dynamically to different viewing conditions while maintaining design consistency.
Data Source
Figure 1
Figure 2A
Figure 2B
AI summary
Methods, systems, and apparatus for processing image content items. In one aspect, a method includes generating an image display environment for a first image content item on an image content item page resource between a first row and a second row of image content items. The user device expands a thumbnail of the image content item from first dimensions to second dimensions, and displays the expanded thumbnail in the image display environment. Concurrently with the thumbnail processing, the user device requests a first image resource referenced by the first image content item, and, upon receipt of the first image resource, generates an adjusted version of the first image resource that meets the second dimensions. The user device then displays the adjusted version of the first image resource in the image display environment in place of the expanded version of the first image content item.