Skip to main content
SpringerLink
Log in

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

  • Chapter
  • First Online:
Patterns of HCI Design and HCI Design of Patterns

Part of the book series: Human–Computer Interaction Series ((HCIS))

Abstract

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 the human–computer interaction (HCI) patterns. A generative pattern not only tells us the rules for implementing a user interface (UI) design is considered as a generic solution to a problem at different levels of abstraction (in the way that a UI could be modeled), but also shows us how to transform these expressions into programmable codes 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: this 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 M-D generative pattern consolidates 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 provides 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 an M-D generative pattern are explained as well as a particular implementation for the Android platform.

This is a preview of subscription content, log in via an institution to check access.

Access this chapter

Log in via an institution
Chapter
USD 29.95
Price excludes VAT (USA)
  • Available as PDF
  • Read on any device
  • Instant download
  • Own it forever
eBook
USD 84.99
Price excludes VAT (USA)
  • Available as EPUB and PDF
  • Read on any device
  • Instant download
  • Own it forever
Hardcover Book
USD 109.99
Price excludes VAT (USA)
  • Durable hardcover edition
  • Dispatched in 3 to 5 business days
  • Free shipping worldwide - see info

Tax calculation will be finalised at checkout

Purchases are for personal use only

Institutional subscriptions

References

  • Alexander C (1977) A pattern language. Oxford University Press, New York

    Google Scholar 

  • Android Developers (2012) https://developer.android.com/guide/topics/ui/index.html. Accessed 15 April 2015

  • Aquino N, Vanderdonckt J, Condori-Fernández N, Dieste Ó, Pastor Ó (2010) Usability evaluation of multi-device/platform user interfaces generated by model-driven engineering. In: Proceeding of ESEM’2010. ACM, New York, Article #30

    Google Scholar 

  • Balsamiq Morkup Support (2014) http://balsamiq.com/

  • Bayle E, Bellamy R, Casaday G, Erickson T, Fincher S, Grinter B (1998) Putting it all together: towards a pattern language for interaction design. SIGCHI Bull 30(1):17–24

    Article  Google Scholar 

  • Brochers JO (2000) A pattern approach to interaction design. In: Proceedings of ACM conference on disiging interactive systems DIS 2000. ACM, New York, pp 369–378

    Google Scholar 

  • Calvary G, Coutaz J, Thevenin D, Limbourg Q, Bouillon L, Vanderdonckt J (2003) A unifying reference framework for multi-target user interfaces. Interact Comput 15(3):289–308

    Article  Google Scholar 

  • Coram T, Lee J (2011) Experiences-a pattern language for user interface design. http://www.maplefish.com/todd/papers/Experiences.html

  • Dijkstra EW (1959) Numerische Mathematik. In Numerische Mathematik 1(1):269–271. doi:10.1007/bf01386390

    Article  MATH  MathSciNet  Google Scholar 

  • Eclipse Documentation (2012) Master/Details block. http://help.eclipse.org/juno/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Fguide%2Fforms_master_details.htm

  • Engel J, Märtin C, Herdin C, Forbrig P (2013) Formal pattern specifications to facilitate semi-automated user interface generation. In: Kurosu M (ed) Proceedings of HCI International’2013. Springer, Heidelberg, pp 300–309 (LNCS, vol 8004)

    Google Scholar 

  • Folmer E, Bosch J (2003) Usability patterns in software architecture. In: Proceeding of workshop on SE-HCI. Citeseer, Greece, pp 61–68

    Google Scholar 

  • Gamma E, Helm R, Jonhson R, Vlissides J (1994) Patterns: elements of reusable object-oriented software. Addison-Wesley, New York

    Google Scholar 

  • Henninger S (2001) An organizational learning method for applying usability guidelines and patterns. Engineering for human-computer interaction, 8th IFIP international conference, EHCI 2001. Toronto, Canada, May 11–13, 2001, Revised Papers. Lecture notes in computer science 2254, Springer 2001

    Google Scholar 

  • Henninger S, Keshk M, Kinworthy R (2003) Capturing and disseminating usability patterns with semantic web technology. CHI 2003 workshop

    Google Scholar 

  • Johnson J (2003) Web bloopers, 60 Common Web design mistakes and how to avoid them. Morgan Kaufman, San Francisco

    Google Scholar 

  • Kruschitz C (2009) XPLML—a HCI pattern formalizing and unifying approach. In: 27th international conference on human factors in computing systems, CHI 2009, extended abstracts volume. Boston, MA, USA, April 4–9, 2009

    Google Scholar 

  • Loranger H, Schade A, Nielsen J (2002) Website tools and applications with Flash. http://media.nngroup.com/media/reports/free/Website_Tools_and_Applications_with_Flash.pdf Accessed on April 15, 2015

  • Mac Developer Library (2012) Cocoa bindings programming topics, creating a master-detail interface. https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/CocoaBindings/Tasks/masterdetail.html

  • Molina PJ (2004) User interface generation with OlivaNova model execution system. Proceeding of IUI’2004. ACM, New York, pp 358–359

    Google Scholar 

  • Molina PJ (2013) Conceptual User Interfaces Pattern, Master/Detail Interaction Unit http://pjmolina.com/cuip/node-MasterDetailIU

  • Molina P, Meliá S, Pastor O (2002) Just-UI: a user interface specification model. Proceeding of CADUI 2002. Kluwer Academics, Dordrecht

    Google Scholar 

  • Nilsson EG (2009) Design patterns for user interface for mobile applications. Adv Eng Softw 40(12):1318–1328 (Oxford)

    Article  Google Scholar 

  • Pastor O, Molina J-C (2007) Model-driven architecture in practice. Springer, Berlin

    Google Scholar 

  • Paterno F (1999) Model-based design and evaluation of interactive applications. Springer, Berlin

    Google Scholar 

  • Pemberton L, Griffiths R (1999) The Brighton usability pattern collection. http://www.it.bton.ac.uk/Research/patterns/home.html

  • Perrins M (2008) The 12 Patterns for User Interface Design. http://mattperrins.wordpress.com/2008/12/21/the-12-patterns-for-user-interface-design/

  • Scapin DL, Bastien JMC (1997) Ergonomic criteria for evaluating the ergonomic quality of interactive systems. Behav Inf Technol 16(4/5):220–231

    Article  Google Scholar 

  • Seffah A, Forbrig P (2002) Multiple user interfaces: towards a task-driven and patterns-oriented design model. Interactive systems. Design, specification, and verification, 9th international workshop, DSV-IS 2002, Rostock Germany, June 12–14, 2002. Lecture notes in computer science 2545, Springer 2002

    Google Scholar 

  • Sinnig D, Forbrig P, Seffah A (2003) Patterns in model-based development, INTERACT 03 workshop software and usability cross-pollination: the role of usability patterns, September 2003

    Google Scholar 

  • Tidwell J (2010) Designing interfaces, patterns for effective interaction design, 2nd edn. O’Reilly Media Inc, USA

    Google Scholar 

  • van Duyne J, Landay J, Hong J (2006) The design of sites, patterns for creating winning websites, 2nd edn. Prentice Hall International, New Jersey

    Google Scholar 

  • van Welie M, van der Veer GC (2003) Pattern languages in interaction design: structure and organization. In: M Rauterberg, M Menozzi, J Wesson (eds) Proceedings of INTERACT’03, 1–5 September, Zurich, Switzerland. IOS Press, Amsterdam, pp 527–534

    Google Scholar 

  • van Welie M, van der Veer GC, Eliens A (2000) Patterns as tools for user interface design. Proceeding of international workshop on tools for working with guidelines TFWWG’2000. Springer, Berlin, pp 313–324

    Google Scholar 

  • van Welie M, Mullet K, McInerney P (2002) Patterns in practice: a workshop for UI designers. ACM Conference on Human Factors in Computing Systems (CHI) Extended Abstracts. Mineapolis, USA, April 20–24, pp 908–909

    Google Scholar 

  • Vanderdonckt J, Montero F (2010) Generative pattern-based design of user interfaces, Proceeding of 1st international workshop on pattern-driven engineering of interactive computing PEICS’2010. ACM, New York

    Google Scholar 

  • Wendler S, Ammon D, Philippow I, Streitferdt D (2013) A factor model capturing requirements for generative user interface patterns. In: Proceeding of patterns 2013, fifth international conferences on pervasive patterns and applications. May 27–June 1, 2013, Valencia, Spain

    Google Scholar 

Download references

Acknowledgments

The authors would like to thank the computer science master student Tristan Dorange for his participation in the study to build the framework MDPAG. We also acknowledge the support of this work by the DESTINE (Design & Evaluation Studio For Intent-Based Ergonomic Web Sites) project, funded by DGO6 of Walloon Region, under convention #315577 in «WIST» Wallonie Information Science & Technology research program

Author information

Authors and Affiliations

  1. Department of Information Management and Software Engineering, Lappeenranta University of Technology, Lappeenranta, Finland

    Ahmed Seffah

Authors
  1. Ahmed Seffah
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Ahmed Seffah .

Rights and permissions

Reprints and permissions

Copyright information

© 2015 Springer International Publishing Switzerland

About this chapter

Cite this chapter

Seffah, A. (2015). Generative Patterns for Cross-Platform User Interfaces: The Case of the Master-Detail Pattern. In: Patterns of HCI Design and HCI Design of Patterns. Human–Computer Interaction Series. Springer, Cham. https://doi.org/10.1007/978-3-319-15687-3_7

Download citation

  • DOI: https://doi.org/10.1007/978-3-319-15687-3_7

  • Published:

  • Publisher Name: Springer, Cham

  • Print ISBN: 978-3-319-15686-6

  • Online ISBN: 978-3-319-15687-3

  • eBook Packages: Computer ScienceComputer Science (R0)

Publish with us

Policies and ethics

Search

Navigation