Visual communication principle: proximity

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which layout applies proximity to a sign-up form?

A Spread every field evenly down the page so each one is the same distance from the next

B Place First name and Last name fields next to each other, with a gap before the Password fields

2. What does the proximity principle say about items that are related?

A Place them close together

B Place them at opposite corners of the screen

3. A dashboard has a chart and its legend far apart, with an unrelated button right beside the legend. What is the proximity problem?

A There is no problem, because proximity only applies to the colours used

B The legend is nearer to an unrelated item than to its chart, so the grouping is misleading

4. Which use of spacing best shows two separate groups on a form?

A A larger gap between the Contact details group and the Payment details group

B The same small gap between every field, with no space between groups

5. True or false: Proximity can make groups clear without using lines, boxes or colour.

A True

B False

Match the Pairs

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

Left column		Right column
1margin-bottom: 32px;		AAdds extra space under a group so it is clearly separated from the next group
2<fieldset><legend>Address</legend> ... </fieldset>		BKeeps related form fields together in one labelled group
3Proximity keeps related fields close together, such as first name and last name in the same block		C.name-group { gap: 4px; }
4Proximity leaves a larger space between unrelated groups so each group stands out		DThe label is closer to the wrong field, so users link it with the wrong input. Move each label close to its own field and away from others.
5A form where every field has the same 20px gap, including between Street and Suburb and between Address and Payment		EThe spacing is identical everywhere, so related and unrelated items look the same and no groups can be seen. Use small gaps inside a group and larger gaps between groups.
6A label placed 60px above its text box, right next to the field of the next question		F.form-group { margin-bottom: 40px; }

Definitions

proximity

Fill in the Blanks

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

label { _____________: 4px; }

<________> <input name="first"> </fieldset>

.name-row { display: flex; ___: 8px; }

.group + .group { __________: 32px; }

<fieldset> <legend>Contact details</______> </fieldset>

Spot the Error

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

Question 1

A .name-fields {

B gap: 40px;

C }

D .address-fields {

E margin-top: 32px;

F }

Question 2

A <div class="name">

B <input id="first"

C <input id="last">

D </div>

Question 3

A .name-group {

B display: flex;

C gap: 4px;

D margin-bottom: 0px;

E }

Question 4

A label {

B margin-bottom: 40px;

C display: block;

D }

Question 5

A <form>

B <input name="first">

C <br><br><br><br>

D <br>

E <input name="street">

F </form>

Answer Key

Visual communication principle: proximity

Section A: Quick Questions

B — Place First name and Last name fields next to each other, with a gap before the Password fields

A — Place them close together

B — The legend is nearer to an unrelated item than to its chart, so the grouping is misleading

A — A larger gap between the Contact details group and the Payment details group

A — True

Section B: Match the Pairs

margin-bottom: 32px; → Adds extra space under a group so it is clearly separated from the next group

<fieldset><legend>Address</legend> ... </fieldset> → Keeps related form fields together in one labelled group

Proximity keeps related fields close together, such as first name and last name in the same block → .name-group { gap: 4px; }

Proximity leaves a larger space between unrelated groups so each group stands out → .form-group { margin-bottom: 40px; }

A form where every field has the same 20px gap, including between Street and Suburb and between Address and Payment → The spacing is identical everywhere, so related and unrelated items look the same and no groups can be seen. Use small gaps inside a group and larger gaps between groups.

A label placed 60px above its text box, right next to the field of the next question → The label is closer to the wrong field, so users link it with the wrong input. Move each label close to its own field and away from others.

Section C: Definitions

proximity — A design principle: place related items close together and unrelated items further apart, so users see the groups clearly. Eg group name fields, then leave space before the next group.

Section D: Fill in the Blanks

label { margin-bottom: 4px; }

<fieldset>
  <input name="first">
</fieldset>

.name-row {
  display: flex;
  gap: 8px;
}

.group + .group { margin-top: 32px; }

<fieldset>
  <legend>Contact details</legend>
</fieldset>

Section E: Spot the Error

B — Fields in the same group (first name, last name) should sit close together. A 40px gap pushes them apart so they look unrelated. It should be a small gap such as 4px.

B — The input tag is missing its closing >. The fields are wrapped in one div to group them, so the tag must be written correctly: <input id="first">.

D — Proximity needs extra space between different groups. With margin-bottom: 0px the next group sits right against this one, so the groups blur together. It should be a larger value such as 32px.

B — A label belongs with its input, so it should sit close to it. A 40px margin separates them and breaks the link. It should be a small margin such as 4px.

C — Putting big breaks between the first and last name fields splits a related group. The name fields should stay together, with the space placed after them, before the street field. Line 3 should be the last name input.