Generative Patterns for Cross-Platform user Interfaces Engineering: The Case of the Master Detail Pattern

HCI design patterns have been recognized to be important mean for gathering and conveying UI designs that have been proved usable, useful, and sometimes enjoyable. To become valuable, such design patterns should encode the structure of a solution and its associated forces, rather than cataloguing just a solution, often for a specific platform. We introduce the generative pattern as a way of both documenting and implementing HCI patterns. A generative pattern not only tells us the rules for implementing a UI design considered as a generic solution to a problem at different levels of abstraction (in the way that a UI could be modelled), but also shows us how to transform these expressions into programmable code for the diverse computing platforms, while being compliant with the style guide rules that may prevail for these platforms. As a case study, the Master-Detail (M-D) pattern, one popular and frequently used HCI design pattern, is developed: displays a master list of items and the details for any selected item. While this MD pattern is documented in very different, possibly inconsistent, ways across various computing platforms, the MD generative pattern consolidate these particular implementations into a high-level pattern description based on design options that are independent of any platform, thus making this pattern ‘cross-platform’. A framework provide developers and designers with a high level UI process to implement this pattern in using different instances and its application in some designated languages. Some examples of applying a MD generative pattern are explained as well as a particular implementation for the Android platform.