WIRE FRAMING 101 Essential Question: Can We Possibly Build an App? L8.pdf · 2016-09-19 · IT:...

IT: Wire Framing 101 Pathways to Prosperity Network

1

WIRE FRAMING 101

Essential Question: Can We Possibly Build an App?

Learning Targets:

Students will:

Evaluate possible design solutions systematically and based on criteria and constraints.

Analyze data to determine the optimal design.

Apply the principles of writing code.

Use storyboarding to create a design for an app for mobile devices.

Collaborate to make decisions about user flow.

Lesson Overview

The actual design process for the app begins with this lesson, and the work continues through

the remaining lessons. The work time is dedicated fully to the design of the app through wire

framing. This storyboarding of ideas, the content, and flow of the app pages is a pencil and

paper task.


2

Lesson Agenda Opening

Coding Features (15 min)

Work Time Storyboarding the App Design (45 min)

Closure Hot Seat Protocol (10 min)

Materials

Young Professional student packet

Projector and speakers

Storyboarding videos to project

5” x 7” index cards (as many as each group needs)

Status of the Class Progress Form

Hot Seat questions

Mobile device/tablet and cable to connect it to the projector for Storyboarding 101:

Modeling activity

FACILITATION NOTES

Computer Stations. For the opener, teams will brainstorm which MIT App Inventor Tutorial(s)

would be helpful in teaching them how to code certain features of their apps. If possible, have

computer stations available for each team member to facilitate the gathering of many ideas. The

teams will then work together to narrow down these ideas and select 1-2 tutorials that will allow

the team to code the most important feature of their app.

App Inventor Feature Glossary. This glossary will help to translate basic app features to the

programming vocabulary that appears on the App Inventor Tutorial site. The YPs can use this to

narrow down the correct tutorial that will help them program their app feature. Note: Tutorials

appear in writing on the App Inventor site. To find the video tutorials, have the YPs search for

the tutorial on YouTube. For more information on coding features, see:

http://appinventor.mit.edu/explore/resources/beginner-app-inventor-concept-cards.html.

Media. The engaging clip of “Storyboarding for People Who Can’t Draw: Like Me!” shows

exemplars of amazing storyboards, highlights their use in the movie industry, and emphasizes

that one does not have to be an artist to create the board. Use the first 2:45 minutes:

https://www.youtube.com/watch?v=ux_Em1lVsjI. Pause throughout as exemplars are displayed,

and ask students to predict what story is being told.

http://appinventor.mit.edu/explore/resources/beginner-app-inventor-concept-cards.html

https://www.youtube.com/watch?v=ux_Em1lVsjI


3

Wire Framing 101: Modeling. To model the wire framing process, you will select a well-known

app to project and wire frame the user’s experience as they navigate various features. The app

chosen for this lesson is Pokémon, Go! Be sure to download the app in advance on your device

and create an account so it opens directly to the home page. If deciding to use a different app,

be sure to select a familiar app that students use often so they can reference background

knowledge as they develop new skills in wire framing. Ensure the app is appropriate for your

students and maintains privacy and school policies (i.e. no social media).

Status of the Class. A Status of the Class chart is used at the end of the work time to gain a

sense of the progress of each group in the wire framing process. This protocol is adapted from

the writer’s workshop process and functions to help teachers keep track of student progress on

a project. It also helps students be aware of where they are and where they are going. It also

provides accountability if used before and after a class session.

Extensions. At this point in the unit, consider providing additional coding practice for students, if

time is available in the class schedule.

IN ADVANCE

Provide feedback on each team’s app description from the previous class and return at

the beginning of class. Highlight what features of the app you anticipate needing code to

help facilitate the opening activity’s brainstorm.

Have computer stations set up and bookmarked with the MIT App Inventor page.

Preview the storyboarding video: https://www.youtube.com/watch?v=ux_Em1lVsjI.

Select/download the app you plan to use for the Storyboarding 101: Modeling activity.

Set up the Status of the Class Progress Form on large chart paper with headers for

students to fill in following the storyboarding activity.

Tape the Hot Seat questions to the underside of the seat of random student chairs in the

classroom.

Vocabulary

Content Tier II

storyboarding, prototype, features,

troubleshoot, wire framing

creative, artist, linear, outcomes


4

Opening (15 min)

Coding Features

In the previous lesson, you chose a need-idea for a mobile app that you are going to prototype.

In today’s class, we will dig deeper into the design of your apps using a common creative

process known as storyboarding. Before we dive into this process, let’s circle back to the MIT

App Inventor tutorials you completed in earlier lessons. What apps did you learn to develop?

What features, or characteristics of the app, required code?

1. Invite students to get into their Design Teams.

2. Have them list the apps they developed on MIT App Inventor and what features of

the apps required code.

3. Use equity sticks to solicit responses from the teams.

Now, let’s think about your app descriptions from the last class. What features of your app

will require code? What tutorials will your team need to complete in order to learn this type of

code?

4. Hand back the teams’ app descriptions from the previous lesson with your written

feedback.

5. Tell the teams to brainstorm and list which features of their apps will require code

based on the feedback you provided on the app descriptions.

6. Explain that each team member will then use this list to browse tutorials on the MIT

App Inventor site that will help the team learn how to code the features of their app.

Ask: Which feature of your app is the most important? Which tutorial will help your

team learn how to code this feature?

7. After providing think time, invite YPs to turn and talk within their teams to share

which feature they found to be most important and which tutorial they selected that

would help them code the feature. The team should work together to select 1 feature

and 1-2 tutorials that will allow them to learn the coding process for that feature.

Explain that teams will use this tutorial to create 1 page of code for one of their app’s

features. Teams should use the <App Inventor Feature Glossary> to help support their

search for the right tutorial, and they should assume their roles from the previous lesson:

o Taskmaster: Ensures the team remains on task at all times and focuses on the

need-idea chosen to prototype.

o Organizer: Helps the team organize their thoughts into a logical story that makes

sense for the app description.

Encourage

students to

assume their

assigned roles

when working

collaboratively in

their teams.

What strengths

does each

member bring to

the table?

Organizers

should make

sure the team’s

ideas create a

logical story for

the app,

taskmasters will

ensure the

group remains

focused on

selecting 1

feature to code,

etc.


5

o Scribe: Takes notes throughout the brainstorm process and scribes the draft

paragraph of the app description with input from the team.

o Communicator: Ensures the draft description is ready for presentation and

communicates the app description to the class.

8. Have each team share out their ideas and tutorials with the class.

Work Time

Storyboarding the App Design (45 min)

Before struggling through the actual coding of the features, many programmers “storyboard”

the pages of the app on paper. In a storyboard, a programmer draws a rough sketch of the app

on paper to show the design and function of each feature; by working out our ideas on paper

first, we are ensuring that we’ll know exactly what we want to create when it’s time to start

coding. Storyboarding is used in many fields to help visualize the final product, particularly in

movie-making, theater, and even comic books. Let’s look at how storyboarding is used in the

movie industry. Our process will mimic some of the outcomes of storyboarding, and in the

programming world is known as wire framing.

1. Distribute the <Storyboarding Note-catcher> to students.

2. Tell students to catch notes to the questions as they view the video clips.

3. Project the <Storyboarding for People Who Can’t Draw: Like Me!> video:

https://www.youtube.com/watch?v=ux_Em1lVsjI.

4. Pause the video when exemplars are shown to highlight impressive storyboarding. Ask:

What do you think is happening in this scene?

5. Invite students to turn to a partner and share the answers to the questions on the note-

catcher.

6. Use equity sticks to call on students to provide answers to the questions. Listen for:

Storyboards give you a clear plan. They give you the ability to be more flexible when

you’re actually making the final product. You don’t have to be a good artist, because you

know what you have drawn. You want to do a storyboard for an app because you need

to have a clear plan for the screens and how they interact.

A storyboard for programming an app is known as wire framing, which differs slightly from

storyboarding. In movies, for example, the final product is linear—the story occurs from one

scene to the next. In an app, the final product is more like a “choose your own adventure”—the

users choose how they will move through an app’s pages. Today we are going to use wire

Sticks of fate,

or equity

sticks, is a

strategy for

cold calling on

students in a

way that feels

authentically

random

(compared to

teacher

selection).

The instructor

has a jar full

of popsicle

sticks, with

each stick

bearing the

name or seat

number of a

student in the

class. When

using sticks of

fate, the

instructor

simply pulls a

stick from the

jar and calls

on the student

listed on the

stick.


6

framing to mimic this kind of use. The sketches will represent what users would see on each

screen. They will show the content of the app and the flow.

Wire Framing 101: Modeling

Before wire framing our own apps, let’s think back to the screenshots we observed for the

“Zombies, Run!” app (project). What choices did the user have at each page? (Listen for: One

page allowed the user to select the story mission they wanted to complete. The other page

allowed the runner to see the path they completed on a map with the pace of each kilometer.)

Now, let’s look at another popular app that has helped people get off the couch and exercise:

Pokémon, Go! Using this app, we will navigate and wire frame some of its features.

1. Distribute several 5” x 7” index cards to each student.

2. Project the home screen of the app, Pokémon, Go! Model drawing a design of the home

page on the whiteboard.

3. Have students draw their own interpretations of the home page on their index cards.

4. Ask: What is the user’s experience on this page? Is this reflected in your wire frame

drawing?

5. If a Pokémon appears, click on it. On the whiteboard, model wire framing what appears

on the screen, and have the YPs draw their own interpretations on their index cards.

6. From the main menu, select 2-3 additional pages, and repeat the process.

7. Check for understanding: Do the images you drew describe the user’s experience?

How? Answers will vary depending on the pages selected for the activity. In the YPs’

responses, be sure connections are made between their drawings and the user’s

experiences.

Wire Frame Your App

Now that we’ve practiced the skill, you will wire frame pages for your own apps. Your wire

frame will outline the user experience, before you begin the actual digital coding process.

Like in movies, you want to troubleshoot, or solve problems, before you invest time and

money into the coding of your app. Today, your design team will draft the first three working

pages of your app.

1. Distribute 5” x 7” index cards to each design team.

2. Invite students to begin working on the wire frame of their app in their Design

Teams. As each team member contributes their ideas, remind them to also serve

one of the following roles (project roles with descriptions):

o Taskmaster: Ensures the team remains on task at all times and focuses on

Throughout the

wire framing

process,

encourage

teams to

maintain an

exploratory

mindset,

generating as

many ideas as

possible and

keeping an open

mind while

respecting all

ideas.


7

the user experience.

o Organizer: Helps the team organize their thoughts into a logical storyboard that

makes sense to the user.

o Artist: Takes notes throughout the brainstorm process and draws a draft of the

storyboard with input from the team.

o Communicator: Ensures the draft storyboard is ready for presentation and

shares the storyboard with the class.

3. Circulate and provide assistance to teams as needed.

4. When Teams finish, invite the Communicators to share out their Team’s wire frame

5. After presentations, ask teams to report on their status of completing their final app

design by recording their progress on the <Status of the Class Progress Form>.

Closure (10 min)

Hot Seat Protocol

1. Invite students to check the undersides of their seats for a question.

2. One at a time, students who have a question are asked to answer the question.

3. Those students without a question attached to their seats agree or disagree with the

answer provided by the student with the question.

4. Use equity sticks to call on students to provide the reasoning behind their agreement or

disagreement.

School to Home Connection

MIT App Inventor Tutorial

Complete the MIT App Inventor tutorial selected by your team in the opening activity at home. If

you do not have computer or internet access at home, visit the closest public library in your

home town/city for free computer and internet use.


8

Name:

Date:

WIRE FRAMING 101: Can We Possibly Build an App?

Today’s Learning Objectives:

I can:

Evaluate possible design solutions systematically and based on criteria and constraints.

Analyze data to determine the optimal design.

Develop a model or prototype for iterative testing and refinement.

Apply the principles of writing code.

Build an app for mobile devices.

The actual design process for the app begins with this lesson, and the work continues through

the remaining lessons. The work time is dedicated fully to the design of the app through wire

framing. This storyboarding of ideas, the content, and flow of the app pages is a pencil and

paper task.

Today’s Activities:

Coding Features

Storyboarding the App Design

Hot Seat Protocol


9

App Inventor Feature Glossary

Level of

Difficulty

I want my app to: As a developer, this also

might be known as:

Notes

*** Have an animation

Have characters or

items that I can

move on-screen

Characters and items

(really, any

object/item/person that can

be programmed) are called

sprites. You’ll need to

understand how to program

a sprite to begin.

* Do something when

I shake or move my

phone

A phone’s accelerometer

can measure movement,

speed, and more

(depending on model). You

can also use this

information to program

sensors! You can also

program sprites to move

when you tilt your phone.

** Send a message to

a friend

Using short message

services, or SMS, allows

you to send text messages

from your app to other

devices.

*** Know where I’m at To make app that uses your

location, you’ll need to use

the LocationSensor.

** Take pictures In-app photos require use of

a phone’s camera.


10

Level of

Difficulty


might be known as:

Notes

** Have a timer To create an app that

measures time (like a speed

race) or has a countdown

clock, you’ll need to use the

Clock component and

Timers.

* Play music or have

sound effects

You’ll want to be adding

sound.

* Move a sprite

when a button is

pushed

Look at Movement with

Buttons.

* Let me draw

pictures with my

finger

Like in real life, artists (and

programmers) can draw

using the Canvas tool.

* Say words or

phrases randomly

You’ll want to program a

list.

* Have a menu of

options, or a list of

words or pictures to

choose from

Programming buttons can

help users select from a

“menu” of options.

ListPicker is also used to

program using a list of

options.

** Type a word or

phrase and have

the phone read it

aloud

When a phone can read

what you’re typing, that’s

often referred to as text to

speech.


11

Level of

Difficulty


might be known as:

Notes

* Have a list of

places to help

people find a place

to go

Programming buttons can

help users select from a

“menu” of options.



options.

* If your app has

more than one

page of content, or

makes a user move

to other pages

If your app has more than

one screen, you’ll need to

look at how to program

multiple screens.

** Click on a phone

number to call

To use the PhoneCall

command, try looking at the

PicCall tutorial.

*** Search for certain

words or phrases in

the app

The ListPicker button can

be used to create a search

feature within your app.

*** Sends items to a

personal calendar

If you have a Google

Calendar, you can look at

tutorials that discuss using

Google Calendar’s

Application Program

Interface (API).

*** Sort places based

on proximity to you

or to a certain zip

code

Researching how to use the

location sensor and

activity starter can help

you use global positioning

systems (GPS) in your app.


12

Storyboarding Note-catcher

Directions. Answer the following questions as you watch the two videos about the

storyboarding process.

1. How are storyboards used?

2. Why don’t you have to be good at drawing to create storyboards?

3. Why would we use storyboarding to map out an app?


13

Design Team Roles

Taskmaster: Ensures the team remains on task

at all times and focuses on the need-idea chosen

to prototype.

Organizer: Helps the team organize their

thoughts into a logical story that makes sense for

the app description.

Scribe: Takes notes throughout the brainstorm

process and scribes the draft paragraph of the

app description with input from the team.

Communicator: Ensures the draft description is

ready for presentation and communicates the app

description to the class.


14

Facilitator Documents:

App Inventor Feature Glossary- With Notes

Level of

Difficulty


might be known as:

Notes

*** Have an animation

Have characters or

items that I can

move on-screen

Characters and items

(really, any

object/item/person that

can be programmed) are

called sprites. You’ll need

to understand how to

program a sprite to begin.

Really complicated tutorial

(ball bounce), but it does

exist (with video).

Simple movement can be

found on concept cards.

* Do something

when I shake or

move my phone

A phone’s accelerometer

can measure movement,

speed, and more

(depending on model).

You can also use this

information to program

sensors! You can also

program sprites to move

when you tilt your phone.

Easier to program, and a

tutorial exists:

http://appinventor.mit.edu/e

xplore/sites/all/files/hourofc

ode/TalkToMePart2.pdf

Testing would be

problematic due to software

constraints.

Also concept card item.

** Send a message

to a friend

Using short message

services, or SMS, allows

you to send text

messages from your app

to other devices.

Tutorial exists, but looks

challenging.

*** Know where I’m at To make app that uses

your location, you’ll need

to use the

LocationSensor.

Advanced.

http://appinventor.mit.edu/explore/sites/all/files/hourofcode/TalkToMePart2.pdf




15

** Take pictures In-app photos require use

of a phone’s camera.

Needs phone to test.

** Have a timer To create an app that

measures time (like a

speed race) or has a

countdown clock, you’ll

need to use the Clock

component and Timers.

Surprisingly difficult, but

the tutorial is listed under

“basic” (Mole Mash).

Start/stop timer is a concept

card item.

* Play music or have

sound effects

You’ll want to be adding

sound.

Concept card item.

* Move a sprite

when a button is

pushed

Look at Movement with

Buttons.

Concept card item.

* Let me draw

pictures with my

finger

Like in real life, artists

(and programmers) can

draw using the Canvas

tool.

There’s a ‘digital doodle’

tutorial that is short, but

complicated looking. Video

component as well.

Concept card item.

* Say words or

phrases randomly

You’ll want to program a

list.

The magic 8 ball tutorial

eventually shows how to

make a list (#3).

* Have a menu of

options, or a list of

words or pictures

to choose from

Programming buttons

can help users select from

a “menu” of options.



options.

Tutorials exist. Unsure level

of difficulty, but looks okay.

http://appinventor.pevest.co

m/?p=107

http://appinventor.pevest.com/?p=107

http://appinventor.pevest.com/?p=107


16

** Type a word or

phrase and have

the phone read it

aloud

When a phone can read

what you’re typing, that’s

often referred to as text to

speech.

There’s a tutorial for this

(the first one), however,

testing it would be

problematic due to software

constraints.

Speech recognition is a

concept card item.

* Have a list of

places to help

people find a place

to go

Programming buttons

can help users select from

a “menu” of options.



options.

Buttons are in various

beginning tutorials.

* If your app has

more than one

page of content, or

makes a user

move to other

pages

If your app has more than

one screen, you’ll need to

look at how to program

multiple screens.

Concept card item.

** Click on a phone

number to call

To use the PhoneCall

command, try looking at

the PicCall tutorial.

Tutorial exists, but testing it

will be a problem.

*** Search for certain

words or phrases

in the app

The ListPicker button can

be used to create a

search feature within your

app.

Tutorial exists, but

complicated.


17

*** Sends items to a

personal calendar

If you have a Google

Calendar, you can look at

tutorials that discuss using

Google Calendar’s

Application Program

Interface (API).

Advanced.

*** Sort places based

on proximity to you

or to a certain zip

code

Researching how to use

the location sensor and

activity starter can help

you use global positioning

systems (GPS) in your

app.

Advanced.


18

Zombies, Run! Screenshot 1


19

Zombies, Run! Screenshot 2


20

Sample Storyboarding 101: Modeling Screenshots


21


22


23


24


25


26

Status of the Class Progress Form

Team

Name

What has your team

accomplished today?

To complete your work, where

does your team need to focus?

Does your team need

a conference?


27

Hot Seat Questions

1. What is the most interesting part of creating an app for you?

2. What is the most challenging aspect of creating an app for you?

3. What features do you want to program but don’t yet understand how to do so?

WIRE FRAMING 101 Essential Question: Can We Possibly Build an App? L8.pdf · 2016-09-19 · IT:...

Documents

Transcript of WIRE FRAMING 101 Essential Question: Can We Possibly Build an App? L8.pdf · 2016-09-19 · IT:...