How you design input fields will also directly correlate to number of user interactions (eyes, mouse/keyboard/touch). If you have an input intensive form, then users might end up spending a lot of time filling out data.

For example, take a look at figure below, there are only 3 data elements but it requires at least 7 different user interactions.

Adeel Javed - UX Patterns For Enterprise Applications

Now the next figure captures exactly the same number of data elements, but significantly reduces number of user interactions. Just by unifying all the fields, and making the system do a bit more work such as auto-formatting, user’s efficiency has been increased and number of interactions reduced.

Adeel Javed - UX Patterns For Enterprise Applications

Another point to note here is the use of labels. In first figure all labels are adjacent to the input field, while in the second figure they are above the input fields. Research has also shown that placing the labels above input fields makes it clearer for users, and is easier on the eyes.

Want to learn more about UX Patterns? Download your copy of “UX Patterns for Enterprise Applications” here.

Adeel Javed - UX Patterns For Enterprise Applications