1

enter image description hereMy query is for Web - Desktop.
I have a list of 6 items in the primary header. Out of which 2 items needs to be functional on click and on mouse hover. Rest 4 are functional on click only.

OPTION1    OPTION 2    OPTION3 ||    OPTION4 ||    OPTION5    OPTION6

|| - An affordance(usually a downward arrow) to feel the Onhover function

Option 1,2,5&6 have Onclick function, Option 3&4 have both Onhover and Onclick functions.

How to effectively communicate this? Currently users tend to believe that either the menu item is functional on hover or on click. But not both. This is what I have found with Usability Testing.

  • Please explain question in detail – Jasmin Javia Dec 29 '16 at 6:58
  • Images can also help to add detail to your question. – locationunknown Dec 29 '16 at 7:15
  • Please check it now. – sruzan Dec 29 '16 at 9:05
  • So when click a more extensive (hover) list is shown? Or it navigates to a page where the list is? – Alvaro Dec 30 '16 at 10:50
  • On hover - suggestions; On Click - New page; as shown in the image – sruzan Jan 5 '17 at 7:20
2

Considering your comments, and that this question has been discussed in detail here -

1) You could try renaming the Menu item, and call it something more specific. Say, "Other Smartphones?", "All Smartphones" etc. This can then help establish to the user, the content behind the menu.

2) Next, you could leave the click action on the parent node as is, but also supplement the "All" option in something like a sub-menu, giving equal importance to the nav-items. See a quick mockup attached.

enter image description here

1

Your question seems similar to this other one. Basically, there will be people who think buttons respond on hover and others on click. There is no effective way to indicate that an element will work on hover or on click, so you need to adapt to users behaviours and possible interactions.

Right now, to open the submenu some users might:

  1. Hover the root element
  2. Click the root element

There will be users that might click quickly the root element, before they realise it opened on hover, and be redirected.

To close the submenu some users might:

  • Move out the cursor
  • Click the root element

Those who clicked the root element to close the submenu will be redirected.

I think that it is more intuitive, and creates less conflicts, to show the submenu on a click event, and include an element in the submenu to visit your actual root element.

  • Totally agreed. But, my scenario is such that I need these 2 options (3&4) to work on click and on hover as well. On click doesn't cancel the hover, but it navigates to a parent page with lot of filters/lists. On hover results are sub categories. I can add the parent page as link on hover results, but it is losing its significance. I feel that it is something that needs to be highlighted, which I am not able to do by putting it as a sub category. – sruzan Dec 29 '16 at 11:48
  • @sruzan then maybe you can consider giving the click function to a second button/icon next to the parent element. If you could post an actual design it'll be easier to discuss the case :) – Alvaro Dec 29 '16 at 11:51
  • Will post the actual design once I reach home. Click function to a second button is a good idea. But, do you think user will get to know that the particular icon is clickable(and leads to some other results on click)? I have not this kind of behaviour on any other site. Also consider the clickable area. Icon is 1/5th of the menu item. This turns out to be of least importance or tertiary. I feel that we are jumping directly from primary to tertiary focus in terms of hierarchy. – sruzan Dec 29 '16 at 12:04
  • It was just an idea, but lets see it with the actual design. – Alvaro Dec 29 '16 at 12:06
  • I have added the image. Check it now – sruzan Dec 29 '16 at 14:26

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.