State of the Practice of the Visual Design of Mobile Applications developed with App Inventor
DOI:
https://doi.org/10.5753/rbie.2020.28.0.30Keywords:
Visual Design, Aesthetics, User Interface Design, K–12, App Inventor, Visual ProgrammingAbstract
App Inventor is a blocks-based programming environment that allows any end-user to create mobile applications. It is frequently used in order to teach computing in K-12 through the development of mobile apps. Although learning computing with App Inventor has been investigated from different points of view, a question that remains is whether the visual design of the user interfaces (UI) of the applications developed with App Inventor is adequate, being one of the major success factors of a mobile application. Therefore, this article analyzes the visual design of the user interfaces of 88,861 apps from the App Inventor gallery in relation to its compliance with style guides through an automated source code analysis, as well as its aesthetics based on a survey with 95 participants assessing 110 UIs. The results show that most UIs do not comply to design guidelines and do not have visual aesthetics. Therefore, it seems important to cover not only programming concepts, but also UI design in computing education when developing mobile applications. The results of this analysis can drive the development and improvement of instructional units and the App Inventor environment, thus contributing to the development of applications with better UI design and increasing their chances of having success.
Downloads
References
Agapie, E. & Davidson, A. (2018). Human-centered design charrettes for K-12 outreach. Interactions, 25(6), 74-77. [GS Search]
AIGA. (2019). The Professional Association for Design. Disponível em https://www.aiga.org/
Alves, N. d. C., Gresse von Wangenheim, C., Hauck, J. C. R., & Borgatto, A. F. (2019). A Large-scale Analysis of App Inventor Projects. Manuscrito submetido para publicação.
Chan, K. K. (2019). Building an Online Community of Creators Through MIT App Inventor. Dissertação de mestrado, Electrical Engineering & Computer Science, MIT, Cambridge, Estados Unidos. Disponível em https://appinventor.mit.edu/
CSTA. (2016). K–12 Computer Science Framework. Disponível em https://k12cs.org/
Daniel, G. T., Gresse von Wangenheim, C., Medeiros, G. & Alves, N. d. C. (2017). Ensinando a Computação por meio de Programação com App Inventor. Anais do Computer on the Beach. Florianópolis, Brasil. [GS Search]
Ferreira, M. N. F., Gresse von Wangenheim, C., Missfeldt Filho, R., Pinheiro, F. d. C. & Hauck, J. C. (2019). Learning user interface design and the development of mobile applications in middle school. Interactions, 26(4), 66-69. [GS Search]
Ferreira, M. N. F., Pinheiro, F. d. C., Missfeldt Filho, R., Gresse von Wangenheim, C. (2019). Ensinando Design de Interface de Usuário na Educação Básica: Um Mapeamento Sistemático do Estado da Arte e Prática. In Anais do Congresso Brasileiro de Informática na Educação. Brasília, Brasil.
Garrett, J. J. (2011). Elements of user experience, the: user-centered design for the web and beyond. Berkley: New Riders Press. [GS Search]
Gomes, T. C. & de Melo, J. C. (2013). App inventor for android: Uma nova possibilidade para o ensino de lógica de programação. In Anais dos Workshops do Congresso Brasileiro de Informática na Educação. Campinas, Brasil. [GS Search]
Gresse von Wangenheim, C. G., Hauck, J. C., Demetrio, M. F., Pelle, R., Alves, N. d. C., Barbosa, H., & Azevedo, L. F. (2018). CodeMaster – Automatic Assessment and Grading of App Inventor and Snap! Programs. Informatics in Education, 17(1), 117-150. [GS Search]
Gresse von Wangenheim, C. G., Porto, J. V. A., Hauck, J. C., & Borgatto, A. F. (2018). Do we agree on user interface aesthetics of Android apps?. arXiv:1812.09049 [cs.SE]. [GS Search]
Grover, S. & Pea, R. (2013a). Computational thinking in K–12: A review of the state of the field. Educational Researcher, 42(1), 38-43. [GS Search]
Grover, S. & Pea, R. (2013b). Using a Discourse-Intensive Pedagogy and Android's App Inventor for Introducing Computational Concepts to Middle School Students. In Proceedings of the 44th ACM Technical Symposium on Computer Science Education. Minneapolis, Estados Unidos. [GS Search]
Hamborg, K. C., Hülsmann, J. & Kaspar, K. (2014). The interplay between usability and aesthetics: More evidence for the "what is usable is beautiful" notion. Advances in Human-Computer Interaction, 2014, 15. [GS Search]
Hassenzahl, M. & Monk, A. (2010). The inference of perceived usability from beauty. Human–Computer Interaction, 25(3), 235-260. [GS Search]
International Organization for Standardization. (2011). ISO/IEC Standard 25010 - Systems and software engineering — Systems and software Quality Requirements and Evaluation (SQuaRE) — System and software quality models. Disponível em [Link]
Justen, K. A. (2019). Desenvolvimento de um Analisador de Design de Interface no Contexto do Ensino de Computação com o App Inventor (Trabalho de Conclusão de Curso). Disponível em [Link]
Kumar, D. S., Purani, K. & Viswanathan, S. A. (2018). Influences of 'appscape' on mobile app adoption and m-loyalty. Journal of Retailing and Consumer Services, 45, 132-141. [GS Search]
Lee, D., Moon, J., Kim, Y. J. & Yi, M. Y. (2015). Antecedents and consequences of mobile phone usability: Linking simplicity and interactivity to satisfaction, trust, and brand loyalty. Information & Management, 52(3), 295-304. [GS Search]
Leôncio, N. N., Sousa, C. C., Sousa, R. P. & Melo, R. F. (2017). Programação em blocos com o MIT App Inventor: Um relato de experiência com alunos do ensino médio. In Anais do Workshop de Informática na Escola. Recife, Brasil. [GS Search]
Lye, S. Y. & Koh, J. H. L. (2014). Review on teaching and learning of computational thinking through programming: What is next for K-12?. Computers in Human Behavior, 41, 51-61. [GS Search]
MIT. (2019). About Us. Disponível em [Link]
Mustafaraj, E., Turbak, F. & Svanberg, M. (2017). Identifying original projects in App Inventor. In Proceedings of the 30th International Flairs Conference. Marco Island, Estados Unidos. [GS Search]
Okerlund, J. & Turbak, F. (2013). A preliminary analysis of app inventor blocks programs. In Proceedings of the Conference on Visual Languages and Human Centric Computing, San Jose, Estados Unidos. [GS Search]
Patton, E. W., Tissenbaum, M. & Harunani, F. (2019). MIT App Inventor: Objectives, Design, and Development. In: Kong SC., Abelson H. (eds) Computational Thinking Education. Springer, Singapore. [GS Search]
Rogers, Y., Sharp, H. & Preece, J. (2011). Interaction design: beyond human-computer interaction (3rd ed.). Chichester: Wiley. [GS Search]
Schlatter, T. & Levinson, D. (2013). Visual usability: Principles and practices for designing digital applications. San Francisco: Morgan Kaufmann [GS Search]
Solecki, I. S. (2019). Uma abordagem para avaliação do design visual de aplicativos móveis criados com linguagens de programação baseadas em blocos (Dissertação de mestrado). Manuscrito em preparação.
Tissenbaum, M., Sheldon, J. & Abelson, H. (2019). From computational thinking to computational action. Communications of the ACM, 62(3), 34-36. [GS Search]
Tractinsky, N., Katz, A. S. & Ikar, D. (2000). What is beautiful is usable. Interacting with computers, 13(2), 127-145. [GS Search]
Tractinsky, N. (2013). Visual Aesthetics. The Encyclopedia of Human-Computer Interaction, 2nd Ed. Disponível em: [Link]
Wolber, D., Abelson, H. & Friedman, M. (2015). Democratizing computing with app inventor. GetMobile: Mobile Computing and Communications, 18(4), 53-58. [GS Search]
World Wide Web Consortium. (2008). Web Content Accessibility Guidelines 2.0. Disponível em [Link]
World Wide Web Consortium. (2019). Mobile Accessibility at W3C. Disponível em [Link]
Wilensky, U., Brady, C. E., & Horn, M. S. (2014). Fostering computational literacy in science classrooms. Communications of the ACM, 57(8), 24-28. [GS Search]
Xie, B., & Abelson, H. (2016). Skill progression in MIT app inventor. In Proceedings of the IEEE Symposium on Visual Languages and Human-Centric Computing. Cambridge, Inglaterra. [GS Search]
Xie, B., Shabir, I., & Abelson, H. (2015). Measuring the usability and capability of app inventor to create mobile applications. In Proceedings of the 3rd International Workshop on Programming for Mobile and Touch, Pittsburgh, Estados Unidos. [GS Search]
Zen, M., & Vanderdonckt, J. (2016). Assessing user interface aesthetics based on the inter-subjectivity of judgment. In Proceedings of the 30th International BCS Human Computer Interaction Conference: Fusion!, Bournemouth, Inglaterra. [GS Search]
Additional Files
Published
How to Cite
Issue
Section
License
Copyright (c) 2023 Igor da Silva Solecki, Karla Aparecida Justen, João Vitor Araujo Porto, Christiane Anneliese Gresse von Wangenheim, Jean Carlo Rossa Hauck, Adriano Ferreti Borgatto
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.
