ACM Interactions

Authors:
Miriam Ferreira, Christiane von Wangenheim, Raul Filho, Fernando Pinheiro, Jean Hauck

---

 

Computing in K—12 is typically taught by programming software artifacts such as mobile applications. This, however, may not cover important knowledge areas such as user interface (UI) design. Engaging K—12 students in learning basic UI design concepts and process-oriented design skills allows educators to stimulate their creative capacities as well as promote the profession to a pool of young people [1]. It also encourages the development of empathy, creative problem solving, communication, and collaboration, skills that are valuable in many contexts.

  Insights

Few efforts have aimed at teaching UI design to K—12 students, and most have focused on creating prototypes of websites or apps with little or no functionality [2]. Some countries, such as China and South Korea, have begun teaching design to K—12 students. Elsewhere, the maker movement has its own efforts to teach design in K—12 schools (e.g., the CityX project or the K—12 lab of Stanford d.school). Since 2013 we have taught computational thinking to more than 2,000 K—12 students in extracurricular courses, developing games, robots, and functional applications as recommended by the K—12 Computer Science Framework [3]. However, we observed that the student applications in particular had poor usability and aesthetic quality.

To move toward both functional and usable computational artifacts, we devised a course for teaching UI design as part of a mobile applications development program in middle school. Our first experiences in a public school in Brazil have indicated a positive impact on student experience, motivation, and learning, creating an opportunity for students to develop innovative solutions to real concerns.

  "Make Your Own App" Course

As part of the Computing at School Initiative [4] at the Department of Informatics and Statistics at the Federal University of Santa Catarina (UFSC), we designed a 26-hour computing education course to teach, in addition to mobile app development, context analysis, usability requirement specification, prototype creation (sketches, low fidelity, high fidelity), visual design, and usability testing. Students learn not only to design, but also to develop a running mobile app with App Inventor [5], one of the most prominent open source environments used to teach computing.

In order to provide an engaging experience, we adopted various instructional strategies focusing predominantly on active learning, with hands-on activities to enable students to practice and explore design and computing concepts. In the beginning, we motivate students and introduce basic computing concepts on algorithms and programming through short lectures and discussions using slides and videos, as well as an educational board game to reinforce the understanding of algorithms. Students also learn basic programming concepts by coding and testing a predefined app, following the instructor's explanation step-by-step, with the help of teaching assistants.

Then, adopting a constructionist, problem-based learning strategy, students are challenged to develop their own mobile app addressing local community concerns. Such a student-centered pedagogy allows them to learn about a subject through the experience of solving an open-ended problem. They follow an agile, design thinking—based process (Figure 1) that incorporates the teaching of UI design concepts into software development. The process follows an iterative approach to build software incrementally using agile practices such as pair programming and user stories. The approach aims to support developing apps that match the users' needs, based on empathy with the users and constant feedback.

Figure 1. Software development process.

Each step is explained through a lecture with exercises, presenting a continuous example. Working in pairs and with the help of the assistants, students practice the steps by designing and developing their own running app that addresses a community concern identified by them.

The course is supported by materials such as slides, videos, exercises, and an educational game, as well as templates for all artifacts to be created, such as user stories and usability requirements.

  Running the Course

The course is part of our extracurricular program aimed at popularizing computing and design competencies. The instructors and assistants are professors and students (graduate and undergraduate) from both the Department of Informatics and Statistics and the Department of Graphic Expression at UFSC, in cooperation with volunteer mentors from IT companies and teachers from the school.

As part of an exploratory case study, we ran the course in 2018 with 10 middle school students ranging in age from 13 to 15 years old in a public school in Florianópolis, Brazil (Figure 2).

Figure 2. Students learning UI design in their public school.

Adopting a design thinking approach, students brainstormed about issues in their community and identified potential solutions. Several example apps were provided, as well as guidance on how to identify concerns and propose solutions. Students also reflected on technological feasibility by identifying components to be used by the apps (such as GPS and maps). Based on feedback from their peers and the assistants, they improved their ideas.

They then analyzed the context in terms of users, tasks, devices, and the usage environment. The students identified user categories and after class conversed with representatives from their social environment. They summarized the information in the form of personas and defined the tasks to be supported as user stories (Figure 3). They also asked the user representatives about the smartphones they used and the environment in which they would use the app, including, for instance, the need for Wi-Fi. Finalizing this step, for each task they specified usability requirements regarding effectiveness, efficiency, and satisfaction, indicating the expected time to complete the task and its expected difficulty on a five-point ordinal scale, ranging from very easy to very difficult.

Figure 3. Examples of artifacts created by the students.

Next, the students began drawing sketches based on the user stories, identifying the screens and navigation flow. They tested the paper prototypes with their peers in order to get early feedback.

Students then worked to program and test a wireframe prototype with App Inventor in an incremental way, creating the functionality for one user story in each iteration. Using the live testing feature of App Inventor, they tested the functionality of the prototype on their smartphones throughout its development. A project involving considerable effort, the wireframe prototype was programmed during several classes and completed as homework.

In the following step, students learned basic visual design concepts, including color, icons, typography, and images. We presented guidance provided by Google's Material Design, such as the composition of a color palette, as well as its icon catalog. We introduced aspects related to color harmony and reinforced them through an exercise in which the students created a paper color wheel. The students then selected a color palette for their app by creating a semantic panel and identifying a primary and secondary color. To support this step, we used several online resources, including freepik, canva, and the Material Design color tool. Discussing aspects related to readability, the students then selected the typography. We also provided guidance on sources for images, as well as ethical concerns regarding authorship, image content, and so on. Having defined the visual design, the students implemented it.

In order to validate the apps, the students performed both a system and a usability test. Working with their peers, the students conducted the usability tests, measuring data with respect to successful task completion, task execution time, and perceived task-completion difficulty. The students also learned how to generate an .apk version of their app in order to publish it on Google Play, and shared information on their apps via posters and a Web page [4]. The results were also presented to diverse audiences at their school and to a local IT company (Figure 4).

Figure 4. Apps developed by the students.

  Lessons Learned

The students actively took part in the course. They were able to follow the instructions and create the respective artifacts. Results of a performance-based assessment using a rubric automated by an evolution of the CodeMaster tool [4] indicate several strengths of the student apps' UI design, especially when compared with 1,000 randomly selected apps from the App Inventor Gallery [5]. They include:

• Hierarchy through the shapes, colors, and organization of UI elements
• Images with sufficient quality, preventing pixelated images
• Color contrast between text and background increasing legibility
• Well-designed icons used consistently
• Text labels format and typography in conformity with the Android style guide
• Visually attractive user interfaces.

By incorporating these design elements in their prototypes, students demonstrated that they were able to learn the principles of consistency, hierarchy, and personality of interface elements.

The students fully enjoyed the course, expressing this through enthusiastic comments in the course evaluation questionnaire (e.g., "super cool," "an experience that I will never forget," "I liked it more than anything"). They found the course easy to follow and liked the instructional strategy and material. Step-by-step instructions with immediate hands-on activities helped them to stay immersed in the learning process. We observed that especially UI design activities kept their attention, rather than more abstract software-engineering activities. For example, the students preferred to directly model the tasks through paper prototypes instead of defining use cases beforehand.

Although the students were able to create fully functional apps using App Inventor, we observed several shortcomings around its support for UI design, for example, for selecting a color palette or conforming to Android style guides. We therefore adopted various additional tools, which in turn led students to become distracted from the task at hand. Thus, in order to optimize the practical learning experience, it is important to embed comprehensive support within a single tool, in alignment with the instructional strategy.

We also observed shortcomings due to the restricted course duration. For example, tests were performed with their peers, rather than with different user representatives, as this would have taken more time. A possible solution could be the adoption of an instructional use-modify-create strategy, by which the students use and modify a predefined app prototype and create only a specific part—for example, the visual design—rather than building a completely new app from scratch.

In general, students expressed that they felt able to make mobile applications on their own and were interested in learning more UI concepts, especially about visual design. We also observed during the presentation of the apps a positive effect on their self-esteem, as they became confident that they could create apps with an attractive and usable user interface. Responses to course evaluation questionnaires and informal conversations indicated that students were eager to continue learning at home and through other courses. Conversations with parents revealed that they too observed the interest and enjoyment of their children in learning computing and UI design, and they expressed very positive feedback, asking for a continuation of the course.

  Conclusion

Incorporating UI design into computing education can have a positive impact on motivation, student experience, and learning. By developing their own apps solving real-world issues in their community, children also develop important skills such as creativity, problem solving, and critical thinking. Bringing design thinking and UI design together encourages students to become more creative and imaginative; creating functional apps teaches them how to put this inventiveness into practice. In this way, the learning of design competencies provides ways of engaging with the world that allow individuals to act as agents of change and creation in the 21st century.

Incorporating UI design into computing education also helps to broaden the perception that computing is more than just coding and thus may help to increase the diversity of students that may consider a career in IT.

Based on the success of our course, we are revising the instructional material and evolving App Inventor, improving its support for UI design activities. In order to foster sustainable large-scale adoption of UI design education in schools, we are also starting to develop professional development courses for inservice teachers and for engaging middle school students as their assistants in a peer tutoring approach.

  Contact Us

We will be sharing the course on our website [4]. For further information, contact us at [email protected].

  Acknowledgments

We want to thank the students and parents, as well as the volunteer mentors. This work was supported by the CNPq, an entity of the Brazilian government focused on scientific and technological development.

  References

1. Vanscoder, J. Importance of design education in K–12. Education Symposium, Boston, MA, 2012.

2. Agapie, E. and Davidson, A. Human-centered design charrettes for K–12 outreach. ACM Interactions 25, 6 (2018).

3. CSTA. K—12 Computer Science Framework, 2017; http://k12cs.org

4. Initiative Computação na Escola/INCoD/INE/UFSC; http://www.computacaonaescola.ufsc.br/?p=2739&lang=en

5. MIT App Inventor; http://appinventor.mit.edu

  Authors

M. Nathalie F. Ferreira is a master's student in the graduate program in design (PPGDEG) at the Federal University of Santa Catarina (UFSC). She participates in the Computing at School/INCoD/INE/UFSC initiative, studying the teaching of creative design in middle school. [email protected]

C. Gresse von Wangenheim is a professor in the Department of Informatics and Statistics (INE) of the Federal University of Santa Catarina (UFSC), where she coordinates the Software Quality Group, focusing on usability engineering. She also coordinates the Computing at School initiative, targeted at computing education in schools. [email protected]

R. Missfeldt Filho is an undergraduate student in the computer science course at the Federal University of Santa Catarina (UFSC) and a scholarship student of the Computing at School/INCoD/INE/UFSC initiative. [email protected]

F. da Cruz Pinheiro is a master's student in the graduate program in computer science (PPGCC) at the Federal University of Santa Catarina (UFSC) and a research student at the Computing at School/INCoD/INE/UFSC initiative. [email protected]

J. C. R. Hauck is a professor in the Department of Informatics and Statistics (INE) at the Federal University of Santa Catarina (UFSC), where he co-coordinates the Software Quality Group and the Computing at School initiative, which focuses on computing education in schools. [email protected]

 

©2019 ACM  1072-5520/19/07  $15.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2019 ACM, Inc.