lesson 3.6 - layout components (navigational & input)
Radio buttons or checkboxes? Don't make your users rage-click! We explore the essential layout components for BTEC DIT to make your interfaces smooth, smart, and mistake-free.
Have you ever tried to push a door that has a handle designed for pulling? It's annoying, right? That is exactly what happens when a designer chooses the wrong component for a website. Today, we are going to look at the nuts and bolts of User InterfaceBlanket term to cover all methods of interaction between a computer system and its environment. design—the actual buttons, boxes, and bars that users click and type into. You will learn why a dropdown listI have no idea what this means might be better than a text box, how breadcrumbsI have no idea what this means stop you from getting lost, and how to pick the perfect input controlI have no idea what this means to make booking a cinema ticket a breeze for your customers.
Learning Outcomes
The Building Blocks (Factual Knowledge)
The Connections and Theories (Conceptual Knowledge)
The Skills and Methods (Procedural Knowledge)
Recall the definitions of navigational components including search fields, breadcrumbs, and icons.
Identify common input controls such as dropdown lists, tick boxes, and toggles.
Describe the standard visual conventions for a text box versus a button.
The Connections and Theories (Conceptual Knowledge)
Explain why specific input controls are chosen to reduce user error (e.g., using a date picker instead of a text field).
Analyse how breadcrumbs aid user orientation within a complex site structure.
Evaluate the trade-off between using a long scrolling list versus a dropdown menu in terms of screen real estate.
The Skills and Methods (Procedural Knowledge)
Select the most appropriate input control for a given data entry scenario (e.g., selecting a film rating).
Create a wireframe that integrates standard navigational icons (home, back) consistent with user expectations.
Design a data entry form that minimises typing by using effective selection controls.
Digital Skill Focus: Use a low-fidelity prototype (wireframe) to plan the layout, structure, and placement of interface elements before detailed design.
Design Principles: Layout Components
To build a User Interface (UI) that works, you need to choose the right tools for the job. We split these tools into two main categories: components that help users move around (navigational) and components that let users give us information (input).
1
Navigational Components (Getting Around)
Imagine walking into a massive library without signs. You would be lost instantly. Navigational componentsI have no idea what this means are the signposts of your digital product.
Search Fields: Allows the user to find specific content directly without clicking through menus. Usually found at the top-right of the screen with a magnifying glass icon.
Breadcrumbs: A trail of links (usually at the top of a page) showing the user where they are in the site hierarchy (e.g., Home > Menus > Drinks > Coffee). This lets them jump back one level easily.
Icons: Visual symbols that represent actions or destinations (like a 'Home' house or a 'Settings' gear). They save space and are recognised instantly by users globally.
2
Input Controls (Capturing Data)
When you need the user to "talk back" to the system, you use input controlsI have no idea what this means. The Golden Rule:
In order to reduce errors, minimize the amount of typing the user has to do
Making Choices
Radio Buttons: Used when the user must select EXACTLY ONE option from a list (e.g., Gender: Male / Female / Prefer not to say).
Checkboxes (Tick Boxes): Used when the user can select ZERO, ONE, or MANY options (e.g., Pizza Toppings: Pepperoni, Mushroom, Onions).
Dropdown Lists: Used to select one option from a long list to save screen space (e.g., Country of Residence).
Toggles: A digital switch for "On/Off" settings (e.g., Dark Mode).
Entering Details
Text Boxes: For free text entry like names or addresses.
Date Pickers: A calendar popup that prevents users from typing invalid dates (like 32nd Jan).
Buttons: The final action to submit the data (e.g., "Submit" or "Book Now").
Task The Majestic Makeover
1
Get Organised!
Open a new tab and go to Diagrams.net.
Organise your workspace.
On the left-hand side, use the search bar to find shapes like "Button", "List", "Radio", and "Box".
2
The Requirements
You need to build a screen that allows a customer to enter the following five pieces of data. You must choose the CORRECT component for each one:
Select Film: The cinema shows 15 films. We don't want a long list taking up the whole screen. (Hint: It drops down).
Select Time: The film is showing at 14:00, 16:00, or 20:00. The user can only go to ONE screening. (Hint: Radio Buttons).
Add Extras: The user might want Popcorn, a Drink, Both, or Neither. (Hint: Checkboxes).
Ticket Amount: Needs to be easy to change without typing.
Accessibility: A switch to turn on "High Contrast Mode".
3
The Wireframe
Drag the components onto your canvas. Arrange them inside a box so they look like a kiosk screen.
Use a Text Box for labels (e.g., "Choose your film").
Search for "Search" to add a magnifying glass icon if you want a search bar.
CRITICAL: Ensure your "Submit Booking" button is at the bottom right (Visual Hierarchy).
Outcome: A digital wireframe exported as a PNG showing the correct input controls for the Majestic Cinema booking system.
Application to the Component Sample PSA
Component 1: Majestic Cinema (User Interfaces)
For the Majestic Cinema kiosk interfaceI have no idea what this means, selecting the right input controls is critical for speed. Long queues form if people are typing too much.
Ticket Selection: Use a stepperI have no idea what this means (Plus/Minus buttons) for the number of tickets, rather than a text box.
Showtime Selection: Since a movie only has 3-4 showtimes a day, use Radio ButtonsI have no idea what this means (e.g., 14:00, 17:00, 20:00). Do NOT use a dropdown list as it hides the options and requires extra clicks.
Food Pre-orders: Use CheckboxesI have no idea what this means for "Add-ons" like Salted Popcorn, Sweet Popcorn, and Nachos, as a customer might want all three.
Component 2: Pedal Power Cycles (Dashboard)
For the Pedal Power data dashboardI have no idea what this means, the focus is on filtering large datasets of cycling statistics.
Date Range: Use a Date PickerI have no idea what this means (Calendar view) to allow the manager to select "Start Date" and "End Date" for sales reports.
Bike Type Filter: Use a Dropdown ListI have no idea what this means to filter the data by bike category (Mountain, Road, Hybrid, Electric) because this list might grow and needs to fit into a small sidebar.
Live Tracking: Use a Toggle SwitchI have no idea what this means to turn "Real-time Location Updates" on or off to save battery on the tracking devices.
Out of Lesson Learning
⭐ The "Input Inspector"
Go to a major travel booking website (like Expedia, Trainline, or Airbnb). Find one example of each of the following components:
Go to a major travel booking website (like Expedia, Trainline, or Airbnb). Find one example of each of the following components:
A Date Picker
A Dropdown List
A Radio Button Take a screenshot of each and label them. Finally, try to find a "Search Field" and explain in one sentence why it is usually placed at the very top of the page.
⭐⭐ The "Space Saver" Challenge
Pedal Power Cycles wants to add a "Country of Origin" field to their customer sign-up form. There are 195 countries in the world.
Pedal Power Cycles wants to add a "Country of Origin" field to their customer sign-up form. There are 195 countries in the world.
1
Sketch how this would look if you used Radio Buttons for every country. (Just sketch the first 5 and the last 5, indicating the size).
2
Sketch how this would look if you used a Dropdown List.
3
Write a short explanation of why the Dropdown List is the only logical choice here, referencing "Screen Real Estate".
⭐⭐⭐ The "Toggle vs Checkbox" Debate
You are designing the "Settings" page for the Majestic Cinema app. You have two options for the "Notifications" setting:
You are designing the "Settings" page for the Majestic Cinema app. You have two options for the "Notifications" setting:
Option A: A Checkbox next to the text "Enable Push Notifications".
Option B: A Toggle Switch next to the text "Push Notifications". Research the difference between these two controls in modern UI design (Google "Checkbox vs Toggle UX"). Write a paragraph explaining which one implies an "instant" change to the system settings and which one implies a change that requires a "Save" button to take effect. Recommend the best option for a mobile app.
Last modified: January 21st, 2026
