lesson 2.6 - efficient ui: object sizing, placement & distinguishability
Learn how the size , placement , and distinguishability of objects can make an interface faster to use.
Have you ever tried to tap a tiny 'X' on a mobile ad and missed it three times? Or stared at a screen trying to figure out which text was actually a button? It's frustrating, right? Today, we are going to fix that. We are learning the secrets of speed - how to size, place, and style objects so that users can fly through your interface without even thinking. We’re turning you from digital artists into digital engineers!
Learning Outcomes
The Building Blocks (Factual Knowledge)
The Connections and Theories (Conceptual Knowledge)
The Skills and Methods (Procedural Knowledge)
State that using bigger objects influences selection and reduces selection time.
Identify that making objects stand out reduces focus time.
Recall that placing related objects next to each other reduces selection time.
Describe the importance of ensuring buttons and links are distinguishable from other content.
The Connections and Theories (Conceptual Knowledge)
Explain the relationship between the size of an interactive object and the speed at which a user can select it (Fitts' Law).
Analyse how the grouping of related items impacts the physical movement required by the user (mouse travel).
Discuss why distinguishing interactive elements reduces the cognitive load (thinking time) for the user.
The Skills and Methods (Procedural Knowledge)
Apply sizing techniques to create buttons that are easy to select on different devices.
Create a layout where related tools are grouped logically to minimise movement.
Design interface elements that use contrast and shape to stand out as clickable items.
Digital Skill Focus: C.3.2.1 Spreadsheet Modelling and Analysis: Create a simple data model to answer a "what-if" question, and create a simple, appropriately labelled chart from a set of data. (This connects to the data analysis part of the Fitts' Law experiment).
The Science of Speed: Fitts' Law
In 1954, psychologist Paul Fitts discovered a mathematical rule that predicts how long it takes to move a mouse (or finger) to a target area. This is Fitts' Law.
The formula looks complex: MT = a + b•log2(2D/W)
But the meaning is simple:
MT (Movement Time): The time it takes for you to move from one object to the next.
a (Reaction Time): How long it takes you to start moving.
b (Processing speed): How fast your brain processes the difficulty.
D (Distance): The further away the target is, the longer it takes to reach.
W (Width): The smaller the target is, the longer it takes to click (because you have to slow down to be precise).
Therefore, to make an interface efficient:
Make frequent targets LARGE (increases W).
Place frequent targets CLOSE to the user's starting position (decreases D).
Task 1 Cracking the Speed Code
Welcome to this mathematical challenge! You will become a UI Engineer and investigate quantitatively, the relationship between UI object placement and the speed and ease of use. Get ready...
1
Familarise yourself with "The Experiment"
Fitts's Law is a core principle in digital design: The larger a target is, and the closer it is to the user's cursor, the faster they can click it.
This law helps designers make intuitive digital products. Here are the main takeaways:
Movement Time (MT): The goal is to minimize this time for users.
Index of Difficulty (ID): A number in "bits" calculated from the target's distance and width. Lower ID is better, indicating an easier click.
Throughput (TP): Measures the efficiency of input devices (like a mouse vs. a touchpad) in bits per second. Higher TP is better.
When you design, make critical buttons large and place them nearby to keep the ID low and the user experience fast.
You are going to run a number of experiments to see if there is a connection between the Index of Difficulty (ID) and the Movement Time (MT)...
2
Run AT LEAST 3 separate experiments
Easy: Large Target Size, Low Scatter (Distance).
Medium: Medium Size, Medium Scatter.
Hard: Small Size, High Scatter.
2
Record Data
For each experiment, write down the Index of Difficulty (ID) and the average Movement Time (MT) (in ms)
3
Analyse in Excel
Open Excel.
Create two columns: ID and MT.
Enter your data.
Highlight the data and insert a Scatter Graph.
Right-click a data point on the graph > Add Trendline.
In the settings menu on the right, tick Display Equation on Chart.
4
Decode your data
You will see an equation like y = A + Bx
A is your reaction time in ms (how long it takes you to start moving).
B is your processing speed in ms (how fast your brain processes the difficulty).
Outcome: A spreadsheet containing your experimental data, a scatter graph, and your personal Fitts' Law equation.
The Four Mantras of Efficient Design
To reduce user frustration, we must reduce two things:
Focus Time: The time spent searching for the button.
Selection Time: The time spent moving the mouse to click the button.
1
Object Sizing: Bigger is Faster
Influence Selection: Big buttons catch the eye immediately.
Reduce Selection Time: You don't need to be precise with a big button. You can "throw" the mouse cursor at it quickly and still hit it.
Critical buttons (like "Buy Now") should always be the largest elements.
2
Making Objects Stand Out
If a user has to scan the screen to find a button, that is wasted Focus Time.
Contrast: Use colours that pop against the background.
Shape: Make buttons look like real buttons! Use rounded corners or subtle shadows (skeuomorphismI have no idea what this means) so they look "pressable".
3
Distinguishability
Users must instantly know the difference between:
Interactive elements (things you click).
Static elements (things you read). If a "Submit" button looks just like a heading text, the user will be confused. Keep styles distinct.
4
Placement and Proximity
Grouping: Put related things together. A "Username" box should be glued to the "Password" box. "Save" should be near "Cancel" (but distinct!).
Reduced Movement: Minimising the physical distance the mouse travels significantly reduces selection time.
Task 2 The Designer's Wall
It's time for you to show off your design skills again!
1
Create a Canvas. Open PowerPoint/Publisher/Canva or take a clean sheet of A4 paper.
2
Divide and Conquer: Split the page into four quadrants.
3
Visualise the Mantras: In each quadrant, create a visual guide for one of the four mantras:
Object Sizing: Draw/create a comparison of a fast button vs. a slow button.
Stand Out: Show how contrast makes a button pop.
Distinguishability: Show a "Bad" example (button looks like text) and a "Good" example.
Placement: Show a logical group of buttons.
4
Apply the Rules: Make sure your poster uses the rules. Important text should be big!
Outcome: A "Four Mantras of Design" poster suitable for display in a web design agency.
Application to the Component Sample PSA
Component 1: The Majestic CinemaTicket Booking Screen: When designing the seat selection screen, Fitts' Law is critical. The individual seats (targets) are often small. You must ensure they are large enough to be tapped easily on a mobile device.
Navigation: The "Book Now" button is the most important element. Following the "Object Sizing" mantra, this button should be larger and have a higher contrast colour (e.g., Gold/Red) than the "More Info" buttons to reduce selection time.
Grouping: On the "Facilities" screen, icons for accessibility (wheelchair, audio description) should be grouped together so users with specific needs can find them with minimal eye movement.
Component 2: Pedal Power Cycles
Dashboard Design: When creating the dashboard, you will use form controls (buttons, spinners). The "Update Graph" or "Filter" buttons must be placed close to the data they affect (Proximity) to reduce mouse travel for the shop owner.
Distinguishability: The interactive slicers (filters) must look visually different from the static chart titles so the owner knows instantly what they can click to change the data view.
Out of Lesson Learning
⭐ The "Thumb Zone"
Check Open your favourite mobile app on your phone. Hold the phone in one hand. Identify one frequently used button that is hard to reach with your thumb (High Distance) and one that is perfectly placed. Note them down.
Check Open your favourite mobile app on your phone. Hold the phone in one hand. Identify one frequently used button that is hard to reach with your thumb (High Distance) and one that is perfectly placed. Note them down.
⭐⭐ The Microwave Redesign
Look at your microwave or washing machine interface at home. Sketch a redesign of the control panel that improves Grouping. Move related buttons (e.g., Start/Stop/Add 30s) closer together to reduce the physical movement required to heat a meal.
Look at your microwave or washing machine interface at home. Sketch a redesign of the control panel that improves Grouping. Move related buttons (e.g., Start/Stop/Add 30s) closer together to reduce the physical movement required to heat a meal.
⭐⭐⭐ Majestic Metrics
Using the Majestic Cinema brief, calculate the theoretical Index of Difficulty (ID) for the "Book Tickets" button on a desktop screen. Assume the button is 100 pixels wide and the user's mouse starts at the top left of a 1920x1080 screen (approx 1000 pixels distance). Use the formula ID = log2(2D/W) and show your working.
Using the Majestic Cinema brief, calculate the theoretical Index of Difficulty (ID) for the "Book Tickets" button on a desktop screen. Assume the button is 100 pixels wide and the user's mouse starts at the top left of a 1920x1080 screen (approx 1000 pixels distance). Use the formula ID = log2(2D/W) and show your working.
Last modified: November 28th, 2025
