SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot dreamache's Avatar
    Join Date
    Feb 2003
    Location
    warren ohio
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This is why lightbox image galleries are bad usability.

    I just decided to write a quick article on my site about my feelings that pertain to the popular lightbox js image gallery script and usability...

    Quote Originally Posted by GarySimon.net

    There's a golden rule when it comes to web usability (especially in this day n' age of web2.0'ism), and that's to keep things simple. Lightbox is anything but simple. It's simple in execution, sure, you're just viewing an image, but all of the extra bells and whistles are entirely unnecessary and I'll explain why.


    Unnecessary animation!
    Some "lightboxers" have the scrolling animation before the image will actually load. One word: annoying. At first I was like "oh that's cool!", but after the 2nd time I realized how much of an annoyance it is to have to wait for an unnecessary animation. People want their content and they want it fast. For those that are less internet savy, they don't know about the whole "right click / open in new tab or window" option.


    The rest of your website becomes useless
    Since lightbox uses a div that dims out the rest of the site, the rest of the site becomes unusable unless you either click "close", hit the "x" key, or click on the background. Extra work, no matter how little it may be, can become very annoying with a bunch of lightbox based images.


    Confusion
    If you use lightbox on a site with a demographic of non-internet savy visitors, you're going to confuse people, I guarantee it. Another golden rule in web usability is to assume every visitor has the intelligence of a 3rd grader.


    It's not unique anymore
    Something once really unique has been made typical and boring. It's old, it was a decent idea for 10 seconds and now it just annoys everyone. If you want a unique site, don't use lightbox, everyone and their grandmother is using it.


    Those are just a few that I've thought of off the top of my head. I'm sure there are others. A great alternative I like is using a hover preview of the thumbnail. An example of that can be found at my logo portfolio, simply hover over the thumbnails and you will see what I mean. It's fast, easy, and doesn't hijack your browser.

    from: http://www.garysimon.net/lightbox-is-bad

    Thoughts and opinions on this?
    Design like a pro. - Full design videos, real projects.
    Pro logo design (8 yrs. experience, check em' out).


  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Rosario, Argentina
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.. you have a point, but about "The rest of your website becomes useless", which alternative you will use? a popup window will need to be closed too.. and is an extra window, more confusing for most people. A lightbox with no animation and single-click close is not so bad... IMHO

  3. #3
    SitePoint Zealot dreamache's Avatar
    Join Date
    Feb 2003
    Location
    warren ohio
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jpablo View Post
    Yes.. you have a point, but about "The rest of your website becomes useless", which alternative you will use? a popup window will need to be closed too.. and is an extra window, more confusing for most people. A lightbox with no animation and single-click close is not so bad... IMHO
    Well like I mentioned, the hover preview like I've shown on my own site is a good work around, and if the image is too large for that, simply link the thumbnail to either the full direct image, or to a separate page made for displaying the full image.

    A lightbox with no animation *and* also doesn't render the background of the site useless, would be most ideal.
    Design like a pro. - Full design videos, real projects.
    Pro logo design (8 yrs. experience, check em' out).


  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dreamache View Post
    A lightbox with no animation *and* also doesn't render the background of the site useless, would be most ideal.

    You should be able to get that easily for any site simply by turning off JavaScript for that page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I disagree with all of your points.

    Unnecessary animation: For large images, the animation is meant to cover up the incremental loading of the image. I've never seen an animation more complex/longer than a roll up/roll down anyway.

    The rest of your website becomes useless: As opposed to either opening the large image on a new page, which requires you to hit the back button when you're done looking, or heaven forbid, a popup window, that requires you to close it when you're done? They're all the same.

    Confusion: Confuse people how? BTW, third graders are generally pretty savvy when it comes to computers and internet browsing. More savvy than most people over the age of about 40 anyway.

    It's not unique anymore: So? If every single site on the internet had to be unique, the world wide web would have closed down ten years ago. People keep using Lightbox because they like how it looks and how it works. And the more sites that use it, the more familiar people will get with it.... really eliminating your point about confusion.

    Hover previews: Don't answer the question of what to do when you want to show larger images. For small logos, sure, the effect is fine. When you want a full gallery of artwork, and to simply have an image appear on hover would be large enough to cover enough of a user's screen that it covers their cursor and the result is that horrible flicker effect we all hate? No thanks.

  6. #6
    SitePoint Zealot dreamache's Avatar
    Join Date
    Feb 2003
    Location
    warren ohio
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Karpie View Post
    Unnecessary animation: For large images, the animation is meant to cover up the incremental loading of the image. I've never seen an animation more complex/longer than a roll up/roll down anyway.
    I would (and others) would much rather watch the image as it loads, than some scripted white box animate on my screen. Pointless.

    Quote Originally Posted by Karpie View Post
    The rest of your website becomes useless: As opposed to either opening the large image on a new page, which requires you to hit the back button when you're done looking, or heaven forbid, a popup window, that requires you to close it when you're done? They're all the same.
    Let's say you find out you want to click on a link in the header of the site after you click to view a full image. In lightbox this will take you at least 2 clicks (one to click close on lightbox), and then the actual click of the header link. On a page in which you're directed to a full version of the image inside of the layout, it will only take you one. Also, if it's a gallery you're viewing, you don't have to click back if they list the gallery thumbnails along with the full image.

    Two clicks vs. one click sounds like no big deal, but as I mentioned before, it can become very annoying after awhile.

    Quote Originally Posted by Karpie View Post
    Confusion: Confuse people how? BTW, third graders are generally pretty savvy when it comes to computers and internet browsing. More savvy than most people over the age of about 40 anyway.
    The biggest factor in confusion in lightbox is the fact that if an image displays on the screen, that exceeds either the viewable height or width of the browser, the close button(s) become hidden, sometimes that's not obvious to certain users, and it's also annoying. Obviously it won't be a huge issue, but when you consider the alternative of viewing the full image as the image alone, browsers will resize it accordingly (as will other certain js scripts) - lightbox as I've seen doesn't.

    Quote Originally Posted by Karpie View Post
    It's not unique anymore: So? If every single site on the internet had to be unique, the world wide web would have closed down ten years ago. People keep using Lightbox because they like how it looks and how it works. And the more sites that use it, the more familiar people will get with it.... really eliminating your point about confusion.
    Everyone also thought the earth was flat too. There have been many overused abominations over the internet, lightbox is no exception. When people realized they could use photoshop to add bevel drop shadow glow effects to text, they all used that too, but then fortunately wisened up. I think it's only a matter of time before we see the same thing with lightbox happen.

    Quote Originally Posted by Karpie View Post
    Hover previews: Don't answer the question of what to do when you want to show larger images. For small logos, sure, the effect is fine. When you want a full gallery of artwork, and to simply have an image appear on hover would be large enough to cover enough of a user's screen that it covers their cursor and the result is that horrible flicker effect we all hate? No thanks.
    Well I believe when it concerns the concepts of thumbnails and their "full images", the best practice would be to allow 3 separate images in the process. The thumbnail, a medium sized graphic, and then the actual full image if it exceeds 800x600 (or slightly less). The medium sized graphic is what should be used for the initial preview whether you're using my suggested hover effect (which would counter any flickers), lightbox, or a separate on-page view. Then if they want to see a massive in your face version of the picture, they can actually click the medium sized image. (or the thumbnail itself with the hover effect, which seems to be the best out of the 3 mentioned.)
    Design like a pro. - Full design videos, real projects.
    Pro logo design (8 yrs. experience, check em' out).


  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thing lightbox being a javascript make it difficult for the SE's to read it. It is only good for showing off your site designs.

  8. #8
    SitePoint Member fakegray's Avatar
    Join Date
    May 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I happen to like lightbox because it keeps viewers on the page rather than directing them elsewhere. I also use it a bit unconventionally to be able to create a "next image/previous image gallery" for pictures that are not visible on the webpage normally.

    However, I've gotten lots of feedback from clients that they don't know how to advance to the next image, because they never figure out that they need to hover over the image. So I decided to make the navigation buttons more obvious by making them static. This is as easy as adding the selector #prevLink the line 57 of lightbox .css and #nextLink to line 58. This makes it so that whenever there should be a navigation button that hovers, it pops up immediately over the image.

    I also made the navigation buttons more obvious by adding arrows and a border to the .gif.

    You can see the changes that I have made by going to http://www.weliketobuild.com/realestate/ and clicking on "real estate portfolio."

  9. #9
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by summer14 View Post
    I thing lightbox being a javascript make it difficult for the SE's to read it. It is only good for showing off your site designs.
    The search engines don't need to see the lightbox because they have the links to the image. All of the good light box implementations alter <img> elements dynamically.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  10. #10
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    Plano
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As with karpie, I disagree with many of your points.

    Quote Originally Posted by dreamache
    I would (and others) would much rather watch the image as it loads, than some scripted white box animate on my screen. Pointless.
    It's a common animation technique to animate something while another thing is loading. Sleight of hand type thing. This takes the focus away from the user waiting, sometimes to the point where they don't even realize they waited at all. Apple is good at this. I do agree that the image should reveal faster, but not immediately.

    Quote Originally Posted by dreamache
    Two clicks vs. one click sounds like no big deal, but as I mentioned before, it can become very annoying after awhile.
    IMO, you're nitpicking. Your solution presents going to a separate page, lightbox's solution brings up a popup on the same page. in both scenarios you are not where you originally began, and in both scenarios it requires user action to return to the place where you began. i don't see how a dedicated page is better in any way: 1) the user has to load headers, footers, links, html, javascript, etc. all for one image. 2) the website owner has to serve those files, wasting bandwidth. 3) it's harder to get back to where you began (click back button + wait for page to load vs click anywhere on screen)


    So my stance is that there are only two things wrong (with respect to usability) with lightbox: 1) you said the image goes off the page if it doesn't fit? this is bad. 2) image revealing is slower than it needs to be. Other than these reasons, i feel lightbox is a great tool, as it reduces user's load time, reduces the server's load, and (apparently this is subjective) IS very intuitive in a sense where it's really hard to mess it up.

    No disrespect, but i hope more websites start using lightbox, not less.

  11. #11
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    Plano
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, just realized how old this thread is...

  12. #12
    SitePoint Member
    Join Date
    Jul 2007
    Location
    Ottawa, Canada
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm glad someone has similar views with me. I find the Lightbox tool to be very annoying when I use it. It gets in the way when I'm browsing.

    Usually when I'm looking for a designer and through their portfolio, I open up all of the work in new tabs. When they use lightbox, I spend triple the amount of time going through their portfolio, and left with a somewhat angry impression.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •