ML-Optimized UI Layouts via Heat Map Analysis

Resolve Bottlenecks,
Find Innovative Solutions
Generate Solutions

Solution Overview

Problem

The manual synthesis of user interfaces, which combines tracking and design, lacks automation, necessitating the integration of artificial intelligence with best design practices to effectively target user outcomes.

Innovation Solution

A system utilizing machine learning models, such as convolutional neural networks, processes heat maps of user engagement to dynamically modify web page or form layouts based on desired outcomes, incorporating metrics like PULSE and HEART to prioritize visual elements and improve user interaction.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Extent of automation

If manual synthesis of user interfaces is used to combine tracking and design, then design flexibility is maintained, but automation level remains low and development time increases

Engineering Contradiction:
Improveautomation levelVSAvoiddevelopment time
Core Design Contradiction:
Extent of automationVSLoss of time

Solution Approach 1:

The system enables self-service by automatically generating user interface designs through machine learning models that process tracking data and autonomously create optimized layouts without requiring manual design intervention for each iteration

Inventive Principle:
Principle #25Self-service

Solution Approach 2:

The patent replaces the mechanical manual design process with an automated machine learning system that uses convolutional neural networks to analyze heat maps and generate UI layouts, substituting human manual synthesis with algorithmic automation

Inventive Principle:
Principle #28Mechanics substitution (Replace mechanical system)

2Productivity

If manual synthesis of user interfaces is used, then control over design details is maintained, but productivity decreases

Engineering Contradiction:
Improvedevelopment efficiencyVSAvoidsystem complexity
Core Design Contradiction:
ProductivityVSDevice complexity

Solution Approach 1:

The manual design process is replaced with an automated machine learning system using convolutional neural networks that process heat map data and generate UI layouts algorithmically, significantly improving productivity through automation

Inventive Principle:
Principle #28Mechanics substitution (Replace mechanical system)

Solution Approach 2:

The system introduces an intermediary machine learning model that acts as a bridge between tracking data and design output, automatically synthesizing UI layouts by processing heat maps and translating them into optimized interface designs

Inventive Principle:
Principle #24Intermediary (Mediator)

3Extent of automation

If automated machine learning models are used to generate UI layouts, then automation and productivity increase, but alignment with desired user outcomes must be ensured

Engineering Contradiction:
Improveautomation levelVSAvoiddesign precision
Core Design Contradiction:
Extent of automationVSManufacturing precision

Solution Approach 1:

The system implements feedback by training machine learning models on historical tracking data and desired outcome metrics, continuously refining UI layout generation to align with proven effective patterns and target user outcomes

Inventive Principle:
Principle #23Feedback

Solution Approach 2:

The system performs preliminary action by pre-training machine learning models on extensive datasets of successful UI patterns and user behavior, enabling the model to generate high-quality layouts from the outset rather than requiring iterative manual refinement

Inventive Principle:
Principle #10Preliminary action

Data Source

PatentUS11803701B2Machine learning optimization of machine user interfaces
Publication Date: 2023.10.31 KYOCERA DOCUMENT SOLUTIONS INC
  • US11803701B2 patent drawing
  • US11803701B2 patent drawing
  • US11803701B2 patent drawing

AI summary

A method of evolving web pages or forms to better accord with usability metrics involves generating a heat map encoding of user interaction with a web page or electronic form, transforming the heat map with a machine neural network or other machine learning algorithm into at least one visual element placement prioritization for the web page or electronic form, and applying the visual element placement prioritization to modify a layout of the web page or electronic form.