Interaction Patterns
Interaction patterns here are only the ones with live or validated evidence.
Each section keeps one preview and a short constraint note.
Tabbed and indexed reading flow
Indexed reading moves item by item through authored content blocks and keeps navigation, panel output, and mobile fallback aligned.
Preview
Tabbed Reader
- Constraint: authored item order defines reading order, so empty or weak items reduce the pattern quickly.
Support content inside a reading flow
Supporting context can sit beside the main narrative when mapped support fields exist on a tabbed item.
Preview
Tabbed Support Rail
- Constraint: the same family falls back to a single main column when those support fields are absent.
Ordered narrative and media flow in case studies
Case studies preserve authored order across sections, figures, videos, and related links.
Preview
Case Study
Portfolio
Reducing Cognitive Load During Peak Traffic
The Company approached its holiday campaigns with a clear ambition: convert seasonal traffic into meaningful engagement and confident purchasing decisions.
Earlier campaigns assumed that high holiday intent meant users already understood the product value and needed only visual appeal and refreshed layouts to convert. In reality, users required reassurance, guidance, and clearer differentiation, especially under time pressure.
I led UX research and usability testing across successive holiday campaigns, guiding their evolution from surface-level optimisation toward behaviourally informed experiences.
- Constraint: media still requires valid authored src or url values, and optional regions are omitted when empty.
Docs navigation and section reading
The docs path switches between overview browsing and section-detail reading without a separate menu system.
Preview
Docs Layout
Shared structural patterns
Across the live runtime, the most common shared pattern is item-plus-fields. The generic visual parser reads az_item blocks, collects az_field name values, normalizes az_list content into point arrays, and turns az_section or az_substep content into titled body sections. That pattern powers the validated tabbed / indexed reader family.
The docs path uses a narrower grammar. az_docs accepts az_field name=”intro” and az_field name=”body”, a top-level az_list name=”points”, nested az_section blocks, and nested az_example blocks. The docs renderer then decides whether the current page is acting as an overview or as a section detail view.
The case-study family is separate and explicit. It uses az_case_hero, az_case_facts, az_case_fact, az_case_section, az_case_figure, az_case_video, az_case_related, and az_case_link rather than the generic az_item grammar.
- Constraint: this pattern belongs only to the active az_docs runtime.
Paired SVG comparison in facilitation cards
Geometries of Use keeps two artefacts in view at once so a comparison stays legible without crowding the page.
Preview
Facilitation Comparison Cards
Indirect access + Threshold
Use this pair when entry is said to be available, but the real crossing is hidden, delayed, or socially marked. It is the clearest pair for arrival, permission, onboarding, and access questions.
Route + Interruption
Use this pair when a service looks organised on paper but breaks in the lived sequence. It is useful for pressure points, handoffs, and moments where continuity fails under load.
Dependency + Exchange
Use this pair when the visible interaction depends on backstage conditions or another actor carrying the transfer. It helps teams talk about coordination rather than only interface.
Shelter + Return
Use this pair when recovery matters as much as first-pass completion. It helps frame retry, reassurance, and safe re-entry as designed conditions rather than edge cases.
Action node + Repeated effort
Use this pair when a key service moment keeps absorbing small burdens. It is useful for diagnosing where friction collects until a team starts treating it as normal.
Ambiguity + Directed effort
Use this pair when unclear meaning forces the person to work harder simply to keep moving. It is a good facilitation lens for confusion, hesitation, and compensatory effort.
- Constraint: this remains a theme-side specimen, not a shortcode interaction family.