Adaptive Mobile Form Layout Using Cell Priority and Minimum Width
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Mobile devices face challenges in displaying electronic forms due to their form factor, which makes it difficult to show all necessary fields, especially when the device orientation changes or screen size varies.
Innovation Solution
A method and system for adapting the display of electronic forms on mobile devices by setting a minimum width for each cell, prioritizing cells for display, and dynamically adjusting the number of cells shown based on screen width and orientation, ensuring that only cells meeting the minimum width are displayed.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If all cells are displayed on the screen, then complete information is shown, but screen space is insufficient and readability deteriorates
Solution Approach 1:
The form is divided into multiple pages, with each page displaying a subset of cells. Users can navigate between pages to access different groups of fields, allowing complete information to be distributed across multiple screens rather than forcing all cells onto a single inadequate screen.
Solution Approach 2:
The system dynamically determines which cells to display on each page based on available screen space, cell priority levels, and current viewing conditions. This dynamic adaptation allows the form display to optimize between information completeness and screen space utilization in real-time.
2Ease of operation
If cell width is increased for readability, then fewer cells can be displayed side-by-side
Solution Approach 1:
Different cells are assigned different display priorities and width requirements based on their importance. High-priority cells receive larger widths for better readability, while lower-priority cells are displayed with smaller widths or on subsequent pages, allowing the system to maintain readability for critical fields while maximizing the total number of cells displayed.
3Device complexity
If form layout is fixed, then design is simple, but adaptability to different screen sizes and orientations is poor
Solution Approach 1:
The form layout transitions from a fixed structure to a dynamic one that automatically adjusts based on screen dimensions, orientation, and available space. The system calculates optimal cell widths, heights, and positions in real-time, allowing the same form to adapt seamlessly across devices with varying screen characteristics without requiring separate designs for each device type.
4Loss of information
If all fields are displayed regardless of priority, then information completeness is maintained, but screen space is wasted on low-priority fields
Solution Approach 1:
Each cell is assigned a priority level that influences its display behavior. High-priority cells are guaranteed display space and larger dimensions, while low-priority cells are conditionally displayed based on available space. This priority-based approach ensures that screen space is efficiently allocated to the most important fields while still providing access to less critical information when space permits.
Data Source
AI summary
A method of displaying an electronic form on a mobile device comprises creating one or more repeatable items comprising a plurality of fields to be filled or displayed wherein one or more of the fields may include another one or more repeatable item. A method of displaying an electronic form on a mobile device having a screen and managed by an operating system comprises attaching a visual priority to one or more fields used in the electronic form; obtaining the current mobile device screen size; and adapting the number of fields to be displayed on the screen based on the screen size and on visual priority attached to one or more of the fields. In one implementation, a minimum width is set for each of the one or more fields, and the fields that can meet the minimum width based on the current mobile device screen size are displayed.