Multi-pane code editor with preview: help me find a good compromise between usability and complexity

Question

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:

1. I don't know how to determine how "fully" customizable it should be,
2. it's a lot of extra work, and
3. 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.

Answer 1

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?

Yes, I think that its a good strategy. Personalisation is a good thing, especially if you let your users choose from different choices. As a professional system developer I would like to have my setup the way I want it, and (to my knowledge) there are not two developers who have the exact same view of code. To mention one of a million things: I like to have line numbers always visible, but my colleague doesn't. That's why this option excist in the IDE.

Should I go with my personal preference and stick with the split layout?

Since it's your design, you should most definately stick with your original idéa. Customization and personalisation can come in later, but a good thing is to mention it on your site's about-tab. This way you let your users know what plans you have.

Or, should I could try to tackle the problem of making the UI fully customizable?

Fully, as you say, is a very daunting task. In my view - focus on the things that need to be there first and iteratevly add features as you continue to develop your app.

Good Luck!