← QCE Digital Solutions Unit 1

Technical issues that shape the user interface

Device and network limits, such as screen size, touch or mouse input, connection speed and processing power, that restrict what a user interface can show and do.

Part of: QCE Digital Solutions Unit 1 — Understanding Digital Problems — Module 58

Understanding Technical issues that shape the user interface in QCE Digital Solutions Unit 1

What it does: A minimum button height makes targets big enough to tap, which fits the limits of touch input on small screens. Lazy loading delays images until needed, so slower processors and weak connections are not overloaded. Small screens limit how much can be shown at once. Designers cut the content back and make each item easy to see and tap. A finger is much less precise than a mouse pointer, so buttons and links need more space on a touchscreen. Input method is a technical factor. Mobile designs replace hover with tap actions, such as a menu button. Desktop screens are usually larger, so layouts can use several columns and more detailed menus.

Common mistakes: Touch input is less precise than a mouse, so buttons need a large tap target. 8px is far too small for a finger. It should be about 48px. CSS declarations use a colon, not an equals sign. It should be display: none; so the sidebar is hidden on small screens.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Technical issues that shape the user interface to a class →

This module's key terms are also in a printable crossword (Modules 1–58) and word search (Modules 1–81).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
A mobile app has a very small screen to work with. Which interface choice fits this technical factor?
Fit every menu, table and toolbar on one screen at a small font sizeShow one main task per screen with large, clear buttons
Matches
Menu: 12 tiny links in a row, hover to open (phone app)
↓
Hover menus and tiny links do not work on touch screens. Phones have no hover and fingers need bigger targets.
Applying
Meanings
Term
technical factors
Meaning
Device and network limits, such as screen size, touch or mouse input, connection speed and processing power, that restrict what a user interface can show and do.
Practice
<style>
Testing
Gaps
IF screenWidth 600 THEN
Check Answer
Spots
1.btn {
2 min-height: 8px;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Arctic Fox' badge — Tundra Tracker, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. A mobile app has a very small screen to work with. Which interface choice fits this technical factor?
A. Fit every menu, table and toolbar on one screen at a small font size
B. Show one main task per screen with large, clear buttons ✓
Small screens limit how much can be shown at once. Designers cut the content back and make each item easy to see and tap.
2. Which statement about touch input is correct?
A. Touch targets must be big enough for a finger to tap accurately ✓
B. Touch targets can be tiny because a finger is as precise as a mouse pointer
A finger is much less precise than a mouse pointer, so buttons and links need more space on a touchscreen.
3. A desktop website uses hover menus that open when the mouse moves over them. What happens on a phone?
A. Hover menus do not work well because a touchscreen has no mouse pointer to hover ✓
B. Hover menus work the same way because a finger hovers just like a mouse
Input method is a technical factor. Mobile designs replace hover with tap actions, such as a menu button.
4. Which is a benefit of designing for a desktop screen compared with a mobile screen?
A. More space lets the interface show more information and tools at once ✓
B. Desktop screens force the interface to show less information than a phone
Desktop screens are usually larger, so layouts can use several columns and more detailed menus.
5. Users of a regional app often have a slow or unreliable connection. Which design is better?
A. Load large videos and full-size images on the first screen
B. Use small images and let key features work offline ✓
Connectivity limits what an interface can do. Lightweight content and offline features keep the app usable.

Match the Pairs

@media (max-width: 600px) → A CSS rule that changes the layout on small screens, such as phones, so content still fits.
offlineMode = true → A setting that lets an app keep working with saved data when there is slow or no connection.
Touch input needs large tap targets because fingers are less precise than a mouse pointer. → button { min-height: 48px; }
Performance limits on older devices mean an interface should load less heavy content. → img.loading = "lazy"
Menu: 12 tiny links in a row, hover to open (phone app) → Hover menus and tiny links do not work on touch screens. Phones have no hover and fingers need bigger targets.
Home page loads a 40 MB video before showing any text → The design ignores slow connections and performance limits, so users on weak networks wait or see nothing.

Key Term

technical factors
Device and network limits, such as screen size, touch or mouse input, connection speed and processing power, that restrict what a user interface can show and do.

Fill in the Blanks

1. IF screenWidth < 600 THEN layout = "single column" END IF
Hint: Type the comparison operator that checks whether the screen is narrower than a limit
2. IF inputMethod = "touch" THEN buttonSize = "large" END IF
Hint: Type the variable that stores how the user enters information on the device
3. @media (max-width: 600px) { nav { display: none; } }
Hint: Type the CSS property that targets screens up to a certain width
4. IF deviceMemory < 2 THEN animations = "off" END IF
Hint: Type the keyword that follows an IF condition before the action runs on a low-power device
5. IF deviceType = "mobile" THEN menu = "hamburger" END IF
Hint: Type the variable that holds the navigation layout chosen for a small device

Spot the Error

Question 1
A .btn {
B min-height: 8px;
C min-width: 48px;
D }
Line B — Touch input is less precise than a mouse, so buttons need a large tap target. 8px is far too small for a finger. It should be about 48px.
Question 2
A @media (max-width: 600px) {
B .sidebar { display = none; }
C .nav { width: 100%; }
D }
Line B — CSS declarations use a colon, not an equals sign. It should be display: none; so the sidebar is hidden on small screens.
Question 3
A if (!navigator.onLine) {
B showMessage('Offline mode');
C loadLiveVideo();
D }
Line C — With no connection the interface cannot stream live content. It should load data saved on the device, such as loadCachedData().
Question 4
A IF screenWidth < 600 THEN
B SHOW desktopLayout
C ELSE
D SHOW desktopLayout
E ENDIF
Line B — A screen narrower than 600 is a small mobile screen. It should show mobileLayout, not the desktop layout.
Question 5
A <img src="photo-small.jpg"
B alt="Team photo"
C width="300"
D loading="slow">
Line D — The loading attribute only accepts lazy or eager. loading="lazy" delays off-screen images, which saves bandwidth and helps performance on slow connections.

Student with a class code? Join your class →