No full-text available
To read the full-text of this research,
you can request a copy directly from the authors.
UI Design Pattern-driven Rapid Prototyping for Agile Development of Mobile Applications
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.
... In our study, to assess which leading aspects were treated in the patterns, a classification of the patterns was carried out. In classifying the patterns found, 18 categories were used, 14 of which come from the work of Suleri et al. [59], three categories from the work of Hoober and Berkman [38] (Action, Control and Confirmation; Composition; and Output Design) and only one category was created from the observation of the essence of the raised patterns (Configuration and Customization). ...
... Aspects such as non-intuitive interactions (e.g., Needless Complexity), unnecessary interruptions in the user flow (e.g., Idiot Boxes), content overload, or on-screen control (e.g., Oceans of Buttons), among other issues, can be raised in these patterns. Oceans of Buttons [59] Category: Authentication and Privacy-6 ...
... The Configuration and Customization MUIDPs can include customization made by the product being used (e.g., Context Adaptation, Immediate Immersion), or customization made by the user that allows general adjustments to content or functionality that match their specific needs or interests (e.g., Branding the controls, Global Channel Configuration, Settings). Immediate Immersion [40,59] Category: Dark Patterns-3 ...
Interaction design patterns have evolved as a resource that facilitates documentation and the reuse of proven solutions. They provide a structured and understandable mechanism for what to do in the design. Mobile devices have characteristics, configurations, and restrictions that make the construction of their interfaces full of particularities to this environment, and problems that are often common to designers and developers. This study presented a systematic mapping of the state-of-the-art regarding interaction design patterns for mobile devices. A total of 23 studies that include articles and books met the selection criteria in this mapping, examining relevant scientific databases and books that were cited in relevant articles. As a main result, 336 patterns were compiled, with 261 of these problems and solutions being dissimilar from each other. The paper describes patterns in 18 categories covering different interaction aspects. Pattern structural elements with mentions in more than five papers included: Name, Solution, Problem, Context, Examples, Related Patterns, Forces, Consequences and Figure. Four studies reported empirical evaluation of the patterns with a limited number of users. The paper contributed with a categorization of existing patterns and the challenges for uniformization of structure and empirical evidence with user evaluation.
... ACM ISBN 978-1-4503-8052-2/20/10. https://doi.org/10.1145/3406324.3410718 and end-users. However, the traditional rapid prototyping process becomes tedious for UI/UX designers due to time constraints, scattered UI design knowledge, and inability of developers to reproduce the same quality of UI design [3]. To address these pain points, Suleri et al. proposed UI design pattern-driven prototyping. ...
... To address these pain points, Suleri et al. proposed UI design pattern-driven prototyping. With this approach, they introduced the idea of utilizing UI design patterns to create rapid prototypes for agile development of smartphone applications [3]. ...
... To realize the UI design pattern-driven prototyping approach, Suleri et al. also introduced Kiwi 1 [3], a library of UI design patterns and guidelines that aims to consolidate UI design knowledge from various academic and non-academic sources and document it in a standard format. In Kiwi, each UI design pattern is described with information regarding what (problem), when (context of use), how (recommended solution) and why (rationale). ...
UI design pattern-driven prototyping introduces the idea of utilizing UI design patterns to create rapid prototypes. In this paper, we investigated the impact of using UI design pattern-driven approach on the subjective workload of rapid prototyping. We conducted a between-group workload study (NASA-TLX) for the pattern-driven and traditional approach of rapid prototyping smartphone applications to compare the subjective workload, physical demand, mental demand, temporal demand, performance, effort, and frustration experienced by UI/UX designers. Within the pattern-driven approach, we explored the impact of using pattern libraries with and without pattern standard. Our results indicate that the subjective workload, physical demand, and effort experienced by UI/UX designers using the pattern-driven approach is significantly less than the traditional approach of rapid prototyping. However, there is no significant difference in subjective workload experienced while using UI design pattern libraries with and without pattern standard for documenting UI design patterns.
... Besides there being a lack of user involvement at the formulation of the project, there is a need to substitute, or extend the number of usability professionals by training developers to do their tasks multiple times, as has been proposed most recently in Øvad and Larsen (2016), using pair programming techniques (Seyam, 2015) or else conducting a cognitive walkthrough within the development team (Grigoreanu and Mohanna, 2013) at least as a preparation. An obvious substitution technique is to provide guidelines (de Oliveira Sousa and Valentim, 2019; Lee et al., 2010;Suleri et al., 2019) or heuristics (Choma et al., 2015). Personas (Caballero et al., 2014) can also be used as representations of user groups, but it is unclear whether the persona is based on rigorous context of use research or essentially made up. ...
This article searches for correlations between the practices of usability professionals from software development teams and the resulting usability of the system they are working on. After reviewing the literature of the past decade, we can conclude that most researchers try to achieve better usability with process proposals, but measurements focus on perceived usability. The level of involvement of users in the requirements capture phase is unclear. There is a trend to reduce costs of usability engineering, either by choosing more lightweight and informal methods or by trying to substitute user involvement. Looking at decade's worth of 452 articles about "agile AND usability" in Scopus, we selected 133 which deal with the integration of usability, UX and User Centred Design practices and Agile development.
... Following their footsteps, we further this research by training a SAGAN model to generate UI wireframes for a given UI design pattern. Our research aligns with the current UI design practice where the UI designers search for possible design alternatives while creating a UI design [7]. Moreover, we evaluate the quality of the generated UI wireframes by user studies conducted with UI/UX designers. ...
During the User interface (UI) design process, designers use UI design patterns for conceptualizing different UI wireframes for an application. This paper introduces Akin, a UI wireframe generator that allows designers to chose a UI design pattern and provides them with multiple UI wireframes for a given UI design pattern. Akin uses a fine-tuned Self-Attention Generative Adversarial Network trained with 500 UI wireframes of 5 android UI design patterns. Upon evaluation, Akin's generative model provides an Inception Score of 1.63 (SD=0.34) and Fréchet Inception Distance of 297.19. We further conducted user studies with 15 UI/UX designers to evaluate the quality of Akin-generated UI wireframes. The results show that UI/UX designers considered wireframes generated by Akin are as good as wireframes made by designers. Moreover, designers identified Akin-generated wireframes as designer-made 50% of the time. This paper provides a baseline for further research in UI wireframe generation by providing a baseline metric.
... One approach UI designers use to tackle this problem is to look for existing UI design examples for inspiration and reconstruct them [2,4]. However, to change the content and style of an example UI, designers have to recreate it from scratch [2,3]. ...
UI designers look for inspirational examples from existing UI designs during the prototyping process. However, they have to reconstruct these example UI designs from scratch to edit content or apply styling. The existing solution attempts to make UI screens into editable vector graphics using image segmentation techniques. In this research, we aim to use deep learning and gestalt laws-based algorithms to convert UI screens to editable blueprints by identifying the constituent UI element categories, their location, dimension, text content, and layout hierarchy. In this paper, we present a proof-of-concept web application that uses the UI screens and annotations from the RICO dataset and generates an
editable blueprint vector graphic, and a UI layout tree. With this research, we aim to support UX designers in reconstructing UI screens and communicating UI layout information to developers.
Design patterns offer proven solutions to well-known problems and are an accepted way of knowledge preservation in various domains. Many design patterns have been documented and are published in a variety of places and formats. This makes it difficult for people to find patterns that offer solutions for a particular problem. Publishing the patterns in a repository seems to be a promising solution and, to date, many repositories have been set up containing patterns of various domains and offering a wide variety of functionality to support pattern users. However, none of these repositories seem to fulfill all user needs and there is certainly not " the one" common repository that serves as starting point for pattern search. We believe that the main reason is that all repositories are strong in certain aspects, but miss functionality in other aspects. In this work, we try to identify the most important parts of all relevant aspects, based on the existing work on pattern repositories. Building on that, we describe an initial set of high-level requirements for a generic online design pattern repository.
Design Patterns (DPs) are acknowledged as powerful conceptual tools to improve design quality and to reduce time and cost of the development process by effect of the reuse of “good” design solutions. In many fields (e.g., software engineering, web engineering, interface design) patterns are widely used by practitioners and are also investigated from a research perspective. Still, they have been seldom explored in the arena of Recommender Systems (RSs). RSs provide suggestions (“recommendations”) for items that are likely to be appropriate for the user profile, and are increasingly adopted in content-intensive multimedia applications to complement traditional forms of search in large information spaces. This paper explores RSs through the lens of User Interface (UI) Design Patterns. We have performed a systematic analysis of 54 recommendation-empowered content-intensive multimedia applications, in order to: (i) discover the occurrences of existing domain independent UI patterns; (ii) identify frequently adopted UI solutions that are not modelled by existing patterns, and define a set of new UI patterns, some of which are specific of the interfaces for recommendation features while others can be useful also in a broader context. The results of our inspection have been discussed with and evaluated by a team of experts, leading to a consolidated set of 14 new patterns that are reported in the paper. Reusing pattern-based design solutions instead of building new solutions from scratch enables novice and expert designers to build good UIs for Recommendation-empowered content intensive multimedia applications more effectively, and ultimately can improve the UX experience in this class of systems. From a broader perspective, our work can stimulate future research bridging Recommender Systems, Web Engineering and Interface Design by means of Design Patterns, and highlights new research directions also discussed in the paper.
User interface (UI) design patterns for mobile applications provide a solution to design problems and can improve the usage experience for users. However, there is a lack of research categorizing the uses of design patterns according to users’ hand dominance in a learning-based mobile UI. We classified the main design patterns for mobile applications and investigated their relationships with major learning tasks. Students’ use of different patterns was compared with respect to hand dominance. A questionnaire on 71 patterns was administered to 92 participants, and the number of patterns they used was analyzed. UI design patterns for mobile learning significantly differed between left- and right-hand-dominant participants. We also performed a cluster analysis to explore possible theme sets among participants with regard to hand dominance in learning. The results revealed three-cluster solutions for both the left- and right-hand-dominant groups. We profiled these solutions based on insights obtained from structured interviews. Our findings provide evidence that pattern use differs between right- and left-hand-dominant users with regard to reading, information retrieval, and information-browsing tasks. These findings will facilitate further development of suitable UIs for educational mobile applications.
In the context of cross-platform Web applications, Pattern-Oriented Design (POD) proposes that developers use proven solutions emerging from best design practices in order to solve common design problems. In addition, it requires composing patterns to create a platform-independent design and then mapping these pattern-oriented designs to specific platforms. This prevents the designer from reinventing the wheel and can have positive implications on system performance, scalability and usability. In this paper, we introduce different types of Web design patterns, as well as different composition and mapping rules to design a multi-platform Web application. We discuss why patterns are a suitable means for creating and mapping a Web design to new platforms while maintaining usability.
The constant comparative method (CCM) together with theoretical sampling constitutethe core of qualitative analysis in the grounded theory approach and in other types ofqualitative research. Since the application of the method remains rather unclear, researchers do not know how to `go about' the CCM in their research practice. This study contributes to a purposeful approach of the CCM in order to systematize the analysis process and to increase the traceability and verification of the analyses. The step by step approach is derived from and illustrated with an empirical study into the experience of multiple sclerosis (MS) by patients and their spousal care providers. In this study five different steps were distinguished on the basis of four criteria: (1) the data involved and the overall analysis activities, (2) the aim, (3) the results and (4) the questions asked. It is concluded that systematization of qualitative analysis results from the researcher using a sound plan for conducting CCM regarding these four aspects.
Designing UIs that run across multiple devices is increasingly important. To address this, we have created a prototyping tool called Damask, which targets web UIs that run on PCs and mobile phones, and prompt-and-response style voice UIs. In Damask, designers sketch out their design for one device while using design patterns to specify higher-level concepts within their design. Damask's patterns include pre-built UI fragments that are already optimized for each device. Designers also use layers to specify which UI parts are common across devices and which are specific to one device. Damask uses the sketches and patterns to generate designs for the other devices, which the designers can refine. A study performed with 12 professional UI designers found that, in the early stages, designers using patterns and layers in Damask created cross-device UIs that are rated at least as good as those created without patterns and layers, without more time.
This paper is challenging the usability of traditional usability guidelines. The claim is that guideline descriptions and explanations are not satisfactory. Analysis results demonstrate vagueness and are ambiguous in explanation. The aim of the paper is to propose a set of principles (meta-guidelines) to be used for improving the usability of guidelines.
This paper discusses and presents interaction patterns in user interfaces. These patterns are focused on solutions to problems end-users have when interacting with systems. The patterns take an end-user perspective which leads to a format where usability is the essential design quality. The format is discussed and presented along with twenty patterns that have been written in that format. Introduction The patterns presented in this paper are part of an ongoing effort to describe successful solutions that benefit the users of the system 1 . Consequently, they are solutions most of us are acquainted with. Other collections such as Common Ground (Tidwell 1998) or the Web patterns collection (Perzel and Kane 1999) do not make the explicit distinction between the user perspective or the designer perspective. Although some of those patterns indeed benefit users, they lack the proper focus and rationale for it. For example, the problem statement in Tidwell's patterns is typically o...
This chapter is guides usability engineers to convince their businesses that usability activities are a good return on investment (ROI). The goals of the Rapid Iterative Test and Evaluation (RITE) method are to identify and fix as many issues as possible and to verify the effectiveness of these fixes in the shortest possible time. These goals support the business reason for usability testing; improving the final product as quickly and efficiently as possible. The case studies presented in this chapter suggest that the RITE method was successful in achieving its goals. Applications are available that have a powerful and flexible architecture, which allows for rapid changes to be made to the product. As demonstrated by the case studies, the RITE method has an established track record of success on a variety of commercial products. As such, it follows in the tradition of other methods that have been shown to be effective in real world contexts. This chapter embodies a "case study" approach to examine usability methods.
While there has been much successful work in developing rules to guide the design and implementation of interfaces for desktop machines and their applications, the design of mobile device interfaces is still relatively unexplored and unproven. This paper discusses the characteristics and limitations of current mobile device interfaces, especially compared to the desktop environment. Using existing interface guidelines as a starting point, a set of practical design guidelines for mobile device interfaces is proposed.
A central challenge in interaction design has to do with its diversity. Designers, engineers, managers, marketers, researchers and users all have important contributions to make to the design process. But at the same time they lack shared concepts, experiences and perspectives. How is the process of design-which requires communication, negotiation and compromise-to effectively proceed in the absence of a common ground? I argue that an important role for the interaction designer is to help stakeholders in the design process to construct alingua franca. To explore this issue, which has received remarkably little attention in HCI, I turn to work in urban design and architecture. I begin by discussing a case study in community design, reported by Hester [10], that demonstrates the power of alingua franca for a particular design project. I then describe the concept of pattern languages and discuss how they might be adapted to the needs of interaction design in general, and used, in particular, as meta-languages for generating lingua francas for particular design projects.
To create successful interactive systems, user interface designers need to cooperate with developers and application domain experts in an interdisciplinary team. These groups, however, usually miss a common terminology to exchange ideas, opinions, and values. This paper presents an approach that uses pattern languages to capture this knowledge in software development, HCI, and the application domain. A formal, domain-independent definition of design patterns allows for computer support without sacrificing readability, and pattern use is integrated into the usability engineering lifecycle. As an example, experience from building an award-winning interactive music exhibit was turned into a pattern language, which was then used to inform follow-up projects and support HCI education.
Experiences-A pattern language for user interface design
- Todd Coram
- Jim Lee
Todd Coram and Jim Lee. 1996. Experiences-A
pattern language for user interface design. (1996).
Lingua Francas for design: sacred places and pattern languages
- Thomas Erickson
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.
Mobile design pattern gallery: UI patterns for smartphone apps
- Theresa Neil
Theresa Neil. 2014. Mobile design pattern gallery: UI
patterns for smartphone apps. " O'Reilly Media, Inc.".
Patterns of HCI Design and HCI Design of Patterns: Bridging HCI Design and Model-Driven Software Engineering
- Ahmed Seffah
Ahmed Seffah. 2015. Patterns of HCI Design and HCI
Design of Patterns: Bridging HCI Design and
Model-Driven Software Engineering. Springer.
On the usability of usability patterns
- A Seffah
- H Javahery
A Seffah and H Javahery. 2002. On the usability of
usability patterns. In Workshop entitled Patterns in
Practice, CHI. 1-2.
The design of sites: Patterns for creating winning web sites. Prentice Hall Professional. Douglas K Van Duyne James A Landay and Jason I Hong
- A Douglas K Van Duyne James
- Jason I Landay
- Hong
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.
Towards Usability Guidelines for Mobile Websites and Applications
- Maria Shitkova
- Justus Holler
- Tobias Heide
- Nico Clever
- Jãűrg Becker
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.
Todd Coram and Jim Lee. 1996. Experiences--A pattern language for user interface design
- Todd Coram
- Jim Lee
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
- James Douglas K Van Duyne
- Jason I Landay
- Hong