Wayfinding · Note-to-Prototype Lesson — Turn supplied user observations into a bounded need, design an original prototype and plan a user trial that can support a specific…

HTML for this example

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Wayfinding · Note-to-Prototype Lesson</title><style>:root{--bg:#f0f6f5;--ink:#29494e;--accent:#317b7e;--line:#bfd7d5;--wash:#e0efed;}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}main{max-width:1120px;margin:auto;padding:26px 24px 55px}h1,h2,h3,p{margin:0}h1{font-size:clamp(27px,4vw,39px);line-height:1.17;letter-spacing:-.03em}h2{font-size:23px}h3{font-size:18px}header{margin-bottom:18px}header p{margin-top:8px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:bold;color:var(--accent)}button,input,select,textarea{font:inherit}button{min-height:44px;padding:9px 15px;background:var(--accent);color:white;border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-weight:bold}button.secondary{background:white;color:var(--accent)}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}button:disabled{opacity:.45;cursor:default}input,select,textarea{width:100%;min-height:44px;padding:9px 11px;border:1px solid #969fb0;background:white;color:var(--ink);border-radius:5px}textarea{min-height:90px;resize:vertical}input[type=checkbox]{width:20px;min-height:20px;vertical-align:middle;margin-right:8px}label{display:block;font-size:14px;font-weight:bold;margin:11px 0 5px}:focus-visible{outline:3px solid #d98c22;outline-offset:3px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.panel{background:white;border:1px solid var(--line);border-radius:10px;padding:22px;min-width:0}.columns{display:grid;grid-template-columns:1.55fr 1fr;gap:22px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.muted{font-size:14px;color:#556173}.notice{background:var(--wash);border-left:4px solid var(--accent);padding:13px 16px;margin:14px 0;overflow-wrap:anywhere}.error{color:#a42b25;font-weight:bold}.below{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.below>p{margin:9px 0}.tag{font-size:12px;padding:4px 8px;background:var(--wash);border-radius:4px}.big{font-size:32px;line-height:1.2;font-weight:bold}.foot{font-size:14px;color:#556173;margin-top:24px}.readonly{min-height:180px;font:13px/1.6 ui-monospace,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,monospace}.stage{display:grid;grid-template-columns:95px 1fr;gap:15px;padding:17px 0;border-top:1px solid var(--line)}.stage input{width:78px}.stage p{margin-top:6px}.range{font-weight:bold}.total{font-size:30px;font-weight:bold;color:var(--accent)}.schedule-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:bold}details{margin:18px 0}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:9px}.scroll{overflow:auto}[hidden]{display:none!important}@media(max-width:800px){.columns{grid-template-columns:1fr}}@media(max-width:520px){main{padding:18px 14px 40px}.panel{padding:16px}.two,.three{grid-template-columns:1fr}.actions button{flex-grow:1}.stage{grid-template-columns:78px 1fr;gap:10px}.stage input{width:65px}td,th{padding:7px}}.note{background:#fff7c9;border:1px solid #e0d494;padding:16px;border-radius:2px;box-shadow:0 3px 5px #314a4110}.note strong{display:block;font-size:20px;margin-bottom:5px}.need{margin:19px 0;padding:20px;border-left:5px solid #317b7e;background:#fff}.need textarea{font:23px/1.5 Georgia,serif;border:0;padding:0;min-height:95px}.prototype{padding:20px;border:2px solid #c7d9d6;border-radius:11px;background:#fff}.prototype.selected{border-color:#317b7e}.prototype p{margin:9px 0}.trial-tabs{display:flex;gap:8px;flex-wrap:wrap}.trial-tabs button{background:white;color:#317b7e}.trial-tabs button[aria-pressed=true]{background:#317b7e;color:white;box-shadow:none}.trial-card{background:white;padding:22px;border:1px solid var(--line);border-radius:10px;margin-top:15px}.trial-card h3{margin-bottom:10px}#plan-text{min-height:260px}.links{display:flex;gap:15px;flex-wrap:wrap}.links label{font-weight:normal}.draft-chain{font:15px/1.8 ui-monospace,monospace}.actual-fields{border-top:2px solid #c4d7d3;margin-top:22px;padding-top:16px}</style></head><body><main><header><p class="eyebrow">Fictional exercise inputs · original wayfinding sketches</p><h1>Trace the label back to a user note.</h1><p>Frame a bounded need, compare two paper prototypes and plan a trial that can change the design.</p></header><div class="three"><article class="note"><strong>N1</strong>Visitors confuse Room A and Room B labels.</article><article class="note"><strong>N2</strong>One visitor wants the letter readable at door height.</article><article class="note"><strong>N3</strong>The maintainer requires a removable paper-only prototype.</article></div><section class="need"><label for="need">Proposed need · linked to N1–N3</label><textarea id="need">Help a visitor distinguish A from B at the door using a removable paper prototype.</textarea><div class="links"><label><input type="checkbox" id="link-1" checked>Need cites N1</label><label><input type="checkbox" id="link-2" checked>Need cites N2</label><label><input type="checkbox" id="link-3" checked>Need cites N3</label></div><p class="muted">Still unknown: which label causes confusion, what readable means in the intended trial, and which placement is approved.</p></section><div class="two"><article class="prototype selected" id="prototype-1"><h2>Option 1 · prominent letter</h2><svg viewBox="0 0 360 150" role="img" aria-label="Original paper-label sketch with room letters and names" style="width:100%;display:block"><rect x="8" y="8" width="160" height="132" rx="4" fill="#fffdf6" stroke="#a5b5bf" stroke-dasharray="4 3"/><rect x="190" y="8" width="160" height="132" rx="4" fill="#fffdf6" stroke="#a5b5bf" stroke-dasharray="4 3"/><text x="88" y="84" text-anchor="middle" font-family="Arial" font-weight="bold" font-size="66" fill="#244f58">A</text><text x="270" y="84" text-anchor="middle" font-family="Arial" font-weight="bold" font-size="66" fill="#244f58">B</text><text x="88" y="123" text-anchor="middle" font-family="Arial" font-size="16" fill="#244f58">Room A</text><text x="270" y="123" text-anchor="middle" font-family="Arial" font-size="16" fill="#244f58">Room B</text></svg><p>Large letter, room name underneath. Letter prominence addresses N2; usefulness is untested.</p><button type="button" id="option-1" class="secondary">Select option 1</button></article><article class="prototype" id="prototype-2"><h2>Option 2 · outlined shapes</h2><svg viewBox="0 0 360 150" role="img" aria-label="Original paper-label sketch with room letters and names" style="width:100%;display:block"><rect x="8" y="8" width="160" height="132" rx="4" fill="#fffdf6" stroke="#a5b5bf" stroke-dasharray="4 3"/><rect x="190" y="8" width="160" height="132" rx="4" fill="#fffdf6" stroke="#a5b5bf" stroke-dasharray="4 3"/><circle cx="88" cy="62" r="41" fill="none" stroke="#337b7b" stroke-width="3"/><rect x="229" y="21" width="82" height="82" rx="4" fill="none" stroke="#337b7b" stroke-width="3"/><text x="88" y="84" text-anchor="middle" font-family="Arial" font-weight="bold" font-size="66" fill="#244f58">A</text><text x="270" y="84" text-anchor="middle" font-family="Arial" font-weight="bold" font-size="66" fill="#244f58">B</text><text x="88" y="123" text-anchor="middle" font-family="Arial" font-size="16" fill="#244f58">Room A</text><text x="270" y="123" text-anchor="middle" font-family="Arial" font-size="16" fill="#244f58">Room B</text></svg><p>Same room names, plus distinct outlines. Their benefit is an assumption to test, not a requirement proved by N1.</p><button type="button" id="option-2" class="secondary">Select option 2</button></article></div><div class="columns" style="margin-top:20px"><section class="panel"><h2>Note → need → design</h2><p class="notice" id="prototype-summary">Option 1 selected · removable paper required.</p><label for="material">Planned material / mounting</label><select id="material"><option value="paper">Removable paper only</option><option value="permanent">Permanent mounted sign · conflicts with N3</option></select><label for="assumption">Assumption to test</label><textarea id="assumption">A more prominent letter will help distinguish the labels at the approved placement.</textarea><div class="actions"><button type="button" id="show-links" class="secondary">Reveal evidence links</button><button type="button" id="review-plan">Check links &amp; constraints</button></div><pre id="evidence-links" class="draft-chain" hidden></pre><p id="plan-feedback" class="notice" role="status">Draft prepared; review links, assumptions and trial arrangements.</p></section><section class="panel"><h2>Trial view</h2><div class="trial-tabs"><button type="button" id="trial-proposed" class="secondary">Proposed</button><button type="button" id="trial-hypothetical" class="secondary">Hypothetical</button><button type="button" id="trial-actual" class="secondary">Actual notes</button></div><div class="trial-card"><h3 id="trial-heading">Proposed neutral task</h3><p id="trial-summary">Using these prototypes at their approved locations, identify Room A and Room B.</p><p id="trial-interpretation" class="notice">Do not cue the participant to a feature or a letter before observing.</p></div></section></div><section class="below"><div class="schedule-heading"><h2>Teaching sequence</h2><p class="total" id="total">45 minutes</p></div><p id="schedule-error" class="error" role="status"></p><article class="stage"><div><p class="range" id="range-0"></p><label for="minutes-0">Minutes</label><input id="minutes-0" value="6" inputmode="numeric"></div><div><h3>1. Read the notes</h3><p><strong>Teacher:</strong> Separate supplied N1–N3 from added assumptions.</p><p><strong>Learner / evidence:</strong> Identify what each note supports and what remains unknown.</p></div></article><article class="stage"><div><p class="range" id="range-1"></p><label for="minutes-1">Minutes</label><input id="minutes-1" value="7" inputmode="numeric"></div><div><h3>2. Frame a bounded need</h3><p><strong>Teacher:</strong> Link the need to note IDs and unresolved questions.</p><p><strong>Learner / evidence:</strong> Do not convert fictional notes into real user-study evidence.</p></div></article><article class="stage"><div><p class="range" id="range-2"></p><label for="minutes-2">Minutes</label><input id="minutes-2" value="8" inputmode="numeric"></div><div><h3>3. Ideate two options</h3><p><strong>Teacher:</strong> Sketch letters/room names, with and without outlined shapes.</p><p><strong>Learner / evidence:</strong> Explain evidence links; extra shapes remain a hypothesis.</p></div></article><article class="stage"><div><p class="range" id="range-3"></p><label for="minutes-3">Minutes</label><input id="minutes-3" value="10" inputmode="numeric"></div><div><h3>4. Prototype</h3><p><strong>Teacher:</strong> Prepare only the teacher-authorized removable paper version.</p><p><strong>Learner / evidence:</strong> Preserve N3; no permanent mounting.</p></div></article><article class="stage"><div><p class="range" id="range-4"></p><label for="minutes-4">Minutes</label><input id="minutes-4" value="9" inputmode="numeric"></div><div><h3>5. Trial plan and revision</h3><p><strong>Teacher:</strong> Use the neutral A/B identification task and blank observations.</p><p><strong>Learner / evidence:</strong> Discuss hypothetical or actual feedback separately; propose a bounded change.</p></div></article><article class="stage"><div><p class="range" id="range-5"></p><label for="minutes-5">Minutes</label><input id="minutes-5" value="5" inputmode="numeric"></div><div><h3>6. Reflect</h3><p><strong>Teacher:</strong> Ask how the design follows the notes and what needs another trial.</p><p><strong>Learner / evidence:</strong> Do not report universal success from partial feedback.</p></div></article><div class="actions"><button type="button" id="restore-time" class="secondary">Restore 45-minute timing</button></div></section><section class="actual-fields"><h2>Actual trial record · starts blank</h2><p class="muted">Viewing hypothetical feedback never fills these fields. Keep personal details out.</p><div class="two"><div><label for="actual-version">Actual prototype version</label><input id="actual-version"><label for="actual-placement">Approved placement used</label><input id="actual-placement"><label for="actual-task">Task instruction actually used</label><textarea id="actual-task"></textarea></div><div><label for="actual-action">Participant action observed</label><textarea id="actual-action"></textarea><label for="actual-confusion">Confusing point observed</label><textarea id="actual-confusion"></textarea><label for="actual-change">Proposed change / unanswered question</label><textarea id="actual-change"></textarea></div></div></section><section class="below"><h2>Current lesson and trial plan · manual copy</h2><label for="plan-text">Prepared plan, assumptions and separately labeled actual fields</label><textarea id="plan-text" readonly class="readonly"></textarea><div class="actions"><button type="button" id="select-plan" class="secondary">Select plan text</button></div><p id="copy-status" class="muted" role="status"></p><p class="foot">These notes are fictional, the label images are original sketches and the trial is not completed. No interviews, approvals, accessibility certification, learning gains or universal visitor success are established. Physical prototype construction and approved trial arrangements remain teacher responsibilities. The local completeness check cannot judge an arbitrary need statement or run a user study. No collection or saved records.</p></section></main><script>'use strict';const $=id=>document.getElementById(id);const lesson=[["Read the notes","Separate supplied N1–N3 from added assumptions.","Identify what each note supports and what remains unknown."],["Frame a bounded need","Link the need to note IDs and unresolved questions.","Do not convert fictional notes into real user-study evidence."],["Ideate two options","Sketch letters/room names, with and without outlined shapes.","Explain evidence links; extra shapes remain a hypothesis."],["Prototype","Prepare only the teacher-authorized removable paper version.","Preserve N3; no permanent mounting."],["Trial plan and revision","Use the neutral A/B identification task and blank observations.","Discuss hypothetical or actual feedback separately; propose a bounded change."],["Reflect","Ask how the design follows the notes and what needs another trial.","Do not report universal success from partial feedback."]];let option=1,trial='proposed';const fields=['actual-version','actual-placement','actual-task','actual-action','actual-confusion','actual-change'];function schedule(){const values=Array.from({length:6},(_,i)=>$('minutes-'+i).value.trim());if(values.some(v=>!/^\d+$/.test(v)||Number(v)<1||Number(v)>120))return {error:'Use whole minutes from 1 to 120 in every block.'};let end=0;return {blocks:values.map((v,i)=>{const start=end;end+=Number(v);return {start,end,minutes:Number(v),step:lesson[i]};}),total:values.reduce((a,v)=>a+Number(v),0)};}function renderSchedule(){const s=schedule();$('schedule-error').textContent=s.error||'';$('total').textContent=s.error?'Timing incomplete':s.total+' minutes';for(let i=0;i<6;i++)$('range-'+i).textContent=s.error?'—':s.blocks[i].start+'–'+s.blocks[i].end+' min';return s;}
function validate(){const s=schedule();if(s.error)return s.error;if(!$('need').value.trim())return 'Enter a bounded need before preparing the plan.';const missing=[1,2,3].filter(i=>!$('link-'+i).checked);if(missing.length)return 'Review missing need links: '+missing.map(i=>'N'+i).join(', ')+'.';if($('material').value!=='paper')return 'N3 conflict: keep the prototype removable and paper-only.';if(!$('assumption').value.trim())return 'State an assumption or unanswered question to test.';return '';}
function renderTrial(){for(const key of ['proposed','hypothetical','actual'])$('trial-'+key).setAttribute('aria-pressed',String(key===trial));$('trial-heading').textContent=trial==='proposed'?'Proposed neutral task':trial==='hypothetical'?'Hypothetical feedback · not an actual trial':'Actual notes · supplied manually only';$('trial-summary').textContent=trial==='proposed'?'Using these prototypes at their approved locations, identify Room A and Room B.':trial==='hypothetical'?'Found A but missed B.':fields.some(id=>$(id).value.trim())?'User-entered notes are below; they are not independently verified.':'No actual trial observations supplied.';$('trial-interpretation').textContent=trial==='proposed'?'Do not cue the participant to a feature or a letter before observing.':trial==='hypothetical'?'Investigate B’s clarity. A proposed change is a more prominent B, still on removable paper. Why B was missed is unknown; another trial must check the revision. This does not prove all visitors find A.':'Do not replace blank observations with the hypothetical example.';}
function render(){const s=renderSchedule(),error=validate();$('prototype-1').className='prototype'+(option===1?' selected':'');$('prototype-2').className='prototype'+(option===2?' selected':'');$('option-1').setAttribute('aria-pressed',String(option===1));$('option-2').setAttribute('aria-pressed',String(option===2));$('prototype-summary').textContent='Option '+option+' selected · removable paper required.';$('evidence-links').textContent='N1 → distinguish A from B\nN2 → letter visibility at the supplied placement\nN3 → removable paper only\nOption '+option+' → '+(option===1?'prominent letter; usefulness untested':'distinct outlined shapes; added benefit is an assumption');renderTrial();$('copy-status').textContent='';if(error){$('plan-text').value='';$('plan-feedback').textContent=error;return;}$('plan-feedback').textContent='Draft changed — check links and constraints. Need wording and trial arrangements require human review.';$('plan-text').value='WAYFINDING DESIGN LESSON — FICTIONAL INPUTS\nNeed: '+$('need').value+'\nNote links: N1,N2,N3\nOption: '+option+'\nMaterial: removable paper only\nAssumption to test: '+$('assumption').value+'\nUnresolved: which label causes confusion? What counts as readable? Which placement is approved?\n\n'+s.blocks.map(b=>b.start+'–'+b.end+' min · '+b.step[0]+'\nTeacher: '+b.step[1]+'\nLearner/evidence: '+b.step[2]).join('\n\n')+'\nTotal: '+s.total+' minutes\n\nPROPOSED TASK\nUsing these prototypes at their approved locations, identify Room A and Room B. No feature cues before observation.\n\nHYPOTHETICAL EXAMPLE — NOT ACTUAL FEEDBACK\nFound A but missed B. Investigate B clarity; proposed more prominent B remains a hypothesis, not a diagnosis or universal success.\n\nACTUAL TRIAL RECORD — blank unless supplied\n'+fields.map(id=>id+': '+$(id).value).join('\n');}
function choose(n){option=n;$('assumption').value=n===1?'A more prominent letter will help distinguish the labels at the approved placement.':'Distinct outlined shapes will help distinguish A from B; this added feature is not established by N1.';render();}
for(const n of [1,2])$('option-'+n).addEventListener('click',()=>choose(n));for(const key of ['proposed','hypothetical','actual'])$('trial-'+key).addEventListener('click',()=>{trial=key;renderTrial();});$('show-links').addEventListener('click',()=>{$('evidence-links').hidden=!$('evidence-links').hidden;$('show-links').textContent=$('evidence-links').hidden?'Reveal evidence links':'Hide evidence links';});$('review-plan').addEventListener('click',()=>{const error=validate();$('plan-feedback').textContent=error||'N1–N3 links present and removable-paper constraint retained. Need meaning, placement and actual trial still require human review.';});for(const id of ['need','assumption',...fields])$(id).addEventListener('input',render);for(const id of ['link-1','link-2','link-3','material'])$(id).addEventListener('change',render);for(let i=0;i<6;i++)$('minutes-'+i).addEventListener('input',render);$('restore-time').addEventListener('click',()=>{[6,7,8,10,9,5].forEach((v,i)=>$('minutes-'+i).value=String(v));render();});$('select-plan').addEventListener('click',()=>{if(!$('plan-text').value){$('copy-status').textContent='Resolve the held plan issues before selecting text.';return;}$('plan-text').focus();$('plan-text').select();$('copy-status').textContent='Plan text selected. Use your device’s copy command and paste manually.';});globalThis.app={choose,validate,render,renderTrial,schedule,fields,get:()=>({option,trial})};render();</script></body></html>