WIREFRAMING 101 Essential Question: Can We Possibly Build an App? Learning Targets: Students will: Use wireframing to create a design for an app for mobile devices. Collaborate to make decisions about user flow. Lesson Overview This lesson introduces the storyboarding of an app, also known as wireframing. The lesson begins by looking at comic strips as an introduction to storyboarding. Next, YPs will practice wireframing using an existing app. The exploration of ideas, content, and flow of the app itself is then completed through an exercise called paper prototyping. 1
Lesson Agenda Opening o How Does This Story Go? (5 min) Work Time o Storyboarding & Designing Wireframes (45 min) Closure o Sum It Up (5 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 Mobile device/tablet and cable to connect it to the projector for Wireframing 101: Modeling activity FACILITATION NOTES 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. Wireframing 101 Modeling: To model the wireframing process, you will select a well-known app to project and wireframe 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 2
knowledge as they develop new skills in wireframing. 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 wireframing 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. Presentation Slidedeck: The final project will follow an Ignite format, which is designed to tell a story through photographs and words. Ignite presentations are designed to be 5 minutes long, with 20 slides that automatically advance every 15 seconds (for an example, see: http://www.ignitetalks.io/videos/vaccinate). In the remaining lessons, the exit tickets will be content that students can add to their slidedecks, with optional usage in the final class period. IN ADVANCE Preview the storyboarding video: https://www.youtube.com/watch?v=ux_em1lvsji. Select/download the app you plan to use for the Wireframing 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 wireframing activity. Vocabulary Content wireframing, storyboarding, prototype, features, troubleshoot Tier II creative, artist, linear, outcomes 3
Opening (5 min) How does this story go? Today we re going to think about how storytelling relates to coding. When you write stories, read, or watch television, you probably understand that strong stories contain a beginning, middle, and end. They can be long, or quite short. Comic strips are one type of storytelling that can illustrate short stories quickly. 1. Project the <Comic Strip Activity>. 2. Explain that this comic strip is out of order. Ask What do you think is happening in this story? 3. Invite YPs to discuss their responses with nearby classmates. 4. Ask YPs to write down or re-draw the comic in the correct order. 5. Project the re-organized strip <Comic Strip Activity 2>. Have students compare their ideas with the screen. 6. Reflect on the activity. Ask Were you able to put the strip back in the correct order? What visual cues helped you make that decision? If you were to add another square, what would happen? Solicit responses from the group. Work Time (50 min) Storyboarding & Designing Wireframes (30 min) Being able to understand the order of events is critical to app design. 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 wireframing. 4
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. (You can stop at 2:40.) 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 notecatcher. 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. We have already experimented with wireframing in a previous lesson, 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 wireframing 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. Wireframing 101: Modeling Before wireframing 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 wireframe 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. Using 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. 5
4. Ask: What is the user s experience on this page? Is this reflected in your wireframe drawing? 5. If a Pokémon appears, click on it. On the whiteboard, model wireframing 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. Wireframing Your App Now that we ve practiced the skill, you will begin to wireframe pages for your own apps, starting with storyboards. Your storyboard 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. Throughout the wireframing process, encourage teams to maintain an exploratory mindset, generating as many ideas as possible and keeping an open mind while respecting all ideas. 1. Distribute 5 x 7 index cards to each design team. 2. Invite students to begin working on the wireframe 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 o o o Taskmaster: Ensures the team remains on task at all times and focuses on the user experience. Organizer: Helps the team organize their thoughts into a logical storyboard that makes sense to the user. Artist: Takes notes throughout the brainstorm process and draws a draft of the storyboard with input from the team. 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. 6
Closure (5-10 min) Sum it up (5-10 min) 1. Distribute the <Presentation Slidedeck>. Ask YPs to locate the page on Wireframes. 2. In teams, ask groups to identify three characteristics about their apps that will require coding. Have each YP include this in their note-catcher. 7
Name: Date: WIREFRAMING 101: Can We Possibly Build an App? Today s Learning Objectives: I can: Use wireframing to create a design for a mobile app Collaborate to make decisions about user flow This lesson introduces the storyboarding of an app, also known as wireframing. The lesson begins by looking at comic strips as an introduction to storyboarding. Next, YPs will practice wireframing using an existing app. The exploration of ideas, content, and flow of the app itself is then completed through an exercise called paper prototyping. Today s Activities: How Does This Story Go? Storyboarding & Designing Wireframes Sum It Up 8
App Inventor Feature Glossary 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. 9
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. 10
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. 11
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? 12
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. 13
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/expl ore/sites/all/files/hourofcode/t alktomepart2.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. 14
** 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.com/?p=107 15
** 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. 16
*** 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. 17
Zombies, Run! Screenshot 1 18
Zombies, Run! Screenshot 2 19
Sample Storyboarding 101: Modeling Screenshots 20
21
22
23
24
25
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? 26
Presentation Template 27
FACILITATOR DOCUMENTS: Comic Strip to project (Out of Order) Comic Strip to project (Correct Order) 28
29