Tag Info

Hot answers tagged

43

Luke Wroblewski covers this topic in his book Mobile First He stresses the importance of transitioning your on-hover menus to mobile using the most appropriate solution for your site: ...any actions that rely on mouse hovers in our desktop web experiences need to be rethought—and that’s a good thing. Many uses of hover actions on the web assume too ...


34

You get better performance if users click the menu bar to open a menu rather than simply hold the mouse pointer over it. Hover-menus were demonstrated to be a bad idea long before they appeared on the web: Chaparro BS, Minnaert G, & Phipps C (2000). Limitations of using mouse-over with menu item selection. Proceedings of the Human Factors and ...


33

There isn't any pattern common enough to be considered "normal" for this by most people, so it doesn't matter which you choose as long as it makes sense for your application. The important thing isn't whether it gets darker or lighter on hover. It is that there is some change. Someone using a site isn't going to say "that changed to dark on hover instead ...


27

Let say that you have the more common scenario of dark text and no other part of the design changes on hover and it's the background only, then when you hover, the button should be given a highlight. You're trying to focus on an item - to examine it and therefore it makes sense to brighten it up as if giving it more light to see by. Appearing backlit or ...


23

I vote "yes"! True, hover events shouldn't be depended upon because touch devices are so popular. However, Jon seems to be asking about visual hover states on buttons, which is slightly different. Visual hover states afford "clickablity". You shouldn't have to click something to find out if it's a button. Users on laptops and desktops expect "clickable" ...


22

Harry Brignull has an interesting post about adding artificial delays to increase perceived value which was inspired by a Hacker News post about locksmiths and their theatrics. In a nutshell: Purposefully adding a delay to a service may increase perceived value. In this case, the trivially longer time that it takes to "like" could possibly give the ...


20

Buttons are a traditional desktop software UI control - a context where the hand pointer has never been used before the advent of internet. When web pages started to use the same control, they just kept the button as it was in a desktop environment.


20

It would mean a very different technology than what is currently used. I wouldn't try to force touch devices into screen device semantics. Touch devices are developing their own distinct set of user expectations. Touch to hover is perfectly acceptable. I've seen some nice examples of hinting to the user where "hoverable" areas are when the screen first ...


20

I have conducted a study recently to ascertain whether a click menu or hover menu is more suitable for one of our larger financial client sites... these are my findings. I hope they are of some use or help to you: In summary: In general, hover menus are indeed expected behaviour on most sites, however it should be duly noted that on sites that are ...


19

I have no idea as to the actual correct answer to this question, but let me speculate: I think it's because the web has hyperlinks. Clicking on something on a web site is associated with visiting a different page, and as such, if you were to create a dropdown menu that activates on click, the expectation of what it may do when activated is uncertain: will it ...


18

It's all about Affordance. Buttons have a high affordance which visually suggest how they can be used. The hand pointer is used when affordance is lower to provide an indication of how to interact with that item. 'Well-designed user interface (UI) objects are said to have affordance, which are visual and behavioral properties of an object that ...


13

There is no hover equivalent on iOS devices. The most conventional gesture to interact with content is 'tap'. You could have the content boxes open a pop-up or overlay on tap (which would work better on iPad than iPhone). Using other gestures which have no strong established convention could just confuse users. But it might just be more graceful and usable ...


12

Have the list item be split. Something like a label to the left and a button on the right. It is basically what you already proposed. Here is an example how it could look like. There is just no hover replacement for touch based devices. At least not for all types of touch based devices.


11

The hand cursor icon is used for controls that provide navigation-like interaction. The regular cursor icon is retained when the interactive items are not for navigation, e.g. command/action buttons. The distinction between navigation and navigation/action can sometimes be subtle in apps like Gmail, but it is an important one and can drive user expectations ...


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

Seems to me you need dropdowns like those below that open up on click not hover - with the down arrow acting as the affordance.


9

Drop down on click is easier to use. In addition, touch screen devices don't have hover. I would recommend going for click, not hover. Do not forget to add a visual clue (triangle pointing down) to help with discoverability. Here's some helpful information about possible usability issues with dropdowns.


8

First of all, I don't think using the scroll wheel for a slider is very practical: Depending on the scroll wheel speed, it can be uncontrollable (i.e. sliding too fast) Scrolling is usually vertical, sliders are horizontal (exception: multi touch input) It's not common, people won't expect it (I'm not aware of any application doing this) If you scroll, ...


8

We don't have detail about the scenario for which you ask this question, so I hope this answer is relevant to you. Otherwise, just mark it as irrelevant to ensure that no-one else will benefit from the topics I discuss below, for their own scenario, for example. (Did you see what I did there?) You're mixing two goals: 1) Provide user with a list of ...


8

I try to avoid hover states in design as much as possible. The primary reason for that is that they are meaningless on touch devices. While this may seem like it doesn't apply when you aren't designing for mobile, many people use their tablets or other touch devices to browse the same websites or use the same applications that you would traditionally only ...


7

I couldn't find any conventions on this matter, but I found a couple of libraries where the tooltip seems to be set at a default of 500ms, which seems quite reasonable. Anyway, I think you should go from there and tweak it until it feels right. You can try it out with a few users and evaluate their feedback. ...


7

I think, as you've pointed out, it can aid usability in terms of 'spatial discovery' - i.e. making it slightly more obvious when a link can be clicked, especially if links have a large footprint that isn't otherwise indicated. However, the cursor change already indicates this, so I think the benefit is minimal; in my experience, it's more often used for the ...


7

Both CSS 2.1 and CSS3 Basic UI specs definitely say that pointer cursor is exclusively for links. One of the authors of the CSS 2.1 Test Suite wrote a following remark in W3C mailing list: Even when hovering the cursor over an <img onclick="...some function...">, a push button, a radio button, a checkbox, the cursor under Windows does ...


7

Interestingly, hovering the submit button on this comment form changes the cursor to the hand. I would say "arrow=do and hand=go" was probably a convention at one point, but it's been widely discarded through a) ignorance to it and b) better design. Make a button look clickable and the cursor change won't matter to the end user.


7

Depends on the background color, doesn't it? A button preferably becomes "more visible" relative to the other UI elements when the end user hovers over it, so in a dark design they would become brighter and vice versa. (Note: I said "brighter", not "less opaque" :))


6

Affordances (example: http://www.slideshare.net/andrewmaier/affordances-in-modern-web-design ) are a good thing regardless of whether it's text, or an icon, or other form of widget one can interact with. The affordance doesn't always have to be a rollover state, though that is a common method to use. Remember that StackExchange tends to have a rather ...


6

Maintaining your current design... As mentioned there isn't a hover behaviour equivalent on iOS devices. Even if you implemented a 'follow the finger' behaviour, most users will probably be moving their finger off the screen, moving to the target and then touching the screen again. One approach would be to have small page curls in the bottom corners. This ...


6

Yes - I've seen this here at Bravissimo.com It's actually got a very slick feel to it. There is a jquery plugin called cloud zoom from Professor cloud - You want the inner zoom option. This is what the website above is using.


6

I've seen sites that have a magnifying glass icon embedded in the border or directly below items that should be hovered over.


6

First of all consider whether this is the best way to display the content. How often is the content used? How important is the content. If its used often or is very important consider displaying the content in another way. If you are sure this "on hover" pattern is the correct one to go for then you need to draw attention to it. Generally this effect is ...



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