Layout and grouping on a screen

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which is a good way to lay out a quiz app screen?

A Put the question and its answer buttons close together

B Spread the question and answer buttons to opposite corners

2. What does alignment mean in a layout?

A Lining items up along the same edge or line

B Making every item a different size

3. Which screen is easier to scan?

A Labels and text boxes scattered in random places

B Labels and text boxes lined up in a neat column

4. Why do designers leave space between groups of items?

A So the groups are easy to tell apart

B So the screen looks empty and unfinished

5. A game menu has Play, Settings and Quit buttons. Which layout is best?

A Put them at random angles with different gaps

B Stack them in a line with the same gap between each

Match the Pairs

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

Left column		Right column
1layout		A[Name: ____ ] [Age: ____ ] (group box: About you)
2align		BThere is no spacing between the buttons, so they are squashed together and easy to click by mistake.
3Grouping related items: put a name box and an age box close together in one area		CLine items up along the same edge so the screen looks neat
4Spacing: leave a gap between the Play button and the Quit button so they are not mixed up		DWhere items are placed on a screen so it is easy to scan
5[Name: ____ ] [Age: ____ ] [Email: ____ ]		EThe text boxes are not lined up. Each starts in a different place, so the screen looks messy and is hard to scan.
6[Play][Options][Quit][Help][Score]		F[ Play ] [ Quit ]

Definitions

layout

Fill in the Blanks

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

_____ Player: name, score, lives GROUP Controls: play, pause, stop

_____ Buttons: left SPACE Buttons: 10px

GROUP Scores: points, level, time _____ Scores: 20px

# Menu items line up on the left edge GROUP Menu: Home, Play, Help ALIGN Menu: ____

GROUP Scores: points, level, time ALIGN ______: left

Spot the Error

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

Question 1

A SCREEN Music Player

B GROUP controls: play, artist

C GROUP info: song, artist

D ALIGN all groups: centre

Question 2

A SCREEN Settings

B SPACE inside group: large

C SPACE between groups: large

Question 3

A SCREEN Quiz

B GROUP answers: A, B, C, D

C SPACE between answers: 300px

D SPACE around screen: 24px

Question 4

A SCREEN Shop Item

B GROUP photo: image, caption

C GROUP price: cost, image

D GROUP buy: quantity, button

Question 5

A SCREEN Menu

B ALIGN title: centre

C ALIGN buttons: staggered

D ALIGN sizes: same width

Answer Key

Layout and grouping on a screen

Section A: Quick Questions

A — Put the question and its answer buttons close together

A — Lining items up along the same edge or line

B — Labels and text boxes lined up in a neat column

A — So the groups are easy to tell apart

B — Stack them in a line with the same gap between each

Section B: Match the Pairs

layout → Where items are placed on a screen so it is easy to scan

align → Line items up along the same edge so the screen looks neat

Grouping related items: put a name box and an age box close together in one area → [Name: ____ ] [Age: ____ ] (group box: About you)

Spacing: leave a gap between the Play button and the Quit button so they are not mixed up → [ Play ] [ Quit ]

[Name: ____ ] [Age: ____ ] [Email: ____ ] → The text boxes are not lined up. Each starts in a different place, so the screen looks messy and is hard to scan.

[Play][Options][Quit][Help][Score] → There is no spacing between the buttons, so they are squashed together and easy to click by mistake.

Section C: Definitions

layout — Where items are placed on a screen. Good layout groups related items together, lines them up and leaves space between them, so the screen is easy to scan.

Section D: Fill in the Blanks

GROUP Player: name, score, lives
GROUP Controls: play, pause, stop

ALIGN Buttons: left
SPACE Buttons: 10px

GROUP Scores: points, level, time
SPACE Scores: 20px

# Menu items line up on the left edge
GROUP Menu: Home, Play, Help
ALIGN Menu: left

GROUP Scores: points, level, time
ALIGN Scores: left

Section E: Spot the Error

B — The artist name is information, not a control. Related items should be grouped together, so the controls group should be play and pause, and the artist belongs in the info group.

B — Items inside a group should have small gaps so they look related. If the space inside a group is as large as the space between groups, the groups do not stand out. It should say small.

C — 300px is far too much space. The answers would be spread across the screen and no longer look like one group. A small, even gap such as 16px keeps them together and easy to scan.

C — The image does not belong in the price group, and it is already in the photo group. The price group should only hold items about price, such as the cost and the discount.

C — Staggered buttons do not line up, which makes the screen messy and harder to scan. The buttons should be aligned, so their left edges should match.