TheDesignProcess
Ch. 1
1
2
3
4
5
6
7
8
Ch. 2
9
10
11
12
13
14
15
16
17
18
19
20
21

Lesson 5: User Interfaces

Overview

Question of the Day: How can we test an app to make sure it meets a user's needs?

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

Warm Up (5 min)

Activity (35 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 Teachers

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

Provide Lesson Feedback

Teaching Guide

Warm Up (5 min)

Journal

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: Have students write down their responses in a journal, then ask students to share with the class. 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".

Vocab:

  • App: 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. In our next few lessons, we’ll see how we can use this same design process to develop an app for a specific user based on their needs and interests.

Question of the Day: How can we test an app to make sure it meets a user's needs?

Activity (35 min)

Paper Prototypes

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

Display the following definitions while addressing the class

  • 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 that a user controls and interacts with. Often abbreviated UI.

Remarks

The set of screens I just handed you is called a paper prototype. A prototype is an early model of a product that lets you test your assumptions before developing a final version. This is one of the first steps in designing an app, and it allows a developer to test out their idea before investing a lot of time programming.

Paper prototypes are a quick and easy way to share the user interface of your app with potential users. The user interface is the visual elements of a program that a user controls and interacts with the application. This is often abbreviated as UI.

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

Prompt: Based solely on the screens, who do you think is the main user of this app? What do you think this app was designed to do?

Discuss: Have students discuss with their partner, then share ideas with the class.

Remarks

For today’s activity, we’re going to use this paper prototype to test out our app. One person will be the user, who will try to use the paper prototype. Another person will be the computer, who is in charge of changing the screens and reacting to what the user does. Our goal is to collect feedback so we can make recommendations and improve it.

Taking Roles: For each pair of students, assign each student a role of Computer and User. 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. 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. The computer activity guide should only be seen by the computer and not the user.

User Testing

Display: Read through the opening paragraph on Test Cases with the class. Emphasize that users have a set list of tasks to complete, and both people should give reactions on ways to improve the experience. Some of these tasks may not even be possible, which means we can make suggestions for how to improve the app and complete the task.

Model: 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, and should be modeled for students before working independently in their pairs:

  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 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 and the computer resets the app back to the home screen.

Prototype Testing: Have students Test out each of the tasks in the table on the User Testing Activity Guide. After each test, students should "reset" the app by having the computer place the home screen in front of the user.

Circulate: Monitor students as they work in pairs to complete this task. Ensure computers are using the guided arrows to navigate the screens, and ensure users are completing each row of tasks in the table. Have students swap halfway through the task, trading who is the user and who is the computer.

Debriefing

Assessment Opportunity

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

Prompt: What was a problem that a User ran into while using the app? What is a potential improvement you would make to the prototype based on your experience?

Discuss: Have students discuss in their pairs, then invite each pair to share their feedback with the class. Keep a list of potential improvements in the front of the classroom.

Remarks

Creating and testing a prototype is an important part of the design process - look at all the feedback we received and the changes we need to make! When we start designing our own apps, one of our first steps will be to make a paper prototype so we can test and get feedback early to make sure we’re meeting our users needs.

Wrap Up (5 min)

Journal

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.

Prompt: Earlier in the lesson we guessed the user needs that this prototype addresses. Now that you experienced the app first hand, jot down the following:

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