Consistency in an interface

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which screen design shows consistency?

A Every screen has a blue Next button with rounded corners

B One screen has a blue Next button, another has a red square Go button

2. Where should the Home button go to keep an app consistent?

A In a different corner on each screen

B In the same place at the top of every screen

3. True or false: Consistency means every screen must look exactly the same, with the same content.

A False. Similar things look and work the same, but the content can change

B True. Every screen must have identical content

4. Mia's game has a Back button at the bottom left on screens 1 and 2, but at the top right on screen 3. What is the problem?

A The game has too many screens

B The navigation position is not consistent

5. Why is consistency helpful for users?

A They learn how it works once and can use every screen

B They have to learn how each screen works again

Match the Pairs

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

Left column		Right column
1consistency		AKeeping navigation in the same position so users can always find it.
2Home button: top left on every screen		BThe menu moves to a different place on each screen, so users have to search for it. Fix it by keeping the menu at the top of every screen.
3Same button style: every Next button is blue, rounded and says 'Next'		CScreen 1: Menu at top \| Screen 2: Menu at top \| Screen 3: Menu at top
4Same position for navigation: the menu bar stays at the top of every screen		DThe same kind of button looks different on each screen, which is not consistent. Fix it by giving both the same colour, shape and label.
5Screen 1: [Next] blue, rounded \| Screen 2: [Go] red, square		EScreen 1: [Next] blue, rounded \| Screen 2: [Next] blue, rounded
6Screen 1: Menu at top \| Screen 2: Menu at bottom \| Screen 3: Menu on right		FSimilar things look and work the same way on every screen, so users always know what to do.

Definitions

consistency

Fill in the Blanks

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

Home screen: Next button colour = blue Quiz screen: Next button colour = ____

Home screen: Menu bar at top Games screen: Menu bar at ___

Same menu place on every screen = __________

Home: Play button = green, rounded Level: Play button = green, _______

Screen 1: Back button at top left Screen 2: ____ button at top left Screen 3: Back button at top left

Spot the Error

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

Question 1

A Home: Next is blue, round

B Quiz: Next is blue, round

C Score: Next is red, square

Question 2

A Home: menu at top left

B Quiz: menu at bottom right

C Score: menu at top left

Question 3

A Style: all buttons are blue

B Home: Play button is blue

C Quiz: Submit button is green

Question 4

A Rule: Back is top left

B Quiz: Back is top left

C Score: Back is top left

D Help: Back is top right

Question 5

A Rule: buttons are 40px tall

B Home: Play is 40px tall

C Quiz: Submit is 40px tall

D Score: Replay is 80px tall

Answer Key

Consistency in an interface

Section A: Quick Questions

A — Every screen has a blue Next button with rounded corners

B — In the same place at the top of every screen

A — False. Similar things look and work the same, but the content can change

B — The navigation position is not consistent

A — They learn how it works once and can use every screen

Section B: Match the Pairs

consistency → Similar things look and work the same way on every screen, so users always know what to do.

Home button: top left on every screen → Keeping navigation in the same position so users can always find it.

Same button style: every Next button is blue, rounded and says 'Next' → Screen 1: [Next] blue, rounded | Screen 2: [Next] blue, rounded

Same position for navigation: the menu bar stays at the top of every screen → Screen 1: Menu at top | Screen 2: Menu at top | Screen 3: Menu at top

Screen 1: [Next] blue, rounded | Screen 2: [Go] red, square → The same kind of button looks different on each screen, which is not consistent. Fix it by giving both the same colour, shape and label.

Screen 1: Menu at top | Screen 2: Menu at bottom | Screen 3: Menu on right → The menu moves to a different place on each screen, so users have to search for it. Fix it by keeping the menu at the top of every screen.

Section C: Definitions

consistency — Consistency means similar things look and work the same way on every screen, like buttons with the same style and a menu in the same place, so users always know what to do.

Section D: Fill in the Blanks

Home screen: Next button colour = blue
Quiz screen: Next button colour = blue

Home screen: Menu bar at top
Games screen: Menu bar at top

Same menu place on every screen = consistent

Home: Play button = green, rounded
Level: Play button = green, rounded

Screen 1: Back button at top left
Screen 2: Back button at top left
Screen 3: Back button at top left

Section E: Spot the Error

C — The Next button looks different on the Score screen. For consistency it should be blue and round like the other screens, so users recognise it.

B — The menu on the Quiz screen is in a different place. It should be at the top left, the same as on every other screen.

C — The style rule says all buttons are blue. A green Submit button breaks consistency, so it should be blue.

D — The Back button on the Help screen has moved to the top right. It should be at the top left like on all the other screens.

D — The Replay button is a different size from the other buttons. It should be 40px tall so all buttons look the same.