Responsive UI Layout Rules from User Intention Drawings

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Developers face challenges in creating user interfaces that are responsive across various screen sizes, particularly for less sophisticated end-users lacking programming skills in CSS and HTML, leading to difficulties in providing consistent visual experiences across devices with different display sizes and capabilities.

Innovation Solution

A method using a machine learning model to identify objects and locations from user intentions drawn by end-users, generating responsive rules to automatically adjust user interface layouts based on screen size, and rendering the interface with technologies like CSS media queries.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Ease of operation

If traditional user interface design methods are used, then developers can control the deployment experience, but it becomes a technical challenge for developers without programming skills in CSS and HTML

Engineering Contradiction:

Improveease of creating responsive user interfacesVSAvoidcomplexity of responsive design implementation

Core Design Contradiction:

Ease of operationVSDevice complexity

Solution Approach 1:

The patent introduces a machine learning model as an intermediary between the user's simple drawing input and the complex responsive user interface generation. The ML model automatically interprets the drawing, identifies objects and their locations, generates appropriate responsive rules, and produces the final user interface code, thereby mediating between ease of operation and device complexity

Inventive Principle:

Principle #24Intermediary (Mediator)

Solution Approach 2:

The patent replaces the mechanical system of manual CSS and HTML coding with an automated machine learning-based system. Instead of requiring developers to manually write responsive design code, the system uses ML algorithms to automatically generate the necessary code from simple drawing inputs, substituting manual programming tasks with automated intelligent processing

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

2Manufacturing precision

If manual programming of responsive designs is performed, then precise control over layout is achieved, but it requires advanced programming knowledge in CSS and HTML

Engineering Contradiction:

Improveprecision of user interface layout controlVSAvoidease of creating user interfaces

Core Design Contradiction:

Manufacturing precisionVSEase of manufacture

Solution Approach 1:

The system enables self-service by allowing users to create responsive user interfaces through simple drawing actions without requiring programming knowledge. The machine learning model automatically processes the drawing, identifies the intended layout, and generates the appropriate code, making the system serve itself rather than requiring manual programming expertise

Inventive Principle:

Principle #25Self-service

Solution Approach 2:

The patent transforms the creation process by changing the input parameters from complex programming code to simple drawing representations. The machine learning model handles the parameter transformation between the user's drawing input and the technical output, allowing precise layout control without requiring users to understand programming parameters

Inventive Principle:

Principle #35Parameter changes

3Manufacturing precision

If user interfaces are designed for specific screen sizes, then consistent layout is achieved on target devices, but adaptability across multiple screen sizes is lost

Engineering Contradiction:

Improveconsistency of user interface layoutVSAvoidadaptability across different screen sizes

Core Design Contradiction:

Manufacturing precisionVSAdaptability or versatility

Solution Approach 1:

The patent introduces dynamics by creating user interfaces that can automatically adapt their layout based on the screen size. Instead of static designs optimized for specific devices, the system generates responsive rules that dynamically adjust the interface arrangement according to the displaying device's characteristics, achieving both consistency and adaptability

Inventive Principle:

Principle #15Dynamics

4Adaptability or versatility

If responsive design is implemented across multiple devices, then versatility is improved, but the complexity of controlling deployment experience increases

Engineering Contradiction:

Improveversatility across devicesVSAvoidcomplexity of deployment control

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The machine learning model serves as an intermediary that simplifies the deployment control complexity. It automatically processes the drawing input, identifies objects and locations, generates appropriate responsive rules for different device types, and produces device-specific code, thereby managing the complexity of multi-device deployment control

Inventive Principle:

Principle #24Intermediary (Mediator)

Data Source

PatentUS12555285B2User intention oriented responsive design for applications running on multiple devices

Publication Date: 2026.02.17 SAP SE

AI summary

In some implementations, there is provided a method including identifying, from an electronic drawing, at least one object and at least one object location in at least one user intention for a user interface that is responsive across a plurality of screen sizes, wherein the at least one object and the at least one object location are identified using a machine learning model; creating responsive rules for the at least one object and at least one object location detected in the at last one user intention; and rendering, based on the responsive rules, the user interface, such that the responsive rules configure content layout in the user interface in response to a screen size displaying the user interface. Related systems, methods, and articles of manufacture are also disclosed.