10

This is one of those things that has persisted on the web without getting fixed for so long that I'm starting to wonder if there's something wrong with me for having a beef with this design pattern.

There are a few commonly used image gallery scripts on the web, and they all look like the first mock up below...

  1. They hide before/after arrows until you mouseover the image.
  2. They have Before and After arrow in the opposite sides of the image, making it extremely inconvenient to go back-and-forth.

I would prefer the second or third option. I know the second option might be confusing at first, but you can just put it on one side, and not both.

Is Option 1 really superior? And how so?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this question
3
  • 3
    because that layout is a natural mapping.
    – Dan D.
    Mar 21, 2012 at 4:45
  • 1
    Thanks Dan. I would almost agree with you if most of them didn't hide the arrows until you mouse-over them.
    – Jung Lee
    Mar 21, 2012 at 5:12
  • 2
    I've seen some gallery popups that split the image in half and each side is clickable.
    – jackJoe
    Mar 21, 2012 at 9:02

3 Answers 3

Reset to default
4

Button vs Clicking area

I believe option 1 works fine when clicking anywhere in the image also means next. Especially as it is the natural mapping, as @Dan D states. I would like to regard the arrows to be positioned at the right place. It is often the clicking areas that could be improved.

When clicking anywhere in the image also means next, and these controls are properly feedbacked with highlights on mouseover, and so on, you can easily browse forward, and only have to be precise with the mouse when browsing backwards.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
3
  • +1 - especially in Mobile apps where you can just click half the picture and know you are going forward or back.
    – Martin
    Mar 21, 2012 at 12:41
  • 1
    I think highlighting the right arrow as shown in your second pix is a great idea. Unfortunately I haven't seen it done in many places. Another problem is, some users and content creators want clicking on the image to invoke a larger version of the image.
    – Jung Lee
    Mar 21, 2012 at 15:00
  • I see. A need of easily enlarging the image did not occur to me. In this scenario I assume the image to use most of the window area. Clicking on the image to zoom/open/enlarge would be more accurate in a cover flow scenario, imo. But I am not much of a web programmer and I never used an image gallery script from the web, so I really can't answer why they do that.
    – JOG
    Mar 21, 2012 at 16:24
1

In both your other examples, especially with smaller screens, there's a danger that users may accidentally click/tap an item that was the direct opposite of what they meant to.

That being said, the mouse is a precise tool, and mac scrollbars do put the < > next to each other, which is similar to your last example, though not identical.

Improve this answer
1

@Jung lee, I'll admit my assumptions might be flawed but with regards to the questions you had raised :

  1. They hide before/after arrows until you mouseover the image. : I suspect it has something to with the fact that most of the sliders which use layout 1 are generally used for images and in photography or portfolio websites. Having the the visible next buttons on them could distract the user from a significant part of the picture or worse even hide it.Having the navigation temporarily hidden allows users to focus on the picture until they want to potentially interact with it and that's when the the navigation buttons become visible

  2. They have Before and After arrow in the opposite sides of the image, making it extremely inconvenient to go back-and-forth : I would assume that this was by most people read from left or right and they would associate the left/right buttons to be at the margins from where where the transition becomes easy for them to observe the next image to slide in i.e when they press the left arrow,the image slides into focus from the left . This way a natural mapping is established without having asking the users to establish the leap between clicking an arrow and determining where the image would appear from next(though I suspect it wouldn't really take much effort to figure it out even if the positioning wasnt right at the margins).

    The second reason is if you look at option 2 and option 3,the right and next arrows are right next to each other and there is significant scope for the user to accidently click the wrong arrow and get confused about the wrong image coming on the carousal or slider or the image sliding in from the wrong direction which would be quite opposite from his expected mental model of the system

enter image description here

Improve this answer
1
  • Thanks for the reply. I know the arrows look small in your sketch, but I really think accidental click is going to be rare, and the consequence is benign at best. This isn't something that can't be remedied with a little bit of spacing.
    – Jung Lee
    Mar 21, 2012 at 17:42

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.