Should I use a popup window (lightbox) for edit and viewing details of grid records?

Question

I have a web application that allows the user to immediately do one of two things:

1) Search for records

OR

2) Create a new record

As a result, I have two links in the menu bar called Search and Create. If you click on the link, it takes you to the search or create page respectively.

After searching records and selecting a specific record from the search results grid, the user can choose to edit or view the selected record. Note: The search results provide a subset of the record data.

When the user chooses to edit or view a selected record:

Should I take the user to a new page to display the full record for editing or viewing

OR

should I open a popup window (draggable and expandable)/lightbox with the full record?

The latter option seems to have the advantage in that the user still sees the search criteria and results (albeit darkened). The user can easily close the window (or submit an edit) to return to the search criteria and results. Then, the user can quickly pick another record to edit.

However, I understand there are usability concerns over using a popup window. If app had the user navigate to another web page to edit or view, I would have to save the state of the search page (results, sorting order, criteria, etc.). This is a complex task. Is there some way to work around this?

Any thoughts are greatly appreciated.

Answer 1

I have several suggestions for this:

Make sure that the 'create a new record', 'edit record' (and preferably 'view record') are visualy and functionaly as close to each other as possible. This sort of consistancy makes it very easy on the user as they only need to see one of these forms to be familiar with all of them.

When showing the search results I you have several options for allowing a view or edit of the full data.

• A seperate page can, as you mentioned, lose context by moving away from the search results. How important is it to be able to keep this context? (btw, keeping track of the last page so you can go back to the search results after save etc is quite easy from a technical viewpoint and should not affect your decision).
• A lightbox will, depending on the amount of fields, cover too much of the screen. At this point it might as well be a seperate page.
• A popup can feel very 'removed' from the original data.

Some other suggestions:

• Use an expandable row. Each row of the search results would act like an accordian which, once expanded, shows the full info for that item. This can be either a one step (allow for immediate editing) or a two step (show non-editable info and an edit button which turns the fields editable).
• Use a full or part height, right hand slide in panel which covers 2/3 of the width of the screen and shows your info/edit. This will enable the search data to remain and can be easily laid out in the same way as a single page 'create new'. This can also be either a one or two step process.

Answer 2

For me the answer lies in how much data is in each row, and what other actions you might want to do from there. If there are only a couple of fields in each row and it's a "dead end", a lightbox makes sense. Dead end meaning there aren't any other actions that will take the user to another page.

If you're taking the user to another page to edit the data, obviously there's a lot more room for fields there. There's also more opportunity for users to navigate to another part of the site if that's a desired behavior (although now that I think about it, it probably seems like a bad idea to let someone navigate away while editing a table row).

However, either solution definitely removes the user from the context of the table. Tims had a good suggestion with the expandable row, and I'll also throw out edit-in-place as being really useful if the data supports it. Here's a good blog post on the topic of edit-in-place in tables, and there's a great post on table patterns at jankoatwarpspeed.com that includes expandable table rows.