# Streamlining Visual UI Design: Mining UI Design Patterns for Top App Bars
## 1 Introduction  
The Top App Bar (TAB) at the top of a mobile app screen is essential for navigation, text display, and actions [1] (see Figure 1). It allows users to access different pages and shows their current location within the app. The TAB includes important buttons and status information like search, settings, and notifications, enhancing user efficiency, and experience. It often displays the brand logo, reinforcing brand recognition and trust [2]. A well-designed TAB improves an app's usability and accessibility, creating a sense of order and professionalism that increases user satisfaction and retention [3, 4]. Figure 1: The two types of TABs, as outlined in the Android Material Design guidelines. Designing a well-crafted TAB (see Figures 2 and 3) is particularly challenging for novice designers. Beginners often struggle to understand current design trends and practices. A rigid design might not align with the page's functionality and content, making it difficult to create an intuitive and aesthetically pleasing layout. The limited space of the TAB necessitates careful selection and prioritization of elements, which can lead to overcrowding or the omission of essential components. Providing sufficient information and functionality within this confined space while maintaining simplicity and usability requires meticulous planning. Novice designers might also struggle to create a TAB that is accessible and user-friendly for most users. Achieving a design that meets user behavior patterns and expectations often involves substantial experience, trial and error, and user feedback [5]. Therefore, designing a TAB demands strategic thinking, user-centered design principles, and technical proficiency, presenting a significant challenge for novices. In Human-Computer Interaction (HCI), UI design patterns are templates that offer solutions to common design problems [6]. Despite their widespread use, current design patterns do not effectively assist novice designers in creating TABs. While these patterns provide abstract solutions to common design issues and help identify appropriate navigation types, such as side or top navigation, they often lack detailed guidance for designing specific elements within a TAB. Traditional design patterns might not offer adequate support on which components to include in the TAB or the optimal arrangement of these elements. Software repositories provide a valuable resource for designers, offering rich examples of design. Accessing various existing designs helps novices understand design elements in different contexts, forming a strong foundation for their projects. By studying successful examples, beginners can learn essential principles of layout, functionality, and aesthetics, avoiding common mistakes. Additionally, reviewing diverse designs can inspire creativity  
Figure 2: There are many variants of TABs. among novice designers, allowing them to adapt and innovate. This reduces time and effort spent on repetitive tasks, enabling designers to focus on customization and enhancement. This paper proposes a proof-of-concept method for the automated extraction of design patterns for TABs from software repositories. Sequential tokenization that captures the linear characteristics of TABs has been developed. The tokenized sequences of the TABs are then represented as vectors by a self-supervised learning framework. Clustering techniques are then applied to these vectors to reveal inherent design patterns. To guide our experiment design, we focus on the following research questions:  
* RQ1: What is the performance of our representation learning model in capturing the design characteristics of TABs? * RQ2: What clustering algorithm is most suitable for grouping the learned representations of TABs? * RQ3: How does the clustering outcome compare to human judgment in identifying TAB design patterns? Experimental results indicate the potential of this approach, with an accuracy of 66.7% and a high degree of similarity to human clustering, with an F-1 score of 0.717.