Design criteria for an interface

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which is a checkable design criterion for a school canteen app?

A Students can place an order in 4 taps or fewer

B The app should be really good

2. A client says: 'Our app must work for people with low vision.' What is the best criterion to turn this requirement into?

A Body text is at least 16 pt with high contrast against the background

B The app looks nice on every phone

3. Which one is a usability criterion?

A The logo uses the school's colours

B A new user can find the settings page without help

4. Which one is an aesthetic criterion?

A Every button can be used with a screen reader

B The screens use the same 3-colour palette and font throughout

5. Which one is an accessibility criterion?

A All images have alt text that describes them

B The home screen loads with a fun animation

Match the Pairs

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

Left column		Right column
1Criterion: Text is at least 16pt		AA usability criterion about navigation that can be tested by counting clicks
2Criterion: Any page is reachable in 3 clicks		BToo vague. 'Nice' cannot be checked, so the design cannot be judged against it. Use something like 'uses no more than 3 colours and a consistent font'.
3Turning a requirement into a criterion: the app must be usable by people with low vision		CRequirement: low vision users -> Criterion: contrast ratio of at least 4.5:1
4An aesthetic criterion makes the look of the design checkable		DCriterion: Uses only the 3 brand colours
5Criterion: The app should look nice		EA usability or readability criterion that can be checked by measuring the font size
6Requirement: easy for everyone -> Criterion: easy for everyone		FThe requirement was copied, not turned into a criterion. It needs a measurable standard, such as 'a new user finishes the task in under 2 minutes'.

Definitions

design criteria

Fill in the Blanks

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

Requirement: Users can find the menu fast _________: Menu is visible on every screen

Type: _________ Criterion: Users reach checkout in 3 taps

Type: _________ Criterion: Colours and fonts look consistent

Type: _____________ Criterion: Every image has alt text

___________: App must be easy to read Criterion: Body text is at least 16 px

Spot the Error

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

Question 1

A need ← "Easy to read"

B crit ← "Text is 16pt or more"

C test ← "Does it look nice?"

Question 2

A need ← "Easy to navigate"

B crit ← "Menu is nice to use"

C test ← "Count clicks per page"

Question 3

A type ← "aesthetic"

B crit ← "Images have alt text"

C test ← "Check each image"

Question 4

A maxCols ← 3

B cols ← 2

C IF cols > maxCols THEN pass

Question 5

A minRatio ← 4.5

B ratio ← 7

C IF ratio >= minRatio THEN fail

Answer Key

Design criteria for an interface

Section A: Quick Questions

A — Students can place an order in 4 taps or fewer

A — Body text is at least 16 pt with high contrast against the background

B — A new user can find the settings page without help

B — The screens use the same 3-colour palette and font throughout

A — All images have alt text that describes them

Section B: Match the Pairs

Criterion: Text is at least 16pt → A usability or readability criterion that can be checked by measuring the font size

Criterion: Any page is reachable in 3 clicks → A usability criterion about navigation that can be tested by counting clicks

Turning a requirement into a criterion: the app must be usable by people with low vision → Requirement: low vision users -> Criterion: contrast ratio of at least 4.5:1

An aesthetic criterion makes the look of the design checkable → Criterion: Uses only the 3 brand colours

Criterion: The app should look nice → Too vague. 'Nice' cannot be checked, so the design cannot be judged against it. Use something like 'uses no more than 3 colours and a consistent font'.

Requirement: easy for everyone -> Criterion: easy for everyone → The requirement was copied, not turned into a criterion. It needs a measurable standard, such as 'a new user finishes the task in under 2 minutes'.

Section C: Definitions

design criteria — Checkable standards, such as easy to read, easy to navigate or meets the requirements, that an interface is designed to meet and then judged against.

Section D: Fill in the Blanks

Requirement: Users can find the menu fast
Criterion: Menu is visible on every screen

Type: usability
Criterion: Users reach checkout in 3 taps

Type: aesthetic
Criterion: Colours and fonts look consistent

Type: accessibility
Criterion: Every image has alt text

Requirement: App must be easy to read
Criterion: Body text is at least 16 px

Section E: Spot the Error

C — A design criterion must be checkable. 'Does it look nice?' is just an opinion. The test should measure the font size against the 16pt criterion.

B — This criterion is vague and cannot be checked. A usability criterion for 'easy to navigate' needs a measurable standard, such as 'Any page in 3 clicks'.

A — Alt text helps users who rely on screen readers, so it is an accessibility criterion, not an aesthetic one. Line 1 should be type ← "accessibility".

C — The criterion allows 3 colours or fewer, so the design passes when cols <= maxCols. Using > passes designs that break the criterion.

C — A contrast ratio of 7 meets the minimum of 4.5, so the design meets the accessibility criterion. The result should be pass, not fail.