Screen Transition Diagram Creator for Complex UI Visualization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Creating a screen transition diagram for applications with multiple screens is complicated due to the difficulty in understanding transition relations between overlapping screens, as existing solutions do not effectively visualize these relations.
Innovation Solution
A screen transition diagram creator that uses screen nodes and arrows to illustrate transition relations, applies a predetermined screen transition pattern to a target screen node group, and performs abridgement processing to create a simplified structure diagram by deleting arrows and adding icons that represent transition patterns, making the diagram easier to understand.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If screens having similar functions are displayed to overlap one another to provide an overhead view of the entire screen transition diagram, then the work efficiency of creating screen transition diagrams is enhanced, but the screen transition between the overlapping screens becomes ungraspable and the screen transition structure becomes difficult to understand
Solution Approach 1:
The screen transition diagram is segmented into two distinct views: an overhead view showing all screens with overlapping similar-function screens for efficiency, and a detailed transition view showing arrows and icons for specific screen transitions. This segmentation allows users to switch between views depending on whether they need overall overview or transition details, resolving the contradiction between productivity and understandability.
Solution Approach 2:
The patent adds a temporal dimension to the visualization by introducing animated icons that show transitions over time. When a user hovers over or selects a screen, the system displays animated transition icons that appear sequentially to indicate the flow between screens. This temporal animation layer provides clear transition information without disrupting the spatial overhead view layout.
2Loss of information
If a screen transition diagram is created to show transition relations among multiple screens, then the transition structure can be documented, but the diagram becomes complicated and difficult to understand
Solution Approach 1:
The patent extracts transition information from the dense overhead view and presents it separately through animated icons that appear on demand. Instead of showing all transition arrows simultaneously (which would create complexity), the system extracts and displays only the relevant transition information when users interact with specific screens, maintaining both completeness and simplicity.
Solution Approach 2:
The patent transforms the static, complex diagram into a dynamic visualization where transition icons are animated and displayed sequentially based on user interaction. The system dynamically adjusts what information is visible - showing full transition details only when needed, while maintaining a clean overhead view as the default state. This dynamic approach reduces perceived complexity while preserving complete transition information.
Data Source
AI summary
A screen transition diagram creator that creates a screen transition diagram illustrating complicated transition relations in an easy-to-understand manner, including: a screen transition diagram editor providing the screen transition diagram in which transition relations among plural screens are illustrated by plural screen nodes and arrows between the screen nodes; a screen transition pattern applying unit applying a predetermined screen transition pattern to a target screen node group that includes at least part of the screen nodes illustrated in the screen transition diagram to provide a pattern-applied screen node group; and a screen transition structure diagram creator creating a screen transition structure diagram by abridgement processing on the pattern-applied screen node group according to a display layout corresponding to the screen transition pattern. In the abridgement processing, arrows are deleted and an icon that simplistically illustrates a transition pattern between the screen nodes displayed in the display layout is added.