Openbravo's User Experience Lab
GUI design, ERP Usability and Visual Design

Customize forms with the Form Builder

Thursday, March 3, 2011

Forms in transactional documents typically contain tons of fields. Looking at for example a sales invoice in our demo environment I count 18 fields, of which 10 are required (the yellow ones). Of those required fields, only two of them do not have a default value: Business Partner and Partner Address. Now, when you select a business partner, the address is automatically filled in.

This means that in this case, only ONE field needs undivided attention. The rest only needs to be verified in case the system was configured well. Some fields do not even need to be looked at in most cases, such as organization if you only work with one of them. The same goes for currency or even document number that should be correct by default when properly configured.

To reduce the cognitive load on our users we plan to simplify the default form layout by adding different fill colours, hiding read-only fields, increase the white space and apply a more logical order. In addition to that, we also would like to hide fields that are not important. For some fields it is easy to mark them as less relevant but for others, we cannot make this decision for you. That´s why we are thinking of creating a Form Builder that lets you choose which fields to show in pole position and which ones to tuck away in a collapsed section. In fact, this is similar functionality to what you already have in the new grids where you can show & hide and resize & order columns to your liking.



With the Form Builder, users now must be able to design their own form for each window type. Administrators can also design forms for other users, either per role or client. Changes are stored in the Application Dictionary.

I have produced a quick set of mockups to give you an idea. Let me know what you think, all ideas and feedback is welcome. React via Openbravo on Facebook, UX Labs on Forge or just drop your comments below the images.

2 comments:

Unknown said...

thats genius ~~ may be elucidate where the data is posted to ?

Rob Goris said...

Changes are stored in the Application Dictionary. This feature is now live, you can find it on demo.openbravo.com if you want to try it.