Grid-Based UI Organization with Highlighted Placement

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Existing user interface systems lack efficient mechanisms for organizing multiple user interface elements, particularly in environments where elements of varying shapes and sizes need to be rearranged, resized, or deleted, as they do not provide clear visual cues for placement and do not offer intuitive access to organization mode commands.

Innovation Solution

Implementing a grid system conceptually overlaid on a canvas, where user interface elements are positioned and resized, with highlighted grid positions indicating potential drop locations, and a contextual actions menu offering direct access to frequently used organization mode commands like pin and unpin, while less frequently used commands are accessible through a dropdown menu.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Ease of operation

If a grid system is displayed during organization mode to show placement positions, then the ease of operation is improved, but the device complexity increases

Engineering Contradiction:

Improveease of element placementVSAvoidcomplexity of grid system

Core Design Contradiction:

Ease of operationVSDevice complexity

Solution Approach 1:

A grid system is introduced as an intermediary visual layer between the user interface elements and the underlying canvas. The grid positions serve as mediators that guide element placement by showing valid drop locations, thereby improving ease of operation without requiring the user to understand complex coordinate systems or placement rules.

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The grid positions are pre-calculated and displayed before the user drops an element. This preliminary action shows all valid placement positions in advance, allowing the user to make informed decisions about element placement without trial-and-error, thus improving operational ease.

Inventive Principle:

Principle #10Preliminary action

2Measurement precision

If grid positions are highlighted to show where user interface elements would be placed, then the measurement precision is improved, but the loss of information increases

Engineering Contradiction:

Improveprecision of placement indicationVSAvoidinformation about other grid positions

Core Design Contradiction:

Measurement precisionVSLoss of information

Solution Approach 1:

The grid positions are rendered with different visual qualities based on their state: highlighted positions (where an element can be dropped) are emphasized with distinct styling, while other valid positions are shown with standard styling. This local differentiation provides precise placement feedback without completely obscuring other valid options, balancing measurement precision with information retention.

Inventive Principle:

Principle #3Local quality

3Adaptability or versatility

If a contextual actions menu is provided with multiple organization mode commands, then the adaptability is improved, but the device complexity increases

Engineering Contradiction:

Improveversatility of organization commandsVSAvoidcomplexity of menu structure

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

A single contextual actions menu is designed to provide universal access to multiple organization mode commands (pin, unpin, resize, delete, etc.). This multi-functional menu consolidates various organization operations into one interface element, improving adaptability while managing complexity through a unified structure rather than multiple separate controls.

Inventive Principle:

Principle #6Universality (Multi-functionality)

Solution Approach 2:

The contextual actions menu is segmented into different command categories or sections (frequently used commands vs. less frequently used commands). This segmentation organizes the versatile set of commands in a structured manner, making the menu more navigable and reducing perceived complexity while maintaining full functionality.

Inventive Principle:

Principle #1Segmentation

Data Source

PatentUS10627980B2Organization mode support mechanisms

Publication Date: 2020.04.21 MICROSOFT TECHNOLOGY LICENSING LLC

AI summary

An organization mode in a user interface that displays multiple user interface elements. The multiple user interface elements fit over a grid positions that are at least conceptually imposed over a canvas. In organization mode, the grid positions are displayed, allowing the user to more easily see where user interface elements may be placed. As the user moves and/or resizes a user interface element, one or more corresponding grid positions are highlighted to show where the user interface element would be placed if the move or resize operation were to conclude at that moment. The organization mode may also provide a contextual actions menu with respect to a particular user interface element. The contextual actions menu includes multiple organization mode commands, including one or more that may be directed selected from the contextual actions menu to invoke the command.