Auto-completing UI Designs via Component Similarity Ranking
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Users face difficulty in finding suitable UI design examples among a vast number of existing designs, lacking an effective method to leverage these examples for creating their own UI designs.
Innovation Solution
A system and method for automatically completing a partially completed user interface design by identifying and incorporating similar UI components from example designs, using a combination score to categorize similarity and provide transformation costs for adding, deleting, or modifying components, and presenting ranked suggestions to users for easy incorporation.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If users manually search through billions of existing design examples to find suitable UI designs, then they can potentially find diverse design options, but the time and effort required becomes prohibitively large
Solution Approach 1:
The patent replaces manual mechanical searching with an automated computer-based system that uses image processing and pattern recognition algorithms to automatically analyze UI components in design examples and match them with the user's partial design, dramatically reducing search time while maintaining comprehensive coverage of design options
Solution Approach 2:
The system enables self-service by allowing users to simply provide a partial UI design, and the system automatically performs the complete search, analysis, and recommendation process without requiring users to manually explore or filter through design examples
2Measurement precision
If the system analyzes all UI components including text and images in detail, then the accuracy of design matching improves, but the computational complexity and processing time increase significantly
Solution Approach 1:
The patent segments the UI design into distinct component types (layout structure, UI elements, text content, images) and applies different analysis strategies to each segment, allowing detailed analysis where needed while using simpler methods for other aspects, thereby balancing accuracy with computational feasibility
Solution Approach 2:
The system extracts and focuses analysis on the most discriminative and important UI components that define the design style and structure, rather than uniformly analyzing all components in equal detail, reducing overall complexity while maintaining matching accuracy
3Adaptability or versatility
If the system presents multiple design examples with various UI components, then users have more choices for customization, but the interface complexity and user decision burden increase
Solution Approach 1:
The patent applies local quality by organizing the vast number of design options into structured categories and groups based on similarity, allowing users to navigate and explore options at different levels of detail, presenting comprehensive choices while maintaining interface simplicity through hierarchical organization
Data Source
AI summary
Techniques for automatically completing a partially completed UI design created by a user are described. A UI query including attributes of UI components in the partially completed UI design is created. Example designs with similar UI components are identified. UI components of one such design example are displayed to automatically complete the partially completed UI design (also called an “auto-complete suggestion”). The user can systematically navigate the design examples and accept auto-completed suggestions to include into the partially complete UI design.