I am designing a web application that has several tables displaying many rows of user entered objects. My users are fairly technically savvy. I’d like to bring the user to a place where they can view more detail and edit the data for a specific row.
I’ve considered the following options:
- Opening a modal dialog: With so much data to edit, editing within a model dialog feels very cramped. Also, because the user is doing a lot of ‘picking’ from other lists (like selecting users from an active directory), I either need to display separate lists (up to 6) in the dialog for the user to choose items from, or, spawn additional modal dialogs (!).
- Opening a tab: When the user edits a row, a new tab would be created. This gives a bit more space and doesn’t have the multiple dialog box problem, but because of the nature of tabs, the user can ‘leave’ the tab, without making a decision to save or cancel. Also, we then are using tabs inconsistently – to display an overview table, and details of specific rows. (This is similar to Yahoo Mail).
- ‘Sliding’ in the view/edit panel, to replace the table: (similar to going into folders in github) This solves the problems of the above two options, but it is not a common interaction. It also isn’t clear to me how the user gets back to the table (“Save and go back to table” and “Don’t Save and go back to table” buttons are a little wordy.)
An example of the table, using option 2 for editing. 
An example of what the edit might look like. I imagine clicking on the edit button would open up a dialog with a dual list (similar to this: Best way to select a subset of items in a long list). Having many dual lists on one page would be quite crowded. 
Are any of these a clear choice for usability? Are there other options to consider? Is there a standard or examples where one of these options works well?
No comments:
Post a Comment