CS: App Design: User Interface Basics Worksheet

Question 1

Define user interface in your own words. Then name two examples of user interface elements in a mobile app.

Accepted Answer

A user interface is the part of an app that a person sees and uses to interact with it. Examples of user interface elements include buttons, menus, text fields, icons, sliders, and navigation bars.

Question 2

A homework planner app has a large button labeled Add Assignment on the home screen. Explain why this is a good user interface choice.

Accepted Answer

This is a good choice because adding an assignment is probably one of the most important actions in the app. A large, clearly labeled button helps users find the action quickly and understand what will happen when they tap it.

Question 3

Look at this screen description: A weather app home screen shows the city name, current temperature, weather icon, hourly forecast, and a Settings button. List the three pieces of information that should probably be easiest to see first.

Accepted Answer

The city name, current temperature, and weather icon should probably be easiest to see first. These items tell the user where the forecast is for and what the weather is like right now.

Question 4

A student designs a quiz app with a red Next button, a blue Submit button, and a green Back button. Explain one problem this could cause and suggest a better design choice.

Accepted Answer

Using many different colors for similar navigation actions could confuse users. A better design choice is to use consistent colors, such as one color for main action buttons and a different style for secondary buttons like Back.

Question 5

Write a clear button label for each action: saving a drawing, deleting a photo, and starting a game.

Accepted Answer

Clear button labels could be Save Drawing, Delete Photo, and Start Game. These labels are specific and tell the user exactly what each button does.

Question 6

A music app uses only a trash can icon for deleting a playlist. Explain why adding text might help some users.

Accepted Answer

Adding text such as Delete Playlist might help because not every user understands the same icons. Text makes the action clearer and can also help users avoid accidentally deleting something important.

Question 7

Describe a simple navigation menu for a school lunch app. Include at least four sections the app should have.

Accepted Answer

A simple navigation menu for a school lunch app could include Today, Weekly Menu, Nutrition, Favorites, and Settings. These sections help users find the main features without searching through many screens.

Question 8

A sign-up screen asks for name, email, password, favorite color, favorite movie, and home address before a user can play a simple puzzle game. Explain how the form could be improved.

Accepted Answer

The form could be improved by asking only for information that is truly needed, such as username or email and password. Removing extra questions makes sign-up faster and protects user privacy.

Question 9

Sketch or describe a wireframe for a simple calculator app. Include the display area and number buttons.

Accepted Answer

A good wireframe should include a display area at the top to show the numbers and answer. Below it, the number buttons should be arranged in a clear grid, with operation buttons such as plus, minus, multiply, and divide nearby.

Question 10

An app takes 5 seconds to upload a photo after the user taps Upload, but nothing changes on the screen. Explain what feedback the app should show.

Accepted Answer

The app should show feedback such as a loading spinner, progress bar, or message that says Uploading photo. This tells the user that the app received the tap and is working.

Question 11

A reading app uses light gray text on a white background. Explain why this may be a problem and how to fix it.

Accepted Answer

Light gray text on a white background may be hard to read because there is not enough contrast. The app could fix this by using darker text, a darker background, or a high-contrast reading mode.

Question 12

A button in a game app is very small and placed close to another button. Explain how this could affect users and suggest a better layout.

Accepted Answer

Small buttons placed close together can cause users to tap the wrong option by mistake. A better layout would make the buttons larger and add more space between them.

Question 13

Write a helpful error message for a password field when the user enters only three characters. The password must be at least eight characters.

Accepted Answer

A helpful error message could say, Your password must be at least 8 characters long. Please add 5 or more characters. This message explains the problem and tells the user how to fix it.

Question 14

Put these user flow steps in a logical order for ordering a library book in an app: Confirm request, Search for a book, Open book details, Tap Request Book, See request success message.

Accepted Answer

The logical order is Search for a book, Open book details, Tap Request Book, Confirm request, and See request success message. This order follows the steps a user would take from finding the book to completing the request.

Question 15

You are testing a new reminder app with classmates. Write two questions you could ask them after they try the app to learn whether the interface is easy to use.

Accepted Answer

Good questions could include, What was easy or hard to find in the app? and Were any buttons or labels confusing? These questions help the designer learn what worked and what should be improved.

CS: App Design: User Interface Basics

Related Cheat Sheets

More CS Worksheets

More Grade 6-8 Worksheets