Wikipedia has a succinct opening sentence about modal windows:
In user interface design, a modal window is a child window which requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.
These are common in desktop applications when a program needs an important decision made. They are becoming more and more popular in web applications thanks to the JavaScript “light box” (or one of it’s other many pseudonyms). Undeniably, they are overused. However, there are circumstances where modal boxes make sense and are used effectively to focus a users attention to the important task at hand. In some situations, logging into a website is one of these important tasks.
In my regular daily web travels, I encounter several. These aren’t “light boxes” with the transparent overlay and animated popup shenanigans, but they fit the definition of a modal box.
Freshbooks:
Wufoo:
Grooveshark:
Scrapblog:
Here’s a free one
Hey, while we are at it, let’s build one! Here’s what it looks like:
As always, we are going to keep the code clean and semantic. No extra junk. That way it’s perfectly usable and accessible, and lightweight to boot. Here is what it looks like with no CSS:
I won’t bore you with listing all the code here. There isn’t much to it! Just a simple form area and with a few images applied in the CSS.
Love it? Hate it?
So what do you say? Is this just a trend? Is it smart? Personally I think I like it. It gives a designer a chance to do something creative, give the site some soul, and I don’t think it detracts from the user experience much. Others might disagree. Removing the sites established navigation might feel wrong. I’ve heard others say that the login page is a good place to put current news and other juicy tid-bits, as it’s the one page people are definitely going to be seeing.
I personally think that it’s a great idea as long as there’s plenty of room to click to “escape” the modal page. They are great for things such as logging in/registering where you don’t need any of that extra “junk” on the webpage, and to let the user focus more easily on the important elements.
Thank you for the files, looks like a nice design.
However I tried the login and it wouldn’t work – could you send me my password?
Thanks,
Chris
PS ;)
As long as theirs a non-JS friendly way to do this, I’m in favor of them.
Because i didn’t find one that liked me, i wrote my own modal box script.
It’s jQuery dependent tho (but hey, there is somebody who don’t use a library anymore?), but works excellent as a small information box (or even login). Check out the demo on the bottom of my page.
I like the way they do it at Hulu (inline log in). I kind of see these things as a different version of the splash/entry page all the sites used to have.
The demo looks really sharp though.
I really like how you styled the page. Obviously its not often that you only have one element on the page to centre – but using center on background was really effective.
Thanks!
ive always been a fan of these, for all the reasons you stated chris. I try and work them into my sites when I can, but never at the sake of usability.
really nice way, different login model thanks
I prefer the modal login boxes. I really, really wish digg had one. I love the fact that if I’m not signed in, and I want to interact with the site I can login with a little modal window and stay on the page I already am at.
The reason I wish digg had one is often I forget to login when I first start browsing, and then I want to digg a story and have to redirected away from the story, than after logging in I’m taken back to the home page. If they had a modal I could stay right there and not need to go through 3 steps to digg a story ;)
Another great way I’ve used the modal box with a form (I used thickbox) was for printing coupons off a site. I developed the site and threw in a little modal popup link for getting a coupon – a form styled to match the site pops up for the user to put in their info and after they submit it, in the same modal box pops up the customized coupon. Some print stylesheet magic and wah-la they get to print out just their customized coupon.
I molded one WordPress Login for a client..
http://www.misswindward2008.com/wp-admin
took me a little while to figure it out but thanks to firebug I got it done.
Really nice one!!
Will use in own website :)
thanks,
on PC’s firefox 3 demos login button’s cursor pointer not work.
I add this and now pointer seems
line 18:
.button {
.......
........
cursor:pointer;
}
Exactly! I was just thinking that Digg needs a login like this. I hate having to click away from what I want to digg , so I can log in.
excellent stuff!!
the “free one” is an absolute mess in firefox 2 on the mac. the submit button is sticking right out of the right hand side of the containing box, and rememeber me doesn’t say remember me but “member me”.
Good stuff Chris! Thanks for compiling this.
You know, every time I use some kind of modal window approach for web applications, I end up with the same results: About 99% of the end users are happy, and everything works. Kow-Pow!
And then, the remaining 1% who are running Mozilla on a Windows emulator on Linux through their iPhone are getting weird window displays.
So, although it is an awful lot of work and not necessarily conducive to driving change into the right direction, it sometimes pays off to provide an alternative method for those end users who don’t want to upgrade their web browsers or who are stuck on Windows 95. You get my drift.
At any rate, thanks for the nice compilation. And I’ve also enjoyed all the entertaining & insightful comments from your good-looking and above average readers.
In my opinion i think these are awesome. As long as they are implemented well.
Why would you use a <br> or <div class=”clear”> in that code?
You should never never never use a <br> unless it’s semantically valid — an actual break in a paragraph of text.
And there’s no need to add a clearing <div> between each label/input combo. Just make them display:block, float:left, and clear:left on the labels.