Students will be able to...
- Define key user-scenarios for a project and the features required to implement each scenario.
- Explain the importance of wire framing when designing an application.
- Capture key scenarios using sketches - (hand drawn, or with drawing tool).
- Refine design based on user centered research.
From Lessons 6.3 to 6.5 you will be doing this type of iterative and incremental work. Lesson 6.3 does not involve any "coding" yet. You will start with sketching things down with pencil-and-paper, or with a drawing tool. Use the handouts to help you. You may revise some sketches later on, after you have started implementation (ie, "coding") and testing.
- Unit 6 tips
- Final project specifications (docx)(pdf)
- Final project plan organizer
- Final project development plan
- Examples of TEALS final projects
| Duration | Description |
|---|---|
| 5 minutes | Welcome, attendance, bell work, announcements |
| 10 minutes | Review pitches |
| 20 minutes | Scenario definition |
| 15 minutes | Wire framing |
| 5 minutes | Debrief and wrap-up |
Have students look at their revised pitches from yesterday. Tell them that they will be choosing *one- to pursue as their final project.
- If desired, give students a few minutes to rework their pitches or get more feedback from a classmate or instructor.
Ask students to choose which idea they want to pursue, and write it down on the top of their Final Project Plan Organizer.
Defining the term "scenario" for students:
- scenario: a description of a set of interactions and/or tasks that describe a start-to-finish example of how a user might want to use the application.
Explain that defining scenarios helps a programmer focus on what features are actually necessary to enable the key user interactions for their application.
Instruct students to write down at least 3 scenarios for their project describing, from start to finish, interactions a user might have with their script to accomplish a specific goal.
- The scenarios should have a moderate level of detail in the description of the user interaction (e.g. "push a button," "type in their name," etc.) but should not include any design or implementation details.
- Once students have written their scenarios, they should review them and develop a list of the necessary features to enable each scenario.
- Again, there should be minimal technical detail in these descriptions, instead focusing on details of the user experience. The feature lists should be more about requirements than implementation.
Define the term wire frame for students: a high-level sketch of an application's user interface intended to help visualize layout, interactions, and transitions_.
Explain that wire frames do not include any details (such as specific graphics or text), but instead provide a broad impression of what an application will look like to aid in design and planning.
Students will complete page 1 of the organizer by sketching or wire framing the important screens for their project.
- If you have one available, a wire framing tool such as Balsamiq can be used instead of sketching by hand.
- As with all wire framing, students should not focus on the specific details of the sprites, images, etc. that will appear, but instead design the basic layout and main components of each screen.
- Encourage students to reference their feature lists to ensure they include all necessary screens for their project, including simple things like a splash screen, help screen, or exit ("game over") screen.
As class ends, ensure students retain their work as they will use it to construct a detailed specification and implementation plan tomorrow.