Usage of Popups

Question

I am primarily a developer tasked with UI design.Please forgive my ignorance. I am developing a Form based application. There are multiple editable fields in the Form and each of these form elements are grouped as separate grids. I need to provide a way to edit these. Is it a good idea to open actionable modal popups for each of the grid. For instance if there are 5 grids in the page, I can open up popups for editing each of those individual grids (also for removing or adding rows elements.)

Can I also use one modal popup from another?

If this is bad UI design, can you please suggest me a better way? Your help is highly appreciated.(Also if you can, please provide further resources for reading up on this.)

Answer 1

In general it's best to avoid popups as it interferes with the user's sense of flow as they work. Cascading modals are even worse as the user will need to "pop" out of multiple levels. UIs in the late 80s through mid-90s were very fond of this pattern, and it sucked.

These days, in-page editing is all the rage. You can find examples all over. Depending on whether you're writing a desktop or browser-based application it may be as simple as adding contenteditable=true to your container and associating a bit of Javascript.

If you need to do validation on the values, that's its own problem, and there are plenty of ways to do it without a modal dialog.

Here's a killer list of examples for inline editing:

• http://designingwebinterfaces.com/ultimate-guide-to-table-ui-patterns

Search this site for more specific examples; from the suggestions on the right:

• Do people like/hate popups, even if they're useful?
• Inline editing or modal popup
• Which is the best design practice for edit data in RIA?