Hot answers tagged hover
38
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 ...
32
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 ...
25
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 ...
22
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 ...
21
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 ...
18
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
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" ...
14
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 ...
12
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
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 ...
11
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.
10
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 ...
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
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
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 ...
6
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 ...
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
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
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 ...
6
I think designing for touch first could be a good general strategy for websites. It seems many designers, myself included, find it easier add features to an existing design than to remove them. So designing an application without assuming a pointer (the touch version), then adding pointer embellishments for the traditional computer version seems like it ...
6
My answer to your question is a question: what problem would a hover state solve?
Every visual element on a form requires processing by the user's brain. And every additional bit of such cognitive effort increases the burden to the user, heightening the chance of fatigue, errors, confusion and abandonment.
Consequently, the most usable forms are designed ...
5
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 ...
5
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.
5
As long as it helps and fits the context and it's not mistaken to be clickable, it's fine. There are just too many variations of user feedback to generalize.
As for the examples on CSS Tricks, some boxes mislead me to thinking that they're clickable.
Now, do the hover feedbacks in these examples improve UX? They're nice in terms of being fancy, but they ...
5
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 ...
5
The Twitter client I use on Android is called Plume. It handles hover replacement very well:
In a list of things (tweets or Firefox addons, whatever), the entire list item invites a tap. Tapping slides down a menu with actions that can be taken on the selected entry. Simple, and it makes good use of screen real estate.
5
It's definitely important to the user experience, from a usability point of view, but more importantly for me, from an accessibility perspective too. Any tiny change such as a hover state which will enhance the usability of the website should definitely be implemented in my opinion. If the state of a link changes once hovered upon, it indicates to the user ...
5
The Windows UX Interaction Guide is explicit: “Don’t depend upon mouse hover effects to reveal progressive disclosure.” (p32) At the very least you need something that clearly indicates that commands are available (e.g., a label saying “Actions” or a fly-out arrow). It still makes control use inconvenient (the user can’t aim for the desired control until ...
Only top voted, non community-wiki answers of a minimum length are eligible
