← 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 scenario-specific end-user requirements — the tasks users expect to complete on a website
  • I can explain how audience characteristics (such as age, skill, accessibility needs, and device) feed into suitable functional requirements and design decisions
  • 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 scenario-specific tasks that users need or expect to complete on the website, such as finding information, booking a service, or contacting an organisation.
functional requirements
The features and functions the website must provide so users can complete their tasks, such as linked pages, 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.
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 analyses the audience, the tasks those users need to complete, and the website functions that will support those tasks. Skipping this stage 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 the people who will use it — not the developers. Their end-user requirements are the specific tasks they need or expect to carry out on that particular site. For example, users of a cinema website may need to find film times, book tickets, and read accessibility information. Users of a school website may need to view event dates, download letters, or contact the school office.

These requirements must come from the scenario. Write each one as a user task: "The user needs to…" or "The user expects to be able to…". A vague statement such as "the users are adults" describes the audience; it does not state what those users need to do on the website.

Audience characteristics and design considerations

You should also analyse characteristics of the target audience. These are not themselves end-user requirements, but they help the developer choose appropriate functional requirements and design decisions:

  • 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.

For example, if users need to book cinema tickets on smartphones, the user task is the end-user requirement. A mobile-friendly booking page with clear controls is a resulting functional requirement and design decision. A useful analysis table keeps audience characteristics, end-user tasks, and the functional requirements that support them in separate columns.

Functional requirements

The functional requirements describe the website features and functions that must be built so users can complete their tasks. At National 5, the implementation is a home page plus a maximum of four linked multimedia pages. Within that scope, websites are expected to include:

  • A home page and up to four linked multimedia 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

Keep the three parts distinct: WHO describes the audience and its characteristics; WHAT users need to do gives the end-user requirements; HOW the site will let them do it gives the functional requirements and design decisions.

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. Linear and hierarchical are the expected, commonly used structure terms at National 5.

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'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. When naming a structure, use the term that matches the pattern shown in the 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 — Turning user tasks into website requirements

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
Audience characteristics: Local adults and families with a range of skill levels; most will access the site on smartphones
3
End-user requirements: Users need to find swimming-lesson times, compare gym membership options, view class timetables, and contact the centre
4
Functional requirements: Linked pages must present lesson, membership, timetable, and contact information; navigation must let users reach each task clearly
5
Design considerations: Use a responsive layout, readable text, and controls that work well on smartphone screens
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 pattern is hierarchical because pages branch into levels beneath the Homepage.
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. Identify the audience characteristics, three scenario-specific end-user requirements, and two functional requirements for the Cineburgh website.
  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. Audience characteristics: Mainly local adults and families, using smartphones, with a range of skill levels and possible accessibility needs. End-user requirements: users need to find current film listings, book tickets, and read the cinema's history. Functional requirements: provide a clear Film Listings page and a smartphone-friendly ticket-booking function.
  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 are the scenario-specific tasks users need to complete. Functional requirements are the features the site must provide to support those tasks. Audience age, skill, accessibility needs, and device inform the design, but are not the definition of end-user requirements.
✕
Using a structure label without checking the pattern. Linear and hierarchical are the expected, commonly used terms at National 5. Other resources may use labels such as "hub and spoke" or "tree"; in an assessment, use the term that matches the structure shown and the wording of the question.
✕
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.
✕
Giving an audience characteristic instead of a user task. "The users are adults" describes the audience, not an end-user requirement. Use the scenario to state what users need to do, such as finding opening times, booking a service, or contacting the organisation.
Exam tip

Take end-user requirements directly from the scenario and write them as user tasks:

  • End-user requirement: "Users need to find current film times."
  • Functional requirement: "The site must provide a Film Listings page showing current films and times."

Audience characteristics such as age, skill level, accessibility needs, and device can justify the functional requirements and design decisions you choose, but do not substitute them for the user's task.

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. A cinema website is being planned. Which option is an end-user 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 local primary school website will let families read school news, view event dates, download letters, and contact the school office. Identify two end-user requirements from this scenario. (2 marks) TYPE 2

Any two scenario-specific user tasks (1 mark each):

• Users need to read the latest school news.
• Users need to view dates for school events.
• Users need to download school letters.
• Users need to find contact details for the school office.

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 sports club website will have a Homepage linked to four multimedia pages: Teams, Fixtures, Gallery, and Contact. Draw a site structure diagram for this website and name the type of structure used. TYPE 2

Hierarchical structure.

Homepage sits at the top.
Teams, Fixtures, Gallery, and Contact sit below it, each connected to the Homepage with two-way arrows.

The structure is hierarchical because the Homepage links directly to the four pages beneath it. It stays within the National 5 implementation scope of a home page plus a maximum of four linked multimedia pages.

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.

End-user requirements describe the scenario-specific tasks users need to complete, such as finding information, booking a service, or making contact. The target age group, skill level, accessibility needs, and access devices are audience characteristics that inform suitable features and design decisions.
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 may confuse audience characteristics, end-user requirements, and functional requirements. Reinforce: WHO = audience characteristics; WHAT users need to do = end-user requirements; HOW the website supports those tasks = functional requirements and design decisions. Use a three-column board comparison early in the lesson.

Structure terminology: Linear and hierarchical are the expected, commonly used terms at National 5. Other resources may use "hub and spoke" or "tree". Advise pupils to use the term that matches the structure given and the wording of the assessment question.

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. Q9 reinforces the National 5 scope of a home page plus a maximum of four linked multimedia pages.

Extension: Ask pupils to identify scenario-specific user tasks and draw a hierarchical site structure diagram for a website of their own choice. Discuss how the site's functional requirements support those tasks and suit the 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.