Extending a mobile prototyping tool to support user interface design patterns and reusability

Abstract

A number of current mobile prototyping tools exist that support designing prototypes for mobile platforms. Most of these tools do not support the use of mobile user interface (UI) design pattern collections or languages, such as Google's Material Design Pattern Library. Support is only provided for low-level physical widgets, such as butons and lists, and their behaviours. These prototypes are designed to be code-free, throwaway prototypes, and functionality cannot be added to them. The only functionality supported is the ability to link screens for simulation purposes. An existing feature of the mobile prototyping tool, Proto.io, was extended to support the use of selected Material Design Pattern Library patterns to generate prototype templates. A parser was written to convert these prototype templates, exported from Proto.io in HTML format, into Android-compatible XML that could be imported into the Android Studio Integrated Development Environment (IDE), for further development. A user study was conducted to compare the two different approaches for creating a mobile application: creating the mobile application entirely in Android Studio, or using the extended version of Proto.io for designing the mobile UI, and importing the generated XML into Android Studio for further development. These two approaches were compared in terms of efficiency, effectiveness, and user satisfaction, as evaluated by several designers. The mobile UI patterns-based approach was found to be superior to the development-centred approach.