Same quotes, different tag layouts. Compare visual hierarchy: does the quote text dominate, or do the tags?
A. De-emphasis Variations (inline below)
All use the same quote. Varying: font size (0.72rem → 0.65rem → 0.58rem),
opacity (100% → 55% → 35%), and "washed" mode (user tags become pale bg + dark text, matching AI tag treatment).
Opacity variants restore to 100% on quote hover. Hue spread widened to ±25° per set (50° total, was ±20°).
A1 · baseline · 0.72rem · 100% opacity
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
A2 · 0.65rem · 100% opacity
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
A3 · 0.58rem · 100% opacity
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
A4 · 0.72rem · 55% opacity (hover restores)
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
A5 · 0.65rem · 55% opacity (hover restores)
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
A6 · 0.65rem · 35% opacity (hover restores)
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
A7 · 0.65rem · "washed" user tags (pale bg, dark text like AI)
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
C. Two-Column Layout (tags on right)
Quote occupies the main column. Tags stack vertically in a narrow right column,
separated by a light border. Tags are clearly secondary — spatially distinct from the quote text.
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
[06:11]
"Wait, where did my basket go? I was just on the checkout page and now I'm... on the homepage? I don't understand what happened." — p3
confusionnavigationdisorientedbasket+
[08:45]
"I'm not sure I'd put my card details in here. There's no padlock icon and the URL looks weird... it just doesn't feel like a real checkout page." — p2
doubtcredibilitysecurityprivacy+
[22:40]
"In my day job I'm switching between Slack, Jira, and about four different spreadsheets just to track one project. It's... exhausting, honestly." — p3
frustrationtoolingworkflowneed+
[28:17]
"The other tool we tried had this brilliant feature where you could just... tag everything in bulk and then see it all on a board. We don't have anything like that. I'd pay extra for it." — p4
delightrequestcompetitorwillingnesstooling+
[34:22]
"The delivery estimate said 3-5 days but then at checkout it changed to 7-10. That's annoying — I was making a decision based on the faster number." — p5
Tags live in a dedicated gutter column to the right of the blockquotes.
The quote body is completely clean — no tag badges inside it at all.
The gutter has a dashed left border to visually separate it.
Checkout Flow
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
[06:11]
"Wait, where did my basket go? I was just on the checkout page and now I'm... on the homepage? I don't understand what happened." — p3
confusionnavigationdisorientedbasket+
[08:45]
"I'm not sure I'd put my card details in here. There's no padlock icon and the URL looks weird... it just doesn't feel like a real checkout page." — p2
doubtcredibilitysecurityprivacy+
General Context
[22:40]
"In my day job I'm switching between Slack, Jira, and about four different spreadsheets just to track one project. It's... exhausting, honestly." — p3
frustrationtoolingworkflowneed+
[28:17]
"The other tool we tried had this brilliant feature where you could just... tag everything in bulk and then see it all on a board. We don't have anything like that. I'd pay extra for it." — p4
delightrequestcompetitorwillingnesstooling+
[34:22]
"The delivery estimate said 3-5 days but then at checkout it changed to 7-10. That's annoying — I was making a decision based on the faster number." — p5
For the right-gutter layout (E): as viewport narrows, tag labels collapse to small coloured squares.
Same height as a tag badge, same colour — just no text. Enough to know "this quote was tagged" at a glance.
Click the toggle to preview the collapsed state.
[04:23]
"I keep clicking 'Continue' but nothing happens... I've tried three times now. Is the site broken or am I doing something wrong?" — p1
frustrationusabilityperformancerequest+
[22:40]
"In my day job I'm switching between Slack, Jira, and about four different spreadsheets just to track one project. It's... exhausting, honestly." — p3
frustrationtoolingworkflowneed+
[25:03]
"We usually do a team standup at nine, check the dashboard, then just... react to whatever fires come in. There isn't really a structured process." — p1
workflowprocessworkaround+
Layout Comparison Notes
Layout A (de-emphasis): Cheapest to implement — CSS-only changes. Best candidates: A5 (0.65rem + 55% opacity) or A6 (0.65rem + 35% opacity). Tags are still physically below the quote, so they still add vertical space. Washed variants (A7/A8) make user tags look identical to AI tags — defeats the visual distinction.
Layout C (two-column): Tags no longer contribute to vertical scroll height — they fill horizontal space instead. Good for widescreen laptops. The 140px tag column costs ~15% of a 900px content area. Tags feel clearly secondary: spatially "over there." Responsive: on narrow viewports, could collapse to inline-below (A) or squares.
Layout E (right gutter): The cleanest quote body — zero tag clutter inside the blockquote. Tags float in a dedicated margin with their own visual rhythm. The dashed border separates the reading zone from the coding zone. Similar to ATLAS.ti's margin model but adapted for discrete quote cards instead of continuous text. Responsive: gutter collapses to coloured squares (see demo above).
Responsive collapse: Natural extension of E. As the gutter narrows, tag text disappears and only the coloured square remains. Square = "tagged", no square = "untagged." Hover on a square could show the label in a tooltip. On mobile, the squares give a vestigial signal without taking any width.