Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm an artist and amateur web designer.

On my portfolio website, I've grouped my work into projects. Most of my projects contain few (20 or less) images, so I just display them in full size and let the visitor scroll (example) because this is how I prefer to browse other artist's work as well.

For projects containing more images, I use thumbnails which link to the full-sized images, because, again, when I browse other artist's portfolios, if there are lots of images on a page it's kinda cumbersome to load.

Recently I wrote some jQuery to implement a lightbox effect (modal window overlay) so when you click on a thumbnail, the full-sized image appears (example).

My main reasons for implementing this:

  • it's much more presentable than having a direct link to the image, which is what I used to do
  • if the visitor shares the image on something like tumblr or Pinterest, the link back will be to the project page instead of a direct link to the image
  • if the visitor wants to right-click on the thumbnails to load several images in several new browser tabs/windows, they can still do so (the lightbox is triggered on left click)

I did not include a close button because it seems like more work for the visitor to have to look for a close button, than to simply click anywhere to close the lightbox (which is what I did).

What are your thoughts regarding lightbox interface for this particular use? The goal would be the best way to showcase visual art/design work, and the target audience would be, well, anyone who wants to view the work. The display method, in this case a lightbox interface, should be efficient, useable, and presentable (it should highlight, not detract from, the work).

share|improve this question
    
Your lightbox isn't a unique solution. In fact, it's lacking a few things like a Close button. There're plenty of pre-made lightbox scripts that are used all over the web, for example, Fancybox. –  dnbrv Apr 1 '12 at 14:50
    
I know it's not a unique solution, and I have seen the pre-made lightbox scripts but didn't want to use any of them. I wasn't asking for a script to use-- I was asking for guidelines for best practices for lightbox UI design for this particular use (viewing full-sized images on a visual art portfolio). I've searched for lightbox design best practices but I've mostly found only articles about lightbox design in general (mostly for things like filling up forms, logging in, etc.). –  Feanne Apr 2 '12 at 2:21
add comment

3 Answers

One important point is keyboard accessibility: Let the user browse with the and buttons, and make esc work as close button. You may offer further details when the user presses ↑ … but that requires probably some hints.
Mouse users need clickable buttons to navigate images and to close the active one. These buttons can be hidden when the cursor is not over the image, but they should be available.

share|improve this answer
    
I've considered the next/previous control function. Should this go hand-in-hand with a pre-loading function for the full-sized images? Pre-loading might be a little burdensome for the server, but - if a user is clicking next/previous buttons, is this a fair indication that they are interested in seeing most of the pictures, thus making pre-loading a worthwhile function? –  Feanne Apr 2 '12 at 11:53
    
Sounds reasonable. Pre-loading is always tricky. I would wait two or three seconds after the click. –  toscho Apr 2 '12 at 12:36
add comment

My approach would be to have it full screen (e.g. full browser window) on a unicolor background (probably black or dark grey) and hide all navigation (close, next, previous) as long as the mouse isn't moving.

Like this you don't distract the user in any way without compromising usability by removing essential functions from the UI.

share|improve this answer
    
For the unicolor background, although I'd prefer that, I did read somewhere that if the page isn't at least partially visible behind the lightbox, people might think it's a new webpage / they might click the back button on the browser. Re mouse movement activated controls - nifty idea, thanks, I'll look into the code for that. –  Feanne Apr 2 '12 at 11:47
    
@Feanne: I'm pretty sure there are ways to prevent that. You could use an animation when opening the gallery for example. –  Phil Apr 2 '12 at 13:12
add comment

The modal image roll is very nice and is used on bigger social media sites, such as Facebook and Google+. So stick to it, but please do not omit the close button. It makes users confused and we wouldn't want that. One idea to use is Facebook's implementation, where you have the [X] fully working, but on hover user get a clue: use Esc to close! I think this is splendid design telling the users there are other ways and you do not have to grab your mouse to close the image:

Press Esc to close from facebook

share|improve this answer
    
My website is not a social media site though. The [X] button seems like the most subtle close button, but I'm still hesitant about adding it. If it's too subtle won't it be a chore for the user to have to search for it on the page? I figured that if the user wants to close the lightbox, one of their first instincts would be to try clicking somewhere outside the lightbox (currently in my lightbox that does work to close it). The "Esc" to close is a good idea though, it's invisible and intuitive, so I'll figure out a way to add that, thanks! –  Feanne Apr 2 '12 at 2:29
    
@Feanne: Regarding the Close button; if you don't have one many users will still search for it, unsuccessfully. That makes it even more of a chore for them! You'd need to do usability tests to know for sure, but from what I've experienced and read lightboxes get different reactions from different users; some press the browser's back button, some press escape, some look for a close button, some click on the image, some click outside the image, etc. Lightboxes are great but they do break a number of subtle web conventions which leads to user confusion. –  vincebowdren Jul 31 '13 at 10:01
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.