HTML Form Transformation to Mobile Native UI for Improved Readability
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Users of mobile devices face challenges when interacting with traditional web applications designed for personal computer browsers, as HTML forms are often difficult to read and input due to their design for larger screens, requiring users to pinch and zoom on mobile devices.
Innovation Solution
A method is provided to transform HTML forms into native graphical user interface (UI) forms by identifying name-input pairs, generating metadata, and rendering the forms using UI elements native to the mobile device, allowing for improved user interaction and convenience.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If HTML forms designed for PC browsers are displayed on mobile devices, then the forms maintain their original design structure, but the forms become difficult to read and input due to small screen size
Solution Approach 1:
The patent transforms HTML forms by changing their structural parameters from traditional web form layouts to mobile-optimized layouts. This involves reorganizing form elements into vertical stacks, adjusting field sizes, and modifying spacing parameters to suit mobile screen dimensions, thereby maintaining compatibility while improving readability and input convenience
Solution Approach 2:
The patent segments the HTML form into discrete UI elements (input fields, labels, buttons) and reassembles them in a mobile-optimized structure. Each form element is treated as an independent unit that can be individually positioned and sized, allowing the form to be reconstructed for mobile devices while preserving the original form's functional integrity
2Ease of operation
If HTML forms are displayed at full size on mobile devices, then the forms are easier to read, but the device screen space is insufficient and requires pinching and zooming
Solution Approach 1:
The patent transitions the form layout from horizontal/2D web design to vertical/mobile-dimensional design. Form elements are arranged in a single-column vertical layout that utilizes the mobile device's height dimension, allowing all form elements to be visible without requiring horizontal scrolling or zooming operations
3Ease of operation
If HTML forms are transformed into native UI forms, then the reading and input experience is improved, but additional processing steps are required
Solution Approach 1:
The patent introduces a form transformation layer that acts as an intermediary between the original HTML form and the mobile device's native UI framework. This intermediary layer automatically parses the HTML form structure, extracts form elements, and generates corresponding native UI components, thereby improving the user experience while abstracting away the processing complexity
Data Source
AI summary
Techniques disclosed herein provide access to a markup document form. A user interface virtualization (UIV) agent identifies name fields and input fields in rows of the markup document form. The UIV agent maps each of the name fields to a respective one of the input fields to identify name-input pairs. The UIV agent generates user interface (UI) metadata having row metadata specifying the rows of the markup document and name-input pair metadata specifying the name-input pairs. The UIV agent sends the UI metadata to a mobile client device configured to render a form having UI elements native to the mobile client device based on the UI metadata.