6

I have an application that with a layout editor, somewhat similar to the WinForms editor in Visual Studio -- with drag-and-drop widget placement, a property panel, etc.

I'm adding the option to have nested layouts, where a placed "NestedLayout" widget (Layout B in the image) can represent an entire other layout.

Sketch of nested layout editor

What kind of interface would you recommend for allowing the user to edit these nested layouts? Working directly in the existing frame would be too cumbersome, since a lot of the screen real estate would already be in use by the rest of the top-level layout.

Possibilities might include loading maximizing the nested layout in the top editor (perhaps with some sort of zooming transition), popping up a new editor above, etc.

Have you seen any examples of editor applications that handle this kind of scenario effectively?

Improve this question
3
  • Can I make a 'yo dawg' joke?
    – Rahul
    Commented Sep 21, 2010 at 21:56
  • I'm not clear on something: what is Layout B? Is it just a container of other object? Or is it a kinda like a tabbed widget that contains multiple pages/sheets of widgets?
    – Hisham
    Commented Sep 22, 2010 at 2:10
  • Layout B is another layout (think of it as another HTML page contained in an iframe).
    – kpozin
    Commented Sep 22, 2010 at 13:10

6 Answers 6

Reset to default
3

My first reflex when presented with the above screen would be to double click on the nested layout to edit it. I agree with you that having the user edit the nested layout in the existing frame isn't the right solution and it could become quite confusing for your users.

I would present the nested layout, fully rendered, in a grayed or faded state and display a message on mouse over that explains how to edit it (e.g. "Double-click to edit"). I would also choose opening up a second editor on top of the first one instead of maximizing the nested layout with a zoom effect. I find that the zooming effect, while quite clever, can easily confuse some users - you have to be very careful with the UI so they aren't left wondering what just happened and why all their widgets have disappeared suddenly.

Improve this answer
1
  • What if we also show some form of return navigation? Perhaps a cookie-crumb bar, like Adobe Illustrator provides when editing nested groups of objects, or an outline tree view that shows both the parent layout and the child layout (and their other widgets) in context.
    – kpozin
    Commented Sep 23, 2010 at 21:37
2

Have you looked at how WYSIWYG web design tools handle iframes? Usually the iframe (or other embedded object) is delineated as a non-interactive object that one must doubleclick or otherwise activate to bring up the editor for that specific object. In the case of iframes, I remember tools like Dreamweaver popping up a property pane that allows you access to the iframe's source page from there.

It might not be the best usability, but depending on your audience, following WYSIWYG conventions might be a good call to make.

You'll probably also set expectations depending on how you render the NestedLayout in your parent control. If it's fully rendered, users might expect to be able to interact with it. But if it's just a frame with an icon representing its status as a "widget" or embedded object, that might have a different effect. Try testing both out in a high fidelity interactive mockup to see what people do. This would be great to test with a remote usability test based around a specific test scenario like "Interact with the NestedLayout" or something!

Improve this answer
1

Take a look at the IntelliJ IDEA Java IDE. It has a very nice editor for GUI forms with nested layouts, supporting quite usable drag-and-drop editing.

Improve this answer
1
  • Thanks for the answer. Can you describe how the nested layout editor works and/or post a screenshot?
    – Patrick McElhaney
    Commented Sep 23, 2010 at 15:37
0

Consider representing re-usable *control*s. So you'd edit the second layout as a whole new layout, but in another tab/window of the designer, like an user control on Visual Studio. If the user doesn't need that much space, it won't care about smaller screen real estate (maybe it would just contain a couple of buttons anyway).

Improve this answer
0

At first I was going to add an answer similar to some of the above, flash for example grays out and locks the enclosing context if you double click on a compound object. But then I realized that in terms of design you depending on your application you might not want to make it too easy to edit "Layout B". If what you show in your example is what is usually done in a GUI editor, it implies that everything we see on the screen is in one Object. Making in easy to edit nested layouts will promote adding more and more functionality to this one object, causing layout A to contain all the widgets.

Putting up a gentle barrier to editing nested layouts will in term eventually cause the user to break the implementation apart and therefore create better encapsulated objects that are easier to deal with.

E.g. the Qt Designer lets you edit the content of each tab of a window inside the gui editor, if you are not careful you will get an implementation of a window that does the work of all of its tab. Which is really not a good thing.

Improve this answer
0

Adobe Flash

You can have compositions (called Symbols in Flash), which you can interact with. Inside these compositions you can have layers and other compositions. The experience is somewhat bad because Flash is so slow to work with and has an overly complicated UI with buttons placed the wrong places and lacks shortcuts. But it's a great starting point for inspiration.

Some kind of mix between Interface Builder, World Craft and Adobe Flash would rock for editing nested compositions.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.