1

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.

Category/Subcategory Navigation

  • 3
    Just remember: On mobile and in screen readers, there is no such thing as hoover. Why not use onClick instead? – Ilias Bennani Sep 2 '16 at 9:16
  • What happens when a subcategory is clicked? Does it navigates to a different page? – Mandeep Jain Dec 28 '16 at 7:15
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.

  • I thought the icon was important to signify to click through, especially since on other blocks a menu will appear when hovered. So I didn't want it to seem like something wasn't happening that was suppose to. I see your point though with the icon I choose. – christian Aug 29 '16 at 20:22
  • @christian The problem is that an UP arrow – as you show – tends to imply (as Mattynabib says) go up [in a hierarchy] ... i.e. to the "parent" of which Categrories 1..4 are children. If keeping it icon-only, a right-pointing arrow would probably be best, although adding "View" or "View category" as a label might be preferable. – TripeHound Aug 25 '17 at 12:01
0

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: ->

0

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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