Review trust layer

후기 신뢰 레이어

Buyers validate AI recommendations against user reviews.

···
html
<div class="review"><div class="review-head"><b>AI SHORTLIST</b><button id="review-toggle">SHOW REVIEWS</button></div><div class="review-row" data-score="76"><strong>A</strong><span>RECOMMENDED #1</span><i></i></div><div class="review-row" data-score="91"><strong>B</strong><span>RECOMMENDED #2</span><i></i></div><div class="review-row" data-score="64"><strong>C</strong><span>RECOMMENDED #3</span><i></i></div><div class="review-foot" id="review-foot">AI ORDER</div></div>
css
.review{width:min(86%,620px);display:flex;flex-direction:column;gap:clamp(6px,1.8vmin,14px);font:800 clamp(10px,max(2vmin,1vw),15px)/1 sans-serif}.review-head{display:flex;justify-content:space-between;align-items:center;gap:6px;order:0}.review-head button{border:1px solid var(--fg);background:var(--surface);color:var(--fg);padding:clamp(5px,1.3vmin,10px);font:inherit;cursor:pointer}.review-row{display:grid;grid-template-columns:clamp(25px,6vmin,45px) 1fr clamp(25px,7vmin,50px);align-items:center;gap:5px;padding:clamp(7px,1.8vmin,13px);border:2px solid var(--line);background:var(--surface);transition:transform .5s,border-color .5s}.review-row strong{display:grid;place-items:center;background:var(--accent-2);color:#211b19;aspect-ratio:1}.review-row span{font-size:clamp(10px,max(1.6vmin,1vw),13px)}.review-row i{height:clamp(8px,1.8vmin,15px);background:var(--line)}.review-row.verified{border-color:var(--accent)}.review-row.verified i{background:var(--accent);width:var(--score)}.review-foot{color:var(--accent);order:4}
js
const rows=[...document.querySelectorAll('.review-row')];let on=false;function draw(v){on=v;rows.forEach((r,i)=>{r.classList.toggle('verified',v);r.style.order=v?[2,1,3][i]:i+1;r.querySelector('span').textContent=v?'REVIEW FIT '+r.dataset.score+'%':'RECOMMENDED #'+(i+1);r.style.setProperty('--score',r.dataset.score+'%')});document.getElementById('review-foot').textContent=v?'REVIEW EVIDENCE REORDERS THE LIST':'AI ORDER';document.getElementById('review-toggle').textContent=v?'HIDE REVIEWS':'SHOW REVIEWS'}document.getElementById('review-toggle').onclick=()=>draw(!on);draw(true);setInterval(()=>draw(!on),2700);

A review trust layer checks an AI-generated shortlist against real user experience. In B2B software buying, people may inspect reviews after receiving recommendations.

The fictional candidate order in the demo changes when review evidence is revealed. Look beyond the count of reviews to their context, recency, and specific tradeoffs.

Reviews can also be biased or manipulated. Neither an AI score nor a star rating is a definitive quality verdict.

When to use

Use it to design the evidence buyers see after an AI recommendation.

Open as page ↗