Lesson 11: Exploring UI Elements

Distribute: Make sure each team has their materials from previous lessons available.

Group: Have the students sit at their team tables.

Prompt: Apps are made up of lots of individual components - things like buttons or text boxes. Write down as many components that you can think of from apps you’ve used in the past or seen in this class.

Discuss: Have students journal individually, then invite a few students to share their ideas with the class. Keep a running list in the front of the room.

Discussion Goal: This is a brainstorm discussion that helps connect their prior experiences to today’s lesson. Other examples may include checkboxes or dropdown menus or sliders, or even more complicated components like an interactive map or a social media feed. Use the ideas generated by the class to connect with today’s activity.

This is a great brainstorm of different components used in apps! When apps are created, they can use whatever components are available in the tool they use to make the app. When we create our own apps, we’ll use a tool called AppLab. Today we’re going to explore apps made in AppLab and see which of these components we can use when designing our own apps!

Question of the Day: What user interface elements will be useful for our app?

Transition: Have students go to Code Studio. Each code studio level is a different app that addresses a need in a community. Have students spend 5-10 minutes on the next task.

Do This: Explore each of the apps in whatever order you would like. Keep a list of the different components you see in these apps. Make note of any interesting features in these apps that you can share with your team

Circulate: Monitor students as they explore the apps. You may want to ask follow-up questions to help teams see the connections between their ideas and the apps they’re exploring, especially if you know some apps will be relevant to the topics some of your teams have chosen.

Distribute: the Explore UI Elements Activity Guide.

Reducing Printed Materials: The Activity Guide can be completed online or as a journal activity. The 3x5 notecards can be substituted with paper that has been cut into 4-6 rectangles.

Explore UI Elements

Do This: As a team, discuss each element in the table - what they think it does and how it could be used in their app. Teams don't need to (and likely won't) incorporate all of the elements in their app, but they should consider how each could be used in the context of their app.

Design Mode: Each of the elements on this activity guide are from the Design Mode interface of AppLab, introduced in Lesson 14. To help answer questions for this activity, you may want to preview that lesson so you are familiar with how these elements will work in AppLab.

What Is A Label? In general, any static text students see on the screen is a Label element. Most screens of an app have at least one label, and they are heavily used on screens with instructions or explanations. Students may initially struggle to define and identify “labels” in the apps they see - it is okay to explicitly tell them about this component so they don’t become frustrated or make incorrect guesses.

Circulate: Monitor teams as they complete this task, ensuring all voices within a team are heard and have a chance to share their observations about these elements.

Share: After giving teams time to fill out the table, go through the list asking different groups to share out how they might use each of the elements. Use this as an opportunity to ensure that the class has a clear understanding of what each element is and does.

Ensure students list the intended use of each UI element, and brainstorm how these elements connect to the features they’re planning for their apps.

Tomorrow we will begin making a paper prototype for our app. Now that you’ve explored these apps and seen the UI elements that are available to you, this may have sparked some new ideas for the features of your app. Take some time to discuss with your group any new features you might want to add to your app. Or, discuss how you might want to change some of the features now that you’ve seen the UI elements that are available to you.

Discussion: Now that they've seen more examples of apps, teams should discuss any new ideas that they have for the app, or things that they might change based on what they saw. They can take notes on yesterday’s activity guide, or they can take notes on the back of today’s activity guide.

Circulate: Monitor students as they complete this task, looking out for groups that may have to make adjustments now that they see the features available to them in AppLab. You may need to support some additional brainstorming as groups discuss new ways to accomplish their goals without access to some of the elements that may have expected to use.

Collect: Either collect the materials from each team, or have students store their market research activity guide in the same place as their team contract so they can be accessed later.

Prompt: What is one UI element you already know you will use in your app? Describe how you plan to use it in your app?

Discuss: Have students journal individually, then invite students to share their ideas with their teams.

Discussion Goal: This discussion helps team members share ideas for how they plan to use UI elements when creating their paper prototypes tomorrow, and continues to build excitement and momentum toward developing their app.