large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2rTbcBC">medium bookmark / Raindrop.io</a> |  </p>
<p>After writing <a href="http://ift.tt/2juMI0B">Placeholders are Problematic</a> some people suggested the <a href="http://ift.tt/1xZHWoM">floating label pattern</a>. We are often seduced by novel patterns that save space but this pattern is a bad idea. Here’s why:</p>
<h3>1. There is no space for a hint</h3>
<p>Floating labels start inside the text box leaving no space for an additional hint.</p>
<div>
<div><img src="http://ift.tt/2qmJJGK" alt="0*xzbhD5X_vUvUEWCq.png"></div>
</div>
<h3>2. They are hard-to-read</h3>
<p>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>
<div>
<div><img src="http://ift.tt/2qRUx38" alt="0*q2zq3GoUrnzJOAKi.png"></div>
</div>
<h3>3. They need space to move into</h3>
<p>Floating labels needs space to move into. If label text is friendly (see previous point), there would be no saved space anyway — just more <em>white</em> space.</p>
<div>
<div><img src="http://ift.tt/2qmJKdM" alt="0*aseTzNjYz784Tj7_.png"></div>
</div>
<p>Alternatively, we could create space <em>as</em> the label moves into position. But this makes the page judder, creating a disorientating experience as the user starts typing.</p>
<h3>4. The animation is problematic</h3>
<p>Animation, even if it’s 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>
<h3>5. They have poor contrast</h3>
<p>Like placeholder text, floating labels have low contrast to differentiate it but low contrast text is hard-to-read.</p>
<div>
<div><img src="http://ift.tt/2qRUxQG" alt="0*s7rHiuD9zR8bWKEI.png"></div>
</div>
<p>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>
<h3>6. They may be mistaken for a value</h3>
<p>People may skip the field thinking it’s completed already. When they submit, they will see an error which needs fixing. This is frustrating and time consuming.</p>
<h3>7. They are inconsistently located</h3>
<p>Radio buttons, checkboxes and select boxes have static labels and legends. Where as text boxes have floating labels. This creates an inconsistent experience.</p>
<p>When looking at a text box, for example, the user has to look <em>inside</em>the control. For a select box they have to look <em>outside</em> of it.</p>
<div>
<div><img src="http://ift.tt/2qmJL1k" alt="0*r_BYMhXo1AP8ytot.png"></div>
</div>
<h3>8. The label may get cropped</h3>
<p>If the floating label is longer than the size of the field, it will be cut off by the field. We should <a href="http://ift.tt/2qS7fyQ">design for content</a>, we shouldn’t make content fit the design.</p>
<div>
<div><img src="http://ift.tt/2qmB6Mk" alt="0*mcxEigIemhnjvROM.png"></div>
</div>
<h3>9. They ignore the standards</h3>
<p>We know placeholders are problematic anyway. However, if we’re going to put text inside a text box, it should be a hint, not a label.</p>
<h3>Summary</h3>
<p>Forms are not a source of entertainment. The floating label won’t make users enjoy using forms. Users don’t care. They just want the outcome.</p>
<p>Static labels and legends positioned outside the field create familiar and consistent experiences. Two qualities often found in well-designed interfaces.</p>
<p>There are better and more productive techniques for improving form design. Let’s spend time and energy on those instead.</p>
<p><em>This is something I write about in my upcoming book </em><strong><em>Form Design Patterns</em></strong><em>. If you enjoyed this </em><a href="http://ift.tt/290xwCP"><em>sign up to my newsletter</em></a><em> and I’ll let you know once it’s released.</em></p>
<div><a href="http://ift.tt/2rTbcBC">http://ift.tt/2rTbcBC</a></div>


Floating labels are a bad idea

Floating labels are a bad idea

1. There is no space for a hint

Top Stories