Like “the boy who cried wolf” modals demand that you stop what you’re doing right now to figure out what the hell they want.
They should only be used when software needs to stop the show for an emergency, but lately they’re being used for basic forms and messages. Like Flash sites that reinvent browser scrollbars and inputs (badly), modals are confusing and wildly inconsistent.
They’re on my mind because of Ryan Singer’s “maybe modals are ok” post at 37signals (see my comment there), and because I ran into the worst modal ever yesterday:
To see it for youself, go to Whrrl and click “join whrrl” in the top right corner.
Seriously? A translucent sign up form? The tiniest “X” button ever? They’ve made it hard for me to sign up and hard for me to find an escape hatch all at the same time. Good thing the browser “close tab” button never fails.
Also, I love it when CAPTCHAs read my mind.
Every web professional has their own list of “deadly sins” and “10 commandments”, these are the best ones:
3 Comments ↓
A website that I read puts advertisements over the article and probably because of browser tweaks (on Opera), I end up seeing a shadow over the entire article. Luckily, this goes away in a couple of seconds but I’ve not gotten used to this yet. Don’t think I ever will.
I think this is a case of form over function. You always try and strike a balance, but I think they’ve gone too far with this site.
Well, I believe layer/div based modal dialogues are much better for getting user input as compared to Javascript popups or alerts. JS Alerts are the worst for a Yes/No or OK, since they block all tabs of a browser.
You do have a point there. Unnecessary glossy design never got anyone the best website award. Close button does need more space.
I generally follow this rule for type of message:
Information: Unobtrusive, shown at the top of screen/page.
Warning: Same as info, but possible with more colors or a temporary flash. More info in a dhtml popup
Critical: Shown in a modal popup as small as possible, with expansion in size for “More Info”