BBL Development of an Interface Design Analyzer in the Context of Computer Teaching with App Inventor

Transcript

1. Development of an Interface Design Analyzer in the Context of Computer Teaching with App Inventor Karla Aparecida Justen
2. Context • The diffusion of information and communication technologies • Need for familiarized people with these technologies • Need for skilled labor in the labor market
3. 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
4. App Inventor
5. Successful application • easy • nice to wear • require little effort from users Guidelines User Interface Design
6. 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 •
7. Example of Rubric
8. 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
9. 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
10. 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
11. 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?
12. 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
13. “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]. - … ... ... ... ...
14. Instructional Feedback Grade = . 10 achieved_punctuation maximum_ponctuation
15. Automation of the Rubric • Implementation of the rubric • Correctness Test
16. Título
17. Título
18. 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?
19. 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
20. 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
21. 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
22. 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
23. 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
24. 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
25. 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”
26. Thanks!