wire framing 101 essential question: can we possibly build an app? l8.pdf · 2016-09-19 · it:...
TRANSCRIPT
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.
IT: Wire Framing 101 Pathways to Prosperity Network
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.
IT: Wire Framing 101 Pathways to Prosperity Network
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
IT: Wire Framing 101 Pathways to Prosperity Network
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.
IT: Wire Framing 101 Pathways to Prosperity Network
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.
IT: Wire Framing 101 Pathways to Prosperity Network
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.
IT: Wire Framing 101 Pathways to Prosperity Network
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.
IT: Wire Framing 101 Pathways to Prosperity Network
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
IT: Wire Framing 101 Pathways to Prosperity Network
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.
IT: Wire Framing 101 Pathways to Prosperity Network
10
Level of
Difficulty
I want my app to: As a developer, this also
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.
IT: Wire Framing 101 Pathways to Prosperity Network
11
Level of
Difficulty
I want my app to: As a developer, this also
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.
ListPicker is also used to
program using a list of
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.
IT: Wire Framing 101 Pathways to Prosperity Network
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?
IT: Wire Framing 101 Pathways to Prosperity Network
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.
IT: Wire Framing 101 Pathways to Prosperity Network
14
Facilitator Documents:
App Inventor Feature Glossary- With Notes
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.
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.
IT: Wire Framing 101 Pathways to Prosperity Network
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.
ListPicker is also used to
program using a list of
options.
Tutorials exist. Unsure level
of difficulty, but looks okay.
http://appinventor.pevest.co
m/?p=107
IT: Wire Framing 101 Pathways to Prosperity Network
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.
ListPicker is also used to
program using a list of
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.
IT: Wire Framing 101 Pathways to Prosperity Network
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.
IT: Wire Framing 101 Pathways to Prosperity Network
18
Zombies, Run! Screenshot 1
IT: Wire Framing 101 Pathways to Prosperity Network
19
Zombies, Run! Screenshot 2
IT: Wire Framing 101 Pathways to Prosperity Network
20
Sample Storyboarding 101: Modeling Screenshots
IT: Wire Framing 101 Pathways to Prosperity Network
21
IT: Wire Framing 101 Pathways to Prosperity Network
22
IT: Wire Framing 101 Pathways to Prosperity Network
23
IT: Wire Framing 101 Pathways to Prosperity Network
24
IT: Wire Framing 101 Pathways to Prosperity Network
25
IT: Wire Framing 101 Pathways to Prosperity Network
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?
IT: Wire Framing 101 Pathways to Prosperity Network
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?