User interface design issues and discussion

[katestange]

This is some feedback on an initial figma design:

A few initial small thoughts:

1. I like the small 'restart/pause' pane being very visually separate from the other controls, hence noticeable, that feels intuitive to me
2. The way the controls are laid out for Change Sequence feels very intuitive to me -- a box for OEIS, and tabs for browse and saved, uses the standard user experience with things like tabs to make it easy to figure out
3. I love the floating panes feel. Do they collapse or hide when we don't want them?
4. I think maybe the big picture thing for me, though, is that the main pane has a tad bit of "airplane cockpit" feel because there are so many controls visible. In the chaos game, the controls are really spaced out so that it takes a lot of scrolling (perhaps bad) but it feels very gentle to approach (good). I think the benefits outweight the downsides with that. In fact, some instructions are shown around each control and the controls themselves are even downright clunky, but there's also lots of space for each button or option. I think this invites the user to play with each control before moving on to the next, in a thoughtful way. I think the clunkiness actually makes you want to use them. It may be that the framework should pull a small instruction sentence or two from the visualizer for each control. In general, I think this is a place where we could really distinguish ourselves. I've seen a lot of math apps where people have added tons and tons of exciting controls and there's just a huge panel full of sliders and drop-downs and you have no idea what any of them do -- if you're lucky you can open up documentation. I think something to aspire to is an interface that doesn't confuse, overwhelm, or require referencing docs. It allows the user to learn on the go. That's why I like the little pop up question marks, but I'd like to take that further and imbue the whole interface with an inviting exploration feel. So even starting with the "Sequence" panel, here's what I might ask:
   do we need modulus showing all the time? If so, maybe we should give it more space and an explanation like "Take the sequence modulo n (what's this?)" where you can interact with the "what's this?" to find a definition of modular arithmetic. And maybe the framework should require visualizers to list their parameters in order of approachability for a user, and display them in that order, with increasingly complex options only being apparent later in the user experience somehow

Some other small thoughts

1. note that the box for OEIS number in the Change Sequence panel might become a box for formulas that involve OEIS, or maybe we want two boxes, one for OEIS numbers, one for formulas

2. In "Frame 7", when the change sequence pops up, I would love to see that use a larger percentage of the screen, so more pictures can show

3. We could possibly maximize screen real-estate a bit more by making the footer thinner (all text on one line maybe) -- or maybe no footer at all? it attracts the eye without being important, since it's the brightest colour... and that colour may even clash or overwhelm a given visualizer perhaps. maybe I'd vote to get rid of it (maybe if the text is necessary it could float or something?)

4. Wordiness could be brought down in a couple places, e.g. in the Change Sequence, maybe "Saved Sequences" could just be "Saved", "Gallery of example specimens" could be "Specimen gallery"

5. I think maybe instead of "OEIS Sequence" the header should just be "Sequence".  Both for simplicity and because we will have other type of sequences, such as formulas the user enters.

6. Overall, I think the control panels still have a lot of lines, which feels slightly busy to me. Like the "sub"menus have a left line to indicate indent, and every entry area is a box

7. I like the circled question marks or something equivalent -- I assume this means you can mouseover to get instructions

[gwhitney]

I think most of the above are either implemented or we went another way, but it could be worth a review vis-a-vis what has ended up in ui2.

The rest of this discussion below consists of remaining UI design issues that the team prioritized as below beta, often because of the need for further discussion.

This first one is:
Revisit some aspects of tab minimization/maximization:

-- From initial (docked) state, minimizing one tab and then immediately unminimizing it does not return to the same division of the vertical space in the dock (typically the tab ends up smaller than it was before the minimization

-- Cannot simultaneously minimize both tabs: when one is minimized, the other maximizes.

[gwhitney]

What do we want clicking on the Numberscope logo while in the specimen editor (scope mode) to do? Nothing, because that is the default screen? Or perhaps this is a way to deal with the feedback the Delft team got about how it's not clear what's going on -- it could pop up a welcome/about overlay that would offer a tutorial? Or something else?

In ui2 as of this writing, it simply resets the visualizer.

[gwhitney]

Do we want a more deeply organized, more swishily-presented Featured Gallery/Saved specimens page/pages? For example, it could have tabs for each different visualizer or something like that.

[gwhitney]

Should the Gallery be a modal rather than a separate page? Pro of a modal: if you open the Gallery and then close it, the previously running visualizer is still in progress (right now, if you open the Gallery and then hit back, your visualizer starts running again from the beginning). Con of a modal: there would be no independent URL that goes straight to the Gallery, and there must always be some visualizer running "behind" the Gallery.

[gwhitney]

Radical idea: Should the "Choose visualizer" and "Choose Sequence" popups be non-modal, draggable-dockable tabs just like the "Visualizer parameters" and "Sequence Parameters" tabs? Maybe with some global way to completely hide/restore any/all of the tabs on an individual basis? I am not actually pushing that idea, just wanted to float it while it was in my head. One big downside to having them be just like the parameter tabs is that at least with the current layout, they would have just a single column of previews, so you'd have to do a lot of scrolling to see all of the options.

In the very brief team discussion on this, there was a worry that it would make things too busy.

[gwhitney]

Right now, the code is going to some trouble to gather "lastEdited" values (string forms of timestamps) and pass them into the SpecimensGallery component (used to display Featured Specimens, Saved Specimens, and the Switcher previews). And then inside the SpecimensGallery, that information is being ignored. I strongly suspect the intention was to sort the specimens with most recent "lastEdited" first but that the Delft team just happened not to get to it. Should we implement that feature before ui2->main, just make it an issue to be dealt with sometime, or not even worry about it (and maybe rip lastEdited out of the code altogether if it's not really gonna be used anywhere)?

[gwhitney]

Would we like a drag-and-drop-to-reorder functionality on the switchers and/or gallery? So you can move your favourites to the top?

[gwhitney]

Do we want a mechanism for hiding/unhiding the seq/viz parameter tabs altogether, making the visualizer canvas as large as possible? Or a way to enter browser full-screen mode with only the Visualizer canvas visible (no browser headers, no Numberscope top bar, just the Visualization and "ESC" to get back to the browser)? (Or both?)

[gwhitney]

Since we now have generic play/pause/rewind controls, should we consistently display the frame number since last restart somewhere, or make it available easily somehow, in a way that individual visualizer writers don't have to worry about?

[gwhitney]

What can be done to make the tooltips more salient? (One of Kate's early testers did not notice them.) Maybe some of the following:

1. Move the question-mark icon
2. Make the question-mark icon larger/different color
3. Make the tooltips pop up just on hover over the field and/or its label, at least when the input area is not focused. (If this is done, are the question-mark icons still needed?)

[gwhitney]

Should we make the parameter pane fonts bigger? (More inviting perhaps)