Campaign builder · ornament positioning · v1 exploration
Where does this go?
The ornament model survived review; the positioning control did not. Four replacement strategies for the same question, each drawn on three formats — because the anchor set changes with the format, and the first artifact showed the control on one format and let everyone assume it was universal.
Working scenario throughout: Black Friday theme, ornament 1 = sticker “40% OFF”, ornament 2 = stamp “ENDS SUN”, countdown toggled on as a price tag “02:14:09”. Same campaign, three surfaces.
§0 · the record
What failed, and why
rejected · 08-24
The glyph row from /campaign/ornaments. Five symbols, zero nouns, and the same five drawn for every format even though a topbar only honours two of them.
Three separate failures in one control. ① The glyphs name nothing — “—” meant trail to its author and nothing to anyone else. ② It looks universal but isn’t: which options exist depends on the format and size, and a segmented row has no way to say why an option is missing. ③ It points at nothing — the control lives in the panel, the consequence lives in the preview, and nothing connects them.
Every strategy below fixes ① differently, and all of them fix ② the same way: illegal anchors are absent or explained, never silently equal.
§1 · shared vocabulary
Six anchors, three formats, plain words
Whatever control wins, the nouns are fixed here. An anchor is a named seat, one ornament per seat, and the seats a format offers come from its family — a bar has no corners because its ends are its corners.
| Anchor | Plain name in the UI | Topbar | Inline card | Modal / mat |
|---|---|---|---|---|
lead | Start of the line | ✓ | ✓ (before the copy) | ✓ (before the copy) |
top | Above the headline | — | ✓ | ✓ |
trail | End of the line | ✓ | ✓ | — |
beside-cta | Next to the button | — | ✓ | ✓ |
corner-tl | Top-left corner | — | ✓ | ✓ |
corner-tr | Top-right corner | — | ✓ | ✓ |
Kind constraints stack on top (a disc never fits a 44px bar; a ribbon only takes a corner) — those rules are the model’s, shown failing on the ornaments page, and every strategy below inherits them.
strategy A · cheapest
Say it in words
A plain Select per ornament, options are the
plain names from §1, filtered to the current format — with the disqualified ones listed last,
disabled, each carrying its one-line reason. TUI ships this control today.
on a Topbar
Two real options. The disabled rows are the format teaching itself.
on an Inline card
on a Modal
strategy B · the schematic
The format’s own map
One wireframe of the chosen format, drawn once above the ornament list, with a socket at every legal seat. Tap a socket to put the selected ornament there. Occupied sockets take the ornament’s number; the countdown takes C. The map redraws when the format changes — which is the whole point: the control cannot claim seats the format doesn’t have.
Topbar map — 2 sockets
Inline card map — 6 sockets
Modal map — 5 sockets
Centred formats put top in the middle — the map shows that
for free, where a dropdown’s “Above the headline” can’t say where above.
strategy C · thumbnails
Pick a picture
Radio cards, one per legal seat, and the face of each card is a thumbnail of this format with the ornament in that seat. The same move the format picker already made — options that show what they mean. Cost: needs a miniature renderer, and six cards of space where A needs one row.
Topbar — 2 cards
Inline card — 6 cards
Modal — 5 cards (2 shown)
Thumbnails also solve the disc problem visually — a spinwheel card face on a topbar simply cannot be drawn, so the option isn’t there.
strategy D · direct manipulation
Place it on the preview
No positioning control in the panel at all. Grabbing an ornament — from the tray or from the preview itself — lights up ghost sockets over the live render; drop it in one. Still snapped, still six seats, never free-pixel placement: this is the map strategy drawn on the real thing instead of a schematic. Gold standard feel (Canva), highest build cost, and it pairs naturally with the new preview-on-top layout.
Black Friday — everything in the store
Every plugin, every bundle. Through Sunday.
Get the dealMid-drag state: the stamp is over the “end of the line” socket (filled ✓), the other free seats stay ghosted, occupied ones don’t light at all. On drop, the panel row’s position field updates — the panel and the preview are two views of the same anchor value.
§5 · the panel, regardless of strategy
Two custom rows and a countdown toggle
Decided 08-26: two custom ornaments, and countdown is a toggle, not a third row you add — when on, it is an ornament like the others (same anchor/size seat-taking) plus its own config (mode, end instant). The positioning control from whichever strategy wins slots into each row where “position” appears.
Ornaments · 2 of 2 seats used
The countdown row carries both halves: shared ornament config (position, drawn-as kind) and its own config (evergreen/fixed, the instant). Off = the row collapses to the toggle line.
Why a toggle and not a third seat: the countdown’s copy is not authored — it is the clock — so a free text field would be a lie, and “2 of 2” stays an honest counter for the tokens the marketer actually writes. It still takes a seat on the surface: three placed things, max one per anchor, same collision rules.
Drawn-as: the countdown renders through an ornament kind (price tag reads as “time is money”, stamp as urgency, wheel as fairground). Same taxonomy, so the format rules apply unchanged — no wheel-clock on a topbar.
§6 · the choice
Tradeoffs, and a suggested path
| A · words | B · schematic map | C · thumbnails | D · on the preview | |
|---|---|---|---|---|
| Self-explaining | reads, doesn’t show | shows the seat | shows the result | is the result |
| Format-awareness | disabled rows + reasons | the map redraws | cards appear/disappear | sockets appear/disappear |
| Panel space | one row | one shared map for all rows | ~6 cards per ornament | zero |
| TUI today | Select — ships now | custom, small | custom, medium | custom, large + DnD |
| Fails when… | names stop matching mental pictures | wireframe too abstract at 6 seats | thumbnails too small to differ | touch devices, dense surfaces |
decided · 08-26 · Titus
Strategy D wins. On-preview anchor sockets, with the
socket set discriminated per ornament kind: anchors(format) ∩ anchors(kind family) ∩ unoccupied.
A ribbon lights only the corner sockets; a disc lights nothing on a bar (and the kind picker is
format-filtered first, so that state is unreachable); occupied seats stay dark. Changing a placed
ornament’s kind to one its seat can’t hold auto-moves it to the nearest legal seat, with a notice.
Tab-scoped: sockets and dragging are armed only while
the ornaments tab is active — on every other tab the preview is inert display. The per-row position
Select (strategy A) stays underneath as the keyboard and screen-reader path;
D is a pointer gesture, never the only way.
Original suggestion (A now, read-only B echo, D as end state) kept for the record — overtaken by the decision above.