Color Guard: Automating Google Material Design Color Guidelines Compliance for Mobile Applications (January 2025)


Authors : Sajani Anupama Balasooriya; Jagath Wickramarathne

Volume/Issue : Volume 10 - 2025, Issue 3 - March

Google Scholar : https://tinyurl.com/m92x7xk8

Scribd : https://tinyurl.com/ydsydph2

DOI : https://doi.org/10.38124/ijisrt/25mar1435

PlumX Metrics

Semantic Scholar

ResearchGate

IJISRT Repository

Google Scholar

Note : A published paper may take 4-5 working days from the publication date to appear in PlumX Metrics, Semantic Scholar, and ResearchGate.

Note : Google Scholar may take 15 to 20 days to display the article.

Abstract : Developing mobile applications today demands significant time and effort. Creating user-friendly user interfaces (UIs) is particularly challenging, with special attention needed for color-related details as they are the first thing customers notice. Numerous guidelines have been introduced to assist mobile UI designers in fostering good interaction between users and UIs. Among these, Google's Material Design guidelines are highly trusted, developed, and maintained by Google. Adhering to these guidelines enables developers and designers to create more efficient and effective UIs, which is crucial for commercial mobile applications. However, reading, understanding, and implementing all these guidelines can overwhelm novice UI designers. Additionally, having improvement tips and suggestions is highly beneficial. To address this challenge, this research proposes a web-based solution that reviews developed mobile UIs and provides textual suggestions to improve the UI design according to the design guidelines to support novice designers in designing their UIs more user-friendly. A solution is implemented as a web application, offering an effective way to provide this service across any device and operating system.

Keywords : Mobile Applications, Design Guidelines, UI Element Colors, UX.

References :

  1. Sambin, G., 2023. Usability of Safety Critical Applications in Enterprise Environments: Defining Guidelines for Error Preventing UI/UX Patterns and Improving Existing Interfaces (Doctoral dissertation, Politecnico di Torino).
  2. Android Developers. (n.d.). Accessibility | Mobile. [online] Available at:https://developer.android.com/design/ui/mobile/guides/foundations/accessibility.
  3. Guo, S., Shi, Y., Xiao, P., Fu, Y., Lin, J., Zeng, W. and Lee, T.Y., 2023. Creative and progressive interior color design with eye-tracked user preference. ACM transactions on computer-human interaction, 30(1), pp.1-31.
  4. Yang, B., Xing, Z., Xia, X., Chen, C., Ye, D. and Li, S., 2021, May. UIS-hunter: Detecting UI design smells in Android apps. In 2021 IEEE/ACM 43rd International Conference on Software Engineering: Companion Proceedings (ICSE-Companion) (pp. 89-92). IEEE.
  5. Liu, Z., Chen, C., Wang, J., Huang, Y., Hu, J. and Wang, Q., 2020, December. Owl eyes: Spotting UI display issues via visual understanding. In Proceedings of the 35th IEEE/ACM International Conference on Automated Software Engineering (pp. 398-409).
  6. Chen, J., Chen, C., Xing, Z., Xia, X., Zhu, L., Grundy, J. and Wang, J., 2020. Wireframe based UI design search through image autoencoder. ACM Transactions on Software Engineering and Methodology (TOSEM), 29(3), pp.1-31.
  7. Unger, R. and Chandler, C., 2023. A Project Guide to UX Design: For user experience designers in the field or in the making. New Riders.
  8. Aczel, B., Szaszi, B. and Holcombe, A.O., 2021. A billion-dollar donation: estimating the cost of researchers’ time spent on peer review. Research Integrity and Peer Review, 6, pp.1-8.
  9. Sabale, M.M., Pande, V.A., Tagalpallewar, A.A., Swami, A.G., Pawar, A.T. and Baheti, A.M., 2024. Maintaining data safety and accuracy through data integrity (DI): A comprehensive review. Research Journal of Pharmacy and Technology, 17(5), pp.2431-2440.
  10. Zhao, T., Chen, C., Liu, Y. and Zhu, X., 2021, May. Guigan: Learning to generate GUI designs using generative adversarial networks. In 2021 IEEE/ACM 43rd International Conference on Software Engineering (ICSE) (pp. 748-760). IEEE
  11. Ajiga, D., Okeleke, P.A., Folorunsho, S.O. and Ezeigweneme, C., 2024. The role of software automation in improving industrial operations and efficiency. International Journal of Engineering Research Updates, 7(1), pp.22-35.
  12. Viswanathan, S., & Peters, J., 2010. Automating UI guidelines verification by leveraging pattern based UI and model based development. CHI '10 Extended Abstracts on Human Factors in Computing Systems. https://doi.org/10.1145/1753846.1754222.
  13. Shneiderman, B., 2020. Human-centered artificial intelligence: Reliable, safe & trustworthy. International Journal of Human–Computer Interaction, 36(6), pp.495-504.
  14. Amor, R. and Dimyadi, J., 2021. The promise of automated compliance checking. Developments in the built environment, 5, p.100039.
  15. Wright, A., Wang, Z., Park, H., Guo, G., Sperrle, F., El-Assady, M., Endert, A., Keim, D., & Chau, D., 2020. A Comparative Analysis of Industry Human-AI Interaction Guidelines. ArXiv, abs/2010.11761.
  16. D. L. Stone, User interface design and evaluation. Amsterdam: Elsevier, 2009.
  17. Hamidli, N., 2023. Introduction to UI/UX design: key concepts and principles. Academia. URL: https://www. academia. edu/98036432/Introduction_to_UI_UX_Design_Key_Concepts_and_Principles [accessed 2024-04-27].Journal Name:ACM Trans. Graph.
  18. Lokman, A.M. and Hussin, S.N., 2011. Kansei website interface design: Practicality and accuracy of Kansei Web Design Guideline. In 2nd International Conference on User Science and Engineering (i-USEr).
  19. Material Design. (n.d.). Material Design. [online] Available at: https://m2.material.io/design/color/the-color-system.html#color-theme-creation.
  20. Whitaker, R., 2020. iOS Accessibility Features – General. , pp. 175-201. https://doi.org/10.1007/978-1-4842-5814-9_7.
  21. Wood, T., 2011. Putting the iOS Human Interface Guidelines in Context., pp. 1-6. https://doi.org/10.1007/978-1-4302-3880-5_1.
  22. Hu, P., Ma, P., & Chau, P., 1999. Evaluation of user interface designs for information retrieval systems: a computer-based experiment. Decis. Support Syst., 27, pp. 125-143. https://doi.org/10.1016/S0167-9236(99)00040-8.
  23. Awwad, A., Schindler, C., Luhana, K., Ali, Z., & Spieler, B., 2017. Improving pocket paint usability via material design compliance and internationalization & localization support on application level. Proceedings of the 19th International Conference on Human-Computer Interaction with Mobile Devices and Services. https://doi.org/10.1145/3098279.3122142.
  24. Kalac, E., Borovina, N., & Boskovic, D., 2021. Preserving interaction design principles while implementing Material Design Guidelines. 2021 20th International Symposium INFOTEH-JAHORINA (INFOTEH), pp. 1-6. https://doi.org/10.1109/INFOTEH51037.2021.9400523.
  25. Jung, D. and Kim, S.I., 2020. A Study on Mobile Application UI Design Components & Design Guidelines-Focused on the Google Material Design Guidelines. Journal of Digital Convergence, 18(5), pp.417-423.
  26. Bessa, M., Bostanabad, R., Liu, Z., Hu, A., Apley, D., Brinson, C., Chen, W., & Liu, W., 2017. A framework for data-driven analysis of materials under uncertainty: Countering the curse of dimensionality. Computer Methods in Applied Mechanics and Engineering, 320, pp. 633-667. https://doi.org/10.1016/J.CMA.2017.03.037.
  27. Adekotujo, A., Odumabo, A., Adedokun, A. and Aiyeniko, O., 2020. A comparative study of operating systems: Case of windows, unix, linux, mac, android and ios. International Journal of Computer Applications, 176(39), pp.16-23.
  28. Kalac, E., Borovina, N., & Boskovic, D., 2021. Preserving interaction design principles while implementing Material Design Guidelines. 2021 20th International Symposium INFOTEH-JAHORINA (INFOTEH), pp. 1-6. https://doi.org/10.1109/INFOTEH51037.2021.9400523.
  29. Tilstra, A., Backlund, P., Seepersad, C., & Wood, K., 2015. Principles for designing products with flexibility for future evolution. International Journal of Mass Customisation. https://doi.org/10.1504/IJMASSC.2015.069597.
  30. Park, W., Han, S., Kang, S., Park, Y., & Chun, J., 2011. A factor combination approach to developing style guides for mobile phone user interface. International Journal of Industrial Ergonomics, 41, pp. 536-545. https://doi.org/10.1016/J.ERGON.2011.04.002.
  31. Visnapuu, K., 2023. Consistency, Efficiency, and Scalability in Design Systems: A Comparative Analysis of Material Design, Apple's Human Interface Guidelines, and IBM Design Systems.
  32. Onur Gunes (2021). RICO dataset. [online] Kaggle.com. Available at: https://www.kaggle.com/datasets/onurgunes1993/rico-dataset. 
  33. GitHub. (2024). google-research-datasets/rico_semantics. [online] Available at: https://github.com/google-research-datasets/rico_semantics.
  34. Pan, X., Ye, T., Han, D., Song, S. and Huang, G., 2022. Contrastive language-image pre-training with knowledge graphs. Advances in Neural Information Processing Systems, 35, pp.22895-22910.
  35. Das, R. and Sanghavi, S., 2023, July. Understanding self-distillation in the presence of label noise. In International Conference on Machine Learning (pp. 7102-7140). PMLR.
  36. Zhang, C., Liu, L., Cui, Y., Huang, G., Lin, W., Yang, Y. and Hu, Y., 2023. A comprehensive survey on segment anything model for vision and beyond. arXiv preprint arXiv:2305.08196.
  37. Zhao, T., Chen, C., Liu, Y. and Zhu, X. (2021). GUIGAN: Learning to Generate GUI Designs Using Generative Adversarial Networks. [online] IEEE Xplore. doi:https://doi.org/10.1109/ICSE43902.2021.00074

Developing mobile applications today demands significant time and effort. Creating user-friendly user interfaces (UIs) is particularly challenging, with special attention needed for color-related details as they are the first thing customers notice. Numerous guidelines have been introduced to assist mobile UI designers in fostering good interaction between users and UIs. Among these, Google's Material Design guidelines are highly trusted, developed, and maintained by Google. Adhering to these guidelines enables developers and designers to create more efficient and effective UIs, which is crucial for commercial mobile applications. However, reading, understanding, and implementing all these guidelines can overwhelm novice UI designers. Additionally, having improvement tips and suggestions is highly beneficial. To address this challenge, this research proposes a web-based solution that reviews developed mobile UIs and provides textual suggestions to improve the UI design according to the design guidelines to support novice designers in designing their UIs more user-friendly. A solution is implemented as a web application, offering an effective way to provide this service across any device and operating system.

Keywords : Mobile Applications, Design Guidelines, UI Element Colors, UX.

Video Explanation for Published paper

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe