Streamlining Visual UI Design: Mining UI Design Patterns for Top App Bars

The Top App Bar (TAB) seamlessly integrates essential elements such as app titles, navigation icons, action buttons, and search fields without creating visual clutter. However, designing a well-structured TAB presents a challenge, particularly for novice UI designers, due to the need to balance aesthetics, functionality, usability, and user experience within a limited space. This study introduces an auxiliary design method to address this challenge. It proposes the sequence representation learning technique to cluster TABs in software repositories based on their structure. A novice designer can input their preconceptualized structure to retrieve design examples from the software repository’s TAB clusters that have structures identical or similar to their concepts. Experimental results demonstrate the method’s effectiveness, achieving an accuracy of 66.7% and an F-1 score of 0.717, highlighting its alignment with human clustering. This method not only enhances the design efficiency of novice designers but also helps them understand successful design practices in various contexts. By avoiding common pitfalls and design errors, designers can adapt and innovate based on existing solutions. The dataset used in this study, containing approximately 4228 TABs, is available on Zenodo.