Original fictional UX evidence appendix with V1/V2 interface exhibits and an unperformed retest

HTML for this example

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

<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>From observation to interface revision</title><style>*{box-sizing:border-box}body{margin:0;background:#fffdf9;color:#253440;font:17px/1.6 system-ui,sans-serif}main{max-width:920px;margin:auto;padding:24px}h1{font:700 34px/1.2 Georgia,serif}h2{font-size:23px;margin-top:28px}h3{font-size:20px}.controls{display:flex;flex-wrap:wrap;gap:10px}button{font:inherit;padding:10px 14px;min-height:48px;border:1px solid #687d8b;background:#fff;cursor:pointer}button[aria-pressed=true]{background:#304d60;color:white}button:focus-visible{outline:3px solid #ac5e22;outline-offset:3px}.exhibit{border:2px solid #6d8090;padding:18px;margin:18px 0}.location{padding:12px;background:#e8f0ee;border-left:4px solid #345a55}.trail{border-left:5px solid #986038;padding:14px;background:#f8efe3}.source{border-top:1px solid #aab6be;padding:12px 0}.blank{display:inline-block;min-width:70px;border-bottom:1px solid #586d7a}footer{border-top:1px solid #aab6be;padding-top:18px;margin-top:25px}[hidden]{display:none!important}@media(max-width:560px){main{padding:18px 14px}h1{font-size:29px}}@media print{main{padding:0}}</style></head><body><main><p>UX EVIDENCE APPENDIX · ORIGINAL FICTIONAL EXERCISE</p><h1>Why did the pickup card change?</h1><p id="task">T1: Find where to collect a reserved book.</p><p>All observation notes and interface content are invented teaching inputs. No real participant study or library service is represented.</p><div class="controls"><button type="button" id="original" aria-pressed="true">Original V1</button><button type="button" id="revision" aria-pressed="false">Proposed V2</button></div><section class="exhibit" aria-label="Interface exhibit"><p id="version">Original V1 · collection location not shown</p><h2>The Garden Atlas</h2><p><strong>Ready for pickup</strong></p><p class="location" id="location" hidden>Collect at West Branch, holds shelf</p><aside><h3>Branch hours</h3><p>West Branch · 9 a.m.–5 p.m.</p></aside><p>This display does not reserve a book.</p></section><section class="trail"><h2>Evidence → interpretation → decision</h2><p id="mapping">O1 + O2 → F1 → D1. V2 is proposed; evaluation not performed.</p></section><h2>Supplied observation notes</h2><p class="source" id="o1">O1 / P01: During T1 on V1, asked which branch held the reserved book.</p><p class="source" id="o2">O2 / P02: During T1 on V1, looked at the branch-hours note for a collection location; it supplied hours only.</p><h2>Analyst interpretation</h2><p id="finding">F1: Collection location missing beside pickup status. Sources: O1, O2.</p><h2>Design decision</h2><p id="decision">D1: Add the supplied collection location immediately below pickup status. Keep branch hours separate.</p><h2>Evaluation still to do</h2><p id="retest">Proposed retest: ask for the collection location on V2 without a hint. Record the actual response, help needed and session/version. No retest has been performed.</p><p>Actual project/date: <span class="blank" data-blank></span></p><p>My role/contributors: <span class="blank" data-blank></span></p><p>Method/participant permissions: <span class="blank" data-blank></span></p><p>Actual retest/session/version: <span class="blank" data-blank></span></p><p>Actual response/help needed: <span class="blank" data-blank></span></p><p>Publication permission: <span class="blank" data-blank></span></p><footer>Original fictional evidence appendix. Local exhibit switching only; no participant collection, persistence, reservation, published portfolio or measured usability improvement.</footer></main><script>(()=>{const $=id=>document.getElementById(id);function show(v){$("location").hidden=v===1;$("original").setAttribute("aria-pressed",String(v===1));$("revision").setAttribute("aria-pressed",String(v===2));$("version").textContent=v===1?"Original V1 · collection location not shown":"Proposed V2 · D1 location added; evaluation not performed";}$("original").addEventListener("click",()=>show(1));$("revision").addEventListener("click",()=>show(2));show(1);})();</script></body></html>