I am creating a simple web site/app for testing JavScript code in the browser, similar to jsbin.com, jsfiddle.net, and tinkerbin.com.
The usual approach is to have 3 code editors (for JS, CSS, and HTML) and one preview window.
Each of the sites listed above uses a different approach. jsbin.com uses two columns, side by side; the left column contains a tabbed editor and the right contains a preview window. jsfiddle.net uses four panes in a two by two grid. tinkerbin.com uses two columns; the left stacks three editor panes on top of each other, the right contains the preview.
I am no usability expert, but personally I do not see a need two have more than two panes on the screen at a time. For that reason, I favor the simple two-column tabbed approach. However, when discussing the idea with others, a few people said they liked to have more than one code editor on screen at once, and that they'd like the interface to be fully customizable.
I don't think I agree with making the interface "fully customizable," because:
- I don't know how to determine how "fully" customizable it should be,
- it's a lot of extra work, and
- I think it distracts the user from the main point of the application (writing and testing some code).
Should I compromise by allowing the user to select a predefined layout (from one of the above-mentioned three) and add layouts later if there's a demand for them?
Should I go with my personal preference and stick with the split layout?
Or, should I could try to tackle the problem of making the UI fully customizable?
If anyone can offer some advice, preferably based on professional experience or the results of a study or something along those lines, I would appreciate it.