Best examples of CRUD Web Form Design

Question

I am looking to revamp our CRUD web forms and would appreciate any examples of good UI design.

We have lots of database tables that have minimal editing needs by the user - Country Codes, Tax codes, Product prices, and so on - and these all currently use a simple format for CRUD, but it was designed by developers and looks very bland, and quite possibly could have far better usability, and certainly a better design.

Our process is:

Find screen - which also has an ADD NEW button. Enter values for any parameters relevant to search for and press FIND button. Matching records displayed in a grid with an EDIT link. The corresponding Edit form allows CLONE, DELETE and SAVE.

Where appropriate an Edit form may display Child Records.

For very complex records / relationships the Edit form is replaced by a Record Card, which displays everything including the kitchen sink! and appropriate records / sub records have EDIT links.

Its functional, but uninspiring.

On an 80:20 basis the code is all mechanically generated, so re-generating it for a new metaphor shouldn't be too hard.

I like a lot of the UI in the Magento eCommerce Admin pages, but I would be interested in any other examples you can recommend

Answer 1

The Dynamic Data Web Site that you can create using .Net 3.5 is pretty handy. Good clean dynamic CRUD ability and yet very customizable. Routing makes it possible to default to generated pages when needed and custom pages if you choose to create them.

Dynamic Data Web Site

Answer 2

Links worth a look:

http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/

http://somerandomdude.com/articles/design/form-design/

Answer 3

I've just stumbled onto this one

there you will find a couple of REALLY GREAT templates!!!

http://www.webappers.com/2009/09/18/20-professional-web-admin-templates-on-themeforest/

Answer 4

These guys have really nice examples-

http://wufoo.com/gallery/

Answer 5

To me, the Django admin interface is a good example of a CRUD interface.

Answer 6

Here are some examples of UI patterns:

Required Form Fields

Stacked Tabs

Inline Input Adder

Wizards

Overlay

Generally each section will explain the pattern, how and why to use, and gives a handful of graphics as real world examples.