Lesson 11: Exploring UI Elements
Overview
Question of the Day: What user interface elements will be useful for our app?
Before starting to design apps, we need to help students scope their expectations. Because students will eventually be prototyping these apps in App Lab, they will be in better shape if their ideas align with the kinds of apps that can be made using AppLab’s tools. Today focuses on having teams look at several example apps made in AppLab and identifying the components of the user interface. They then make a plan for which features could use which components in their app.
Purpose
This lesson helps narrow the scope of the types of design elements students can include in their apps. Up until now, students have explored and brainstormed apps with a variety of functionality - they may have discovered apps that use maps, or connect to social media, or access data on your phone. In this lesson, they explore only apps built with AppLab tools so they have more realistic expectations for the apps they can create by the end of the unit.
Assessment Opportunities
-
Explain the purpose of individual UI elements when developing an app
Activity Guide: Students will list the intended use of each UI element, and brainstorm how these elements connect to the features they’re planning for their apps.
Agenda
Warm Up (5 mins)
Activity (35 mins)
Wrap Up
View on Code Studio
Objectives
Students will be able to:
- Explain the purpose of individual UI elements when developing an app
Preparation
- Print a copy of the activity guide for each team
- (Optional) Preview Lesson 14 - Design Mode in AppLab to help answer questions from students about UI elements in AppLab.
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Unit 4 The Design Process - Slides
- Explore UI Elements - Exemplar
For the Students
- Explore UI Elements - Activity Guide
Teaching Guide
Warm Up (5 mins)
Discussion Goal
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.
Getting Prepared
Distribute: Make sure each team has their materials from previous lessons available.
Group: Have the students sit at their team tables.
Journal
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.
Remarks
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?
Activity (35 mins)
Explore App Lab Apps
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.
Teaching Tip
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.
Teaching Tip
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.
Distribute: the Explore UI Elements Activity Guide.
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.
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.
Remarks
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.
Wrap Up
Discussion Goal
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 towards developing their app.
Journal
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.
- Lesson Overview
- Teacher Overview
- Student Overview
- Prototype Brainstorming - Exemplar (PDF | DOCX)
- Example App Types
- Teacher Overview
- Student Overview
In this activity students will be introduced to a small number of relatively constrained apps:
- Quiz Me
- Decision Maker
- List Manager
- Crowdsourcing
For younger or more inexperienced students you may want to restrict them to just these app types. We've specifically chosen these examples because they are relatively easy to prototype in App Lab.
If you allow students to stray from these, be aware that some types of apps are more difficult to create in App Lab and may require more creativity in developing a prototype. For example, App Lab has no mapping functionality, so if students wanted to create a mapping app, they would need to find or create a static image of a map to use in their app.
Example App Types
In the following levels you see several different example apps. They will give you an idea of what the UI (User Interface) could look like for apps with different goals.
For each example app:
- Click through the example to get a feel for how it functions.
- In your activity guide, make a note of any features or UI elements you find and what they are used for.
- Discuss with your groups how that app and any of its UI features could be applied to your chosen topic.
A Note About Functionality
These apps are prototypes; they allow a user to interact with the design without worrying about the underlying functionality. For example, when you take use the Quiz App, each question will always respond the same way, regardless of which answer you choose.
By focusing on an interactive prototype first you can learn a lot about how users might use your app before investing too much energy in making it actually work.
Student Instructions
Quiz Me
A quiz app can be used to teach, or help reinforce, information important to your chosen topic.
At its most basic, a quiz app is composed of a screen for each question with two or more buttons for multiple choice answers. Each button links to a page that either confirms that you were correct, or gives you information about why you were were wrong.
More advanced quiz apps could include features such as:
- Different types of questions (such as matching, free response, or even interactive games)
- Randomizing the order of questions
- Changing the questions based on how we'll you're doing
- Providing a final score
- Incorporating study material
Functionality Missing from this Prototype
- Questions aren't actually checked for correctness
Student Instructions
Decision Maker
Similar to the quiz app, a decision tree app asks the user a series of questions. The primary difference between the two is that a decision tree doesn't check for right or wrong answers, but instead attempts to give the user a suggestion or help them make a decision based on their answers.
This simple decision maker asks only three questions, but more advanced ones actually take the form of a tree as seen below:
Depending on the user's answer to each question, they're given a different page for the next question. This allows the app to gradually narrow down the decision one question at a time. This type of app can be really useful to help users understand complex processes - for example, you might introduce a recycling program by using a decision tree app to help users figure out which bin to sort items into - first asking what material it's made out of, then whether it is clean or not, and so on.
Functionality Missing from this Prototype
- Question buttons don't direct you to different screens
- The final screen doesn't give you a recommended decision
Student Instructions
List Manager
The list manager app allows user to keep track of the state of information and can be modified to serve many different purposes, such as checking in / out loaned items, tracking personal To Dos, or keeping track of where things are in a multi-step process.
While this example focuses on a single list, more sophisticated list apps could allow the user to create multiple lists, or even move items between lists. This app also only keeps track of the name of an item and whether or not it is "Done," but it could be extended to track and organize any amount of information about the list items.
Functionality Missing from this Prototype
- Delete buttons don't actually delete items from the list
- Add screen doesn't actually add an item to the list
Student Instructions
Crowdsourcing
Crowdsourcing apps allow multiple users to submit content for everyone to use (the source of content is the crowd). This app is very similar to the list app, with the main difference being that the list app assumes a single user while this app allows all users to add to the same list and "like" submissions.
This example uses a list of crowdsourced information for simplicity, but you could display any kind of information in many different formats. A crowdsourcing app could allow users to submit locations for display on a map, images to go into a gallery, or any number of other types of information.
Functionality Missing from this Prototype
- User's can't create accounts or profiles
- Submitted things aren't added to the list
- Clicking on the "like" icons don't change their state
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
AP - Algorithms & Programming
- 2-AP-10 - Use flowcharts and/or pseudocode to address complex problems as algorithms.
- 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.