Labels describe the purpose of form controls, including text fields, check boxes, radio buttons, drop-down menus amongst others. On mobile apps, screen real estate is limited. This forces app developers to save space by placing labels in varying positions on tiny screens. Labels can be placed in many different ways. I cover five varied approaches in this article.
Positioning Labels – The Right Way
1. Inline Labels
Labels placed inside the form field are called Inline Labels. These continue to be a fad for many programmers after Apple introduced them in most of their apps.
Image Source: Dash Lane app
Pros
- Simplistic look
- Space efficiency and better use of mobile real estate
Cons
- Loss of Context – When user begins typing or even upon entering the field, label is lost thereby taking away the memorability aspect of the field
On Dash lane app, text fields have an inline label. Tapping on the text field keeps the inline label intact, until user starts typing into it. If user deletes existing data, inline label re-appears, to remind the user about the context of the field, just in case, user forgot what the field means.
Inline labels suit best on forms with fewer fields. E.g., on login forms, , it’s hard to forget which field is for what kind of input(username, password), for most part as there are just fewer fields with a straightforward goal.
Inline label could be a great feature if it is used in the right way. A good approach is to use it as supporting text or short descriptions that provide cues to users.
Luke Wroblewski, writes simple guidelines for input labels in his book, Mobile First.
A label within an input field:
- Should never become part of someone’s answer. This seems simple enough but still happens quite frequently when things haven’t been loaded or aren’t coded correctly. Ever try searching only to find the word “search” has become part of your query?
- Should not be confused with an actual answer in an input field. If labels and inputs look too similar, people might (rightly) assume an answer has already been provided for them. I’ve seen this happen too often in usability testing.
- Is usually absent when someone starts answering a question and when they finish answering a set of questions. This can make it harder to know which question is being answered or to go back and check answers after the labels are gone.
2. Floating Labels
Image Source: Google Material Design
Material Design guideline, introduced us to floating labels, i.e. the label appears as an Inline Label on the screen (Description field). As soon as user starts typing into the field, the label slowly floats upwards and places itself at the top of the field (Title field).
A downside to this approach is that, unless the features are coded for accessibility, visually impaired users might find it difficult to understand this behavior.
3. Top Aligned Labels
Labels are aligned above input fields, hence the name Top Aligned. I forgot the mobile app from where I picked this screenshot. That leads us to another problem. Shouldn't each screen have app logo on it, just in case, amnesia patients like me could recollect which app we are on? Well, I can only say, the world is tough out there.
Pros
- Faster completion time from users as per Matteo Penzo’s findings
- Works well for long labels
- Labels that require localization might have good flexibility
Cons
- They take up a lot of vertical real estate, leading to perennial vertical scrolling / swiping for long-ish mobile forms
4. Right Aligned Labels
Image Source: www.css-tricks.com
Labels are right-aligned while input fields follow them in left-alignment.
Pros
- Slightly slower completion times compared to top aligned labels
- Less vertical space
Cons
- When labels change, this alignment leads to flexibility issues in the layout
5. Left Aligned Labels
Image Source: www.css-tricks.com
Labels are left-aligned while input fields follow them in left-alignment.
Pros
- Best suited for forms where users need to slow down and scan the fields. For e.g., bank forms
Cons
- Slowest completion time compared to top aligned and right aligned labels
- Difficult to parse fields on long forms
Luke Wroblewski, has talked about top, right and left aligned labels in an elegant way, here that is almost impossible for me to beat.
Image Source: Polar mobile app
As you notice in Polar mobile app above, inline labels can be used as placeholder texts inside input fields to complement labels with additional information. Notice that Polar has ensured that branding is intact on login screens with their 'Join Polar' title. There is little possibility that a user forgets which app this is. By the way, Polar app was designed by Luke Wroblewski, which was acquired by Google a while ago.
Labels appear to be the least important elements on mobile screens, yet play a major role in how these screens appear to users. We need to pay attention to not just their behavior, but also their placement.
How do you handle labels in your apps?
