Image Blocks with Sub Navigation on Hover

Question

I'm working on a site that has a bunch of categories which I'd like to display graphically on the homepage to help the user navigate to the information most relevant to them.

Because there are quite a few, I have grouped many of them together.

The first 4 image blocks below demonstrate how a list of subcategories animates into position when a block is hovered.

The last 4 blocks demonstrate what happens when a block doesn't contain subcategories.

I'm trying to figure out the best way to make these elements look more interactive. I have a feeling some people might not intuitively understand how to use them.

Currently I am thinking about changing the main category titles into buttons and initiating subcategories on click instead of hover. However, I wanted to see what others suggest.

Answer 1

A lot will depend on what else is on your page and how many options the user has. If those labeled images are the main focus of your page, I think people will very quickly figure out to interact with them, and if there is a clear change in state when they hover (or touch on a mobile device), they will know they are interactive.

I am not sure I understand the icon when there are no subcategories, what does it signify? Does it mean "if I click this it will take me up a level in the hierarchy?" Or perhaps "Upload something here?" If you simply need to show the change of state, you could outline a hovered image with a color, continue to shade the image but show something else that is more immediately meaningful, or any other number of things, but only use an icon (at least without a label) if the meaning and function will be immediately evident to the user.

Answer 2

Add a bit of text instruction, such as "Navigate to...". For example:

With subcategories:

Navigate to:  
-> Subcategory 1 
-> Subcategory 2  
-> Subcategory 3

Without subcategories:

-> Navigate to Category 3

...and use the same navigate icon for both cases, for example: ->

Answer 3

If this is the actual design you are going to use, the category look too much like a label. It may not be easy to tell from a glance whether the image is clickable. As what you have suggested, you might want to redesign the label to look more like a button and make the entire image area clickable (or hover).

Aside from interaction challenge, you should also differentiate item with subcategories from item without subcategories. One possible approach is to add a small icons next to the button.

^{download bmml source – Wireframes created with Balsamiq Mockups}