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

1) Search for records


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


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.

  • I apologize but I should have stated that there are 14 fields laid out vertically plus 4 headers. It is a fairly large form.
    – James
    Jan 4, 2013 at 16:48

2 Answers 2


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.
  • Thanks for your suggestions. In regards to keeping search context (bullet point 1), this is important to the user. It seems complex to me to save state given the amount and complexity of the information. For e.g., I have a dynamically building search form that I would need to save and rebuild when user returned back to search page. Also, I have to remember sort order, column layout, all search data, etc. I think it would be much easier to just hide the contents of the search and show edit/view contents. Then, I can hide edit/view and show search again when user is done.
    – James
    Jan 4, 2013 at 16:44
  • The edit/view/create forms are visually identical except of course view has the field values slightly grayed out.
    – James
    Jan 4, 2013 at 16:50
  • The grid already takes a large horizontal position of the page. So, I will not be able to use the last suggestion. The search contents can also take up a significant amount of vertical space, so unfortunately, I don't think having an details area below the grid will work well either. The expandable row is in a interesting idea but I think the form is too large to fit nicely in the grid.
    – James
    Jan 4, 2013 at 16:53

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.

  • Sorry for not specifying the amount of data. I just now added that as a comment under the question.
    – James
    Jan 4, 2013 at 16:54
  • Thanks for the references. Editing in place will probably not work well since some fields are read only and will change only when another field is changed. Also, some fields are only applicable when a certain value exists in another field.
    – James
    Jan 4, 2013 at 16:56

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.