This is the first in a series of lessons where students will make progress on building their own functional app. In this lesson, students brainstorm app ideas and sketch out user interfaces in preparation for the next lesson where they will begin building the apps with code.
Students will be able to:
- Brainstorm and choose a topic to develop into an app
- Use feedback to help guide the design of an app
- Design the user interface of an app
This lesson kicks off a project that students will complete throughout the unit. The framing of this project is also important for how programming is presented overall. Students are encouraged to collaboratively design their projects, choose topics of personal interest, and build an app to meet the needs of other people. All of this is important as part of framing programming as a collaborative, creative, and socially situated pursuit.
Prompt: People design user interfaces to meet a user's needs, but they don't always get it right.
Discussion Goal: The goal here is to help students understand the importance of considering the end user when designing an app.
Some points that may come up:
- Some apps have too much guidance on how to use them, and others too little.
- An app may be designed for a phone, but the user wants to use it on a tablet.
- Apps that are designed for teenagers may make assumptions about language usage or interests that aren't accurate.
- Yesterday we learned all about Design Mode. Today you're going to start developing your own app that educates a user on a topic. This is a project that will continue through the rest of the unit.
Distribute: App Development Planning Guide - Activity Guide. Students will be using the Planning Guide for the rest of the unit. Read the Project Description together and make sure students understand the requirements. Direct students to the "Investigate" section.
Step 1: Brainstorm Topic Ideas
Group: Organize students into pairs.
- You will work with a partner on this project. Collaboration is a big part of app development. Your team's diverse ideas will help make your app even better, because each partner can keep a lookout for bias.
- Here's an example: A team member puts in their app the phrase: "All teenagers work after school to earn spending money" because this is their experience - they work after school themselves. However, the other team member may not have an after school job, and because of this can point out the bias in that statement.
- Collaboration is key to catching bias in your work!
- Here's another example, this time in the design of an app. A team wants to make an app to encourage girls to sign up for a summer camp. One team member assumes that because this app is aimed at girls, the background should be pink. A girl on the team points out that she does not like pink, and using that color in the design may represent bias.
- As you think about your topics and start designing your apps, remember to keep an eye out for bias and use your team mates to keep you accountable!
Activity Guide: In their groups, students brainstorm topic ideas and add them to their worksheet.
Teaching Tip: Students have a lot of freedom in choosing their topics. If they are struggling with ideas, they could create an app for another class, for example: an overview of the periodic table for science class.
Step 2: Choose One Topic
Activity Guide: Working with a partner, students narrow down their ideas to one topic and explain what would be covered in their app.
Step 3: Survey Your Classmates
Activity Guide: The goal in this step is for students to understand the needs of their users. This will help inform the overall design of the app.
Step 4: Design the User Interface
Activity Guide: Student use the screen templates to sketch out the design of their app, including arrows or notes to show how different elements are connected.
Teaching Tip: After Step 4, you may want to check in with student groups to make sure their apps are doable and can be completed within the scope of the project.
Steps 5+ will be completed later on in the unit.
Prompt: How did talking with the users of your app impact your design decisions?
- In the following lessons, you will continue to plan and create you apps. What are we doing here? We are following a development process, which is similar to what developers use in the real world when creating their own apps. A development process breaks down the steps into small pieces - we've completed the first few today.
- There are many different versions of the development process. Most use some combination of investigating and reflecting, designing, prototyping and testing. Development processes can be ordered like we have laid out in the Activity Guide or more exploratory in nature. As we continue on through this project, reflect on the steps and consider how they help organize the process.
Assessment: Check for Understanding
Question: Match each term with an example.
- User Interface
- A screen with buttons, images, and text
- A song is played
- The user clicks a button
- CSTA K-12 Computer Science Standards (2017): 3A-AP-16, 3A-AP-19, 3A-AP-21, 3A-AP-22, 3A-AP-23
- CSP2021: CRD-1.A.3, CRD-1.A.4, CRD-1.A.6
- CSP2021: CRD-2.E.1, CRD-2.E.2, CRD-2.E.4, CRD-2.F.1, CRD-2.F.2, CRD-2.F.3, CRD-2.F.4, CRD-2.F.5, CRD-2.F.6, CRD-2.F.7