Schematic diagram of an interface

Tip: Choose Save as PDF in the print dialog to download. Use A4 paper size.

Schematic diagram of an interface

Name:
Date:
Class:
A

Quick Questions

Shade in the A or B circle for each question.

1. Which best describes a schematic diagram of an interface?
A Labelled symbols and arrows showing the main parts and how they connect
B A detailed, full-colour picture of exactly how each screen looks
2. In a schematic diagram, what is the job of a labelled arrow?
A It shows how one component or screen links to another
B It shows the font size used on a screen
3. A student draws a box labelled 'Login' with an arrow labelled 'valid details' to a box labelled 'Home'. What does this show?
A The exact colours and button shapes on the Login screen
B A screen relationship: Login leads to Home when details are valid
4. Which belongs in a schematic diagram of a school canteen app?
A Pixel-perfect icons, photos of food and exact button colours
B Boxes for Menu, Cart and Payment joined by labelled arrows
5. Why might a designer leave out screen detail in a schematic diagram?
A To keep the focus on the main parts and how they connect
B Because schematic diagrams are only drawn after the app is finished
B

Match the Pairs

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

Left columnRight column
1[Login] --> [Home] AToo much screen detail is included. A schematic diagram uses simple labelled symbols, not colours, fonts or exact positions.
2[Home] --> [Settings] --> [Profile] BThere are no arrows, so the diagram does not show how the screens connect to each other.
3A schematic diagram uses a labelled symbol, such as a box, for each main part of the interface CA chain of linked screens showing the path from Home to Settings and then to Profile
4A labelled arrow shows how two screens connect and what action links them D[Search Bar] [Results List] [Menu]
5[Home: logo top left, blue button, 14pt font] --> [Menu] E[Cart] --(tap Pay)--> [Payment]
6[Login] [Home] [Settings] FA labelled arrow showing that the Login screen links to the Home screen
C

Definitions

schematic diagram
D

Fill in the Blanks

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

1.
[Login] ___ [Home]
2.
# Login leads to Home [Login] --> [____]
3.
# Settings and Home link both ways [Settings] ____ [Home]
4.
# A schematic uses ______ to show links
5.
# Cart screen leads to Checkout [____] --> [Checkout]
E

Spot the Error

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

Question 1
A [Login] --> [Home]
B [Home] --tap Cart--> [Cart]
C [Cart] --pay--> [Receipt]
Question 2
A Schematic: Music app
B [Library] --play-- [Player]
C [Player] --back--> [Library]
Question 3
A [Login 14pt] --OK--> [Home]
B [Home] --open--> [Profile]
C [Profile] --back--> [Home]
Question 4
A [Cart] --checkout--> [Pay]
B [Receipt] --confirm--> [Pay]
C [Receipt] --done--> [Home]
Question 5
A Key: [ ] screen, ( ) database
B (Orders) --save--> (Database)
C (Database) --load--> [Report]

Answer Key

Schematic diagram of an interface
Section A: Quick Questions
Q1
A — Labelled symbols and arrows showing the main parts and how they connect
Q2
A — It shows how one component or screen links to another
Q3
B — A screen relationship: Login leads to Home when details are valid
Q4
B — Boxes for Menu, Cart and Payment joined by labelled arrows
Q5
A — To keep the focus on the main parts and how they connect
Section B: Match the Pairs
Q1
[Login] --> [Home] → A labelled arrow showing that the Login screen links to the Home screen
Q2
[Home] --> [Settings] --> [Profile] → A chain of linked screens showing the path from Home to Settings and then to Profile
Q3
A schematic diagram uses a labelled symbol, such as a box, for each main part of the interface → [Search Bar] [Results List] [Menu]
Q4
A labelled arrow shows how two screens connect and what action links them → [Cart] --(tap Pay)--> [Payment]
Q5
[Home: logo top left, blue button, 14pt font] --> [Menu] → Too much screen detail is included. A schematic diagram uses simple labelled symbols, not colours, fonts or exact positions.
Q6
[Login] [Home] [Settings] → There are no arrows, so the diagram does not show how the screens connect to each other.
Section C: Definitions
Q1
schematic diagram — A diagram that uses labelled symbols and arrows to show an interface's main parts and how they connect, without showing screen detail.
Section D: Fill in the Blanks
Q1
[Login] --> [Home]
Q2
# Login leads to Home [Login] --> [Home]
Q3
# Settings and Home link both ways [Settings] <--> [Home]
Q4
# A schematic uses arrows to show links
Q5
# Cart screen leads to Checkout [Cart] --> [Checkout]
Section E: Spot the Error
Q1
A — The arrow has no label. A schematic diagram uses labelled arrows to show what causes the move between parts. It should be something like [Login] --success--> [Home].
Q2
B — The link has no arrowhead, so the direction of the connection is unclear. It should end in -->, as in [Library] --play--> [Player].
Q3
A — A schematic diagram shows the main parts without screen detail. Font size does not belong here. The component should just be [Login].
Q4
B — The arrow points the wrong way. The user confirms on the Pay screen and then arrives at Receipt. It should be [Pay] --confirm--> [Receipt].
Q5
B — Orders is a screen, so by the key it needs square brackets. Round brackets are for the database. It should be [Orders] --save--> (Database).