Streamlining Visual UI Design: Mining UI Design Patterns for Top App Bars
Source abstract
Abstract
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.
Source: crossref · Quality: baseline
Research context
OpenAlex topics: Data Visualization and Analytics · Web Data Mining and Analysis · Software Engineering Research
SciVX discovery tags are terminology-based. OpenAlex topics are source-provided classifications.
Affiliations
College of Computer Science, Sichuan University, Chengdu 610207, China
Funding
Sichuan Science and Technology Program
References (53)
Show source-provided references
1. Material Design (2024, April 04). Top App Bar—Material Design 3. Available online: https://m3.material.io/components/top-app-bar/guidelines.
2. Dong, Y., Xue, C., Peng, N., and Niu, Y. (2018, January 15–20). The Effect of LOGO Location in Navigation Bar on Web Brand Recognition Based on Event-Related Potential. Proceedings of the HCI in Business, Government, and Organizations: 5th International Conference, HCIBGO 2018, Las Vegas, NV, USA.10.1007/978-3-319-91716-0_20 ↗
3. Johnson, J. (2007). GUI Bloopers 2.0: Common User Interface Design Do Nots and Dos, Morgan Kaufmann.
4. Cooper, A., Reimann, R., Cronin, D., and Noessel, C. (2014). About Face: The Essentials of Interaction Design, John Wiley & Sons.
5. dos Santos, E.P., de Lara, S.M., Watanabe, W.M., Filho, M.C., and Fortes, R.P. (2011, January 3–5). Usability evaluation of horizontal navigation bar with drop-down menus by middle aged adults. Proceedings of the 29th ACM International Conference on Design of Communication, Pisa, Italy.10.1145/2038476.2038504 ↗
6. Van Welie, M., Van Der Veer, G.C., and Eliëns, A. (2001). Patterns as tools for user interface design. Tools for Working with Guidelines: Annual Meeting of the Special Interest Group, Springer.10.1007/978-1-4471-0279-3_30 ↗
7. Ming, L. (2025, January 18). Streamlining Visual UI Design: Mining UI Design Patterns for Top App Bars. Zenodo. Available online: https://zenodo.org/records/13207361.
8. Alexander, C. (1977). A Pattern Language: Towns, Buildings, Construction, Oxford University Press.
9. Beck, K. (1987, January 4–8). Using pattern languages for object-oriented programs. Proceedings of the OOPSLA-87 workshop on the Specification and Design for Object-Oriented Programming, Orlando, FL, USA.
10. Gamma, E., Helm, R., Johnson, R., and Vlissides, J. (1995). Design Patterns: Elements of Reusable Object-Oriented Software, Addison-Wesley.
11. Putting it all together: Towards a pattern language for interaction design: A CHI 97 workshop10.1145/280571.280580 ↗
12. Seffah, A. (2010, January 19–23). The evolution of design patterns in HCI: From pattern languages to pattern-oriented design. Proceedings of the 1st International Workshop on Pattern-Driven Engineering of Interactive Computing Systems, Berlin, Germany.10.1145/1824749.1824751 ↗
13. Borchers, J.O. (2000, January 17–19). A pattern approach to interaction design. Proceedings of the 3rd Conference on Designing Interactive Systems: Processes, Practices, Methods, and Techniques, New York, NY, USA.10.1145/347642.347795 ↗
14. Tidwell, J. (2010). Designing Interfaces: Patterns for Effective Interaction Design, O’Reilly Media, Inc.
15. Nudelman, G. (2013). Android Design Patterns: Interaction Design Solutions for Developers, John Wiley & Sons.
16. Neil, T. (2014). Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps, O’Reilly Media, Inc.
17. Pattern languages in HCI: A critical review10.1207/s15327051hci2101_3 ↗
18. Seffah, A. (2015). Patterns of HCI Design and HCI Design of Patterns: Bridging HCI Design and Model-Driven Software Engineering, Springer.10.1007/978-3-319-15687-3 ↗
19. User interface design patterns and ontology models for adaptive mobile applications10.1007/s00779-020-01481-5 ↗
20. Leiva, L.A., Hota, A., and Oulasvirta, A. (2020, January 5–8). Enrico: A Dataset for Topic Modeling of Mobile UI Designs. Proceedings of the 22nd International Conference on Human–Computer Interaction with Mobile Devices and Services, Oldenburg, Germany. MobileHCI.10.1145/3406324.3410710 ↗
21. Wu, J., Wang, S., Shen, S., Peng, Y.H., Nichols, J., and Bigham, J.P. (2023, January 23–28). WebUI: A Dataset for Enhancing Visual UI Understanding with Web Semantics. Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems, Hamburg, Germany. CHI.10.1145/3544548.3581158 ↗
22. Chen, J., Xie, M., Xing, Z., Chen, C., Xu, X., Zhu, L., and Li, G. (2020, January 8–13). Object Detection for Graphical User Interface: Old Fashioned or Deep Learning or a Combination?. Proceedings of the 28th ACM Joint Meeting on European Software Engineering Conference and Symposium on the Foundations of Software Engineering, ESEC/FSE 2020, Virtual.10.1145/3368089.3409691 ↗
23. Deka, B., Huang, Z., Franzen, C., Hibschman, J., Afergan, D., Li, Y., Nichols, J., and Kumar, R. (2017, January 22–25). Rico: A Mobile App Dataset for Building Data-Driven Design Applications. Proceedings of the 30th Annual ACM Symposium on User Interface Software and Technology, UIST, Québec City, QC, Canada.10.1145/3126594.3126651 ↗
24. Liu, T.F., Craft, M., Situ, J., Yumer, E., Mech, R., and Kumar, R. (2018, January 14–17). Learning Design Semantics for Mobile Apps. Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology, UIST, Berlin, Germany.10.1145/3242587.3242650 ↗
25. Wireframe-Based UI Design Search through Image Autoencoder
26. Li, T.J.J., Popowski, L., Mitchell, T., and Myers, B.A. (2021, January 8–13). Screen2Vec: Semantic Embedding of GUI Screens and GUI Components. Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems, CHI, Yokohama Japan.10.1145/3411764.3445049 ↗
27. An Empirical Study on Multimodal Activity Clustering of Android Applications10.1109/ACCESS.2023.3280985 ↗
28. Choi, S., Seo, H.T., and Han, Y.S. (2023, January 13–16). JIDECA: Jointly Improved Deep Embedded Clustering for Android activity. Proceedings of the 2023 IEEE International Conference on Big Data and Smart Computing (BigComp), Jeju, Republic of Korea.10.1109/BigComp57234.2023.00025 ↗
29. ActionBert: Leveraging User Actions for Semantic Understanding of User Interfaces
30. Feiz, S., Wu, J., Zhang, X., Swearngin, A., Barik, T., and Nichols, J. (2022, January 22–25). Understanding Screen Relationships from Screenshots of Smartphone Applications. Proceedings of the 27th International Conference on Intelligent User Interfaces, IUI, Helsinki, Finland.10.1145/3490099.3511109 ↗
31. Bai, C., Zang, X., Xu, Y., Sunkara, S., Rastogi, A., and Chen, J. (2021). UIBert: Learning Generic Multimodal Representations for UI Understanding. arXiv.10.24963/ijcai.2021/235 ↗
32. Banerjee, P., Mahajan, S., Arora, K., Baral, C., and Riva, O. (2023). Lexi: Self-Supervised Learning of the UI Language. arXiv.10.18653/v1/2022.findings-emnlp.519 ↗
33. A measurement study of google play10.1145/2637364.2592003 ↗
34. Frank, M., Dong, B., Felt, A.P., and Song, D. (2012, January 10–13). Mining permission request patterns from android and facebook applications. Proceedings of the 2012 IEEE 12th International Conference on Data Mining, Brussels, Belgium.10.1109/ICDM.2012.86 ↗
35. Alharbi, K., and Yeh, T. (2015, January 24–27). Collect, decompile, extract, stats, and diff: Mining design pattern changes in Android apps. Proceedings of the 17th International Conference on Human–Computer Interaction with Mobile Devices and Services MobileHCI, Copenhagen, Denmark.10.1145/2785830.2785892 ↗
36. Sahami Shirazi, A., Henze, N., Schmidt, A., Goldberg, R., Schmidt, B., and Schmauder, H. (2013, January 24–27). Insights into layout patterns of mobile user interfaces by an automatic analysis of Android apps. Proceedings of the 5th ACM SIGCHI Symposium on Engineering Interactive Computing Systems EICS, London, UK.10.1145/2494603.2480308 ↗
37. Deka, B., Huang, Z., and Kumar, R. (2016, January 16–19). ERICA: Interaction mining mobile apps. Proceedings of the 29th Annual Symposium on User Interface Software and Technology, UIST, Tokyo, Japan.10.1145/2984511.2984581 ↗
38. Self-supervised learning: Generative or contrastive
39. Mikolov, T., Sutskever, I., Chen, K., Corrado, G.S., and Dean, J. (2013, January 5–8). Distributed representations of words and phrases and their compositionality. Proceedings of the Advances in Neural Information Processing Systems 26, Lake Tahoe, NA, USA.
40. Enriching word vectors with subword information10.1162/tacl_a_00051 ↗
41. Radford, A., Narasimhan, K., Salimans, T., and Sutskever, I. (2025, January 18). Improving Language Understanding by Generative Pre-Training. Available online: https://cdn.openai.com/research-covers/language-unsupervised/language_understanding_paper.pdf.
42. Cho, K., Van Merriënboer, B., Gulcehre, C., Bahdanau, D., Bougares, F., Schwenk, H., and Bengio, Y. (2014). Learning Phrase Representations Using RNN Encoder-Decoder for Statistical Machine Translation. arXiv.10.3115/v1/D14-1179 ↗
43. The k-means clustering technique: General considerations and implementation in Mathematica10.20982/tqmp.09.1.p015 ↗
44. Data clustering: Application and trends10.1007/s10462-022-10325-y ↗
45. Saisubramanian, S., Galhotra, S., and Zilberstein, S. (2020, January 7–9). Balancing the tradeoff between clustering value and interpretability. Proceedings of the AAAI/ACM Conference on AI, Ethics, and Society, New York, NY, USA.10.1145/3375627.3375843 ↗
46. Huang, F., Canny, J.F., and Nichols, J. (2019, January 4–9). Swire: Sketch-Based User Interface Retrieval. Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, CHI, Glasgow, UK.10.1145/3290605.3300334 ↗
47. Wei, J., Courbis, A.L., Lambolais, T., Xu, B., Bernard, P.L., Dray, G., and Maalej, W. (2024). GUing: A Mobile GUI Search Engine using a Vision-Language Model. arXiv.10.1145/3702993 ↗
48. Chen, C., Su, T., Meng, G., Xing, Z., and Liu, Y. (June, January 27). From UI Design Image to GUI Skeleton: A Neural Machine Translator to Bootstrap Mobile GUI Implementation. Proceedings of the 2018 IEEE/ACM 40th International Conference on Software Engineering (ICSE), ICSE, Gothenburg, Sweden.10.1145/3180155.3180240 ↗
49. Li, J., Yang, J., Hertzmann, A., Zhang, J., and Xu, T. (2019). Layoutgan: Generating graphic layouts with wireframe discriminators. arXiv.
50. Qin, C., Zhang, S., Yu, N., Feng, Y., Yang, X., Zhou, Y., Wang, H., Niebles, J.C., Xiong, C., and Savarese, S. (2023). Unicontrol: A unified diffusion model for controllable visual generation in the wild. arXiv.
51. Shao, Z., Gao, F., Xing, H., Zhu, Z., Yu, Z., Bu, J., Zheng, Q., and Yao, C. (2024). WebRPG: Automatic Web Rendering Parameters Generation for Visual Presentation. European Conference on Computer Vision, Springer.10.1007/978-3-031-73242-3_4 ↗
52. Dixit, R., Chinnam, R.B., and Singh, H. (2020, January 7–14). Artificial Intelligence and Machine Learning in Sparse/Inaccurate Data Situations. Proceedings of the 2020 IEEE Aerospace Conference, Big Sky, MT, USA.10.1109/AERO47225.2020.9172612 ↗
53. Li, G., Baechler, G., Tragut, M., and Li, Y. (May, January 29). Learning to Denoise Raw Mobile UI Layouts for Improving Datasets at Scale. Proceedings of the 2022 CHI Conference on Human Factors in Computing Systems, CHI, New York, NY, USA.10.1145/3491102.3502042 ↗