Dynamic Cell Widths for Variable Product Display Grids
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current online shopping platforms inefficiently display items due to fixed cell widths in grid systems, leading to wasted space and suboptimal image display, as they struggle to accommodate products of varying sizes and orientations within a single web page.
Innovation Solution
A computer-based method and system that dynamically determine cell widths for items on a page, allowing for variable cell widths and visible gaps between groups of items, enabling more efficient use of display space by accommodating different product sizes and orientations.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If fixed cell width is used in grid display system, then layout consistency is maintained, but display space utilization deteriorates due to wasted space and inability to accommodate varying product sizes
Solution Approach 1:
The patent implements dynamic cell widths that automatically adjust based on the content within each cell, particularly the aspect ratio and dimensions of product images. This allows the display grid to transition from a static fixed-width structure to a dynamic adaptive structure, optimizing space utilization while maintaining visual consistency through automated adjustments.
Solution Approach 2:
The system changes the parameter of cell width from a fixed constant to a variable that responds to content characteristics. By monitoring image dimensions and calculating optimal cell widths based on these parameters, the system adapts the display grid to accommodate diverse product sizes and orientations efficiently.
2Quantity of substance
If multiple products with different orientations are displayed in fixed grid, then all products can be shown on single page, but image quality deteriorates due to scaling and wasted space
Solution Approach 1:
The patent applies local quality by allowing each cell in the grid to have different width characteristics tailored to its specific content. Instead of imposing a uniform fixed width on all cells, the system customizes cell dimensions locally based on the image aspect ratio and dimensions, ensuring each product displays at optimal quality without unnecessary scaling.
Solution Approach 2:
The system performs preliminary calculations to determine optimal cell widths before rendering the display grid. By pre-processing image dimension data and computing appropriate cell widths in advance, the system prepares the optimal layout configuration that maximizes both product quantity and image quality without requiring post-rendering adjustments.
3Adaptability or versatility
If hierarchical navigation with multiple web pages is used, then product categorization is achieved, but user time increases due to multiple clicks and page loads
Solution Approach 1:
The patent transitions from a vertical hierarchical navigation model (multiple pages stacked in sequence) to a horizontal dimensional expansion model (single page with dynamically adjusted grid). By unfolding the hierarchical structure across the width dimension of a single page rather than requiring users to navigate through multiple pages vertically, the system reduces navigation steps while maintaining categorization capabilities.
Data Source
AI summary
Methods and systems for making a more efficient use of a display area for the purpose of displaying items, for example on an Internet store web site. In one embodiment of the invention the items are displayed in rows in a manner which allows for optimization of the number of items per page through the adaptation of the display cell width allocated to each item. In one embodiment of the invention, the readability of the display is enhanced through the use of group separators and/or controlled margins.