In a mobile app should input fields have a placeholder prompt or a label?

Question

I'm designing an app that is crowd sourced and therefore needs to be as simple as possible to use. One of the big things about the app is that users can upload things themselves using an input form within the app. All of the forms are native (not using webview). As far as I can see it there are two potions here:

1. Stick to the native Android placeholder prompt:

2. Or put labels in front of the input fields:

However there are pros and cons for each of these layouts:

Android Native:

Pros

• Familiar
• Takes up less space
• Looks cleaner

Cons

• Grey text maybe harder to read
• Not immediately obvious to a user what they were filling in should they be interrupted
• Hard to mark required fields

Labelled view

Pros

• Clear and obvious
• Text can be made easy to read
• Allows for further information in the input field (like "i.e. green")
• Easy to continue filling in if interrupted

Cons

• Less streamlined
• Seems "messier"
• Will cause problems on smaller screens

This question has some answers (like using top aligned labels) but seems to be more about a webview or cross platform framework, which won't act as a native app does.

I've read articles however they have a lot of conflicting opinions, one author will say to label text fields, another will say that labeling an input field is the worst thing that can be done.

Do we have any stats or figures to show which type of input label Android users prefer?

Answer 1

In your situation, I think you should use the placeholder prompts.

My criteria is that when the users fills in the fields, will they be able to tell what the values mean without the placeholders? In your case, I think that the answer is YES. The fields 'Name', 'Corporation' and 'Type' seam different enough that they will rarely contain duplicate (or near duplicate) values. In other words, if you showed someone a filled out form with no labels, I think they would be able to figure out that the top item is the person's name and the second item is the company they work for.

To me, the placeholders are a subtle way to instruct new users and at the same time not visually clutter the screen for experienced users.

Sorry I don't have a clearcut answer for all situations. I think that's because its a design choice we have to make in each specific situation!

Answer 2

It is advised to place form field labels above the field to ensure that all fields are of adequate length to display any commonly expected inputs. Also, I wouldn't use inline lables for more than 2 fields. More than 2 and the user might loose context.

At their core, form fields are all alike. They are rectangular boxes on the screen. What distinguishes one field from the next is its label – the label is the defining context for that box. The problem then arise when the label disappears (as they do with inline labels when users begin typing, and in some cases even upon entering the field) – suddenly the only context for the field is the user’s own input. This not only makes it more difficult for users to fill out the fields, it also makes it much more difficult to correct any validation errors they run into...

During the mobile e-commerce research study we observed numerous test subjects struggle with fields that had inline labels...

Inline labels are a prime example of false simplicity. They look simple, but are in fact very tricky to use.

from this article by Baymard Institue.