11

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).

Improve this question
2
  • 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, 2012 at 14:50
  • 1
    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, 2012 at 2:21

3 Answers 3

Reset to default
2

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.

Improve this answer
2
  • 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, 2012 at 11:53
  • Sounds reasonable. Pre-loading is always tricky. I would wait two or three seconds after the click.
    – fuxia
    Apr 2, 2012 at 12:36
2

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.

Improve this answer
2
  • 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, 2012 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, 2012 at 13:12
1

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

Improve this answer
2
  • 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, 2012 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.
    – Vince Bowdren
    Jul 31, 2013 at 10:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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