Currently, Dabblet employs a system of tabs to show/hide panes, with preconfigured options of which panes to show for every tab:
There is also a setting that modifies the layout of those panes:
This was done to minimize cognitive overhead and provide easy, pre-baked options to the user of the pane combinations they are most likely to need. However, after my colleague, Doug Schepers recently suggested a better idea, I’m starting to think it was just UI overengineering, as it has a number of issues:
- There are certain pane visibility combinations that simply aren’t possible, e.g. HTML & JS & Result. Out of the 15 (2⁴ - 1) possible combinations of 4 panes, Dabblet currently only offers 8 (CSS, HTML, JS, Result, CSS+Result, HTML+Result, JS+Result, HTML+CSS+Result).
- The view setting mixes pane visibility & pane layout (The “Separate” option actually hides panes), which can be confusing.
His idea was to use a control to toggle pane visibility individually, allowing all 15 options, and a separate control for their layout. The tabs would be replaced by something like this:
and the view setting with something like this:
Like all brilliant ideas, it seems obvious after somebody else describes it to you. I later discovered that JSBin does something similar:
Although it doesn’t let you control the layout of the panes, and just treats it always as “Vertical”, which certainly simplifies implementation.
Implementation of the idea described here for Dabblet is actually pretty hard. The “Horizontal” and “Vertical” states are quite easy (although such a major change is always a lot of work), but the “Mixed” one would require a pre-set layout for all 15 possible combinations. So, before devoting all the time required to implement it, we felt it would be good to ask the community: Do you think it’s worth it? Would it make Dabblet’s UI more straightforward? Any feedback is welcome, even ways to improve on this, if you have any ideas.