Scrollable Matrix Tile Layout with Offset Backfilling

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Existing user interfaces with graphical tiles often suffer from aesthetically undesirable empty spaces and deviations in tile order due to varying tile sizes, which can distract users and degrade the overall experience.

Innovation Solution

A method of fitting ordered tiles into a scrollable two-dimensional matrix using a non-zero, positive offset value to determine the placement of each tile, ensuring that tiles are placed in a defined direction and order, with backfilling to minimize empty spaces while maintaining the top-to-bottom, left-to-right ordering.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If tiles are arranged in a grid layout with varying sizes, then the interface can accommodate diverse content types, but empty spaces and deviations in tile order occur which degrade visual appeal

Engineering Contradiction:

Improveaccommodation of diverse content typesVSAvoidvisual appeal and tile order

Core Design Contradiction:

Adaptability or versatilityVSShape

Solution Approach 1:

The patent applies parameter changes by modifying the placement parameters of tiles based on their order and size. The system calculates optimal placement positions by considering tile order values and dimensions, adjusting the grid coordinates dynamically to eliminate empty spaces while preserving the logical ordering of tiles. This resolves the contradiction by allowing diverse tile sizes without compromising visual appeal.

Inventive Principle:

Principle #35Parameter changes

2Productivity

If tiles are placed sequentially in a fixed direction, then the layout process is simple and fast, but empty spaces are created when tile sizes vary

Engineering Contradiction:

Improvelayout process efficiencyVSAvoidempty spaces in layout

Core Design Contradiction:

ProductivityVSArea of stationary object

Solution Approach 1:

The patent applies preliminary action by pre-calculating the placement positions of all tiles before actual rendering. The system determines the optimal grid coordinates for each tile based on its order and size parameters in advance, allowing the layout algorithm to efficiently place tiles without creating empty spaces. This maintains layout speed while eliminating wasted space.

Inventive Principle:

Principle #10Preliminary action

3Shape

If backfilling is used to minimize empty spaces, then visual appeal improves, but the complexity of the layout algorithm increases

Engineering Contradiction:

Improvevisual appealVSAvoidlayout algorithm complexity

Core Design Contradiction:

ShapeVSDevice complexity

Solution Approach 1:

The patent applies segmentation by dividing the layout process into distinct phases: initial tile placement based on order and size, identification of empty spaces, and backfilling of remaining tiles. This segmented approach simplifies the overall algorithm complexity while achieving the backfilling effect to eliminate empty spaces and improve visual appeal.

Inventive Principle:

Principle #1Segmentation

Data Source

PatentEP3123295B1Predictable organic tile layout

Publication Date: 2020.03.18 MICROSOFT TECHNOLOGY LICENSING LLC

Figure 1
Figure 2A
Figure 2B

AI summary

Each of a plurality of ordered tiles is sequentially fit into a first open location within a scrollable two-dimensional matrix. The open locations into which any particular tile may be fit are limited by a non-zero, positive offset value that specifies how far from an immediately previous tile that tile may be backfilled into the matrix.