Forums

XXVI.4 July-August 2019
Page: 66
Digital Citation

Learning user interface design and the development of mobile applications in middle school


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

back to top 

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.

back to top  Insights

ins01.gif

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.

back to top  “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.

ins02.gif 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.

back to top  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).

ins03.gif 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.

ins04.gif 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).

ins05.gif Figure 4. Apps developed by the students.

back to top  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.

back to top  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.

back to top  Contact Us

We will be sharing the course on our website [4]. For further information, contact us at computacaonaescola@incod.ufsc.br.

back to top  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.

back to top  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

back to top  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. nathalie.fortuna@posgrad.ufsc.br

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. c.wangenheim@ufsc.br

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. raul.missfeldt.filho@grad.ufsc.br

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. fernando.pinheiro@posgrad.ufsc.br

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. jean.hauck@ufsc.br

back to top 

©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.

Post Comment


@Mark Albin (2012 06 30)

This is a very interesting article about social bots, thanks for sharing.

@Aman Anderson (2012 07 18)

This is great
“So what’s the center of a design? In one sense, it is the designer’s nuanced understanding of the problem or opportunity at hand. The focus of design is problem solving, not self-expression.” - Uday Gajendar, Interaction Designer

@Bill Killam (2012 07 31)

This is a long overdue article.  And I couldn’t agree with it more.  I’m current working on yet another Federal RFP that is asking for us to do work using short cut methods that are likely make it harder to get them quality results, and we can probably propose a cheaper and more data rich approach if they didn’t specify how we had to do the job.  Sad.

@Demosthenes Leonard Zelig (2012 08 12)

Great Article, it is funny to notice that such huge corporations do not even bother to do a market research before releasing products on a new market. However, I guess we are still learning from our mistakes.

@karla.arosemenea@gmail.com (2012 10 24)

Hi everyone, In the Technological University of Panama there is also a movement. There is a 2 years MS in IT with a specializtation in HCI. We are also trying to include HCI as part of our main curricula. This year we started a research with a company interested on incorporating usability in their development. We expect to receive a Fulbright Scholar next year in this area…

Regards,

Karla Arosemena
Professor

@John Michael Sheehan (2012 11 06)

There are thousands of blogs that requires comments on them. What is the intention of blog comments? Sent From Blackberry.

@Junia Anacleto (2012 11 07)

A very shallow and naive view of a much more rich and complex context.
I am still waiting for a fair position paper to be presented.

@Rick Norton (2012 11 17)

Excellent article raising significant issues that are largely overlooked.  The prospect that the collapse of sustainability for a growth/consumption related societal model is inevitable, is a topic I have often wondered about, given the nature of capitalism as we know it today.  Even the “Great Recession” of current times gives me pause to wonder just how long we can keep this economic engine going before we have to face the reality that we are all going to have to learn to “live with less”.  (A quantitative assessment, not necessarily qualitative.)

Keep up the good work.  Hopefully, you will raise awareness of these topics.

@Noah McNeely (2012 11 27)

Very nice article, that raises meaningful questions.  I actually think that the idea of sustainable products and sustainable product development is a bit of a myth.  All products consume energy and other resources in one form or another during their production, use, or re-use.  The key, ultimately is to balance resource consumption with resource production, but we will always need to be producing new resources.  See my blog post on the subject at ( http://productinnovationblog.blogspot.com/2012/11/are-there-sustainable-materials_7159.html )

@ed.h.chi@gmail.com (2012 11 30)

The quote in the article mis-contextualize James Landay ‘s essay. James actually is actively working to break down those stereotypes, but you can’t do that without understanding what the deep problems are.

James’ blog post on this is at
http://dubfuture.blogspot.com/2011/12/china-will-overtake-us-in.html

@Lee Crane (2012 12 03)

This is a topic that is thought provoking and important.  The message explores how humans can escape and survive the world they have jumbled.  So many of the theories and ideas are basic.  Our future may look a lot like the distant past.  And indeed we may be happier for it.

@ 4996484 (2012 12 19)

this is a great article David and Silvia!  I’‘m so excited that you guys wrote this up and are showing everyone the complexities in this space. I hope Interactions features more of this kind of research on China.  Although I agree w/ @landay’s assessment of China’s creativity problem - but he’s working with a very different population than you guys. I think you research is absolutely on point - creative folks are going to hacker spaces like Xinchejian, they aren’t ending up in institutions like Tsinghua!  I explain more here:  http://www.88-bar.com/2012/12/where-are-all-the-creative-chinese-people-hanging-out-in-hacker-spaces-apparently/

@Joe (2013 01 04)

I think that if you study the Elliot Wave Theory it can answer your questions.

@Rafeeque (2013 01 06)

good one

@zhai (2013 01 17)

Enjoyed reading this article. I finally got why Harold wants to call it “the Fitts law”. If enough people write it that way I would never have to correct another submission making the embarrassing mistake of ‘Fitt’s law”.

I did not completely get the following remark though:

        “The Accot and Zhai paper about the Fitts Law [3] has a clever title that illustrates
        the rules on letters, “More than dotting the i’s…”—a bad pun on eyes.”

I came up with the title, but the word “eyes” never came to my mind. We meant that the point-and-click style of UI is like dotting the i’s everywhere—- placing a click on constrained targets as the fundamental action in interaction. Why not using ” Crossing the t’s ”  as an alternative action?  Indeed, we presented models of a new style of UI, which systematically reveals when crossing is superior to clicking,  hence the subtitle of the paper “Foundations for crossing-based interfaces.”

Shumin Zhai

@Mohamadou M. Amar (2013 03 22)

I am a Doctoral student in I/O Psychology with Touro UW and need to access your articles.

@Mohamadou Amar (2013 03 22)

Need access for Doctoral Research

@William Hudson (2013 04 09)

Gilbert overlooks the important issue that the ‘big boys’ largely do not appreciate the need for design all and the problems that real people have with technology. I admit that we’ve had a hard time selling UCD but I am not persuaded by the arguments here to abandon it. Perhaps have a look at my article on a similar subject - User Requirements for the 21st Century - where I take a more pragmatic view of trying to address real users’ needs in the development process. http://bit.ly/agile-ucd

@ 0343665 (2013 04 29)

Fantastic text. I came here by searching for people that quote the Standford study on multitasking. The introduction is fantastic as it builds up an argument that attention has some features that do not change over time.

@Simon Taylor (2013 04 30)

not wanting to do anything so grandiose as building a (technology for) a world parliament, I have in essence been working on the same problems and facing the seven challenges with a project called ‘company.’ [https://gust.com/c/littleelephantltd]

In 2011, working with senior software developers - gratis - although neither the ethical undertaking nor the promise of sweat equity were enough to keep them involved - I established the technical feasibility of ‘company.’
h
In 2012, turning from the ‘voluntary’ ‘principled’ participation model - because the attractions of real paying jobs had lost me my team - I received financial support from the New Zealand government. This part-funded an Intellectual Property Position Review - which government considered a pre-requisite - as commercial due diligence - to investing in an initial build, or beta. The IPPR recommended I do proceed… However, government offers only part-funding and without a team - either technical or commercial - there has been little to no investor interest.

As things stand at present, I have the tools and schematics for a beta build of something which would fit the sort of use imagined here. If you have any interest in helping, please contact me.

Best,
Simon Taylor