FenixEdu™

Dissertação

{pt_PT=From Mockup to UI} {} EVALUATED

Detalhes: {pt=O processo de desenvolvimento uma interface de utilizador tende a consumir muito tempo, pois normalmente depende do trabalho sequencial de várias pessoas, sofrendo inúmeras iterações até uma versão final ser obtida. Por norma, o primeiro passo corresponde a algo como um rascunho num quadro branco. Possuir uma ferramenta que, automaticamente, durante a geração de ideias, consiga converter esse mesmo rascunho no respectivo código da interface, levaria a um grande incremento na rapidez de todo o processo. Permitiria iterar diferentes interfaces de utilizador mais rapidamente e, consequentemente, levar a uma experimentação mais ágil dos protótipos, aumentando assim a produtividade da equipa. As soluções atuais para este problema tendem a depender de desenhos digitais, em vez de desenhos à mão livre. No entanto, a natureza abstrata dos desenhos de interfaces e a sua diversidade, sugere a utilização de técnicas de aprendizagem automática para resolver este problema. A nossa abordagem consistiu em dividir a tarefa em duas partes: primeiro detetar a posição e classe de cada elemento no desenho usando uma rede neuronal profunda; seguida da passagem dessa informação a um programa de geração de código. O modelo com melhores resultados atinge resultados de 87%, em termos de mAP (mean average precision). Este trabalho serve principalmente como um ponto de partida para a construção de uma arquitectura que consiga interpretar e inferir corretamente desenhos feitos por humanos para gerar o respectivo código, com o objectivo final de tornar a fase de prototipagem de uma interface de utilizador muito mais ágil e eficiente., en=The process of developing the user interface (UI) of an application tends to be time-consuming, as it usually relies on the sequential input of several people, requiring numerous back and forth iterations until a final version is obtained. A common first step of this process is a hand-made sketch on a whiteboard. Having an automatic tool that, during the design brainstorming phase, could instantly convert UI sketches into the respective code for that UI and generate it, would speed up the whole process. It would allow teams to iterate through different UI designs significantly faster and, consequently, enable the agile experimentation and end-visualisation of different prototype designs, increasing productivity. Current solutions for this problem tend to rely on digital sketches rather than hand-made ones. However, the abstract nature of UI sketches and their diversity suggest the use of machine learning techniques to tackle this problem. Our approach to this task was to split it into two different parts: first detect the position and class of each element in the drawing using a deep neural network, followed by a program generation algorithm to output the final code to be compiled. The best-performing setup achieves 87% in terms of mean average precision (mAP). This work is a first step towards building a deep learning architecture that can correctly interpret and infer human sketches, with the final goal of making the prototyping phase of a UI design more agile and efficient.}
Keywords: {pt=Desenho à mão livre de uma interface, Análise de imagem, Geração de código, Aprendizagem profunda, en=Hand-drawn UI sketch, Computer vision, Deep learning, Program generation}

Discussão: novembro 12, 2019, 14:0