Best examples of CRUD Web Form Design [closed]

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

Here are some examples of UI patterns:

Input Controls

Stacked Tabs

Inline Input Adder

One Page Wizards

Overlay

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

As an additional resource, you can also visit ThemeForest's admin template site and browse through their many products and get pictures and live tours of very well designed and styled admin pages. I personally have used a few of these templates for data heavy sites.

Hope these help you out some.

7/25/18 Update: While it is hard to keep links from nine years ago working, it seem that the website which hosted the UI examples is now gone. Read Farewell from Patternry for further information.

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

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 4

These guys have really nice examples-

http://wufoo.com/gallery/