Unit4
Ch. 1
1
2
3
4
5
6
7
Ch. 2
8
9
10
11
12
13
14
15
16

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.

Agenda

Warm Up (10-15 min)

Activity (70 - 90 min)

Wrap Up

View on Code Studio

Objectives

Students will be able to:

  • Communicate the design and intended use of program
  • Demonstrate the user flow through an app’s design using a paper prototype

Preparation

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Students

Vocabulary

  • Prototype - A first or early model of a product that allows you to test assumptions before developing a final version.

Support

Lesson Forum

Report a Bug

Teaching Guide

Warm Up (10-15 min)

Getting Inspiration

Discuss: What have we settled on for our apps so far, what do we still need to decide

Transition: Go to Code Studio to explore the different app types. For each, discuss with the group how it might apply to their problem.

Brainstorm: Choose one of the app types to go with and come up with a 1 paragraph description of the app

Activity (70 - 90 min)

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.

Prototyping Design

Define: Define the term prototype. To set expectations it's important to continually reiterate to students that they are developing prototypes throughout the entirety of this unit, each one adding more functionality on top of the previous.

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.

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.

Discussion Goal

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

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, 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: What's for Lunch - 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?

Distribute: Prototype Brainstorming - Activity Guide

Preparing for Paper Prototypes

Prototype Brainstorming

Suggested Screens: The first page 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 introduce the App Lab elements at this point so that students will have an understanding of what tools they'll have available. Students can certainly 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.

UI Elements: The second page 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.

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 Phone Paper 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

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.

View on Code Studio

Overview

Paper prototypes allow developers to quickly test ideas before investing a lot of time writing code. In this lesson teams explore some example apps created in App Lab, using those apps to help inform the first paper prototypes of their apps.

Vocabulary

  • Prototype - A first or early model of a product that allows you to test assumptions before developing a final version.

Resources

View on Code Studio

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 a create a static image of a map to use in their app.

View on Code Studio

Example App Types

In the following levels you see several different example apps. These apps don't have very interesting content, but 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
  • Discuss with your groups how that app could be applied to your chosen topic
  • Make a note of any features or UI elements that you want to incorporate into your own app

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.

View on Code Studio

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
View on Code Studio

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
View on Code Studio

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
View on Code Studio

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.