Automação da Identificação de UI Design Patterns a partir de Wireframes utilizando Machine Learning

Abstract

A popularização dos smartphones está mudando o dia a dia das pessoas de diversas formas, proporcionando acesso à internet na palma da mão em qualquer lugar. Diante disso, a demanda por aplicativos para estes dispositivos vêm crescendo juntamente com esta popularização. Durante o processo de desenvolvimento de um aplicativo, é necessário projetar e criar interfaces gráficas nas quais o usuário irá interagir com as funções criadas, enviando e recebendo informações. Esta etapa é importante para o sucesso de um aplicativo, porém executada de forma manual demanda um esforço considerável. Neste sentido, o presente trabalho apresenta um protótipo para suporte a melhoria de design de interfaces gráficas para Android criadas com App Inventor, utilizando UI design patterns. Este trabalho consiste no desenvolvimento de um modelo de classificação de wireframes em relação a um grupo de UI design patterns comuns à maioria dos aplicativos. O modelo construído utilizando ResNet50 atingiu 90% de acurácia, recall e F1-Score na classificação de wireframes em 7 conjuntos de UI Design Patterns. Esta predição poderá ser utilizada como base para realizar sugestões ao design de UIs em desenvolvido. Tais sugestões poderiam ajudar que a interface esteja embasada em conceitos e diretrizes reconhecidos, trazendo familiaridade e robustez. Desta forma contribuindo com a qualidade de design das interfaces dos apps criados com App Inventor e contribuindo ao processo de aprendizagem do estudante em relação a UI na aplicação educacional.