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.

Assessment Opportunities

  1. Use a paper prototype to test the design of an app.

    Activity & Discussion: Circulate the room as students are using the paper prototype. Ensure that "computers" are following the diagram and not giving hints to the "users" and that "users" are trying to accomplish their given tasks and writing down relevant information in the chart. Use the discussion to check students' understanding of how the activity allows them to test the design of the app.

  2. Collect and analyze feedback from user testing with a paper prototype.

    Journal: Students should share feedback and improvements related to the users' experiences as shared in the class discussion or indicated in the chart filled out in the activity.

Agenda

Lesson Modifications

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 the design of an app.
  • Collect and analyze feedback from user testing with a paper prototype.

Preparation

  • Print one copy of the User Interface Screens activity guide for each pair of students
  • Print one copy of the User Experience (computer) activity guide for each pair of students
  • Print one copy of the User Experience (user) activity guide for each pair of students
  • Cut out the UI Screens or provide scissors for students to do so themselves

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

Report a Bug

Forum

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please read the full lesson plan below, then click here to access the modifications.

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 Experience (computer) activity guide and each of the Users a copy of User Experience (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.

Assessment Opportunity

Students should connect specific user experiences with the paper prototypes to problem with the app and how those problems could be addressed. If necessary, challenge students to recount specific incidents during the test that revealed problems with the design.

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 (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 addresses. 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:

Assessment Opportunity

Students should synthesize the earlier discussion to key, actionable points for a revision of the design. These should be clearly related to the earlier discussion, and check that students are connecting the user needs, user experience in the test, and the specific features of the app.

  • What user need does this app address well?
  • What user need could this app could do a better job of addressing?
  • What is a user need that isn't addressed at all, but that you think would make a good addition?

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.

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.