# UX at KB Signaling · interactive presenter guide Open [ux.html](../ux.html) through a local server. This teaching page uses the same global header, sidebar, theme and menu controller as the rest of the public site, plus the accepted scoped component bundle and local font assets. See [shared-frame maintenance](shared-frame-maintenance.md). ## The nine chapters 1. What is UX? Discuss one tool that makes a task harder than it should. 2. The ketchup test: discuss the glass/cap-down bottle trade-offs, then reveal the UI/UX explanation. Both have UI and UX; votes are discussion choices. 3. When to do UX: select a new product, feature, feedback, issue or problem to reveal a useful research question. 4. The process: explore Understand, Define, Explore, Prototype, Test and Learn. The process loops. 5. Meet RailLens: an explicitly fictional informational companion, not a product announcement or a device-control system. 6. Users and journeys: choose a hypothesized role, stage and working condition. The journey changes with the selected role. Needs remain hypotheses, not research results. 7. Design and test: compare two rough concepts, define the task and discuss what you would observe. Preferences do not establish validation. 8. Design system: map the task structure to actual cards, fields, actions and dialogs, then open the real component examples if useful. 9. Optional build: copy the prepared prompt into your own coding assistant. Nothing runs automatically. A prepared local fallback lets you exercise a required field and record fictional findings in memory. ## Presenting Click Presenter mode in the sticky presentation toolbar inside the main content. It starts with the most visible chapter. Only that chapter remains visible, with Previous/Next and progress controls. Arrow keys navigate when focus is not on an interactive control or editable field. Escape exits presenter mode. Use Exit presenter mode at any time. Chapters can still scroll vertically when content is taller than the display; no content is cut off to fit a slide. In standard mode, chapter links/deep links and normal scrolling work. The shared mobile site navigation opens a contained keyboard-focus region; Escape closes it and restores focus. Presentation chapter links live inside the main content. The page has one persisted light/dark theme control. ## Local interaction and limits All discussion choices remain in the page session. There are no aggregate polling results or network writes. Fictional findings are rendered as text, stored only in the DOM and cleared by reload; Reset fields clears inputs, not existing records. Nothing is saved to a backend or sent to a device. Offline preparation and AR remain research/concept topics, not implemented capabilities. Copy prompt uses the browser clipboard when allowed. If unavailable, the full readonly prompt opens and is selected for a keyboard copy command. Serve through localhost for normal clipboard behavior. The ketchup illustration is generated and unbranded, not a product endorsement or measured usability comparison. The page requests no external assets. Local availability is not a service worker or an offline application guarantee. Presenter mode is a teaching convenience, not a substitute for a timed rehearsal. Rehearse at the actual browser zoom/projector resolution. ## Files ux.html, ux.css and ux.js hold the teaching page; assets/ux/ketchup-comparison.png is the generated image. Shared fields/actions/surfaces come from landing-components.css and its original Sass source. The common frame is generated from site/ and owned by site-frame.js; this file retains teaching interactions only. Run node --check ux.js and the shared build/drift checks when changing the page. [Current shared-frame verification](shared-frame-verification.md) covers integration. Earlier [main verification](reference/ux-page-verification.json) covers all nine chapters in light/dark at1440/768/390/320px, local custom fonts, reveals/choices, role-specific journeys, presenter navigation, clipboard, safe in-memory records, validation, persistence, deep links and mobile focus. [Fallback checks](reference/ux-page-fallback-verification.json) cover blocked clipboard/storage, forced-color focus, reduced motion and final header/reflow. [Links](reference/ux-page-links.json) checks local files and label/control references. No page errors, HTTP failures, external requests or write requests occurred in the exercised route. Existing Sass contracts and scoped bundle drift checks pass. [Desktop](reference/ux-page-light-1440.png) · [ketchup comparison](reference/ux-page-ketchup-light-1440.png) · [journey](reference/ux-page-journey-light.png) · [presenter mode](reference/ux-page-presenter-light.png) · [mobile](reference/ux-page-light-390.png). This is Chromium evidence; broader browser and assistive-technology coverage remain adoption checks. ## Suggested timing For30 minutes, keep the core story to20 and leave10 for discussion: introduction2, ketchup4, when/process4, RailLens users/journey6, exploration/design-system connection4. Choose one role and one constraint rather than exercising every control. The coding build is optional; extend the session or substitute it deliberately rather than promising it on top of the full schedule. The prepared prototype is a fallback, not evidence of a live generation. Timed presenter/projector rehearsal remains to do.