[GIF] Float Label Form Interaction

Form-animation-_gif_

2 Attachments

74 Responses (page 1 of 3)

  1. Matt D. Smith Matt D. Smith

    Best viewed at @2x.

    View live demo here.

    I've been experimenting a lot lately with mobile forms. Left aligned, top aligned, placeholder text only, etc. for client projects and personal projects.

    Placeholder text works great for a simple username and password form, but not so much when there is more information. It's easy to forget which field is which once you've typed into all of the inputs.

    If you opt for left aligned fields always exposed you end up with much less space. And space on mobile is precious. If top aligned fields are always exposed, it makes the vertical height grow very quickly.

    This idea combines the best of both worlds with placeholder text and top aligned text. Only the placeholder text is showing by default, so there is a nice, clean and readable form. Once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in. This way, with multiple fields a user won't forget what an individual field represents.

    Tweet examples to @floatlabel.

    -----------------------
    Update 2
    I wrote a blog post "How the Float Label Pattern Started" http://mds.io/S9Ob

    -----------------------
    Update 1

    @jverdi created an iOS prototype here: https://github.com/jverdi/JVFloatLabeledTextField

    likes

    7 months ago

  2. Richard Gil Richard Gil

    Nice concept man!

    likes

    7 months ago

  3. Alex Wright Alex Wright

    I really like this concept @Matt D. Smith I could see this working nicely for desktop as well as tablets / mobile.

    likes

    7 months ago

  4. Regy Perlera Regy Perlera

    @Matt D. Smith I've been struggling with the same issue and I really like this solution. The only problem I could see is the font size for the top-aligned label. How legible is it?

    likes

    7 months ago

  5. Cliff Seal Cliff Seal

    YES.

    likes

    7 months ago

  6. Néstor Palao Néstor Palao

    Nice idea, congratulations!

    likes

    7 months ago

  7. Matt D. Smith Matt D. Smith

    @Regy That's been the biggest issue for me, too. Right now it's at 14pt (retina), which translates to 7pt. Really tiny, but still legible for me. It could potentially use a larger size, but this is kind of the starting point, yah know? I just attached the full size comp so you could check it out.

    7 months ago

  8. Adam Coulombe Adam Coulombe

    really nice idea Matt! Have you checked this on an actual iPhone? The top text becomes just a wee bit small IMO.

    likes

    7 months ago

  9. Regy Perlera Regy Perlera

    @Matt D. Smith Just took a look at the screen on my phone, I think this actually works. Considering its just for reference, it does a pretty good job of staying subtle, yet helpful. The description text is pretty clear on its own too. I know right away what each field implies without needing to look at the label

    likes

    7 months ago

  10. Adam Coulombe Adam Coulombe

    @Matt D. Smith Didn't see your comment above re:font size. Youre right, it is legible, I did have to get close though.

    likes

    7 months ago

  11. Matt D. Smith Matt D. Smith

    @Regy @Adam Yeah, I think that's the trick here - staying subtle and helpful with the field label.

    7 months ago

  12. Tim Herbig Tim Herbig

    really like the transition of placeholder text alias form name to above the user generated text as soon as he starts to type!

    likes

    7 months ago

  13. Galen Gidman Galen Gidman

    I love this. Honestly, the interaction wouldn't really have to be limited to mobile or native apps — it would be equally helpful on desktop and the web.

    likes

    7 months ago

  14. Matt D. Smith Matt D. Smith

    @Galen I think it could definitely work for desktop, etc. Might have to think about growing the text field vertically once text is entered to allow for a larger field label.

    7 months ago

  15. Colin Devroe Colin Devroe

    @Matt D. Smith I like this. Approved.

    likes

    7 months ago

  16. Matt D. Smith Matt D. Smith

    @Colin You are a gentleman and a scholar.

    7 months ago

  17. Robbert Esser Robbert Esser

    This is so clean. I love it.

    likes

    7 months ago

  18. Luca Lopez Luca Lopez

    Amazing!!

    likes

    7 months ago

  19. Artur Tkhruni Artur Tkhruni

    very nice!

    likes

    7 months ago

  20. Deepak Jose Deepak Jose

    Absolutely awesome! Love it.

    likes

    7 months ago

  21. Oscar Waczynski Oscar Waczynski

    Very nice... I think that this would be a great addition to any form, and in the case of actually getting it to work on mobile I think it would be overall pretty easy.

    likes

    7 months ago

  22. NSElvis NSElvis

    JESUS CHRIST!

    likes

    7 months ago

  23. Marco Suarez Marco Suarez

    I'm diggin it.

    likes

    7 months ago

  24. Kyle Ledbetter Kyle Ledbetter

    Nice accessibility bro

    likes

    7 months ago

  25. Jeff Broderick Jeff Broderick

    This is amazing! I'm going to learn from this for sure!

    likes

    7 months ago

keyboard shortcuts: previous shot next shot L or F like