Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
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 '13 at 16:48

2 Answers 2

up vote 3 down vote accepted

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.
share|improve this answer
    
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 '13 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 '13 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 '13 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.

share|improve this answer
    
Sorry for not specifying the amount of data. I just now added that as a comment under the question. –  James Jan 4 '13 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 '13 at 16:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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