Technical issues that shape the user interface

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

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

Definitions

technical factors

Fill in the Blanks

Complete each line of code by filling in the missing parts.

IF screenWidth _ 600 THEN layout = "single column" END IF

IF ___________ = "touch" THEN buttonSize = "large" END IF

@media (_________: 600px) { nav { display: none; } }

IF deviceMemory < 2 ____ animations = "off" END IF

IF deviceType = "mobile" THEN ____ = "hamburger" END IF

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A .btn {

B min-height: 8px;

C min-width: 48px;

D }

Question 2

A @media (max-width: 600px) {

B .sidebar { display = none; }

C .nav { width: 100%; }

D }

Question 3

A if (!navigator.onLine) {

B showMessage('Offline mode');

C loadLiveVideo();

D }

Question 4

A IF screenWidth < 600 THEN

B SHOW desktopLayout

C ELSE

D SHOW desktopLayout

E ENDIF

Question 5

A <img src="photo-small.jpg"

B alt="Team photo"

C width="300"

D loading="slow">

Answer Key

Technical issues that shape the user interface

Section A: Quick Questions

B — Show one main task per screen with large, clear buttons

A — Touch targets must be big enough for a finger to tap accurately

A — Hover menus do not work well because a touchscreen has no mouse pointer to hover

A — More space lets the interface show more information and tools at once

B — Use small images and let key features work offline

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

IF screenWidth < 600 THEN
  layout = "single column"
END IF

IF inputMethod = "touch" THEN
  buttonSize = "large"
END IF

@media (max-width: 600px) {
  nav { display: none; }
}

IF deviceMemory < 2 THEN
  animations = "off"
END IF

IF deviceType = "mobile" THEN
  menu = "hamburger"
END IF

Section E: Spot the Error

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.

B — CSS declarations use a colon, not an equals sign. It should be display: none; so the sidebar is hidden on small screens.

C — With no connection the interface cannot stream live content. It should load data saved on the device, such as loadCachedData().

B — A screen narrower than 600 is a small mobile screen. It should show mobileLayout, not the desktop layout.

D — The loading attribute only accepts lazy or eager. loading="lazy" delays off-screen images, which saves bandwidth and helps performance on slow connections.