Lightbox — Quick, Pretty Screenshot Previews

Every uISV has a screenshot page and, if you’re sane, a shot of your program above the fold on your front page.  These are generally teeny-tiny thumbnails which exist more to demonstrate the fact that there is a real purchasable product than anything else.  Of course, customers actually want to be able to read the text on your GUI, so you link that thumbnail to an image file… and bad stuff happens.

For the non-technical B2C market, “bad stuff” generally means “Prospective customer cannot find their way out of the image”.  Yes, I know, I know, they have a back button.  They may not KNOW they have a back button, though.  My screenshots, for the longest time, had 80%+ bounce rates until I figured this out.  So I’ve been using the _blank thing to pop the screenshot up in a new window, which is a decent compromise but it distracts unduly from the sales pitch.  They have to close that window to get back to reading, and I’d rather they have a visual reminder of what exactly they were doing so they don’t get distracted, switch to their email, and go away.

Luckily, there is this nice little Javascript widget called Lightbox (introduced to me by the indispensable Nick Hebb, king of flowchart software).  Add two lines of code to your web page, tag screen shots with rel=”lightbox”, and you get a shiny Javascript preview effect which is quite similar to e-junkie’s Fat Free Cart.  It grays out the rest of the page but keeps it visible, and directs your attention directly on the screenshot — a single click anywhere dismisses it, taking you back to the page.  (There is a Lightbox2 which has more sophisticated behavior which is, for my customers, a usability nightmare.  I passed.)  You can take a quick gander at the home page for Bingo Card Creator — try playing with the main screen shot to see Lightbox and the purchasing page to use the Fat Free Cart.

Advertisements
Explore posts in the same categories: Uncategorized

11 Comments on “Lightbox — Quick, Pretty Screenshot Previews”

  1. John Zorn Says:

    I clicked on the main screen shot and was redirected to http://www.bingocardcreator.com/images/first-grade-sight-word-bingo.jpg
    then I clicked Back clicked Reload and tried again, then it worked, then I left
    the site, and entered again, again redirected to http://www.bingocardcreator.com/images/first-grade-sight-word-bingo.jpg

    Happy hunting,

    John

  2. Patrick Says:

    I’m going to take a wild stab in the dark and say that was probably caused by you hitting it before the page was totally loaded. Thats quirky behavior, though, and I will try to see what I need to do to correct it. Thanks for the report.

  3. Oliver Says:

    Patrick, The background doesn’t grey-out on your site when I click a screen shot. It shows the pic alright, but the fully visible background adds lots of clutter and confusion IMO. I’m using FF1.5, WinXP. Cheers, Oliver.

  4. Patrick Says:

    Thanks for the heads up. I have no clue exactly WHAT was causing that, but after 15 minutes of playing around it turns out that if you move lightbox.css into the main CSS file everything clears up.

  5. David Foskey Says:

    Patrick, using IE6, W2K, slow connection (kids have blown my quota) took several (= too many) seconds to load, dark grey background (ie your screen not visible). Used x top right to return to your screen rather than back button. Definitely thumbs down.

    Cheers, David

  6. Magnus J Says:

    I just started to use Lightbox2 before I read your post.
    Exactly why is it a “a usability nightmare.” ?
    /M

  7. Patrick Says:

    Because my users are not very sophisticated and it is not obvious to them how to dismiss the interstitial. Many of them will try clicking somewhere, anywhere. That works for Lightbox 1 but not for 2.


  8. […] Enhancement To Lightbox I posted recently about how to use Lightbox to make your web site prettier and more useable, and someone pointed out […]


  9. […] who so much as glance at the page click on it.  When they click on it, the screenshot expands in a Lightbox […]


  10. […] my bag.  As it turns out, Lightbox Gone Wild (a variant of the Lightbox project which I’ve previously used to business-enhancing effect) took this from several days of work to about five minutes of […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: