User Interface CS Thinking Example 3

Follow the full solution, then compare it with the other examples linked below.

Example 3

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.

Solution

  1. 1
    Step 1: Problems: (1) 20 fields is overwhelming — split into multiple steps. (2) Placeholder text disappears when typing — use permanent labels. (3) Tiny submit button — make it prominent and easy to click.
  2. 2
    Step 2: (4) No error messages — validate each field and show clear, specific error messages. Additional improvements: group related fields, mark required fields, show progress for multi-step forms.

Answer

Split into steps, add permanent labels, enlarge submit button, add validation error messages, group related fields.
Form design directly affects completion rates. Studies show that reducing form complexity and providing clear feedback significantly increases the percentage of users who complete the form.

About User Interface

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.

Learn more about User Interface →

More User Interface Examples

Example 1 easy

What is the difference between a GUI (Graphical User Interface) and a CLI (Command Line Interface)?

Example 2 medium

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

Example 4 hard

Explain what usability testing is and design a simple usability test for a school timetable app. Inc

← All User Interface Examples User Interface Concept