{"id":10739,"date":"2017-07-12T16:57:21","date_gmt":"2017-07-12T15:57:21","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=10739"},"modified":"2017-07-26T11:40:32","modified_gmt":"2017-07-26T10:40:32","slug":"floating-labels-problematic","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/floating-labels-problematic\/","title":{"rendered":"Floating Labels Are Problematic"},"content":{"rendered":"

\"\"<\/a><\/p>\n

We are often seduced by novel patterns that save space but this pattern is problematic. Here\u2019s why:<\/p>\n

1. There is no space for a\u00a0hint<\/h2>\n

Floating labels start inside the text box leaving no space for an additional hint.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

2. They are hard-to-read<\/h2>\n

Floating labels typically have small text, so that as it floats, it takes up a small amount of space. But small text is hard-to-read.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

3. They need space to move\u00a0into<\/h2>\n

Floating labels needs space to move into. If label text is friendly (see previous point), there would be no saved space anyway \u2014 just more white space.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

Alternatively, we could create space as the label moves into position. But this makes the page judder, creating a disorientating experience as the user starts typing.<\/p>\n

4. The animation is problematic<\/h2>\n

Animation, even if it\u2019s done well, could be distracting and disorientating, particularly for low confidence or visually impaired users. And, when zooming in, the label may disappear off screen.<\/p>\n

5. They have poor\u00a0contrast<\/h2>\n

Like placeholder text, floating labels have low contrast to differentiate it but low contrast text is hard-to-read.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

Depending on the design, when the label floats outside of the field, its colour will need to change. Otherwise the text will be lost against the background colour.<\/p>\n

6. They may be mistaken for a\u00a0value<\/h2>\n

People may skip the field thinking it\u2019s completed already. When they submit, they will see an error which needs fixing. This is frustrating and time consuming.<\/p>\n

7. They are inconsistently located<\/h2>\n

Radio buttons, checkboxes and select boxes have static labels and legends. Where as text boxes have floating labels. This creates an inconsistent experience.<\/p>\n

When looking at a text box, for example, the user has to look inside the control. For a select box they have to look outside of it.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

8. The label may get\u00a0cropped<\/h2>\n

If the floating label is longer than the size of the field, it will be cut off by the field. We should design for content<\/a>, we shouldn\u2019t make content fit the design.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

9. They ignore the standards<\/h2>\n

We know placeholders are problematic anyway. However, if we\u2019re going to put text inside a text box, it should be a hint, not a label<\/a>.<\/p>\n

Summary<\/h2>\n

Forms are not a source of entertainment. The floating label won\u2019t make users enjoy using forms. Users don\u2019t care. They just want the outcome.<\/p>\n

Static labels and legends positioned outside the field create familiar and consistent experiences. Two qualities often found in well-designed interfaces.<\/p>\n

There are better and more productive techniques for improving form design. Let\u2019s spend time and energy on those instead.<\/p>\n

This post was originally published on Adams's Medium profile<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

We are often seduced by novel patterns that save space but this pattern is problematic. Here\u2019s why: 1. There is no space for a\u00a0hint Floating labels start inside the text box leaving no space for an additional hint. 2. They are hard-to-read Floating labels typically have small text, so that as it floats, it takes up a small amount of… Read More ￫<\/a><\/p>\n","protected":false},"author":82,"featured_media":10815,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-10739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n