Interesting Takes on Log in / Sign Up Forms

Log in forms are often just two fields: username and password. Sign up forms are often scarcely much more, perhaps asking for an email address as well and a repeated password.

These two types of forms are often tied at the hip. The links to get to them are often right next to each other. They often are styled similarly. And this makes sense… functionally, they are also often tied at the hip. An attempted sign up from an existing user might just log them in. A failed log in might suggest signing up. Social buttons might also work both ways.

All that to say, these forms don’t have to be boring! Designers have been taking the opportunity to do clever and interesting things with these forms.

Let’s gawk at some awesome ones.

Ian Hazelton’s Color Changing Field Sliders

The unused form fields sliding away is a nice transition, but the color change really locks in the idea that it is a different form with different functionality.

ux-friendly-signup-form.gif

Live demo & code

Tommaso Poletti’s Shuffling Cards

I might argue it’s not entirely clear that “Log In” button is going to shuffle the forms for you, but I love the interaction and how you can see unused form underneath.

card-shuffle.gif

Live demo & code

Nikolay Talanov’s Slide Across the Canal

What looks like an innocent button that will take you to the page you actually need instead initiates a some major sliding action that reveals the new form. Most satisfying is how you can watch the image knockout slide by.

knockout-slide.gif

Live demo & code

Mohan Khadka’s Flippy Form

No JavaScript whatsoever here. The flipping effect is of course CSS 3D transforms, but even the toggling between forms isn’t a class name change, but a hidden input combining labels, checkboxes, and the sibling ~ combinator.

flippy.gif

Live demo & code

Josh Sorosky Slide’n’Zoom

This one has a similar feel, only slides instead of flips. There are nice subtleties too, like an intuitive-feeling checkbox and how the background changes zoom level a little bit when changing between the two.

slider.gif

Live demo & code

Jamie Coulter’s Flop Down Authenticator

Speaking of 3D transforms, this login form hits the deck (literally) while it is logging you in.

flop.gif

Live demo & code

Anna Batura’s Slider

There are so many nice subtleties in this slider, like the moving background and how the form fields are sliding in a different direction than the white form area itself. Plus an interesting success state!

check.gif

Live demo & code

Riccardo Pasianotto’s Push-Through Fields

Hardly takes up any space at all when you’re using that Z axis!

stepper.gif

Live demo & code

Comments

  • Vishal Sachdeva

    Really productive & intuitive ideas.

  • Osahon Okungbowa

    Thanks for this!! Already tweaked and implemented one of these ideas in my new project. Took me just about 15 minutes to tweak and use

  • These absolutely impress me, but I wonder if they actually convert with some people that are the end user of the project. I noticed with ux testing that some people still don’t understand when something is a clickable element (i.e. a button or a link). However, once again, this is still a very impressive set of innovative sign up and login forms. Thanks for the time you’ve put in.

  • Husain Ahmmed

    Thanks for this awesome collection

  • Carol

    beautiful animations. It also give me ideas how to display other things on my website

  • Anirudh B Balotiaa

    The color changing one is really nice and very usable too. Others I felt have a lot of “movement” and can be distracting for the user. For example the “Slide across the canal”, one would need to use the mouse to move the cursor as the whole form placement has shifted.

    • John30013

      The color change is visually distinctive; however, end users–especially first time users–cannot be expected to know what the colors mean. Also, users with various types of color vision deficiency won’t make much of the color change.

      All that said, my larger problem with many of these examples is the very similar “Sign up” vs. “Sign in” labels. I prefer to user labels that are more visually distinctive, especially if they’re going to sit right next to each other–“Register” instead of “Sign up”. I also prefer to have the “Sign in” link be the first one, since returning users are more likely to need that one than the “Register” link.

      • Mihail Malostanidis

        But onboarding is more difficult so people should be bashed over the head to register.
        Those who know what they want won’t give up on finding the login.

      • >> is the very similar “Sign up” vs. “Sign in” labels.

        I’ve always hated these terms!

        “Signing in” doesn’t necessarily communicate that you are a member somewhere, right? Any time I go to a secure building or a meeting/conference I have to “sign in” there to show that I am present, whether or not I am a “member”. Even “register” is kind of ambiguous for me. Or at least it isn’t the first word that jumps into my head when I think about joining something or becoming a member of something.

        I’ve always liked “Log In” and “I’m New”.

      • Anirudh B Balotiaa

        Fair and relevant points John. For color-deficient people it wont really make a difference as you rightly said.

        For me how it helped was that with two different colors, even though for first time users the color has no link, it signals the user that “something” is different presumably and hence two different colors are being used.

    • Mihail Malostanidis

      Furthermore, it loads a huge image which you might never see.

  • DR01D

    Jamie Coulter’s was the best because I suspect it would be the least confusing to the average user. Riccardo Pasianotto’s was my 2nd place for the same reason.

  • creative ideas, and I found something new on “Jamie Coulter’s Flop Down Authenticator”. It’s really amazing, thanks for sharing such good stuff.

  • In my opinion the last demo is a perfect example of cool-looking-but-unusable design. Try to navigate it with a keyboard. I tried for like a minute and still don’t know how to handle it.

Related Articles