Is there any convention about iOS forms

Question

I've been searching for a while now and didn't find the right answer for my question about iOS forms, that is:

Studying some iOS forms, I discovered 02 main styles for forms's title and placeholders. The first one groups multiple forms in one box-like shape with both, titles and place holders inside(look image 01).

The second one separate forms with titles outside and placeholders inside(look image 02).

I would say myself that the first one is good for long forms(3+ itens) and the second for short ones(1-2 itens).

Is there any convention to use one or the other?

Thanks in advance,

Answer 1

I actually tend to do the opposite. The first one I use for simple form (but honestly hardly ever use this format) and the second I use for more complex or longer forms. The reason for this is that for the first style, you very quickly run into issues with field label length and you ended up with varying heights from different fields which very quickly looks messy. Also with the field label on top of the field input, you allow the user's gaze to only ever have to go up and down. This is a very subtle difference but it's been proven to improve input speed. http://uxmovement.com/forms/faster-with-top-aligned-labels/

Another problem I've run into with the first style is that the OS will sometimes zoom in a bit to the field and causes it to obscure the label partially. You can definitely solve this by making it not zoom.

The main advantage to the first style is that it is clearly more compact but I find it close to impossible to name fields short enough to fit. It also reduces the length of the field so it's more likely to truncate the input which can potentially increase errors.

Answer 2

Both styles work but I'd offer a 3rd style: a subject header that says what the form is (ie. Sign Up) with the given text fields that have sub-text filler that you type over.

That said, I agree in part with @skwokz though I wouldn't worry about the size so much. Option #1 provides clarity and space, and more clarity because of the font used (black text that's clearer, plus each "explainer" is right beside the given text field. That's actually better than my option #3, though it isn't quite as clean. But more importantly, it leaves no room for error.

Generally on iOS there's no set convention for best practices for a form. It depends on how many fields, use of the form, etc. I would recommend Option #1 for the reasons I stated above. Separating text fields by subject headers is good for multiple fields at a time, not for individual fields.

Answer 3

In terms of labels above vs. to the left, it really comes down to the length of the labels and field values.

In terms of visual style, both are uses, but consider as well that there may be better solutions. We've found that actual boxed input fields test better than the iOS7 'invisible field' style. We also prefer them aesthetically.