UI Design – Representing Mandatory Fields ?

Currently, I am into revamping the UI of a retail product. The current version of the product is a based on client-sever architecture and has some watt inconsistent look and feel. Hence, I am into defining UI guidelines to bring about the much required consistency and to make it easy to learn (ie users must be able to self-learn the functionality without much help and without referring to on-line help)

One of the things on which we (I mean the team) are struck is how to visually represent mandatory field. Visual representation of mandatory fields is important because, if the user fails to define values for a mandatory field he will end up seeing pop-up error messages. This becomes even more cumbersome when the user leave more than one mandatory fields, in such a case multiple pop-up may have to be displayed.

Before we jump into the options let us look at how they are represented in products like SAP and Great Plains:

In SAP, the mandatory field is represented by a small tick mark inside the field. The good thing about SAP is the the tick mark disappears when a value is entered.

Whereas in Great Plains, the same is represented  as given in the image below ie the field labels are marked in ‘Red’ color and in italics:

Options such as making the field label ‘Bold‘ or  underlining the field label or using an asterisk at the end of label are some of choice we looked at. We even thought of giving a different color for the field (such as the outline or background). However, we are yet to arrive at a decision. My only concern about playing with the font properties of the field label spoil the look and feel. Having a tick mark similar to SAP is out of question as I am not sure if the same can be achieved using the technology used for developing the product

Any one encountered such a situation and any suggestions on what is a good way to represent mandatory fields’?


2 Responses

  1. I always believe “Follow the standards which the intended user is used to”. This will allow the user to understand the interface instantly and intuitive enough to not read the help section or some irritating “Required Field” message boxes. To achieve this – we should have a better understanding of the customer and the kind of tools/applications he uses daily.

    Guess, i am too late to comment on the blog, but do let me know how & what did you go about in resolving this issue…

    BIM 19

  2. Hi Jai,
    Thanks for your comments. We did have fixed this problem by having an indicator * to the left side of the field (note: usually indicators like * are placed to the right side of fields). Hoever, we had decied to place it on the left had side to ensure proper alignment of these ‘*’. Also there will be a note at the bottom indicatiin that * means mandatory fields. We did analyze various options like using ‘Bold fonts’, colors etc. but finally settled for the above to keep it simple.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: