Compare task wording and moderator prompts, then inspect a fictional session excerpt

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>Usability test plan · goal, probe, observation</title><style>*{box-sizing:border-box}body{margin:0;background:#edf1f4;color:#233444;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:32px;line-height:1.18}h2{font-size:23px}h3{font-size:19px}.eyebrow{color:#53677d;letter-spacing:.05em}.card{background:white;border:1px solid #c0cbd5;border-radius:7px;padding:18px;margin:16px 0}.task{border-top:6px solid #36647c}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px}.comparison>div{padding:14px;background:#f3f6f7}.comparison>div:first-child{border-left:4px solid #bc702e}.comparison>div:last-child{border-left:4px solid #3f7c71}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,input,textarea{font:inherit;color:inherit}button{min-height:44px;padding:9px 13px;border:1px solid #46667b;background:white;border-radius:5px;cursor:pointer}button[aria-pressed=true]{background:#284d66;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b55c1c;outline-offset:3px}.timeline{border-left:5px solid #7992a5;padding-left:16px}#session-line{font-size:19px}.label{font-weight:750;color:#416073}label{display:block;font-weight:650;margin:14px 0 5px}textarea,input{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #788b9b;border-radius:4px;background:#fff}textarea{min-height:100px;resize:vertical}.notes{display:grid;grid-template-columns:1fr 1fr;gap:14px}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{color:#7d481c;font-weight:650}footer{color:#556779;margin:24px 0}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.comparison,.notes{grid-template-columns:1fr}.card{padding:14px}}</style></head><body><main><p class="eyebrow">FICTIONAL LIBRARY PROTOTYPE · MODERATOR PREPARATION</p><h1>Give a goal. Leave the route open.</h1><p>Prepare the task and probes before the session. Keep what happened separate from what you think it means.</p><section class="card task"><h2>Room-booking task</h2><p>You need a library room for four people next Tuesday afternoon. Find a suitable option and show what you would do to arrange it.</p><p><strong>Research question:</strong> Can a likely visitor find a room that fits their group and explain whether their request has secured the room?</p><p><strong>Starting point:</strong> Prototype home screen, with the same starting state for this task.</p><p><strong>Likely participant:</strong> Someone who might use a library room for a small group. Actual recruitment details remain to fill in.</p></section><section class="card"><h2>Prepare before anyone arrives</h2><ul><li>Confirm which date “next Tuesday” means and which rooms the prototype contains.</li><li>Confirm where the simulated flow stops; “Request received” is the supplied final message.</li><li>Fill in prototype version, location, accessibility arrangements, moderator and note-taker.</li><li>Arrange actual consent and recording through your research process.</li></ul><p>These moderator preparation notes are visible in this teaching page. Keep the intended route out of the participant's task script.</p></section><button id="task-compare" type="button" aria-expanded="false" aria-controls="task-comparison">Compare task wording</button><section id="task-comparison" class="card" hidden><h2>Keep the goal; remove the route</h2><div class="comparison"><div><h3>Leading instruction</h3><p>Click Reserve room, choose Capacity, and select four people.</p><p>Names two controls and supplies steps the research is meant to observe.</p></div><div><h3>Neutral task</h3><p>Find a library room for four people next Tuesday afternoon and show what you would do to arrange it.</p><p>Retains the group size and time requirement while leaving the interface route open.</p></div></div></section><section class="card"><h2>Session excerpt</h2><p>Original fictional transcript. The excerpt does not establish an actual participant outcome.</p><div class="toolbar" aria-label="Excerpt stage"><button id="stage-0" type="button" aria-pressed="true">1 · Task given</button><button id="stage-1" type="button" aria-pressed="false">2 · Final message</button><button id="stage-2" type="button" aria-pressed="false">3 · Participant question</button></div><div class="timeline" aria-live="polite"><p id="session-label" class="label">Task given</p><p id="session-line">P01 receives the room-booking task. No behavior is supplied for the route through the prototype.</p><p id="session-limit">The excerpt leaves room choice, help and intermediate actions unspecified.</p></div></section><button id="probe-compare" type="button" aria-expanded="false" aria-controls="probe-comparison">Compare moderator probes</button><section id="probe-comparison" class="card" hidden><h2>Ask about the uncertainty</h2><div class="comparison"><div><h3>Leading probe</h3><p>“It is still waiting for staff approval, right?”</p><p>Supplies an interpretation to accept or reject.</p></div><div><h3>Neutral probe</h3><p>“What makes you say that?”</p><p>Invites the participant to explain the words or expectations behind the question.</p></div></div><p>No reply to either probe is supplied. Do not turn the unanswered probe into a finding.</p></section><section class="card"><h2>Your discussion guide</h2><label for="research">Research question</label><textarea id="research"></textarea><label for="task">Participant task</label><textarea id="task"></textarea><label for="start">Starting state and prototype limits</label><textarea id="start"></textarea><h3>Blank observation record</h3><p>Use a participant code, date, task and prototype version in the actual research record. The fields here are temporary preparation notes.</p><div class="notes"><div><label for="observed">Observed action or words</label><textarea id="observed"></textarea><label for="interpretation">Researcher's interpretation</label><textarea id="interpretation"></textarea></div><div><label for="assistance">Assistance given</label><textarea id="assistance"></textarea><label for="followup">Follow-up to explore</label><textarea id="followup"></textarea></div></div><div class="toolbar"><button id="build" type="button">Build discussion copy</button><button id="reset" type="button">Reset typed work</button></div><section id="confirmation" hidden><h3>Clear all seven typed fields?</h3><div class="toolbar"><button id="keep" type="button">Keep my text</button><button id="clear" type="button">Clear typed fields</button></div></section><section id="review" class="card copy" hidden><h2>Supplied discussion copy</h2><div id="review-content"></div></section></section><p id="status" role="status" aria-live="polite">The session example contains no measured task outcome or success rate.</p><footer>No notes are saved or submitted. Keep actual research observations separate from this preparation script.</footer></main><script>(()=>{'use strict';const $=s=>document.querySelector(s),ids=['research','task','start','observed','interpretation','assistance','followup'],labels={research:'Research question',task:'Participant task',start:'Starting state and prototype limits',observed:'Observed action or words',interpretation:"Researcher's interpretation",assistance:'Assistance given',followup:'Follow-up to explore'};for(const [button,panel]of [['task-compare','task-comparison'],['probe-compare','probe-comparison']])$('#'+button).addEventListener('click',()=>{const open=$('#'+panel).hidden;$('#'+panel).hidden=!open;$('#'+button).setAttribute('aria-expanded',String(open));});const stages=[['Task given','P01 receives the room-booking task. No behavior is supplied for the route through the prototype.','The excerpt leaves room choice, help and intermediate actions unspecified.'],['Final message','P01 sees “Request received” and pauses.','The pause alone does not establish why the participant paused or whether a room is booked.'],['Participant question','P01 asks, “Does that mean the room is booked?”','The question shows uncertainty in this fictional excerpt. No assistance or later outcome is supplied.']];for(let n=0;n<3;n++)$('#stage-'+n).addEventListener('click',()=>{for(let i=0;i<3;i++)$('#stage-'+i).setAttribute('aria-pressed',String(i===n));$('#session-label').textContent=stages[n][0];$('#session-line').textContent=stages[n][1];$('#session-limit').textContent=stages[n][2];});for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#review').hidden=true;$('#status').textContent='Notes changed. Build a new discussion copy to include the edits.';});$('#build').addEventListener('click',()=>{const missing=['research','task','start'].filter(id=>!$('#'+id).value.trim());$('#review').hidden=true;if(missing.length){$('#status').textContent='Complete: '+missing.map(id=>labels[id]).join(', ')+'.';return;}const content=$('#review-content');content.replaceChildren();for(const id of ids){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=labels[id];p.textContent=$('#'+id).value.trim()||'No entry supplied.';content.append(h,p);}$('#review').hidden=false;$('#status').textContent='Discussion copy built from supplied text. No findings or outcomes were inferred.';});$('#reset').addEventListener('click',()=>{$('#confirmation').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{$('#confirmation').hidden=true;$('#reset').focus();$('#status').textContent='Kept all seven typed fields.';});$('#clear').addEventListener('click',()=>{for(const id of ids)$('#'+id).value='';$('#review').hidden=true;$('#confirmation').hidden=true;$('#research').focus();$('#status').textContent='All seven typed fields were cleared. Excerpt and comparison views are unchanged.';});})();</script></body></html>