Seeking GUI inspiration for stepper control

Thanks for all the ideas. You’ve all inspired me, and that’s what I was looking for.

I have an idea that solves my problem (not all of it, but enough of it) in a way that feels both useful and peculiar. You may be aware that “useful and peculiar” is a combination that appeals to me brand-wise.

2 Likes

I don’t know exactly what those parameters does but this is an iconic approach.

2 Likes

Crude sketch, sorry. You could use ‘button leds’ for the selectors and just the words on the left (without box). As the whole design has a strong vertical direction I’d leave out the vertical lines/deviders. A horizontal one between the top and bottom led blocks could be useful

Ingo

1 Like

Probably taking it a bit too far :slight_smile: This way there is enough vertical room to make the botton-leds a bit bigger to distinguish their function, add a little dark ring around them. Or you could add tiny pusbuttons next to them.

Ingo

This is pretty self explanatory. The only things I’d change is the rise / fall replaced with arrows and the edge (in correct spot :hugs:) given a small arrow ←|

1 Like

My suggestion would be a display with a right click dropdown. You don’t need to see all the available options at once, just the selected option. So you could do this with a 4/5 character display (a bit like the track label displays on MixMaster for example. There would be 2 displays per column - one for Mode and one for Advance. The display shows the currently selected option. Right click on the display to open a popup menu which shows the other options, navigate to the option you want and release to select that option and close the popup.

2 Likes

I’m not too keen on context menu options myself. If it’s for advanced features or switching functionality then perhaps but for front panel as far as UX goes it should not really be hidden behind a menu, imo.

1 Like

Looking forward to what you come up with. I’m always on the lookout for new sequencers. I have yet to find one that does exactly what I want it to AND looks super nice at the same time (AND doesn’t take up the entire screen). :slight_smile:

I ended up doing something very simple: I added a + sign in the middle of the button.

Here’s how I made the tradeoffs (based entirely on personal taste):

  • The + sign distinguishes the stepper from normal two-state buttons, and kinda (perhaps non-intuitively) hints that there are more options than the one shown.
  • Displaying all of the options was way noisier than I wanted, even when the options could be represented as more-or-less meaningful icons.
  • I didn’t like encoding the options in a way that required a legend (such as by color). If the encoding requires a legend, that means it’s somewhat arbitrary. So people will have to either memorize it, which is a burden I don’t want to impose, or constantly refer to the legend, which seems like it would disrupt people’s creative flow.

My biggest heartache with the current design is that it’s still a stepper. You have to step through a sequence of options, requiring as many as five clicks to get to the option you want.

Eventually I might try coding a dropdown, to see how that looks. But not now.

About the + sign… I tried something fancier. I tried putting a star on the button, with as many “rays” as there are options. So the MODE stepper had three rays, and the ADVANCE stepper had six. The three-rayed star looked pretty goofy.

I tried highlighting the ray that corresponded to the current selection—making it a little longer and a little thicker. That looked even goofier.

I think the + sign solves enough of my problem for now.

2 Likes

Here’s the manual. It’s a work in progress, and the modules haven’t been released yet, so don’t tell anybody…

https://dhemery.github.io/DHE-Modules/modules/curve-sequencer/

2 Likes

Another option closer to the dropdown is to click one time and drag up or down like a dial to set other modes. Nice design of the manual.

I think there is a dropdown menu in the nanoVG example files.

Worth a look: