Applying UI design principles to an interface mock-up

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. When reviewing a mock-up against UI principles, which approach is best?

A Check the mock-up against each principle in turn using a checklist

B Glance at the screen once and decide if it looks nice

2. A mock-up has a heading and a button with left edges that do not line up. What is the best annotation?

A Contrast: change the heading colour to red

B Alignment: align the heading and button to the same left edge

3. Which annotation on a mock-up is most useful for the developer?

A Contrast: change grey text on a light grey background to dark text on white

B This part looks bad, fix it

4. All the buttons and images in a mock-up are crowded into the left half of the screen. Which principle needs improving?

A Text formatting

B Balance

5. A form has fields packed tightly with no gaps between them. Which annotation fits?

A Space: add margins and padding between the form fields

B Alignment: move all the fields to the right edge

Match the Pairs

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

Left column		Right column
1Annotation: "Title and button not aligned - move both to left margin"		AThe note names no UI principle and gives no specific improvement, so it cannot guide a revision of the mock-up.
2Checklist: alignment, balance, contrast, space, text formatting		BA review note that applies the alignment principle to a mock-up and states the improvement to make
3After annotating faults found against each principle, the designer revises the mock-up so the improvements are applied		CVersion 2: grey text changed to black, 24px gap added between form fields
4A design review checks one principle at a time and records an annotation for each problem found		DThe list of UI principles a mock-up is checked against, one at a time, during a design review
5Review note: "Make it look nicer"		EContrast: white text on yellow button is hard to read - use dark blue text
6Review: only checked contrast, then submitted the design as final		FThe mock-up was not checked against every principle in the checklist (alignment, balance, space and text formatting were skipped) and was not revised.

Definitions

Annotated design review

Fill in the Blanks

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

FOR ____ principle IN checklist CHECK mockup AGAINST principle

________ heading "Align left with the form"

IF contrastRatio _ minimumRatio THEN ANNOTATE bodyText "Darken the text colour" END IF

annotations ← [] ADD "More space around buttons" TO ___________

_____ issuesFound > 0 design ← REVISE(design, annotations) issuesFound ← CHECK(design, checklist)

Spot the Error

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

Question 1

A FOR EACH rule IN mock-up

B CHECK mock-up against rule

C ANNOTATE improvement

D END FOR

Question 2

A principle ← alignment

B issue ← labels not in line

C ANNOTATE: left-align labels

D SUBMIT mock-up, no recheck

Question 3

A principle ← contrast

B issue ← black text on white

C ANNOTATE: darken text colour

D REVISE then check contrast

Question 4

A principle ← balance

B issue ← all items on left side

C ANNOTATE: spread items evenly

D REVISE: add more to left side

Question 5

A principle ← space

B issue ← margins are generous

C ANNOTATE: add padding

D REVISE and recheck

Answer Key

Applying UI design principles to an interface mock-up

Section A: Quick Questions

A — Check the mock-up against each principle in turn using a checklist

B — Alignment: align the heading and button to the same left edge

A — Contrast: change grey text on a light grey background to dark text on white

B — Balance

A — Space: add margins and padding between the form fields

Section B: Match the Pairs

Annotation: "Title and button not aligned - move both to left margin" → A review note that applies the alignment principle to a mock-up and states the improvement to make

Checklist: alignment, balance, contrast, space, text formatting → The list of UI principles a mock-up is checked against, one at a time, during a design review

After annotating faults found against each principle, the designer revises the mock-up so the improvements are applied → Version 2: grey text changed to black, 24px gap added between form fields

A design review checks one principle at a time and records an annotation for each problem found → Contrast: white text on yellow button is hard to read - use dark blue text

Review note: "Make it look nicer" → The note names no UI principle and gives no specific improvement, so it cannot guide a revision of the mock-up.

Review: only checked contrast, then submitted the design as final → The mock-up was not checked against every principle in the checklist (alignment, balance, space and text formatting were skipped) and was not revised.

Section C: Definitions

Annotated design review — Checking a mock-up against each UI principle in turn (alignment, balance, contrast, space, text), annotating the improvements needed, then revising the design.

Section D: Fill in the Blanks

FOR EACH principle IN checklist
  CHECK mockup AGAINST principle

ANNOTATE heading "Align left with the form"

IF contrastRatio < minimumRatio THEN
  ANNOTATE bodyText "Darken the text colour"
END IF

annotations ← []
ADD "More space around buttons" TO 
annotations

WHILE issuesFound > 0
  design ← REVISE(design, annotations)
  issuesFound ← CHECK(design, checklist)

Section E: Spot the Error

A — The loop should go through the checklist of UI principles, checking the mock-up against each one in turn. It should read FOR EACH rule IN checklist.

D — After annotating the improvement, the designer must revise the mock-up and recheck it. Submitting without a recheck skips the revision step.

B — Black text on white has strong contrast, so it is not a problem. The issue should be low contrast, such as pale text on white, to match the annotation.

D — The annotation says to spread items evenly. Adding more to the left makes the imbalance worse. The revision should move an item to the right.

B — Generous margins are not a space problem and would not need padding. The issue should describe crowding, such as buttons too crowded.