← Course home N5 Computing Science  ·  James Gillespie's
WDD  ·  Web Design & Development

Analysis and Site Structure

Lesson 1 of 13 Approx 60 min
Learning intentions
  • Understand what end-user requirements are and why they matter when designing a website
  • Understand what functional requirements are and how they differ from end-user requirements
  • Know the two types of site structure (linear and hierarchical) and be able to describe and draw each one
Success criteria
  • I can identify the end-user requirements of a website from a given scenario (age group, skill level, accessibility needs, access device)
  • I can state the functional requirements of a National 5 website (multiple pages, CSS, hyperlinks, images, audio, video)
  • I can describe and draw a linear and hierarchical site structure diagram, including arrows showing the direction of each link and external links shown differently from internal pages
Warm up — what do you already know?

Answer before the lesson begins. These check prior knowledge — it's fine if you're unsure.

1. Which of the following best describes the "end users" of a website?

2. In a site structure diagram, what do the arrows show?

3. A link on a website takes you to a page on a completely different website (e.g. from a school site to BBC News). What is this type of link called?

Key vocabulary

end user
Anyone who will use the finished website. Identified during analysis before any design or coding begins.
end-user requirements
The needs and expectations of the people who will use the website — including age group, skill level, accessibility needs, and access device.
functional requirements
What the website must do — the features it must include, such as multiple pages, CSS styling, hyperlinks, images, audio, and video.
site structure
The way pages in a website are organised and linked together. Shown as a diagram before development begins.
linear
A site structure where pages are linked in a fixed sequence — like chapters in a book. Page 1 → Page 2 → Page 3.
hierarchical
A site structure where the home page sits at the top and links down to sub-pages. Sub-pages link back up to the home page. The SQA uses "hierarchical" for any non-sequential, branching site structure.
internal link
A hyperlink to another page within the same website (same domain). Shown in blue/white boxes in site structure diagrams.
external link
A hyperlink to a page on a completely different website. Shown in a different colour (often green) in site structure diagrams.

Analysis and Site Structure

Why analysis comes first

Before writing a single line of code, a good web developer asks two key questions: who will use this site, and what must it do? This stage is called analysis. Skipping it is the most common reason websites end up confusing, inaccessible, or missing important features. The SQA assessment for WDD begins with analysis questions — so it is also worth marks.

End-user requirements

The end users of a website are anyone who will use it — not the developers. When analysing a website, you identify four key things about those users:

  • Age group. The four categories used in computing are: children (0–12), youths (13–24), adults (25–64), and seniors (65+). Age affects font size, language complexity, and the kind of content to include. A site for children needs simple words and large buttons; a site for senior users may need larger text and high contrast.
  • Skill level. Users range from beginner/novice through intermediate and experienced to expert/master. A novice-friendly site needs clear navigation and step-by-step instructions; an expert site can assume technical knowledge.
  • Accessibility needs. Some users rely on assistive technologies. Users with sight impairments may use screen reader software, high-contrast displays, or eye-tracking software. Users with hearing impairments may need subtitles on videos. Users with physical impairments might use voice recognition or switches instead of a mouse. Good websites are designed to work with these tools.
  • Access device. How will users view the site? Options include computer (desktop/laptop), tablet, smartphone, or games console/internet-enabled television. A site designed only for a large desktop screen may be unusable on a smartphone.

These findings are recorded in an end-user requirements table — a grid showing the site name, target age group, skill level(s), user requirements, and the tasks users perform most often.

Functional requirements

The functional requirements describe what the website must actually do. They list the features that must be built — not who is using the site, but what the site must contain or be able to do. At National 5, websites are expected to include:

  • Multiple pages
  • Pages divided into clear sections
  • CSS styling (inline styles and/or stylesheets)
  • Hyperlinks to internal pages (within the same site) and external pages (other websites)
  • Images
  • Audio files
  • Video files

A common exam mistake is to confuse end-user requirements with functional requirements. Remember: end-user requirements describe who the site is for; functional requirements describe what it must do.

Site structures

Once you know who the site is for and what it must contain, you plan how the pages are connected. This is the site structure, and it is drawn as a diagram before any HTML is written. The N5 spec names two types of structure: linear and hierarchical.

Linear structure. Pages are linked in a fixed sequence, one after another — Home → Pg 2 → Pg 3 → Pg 4. Users must move forward or backward through the sequence. This structure is simple but inflexible: users cannot jump straight to the page they want. It suits tutorials or step-by-step guides where order matters, but is rarely used for full websites.

Hierarchical structure. The home page sits at the top of the structure and links down to a set of sub-pages. Those sub-pages each link back up to the home page. Users can navigate directly between the home page and any sub-page — no fixed sequence required. This is the most common structure for websites. A hierarchical site can have one level of sub-pages or multiple levels (sub-pages beneath sub-pages); the SQA calls both "hierarchical".

The SQA's own example in Appendix 9 of the N5 spec shows a hierarchical website for ScotsWaterSport: the Home Page links down to four specialist pages (Kayaking, Surfing, Rafting, Sailing), each of which links back up to the Home Page. There is also an external link from the Home Page to the VisitScotland website. This is the canonical example — learn it and you can answer any site structure question.

In site structure diagrams, arrows show the direction of the hyperlinks — which page links to which. If two pages link to each other, arrows point in both directions. External links (to a completely different website) must be shown differently from internal pages — a different colour, box shape, or clear label — because they take users away from your site entirely.

Home Pg 2 Pg 3 Pg 4 Linear Home Page VisitScotland (external link) Kayaking Surfing Rafting Sailing Hierarchical

The two N5 site structures. The hierarchical example is taken directly from the SQA's Appendix 9 (ScotsWaterSport). Double-headed arrows show links going in both directions; the green box is an external link (one-way, from Home Page only).

Worked examples

Example 1 — Completing an end-user requirements table

Scenario: "A new website is being created for Meadowview Leisure Centre. It will help local families find out about swimming lessons, gym membership, and class timetables. Most visitors will use the site on their smartphones."

1
Site name: Meadowview Leisure Centre
2
Target age group: Adults (25–64) booking on behalf of families; some youths (13–24) using the gym independently
3
Skill level: Beginner to intermediate — a range of abilities expected from local community members
4
User requirements: Easy to navigate; clear timetable information; accessible on smartphones; large readable text
5
Tasks the user performs: Search for class times; find membership prices; contact the centre
Example 2 — Identifying the structure type from a description

Scenario: "A pet shop website has a homepage, a Dogs page, a Cats page, a Fish page, and a link to the RSPCA website."

1
Count the pages: 1 homepage + 3 content pages (Dogs, Cats, Fish) + 1 external link (RSPCA).
2
Identify the pattern: the homepage links to all three content pages; each content page links back to the homepage. Pages are not in a fixed sequence.
3
Name the structure: this is a hierarchical structure — the homepage sits at the top, sub-pages sit below it, and links go both ways between them.
4
Note the external link: the RSPCA link goes to a different domain, so it must be shown differently in the diagram (e.g. a differently-coloured or labelled box). The arrow is one-way — from homepage to RSPCA only.
Example 3 — Drawing a hierarchical structure with multiple levels

Scenario: "A school website has a Homepage. From the Homepage, pupils can go to a Departments page or a News page. From Departments, there are separate sub-pages for Maths, English, and Science."

1
Top level: Homepage sits at the very top of the diagram.
2
Second level: Departments and News both connect directly to the Homepage — draw them below it with two-way arrows.
3
Third level: Maths, English, and Science connect below the Departments page — draw them one level lower with two-way arrows to/from Departments.
4
Name the structure: this is a hierarchical structure. The N5 spec uses "hierarchical" whether a site has one level of sub-pages or several — both are hierarchical.
Now you try

Scenario: "A local cinema called Cineburgh is building a new website. It will be used mainly by local adults and families to find film listings, book tickets, and read about the cinema's history. Most users will access the site on a smartphone. The site will have a Homepage, a Film Listings page, a Booking page, an About Us page, and a link to the BBFC website (the official film ratings board at bbfc.co.uk)."

Answer the following:

  1. Complete an end-user requirements table for the Cineburgh website. Include: site name, target age group, skill level(s), at least two user requirements, and the tasks users perform.
  2. Identify the most appropriate site structure for this website. Justify your answer.
  3. Is the BBFC link an internal or external link? Explain your answer.
  1. End-user requirements table: Site name: Cineburgh | Target age group: Adults (25–64) and Youths (13–24) | Skill level: Beginner to intermediate | User requirements: Easy to navigate on a smartphone; clear readable film listings; quick booking process; accessible to users with disabilities | Tasks: Find current film listings; book tickets; read cinema history
  2. Hierarchical is most appropriate. The Homepage sits at the top and links down to Film Listings, Booking, and About Us; those pages each link back up to the Homepage. The BBFC link is external (one-way, shown in a different colour). There is no fixed sequence, so linear is not suitable.
  3. External link. The BBFC website is at bbfc.co.uk, which is a different domain from Cineburgh's website. A link that leaves the current site and goes to a completely different website is called an external link. It should be shown in a different colour in the site structure diagram.
Common mistakes
✕
Confusing end-user requirements with functional requirements. End-user requirements describe who the site is for (age group, skill level, accessibility, device). Functional requirements describe what it must do (pages, CSS, images, links). These are two different things — mixing them up loses marks in the exam.
✕
Using "hub and spoke" or "tree" in the exam. These terms do not appear in the N5 spec. The SQA only recognises two structure types: linear and hierarchical. Writing "hub and spoke" or "tree" will not gain the mark — always use "hierarchical".
✕
Not showing external links differently in the diagram. External links must be clearly distinguished from internal pages — different colour, label, or shape. Leaving them the same as internal pages suggests you don't know the difference, which loses marks.
✕
Only mentioning age group when identifying end-user requirements. Age group alone is worth 1 mark. For full marks, also consider skill level, accessibility needs, and access device. All four are part of the end-user requirements at National 5.
Exam tip

SQA questions often use the command words "identify" or "describe" for end-user requirements. These are different and worth different marks:

  • Identify (1 mark): Just name it. "The target age group is adults (25–64)."
  • Describe (2 marks): Name it AND explain what it means in context. "The target age group is adults (25–64), so the site should use clear, professional language and be accessible on a range of devices including smartphones."

When drawing a site structure diagram, always label your pages clearly, include arrows to show the direction of links, and use a different colour or label for any external links.

Task Set

Questions 1–5 are auto-checked. Questions 6–10 are self-marked — write your answer, then reveal the model answer to check your work. Questions 8 and 9 ask you to draw a diagram: create it on paper or in draw.io, then upload or paste it below.

For diagram questions (Q8, Q9): create your diagram in draw.io, then either (a) click Upload to select the saved PNG, or (b) in draw.io use Edit → Copy as Image, then click Paste from clipboard. Your diagram will appear inline and be included when you export your answers.

1. Which of the following is an example of an end-user requirement (not a functional requirement)? TYPE 1

2. A website is being designed for elderly users who may have sight impairments. Which accessibility consideration is most relevant? TYPE 1

3. Which statement correctly describes "functional requirements"? TYPE 1

4. A music website has a homepage that links to Rock, Pop, Classical, and Jazz pages. Each genre page links back to the homepage but not to each other. What site structure is this? TYPE 1

5. In a site structure diagram, how should an external link be shown, compared to an internal page? TYPE 1

6. A developer is building a website for a local primary school (ages 5–11). Identify two end-user requirements the developer should consider when designing the site. (2 marks) TYPE 2

Any two of the following (1 mark each):

• Age group: The target users are children (0–12), so content and language must be simple and age-appropriate.
• Skill level: Children are likely to be beginner/novice users, so the site must be very easy to navigate with clear buttons and simple menus.
• Accessibility needs: Some children may have additional support needs, so the site should use large, clear text and high contrast colours, and support assistive technologies.
• Access device: Primary school pupils often use shared desktop computers or tablets, so the site must work well on both screen sizes.

7. Explain the difference between a linear site structure and a hierarchical site structure. (2 marks) TYPE 2

In a linear structure, pages are linked in a fixed sequence — users must move forward or backward one page at a time (e.g. Page 1 → Page 2 → Page 3). Users cannot jump directly to any page they want.

In a hierarchical structure, the home page sits at the top and links down to sub-pages. Those sub-pages link back up to the home page. Users can navigate to any sub-page directly from the home page, without following a fixed sequence.

8. A recipe website is being planned with the following pages: a Homepage, a Starters page, a Main Courses page, a Desserts page, and a link to the BBC Good Food website. Draw a site structure diagram for this website. Clearly show which link is external. TYPE 2

Hierarchical structure:

• Homepage sits at the top
• Three internal sub-pages below it: Starters, Main Courses, Desserts (shown in blue/white boxes, with two-way arrows to/from the Homepage)
• One external link: BBC Good Food (shown in a different colour — e.g. green — with a one-way arrow FROM the Homepage only, since BBC Good Food is on a different website)

All internal arrows should show two-way links between Homepage and each internal page. The external arrow points one way only.

9. A large sports club website has a Homepage. From the Homepage, users can visit a Teams page, a Fixtures page, and a Contact page. The Teams page also has sub-pages for Under-14s, Under-16s, and Under-18s. Draw a site structure diagram for this website and name the type of structure used. TYPE 2

Hierarchical structure.

Level 1: Homepage (top)
Level 2: Teams, Fixtures, Contact — draw below Homepage with two-way arrows
Level 3: Under-14s, Under-16s, Under-18s — draw below the Teams page with two-way arrows to/from Teams

The structure is hierarchical because the home page sits at the top and pages are organised in levels below it. The N5 spec uses "hierarchical" whether there is one level of sub-pages or several.

10. "The functional requirements of a website describe who will use it." Is this statement true or false? Explain your answer. (2 marks) TYPE 2

False. Functional requirements describe what the website must do — the features it must include, such as multiple pages, CSS styling, hyperlinks, images, audio, and video files.

It is the end-user requirements that describe who will use the site — including the target age group, skill level, accessibility needs, and the devices they will use to access the site.
Teacher notes — Shift+T to hide

Suggested timing: 60 minutes. Warm up 5 min; notes walkthrough 15 min; worked examples 10 min; now you try 10 min; task set 20 min.

Key misconception to address early: Pupils consistently confuse end-user requirements with functional requirements. Reinforce: end-user = WHO (person), functional = WHAT (feature). Use a two-column board comparison early in the lesson.

Spec alignment — critical: The N5 spec (Appendix 9) only names two structure types: linear and hierarchical. The terms "hub and spoke" and "tree" do not appear in the spec and will not gain marks in the exam. Pupils who have encountered these terms elsewhere (Scholar, BBC Bitesize, older resources) need to unlearn them. Reinforce: always write "hierarchical".

The SQA canonical example: The ScotsWaterSport example in Appendix 9 is worth teaching explicitly — pupils may see it referenced in marking instructions. Homepage → Kayaking / Surfing / Rafting / Sailing (bidirectional arrows) + VisitScotland external link (one-way arrow, shown differently). The SVG diagram in this lesson replicates that example.

Diagram questions (Q8 and Q9): Pupils without draw.io access can draw by hand and photograph. The diagram upload widget accepts PNG and JPG. For Q9, emphasise that "hierarchical" is the correct answer regardless of how many levels the site has — the spec does not ask pupils to distinguish between one-level and multi-level hierarchical structures.

Extension: Ask pupils to design an end-user requirements table AND a hierarchical site structure diagram for a website of their own choice. Discuss whether the structure suits the content and audience.

SQA command words covered: "identify" (1 mark, name it), "describe" (2 marks, name + explain in context), "explain" (must include WHY). Q5 and Q10 are closest to SQA exam style for this topic.