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

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.