Lesson 10: Paper Prototypes
Overview
Before starting to design apps, we need to help students to better 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 are easily prototyped in App Lab. Teams start this scoping by looking through several example apps designed to demonstrate apps that can be created with App Lab. Teams then can chose one (or more) of the apps as a basis for their own. From there, teams have some time to discuss the basic functionality of their app before using 3x5 index cards to develop paper prototypes.
Purpose
This lesson kicks off the actual design phase of this project. In order to simplify the app design process students are presented several broad categories of apps to choose from in developing their own idea. Students last created paper prototypes in Lesson 7, but at that point very few constraints were placed on the prototype user interface. Because these prototypes will eventually be converted into App Lab apps, it's important to better scope the types of apps teams design and the interface elements they use.
Assessment Opportunities
-
Explain the role of paper prototypes in app development.
Activity 2, discussion: Students should identify several key ways that paper prototypes contribute to app development, and these reasons should highlight the advantages over both a full product and digital prototypes.
-
Create a paper prototype that incorporates the user flow for a computational artifact.
Students' prototypes are collected at the end of the lesson, but there are also opportunities in the second activity to circulate, assess, and give feedback to students as they work. Each wireframe should be drawn with enough detail to identify the functionality of each element on the screen.
Agenda
Warm Up (5-10 min)
Activity 1 (30 min)
Activity 2 (45 min)
Wrap Up
View on Code Studio
Objectives
Students will be able to:
- Explain the role of paper prototypes in app development.
- Create a paper prototype that incorporates the user flow for a computational artifact.
Preparation
- Collect 3x5 index cards (or copies of the prototype template), sticky notes, colored pens and pencils, scissors for each team
- Print a copy of the activity guide for each team
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Students
- Prototype Brainstorming - Activity Guide
- Phone Paper Prototype - Template
- What's for Lunch - Prototype
Vocabulary
- Prototype - A first or early model of a product that allows you to test assumptions before developing a final version.
Teaching Guide
Warm Up (5-10 min)
Our Apps
Discussion Goal
Goal: In a few minutes, students will be looking at examples of other apps. AS they do, they should be keeping their own app in mind, both how they want to implement the ideas that they already have, and how they might use aspects of the example apps in their own.
Group Make sure students are sitting with their teams.
Prompt: With your team, discuss what you know about your app so far.
- Who will use the app?
- What will it look like?
- How will the user interact with it?
You may have decided on some things, but not others. Make sure you know what your team has already agreed on, and what you still need to discuss.
Activity 1 (30 min)
Transition: Go to Code Studio to explore the different app types. For each, discuss with the group how it might apply to their problem.
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.
Distribute: the activity guide
UI Elements: The activity guide contains a table of design elements available in App Lab. For each element, teams will discuss 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, but they should consider how each could be used in the context of their app.
Share: After giving teams time to fill out the table, go through the list asking a group 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.
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.
Activity 2 (45 min)
Prototyping Design
Content Corner
The process students are engaging in is known as participatory design - a design philosophy for computer systems that originated in Scandinavia in the 1980s. The goal is to get the end users of the design involved in the process early and often.
Define: Review the term prototype. To set expectations it's important to continually remind students that they are developing prototypes throughout the entirety of this unit, each one adding more functionality on top of the previous.
Assessment Opportunity
Students may come up with any number of valid reasons, but you'll want to make sure to highlight at least the following:
- It's easier and faster to sketch out an idea
- Testing ideas on paper lets you find problems in your assumptions before you spend time programming
- Users are more likely to give feedback on something that looks less polished / finished
Remarks
To better flesh out your app idea, each team will create and test a paper prototype. As with the prototypes you created earlier in this unit, this will allow for quick exploration with minimal investment. Designers can quickly iterate and change sketches based on feedback from users.
Discuss: Engage the class in a discussion about why this process might be preferable to just jumping into programming the apps.
Prompt: As you’re doing this, you'll also want to create a Navigation Diagram to describe the flow between the screens. This will be helpful for your user testing tomorrow as well as used in your final presentation.
Discuss: Exemplar App
Display: the sample prototype. Here is an example of the low fidelity prototype for our example app “What’s for Lunch?”
Discussion Goal
Encourage connections to the previous discussion. How does this prototype achieve (or fail to achieve) the goals of a low fidelity prototype?
- Are these sufficiently detailed to know what each screen will do?
- Do these look very polished? Or sketched?
- Are they relatively neat? Or at least neat enough that your test user could read what they need to?
- What User interface features are on each screen? (looking for things like buttons, images, text, etc).
- Do you think that a child could click on these items with their small fingers? Do you think an adult's fingers could fit on the important features?
- Is the flow through the screens clear?
- If you were a user testing this app, what comments might you make to the developers?
- If you were the developers of the app, what might you want to know from the test users?
Discuss: What do you notice about this prototype?
Preparing for Paper Prototypes
Prototype Brainstorming
Suggested Screens: The activity guide contains a list of suggested screens for the app types that students experimented with in the warm up. Teams should have selected an app type at this point, so they can use this as a starting point to determine which screens they'll need.
Teaching Tip
We introduced the App Lab elements earlier in the lesson so that students would have an understanding of the tools they'll have available. Students can stray from the provided elements, but when it comes time to develop their digital prototype, they'll need to either switch to one of the supported elements or use an image as a stand-in.
Our App's Screens: The final page provides a table for teams to list all of the screens they'll need. Let students know that they will likely need more screens than are listed in the "suggested screens", and it may not include every screen they eventually create, but it should cover all of the features that they currently plan to incorporate.
Paper Prototyping
Distribute: 3x5 index cards (or copies of the prototype template), sticky notes, colored pens and pencils, scissors for each team.
Prompt: Using this activity guide as a guideline, sketch out each of your apps screens on a separate index card.
Circulate: During this extended work period, teams will need to divide and conquer while still ensuring that they're working towards a common goal. Watch to make sure that teams continue communicating as they develop their screens, and encourage groups to frequently see how their screens are working together.
Wrap Up
Collect Prototypes
Assessment Opportunity
There should be a wireframe for each screen described on the last page of the activity guide, sufficiently detailed to be identified be its functionality. The wireframes should be composed of the various elements as described in the activity guide, and it shoudl be clear from the drawing the type of each element on the screen.
Collect: Gather the paper prototypes so they can be used for testing in the next lesson. Access to these prototypes will be essential for the next few lessons, so consider making a dedicated location in the classroom for teams to store them.
- Lesson Overview
- Student Overview
- 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.