Tag Placement Comparison — Bristlenose

# Tag Placement Comparison

Same quotes, different tag layouts. Compare visual hierarchy: does the quote text dominate, or do the tags?

AI 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
frustration usability performance request +
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
frustration usability performance request +
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
frustration usability performance request +
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
frustration usability performance request +
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
frustration usability performance request +
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
frustration usability performance request +
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
frustration usability performance request +
A8 · 0.65rem · washed + 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
frustration usability performance request +
A9 · 0.58rem · 35% opacity · maximum de-emphasis (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
frustration usability performance request +

## 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
frustration usability performance request +
[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
confusion navigation disoriented basket +
[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
doubt credibility security privacy +
[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
frustration tooling workflow need +
[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
delight request competitor willingness tooling +
[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
frustration credibility frustration delivery checkout +

## E. Right Margin Gutter (tags outside the quote)

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
frustration usability performance request +
[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
confusion navigation disoriented basket +
[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
doubt credibility security privacy +

### 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
frustration tooling workflow need +
[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
delight request competitor willingness tooling +
[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
frustration credibility frustration delivery checkout +

## Responsive Collapse (tag pills → coloured squares)

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
frustration usability performance request +
[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
frustration tooling workflow need +
[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
workflow process workaround +

### 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.