Lightbox, Thickbox, Greybox - Ugh

I dislike the increasing (still?) trend of websites deploying a lightbox (or thickbox) effect. Not so much for the strobing visuals, but more because it is nothing but an irrelevant technique dragged over from the desktop world to the web - just for the sake of familiarity.

Modal dialog boxes are those which temporarily halt the program in the sense that the user cannot continue until the dialog has been closed ^{link »}

Modal dialogs are generally regarded as bad design solutions by usability practitioners, since they are prone to produce mode errors . ^{link »}

- from Dialog box - Wikipedia, the free encyclopedia via sharedcopy.com

The web is free flowing and has no vertical constraint. And it's good that way!

My personal preference as a developer is to use div-expansion/collapse everywhere possible, until I can't. By introducing new content in-place, and reflowing the rest of the document, a user is not required to take action just to back out. If he choose to proceed, he can interact with the new content (usually a form), or simply continue browsing, scrolling down or click elsewhere.

Even if situation calls for a lightbox-ish design, it isn't too much to ask for [as much of the] surrounding content to be pushed aside whilst showing a thickbox at the centre of the screen. You get to reduce overlap & maintain document flow at the same time.

Try it, click on the Wikipedia quote above. Though the right columns of this blog is obscured by virtue of their floats, the content of this entry will remain in full view.

Comments

[ludo]

Quite agree that those modal boxes are not welcome on website!

However the expansion/collapse everywhere may not be the ideal solution as it disrupts the spatial reference in the document (modal box make it clear that some info is added while expansion assume an understanding that document is morphing).
That being said, expansion/collapse it is still the best solution I've encounter until now :)

Btw, does this have a name "expansion/collapse"? would you dare to give it one for us? :)

And the sharedcopy embedding is really nice like that!

[Andy Croll]

I'm gonna have to disagree there CK.

I quite like what you've done with the SharedCopy insert, and it kinda makes sense for that application.

I'm of the opinion that if you're looking at a larger version of an image or doing something 'dialog-boxy' a la facebook then a small straight-forward lightbox is probably a good solution, for anything bigger or more involved than a couple of clicks it's new page time.

You solution thing is a nice in between stage, but I'd rather go to a new page, that have loads of stuff move around! If I'm scrolling I don't want to be scrolling inside a window inside another window.

[choonkeat]

@ludo: agree, i use transitions (slideDown, etc) as a way to address the spatial concern. for the sharedcopy embed, i *haven't* put in transition yet.. tentatively opting for a more lightweight initial js loading. and no, i didn't know if there's a name for it... i quite like "div expansion" though.

@andy: for the "larger version of image", i really appreciate threadless for doing it the simplest, fastest way: http://threadless.com/product/193/Go_Japan (try clicking zoom). and facebook's old modal dialog for confirming friends has given way to its newer modeless one, hasn't it?

what I'm saying is lightbox/dialog box really has no place (or much lesser than first impressions) in a web world. if we're willing to think a little different (ask and ask again, does it have to be modal?), then there are much more elegant (and better) alternatives for us to deploy that doesn't have the modal drawback of modal dialog boxes.

[Adam Whiles]

I find them to be very annoying when they are used for displaying ads and such. At times they can be quite nice and useful such as for a contact form.

[Tyler Style]

I'd have to disagree - I think modal dialogues have a place on the web, particularly if your audience is not very web savvy. My dayjob's site caters to elderly people, and they find using a computer intimidating and confusing to begin with! Many of our menu options pop up in a box, or use a series of boxes in a wizard-like fashion.

Utterly a pain in the butt for experienced users, but for newbies or luddites it is an excellent tool.