I'm looking for other ideas to give a grid box (which contain an image with its title) a better user experience, make it easy to use. I think some people can't find out that they should hover and then click on the image to see the full post.

This is a step-by-step tutorial blog, imagine a food blog. I displayed the first page of the blog layout, which the boxes contain the latest posts, with their thumbnail and title. There are several line of boxes, with different widths. There is no problem with a wide width box, (3 box each 30%, or two box each 48% width), I can easily put the title under the thumbnail. The problem is when the boxes have a width about 20%, for example when I put 4 boxes in a line, as showed in the above image. Then I can't put the title under the thumb, because it will give the box a bad view (it will break to many lines)

I found two ideas for my grid box layout design. The first idea is better for when the boxes have a wider width:

first idea

That wasn't suitable when there are more boxes in a line, so there is another idea:

the second idea

So I need ideas, to put several boxes in a row.

  • This is way too vague to have an answer. What is the actual problem you are trying to solve here? What is the use case? Who are your users? What is the content?
    – DA01
    Commented Nov 4, 2013 at 5:52
  • I added some information Commented Nov 4, 2013 at 10:47

2 Answers 2


Something that I have learned from years of user testing: Users do not like hover reveals. If you have a grid of options and hide the titles, then the user has to roll over every item on the grid to evaluate the right choice forward. Thats a lot of cognitive load.

Users scan, they don't read. And they definitely miss content that is hidden from their view. I would look for a solution that does not require interaction to reveal the information necessary to pick between choices.

And apologies for all NN/G links, they were simply the easiest ones I could find that would back up my own experience (since the vast majority of my research is proprietary to someone else).


The user experience is largely affected by how many boxes you show. Find out the right number to show and where and how to place them before designing them in detail. But besides that, an idea when using smaller boxes could be using a transparent overlay for the title:

enter image description here

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.