How to show the mandatory fields on an iOS device?

Question

I have to show more than 11 fields within the screen. 4 fields are mandatory. How should I indicate the mandatory fields? Is there any standard or any ideas?

Answer 1

I would write a gray italic hint inside the textbox, which vanishes when focused. You could hint "required" in the four mandatory fields, or "optional" in the rest. But don't do both, to make differentiation easier.

Answer 2

There are few techniques to let the user understand what is mandatory and what's not. The iOS Human Interface Guideline doesn't state anything about that, but as far as I can say from my experience you could follow few different ways:

• As TJH said, an asterix somewhere around the textfield can get the job done, even though not really aestetically pleasing.
• Provide a Done button that becomes selectable only after the user filled up all the mandatory fields
• As shown in this video, you could put an icon in the right part of the text field that changes its state depending on the user input. For instance, if the user moves the focus away from a mandatory field that is not filled up, a "wrong" symbol will appear on the right. This approach gives you the advantage that you can embody even a more fine grained validation for you text fields, so you could present the error even if the input is not correct.

I usually adopt a combination of the 2nd and 3rd techniques, so to let few room for interpretation to the user.

There are of course probably many other ways to achieve the result, here I posted just those the got to my mind now.

One last thing, in the iOS Human Interface Guideline, they say:

Make it easy for users to input their choices. For example, you can use a table view or a picker instead of a text field, because it’s usually easier for people to select an item from a list than to type words.

You are asking for how to show mandatory text fields, but maybe try to think if some of them can be mutated in pickers with few standard entries. With them you could put as the standard selection the first choice, so that the user will be obliged to change it to the correct one (without chances to leave it blank).

Answer 3

Can you physically group the fields? If so, group the 4 required ones, put them at the top, and label them required.

Answer 4

The standard, albeit not very creative, is an asterisk on the label. Since we're here to talk UX not UI and it's all about making it easy to understand this is probably the best option.

As a UI designer I like to combine that with more aesthetically pleasing I like to use other methods as well as this - see my question from a couple of weeks ago - Amber outlined required field