Dynamic UI Subcontainer Layout for Focused Screen Real Estate
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional flex containers in user interfaces are static and do not respond to user interaction, leading to inefficient use of screen real estate as they do not dynamically adjust based on user focus, resulting in unused space and suboptimal layout on mobile devices.
Innovation Solution
Implementing a system where a user interface dynamically enlarges the focused subcontainer to occupy more or all available screen real estate while reducing or hiding non-focused subcontainers, using a focus subcontainer manager and non-focus subcontainer manager to adjust the layout based on user input and interest indicators.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If conventional flex containers are used to organize UI subcontainers, then the layout can be automatically arranged without hard-coding positions, but the containers do not dynamically respond to user focus and leave unused screen real estate
Solution Approach 1:
The patent applies dynamics by making the flex container responsive to user focus states. When a user focuses on a particular subcontainer (through click, hover, or other interaction), the container dynamically recalculates its layout parameters. The focused subcontainer expands to occupy more screen real estate while non-focused subcontainers shrink or are hidden, creating a dynamic adaptation to user attention rather than a static layout.
Solution Approach 2:
The patent changes the layout parameters (width, height, position) of subcontainers based on focus state. The flex container monitors focus events and adjusts CSS properties such as flex-basis, margin, and positioning of child elements. This parameter transformation allows the same container structure to serve multiple purposes: maintaining automatic layout arrangement while dynamically optimizing screen real estate utilization based on user interaction.
2Area of stationary object
If the screen size is limited (especially on mobile devices), then the available container real estate is constrained, but conventional layouts do not optimize the use of available space
Solution Approach 1:
On mobile devices with limited screen real estate, the patent makes the layout dynamic by detecting user focus and automatically expanding the focused subcontainer to utilize maximum available space. This dynamic behavior ensures that the most relevant content (the focused element) receives prime real estate, while less important elements are minimized or hidden, optimizing both space utilization and user interaction efficiency.
Solution Approach 2:
The patent applies local quality by differentiating the treatment of focused versus non-focused subcontainers. The focused subcontainer receives enhanced visual properties and expanded spatial allocation, while non-focused subcontainers are reduced or concealed. This localized optimization ensures that limited mobile screen real estate is allocated according to user attention, improving productivity without sacrificing overall layout functionality.
3Loss of information
If multiple subcontainers are displayed simultaneously in a fixed layout, then all elements remain visible, but the layout becomes static and does not emphasize user-focused elements
Solution Approach 1:
The patent transforms the static multi-element layout into a dynamic system that responds to user focus. When a user interacts with a specific subcontainer, the layout dynamically reconfigures to emphasize that element while maintaining visibility or accessibility of others through mechanisms like shrinking, fading, or contextual navigation. This dynamic behavior allows the interface to adapt to user intent rather than presenting a fixed, non-responsive arrangement.
Solution Approach 2:
The patent applies local quality by giving differentiated visibility and spatial treatment to focused versus non-focused subcontainers. The focused element receives enhanced prominence through expanded size, improved positioning, or increased visual weight, while non-focused elements are de-emphasized but not completely removed from the interface. This selective optimization maintains information availability while creating a clear visual hierarchy that responds to user focus.
Data Source
AI summary
Disclosed herein are technologies that give a disproportionate amount of screen real estate (or container real estate) to one of a group of user interface (UI) subcontainers to which a user is giving his or her attention. More particularly, in response to an indication that the user is focused and/or interested on a particular subcontainer, the device enlarges that subcontainer to occupy more (and perhaps all) of the available screen (or container) real estate. This Abstract is submitted with the understanding that it will not be used to interpret or limit the scope or meaning of the claims.