Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

UI Pattern: Float Label

DZone's Guide to

UI Pattern: Float Label

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

This is a nice bit of clever for more elegant layout of your form entry screens; have the placeholder text animate into a label!

How the Float Label Pattern Started

I first had the idea for a new input pattern back in August. The idea was simple enough – animate placeholder text to show an icon beside the input so you don’t lose your context. I’ve been doing 99% mobile work for the past 2 years and little things like this can really add up. I wanted a solution that saved space, looked clean and clear, but didn’t forego usability…

… I designed a new version using text only, plus a slight animation for the float label. I spent a long time thinking about the micro-interactions of when the active color would change and how soon would the text animate after someone typed. These were tiny decisions made down to the very last keyframe in my 30 FPS file.

Screen Shot 2013-10-31 at 7.08.44 AM.png

… A few days later a long time Twitter friend, Jared Verdi, busted out the first real implemenation in Obj-C. Super cool. Somehow Jared’s github post blew up a bit and everyone seemed to be tweeting about it. Thankfully he named it something cool when he first implemented it because I never did – JVFloatLabeledTextField. The “float label pattern” was born.

And people who struggle with the design space on small screens — oh, wait, that’s everybody — are finding the concept of great interest; check the ‘Resources’ section at the bottom of that post and you’ll find links to proof of concepts in a variety of environments. Specifically to try it out in iOS at the moment, you have:

jverdi / JVFloatLabeledTextField — the original UITextField POC described above

iwasrobbed / RPFloatingPlaceholders — UITextField and UITextView versions

h/t: ManiacDev!

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Published at DZone with permission of Alex Curylo, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}