CS: App Design: User Interface Basics
Planning clear, useful, and accessible app screens
CS: App Design: User Interface Basics
Planning clear, useful, and accessible app screens
CS - Grade 6-8
- 1
Define user interface in your own words. Then name two examples of user interface elements in a mobile app.
Think about the parts of an app that you can tap, read, type into, or move.
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. - 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.
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. - 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.
Choose the information a user would most likely open the app to find immediately.
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. - 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.
Consistency helps users learn how an app works.
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. - 5
Write a clear button label for each action: saving a drawing, deleting a photo, and starting a game.
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. - 6
A music app uses only a trash can icon for deleting a playlist. Explain why adding text might help some users.
Icons can be helpful, but they are not always understood by everyone.
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. - 7
Describe a simple navigation menu for a school lunch app. Include at least four sections the app should have.
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. - 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.
Good forms are usually short and ask only for necessary information.
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. - 9
Sketch or describe a wireframe for a simple calculator app. Include the display area and number buttons.
A wireframe is a simple layout plan, not a finished colorful design.
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. - 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.
Users need to know whether their action worked.
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. - 11
A reading app uses light gray text on a white background. Explain why this may be a problem and how to fix it.
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. - 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.
Consider users with different hand sizes and different devices.
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. - 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.
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. - 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.
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. - 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.
Usability testing asks real users about their experience with the app.
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.