15

We use Next/Previous buttons as controls in our image gallery. I'm in the process of implementing responsive design, so there is a limited amount of space that I can be used for these buttons. I'm wondering if using "Prev" instead of spelling it out as "Previous" will confuse users or if they will generally understand it. The buttons will also have arrows pointing in the respective orientation.

--Edit

To clarify, the buttons are oriented vertically (along with the text) so that they match up with the height of the image. So the real issue is the height of the previous button when we get down to mobile size.

Improve this question
8
  • 11
    Do you even need Prev and next? Image gallery with arrows either side of image has good affordance.
    – Wander
    Sep 20, 2012 at 15:50
  • 4
    Our previous tests have shown that we get better click-through rates if we have the words + arrows in the button rather than just arrows. That's why we are more inclined to keep the words.
    – kretzm
    Sep 20, 2012 at 16:51
  • 2
    @kretzm: Were the buttons without text the same size? Otherwise, you may be getting better click-through rates because the buttons are big, rather than because they are understandable.
    – Brian
    Sep 20, 2012 at 19:15
  • Could you use "Last" instead? Don't if you use previous in other places, but just a thought. Also, keep both next and previous buttons the exact same size and use a narrower font for the word previous. It can look ok, it really depends.
    – Ian
    Sep 20, 2012 at 19:43
  • @Ian re-wording is a possibility, but we do use "previous" for our larger viewports (tablet and higher). I mentioned it below but I should mention it again, our buttons are oriented vertically (including), so it's really a height issue at mobile size that's causing the issue.
    – kretzm
    Sep 20, 2012 at 20:23

6 Answers 6

Reset to default
15

Words are really unnecessary, since arrows are used on a lot of standard image galleries online. You could have the arrows shown all the time or when the user moves the mouse or touches the touch screen. Fading the arrows out after a time-out gives the user enough cues to know there are more images to see.

Hanna with a hammer

My daughter Hanna, age 7, using a hammer for the first time assembling IKEA furniture. It's easy to see there are previous and next images on this screen shot. Arrows fade out if I stop moving my mouse. Source: SkyDrive.com.

Improve this answer
12

Would it be an option to rotate the complete word at small widths?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
4
  • Our current next/previous buttons match the height of the image with the text already oriented vertically.
    – kretzm
    Sep 20, 2012 at 16:52
  • @kretzm if they're already vertical, why make them shorter? Horizontal space is usually the limiting factor.
    – Ben Brocka
    Sep 20, 2012 at 18:04
  • When implementing responsive design, the main image can get scaled down pretty small vertically. Fitting the word "previous" into the button becomes really tight and looks sloppy. I want to maintain a certain width so that users can still click on it with their finger, but the height should scale accordingly.
    – kretzm
    Sep 20, 2012 at 20:19
  • Ok. I gathered that you were mainly pressed for horizontal space. I think you have no other option than to reduce to just an arrow or a < > then, as suggested by others.
    – André
    Sep 21, 2012 at 7:20
11

One trick you can use us to show the full word at higher break points.

Mark it up something like this:

<li>Prev<span>ious</span></li>

Then at your lower break point hide the span .. and show it at higher break points.

As to whether people will understand it, the best way to find out is to user test it.

My guess would be that the answer is yes, accompanied by arrows.

Improve this answer
3
  • This is a pretty cool technique that doesn't get used in responsive design enough!
    – Andy Fleming
    Sep 21, 2012 at 5:29
  • Be careful with how you hide that though; from an accessibility point of view you'd generally be better off marking it up as <abbr title="Previous">Prev</abbr>; if you display: none that span tag most (all?) screen readers would read (out loud) "Prev".
    – Kit Grose
    Sep 21, 2012 at 7:05
  • Upvote for the neat technique. However, we use a CSS sprite for the buttons, not text.
    – kretzm
    Sep 21, 2012 at 13:26
6

My answer comes from experience with enterprise software sold worldwide.

You should not use Prev instead of Previous because translation of abbreviations is more difficult than translations of complete words. Abbreviations in the UI increase the likelihood a person will have to translate the text instead of a machine. Involving a human translator increases costs of development.

For the same reasons the < li >Prev < span > ious < /span >< /li > technique, suggested above presents a problem. A person, not a machine, will have to touch the code to ensure the correct text appears in the span.

None of this matters if you expect the UI will not appear in a language other than English.

Improve this answer
5

Push the "previous" and "next" a little outside the slider, maybe? You could also maybe change the arrows to "greater than" and "less than" signs. Like in the first image of the mock below.

enter image description here

But in my opinion, if you are "degrading gracefully" to smaller screens, I'd suggest you go for an "either or" option.

Where you could choose between going from "arrows and previous/next" to just the "arrows" or "previous and next".

Also have a look at some of these responsive sliders

Improve this answer
-1

I suggest you can go with 'Pre' instead of Previous. Prev is somewhat not justified. or else using double arrows will be a better option.

Improve this answer

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.