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

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

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!

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}