I'm putting together a little tutorial website, where tutorials should be read one by one, in a particular order. The tutorials are shown as thumbnails that can be clicked on, like this:

ordered thumbnail links

I want people to start with the link in the upper-left corner, then go to the right, the same way you read words. However, I'm afraid that's not obvious, and people are just clicking them randomly, which will definitely confuse them. (I don't really advertise this site very much, but I've had at least one person ask me what order these tutorials should be read in.)

So, my question is: How can I make it more obvious that these links should be clicked in order?

This is complicated by the fact that there are sections of links where the order doesn't matter. The Examples section contains similar links, but there is no inherent order. And the bottom of a tutorial link page might contain an Advanced section, where order doesn't matter there either.

Here's an example of a section where order doesn't matter:

unordered thumbnail links

In this section, people would have already gone through the tutorials and are coming here to look at examples, so the order they view these in doesn't really matter.

So I guess a more specific version of my question is: How do I show there's an order to the thumbnail links in some places, but not in other places?

If you want to look at the overall site, it's available at HappyCoding.io. I'd also love to hear any general feedback.

1 Answer 1


Why don't you just use numbers before the titles? That way when the click the number will also be in the title of the page when they are watching the tutorial in a detail page?

enter image description here

To emphasize you could also add the word 'step' before each.

enter image description here

Edit As pixelSnader recommended, you could also try the numbers right over the thumbnail as well:

enter image description here

  • 1
    I would strongly suggest (also) putting the number in the thumbnail, because that is a much more attractive element on the page. Commented Aug 14, 2017 at 7:28
  • @PixelSnader; not a bad recommendation. I've appended a quick sketch based on your advice.
    – Mike M
    Commented Aug 14, 2017 at 14:22

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.