Commit 164a60

2026-06-08 12:52:26 lisa: C05: add Design Principles and UX Characteristics deep-dive pages - Design Principles: the 7 VCAA principles, demo video (Art Heroes) + map-to-VCAA activity - UX Characteristics: the 4 characteristics (affordance/interoperability/security/usability) with 8 videos, Security 'in short' summary + telehealth, old-TV-Netflix interoperability example, passkeys/CAPTCHA/biometrics UX comparison, ketchup usability example - Linked both into home index (C5-2) and cross-linked the existing 'vs' page Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

sd/C05/C05-home.md ..
@@ 20,6 20,8 @@
	## C5-2 — Design principles & UX
	- [Design Principles vs UX Characteristics](/sd/C05/Design%20Principles%20vs%20UX%20Characteristics) — why these are two separate lists, why usability appearing in both is a trap, and what the slot-five validation is actually checking
+	- [Design Principles](/sd/C05/Design%20Principles) — the seven VCAA design principles, with a demonstration video and a map-it-to-VCAA activity
+	- [UX Characteristics](/sd/C05/UX%20Characteristics) — the four UX characteristics (affordance, interoperability, security, usability), each with videos and worked examples
	- [The Annotation Verb Ladder](/sd/C05/The%20Annotation%20Verb%20Ladder) — climbing Identify → Describe → Document → Explain so your design-log notes don't stall at "identify" in the no-AI Annotation validation
	## Templates and scaffolds
sd/C05/Design Principles vs UX Characteristics.md ..
@@ 80,6 80,8 @@
	## See also
+	- [Design Principles](/sd/C05/Design%20Principles) — deep dive on the seven design principles, with a demonstration video
+	- [UX Characteristics](/sd/C05/UX%20Characteristics) — deep dive on the four UX characteristics
	- [Isaac Computer Science — Design Principles (GCSE)](https://isaaccomputerscience.org/concepts/gcse_design_principles) — clear breakdown of individual design principles with self-test questions; UK origin, terminology maps directly to VCE
	- C05 Resources: [external reading and resources](/sd/Resources/C05-Resources)
/dev/null .. sd/C05/Design Principles.md
@@ 0,0 1,131 @@
+	> **DRAFT** — under teacher review.
+
+	# Design Principles
+
+	The Hamilton and Alexandra College · Year 12 · 2026
+
+	The VCAA study design lists **seven design principles** that influence both the appearance and functionality of a software solution. You need to know all seven by name, understand what each one does, and be able to show where you applied them in your mock-ups and design log.
+
+	> [!TIP]
+	> Design principles are not decoration. Each one must connect to a concrete visual or structural decision in your interface — that's what the annotation rubric is testing.
+
+	---
+
+	## The seven principles at a glance
+
+	| Principle | What it is | What it improves |
+	|---|---|---|
+	| Alignment | How elements are positioned relative to each other and the page | Clarity and readability |
+	| Balance | The distribution of visual weight across the interface — symmetrical or asymmetrical | Attractiveness and usability |
+	| Contrast | The difference between elements that makes them stand out from each other | Accessibility and readability |
+	| Space (white space) | The empty areas between and around elements | Clarity, readability, and cognitive load |
+	| Text formatting | How text appears and is structured — fonts, hierarchy, weight, line spacing | Readability and accessibility |
+	| Usability | Interface choices that make software easy to operate: consistency, feedback, error prevention, recognition over recall, universal design | Ease of use and error reduction |
+	| Navigation | How users move through the software — menu structure, breadcrumbs, search, consistent placement | Efficiency and usability |
+
+	---
+
+	## How to apply each principle
+
+	**Alignment**
+
+	- Line up elements to a shared grid or edge — left-aligned text feels structured and is easier to scan than centred paragraphs.
+	- Group related elements so the eye reads them together.
+
+	**Balance**
+
+	- Symmetrical layouts feel formal and stable; asymmetrical layouts can feel dynamic but need careful visual weight management.
+	- Avoid clustering all your heavy content (large images, bold text) on one side of the screen.
+
+	**Contrast**
+
+	- Use dark text on a light background (or vice versa) — this is the single most important accessibility move.
+	- Use a bright, high-contrast colour for call-to-action buttons so users instantly know what to click.
+
+	**Space (white space)**
+
+	- Add generous margins and padding around every content block — cramped interfaces feel harder to use than they are.
+	- Increase line spacing (line height) in body text to about 1.5× the font size.
+
+	**Text formatting**
+
+	- Use a sans-serif typeface (e.g. Roboto, Open Sans, Inter) for on-screen body text.
+	- Establish a clear heading hierarchy — H1 for the page title, H2 for sections, H3 for sub-sections — and never skip levels.
+
+	**Usability**
+
+	- Keep interactive elements consistent: if the primary button is blue on page one, it must be blue everywhere.
+	- Provide visible feedback for every user action (loading spinner, success message, error highlight).
+
+	**Navigation**
+
+	- Place your main navigation menu in the same position on every screen.
+	- For multi-screen software, include a breadcrumb trail or a clearly labelled back button so users always know where they are.
+
+	---
+
+	## 🎬 Watch — the principles in action
+
+	**🎯 Watch for:** balance, contrast, alignment, and space are all shown visually in this video — these four are in the VCAA list. The video does NOT show text formatting, usability, or navigation because it is a graphic/art design montage rather than a software interface walkthrough.
+
+	{{Video|src=https://www.youtube.com/watch?v=ZK86XQ1iFVs}}
+
+	> [!NOTE]
+	> This is a general graphic and art design video — it uses the broader "principles of design" canon taught in visual arts and graphic design. Some principles it shows are **not** on the VCAA Software Development list, and three VCAA principles are **not** covered because they are software-specific. Your job in the activity below is to map what you see onto the VCAA seven.
+
+	---
+
+	## Check Your Understanding
+
+	**Question 1 — Video mapping activity**
+
+	Watch the video above, then answer: which principles shown are included in the VCAA study design, and which are not?
+
+	>| ### Answer
+	>| **Overlap — shown in the video AND on the VCAA list:**
+	>| - Balance, Contrast, Alignment, Space (white space)
+	>|
+	>| **In the video but NOT on the VCAA list** (art/graphic-design canon):
+	>| - Emphasis, Movement, Repetition/Pattern, Proportion/Scale, Unity/Harmony, Rhythm
+	>|
+	>| **On the VCAA list but NOT covered by this video** (software-specific):
+	>| - Text formatting, Usability, Navigation
+	>|
+	>| So: four principles overlap; the art video adds several extras; VCAA adds three software-specific ones the video skips entirely.
+
+	---
+
+	**Question 2 — Recall**
+
+	Name all seven VCAA design principles from memory (close this page first, then check).
+
+	>| ### Answer
+	>| 1. Alignment
+	>| 2. Balance
+	>| 3. Contrast
+	>| 4. Space (white space)
+	>| 5. Text formatting
+	>| 6. Usability
+	>| 7. Navigation
+
+	---
+
+	**Question 3 — Accessibility focus**
+
+	Which VCAA design principle most directly supports accessibility for a user with low vision, and how would you apply it?
+
+	>| ### Answer
+	>| **Contrast** — a user with low vision relies on a strong difference between text colour and background colour to read content. The practical move is dark text on a light background (or light text on a very dark background). High-contrast call-to-action buttons also help users with colour perception difficulties identify interactive elements at a glance.
+
+	---
+
+	## See also
+
+	- [Design Principles vs UX Characteristics](/sd/C05/Design%20Principles%20vs%20UX%20Characteristics) — design principles vs the 4 UX characteristics
+	- [UX Characteristics](/sd/C05/UX%20Characteristics)
+	- [The Annotation Verb Ladder](/sd/C05/The%20Annotation%20Verb%20Ladder) — how to annotate where you applied these
+	- [C05 Resources](/sd/Resources/C05-Resources)
+
+	---
+
+	← Back to [C05 Home](/sd/C05/C05-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)
/dev/null .. sd/C05/UX Characteristics.md
@@ 0,0 1,157 @@
+	> **DRAFT** — under teacher review.
+
+	# UX Characteristics
+
+	The Hamilton and Alexandra College · Year 12 · 2026
+
+	The study design names four UX characteristics that shape the overall experience of using a software product: **affordance, interoperability, security,** and **usability.**
+
+	These are a separate framework from the seven design principles — if you are unsure which list is which, or why usability appears in both, read [Design Principles vs UX Characteristics](/sd/C05/Design%20Principles%20vs%20UX%20Characteristics) before continuing.
+
+	---
+
+	## Affordance
+
+	**Affordance** is the visual clue that tells a user how they can interact with an element — making the interface self-explanatory without needing instructions. When affordance is done well, users just *know* what to click, tap or type in. It directly improves usability by reducing the learning curve.
+
+	**How to apply it to your SAT:**
+
+	- Buttons look clickable — raised appearance, drop shadow, or a colour change on hover.
+	- Links are visually distinct — underlined and/or a different colour from body text.
+	- Form fields show clearly where to type — visible borders, placeholder text, a focus highlight.
+	- Icons use universally recognised symbols rather than invented ones (a house icon for Home, a magnifying glass for Search).
+	- Interactive elements change appearance when a user acts on them (hover, press, disabled states).
+
+	**🎯 Watch for:** the visual signals that silently say "you can click or tap this" — and notice how quickly you understand what to do even on an unfamiliar screen.
+
+	{{Video|src=https://www.youtube.com/watch?v=POuSiTrlSuw}}
+
+	---
+
+	## Interoperability
+
+	**Interoperability** is the ability of a software system to work seamlessly with other systems, applications and devices. It supports efficiency by letting your product fit into the workflows users already have, rather than forcing them to change everything around your app.
+
+	**How to apply it to your SAT:**
+
+	- Design for cross-platform use — Windows, macOS, tablet and phone where practical.
+	- Export and import data in standard formats: CSV (spreadsheets), JSON (web data), PDF (documents), iCal (calendars).
+	- Integrate with systems your users already rely on — Compass, Google Classroom, school email.
+	- Save and open files in formats that other programs can read, not just your own proprietary format.
+
+	**🎯 Watch for:** the central idea that systems need to agree on shared standards so they can exchange data — think of it as systems speaking a common language.
+
+	{{Video|src=https://www.youtube.com/watch?v=g-CzHHJ0ZTM}}
+
+	> [!NOTE]
+	> This video covers the EU's interoperability framework — it is high-level and government-focused. Do not get lost in the EU-specific detail; focus on the underlying concept: systems that share agreed standards can exchange data without either system needing to be rebuilt.
+
+	> [!TIP]
+	> **Worked example — how does an old TV watch Netflix?**
+	>
+	> An old television has no Netflix app and cannot talk to streaming services on its own. Plug a small streaming device (Chromecast, Apple TV, Fire Stick) into the HDMI port: that device runs Netflix and "speaks" both the TV's HDMI input standard and Netflix's internet protocols, bridging the two systems.
+	>
+	> That is interoperability — a small adapter lets an old system work with a modern service because they share agreed standards (HDMI, internet protocols).
+	>
+	> The software parallel: if your SAT app exports the timetable as an iCal file, students can open it straight in Google Calendar. Neither app needs to be rebuilt — they just agree on the iCal standard.
+
+	---
+
+	## Security
+
+	**Security** means protecting user data and ensuring that only authorised people can access the system — through authentication and data protection such as encryption. Because schools handle sensitive personal data, security also means respecting privacy legislation (Privacy Act 1988).
+
+	**How to apply it to your SAT:**
+
+	- Authentication — username and password, or two-factor authentication (2FA) for higher-risk data.
+	- Access control — separate permission levels for administrators and students so each role sees only what they need.
+	- Data encryption — symmetric or asymmetric encryption for stored data.
+	- Secure transmission — SSL/TLS so data cannot be read in transit.
+
+	**🎯 Watch for:** why security and usability must be designed *together* — and why trading one off entirely against the other makes your system fail at both.
+
+	{{Video|src=https://www.youtube.com/watch?v=cqfRzrzs2pg}}
+
+	> [!NOTE]
+	> **In short — what the video says**
+	>
+	> - UX and cybersecurity are deeply connected: security tools are used by ordinary people constantly, so they must be *usable*, not just technically robust.
+	> - The biggest UX challenge in security is **authentication** — designers have built methods that are both more secure and easier to understand, so users know how and why they work.
+	> - **Biometric authentication** (face ID, fingerprint) secures data like a password but is harder to steal and faster to use — raising security and usability at the same time.
+	> - **Telehealth** is the key example: COVID-19 pushed telehealth to the front line, putting sensitive health data at greater risk. Designers and security specialists must make the platform *both* secure *and* usable — if it is not usable, people stop using it and may lose access to care they cannot get elsewhere.
+	> - **Disability access matters**: security design must accommodate all users — clear explanation for those with neurological disabilities; alternatives to facial recognition for those who cannot use it.
+	> - Bottom line: security is for everyone, so it must be easy for everyone to access.
+
+	The core tension to keep in mind is the **security ↔ usability trade-off**: too much friction and users abandon the system (or write passwords on sticky notes); too little and data is exposed. Good security design reduces friction without weakening protection.
+
+	### Three ways security is getting more usable
+
+	Compare these with a UX lens — notice that each change reduces friction without reducing (and sometimes while improving) protection.
+
+	**Passkeys vs 2FA** — 2FA adds a step: type a code sent to your phone. More secure than a password alone, but more friction. Passkeys store a cryptographic key on your device, unlocked by your fingerprint or face — they are secure AND require fewer steps. UX win: less friction at equal-or-better security.
+
+	{{Video|src=https://www.youtube.com/watch?v=oD1OXrLpv-c}}
+
+	**From CAPTCHA to "no CAPTCHA" reCAPTCHA** — old CAPTCHAs made every user decode distorted, hard-to-read text (high friction, poor accessibility). The "no CAPTCHA" version proves you are human with a single checkbox tick. UX win: one click instead of squinting at warped letters.
+
+	{{Video|src=https://www.youtube.com/watch?v=jwslDn3ImM0}}
+
+	**Biometrics** — fingerprint or face recognition replaces passwords: fast and password-free (high usability), but it raises privacy and consent questions, and raises inclusion questions for users who cannot use it. UX lens: convenience vs privacy and inclusion — there is no free lunch.
+
+	{{Video|src=https://www.youtube.com/watch?v=88Rjg8gM_DI}}
+
+	---
+
+	## Usability
+
+	**Usability** is the ease with which users can achieve specified goals in terms of efficiency, effectiveness and satisfaction. It is one of the most critical UX characteristics — a system that does everything technically but is hard to use will not be used.
+
+	Key components of usability:
+
+	- **Learnability** — how quickly can a new user get started?
+	- **Efficiency** — once learned, how fast can they complete tasks?
+	- **Memorability** — after time away, can they pick it back up?
+	- **Error prevention** — does the design stop mistakes before they happen?
+	- **Satisfaction** — do users feel positive about the experience?
+	- **Accessibility** — can users with assistive technology (screen readers, switch access) use it fully?
+
+	**🎯 Watch for:** how usability is measured by whether real people can complete real tasks — not by whether the designer *thinks* it looks clean.
+
+	{{Video|src=https://www.youtube.com/watch?v=UnaxPVbBYiE}}
+
+	### Everyday example — the ketchup bottle
+
+	**🎯 Watch for:** how a simple redesign — flipping the bottle so it stores cap-down, keeping the ketchup always ready to pour — removed a real usability frustration that millions of people had accepted as normal.
+
+	{{Video|src=https://www.youtube.com/watch?v=ENMCIgoxsgw}}
+
+	Good usability often means noticing a small, everyday friction and removing it — the insight is in seeing what everyone else stopped noticing.
+
+	---
+
+	## Check Your Understanding
+
+	1. Name the four VCAA UX characteristics.
+
+	>| affordance, interoperability, security, usability.
+
+	2. A login screen forces a 12-character password plus a texted code on every single login. Which UX tension does this show, and what could improve it?
+
+	>| The security ↔ usability trade-off — the system is strongly secured but creates high friction, so users may give up, reuse weak passwords, or write them down. A passkey or biometric unlock keeps security high while cutting the number of steps needed.
+
+	3. Your app exports the timetable as an iCal file that students can open in Google Calendar. Which UX characteristic is this, and why?
+
+	>| Interoperability — the app works with another system (Google Calendar) through a shared standard (iCal), fitting into the workflow users already have without either application needing to be rebuilt.
+
+	---
+
+	## See also
+
+	- [Design Principles vs UX Characteristics](/sd/C05/Design%20Principles%20vs%20UX%20Characteristics)
+	- [Design Principles](/sd/C05/Design%20Principles)
+	- [The Annotation Verb Ladder](/sd/C05/The%20Annotation%20Verb%20Ladder)
+	- [C05 Resources](/sd/Resources/C05-Resources)
+
+	---
+
+	← Back to [C05 Home](/sd/C05/C05-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)