From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
Today, I want to showcase some of the most famous login and registration forms on the web. As a web developer you might be interested in having a compact overview of the different designs of these essential website elements.
For your design, what would you do better? Do you think being a top site gives you trend setter status? Or should some sites rather be ashamed of their poor design skills?
Share your opinion and maybe you have some interesting showcases to add?
I hope you enjoy it!
Well, Google is Google, so fancy design is never a really big topic. It definitely follows major usability guidelines which is also shown here: http://www.boxesandarrows.com/view/getting-a-forms98
Flawless in functionality, I would say. I don’t know about the positioning of some elements, like the “Remember me” checkbox…
Now, what I don’t really get, are these changes of style within Google. YouTube belongs to Google and the design of this registration form clearly shows this. But why not use the same style through all the pages?
Although Twitter is one of my personal favorites, it could still need some more consistency. Using rounded input boxes in one place, and then plain old inputs in another place, makes it look a little bit inconsitent.
The strong focus on content is also reflected in the design of Wikipedia’s login and registration form: it is plain and simple.
6. Windows Live
Again, an example of inconsistent design. Why not use the same kind of buttons and the same sizes for inputs?
A clean design, that I would tweak only in the alignment of the labels in the registration…
It might seem, that there is a lot of different styling happening here, but actually it all somehow fits together: the color choices, the sizes and the “special effects”.
Ebay’s form design is a nice example of optimizing design for usability. Elements are used consistently throughout the site. Here is a really great article on the main changes that happened and why: http://www.digital-web.com/articles/redesigning_ebay_registration/
A very clean design. What I never liked though, was this “let’s spare” login form that also serves as an entry for a new user to register. I mean, if I want to login, I am a registered user and have a password, right?
Sometimes, I feel like, I am back in 1999… That “Forgot Password” seems like the designer went “oh, damn, I forgot to add Forgot Password to the login” …
Functional, clean but definitely not an award winning design.
Old school form but functional and clean.
Another example of completely inconsistent design: the colors, the buttons, the framing…
Very strange (almost styleless) form design, but it somehow fits to Craigslist.
16. International Movie Database
Besides fitting to the 1994 style of the whole page, it really is a disaster! For God’s sake, get a web designer…
Not the creme de la creme: colors, sizes, hello?
This is what I call consistency! A pair that goes along and reflects the overall design of the page.
Good that most members are indeed returning. It’s clean and the user has a good overview…it’s Adobe that did Photoshop right? :-O
Ok, I know the error messages have to appear somewhere, but is it necessary to have such huge spaces between the inputs? I mean, the spaces are bigger than the inputs! And I really think this combination of “select with one style” and “normal input with another” doesn’t go together… Why not having the same border for all of them?
Nice registration form. Just the login looks like from another site (planet)…
Now, this is fun: big form, simple input and beautiful design. I just wanna sign up!
Clean, yes. Functional, yes. Ehm, what happened to the password field? Is it always “shorter” than the username or is it just another case of “damn, I knew I forgot something in this from”…the LOGIN BUTTON!
It’s a nice set of colors although it could use a little bit more contrast. And if it’s just allowed to put 20 characters in the input, e.g. for the name, why giving it double the size then? Oh, and by the way, the email can be 255 characters long!
Pure CSS! But there is a lot more you can do with CSS, you know…like creating nice shadows on the buttons with borders…
Nice one, but the position of the register buttons seems weird…
I like Digg’s forms, I really do. But you know guys, at least for Firefox you could give the select the same style like to the input: “border: 1px solid #ccc”… looks sooo much better!
28. The New York Times
Old fashioned but fitting. But why not adapting the other inputs to the select?
Now, I must admit: this is definitely my personal favorite – almost impecable. Just, you know, Firefox, select, borders…
Compact and consistent. Really nice job.
A lot of blue going on here, but it still fits.
Not really consistent and I would suggest using “display: block” in the registration, gives a less “stairs” like effect…
I love this registration form, it’s beautiful, but the login doesn’t really look finished. What’s with that “SIGN IN” position?
I think, it needs some more development.
Simple and really neat… fit’s perfectly.
Very nice one, too.
Very elaborated and stylish… but still functional and user friendly.
So, “Keep me logged in” is like what? Compulsory? Ah no, after all it’s not recommended for shared computers… But a nice registration form.
Clean and consistent. But 8 captcha letters? Come on!
Not really a nice login. What’s with that “I am a tube” background anyway?
Ok, enough from me, now it’s your turn!