User Interface Design Ideas

[katestange]

A place to store some user interface design ideas, including example websites.

[katestange]

I've always felt the user experience at this website is a good guide to interacting with a single visualizer. The controls are all at the right in a panel, it "hot modifies" when something changes there, there are presets. Each parameter comes with a brief explanation, sometimes a visual to help, and they are all inviting to play with. Not too complicated. No giant drop-downs.

Plus the visualizer is beautiful: https://experiments.withgoogle.com/the-chaos-game

[katestange]

Also, there's a "randomize" button on the ones that are complicated (like "Exclusions")

[katestange]

Also, I love the simplicity. It's isn't busy.

[gwhitney]

Seems like we may as well keep this issue open as one in our portfolio of "Ideas for aspect X" series (we have ones for visualizers, sequences, etc, etc.) So in that vein, here's another interface/idea question:

The MathML display of Formula sequences is pretty nice. Would it be good to enable/allow MathML display for all Formula parameters? What would the details of that be like? One possibility, if we wanted to get fancy, would be to have the MathML larger in size when you are not editing, and the expression language text format below it in shrunken typeface, but then when you click on the text version the MathML display shrinks (but does not disappear, and live updates) and the text entry gets big. Also I think if we work on this, the text entry/display boxes should support multi-line display, since the formulas can get kind of long and I find editing them gets pretty tricky when you can't see the whole formula.

And while on the topic of editing formulas, some highlight of the matching delimiters would be really helpful.

[gwhitney]

Allow links in the "description" texts associated with parameter input fields.

[gwhitney]

In ui2, are we now over-eager in reacting to changes in Formula input boxes? I like that number input boxes and the like re-run the visualization on the fly with every keystroke. But with Formulas, you just get a lot of the display dancing around as you type, which is sort of distracting and seems a bit gratuitous because of course you know that the expression isn't going to parse in the middle of typing it, and sometimes in the middle of an expression you are typing you get one that actually has a valid parse but then its evaluation causes an error because you are not done yet. Might it be more civil for Formula input boxes to not put up syntax errors, not send their new contents to the visualizer, until you signal that you are done typing in the box (either by hitting enter or clicking elsewhere or possibly just by not typing anything else during some timeout)? Then when you are done, it could either put up the syntax error if there is one, or re-start the visualization with the new formula if it parses OK.

Or would that asymmetry between the different kinds of boxes be too annoying/confusing? If we do want to experiment with formula boxes that need finalizing in some way, we could signal that they are in an "unfinished" state by making their backgrounds a very pale pink (say) while they are unfinished, and change the background back to white any time they have been finalized and parsed and sent off to the visualizer if they are OK. That would strongly signal their interaction is different and I think prevent any confusion. Anyhow, just an idea that might make the interface actually a bit smoother from the user's point of view. I am not actually certain I would like it until I tried it...

[gwhitney]

Speaking of input box backgrounds, should we have a background color on boxes that currently contain invalid values? That might help not miss some error that gets displayed up top... That hasn't been much of a problem lately, so not sure if this idea is worth the trouble, but I thought I would write it down while it is in my head.

[gwhitney]

And one more for now: as we are using formula boxes more and more, some of them have default values that are just a bit complicated. So often what I actually want to do is start from the default value and perturb it in some minor way to see what that does. But as soon as I start typing in the field, the light-gray default value disappears, and there's also no way to copy-paste it. So should we do one (or more) of the following?

• When you click in an empty field with a default value, that becomes the actual value as if you had typed in that default value, and you can start typing from there/edit it/or just delete it if you want? In this case, we have to be careful that default value doesn't come back like a zombie if you delete it completely. And if we do this, should it happen for all boxes or just the Formula boxes?

• Shy away from default values in favor of "initial values" that are really in the box and can be edited, at least for Formula boxes or maybe for any input boxes that have long/intricate default values now.

• Add a copy button in the corner of input boxes that lets you put the contents of the field into your paste buffer, even if it's just the default value? If so, should this be on all boxes, or just on Formula boxes (which are the only multi-line ones)?

[gwhitney]

@Vectornaut points out that for expoloratory purposes, sliders are often handier than numeric input boxes. Should we do one or more of the following:

• allow Paramables to specify that a numeric field should have a slider interface?
• allow the user to switch any numeric input between a slider and a numeric input box?
• just display every numeric input as both a slider and an input box?
  In the latter two bullets, the issue arises of where frontscope should get the slider range from, so perhaps they only apply to numeric inputs that have ranges explicitly defined in the code? And should we also have hints as to whether the slider for a given quantity should be linear or logarithmic?

[gwhitney]

I guess for integer quantities there might be some pseudo-logarithmic scale for sliders that allows 1..b as separate positons, followed by 2b, 3b, ..., b^2, followed by 2b^2, 3b^2,..., b^3, etc.