research-article

UI Design Pattern-driven Rapid Prototyping for Agile Development of Mobile Applications

Authors:

Matthias JarkeAuthors Info & Claims

MobileHCI '19: Proceedings of the 21st International Conference on Human-Computer Interaction with Mobile Devices and Services

Article No.: 52, Pages 1 - 6

https://doi.org/10.1145/3338286.3344399

Published: 01 October 2019 Publication History

Abstract

In agile development, lean UX designers perform rapid prototyping and quick evaluation of prototypes to ensure fast releases. To understand designers' workflow during rapid prototyping, we interviewed 15 lean UX designers. We identified the following pain points in the workflow: 1) Compromise on quality of UI design due to time constraint 2) UI design knowledge being scattered among numerous sources such as websites and books 3) Inability of developers to reproduce the same quality of UI design due to lack of UI design knowledge. To address these issues, we propose a UI design pattern-driven approach for rapid prototyping. To realize this approach, we introduce Kiwi, a library for UI design patterns and guidelines that aims to consolidate UI design knowledge for mobile applications. Each UI design pattern consists of a problem statement, context, rationale, and a proposed solution. Additionally, Kiwi provides downloadable and customizable GUI examples, layout blueprints and front-end code for each pattern. Usability evaluation (SUS) of Kiwi with 21 lean UX designers depict good usability and high learnability.

References

[1]

Hosam Al-Samarraie and Yusof Ahmad. 2016. Use of design patterns according to hand dominance in a mobile user interface. Journal of Educational Computing Research 54, 6 (2016), 769--792.

[2]

Christopher Alexander. 1977. A pattern language: towns, buildings, construction. Oxford university press.

[3]

Hennie Boeije. 2002. A Purposeful Approach to the Constant Comparative Method in the Analysis of Qualitative Interviews. Quality and Quantity 36, 4 (01 Nov 2002), 391--409.

[4]

Jan O Borchers. 2000. A pattern approach to interaction design. In Proceedings of the 3rd conference on Designing interactive systems: processes, practices, methods, and techniques. ACM, 369--378.

Digital Library

[5]

Todd Coram and Jim Lee. 1996. Experiences--A pattern language for user interface design. (1996).

[6]

Paolo Cremonesi, Mehdi Elahi, and Franca Garzotto. 2017. User interface patterns in recommendation-empowered content intensive multimedia applications. Multimedia Tools and Applications 76, 4 (2017), 5275--5309.

Digital Library

[7]

Stefan Cronholm. 2009. The usability of usability guidelines. In Proceedings of the 21st Annual Conference of the Australian Computer-Human Interaction Special Interest Group on Design: Open 24/7 - OZCHI '09. ACM Press, New York, New York, USA, 233.

Digital Library

[8]

Christian Crumlish and Erin Malone. 2009. Designing social interfaces: Principles, patterns, and practices for improving the user experience. "" O'Reilly Media, Inc."".

[9]

Douglas K Van Duyne, James Landay, and Jason I Hong. 2002. The design of sites: patterns, principles, and processes for crafting a customer-centered Web experience. Addison-Wesley Longman Publishing Co., Inc.

[10]

Thomas Erickson. 2000. Lingua Francas for design: sacred places and pattern languages. In Proceedings of the 3rd conference on Designing interactive systems: processes, practices, methods, and techniques. ACM, 357--368.

Digital Library

[11]

Jun Gong and Peter Tarasewich. 2004. Guidelines for handheld mobile device interface design. Proceedings of DSI 2004 Annual Meeting (2004), 3751--3756.

[12]

Homa Javahery and Ahmed Seffah. 2002. A model for usability pattern-oriented design. In Proceedings of the First International Workshop on Task Models and Diagrams for User Interface Design. INFOREC Publishing House Bucharest, 104--110.

[13]

Christian Køppe, Paul Salvador Inventado, Peter Scupelli, and Uwe Van Heesch. 2016. Towards extending online pattern repositories: supporting the design pattern lifecycle. In Proceedings of the 23rd Conference on Pattern Languages of Programs. The Hillside Group, 15.

[14]

James Lin and James A Landay. 2008. Employing patterns and layers for early-stage design and prototyping of cross-device user interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. ACM, 1313--1322.

Digital Library

[15]

Michael C Medlock, Dennis Wixon, Mick McGee, and Dan Welsh. 2005. The rapid iterative test and evaluation method: Better products in less time. In Cost-Justifying Usability. Elsevier, 489--517.

[16]

Theresa Neil. 2014. Mobile design pattern gallery: UI patterns for smartphone apps. " O'Reilly Media, Inc.".

[17]

Jakob Nielsen. 1995. 10 Heuristics for User Interface Design. https://www.nngroup.com/articles/ten-usability-heuristics/. (1995). (Accessed: 2019-01-13.

[18]

Donald A. Norman. 2002. The Design of Everyday Things. Basic Books, Inc., New York, NY, USA. 272 pages.

Digital Library

[19]

Ahmed Seffah. 2015. Patterns of HCI Design and HCI Design of Patterns: Bridging HCI Design and Model-Driven Software Engineering. Springer.

[20]

A Seffah and H Javahery. 2002. On the usability of usability patterns. In Workshop entitled Patterns in Practice, CHI. 1--2.

[21]

Maria Shitkova, Justus Holler, Tobias Heide, Nico Clever, and JÃűrg Becker. 2015. Towards Usability Guidelines for Mobile Websites and Applications. In Wirtschaftsinformatik. 1603--1617.

[22]

Ben Shneiderman. 1998. Designing the User Interface: Strategies for Effective Human-Computer Interaction (3rd ed.). Addison-Wesley Longman Publishing Co., Inc., Boston, MA. 639 pages. https://dl.acm.org/citation.cfm?id=523237

Digital Library

[23]

M Taleb, H Javahery, and A Seffah. 2006. Pattern-Oriented design composition and mapping for cross-platform Web applications. In The XIII International Workshop on Design, specification and verification of interactive systems, Spring Verlag, Trinity College Dublin, Ireland.

[24]

Peter Tarasewich, Jun Gong, and Fiona Fui-Hoon Nah. 2007. Interface Design for Handheld Mobile Devices. AMCIS 2007 Proceedings (2007).

[25]

Jenifer Tidwell. 1999. Common ground: A pattern language for human-computer interface design. (1999).

[26]

Douglas K Van Duyne, James A Landay, and Jason I Hong. 2007. The design of sites: Patterns for creating winning web sites. Prentice Hall Professional.

[27]

Martijn Van Welie and Hallvard Trætteberg. 2000. Interaction patterns in user interfaces. In 7th. Pattern Languages of Programs Conference. 13--16.

[28]

Scott Weiss. 2002. Handheld usability. Wiley, New York, New York, USA. 292 pages.

Digital Library

Cited By

Ņikiforova OBabris KGuliyeva A(2024)Definition of a Set of Use Case Patterns for Application SystemsApplied Computer Systems10.2478/acss-2024-000829:1(59-67)Online publication date: 1-Jun-2024
https://dl.acm.org/doi/10.2478/acss-2024-0008
Son KChoi DKim TKim J(2024)Demystifying Tacit Knowledge in Graphic Design: Characteristics, Instances, Approaches, and GuidelinesProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642886(1-18)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613904.3642886
da Silva LParreira Junior PFreire A(2022)Mobile User Interaction Design Patterns: A Systematic Mapping StudyInformation10.3390/info1305023613:5(236)Online publication date: 5-May-2022
https://doi.org/10.3390/info13050236
Show More Cited By

Index Terms

UI Design Pattern-driven Rapid Prototyping for Agile Development of Mobile Applications
1. Human-centered computing
  1. Human computer interaction (HCI)

Recommendations

Agile Development Iterations and UI Design
AGILE '07: Proceedings of the AGILE 2007

Many agile projects require user interaction (UI) design, but the integration of UI design into agile development is not well understood. This is because both agile development and UI design are iterative but while agile methods iterate on code with ...
UI Design for an iTV platform: an iterative approach
Interacción '18: Proceedings of the XIX International Conference on Human Computer Interaction

This article presents graphic and interaction guidelines for User Interface (UI) design in the Interactive TV domain (iTV). Starting with a systematization of principles and good practices based on pervasive examples, namely the Google Material Design ...
Adapting paper prototyping for designing user interfaces for multiple display environments
Special Issue: User-centred design and evaluation of ubiquitous groupware

A multiple display environment (MDE) networks personal and shared devices to form a virtual workspace, and designers are just beginning to grapple with the challenges of developing interfaces tailored for these environments. To develop effective ...

Comments

Information & Contributors

Information

Published In

cover image ACM Conferences

MobileHCI '19: Proceedings of the 21st International Conference on Human-Computer Interaction with Mobile Devices and Services

October 2019

646 pages

ISBN:9781450368254

DOI:10.1145/3338286

Copyright © 2019 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than the author(s) must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected].

Sponsors

SIGCHI: ACM Special Interest Group on Computer-Human Interaction

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 01 October 2019

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article
Research
Refereed limited

Conference

MobileHCI '19

Sponsor:

SIGCHI

MobileHCI '19: 21st International Conference on Human-Computer Interaction with Mobile Devices and Services

October 1 - 4, 2019

Taipei, Taiwan

Acceptance Rates

Overall Acceptance Rate 202 of 906 submissions, 22%

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

6
Total Citations
View Citations
692
Total Downloads

Downloads (Last 12 months)62
Downloads (Last 6 weeks)2

Reflects downloads up to 03 Oct 2024

Other Metrics

View Author Metrics

Citations

Cited By

Ņikiforova OBabris KGuliyeva A(2024)Definition of a Set of Use Case Patterns for Application SystemsApplied Computer Systems10.2478/acss-2024-000829:1(59-67)Online publication date: 1-Jun-2024
https://dl.acm.org/doi/10.2478/acss-2024-0008
Son KChoi DKim TKim J(2024)Demystifying Tacit Knowledge in Graphic Design: Characteristics, Instances, Approaches, and GuidelinesProceedings of the 2024 CHI Conference on Human Factors in Computing Systems10.1145/3613904.3642886(1-18)Online publication date: 11-May-2024
https://dl.acm.org/doi/10.1145/3613904.3642886
da Silva LParreira Junior PFreire A(2022)Mobile User Interaction Design Patterns: A Systematic Mapping StudyInformation10.3390/info1305023613:5(236)Online publication date: 5-May-2022
https://doi.org/10.3390/info13050236
Gajjar NSermuga Pandian VSuleri SJarke MVerbert KParra DHammond TKnijnenburg BO'Donovan JTaele P(2021)Akin: Generating UI Wireframes From UI Design Patterns Using Deep LearningCompanion Proceedings of the 26th International Conference on Intelligent User Interfaces10.1145/3397482.3450727(40-42)Online publication date: 14-Apr-2021
https://dl.acm.org/doi/10.1145/3397482.3450727
Suleri SHajimiri YJarke M(2020)Impact of using UI Design Patterns on the Workload of Rapid Prototyping of Smartphone Applications: An Experimental Study22nd International Conference on Human-Computer Interaction with Mobile Devices and Services10.1145/3406324.3410718(1-5)Online publication date: 5-Oct-2020
https://dl.acm.org/doi/10.1145/3406324.3410718
Pandian VSuleri SJarke M(2020)BluCompanion Proceedings of the 25th International Conference on Intelligent User Interfaces10.1145/3379336.3381497(81-82)Online publication date: 17-Mar-2020
https://dl.acm.org/doi/10.1145/3379336.3381497

View Options

Get Access

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Media

Figures

Other

Tables

View Table of Contents