Hot answers tagged

274

For consistency, the behavior should be based on the calling action; click or hover. If you are opening the dropdown on click, let the user toggle and close it, or close the previous dropdown when user clicks on another thumbnail. If you are opening the dropdown on mouse-over, close it on mouse-out.


80

The answer to this question is part of a more general UX rule: moving the mouse (without a button held down) is not input, and applications should not respond to it by taking any nontrivial action. Trivial actions include things like adding/removing underline, changing color, or performing a small, spatially isolated animation to indicate clickability. ...


58

This seems full of usability issues, as well as possibly performance issues loading interim unnecessary pages (e.g., user moves mouse across tabs to access one several over). To start, if there's user interaction within the tabs, even as simple as selecting a filtered option, are these changes preserved when tabs are swapped? Is there some reason swapping ...


43

I honestly think that hover menus are bad UX entirely. I suspect the only reason they exist in the first place is that they are easier to implement in pure CSS, so the developer can get away with something the user doesn’t necessarily want. Here are some points to consider: Most operating systems wait for a user click before activating a menu. The hover ...


31

This is annoying. Ignore any hypotheticals we can't judge in the gif. There's still an enormous usability problem. There are a lot of buttons and whatnot at the top of the browser (or even above that on some setups) and trying to access them isn't an indication that the user wants to go to a different tab on the website. For example, you might want to go ...


23

I agree with DPS's answer, however I'd opt for explicit behaviour - thus clicking to open and clicking (or pressing Esc) to close. Why not "on-hover"? If the user opens the dropdown and makes a more generous mouse move (move away the cursor to read all the options) - the menu disappears increasing the annoyance. There is something else I'd like to ...


20

Given your requirement: Each status has it's own associated colour and would ideally be displayed in the list Then we're not discussing if there should be a color or not, question is how to harmoniously display that color in a way compatible with Google Material Design? Coloring the entire item is problematic: It's not aesthetically pleasant. It's ...


16

If anyone is still looking for updated answers around this subject, Nielsen Norman has a great article on the subject: https://www.nngroup.com/articles/timing-exposing-content/ Mouse cursor enters target area: display visual feedback within 0.1 seconds. Wait 0.3–0.5 seconds. If cursor remains stopped within target area, display corresponding ...


15

Having content-obscuring changes happen at all on "hover" is an accessibility bug, so this is a non-starter. Not only may it be difficult or impossible for users with particular accessibility assistance devices to discover or trigger the hover behavior. It can also limit accessibility for: users who do not use assistance tech but who have ...


14

They don’t! As web applications are more and more packed with information, the need to hide controls have emerged. The option would be to have even longer web pages, showing a lot of redundant controls for every post as in "unfollow post, unfollow updates from user X, unlike page, still like page but don't show updates, and on and on and on. This has ...


12

Short answer: Use your second option, where each field has a neutral white color as the color is not classifing elements in the list. Color should be used to give distinction with other elements from its context or to differentiate elements. Think of the way links have color and not the surrounding text. For example (image source): In the image above, an ...


12

...Or you can consider changing the design altogether. Personally I think it's not a good idea to hide functionality under three dots. Show actions on hover You can remove click/hover altogether by showing actions straight on hover. I'd argue it's better since you save the click (I'm not showing move/rename for brevity). Show actions in the main screen If ...


11

The cursor should change depending on the interaction the user can do with the element, not on the tooltip. A tooltip appears to explain what the element is or what it does. For example when we hover over a link the pointer cursor reinforces that clicking the link with do some action. This link might also have a tooltip, but the cursor depends on the click ...


11

You might consider adding a way for the user to close the drop down. This way there is no confusion on how to close it and no annoyance of accidentally closing it by moving the mouse out of the area.


10

In general - don't use hover to engage actions! Hover can be used to show subtle graphical cues like highlighting a button to show that it's possible to interact with it, or to show a tool tip. Users can get frustrated if actions are engaged just by hovering since it's not a standard way of doing it. And (as stated in the comments) - hover doesn't exists in ...


9

I've read about this a few months back, but can't recall where, so doing this off the top of my head. It goes: To begin with, systems should not rely on hover effect to denote a clickable item. In this age of touchscreens, the presentation should make it clear what is clickable and what's not. Then, it is recommended to change the cursor upon hover, ...


9

I happen to find that behavior quite annoying, especially with nested menus, on YouTube on a HTPC. The remote mouse is easy to get off track and wham I have to start over. Anyone with less than perfect dexterity will find this to be annoying. Please don't make the precise path of the pointer a necessary part of the UI. Some people have mobility issues, ...


7

I recently had a project with a similar challenge. I was charged with rebuilding an application that relied heavily on hover text for help. With the updates focus on tablet and devices I had to figure out a new way to present this information. As a result, I relied on a lot of tap to expand interaction. After looking at your example. I am very glad the ...


7

From documentation mouseover(): source Bind an event handler to the "mouseover" JavaScript event, or trigger that event on an element. Meaning only when the mouse is over an element. .hover(): source Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. Calling $(selector).hover(...


7

This is an interesting question. TL;DR - Personally, I would go with a click because opening a "mega menu" is more of an action. A good rule of thumb is that you want to keep the distinction between an action (which might be denoted by a mouse click) and interaction (which could be denoted by hover or the like). Actions make something occur - whether that ...


6

The Selected state is the "opposite" of the Unselected state, and it's often important to let users identify selected items at a glance. "Reversing" the colors — using the background color for content and the content color for background — achieves this very quickly. Also, inverted colors have been available almost as long as we've been putting text on ...


6

No; it's uncommon and would lead users to thought that action has been already performed after mouseover, rather than indicate possibility of clicking. Also, note that volume control in vast majority of cases is under control of user and it's often the case it's just set to 0. I would suggest: Underlining, changing background, changing/emphasizing typeface ...


6

Big companies can get away with a lack of hovering, because they invent the standard for others to follow in. Take Facebook for example. Half the links there aren't advertised as links. There's just so much data on a page that they can get away with providing links to pages with zero guidance. People look forward to a standard they can use.. but most ...


6

Apart from what DPS answered, which talks about consistency, I would suggest you go with the click instead of hover. It seems like you have a grid layout, and am sure you don't want to annoy your users popping up the action menu when they move the mouse over these grid items. It is better to keep it explicit, only when the user tries to click on the action ...


6

I'm curious what are the websites where you have seen this pattern emerge. To my knowledge this is not common. I'd see this is unexpected and likely problematic. Imagine for instance if a user performs some actions partially, like filling a form, then moves the mouse above to switch to another tab on their browser and accidentally hovers over the navigation, ...


5

I can say that for non-touch interfaces, the hover action is more of a perceived affordance because we've been so used to it on the web. Mostly, users don't know when to hover but they actually do perceive it. According to the Hover invitation pattern, we can use hover to cue the user what is going to happen next. Here's an interesting article by Bill Scott ...


5

A fairly standard method of indicating "extra information available" is with a dashed or dotted underline. This may change the cursor to a "Help" cursor, which might look something like this: ...which would allow a click to bring up additional information. One method I use is a dotted underline with a popup on mouseover, which (with some styling) looks ...


4

It really depends on what your tooltips are for. We've got lots of toolbar controls and buttons which simply use the Material Design Icon set with no text. Most of these are self explanatory but we've added tooltips with descriptions which also display the keyboard shortcuts where available. When we had no delay, it was very annoying for users who'd learnt ...


4

Use hover, but don't make your UI depend on it as: it doesn't work on touch devices if used to reveal actions, those actions are effectively hidden away from the user hover is not accessible to all users (it requires patience; ability to exactly position the mouse) it's totally uncommon to activate items on hover, no matter how convenient that may seem --...


Only top voted, non community-wiki answers of a minimum length are eligible