Development of an Interface Design Analyzer in the Context of Computer Teaching with App Inventor Karla Aparecida Justen 

Context ● The diffusion of information and communication technologies ● Need for familiarized people with these technologies ● Need for skilled labor in the labor market 

Teaching Computing in K-12 ● Useful knowledge for all other professions ● Improve logical reasoning ability for problem solving, innovation and creativity ● Useful knowledge for those who will follow the profession in the area of Computing 

App Inventor 

Successful application ● easy ● nice to wear ● require little effort from users Guidelines User Interface Design 

Evaluation ` Learning Teaching Education ● Problem-Based Learning ○ well-structured: with solution defined ○ ill-structured ● Ill-structured problem solving ○ Interviews based on artifacts created ○ Self-evaluations ○ Performance evaluations ■ Rubric ● 

Example of Rubric 

Problem Evaluation of apps developments in K-12: ● Lack of Basic Education teachers trained in Computing Science ● Teachers from other areas of knowledge have greater difficulty in carrying out the process of evaluation and give students feedback ● The bigger the class more time it takes to provide consistent feedback to all students ● Bias 

Enhance the CodeMaster web tool to do analysis and automatic assessment of application interface design developed with App Inventor to be used in instructional units in computer education in Basic Education 

The research methodology used in this work is divided into five main steps 1. Theoretical foundation 2. Systematic Literature Mapping 3. Development of the evaluation model 4. Tool development 5. Evaluation of the Heading Methodology 

Systematic Literature Mapping ● Partnership with Igor da Silva Solecki ● Total: 2571 artifacts ○ 9 artifacts were selected ■ 4 present questionnaires or checklists ■ 3 present rubrics ■ 2 publications present automatic assessments What ways are there for evaluation of visual design of mobile application interface of Android touchscreen smartphones or applications developed in App Inventor? 

Development of the Rubric ● Partnership with João Vitor Araújo Porto and Igor da Silva Solecki ● For each criterion of the rubric it needs to be evaluated with the resources offered by App Inventor ● Criteria organized into categories: ○ Layout ○ Typography ○ Writing ○ Colors ○ Images Complete Rubric at: http://apps.computacaonaescola.ufsc.br:8080/rubrica_appinventor.jsp 

“CodeMaster UI Design - App Inventor” Rubric ID Criterion 0 1 2 L1 Responsive Sizing Sizing property value is "fixed". Sizing property value is "responsive". T1 Font Type Face Percentage of components that have FontTypeFace property and its value is sans serif belongs to the [0, 90) range. Percentage of components that have FontTypeFace property and its value is sans serif belongs to the [90, 100] range. E4 Components with Hint property filled and different from default Percentage of components with Hint property filled and different from default belongs to the range [0, 90). Percentage of components with Hint property filled and different from default belongs to the range [90, 100]. C2 Contrast between text and background color The lowest contrast between text and background color does not meet the WCAG 2.0 requirements The lowest contrast between text and background color meets the WCAG 2.0 Level AA requirements The lowest contrast between text and background color meets the WCAG 2.0 Level AAA requirements I1 Usage of Material Design icons Percentage of icons throughout the application that are similar to some Material Design icon belongs to the range [0, 90). Percentage of icons throughout the application that are similar to some Material Design icon belongs to the range [90, 100]. - … ... ... ... ... 

Instructional Feedback Grade = . 10 achieved_punctuation maximum_ponctuation 

Automation of the Rubric ● Implementation of the rubric ● Correctness Test 

Título 

Título 

Reliability and Validity Evaluation of the Rubric ● Review Questions Q1: Is there evidence of internal consistency in the CodeMaster UI Design - App Inventor? ● Data Set: 978 Apps from the App Inventor Gallery Q2: Is there evidence of convergent and discriminant validity in the CodeMaster UI Design - App Inventor? 

Reliability Evaluation of the Rubric Q1: Is there evidence of internal consistency in the CodeMaster UI Design - App Inventor? ● Method: Cronbach alpha coefficient ○ Possible values: [0, 1] ○ Ideal values: [0.70, 0.95] ● Result: Cronbach's alpha = 0.71 

Validity Evaluation of the Rubric Q2: Is there evidence of convergent and discriminant validity in the CodeMaster UI Design - App Inventor? ● Intercorrelations between criteria ○ Method: Polyclonal Correlation ○ Satisfactory correlation: greater than 0.29 ● Criterion-total correlation 

Avaliação da validade da rubrica Q2: Há evidência de validade convergente e discriminante na rubrica CodeMaster UI Design - App Inventor? ● Intercorrelações entre critérios ○ Método: Correlação Policórica ■ Correlação satisfatória: maior que 0,29 ● Correlação critério-total 

Validity Evaluation of the Rubric Q2: Is there evidence of convergent and discriminant validity in the CodeMaster UI Design - App Inventor? ● Intercorrelations between criteria ○ Method: Polyclonal Correlation ○ Satisfactory correlation: greater than 0.29 ● Criterion-total correlation 

Item Correlação item-total Alfa de Cronbach com item removido L1. dimensionamentoResponsivo -0.01 0.71 L2. telasComOrganizadores 0.30 0.70 L3. tamanhoDeAlvosDeToque 0.25 0.70 L4. formatoDosBotoes 0.49 0.69 L5. tamanhoConsistenteDeBotoes 0.27 0.70 L6. densidadeDaIU 0.44 0.68 T1. familiaFonte 0.58 0.68 T2. tamanhoFonteBotoes 0.38 0.69 T3. tamanhoDaFonte 0.28 0.70 T4. naoUsaItalico 0.56 0.68 T5. botaoComTextoCentralizado 0.47 0.69 E1. caixaAltaBotao 0.09 0.71 E2. capitalizacaoSentenca -0.13 0.73 E3. textoDefault 0.56 0.69 E4. dicaPreenchidaEDiferenteDefault 0.08 0.71 E5. doisPontosLegenda 0.14 0.71 E6. pontoFinalSentenca -0.03 0.72 E7. tamanhoMaximoTextoBotao 0.37 0.69 E8. exclamacaoMultipla 0.07 0.71 C1. sistemaDeCores 0.23 0.71 C2. contrasteEntreTextoEFundo 0.36 0.70 C3. coresMaterialDesign 0.08 0.71 C4. coresHarmonicas 0.28 0.70 I1. iconesMD 0.07 0.71 I2. pixelizacao 0.10 0.71 I3. imagensEmBotoes 0.06 0.71 I4. componenteImagem -0.01 0.72 I5. imagensDeFundo -0.02 0.71 

Conclusion Results ● "CodeMaster UI Design - App Inventor" rubric ● Automated evaluation module for application interface design developed with App Inventor, which was included in the CodeMaster tool ● Reliability and validity evaluation Benefits ● Contribution to the improvement of the teaching of computing inserted in the Brazilian schools and the popularization of this knowledge in the society. Future works ● Improve application evaluation performance by CodeMaster. Paralleling the execution. ● Use the data resulting from the reliability and validity evaluation as a basis to carry out improvements on "CodeMaster UI Design - App Inventor" rubric 

Conclusion Resultados ● Rubrica “CodeMaster UI Design - App Inventor” ● Módulo de avaliação automatizada do design de interface de aplicativos desenvolvidos com o App Inventor, que foi incluído na ferramenta CodeMaster ● Avaliação de confiabilidade e de validade Benefícios ● Contribuição com a melhoria do ensino de computação inserido nas escolas Brasileiras e a popularização deste conhecimento na sociedade. Trabalhos futuros ● Aprimorar o desempenho da avaliação de aplicativos pelo CodeMaster. Paralelizando a execução. ● Utilizar os dados resultantes da avaliação de confiabilidade e de validade como base para realizar aprimorações na rubrica "CodeMaster UI Design - App Inventor” 

Thanks!