User Interface Examples in CS Thinking

Start with the recap, study the fully worked examples, then use the practice problems to check your understanding of User Interface.

This page combines explanation, solved examples, and follow-up practice so you can move from recognition to confident problem-solving in CS Thinking.

Concept Recap

The visual elements and interaction methods through which a user communicates with a computing system — including buttons, menus, text fields, icons, and layout. A well-designed UI follows principles of clarity, consistency, and feedback to make software intuitive and efficient to use.

The UI is everything the user sees and touches. A good UI makes the software feel easy and intuitive; a bad UI makes even simple tasks frustrating.

Read the full concept explanation →

How to Use These Examples

  • Read the first worked example with the solution open so the structure is clear.
  • Try the practice problems before revealing each solution.
  • Use the related concepts and background knowledge badges if you feel stuck.

What to Focus On

Core idea: Good UI design follows principles of clarity, consistency, and feedback. The user should always know what's happening and what they can do next.

Common stuck point: UI (what it looks like) is not the same as UX (how it feels to use). A beautiful UI can still be frustrating to use.

Sense of Study hint: When designing a UI, follow three core principles: clarity (make it obvious what each element does), consistency (use the same patterns throughout), and feedback (show the user what happened after every action). Sketch layouts on paper before building them in code.

Worked Examples

Example 1

easy
What is the difference between a GUI (Graphical User Interface) and a CLI (Command Line Interface)? Give an example of each.

Answer

GUI: visual elements (buttons, windows) — e.g., web browser. CLI: text commands — e.g., Terminal. GUIs are easier; CLIs are more powerful.

First step

1
Step 1: A GUI uses visual elements — windows, buttons, icons, menus — that users interact with using a mouse or touch. Example: Windows File Explorer, a web browser.

Full solution

  1. 2
    Step 2: A CLI uses text commands typed by the user. Example: Terminal/Command Prompt where you type commands like 'cd Documents' or 'dir'.
  2. 3
    Step 3: GUIs are easier to learn but CLIs can be faster for experienced users and are easier to automate with scripts.
The user interface is how people interact with software. Choosing the right type depends on the audience — general users prefer GUIs, while developers and system administrators often prefer CLIs.

Example 2

medium
List five principles of good user interface design and explain each briefly.

Example 3

medium
Critique: a calendar app shows weeks Sunday-first on the home screen but Monday-first on the settings screen. Identify the violated principle and suggest a fix.

Practice Problems

Try these problems on your own first, then open the solution to compare your method.

Example 1

medium
Critique this form design: a registration form has 20 fields on one page, no labels (just placeholder text), a tiny submit button, and no error messages when fields are left blank. Suggest improvements.

Example 2

hard
Explain what usability testing is and design a simple usability test for a school timetable app. Include: tasks for testers, what to measure, and how to use the results.

Example 3

easy
A button is clicked and a spinner appears while data loads. Which UI principle does the spinner serve?

Example 4

easy
Every screen uses the same blue 'Save' button in the same place. Which UI principle is this?

Example 5

easy
A form clearly labels each field and shows one obvious primary action. Which UI principle is this?

Example 6

easy
A screen shows 40 buttons of equal prominence with no grouping. Which UI mistake is this?

Example 7

easy
After a user submits a form, nothing visibly changes for 5 seconds. What UI principle is violated?

Example 8

easy
A 'Delete account' button is styled identically to 'Cancel' and placed first. What UI quality is poor here?

Example 9

easy
Tapping an icon that looks like a trash can deletes an item. The icon's shape suggesting its function is called what?

Example 10

easy
Which is better for clarity? A) a label 'Submit' B) an unlabeled mystery icon

Example 11

medium
A delete action shows a confirmation dialog 'Are you sure?'. Which two UI principles does this serve?

Example 12

medium
App A puts navigation on the left on the home screen but on the bottom on the settings screen, with different icons. Which principle is violated and what is the user impact?

Example 13

medium
A long upload shows a progress bar from 0% to 100%. Beyond basic feedback, what extra value does the percentage provide over a plain spinner?

Example 14

medium
A form shows an error 'Invalid input' with no detail after submit. How does this fail clarity, and what is the better design?

Example 15

medium
A primary 'Buy now' button and a secondary 'Add to wishlist' link are styled with equal weight. What UI concept is missing, and the fix?

Example 16

medium
A mobile app uses 10px tap targets crammed together, causing mis-taps. Which usability factor is violated and the corrective principle?

Example 17

medium
An interface lets users undo any destructive action easily. Which principle does 'undo' primarily support, and why is it user-friendly?

Example 18

medium
Two designs for a settings page: A) groups related options under headings; B) lists 50 options alphabetically with no grouping. Which is more usable and which principle explains it?

Example 19

medium
A toolbar uses a floppy-disk icon for 'Save' with no label, and new users don't recognize it. Which principle is weak and what is a low-risk fix?

Example 20

challenge
You must redesign a 30-field signup form with a 60% abandonment rate. State the single most impactful UI principle to apply and a concrete change that follows from it.

Example 21

challenge
A new app version moves the 'Save' button to a new location and changes its color and label. Power users keep clicking the old spot. Which TWO principles are in tension, and how do you resolve it?

Example 22

challenge
Design the feedback for a 'Send message' button so the user always knows the state. Enumerate the distinct visible states the UI should show.

Example 23

easy
A screen reader reads aloud the labels of buttons. Which UI principle is being supported?

Example 24

easy
GUI stands for what?

Example 25

easy
CLI stands for what?

Example 26

easy
A magnifying-glass icon suggests 'search'. Its shape hinting at function is an example of what UI concept?

Example 27

medium
A long-running task shows no indicator. A user clicks 'Save' three times. What UI principle was missing and what bug results?

Example 28

medium
An app uses the system back-button on Android but a custom back-button in the top-left on iOS. Which UI principle is being respected here?

Example 29

medium
Two designs: A) shows 5 most-used actions; B) shows all 40 actions. Which is better for clarity, and what is the principle behind hiding the rest?

Example 30

medium
A 'Submit' button is greyed out until all required fields are filled. Which two UI principles does this serve?

Example 31

medium
A modal dialog has no close button or escape behavior. Which heuristic ('user control and freedom') is violated, and what is the fix?

Example 32

medium
A signup form has an inline 'check' next to a valid email field as the user types. Which UI principle does this support?

Example 33

medium
An app uses red for a 'Save' button and green for a 'Delete' button. Why is this a UI problem?

Example 34

medium
A login page uses gray text on light gray background, failing 4.5:14.5{:}1 contrast. Which UI principle is violated?

Example 35

medium
An ecommerce site puts 'Add to cart' and 'Buy now' adjacent with identical styling. What UI quality is missing?

Example 36

medium
Which is better usability research: A) ask 5 users to perform tasks while you observe; B) survey 500 users about their feelings on the design.

Example 37

medium
A form's tab order jumps unpredictably between fields. Which UI principle is violated and which users are most affected?

Example 38

hard
Design the visible states for a file upload widget so the user always knows what's happening. List them.

Example 39

hard
You can't reach 4.5:14.5{:}1 contrast for caption text on a brand color. State two accessible workarounds.

Example 40

hard
A form has 3030 fields. Heuristics suggest each extra field reduces completion by ≈10%\approx 10\% relative to the prior. Approximate completion rate vs. a 5-field form, ignoring other factors.

Example 41

hard
A team replaces a familiar 'hamburger menu' icon with a unique custom icon. Engagement drops 30%30\%. Which UI principle did they violate, and what is the safer alternative?

Example 42

challenge
You have 200200 ms before the user notices a delay, 11 s before they lose focus, and 1010 s before they leave. For a search that takes 44 s, what is the minimum feedback design?

Example 43

challenge
A new feature requires changes to 6 screens. You can either redesign all 6 at once or only 2 of them, leaving 4 in the old style. Which path is better and why?
← Back to User Interface Practice Mode

Background Knowledge

These ideas may be useful before you work through the harder examples.

input output