Making selecting easier in layout software

I have been writing an entry about never telling a user off (guess what – they won’t like it) and I had an idea for improving page layout software that I would like to share.

Please excuse the web design slant of this post, I am fighting with Dreamweaver at the moment and it is this that got my subconscious working on a solution.

One of the common problems with layout software (and this is true for all layout software, 3D design, DTP etc as well as web page design) is that because of the layered (and/or nested) nature of the data, any object you want to select may not always be at the top. This means that, depending on how well the software in use has been written, multiple clicks may be required to select an object that is below the top – each click moving down a layer. If the objects have similar extents you may not know for sure when you have selected the object of your desire. In fact it may not be accessible at all until you hide the obscuring objects above. Even if they are not actually obscuring – as far as your eyesight shows you.

An example from a web design package: You have a table under a CSS div – the div is used to hide the tabular matter dependent on an event elsewhere on the page. It is often hard to select the table – even though you can clearly see it – because the edges coincide with the dv above it. Another example – you have a table in a div and they are both the same size. Dreamweaver is simply awful at handling this.

It occurs to me that there is an insanely simple way of dealing with this. 3D packages use it all the time, so couldn’t we implement it in 2D applications as well?

All 2D applications display their layouts in what is effectively an “orthogonal view”. This means that there is no parallax; two identically sized objects with the same origin will overlay each other perfectly and it will be hard to see or select the one “below”.  What I’m suggesting we need is the 3D or “Perspective view”. In TrueSpace or Blender or Maya or 3DMax or whatever, in order to resolve this kind of selection problem you switch to the 3D window or mode and spin the model about the notional Z axis (and perhaps a little about Y as well)  so that you can clearly see the stack of objects. Then you select the one “behind” and process it in whatever way you require.

I thought that a similar mode could be made available in a 2D layout package via a hotkey that spins the page layout and reveals all the objects – parted slightly during rendering to give the appearance of a stack and to make unambiguous selection possible. Now you can easily select an object at any depth within the stack. Some small amount of zooming and panning would probably be useful here. Once the selection is made the hotkey is released and the screen returns to 2D – but the software must not lose the selection that has been made (you wouldn’t believe how easy that is nor how often it happens).

This could be very simplistic and stack everything in the order that the objects appear in the source file. Or we could get really clever and show the stack according to any CSS rules to ensure that it is ordered in the same way that it would be rendered by a browser.

So, what is selected here?

What is selected=

Wrong… it’s a div that is ABOVE the table!

The 3D view separating the objects

As far as Dreamweaver goes, currently I don’t think Adobe have bought a 3D company so there is no chance of 3D from them yet. But perhaps Adobe will want to add 3D to Flash to make it compete with HTML5? Now if that happens then we could be in for some fun.

Or maybe someone could develop a plugin?

In the mean time, what are the other companies waiting for?

Leave a Reply

You must be logged in to post a comment.