Semble · Design Exploration

Connection Direction — UX Options

Built around Semble's existing New Connection modal and Connections feed. Every option below is a variation that drops into your current patterns — the goal is to make which card supports which unmistakable at creation time and when browsing. Toggle the switches and watch the real components update.

1Baseline — your current modal & feed

A faithful reproduction of what ships today, for reference. Direction is currently carried by card order (source on top / left), the label pill, a small arrow, and the teal ⇅ flip button.

New Connection modal
Connections feed (profile)
C Cosmik Testing · 12d
W
writings.hongminhee.org
Why craft-lovers are losing their craft
⇢ OPPOSES
D
en.wikipedia.org
Deep biosphere
  • Ambiguity today: the pill says OPPOSES but not what opposes what — a reader must infer that left→right = source→target.

2Options — inside the New Connection modal

Toggle each idea on the live modal below. All are additive to your current layout — none require a redesign.

A · Sentence preview
Reads the pill + both cards as a sentence.
B · Directional pill
Pill text points source → target.
C · FROM / TO tags
Tiny corner badges on both cards.
D · Role accent
Green source · teal target.
E · Flip button
Make “swap” legible for first-timers.
Relationship
Click the green pill in the modal to open your real label dropdown.

Why these fit Semble specifically
  • Recommended Sentence preview (A) resolves the exact confusion at creation time and reuses the copy you already write (“Explain how this supports…”). Highest ROI, near-zero visual cost.
  • Directional pill (B) is a one-word change — “Supports” → “supports ↓”. Works because several of your labels are inherently directional (Leads to, Addresses, Explains) where A→B ≠ B→A.
  • Flip (E): you already have the ⇅ button — labeling it removes the “what does this do?” beat for new users, then can graduate back to the icon.
  • FROM/TO + accent (C, D) are lightweight redundancy for when card titles are long and the reading order gets ambiguous.

3Options — in the Connections feed

The feed is where direction gets lost most, because there's no interaction to lean on — only the static label between two cards. These options make it readable at a glance.

Arrow style
Caption
“A supports B”, above the pair.
Color by family
FROM / TO tags
Relationship (demo row)
C Cosmik Testing · 2d
G
graze.leaflet.pub
For You, For Everyone — Graze
How Graze built a “composable personalization” layer for the open social web.
✓ 2↳ 1
H
en.wikipedia.org
Humanitarian aid
Humanitarian aid is material and logistic assistance, usually in…
✓ 1↳ 1
Reading direction at a glance

The caption + directional arrow combo is what makes the feed self-explanatory: a scanner reads the sentence, and the arrow confirms the geometry. Color by family lets someone triage supportive vs. opposing links without reading at all — consistent with the green/red you already use on the pills.

4Desktop vs. Mobile

Same concepts, different input. On desktop the modal is a centered dialog with the ⇅ flip and (optionally) a hover-to-reveal FROM/TO. On mobile there's no hover and thumbs need room — so the modal becomes a bottom sheet, the label uses your existing full-screen dropdown, and the sentence preview earns its place since long titles wrap.

🖥️ Desktop centered dialog
dev.semble.so/home
  • Mouse can use the compact or a labeled Swap.
  • Hover a card → reveal FROM/TO (optional).
  • Room for the sentence line without crowding.
📱 Mobile bottom sheet
9:41◍ ▮▮▮
← New Connection
FROM
W
Wesley's notes
notes.wesleyfinck.org
Wesley's notes supports The generating functional…
✓ Supports
TO
A
The generating functional of correlatio…
arxiv.org
  • Cards stack vertically — the top-to-bottom order carries direction natively.
  • Label opens your existing full-list dropdown (already touch-friendly in the screenshot).
  • FROM/TO tags are always-on here (no hover to reveal them).

Recommendation, in your context

SurfaceShip thisEffort
New Connection modalSentence preview line under the source card + directional label (“supports ↓”)Low
Modal (first-run)Labeled “⇅ Swap” until the user has made a few connections, then collapse to the iconLow
Connections feedSentence caption above each pair + directional arrow in the pill; keep green/red family colorsLow
BothFROM/TO tags + role accent as optional redundancy for long titles / accessibilityMed

The single highest-leverage change is the sentence preview: it turns your typed relationship taxonomy (Supports, Opposes, Leads to, Addresses…) into a sentence the user reads back before hitting Create — catching reversed connections at the exact moment they'd otherwise be committed.