Unit4
Ch. 1
1
2
3
4
5
6
7
Ch. 2
8
9
10
11
12
13
14
15
16

Lesson 4: User Interfaces

Overview

Following the mini design project, students look towards the next 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. Paper prototypes will return in both the next few lessons and the chapter two project as well. This prototype will also serve as the context around which students will start to parse and organize feedback from a wide variety of users. While this lesson asks students to work with an existing prototype, they will soon be developing prototypes of their own design.

Agenda

Warm Up (10 min)

Activity (40 min)

Wrap Up (5 min)

View on Code Studio

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 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

Lesson Forum

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 (40 min)

Reading and Using a Paper Prototype

Group: Place students into pairs.

Teaching Tip

Reducing Printed Materials

These manipulatives can be reused if students do not write on them. You will need them for the next lesson's activity, too.

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.

Discussion Goal

Goal: The next lesson will delve more deeply into analyzing feedback on this app and proposing improvements, so don't invest too much time in the details of specific improvements here. The goal of this discussion is to get students' gears turning in preparation for the following lesson.

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 (5 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 was address. Now that you experienced the app first hand, as either a User or Computer, return to that question. In your journal, jot down the following:

  • What user needs did this app addresses well (I Like)
  • What user needs could this app could do a better job of addressing (I Wish)
  • What are a few user needs that aren't addressed at all, but that you thing 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 where they can be referred to in the next lesson.

View on Code Studio

Overview

In this lesson you'll learn what an app is and how they are designed to help meet a user's needs. You'll also learn how prototypes are used to create a rough draft of a piece of software.

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 an program through which a user controls or communicates with the application. Often abbreviated UI.

Resources

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 2-AP-10 - Use flowcharts and/or pseudocode to address complex problems as algorithms.
  • 2-AP-17 - Systematically test and refine programs using a range of test cases.
CS - Computing Systems
  • 2-CS-01 - Recommend improvements to the design of computing devices, based on an analysis of how users interact with the devices.