AYP
1
2
3
4
5
6
7
8
9

Lesson 6: App Development Unplugged - User Interfaces

Overview

Students look at an important phase of design - prototyping a product that attempts to address user needs. In teams, students examine a paper prototype for a chat app called "Txt Ur Grndkdz". Through using this paper prototype, students get a chance to see how a simple paper prototype can be used to quickly test ideas and assumptions before we ever get to the computer. After "using" the provided prototype students begin to identify ways to improve the next iteration.

Purpose

This lesson introduces students to the concept of a paper prototype as a quick and dirty tool to kick off the development of an app. This prototype will also serve as the context around which students will start to parse and organize feedback from a wide variety of users.

Agenda

Warm Up (10 min)

Activity (30 min)

Wrap Up (10 min)

Objectives

Students will be able to:

  • Use a paper prototype to test out an app before programming it
  • Identify the user needs a prototype was designed to address

Preparation

Links

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

For the Teacher

For the Students

Vocabulary

  • Prototype - A first or early model of a product that allows you to test assumptions before developing a final version.
  • User Interface - The visual elements of a program through which a user controls or communicates with the application. Often abbreviated UI.

Support

Report a Bug

Teaching Guide

Warm Up (10 min)

What is an App?

Prompt: What is an app? What apps do you or other people you know use?

Discussion Goal

Goal: This discussion aims to introduce the definition of an app. Most suggestions students provide should be able to be tied to this definition. Apps can provide services, organize or provide information, or might just be a game or other form of entertainment. In all cases, you just want to establish an app as a piece of software built for a purpose.

Discuss: Keep a running list of responses on the board. Once everyone has had an opportunity to share write down a proposed shared definition of an app as "a piece of software designed for a purpose".

Remarks

When you think of an app, you probably imagine the finished product. In the last lesson you got a chance to experience the earliest phase of development, when we were brainstorming ideas and coming up with potential users and needs. The path between that brainstorming and a finished app, however, is quite long.

Discussion Goal

Goal: The purpose of this discussion is to get students to consider the development lifecycle of a software product. You can use the list from the previous prompt to point out how their expectations of apps were likely all focused on the finished product, and not the process of development.

Discuss: What do you think goes into the development of an app?

Activity (30 min)

Reading and Using a Paper Prototype

Group: Place students into pairs.

Distribute: Hand out a copy of User Interface Screens - Activity Guide to each pair of students. If you haven't already cut the screens apart, give students a few minutes to do so.

Define: The set screens I just handed you is called a paper prototype. This is one of the earliest forms of a prototype, and it allows a developer to test out their idea before investing a lot of time programming. Paper prototypes are a quick and dirty way to share the user interface of your app with potential users.

Discussion Goal

Goal: Encourage students to identify specific elements of the prototype that support their arguments, and to consider the user needs that this prototype might have been designed to address

Discuss: Based solely on the screens, what do you think this app was designed to do?

Transition: For each pair of students, either assign each student a role of Computer and User, or allow the students to decide. Once the roles have been assigned, have pairs move so that they are sitting across from each other.

Teaching Tip

Reducing Printed Materials

Computer Activity Guide The computer's Activity Guides are used for reference only. Students can look at digital versions during this activity. Assign each student a link, rather than handing out a paper version. If you choose to print out the guide, they can be reused, as long as the students are told not to write on them.

User Activity Guide: The user's Activity Guide can be completed online or as a journal activity. Students can use a digital version of the Activity Guide as a prompt, copying the charts and questions into their journals.

Distribute: Give each of the Computers a copy of User Testing (Computer) - Activity Guide and each of the Users a copy of User Testing (User) - Activity Guide

User Testing

This activity has pairs of students testing the paper prototype, with one acting as the User and one as the Computer. The basic process is as follows:

  1. The Computer places the home screen (the one titled "Txt Ur Grndkds") in front of the User.
  2. The User selects a task from from the table on their activity guide.
  3. The User attempts to complete the tasking by "clicking" on the paper prototype screen in front of them.
  4. Every time the User clicks on the screen, the Computer consults the Navigation Diagram on their activity guide.
    • If the Navigation Diagram shows a line connected to the element that was clicked, find the screen at the other end of the line and place it in front of the user.
    • If the Navigation Diagram doesn't show a line connected to the element that was clicked, do nothing.
  5. When the User completes a task (or decides it is impossible in the current prototype), they fill out the "What I Tried" and "My Reaction" columns

There are several additional rows in the tasks table for Users to come up with their own tasks to attempt. The first task is filled out as an example, and you may choose to model it for the class.

Prototype Debrief

Share: Have the Users share back their experience to the whole class.

Discuss: Discuss some of the common problems that Users ran into in this activity, and attempt to identify potential improvements to the prototype.

Wrap Up (10 min)

Critique the Prototype

Teaching Tip

Reinforce Vocabulary: Use this concluding conversation to reinforce the vocabulary terms introduced in this lesson, in particular "user interface" and "prototype"

Journal: Earlier in the lesson we hypothesized about the user needs that this prototype addresses. Now that you experienced the app first hand, as either a User or Computer, return to that question. In a journal or on a piece of paper, jot down the following:

  • What user needs did this app addresses well (I Like)
  • What user needs could this app do a better job of addressing (I Wish)
  • What are a few user needs that aren't addressed at all, but that you think would make a good addition (What If)

Share: If there's time, have students share out their needs. Consider writing this up on the board or on poster paper.

Career Discussion

Introduce yourself and your career:

  • Where do you work, what do you do, and what do you love most about your job?
  • What or who inspired you?
  • How did you get interested in computer science?
  • Did you have a mentor?
  • Share a story about how tech affects everyone

Show this inspirational video: Careers in Tech: My Name is Brina

Ask the students questions and leave time for Q&A.

  • What jobs are they interested in, what are their favorite tech gadgets or apps, and how do they think they are built?
  • Do the students have any questions for you?