System, Method and Apparatus for Design Layout Verification of Mobile Application User Interfaces
Publication Date: 2016-Jun-27
The IP.com Prior Art Database
Disclosed are a system, method, and apparatus for design layout verification of mobile application user interfaces in order to efficiently check a mobile application’s user interface properties against the design requirements.
Page 01 of 3
Method and Apparatus for Design Layout Verification of Mobile Application
Method and Apparatus for Design Layout Verification of Mobile Application User Interfaces
Creating mobile applications involves a lot of quick iterative design and re-thinking of the user interface (UI) based on feedback from users, changing priorities, etc. As the UI designers are changing the UI, the colors, fonts, layouts etc. in tooling for designing the UI, the developers are also implementing these and trying to keep up with the latest design changes. With these rapid revisions, checking the conformance of the actual implementation against the desired design can be a significant challenge.
An efficient method is needed for checking the mobile application's UI properties
against the design requirements.
The novel contribution is a system, method, and apparatus for design layout verification of mobile application user interfaces.
A mobile developer augments an application with instrumentation logic that can capture screenshots of the UI and properties of all the constituent UI elements/widgets at that time. These properties include size, position, color, font, font-size, font-family, layout-constraints, etc. The developer then exercises the mobile application (i.e., runs it on a device or emulator), and then the system automatically captures screenshots that correspond to the UI designs. These screenshots and associated property files that have been captured while the mobile application ran can then be programmatically compared (as well as manually/visually, if desired) to the original designs. The programmatic comparison identifies any deviations it detects in the captured result to the original design specifications.
A mobile application UI designer creates one or more design specifications for a mobile application UI. Typically, there would be a specification for each significant screen and potentially a common specification listing standard colors, fonts, etc. for the entire UI in order to achieve overall visual consistency. Whether the specification resides in a single or multiple documents, this approach is applicable. The use of multiple documents is more conducive to implementing changes, especially if more than one UI designer is involved in various aspects of the UI. This specification for the UI forms the reference against which the application UI should be implemented.
The method gives each screen that exists in the UI specification a unique reference identifier. The system creates a screenshot trigger document that informs the instrumentation code that will be added to the mobile application about when to take the screenshots. This trigger-document corresponds the code to the unique reference numbers. Triggers then take the form of something happening in the code when a screenshot should be taken, and this screen should be conformant to the specification having the given unique reference identifier. For example, the specification can contai...