Alternatives to grids in CRUD applications?

Question

So you were assigned to build a basic CRUD application. And it has this one page that serves to list all of the inventory items... if your user wants to edit any of them, there's the "Edit" button next to every item.

You know the drill.

I was recently tasked to modified one of such CRUD page and it looked rather ugly. So I decided it could use some polishing.

But thinking about it... I wonder what are the good alternatives to using grids when creating a CRUD page that display a lot of data?

Setting aside ajax/speed/security/implementation concerns...

What are some good alternatives to using a grid in large CRUD pages?

I'm willing to trade some usability for aesthetics if that would matter.

Answer 1

A list (instead of a grid) that opens up more fields for editing when clicked, or opens a new window or form. This way the screen isn't overloaded with data from the start, and it's very usable as long as the most important data is usable.

An example would be the Gmail Chat contacts list (screenshot here).

In some applications a very nice usability touch that helps reduce the information needed to display is a good search/filter box: as you type into the box, the list is filtered to matching entries.

Answer 2

For displaying relatively few fields for a lot of records, there’s nothing wrong with a tabular display like a grid, especially if the task involves searching for or comparing records. There is something wrong with Edit buttons to open a separate window or page for editing. It means the user has to learn two windows and how to navigate between them, and it takes longer to do.

A big usability improvement is edit-in-place: rather than a read-only grid, have an array of appropriate controls for the fields (text boxes, check boxes, comb boxes, etc.) within your grid (or instead of your grid). A single Save button on the page saves all changes to all records (or you post changes automatically for appropriate events).

Form-like layout (possibly tabbed) is the alternative to a tabular layout if you need to display lots of fields for few records. You can provide paging controls (e.g., something that looks like a Recordset control) to allow the user to page among records.

If you have lots of records and lots of fields, you can combine the tabular with the form-like layout by having a master-detail combination. A table at the top of page displays the key fields for the records while a form at the bottom of the page display “overflow” fields for whatever record in the table currently has focus.

Another alternative is to display the records graphically. Pick two fields and represent their values for each record by x and y coordinates used to locate an icon on the page. This is good if the task involves searching for patterns or inter-related records. Additional fields for the record (icon) with focus may be shown in form-like layout in a detail portion of the page.

Another thing you can do is represent certain fields graphically within a tabular or form-like layout (e.g., with icons, mini bar graphs, shade or color coding, etc.). This can aid user searches for records with certain values. It can also display the general gist of a lot of data in a small space (e.g., as sparklines).

Pick the layout that maximizes user performance for your users, tasks, and work environment.