Utilizando Deep Learning para Apoiar o Design de Interfaces de Usuário de Aplicativos Móveis com App Inventor

• Daniel de Souza Baulé UFSC
• Christiane Gresse von Wangenheim UFSC
• Aldo von Wangenheim UFSC
• Jean C. R. Hauck UFSC
• Edson C. Vargas Júnior UFSC

Resumo

Transformar um sketch de interface de usuário em um wireframe utilizando App Inventor tem sido uma necessidade comum tanto no ensino de computação quanto no desenvolvimento de aplicativos por usuários finais. Como esta parte do desenvolvimento de aplicativos móveis é desafiadora e demorada, apresentamos uma abordagem que automatiza este processo durante a prototipagem de interfaces de usuário. A abordagem Sketch2aia utiliza deep learning para detectar os componentes de interface de usuário e suas posições em um sketch manual, criando uma representação intermediária da interface de usuário e gerando automaticamente o código de App Inventor para o respectivo wireframe. A abordagem alcança uma precisão de classificação média de componentes de interface de usuário de 87.72% e resultados de uma avaliação preliminar com usuários indicam que a ferramenta gera wireframes similares ao sketches em termos de similaridade visual. A abordagem está disponível como uma ferramenta web e pode ser utilizada para auxiliar no ensino de design de interfaces de usuários efetivamente e eficientemente, bem como no desenvolvimento de aplicativos móveis por usuários finais.

Palavras-chave: Design de interfaces de usuário, aprendizado de máquina, App Inventor