The studio

Strivelabs · Chat

Designing the chat mode picker

I love the small details in the Claude desktop app. This is how I took after its effort slider for a mode picker in Strive’s composer: seven directions, an audit of how each one feels, and the one I picked.

My part
A solo experiment: the directions, the prototypes and the interaction audit
Prototyped in
Claude
Status
Explored. We later moved to one mode
Good afternoon, Maya Effort Balanced Deep Dive Faster Smarter Ask anything… Balanced Deep Dive
Effort at Deep Dive: one word on the pill, a slider behind it, and a composer that glows a little deeper.

Backstory

Three modes, one composer

  • Strive’s chat could answer in three modes: Quick, Balanced and Deep Dive. Fast and lighter at one end, slower and more thorough at the other.
  • Picking one meant a word-heavy dropdown. I wanted a control in the composer that shows the trade-off at a glance, without three descriptions to read first.

Homework

Borrow the feel, not the pixels

  • I love the UX of the Claude desktop app, and its effort control is a favourite: a pill with one word on it, and a popover with a slider from Faster to Smarter.
  • So I used it as the starting point for an audit of the ways a switcher could live in our composer. The Claude-style slider was one. The rest each tried something of their own: a segmented control, an orb, a ladder, a meter.

Options · prototyped in Claude

Seven ways to pick a mode

  • I prototyped them in Claude on the same composer, in three families: visual-first (1a to 1c), the Claude-style slider (2a) and gesture-first (3a to 3c).
  • Each one sits in the composer’s bottom bar, and the composer’s outline glows a little deeper as the mode rises.
Direction

1aRising signalsliding segmented control

Mouse, keys or touch

Good afternoon, Maya

Ask anything…

Try all seven. The mode carries over as you switch, so you can compare them on the same pick.

The audit · before choosing

Feel it, then pick it

  • Claude gave me working prototypes fast. But I didn’t want to leave them as they came out, or choose one from how it looked. A mode picker gets touched every day, and how it moves is most of the design.
  • So before choosing, I ran an interaction audit on the same prototypes and rebuilt all seven as v2. Then I picked by feel.
Direction
Build

2aEffort sliderClaude-style, glitter at max

Mouse, keys or touch

Good afternoon, Maya

Ask anything…

Start on v1: open it, drag the thumb, click away. Then switch to v2 and do it again.

Nothing jumps

  • Labels keep their width. v1’s pill grew and shrank between Quick and Deep Dive. Now every label holds the widest word’s space.
  • Popovers fade both ways. v1 popped in and snapped shut. Now they stay mounted and fade from their anchor, 160ms in and 130ms out.
  • Animate on change only. v1 replayed the label’s slide every time a popover opened. Now it plays only when the mode changes.

Easy in the hand

  • The thumb follows the pointer. v1 jumped from stop to stop. Now it moves 1:1 with a 32px+ hit area, then settles on the nearest stop.
  • No invisible layer. v1 hid a backdrop over the page, so the next click only closed the popover. Now an outside click or Esc closes it, and the click still lands.
  • Tooltips on purpose. v1 used the browser’s title tips. Now they wait 450ms on hover, show on keyboard focus, and hide while a popover is open.

For everyone

  • Keyboard complete. Arrows, Home, End, Enter and Esc. Focus moves into a popover when it opens, and back to its trigger when it closes.
  • Screen readers. A radiogroup, a slider with value text, a listbox, aria-expanded, and a live region that announces each change.
  • Touch and motion safe. Hover styles only for pointers that hover. Reduced motion stops the glitter, the shimmer and the orb’s pulse.

Design call

One word, one slider

  • I picked 2a, the Claude-style effort slider. It explains the trade-off in very few words: Faster at one end, Smarter at the other, and the mode as one word on the pill.
  • A change of mode is loud enough to notice. The composer’s outline deepens, and at Deep Dive the word shimmers and the track fills with glitter.
  • And the handle is easy to grab: a 28px thumb on a 16px track, with room around it for a finger.
The neatest one on paper was the hardest to read.

What happened next

Then we went to one mode

  • The picker isn’t in Strive today. We tried it out, then moved to a single mode: the platform now picks the model for each task on its own.
  • It’s the lesson below taken one step further: the calmest picker is the one you don’t have to touch.

What dried

What I’d keep

  • MissTried fancy directions next to the plain ones. 3a looked neat, one control and no popover, but nobody would know to click it to switch.

    LessonMinimal is the best. Skip the fancy that makes a control harder to use or to read.

  • Missv1 looked right in a still. In the hand, labels jumped, popovers snapped and the thumb skipped.

    LessonFeel a prototype before you choose it. Smooth is a list of small things you only find by using it.

  • LessonPrototype with AI, but don’t stop at what comes back first. The design engineering is in the details.

If a control needs explaining, it isn’t the one.

Thenga’s studio + yard