I'm using the excellent sortable.js to let people sort image thumbnails by preference. Being a mobile-first, responsive site, the <ol> containing the images may change shape - and the list items images will wrap (li {float:left}). The images' visual accuracy is fairly important, so I'm trying to avoid overlaying with translucent numbers, etc.

What's a good way to let grannies grok that top left is #1, and bottom right is last?

1 Answer 1


Why not add a visual indicator on each image displaying the image's current numerical position in a collection? (eg. #1, #2, etc...)

That visual cue should clear up any confusion your end-users may have. If you happen to try any other layout (left-to-right, right-to-left or vertical) that visual queue will help educate the order and flow of images.

  • I ended up doing a translucent <span> overlay with the order (#1, #2, etc) visiable on mouseover, recalculated on each list update. Not ideal for touch devices though, so I'll seek a little user feedback for those scenarios.
    – Escher
    Nov 4, 2015 at 15:08
  • why not make them always visible?
    – Igorek
    Nov 4, 2015 at 15:09
  • Because the visual quality of the images is very important. The task requires the users to rank the images according to aesthetic appeal, so I can't permanently overlay a big "#N" on an image because it would ruin the image.
    – Escher
    Nov 4, 2015 at 15:17
  • Gotcha, how does the ranking work today? Is ranking available as soon as you see the collection of images or does the user have to click on some CTA to update rankings?
    – Igorek
    Nov 4, 2015 at 15:22
  • Here's a mockup - it should answer your questions. codepen.io/anon/pen/xwaOja (ignore bloated code; it's cut and pasted from a larger project)
    – Escher
    Nov 4, 2015 at 20:39

Your Answer

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

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