website design – Inline vs Modal Dialog Editing for complex widgets

I am building an application where user’s can create very complex widgets using a browser. The two main approaches I can think of to allow for this is inline editing and modal dialog boxes.

Unlike a simple text field, these widgets will probably have several tabs of information that they need to configure. One of the tabs will have to be a preview of the widget, and the others will be setting various properties and providing data to the widget.

In addition to all of these complex options, users can move the widgets around too, which means just about everything on the screen is interactable in some way if the widgets allow inline edits.

Popups have the advantage of letting the user deal with 1 widget at time, without thinking about the other ones, but I also worry that maybe they would feel disconnected from the other widgets on the page once they hop back. This does make the previewing of the widgets simpler though… and the page itself will resemble the actual product without all of the editing tools cluttering things up on the page.

Popups also make it easier to make a bunch of changes at once, and then bail out and not commit them. Inline edits could do this too, but then you’d have to present the user with dirty tracking UI.

The last consideration I have is that these widgets have a variety of types, and rather than provide a massive menu with 30 options, I wanted to allow users to refine the type of a widget while it was on the page. So for example, they put down a Media widget and can select from Image, Video, Audio, etc., and then they would allowed to do the inline editing for that type of widget. However this bares the complication that they can bail out of selecting the widget type while it’s still added to the page… something the Modal Dialog would have prevented. I could either not commit that widget to the server, but it may be confusing since they did at it to the page… but untyped widgets would invalidate the data model, which also causes problems.

I am leaning toward dialog boxes actually, but I am curious what the best approach is. I am not a UI designer – just a coder.

Widgets 1

Widgets 2