Post #503

Comments (76)

Jump down to the comment form ↓

1. Jeff:

   Example C: 1
   Examble B: 2
   Examble A: 3

   Definately, the third doesn't require a move movement, and keeps the images their normal size. The second resizes the images, but doesn't require mouse movements, and the first is simply out of the question.

   Posted 27 minutes after the fact

2. Mike Burnard:

   I would actually like a fourth option. The navigation would be centered on the top and the bottom of the image area. This would provide for the least amount of side-to-side movement for navigation. I would like an image area similar to example B for the least up and down movement for taller images.

   Otherwise:

   A: 3
   B: 2
   C: 2

   Posted 44 minutes after the fact

   Inspired: ↓ Greg Schwartz

3. Chris Vincent:

   Same as Jeff, and the same reasoning.

   Posted 45 minutes after the fact

4. Zelnox:

   Example A: 3
   Example B: 2
   Example C: 2

   I do not like Example A, because the navigation moves around, and this can be confusing for beginners.

   I think Example B is fine, as long as the resized images are not a problem.

   I like Example C. However, it might be problematic on lower resolution screens, where the images are quite large. On a large screen, there may be no scrolling. But when scrolling is necessary, the user will have to scroll up and locate the navigation.

   Why not combine C and B, by repeating the C's navigation at the bottom of the image?

   And, wouldn't a slide-show feature be useful?

   Posted 1 hour, 26 minutes after the fact

5. Phil Dokas:

   I agree with Jeff, but I prefer two other options above all:

   Jason Kottke's solution is very elegant though it requires a bit of an explanation (click on the left/right half of the given image). Once the acquainting has occurred, it's very obvious and provides an enormous click area.

   - http://kottke.org/photos/

   However, I also agree with Mike - center aligned nav elements are static and strike a nice balance. I used this technique on a site I recently designed and found it to be the best fit for the project.

   - http://www.dokasphotos.com/galleries/

   Posted 1 hour, 30 minutes after the fact

   Inspired: ↓ Sam, ↓ Rushi Vishavadia

6. Matt Haughey:

   I was just thinking about this again today when I was going through a photography site that had its nav at the bottom of photos, but at different widths, depending on the photograph. That's the worst of both worlds -- putting nav at the bottom means it changes in the y direction based on the photo above, and putting next at the right edge of a photo means it also changes in the x direction.

   Then I realized my very own photoblog does exactly that. I think a centered, fixed, next and back above the photo is the best way to go (so C in this case, but centered).

   I also love Kottke's right/left image map technique, but that still requires moving the mouse a bit and it is a hidden feature.

   Posted 2 hours, 17 minutes after the fact

7. Sam:

   C: 1
   B: 2
   A: 3

   A fourth centered option is definitely another good way, as Phil mentioned.

   Jason Kottke's nav is nice but all of his images (from memory) are the same dimensions.

   However, Jason Santa Maria (.com) uses a different technique altogether. http://jasonsantamaria.com/photo/ Where each image has a small block icon which you use to navigate, and if the images are wider, or taller the image is shown similar to version C ala Dunstan. Done nicely in flash, and also has a similar Kottke effect with half the image navigating previous and next.

   Posted 2 hours, 50 minutes after the fact

   Inspired by: ↑ Phil Dokas

8. JD:

   I like option C the best.
   Option B is okie and Option A is absolutely no-no.

   BTW, I like the way this guy ( http://mute.rigent.com/ ) has simply increased the clicking area for next/previous buttons!

   Also, I was wondering how nice it could be if left click can be used to move to next image and right click to move to previous! But I think in Browser environment it will not be possible!

   Regards,
   JD

   Posted 3 hours, 14 minutes after the fact

   Inspired: ↓ Greg Schwartz, ↓ Miles

9. Mike D.:

   C is the only one worth commenting on because it is the closest to ideal of the three. The mouse movement and inconsistent matting which the other two create disqualify them immediately.

   The only thing I'd do different about C is that I'd center the all elements on the page, including photos and navigation. Something about the flush leftness just doesn't do it for me.

   Posted 3 hours, 50 minutes after the fact

   Inspired: ↓ Jeremy

10. Oliver:

    If I was to choose from the three, version C is the only one I could live with. B is just plain ugly, and A requires too much mouse movement to be convenient.

    I'd like version C even better if the navigation controls would be on the right side, Kottke-style, if you wish.

    There might be another version I'd like that I haven't seen here: There's a left-arrow (or "previous") on the left and a right arrow (or "next") on the right. Those arrows wouldn't move, whether the pictures are in portrait or landscape format.

    Posted 4 hours, 39 minutes after the fact

    Inspired: ↓ Syntheticvox

11. Ramin:

    As with many above, C is the only real way to go. Mouse movement is a very annoying issue.

    I had to reload the photoblog I made for our puppy ( http://fierymill.net/ ) to see how I'd done the navigation there. Centered at the top of the page. I did start thinking of adding the navigation to the bottom (bleow the captions) as well. But for those you need to move the mouse.

    An approach that is used in some slideshow packages that could also be used is to embed some JavaScript to allow the navigation to take place with the keyboard (say n, p, PageUp, PageDown, and space). I guess it's time to add some code to the photoblog...

    Posted 5 hours, 10 minutes after the fact

    Inspired: ↓ Ramin, ↓ Greg Schwartz

12. Ramin:

    Hmm... The URL in the previous comment was incorrect despite Dunstan's effort to get me to check the comment by previewing it. The correct URL is http://fierymill.net/loj/

    Stupid, stupid me. Time to get some more coffee and wake up!

    Posted 5 hours, 12 minutes after the fact

    Inspired by: ↑ Ramin

13. Mathieu 'P01' HENRI:

    A = 3
    B = 1
    C = 2

    In B, the navigation items stays at the same place whatever the resolution of the pictures is and are accessible in the upper and lower part of the screen. Nonetheless it shouldn't be painful if the navigation items were sticked together like in C, but centered horizontally.

    In C, the navigation items are easy to spot and never move, but that's the image that "dances" all the time the resolution change.

    In A, both the navigation items and the images "dance" all the time.

    Posted 5 hours, 13 minutes after the fact

14. Jan Korbel:

    What about placing some king of arrow pointer to the vertical center of left and right side click-able along all the height of the image side? Something alogn this http://mapy.seznam.cz/

    Posted 5 hours, 17 minutes after the fact

15. Pascal:

    I agree with

    C: 1, B: 2 and A: 3

    The centered text navigation option is a must.

    That said, it is not just a matter of the navigation links. Further features like small preview images of the five most recent and five upcoming pictures, Kottke-like-style, related pics and the likes would be a nice things to have.

    But I guess I dont't have to mention that for you.

    Posted 5 hours, 32 minutes after the fact

16. Lee:

    I'd have to got with, in order of preference:

    1. C

    2. B

    3. A

    My reasoning, simple, in example A the links move about depending on the image size, which means I have to find the damn things all the time. In B, I have to move the mouse a long ass way to get between previous and next links, and I don't like the black 'fill' on tall pictures. C keeps the links together and in the same place consistently, meaning I can jump back and forth easily.

    Posted 5 hours, 38 minutes after the fact

17. Shawn Kelley:

    Of those options, C is a hands-down winner. My preference, however is to have the whole photo clickable as a forward advance. I like the way Jason Kottke does his, but having the whole photo clickable for one direction results in a less-steep learning curve, in my opinion. A small note at the top of the photo saying (click photo to go to next) or similar works great without having to explain the forward-back function.

    Posted 5 hours, 46 minutes after the fact

18. Roman:

    A: III (weird)
    B: II (Vorsprung durch Technik)
    C: I (Fahrvergnügen)

    Posted 6 hours, 7 minutes after the fact

19. Cocovan:

    3,2,1

    If you have to move the mouse, then it's bad UI. That means 1 sucks - unfortunately, 1 is the norm in most places.

    2 is a little better as the links don't change but having to scale portrait images is a bit nasty. Also why would you want navigation links top and bottom? Does this not increase the clutter and add confusion to the user? - "Which one do I click?"

    Number three is the place to be!

    Posted 6 hours, 20 minutes after the fact

20. David:

    I agree with the general concensus that it's:

    1. C
    2. B
    3. A

    It seems to me that photoblogs are the perfect place to promote the usage of accesskeys. I understand there are some issues in terms of cross-browser compatibility, but at least offering the option to some people in a well-advertised way [and with clever choice of key assignments] would be better than forced usage of the mouse or laborious tabbing between each navigation option.

    Posted 6 hours, 26 minutes after the fact

21. Darice De Cuba:

    A. 1
    B. 1
    C. 2

    Just yesterday I was working on a photo-log layout and the same issue came by. Next and Previous. buttons are both at one side so you have to move the mouse to the other side every time you want to switch. So I decided it's best to put them close to each other at the bottom of the photo. This has the best position to view photo's without moving the mouse to the other side or over the picture.

    So I take secret option D with a rating of 3. Option D has the << Previous | Next >> at the bottom right of the photo.

    Posted 6 hours, 36 minutes after the fact

22. Small Paul:

    C-1
    B-2
    A-3

    I'd quite like the clickable areas to be bigger, but I guess that's partially an aesthetic choice - which I think is relevant in photo sites, particularly.

    Alternative suggestion: big, vertical clickable areas left and right of the photo. I'll comment again if I can work up an example.

    Posted 6 hours, 36 minutes after the fact

23. Pete:

    It's possible an image map might work better in the context of backward/forward links. Define large areas for the left and right edges with CSS tool tips that appear off the edge of the image to tell the user what's happening ("click here to view the next image" , "click here to view the previous image"). I'm not sure if percentages are allowed in coordinates so there may well be some overlap on smaller images.

    I've never been sure about image maps in terms of accessibility though so that may be a big no no.

    anyway:

    a =3
    b =2
    c =1

    for least potential mouse movement.

    Posted 6 hours, 38 minutes after the fact

    Inspired: ↓ Wim

24. Darice De Cuba:

    My stupid mistake: the ratings. In my previous post I rated the other way around. It should be:

    A = 3
    B = 3
    C = 2

    And the secret D that I give is a 1.

    Posted 6 hours, 43 minutes after the fact

25. Guillaume Rischard:

    Making the entire image a link to the next image is very useful. Remember Fitt's law.

    Have you tried the new Omniweb? It automatically follows the 'next' link in a page when return is pressed. I'm thinking, would there be a way to automatically do this with every browser, possibly by converting the 'next' button into a form submit button?

    Posted 7 hours after the fact

26. Pete:

    hmm not sure how I managed to get my URL up there instead of my name. Early morning and stupidity. Unplugging keyboard now :)

    Posted 8 hours, 12 minutes after the fact

27. Florian Jung:

    I always like to have different ways of navigation:

    1. A thumbnail page for fast and easy overview.
    2. Single image pages with text navigation using style "C" but all centered. Navigation has to go both on top and below images which is really useful for bigger images when you have to scroll down.
    3. The image-map-method but with three areas. I really like the solution of Garrett at http://linuxart.com/photoview.phtml?page=1&sid=04jul24-st._maarten_butterflies&iid=0724-091438
    Maybe this could be improved by changing the pointer style to right and left arrows when mousing over these areas.

    Posted 8 hours, 19 minutes after the fact

28. Morgan Aldridge:

    Example A: 3
    Example B: 1
    Example C: 2

    I'll go from best to worst here:

    Example B is, by far, the best over all. It keeps the photos centered and the navigation links in set locations. Although links at the top and bottom are not really necessary because the images are scaled to fit inside a set block, they may be useful to those with smaller browsing windows. I don't like the black background myself, but that can be forgiven.

    Example C is a close second. The navigation links stay in their set locations and you don't really need a second set at the bottom. However, the fact that the images jump around can be a bit annoying as well as causing problems with smaller browsing windows (lots of scrolling, of course).

    Example A. Do I really have to say anything about example A? Everything jumps around, even the navigation links. Not a good idea at all. Of course, it'll definitely be a major pain with smaller browsing windows.

    Posted 9 hours, 10 minutes after the fact

    Inspired: ↓ Leszek Swirski

29. Daryl:

    Example C: 1
    Example B: 2
    Example A: 3

    How about adding left and right arrow access keys on top of clickable nav that requires less mouse activity?

    Posted 9 hours, 22 minutes after the fact

30. Rakesh Pai:

    Option 3 is the best here, though I have to say that I've used option 1 most frequently whenever I've need similar navigation. Option 2 is kinda complex and not very appealing, since the images are resized.
    However, there is a problem with 3 that I can think of. Most users, me included, tend to look for 'previous links' on the left and 'next links' on the right of the image. Option 3 doesn't do a good job of making this clear. I've been confused even with the Yahoo Mail and GMail previous and next mail links. Maybe it's just me.
    However, the option 4 that has been suggested takes care of this problem, for most part. When the links are centered, it'd be difficult to miss them, won't be difficult to click them as different images load, and the co-relation between the "left" and "right" wouldn't be lost. I'd vote for option 4.
    Of course, option 4 will get complicated if you have to do anything more than previous/next navigation. I guess that's why most people use option 3 aligned to one side (as you've shown) with other links aligned to the other side. Easy way out for a designer, but I'd think it's not the best solution.

    Posted 9 hours, 40 minutes after the fact

31. Wim:

    C : 1
    A : 2
    B : 3

    The thing I dislike more than the jumping links is the ugly resize of portrait pictures in B.

    My alternative is the ability to click on the picture itself, clicking on the left side takes you back, clicking on the right side takes you to the next picture. Showing an arrow on :hover is optional.

    Posted 10 hours, 44 minutes after the fact

32. Wim:

    Looks like Pete had the same idea, I read over it the first time. Sorry Pete!

    Posted 10 hours, 47 minutes after the fact

    Inspired by: ↑ Pete

33. Brandon:

    I agree with Jeff (first comment) about the examples you've given us.

    I really like the navigation on this site:
    http://www.slower.net/

    The navigation (although not too intuitive on first glance, is really pretty cool. The left half of the image is an image map to the previous image. The right half, an image map to the next image.

    Posted 10 hours, 55 minutes after the fact

    Inspired: ↓ Eliot

34. Paul Griffin:

    I like example 3 the best, mainly because it doesn't alter the images, and the links don't move. However, I'll go you one better than proposing a different way of doing it... I've already written a gallery script (Simple PHP Gallery - http://www.relativelyabsolute.com/spg/) that handles navigation the way I think it should be handled.

    If you take a look at my gallery (http://www.relativelyabsolute.com/gallery/), you'll see the following elements:

    -folder navigation - navigate down through sub folders quickly

    -breadcrumb trail - immediately jump to any folder above the one you are currently in, or use the access key "u" to jump up one level

    -thumbnails - jump directly to any image in the current folder

    -when viewing a full-size image, large previous and next buttons are floated to the left and right, respectively. These links also have access keys (-,+). Were I so inclined, I could add javascript to make the left and right arrows take you forward and back.

    Best of all, should you decide that you don't like where things are, it's a cinch to edit the CSS and move them wherever you like.

    Posted 11 hours, 24 minutes after the fact

35. Katie:

    I'm with the general consensus of

    1. C
    2. B
    3. A

    for the same reasons several people have already cited.

    Posted 11 hours, 52 minutes after the fact

36. Jeff Croft:

    I don't like "a" because I find using two mice at the same time to be quite difficult. :)

    Posted 12 hours, 6 minutes after the fact

37. Rushi Vishavadia:

    Example C: 1
    Example A: 2
    Example B: 3

    This is the ranking I would prefer.

    The links which Phil Dokas puts up shows images which are the same size. If you have images which aren't always the same size it is good to have links which are static in the center.

    Posted 12 hours, 16 minutes after the fact

    Inspired by: ↑ Phil Dokas

38. Leszek Swirski:

    Posted by Morgan Aldridge:
    "Example B is, by far, the best over all."
    "Example C is a close second."

    I'm sorry, I had to.

    Posted 12 hours, 35 minutes after the fact

    Inspired by: ↑ Morgan Aldridge

39. Eliot:

    Searching for links stinks, so of these, it has to be C.

    But I think my site has it right (ah, hubris). As Brandon noted, I use a forward/back imagemap on each half of the image. Maybe not initially intuitive, but now it's tough for me to use any other scheme.

    Kottke cribbed it from me, so it must be good. :)

    Posted 12 hours, 36 minutes after the fact

    Inspired by: ↑ Brandon

40. Syntheticvox:

    I agree generally.

    That is, with these being the only options, c=1, A=3, B=2, but only in terms of navigation! As photoblogs are about visual aesthetics, a centered photo which changes size according to is format is necessary. (That being the case, A=1.)

    I highly recommend that all people hop on over to http://www.fotolog.net.

    They've done a nice job of allowing us to navigate through images (some folks over there have hundreds on the site). The mosaic thumb-nail (lightbox, if you will) is the only way to go.

    Posted 13 hours, 37 minutes after the fact

    Inspired by: ↑ Oliver

41. Andrew Phillipo:

    I say only C can be really justified. B might work without those mad borders.

    Also, I think the Kottke.org is amazing, and would be even better given that the next/previous buttons were highlighted depending on the side of the image.

    Would it be possible to use padding and absolute positioning to radically change the size of the target area for the navigation? It might be possible given the height and width of the image from a sevrer side script.

    May have to try this.

    Posted 13 hours, 37 minutes after the fact

42. Eddie Sowden:

    A: 1;
    B: 3;
    C: 1;

    I think having the navigation at both the top and bottom is good (better for those people with small screens). However, I also think the navigation needs to be together rather than spread out across the image.

    Posted 13 hours, 48 minutes after the fact

43. David House:

    A: rubbish. Moving navigation means more mental and physical work on the users part, which is never a good idea.
    B: better. Although it puts limitations on the photo sizes, and the distance between the two links is pretty large, it's better than A because the links don't move.
    C: perfect. No limitations on photo size, better than B on grounds of Fitt's law (small distance + big target = easy mouse movement. Dunstan uses it with links [1]).

    [1]: http://1976design.com/blog/archive/2004/09/07/link-presentation-fitts-law/

    Posted 14 hours, 54 minutes after the fact

44. Rob:

    This is very interesting to me as I will be creating a website for photographers for my final project in my degree.

    I often find this sort of problem very annoying, and moving the mouse if often totally out of the question.

    B seem to be the most ascetically pleasing as the images don't jump around the page but then it requires more work when uploading the images.

    C seems the best of both worlds, not much movement and not much hassle in changing things.

    However one factor which bugs me a lot (especially when using my 12" powerbook) is having to scroll down the page.
    I noticed this on some of the example pages people posted, were the websites banner took up 1/3 of my screen, forcing me to scroll on every image. Which without a scroll wheel is worse than dealing with the links!

    Ideally the image should be in the top left with just the navigation above it to make the most of the space available, perhaps a redesigned and condensed title.

    I guess this may be an issue designers overlook when they are sitting in-front of their 21" monitors :p

    Posted 15 hours, 10 minutes after the fact

45. Eduardo:

    Example C: 1
    Example B: 2
    Example A: 3

    For me is super-important that the previous and next button remains at the same place regardless of the photo.
    This way you can recline in you chair and keep pressing the mouse button, without pointing to a different place in each photo.

    Posted 15 hours, 40 minutes after the fact

46. Greg K Nicholson:

    I vote for hidden option #4 - Next and Previous browser navigation buttons.

    Posted 16 hours, 6 minutes after the fact

    Inspired: ↓ Chris Hester

47. Seth Thomas Rasmussen:

    I think all of them are fine. The one that places the links with respect to the image bounds is a bit frustrating, but might be what you want for your layout. A little movement isn't going to kill anybody, but it might annoy power-users that expect everything to be very quick.

    Now, this is not a shameless plug, but your post is very timely so I would like some feedback on my photoblog nav:

    http://remembermeme.net/

    Personally, I thought it fairly straightforward. It doesn't use the terms "next" or "previous", but it does use familiar icons for "advance/goback by one" or "advance to end/start". At least, I assumed them to be very familiar, as we've seen them on VCRs, CD players, etc. for years now.

    Nonetheless, I've had several people, including my programmer colleague at work, tell me that they were confused by it.

    ?:-[

    I can see that MAYBE one bigger issue is that it's not EXPLICITLY declared that those are nav controls. However, considering what else is going on throughout the page, there are only so many other things people could try.

    Again, not trying to shamelessly plug or hijack this thread, but if anybody has any comments, I'd appreciate it. You could even just go comment on the blog if Dunstan would prefer to keep this on track.

    Thanks!

    (And another great piece Dunstan, keep it up!)

    Posted 16 hours, 33 minutes after the fact

48. Grayson:

    I think my site does it fine (C). I do keep all my images the same width, but even if the images were smaller, the links would stay where they are. The only caveat is that on the first page, the previous picture link is all the way to the right; once you move into the archives, the link order is previous image, *then* next image, so there's some movement there.

    I would prefer to have this as well as a thumbnail navigation method, but I'd have to generate thumbnails of about 250 pictures... Maybe in the next design ;-)

    Oh, for the record: A and B are out of the question, but frequently used. It bugs the heck out of me.

    Posted 17 hours, 12 minutes after the fact

49. Seth Thomas Rasmussen:

    I should clarify:

    The one with moving navigation is not exactly "fine", but... I can imagine a situation where your links are bound to the edges of the same container as the image. I dunno, it might make sense structurally and code-wise, and provided the images aren't drastically different in size, I don't think it's so bad.

    Posted 17 hours, 12 minutes after the fact

50. Chris Hester:

    Yes, using the browser's built-in navigation toolbar is a good idea. However, only Opera and Mozilla support this I think? Also many users turn off the toolbar to save screen space.

    My votes for Dunstan's examples:

    A:3
    B:2
    C:1

    I've just compiled a set of photos myself. What I did was simply add the links to the previous and next images on the top line, left-justified. I also added other links. Check out my way of doing it and see what you think:

    http://www.designdetector.com/photography/the-september-project/01-bedroom.php

    Note - there isn't a previous image link on the first page, as obviously it doesn't go anywhere! I thought about looping it to show the last image, but thought that might confuse users.

    My links stay in the same place except for that first page. Like example C!

    Posted 17 hours, 47 minutes after the fact

    Inspired by: ↑ Greg K Nicholson

51. Woolfie:

    c=1
    b=2
    a=3

    Posted 18 hours, 10 minutes after the fact

52. Serge K. Keller:

    I'd say A:3, B:2 and C:1

    Posted 18 hours, 11 minutes after the fact

53. Dave P:

    If you take a look at my gallery: http://run4yourlives.com/gallery/, you'll see that I use example C. Thankfully it seems the consensus thinks it's the most usable, because it was originally going to be example B.

    I found an interesting display issue in IE 6 when I used floats for the buttons, that caused the title and description to become invisible, so I abandoned the idea.

    What I really wanted to point out though, is that all of my pics are the same width, which to me means that the user is looking at a standard display, without anything - be it picture or buttons - moving horizontally in any fashion.

    Just a thought.

    Posted 19 hours, 9 minutes after the fact

54. Steph:

    C=1,B=2,A=3

    The key principles being:

    1. it's better to be consistent and keep navigation links in the same place from page to page
    2. smaller mouse movement to navigate backwards and forwards is preferable to greater movement (and makes it easier to correct an accidental double click, say)

    Posted 20 hours, 55 minutes after the fact

55. MrCastle:

    I think the best would be something like this :
    http://mat.ulaval.ca/pages/belisle/NZ/PhotoGallery/Popup.php?photo=0&document=North%20Island%20Tour,%20Day%20Seven
    It's the same Example 3 but the nav's on the bottom and centered.

    Posted 23 hours after the fact

56. Morgan Aldridge:

    Wow. Having now read everyone's comments, I'm still surprised that C got such high ratings. I agree that B would be a little more useful if the navigation links were centered as opposed to on the far left and right sides, but I find aesthetics to be the most important factor (especially in a photoblog). Jumping images and having to scroll is far more annoying than having to move slightly horizontally to click navigation links.

    However, I must admit that I'm still trying to ignore that hideous black background.

    Posted 23 hours, 49 minutes after the fact

    Inspired: ↓ Jeremy

57. Jeremy:

    c=1.5
    b=1.5
    a=3

    I am torn, like Morgan, between liking the navigation of b but hating the changing background. Obviously easy to fix. But given what Dunstan said before about Fipp's Law (or whoever it was) then it seems to be that making the clickable areas as large as possible is a good idea.

    p.s. "clickable", a spelling mistake, on a website about usability? Sheesh.

    Posted 1 day, 7 hours after the fact

    Inspired by: ↑ Mike D., ↑ Morgan Aldridge

58. Pedro:

    Example C: 1
    Example B: 2
    Example A: 3

    Mainly for consistency, as someone said earlier, although I'd put the links under the picture and centered.

    Posted 1 day, 10 hours after the fact

59. MaThIbUs:

    Example C: 1
    Example B: 2
    Example A: 3

    My vote goes to C, however I'd consider applying Fitts's Law in order to make these links wide. About 50% each, so that it's only a matter of pixels to move your cursor from "Next" to "Previous".

    Posted 1 day, 14 hours after the fact

60. Pushkar:

    A: 3
    B: 2
    C: 2
    'A' is 3 cos its irritating to move the cursor all the time. Typically pictures are of different sizes, so the design should be able to handle that.
    'B' and 'C' are slightly better... but just slightly. :p~

    anyhow. I have 2 sets of photoblog implementations on my blog .. one is very similar to 2 and the other is slightly better esp from a user's perspective (I think). This second one uses Flash though. http://www.airtightinteractive.com/simpleviewer/

    my blog URLs are..
    http://photos.pushkar.net (for 1st photoblog)
    http://pushkar.net/photos/ (for the flash gallery)

    Posted 1 day, 14 hours after the fact

61. Marco:

    Example A = 3
    Example B = 2
    Example C = 1

    Posted 1 day, 20 hours after the fact

62. Brent O'Connor:

    A: 3
    B: 2
    C: 1

    I think functionally, C is the best because it requires less mouse movement. However, I think aesthetically a combination of using B's photo centering and adding some more navigation links on the bottom that are the same as the ones on the top of C would be better yet.

    Posted 2 days, 16 hours after the fact

63. Joel:

    c=1
    b=2
    a=3

    Posted 2 days, 17 hours after the fact

64. Greg Schwartz:

    I like the 4th option suggested by Mike Burnard (centered links at both top and bottom) and I also like the example provided by JD ( http://mute.rigent.com/ ) where he "has simply increased the clicking area for next/previous buttons!". I'd also suggest accesskeys of N and P for next-previous.

    If you really want to get crazy, you could even use the XHTML tags that can indicate next/previous/index (don't remember what they are off hand, but shouldn't be too hard to find on Google).

    So: A=3, B=2, C=3, D=1

    Posted 3 days, 1 hour after the fact

    Inspired by: ↑ Mike Burnard, ↑ JD, ↑ Ramin

    Inspired: ↓ Miles

65. Aquarion:

    Option C preferred, though I like Mike's option D.

    Also, include <link> tags for them, so I can use my browser's ability instead.

    Posted 3 days, 13 hours after the fact

66. JIm:

    Best (1): B
    Okay (2): C
    Worst (3): A

    B is the best. Because of the "matted" framing of each photograph, the image always remains in the same place. This means that I can click "Next" 1,000 times and expect click number 1,001 to be in the exact same spot. I don't care, apperance-wise, for the black bars on portrait oriented photos, but... I'd rather have ugly and easy to use than pretty and impossible to navigate.

    A is the worst because the links move around with each image. Despite whether I navigate from the top or the bottom, I will most likely have to move my mouse a lot. I've seen albums like these before, and, generally, what I do is start at the back and use the top PREVIOUS navigation button to go through them. At least, then, it stays put.

    C is better than A because the links stay in the same place. However, it is worse than B because I don't have the option to navigate from the bottom, and I think it's always a good idea to provide navigation elements before and after the thing being navigated.

    Posted 3 days, 14 hours after the fact

67. David:

    For me:

    B = 1
    A = 2
    C = 3

    B - there are 2 next and two previous links to choose from, I like a choice, also requires no mouse movement while clicking through.

    A - again there are 2 next and previous links, however some movement is required, though not much.

    C - only 1 next and previous link and they seem to be pushed out of the way towards the top corner of the image, to me they just seem less significant and in fact I didn't even spot them right away.

    Posted 3 days, 21 hours after the fact

68. Miles:

    Hi, I found this discussion through my site's stats and I'd like to thank JD and Greg for checking out my photoblog.

    When I designed the site I thought a lot about the navigation. I wanted two things from the image nav, that it never moved and that it was at the bottom of the image - the bottom seeming to be the place where most people prefer to 'rest' their cursors.

    In the end I had to abandon the idea of having the nav at the bottom of the image because the height of the images would change and I didn't want to be restricted so the nav didn't move, and I knew that a lot of people wouldn't see the bottom part of the larger images, so they would have to scroll down to see the nav.

    I didn't double up the nav because the two buttons I've used for the comments are too similar, and a second set would probably cause some confusion.

    In your examples above, 'C' seems to be the most common in the photoblogs I visit, usually situated top right, and I would say 'B' is my preference. I did experiment with creating a 'matte' that defined the image area (http://mute.rigent.com/index.php?ladat=2004-08-07) but I didn't like the way it looked, the consistent border was more appealing to me.

    I am glad to have found this site, the design, functionality and coding here are beautiful. My photoblog was the first CSS site I've attempted and it's a bit of a hack, but it was enjoyable. I've noticed that with the new FireFox release a slightly larger border has appeared at the bottom of my buttons. I'll have to check that out.

    Thanks again.

    Posted 3 days, 22 hours after the fact

    Inspired by: ↑ JD, ↑ Greg Schwartz

69. Andy Budd:

    Part of the reason I decided to create my own gallery as I did was out of a similar frustration you felt looking at other peoples galleries. I hated the fact the people would put the next and prev links on opposite sides of the page as it meant the user would have a really long mouse movement to flick between screens. While the resizing images on some flash sites is clever it obviously moves the nav around which is annoying. As such I decided only to display landscape images in my gallery and keep the next and prev links side by side.

    Posted 4 days, 12 hours after the fact

70. Mark J:

    B looks better, but A is more user-friendly, as the distance between the links is small, so it little mouse movement is needed.

    Posted 5 days after the fact

71. Doug:

    Everyone's noticed the moving links, and I agree that C is best. (Also, I find that way too many photoblogs use A.)

    I'd just like to add that all three examples do at least one thing right: Use text for the links. Even when the link jumps around, I can still use Firefox's "Find as you type" feature to navigate (e.g., by typing "n, [Enter]").

    The worst sites combine wandering navigation with either image-based links or non-keyboard characters such as "»". These sites I avoid.

    Posted 1 week, 3 days after the fact

72. Mark:

    I'm with option C.

    Reason being, the less movement of the mouse the better (Option A requires too much).

    Secondly, I prefer to see photos in full size, without the necessity of resizing them (As in option B).

    Third, I dislike black or blank area in option B.

    I encountered and overcame the problem somewhat in the photo gallery on www.graftonguesthouse.com

    Posted 1 week, 3 days after the fact

73. Rakesh Pai:

    Dunstan, I am still waiting for you to conclude this discussion.

    Posted 1 week, 6 days after the fact

74. Sirenssounds, Sir 2 Freinds:

    I've seen a lot worse than those 3. With all thats worse out there i'm surprised you even noticed. Not taking the opportunity to do a little pre-loading would annoy me more.(I am in a major Australian city and can still only get dial-up @ 22.8:-)
    I was even toying with an idea of a pre-load web service where ppl can log on, name a list of sites they'd like to paruse and come back to their desks in 30min/next week? to live the faux-broadband life for a while. I know I'd use it. I may even give myself a 10% discount!
    Photo galleries in general need to be much smarter, they are dumb like Windows Explorer! A list of said photos as a menu with check-boxes so we can maybe leave a few of the less interesting baby pictures out? The large photos in 2 panes (L&R), the instant one has loaded, the one before disappears and is replaced? giving enough time to view each photo Complete! without any un-needed delay in the whole process. Some cool 'pause', 'save-to', 'next>' buttons to stay in control.
    Sounds good to me. I guess i'll be off to make my new gallery script then:-)

    Posted 1 month after the fact

75. Marc:

    As someone who runs a photoblog this was an interesting read, even though I don't have Prev/Next links on my blog - something I only realised recently. When they are implemented though, I'll have a good idea of what not to do.

    I don't like the idea of resizing photos based on their orientation. That's like saying if you take landscape photos you can print them at 4x6 but if you take portraits you have to print them at 2.6x4.

    Also, FWIW, the mouse gestures/shortcuts in Opera are great for browsing photo galleries. [hold left button]+[click right button] moves me forward. [hold right button]+[click left button] moves me back.

    Posted 4 months, 3 weeks after the fact

76. Michael Singer:

    in my opinion, example c is best.

    Posted 6 months, 3 weeks after the fact

Jump up to the start of the post ↑

Add your comment

I'm sorry, but comments can no longer be posted to this blog.