Lately I have noticed that a lot of websites are displaying a delete "X" when you hover over that specific panel. I have been thinking whether or not this was very usable for the user because there is nothing there that tells the user that is where the "X" is. For example both google and facebook do this. What are your thoughts?!
4 Answers
Fundamently I am not in the favor of hiding a control (or button) but frequency at which a control is used is important to consider here. Editing and Deleting for Facebook comments is fairly frequent and you performs multiple edits and multiple delete during a single session. So opportunity for user to learn about hidden controls is quite a lot. If an action, for example deleting of one's own account had such hidden control, that would be a fault.
My observation is that UIs that have some hidden controls pass the Usability Test because "Hover" keep triggering all the time and while moving the cursor on interface, even before user would "search" for those controls, those show and hide themselves several time.
Another aspect is that "hidden until hover controls" are also mouse interaction specific. Since desktops are also offering "Touch Interfaces" where "Hover" action doesn't trigger automatically, this approach would be deprecated and abandoned but there are still good years until it is done so.
They are worth avoiding because:
- They are completely unusable on a touch device. So if someone were to use the app / site on a tablet, they would have no way of knowing that they existed at all. Given the growth in touch devices, I would argue that this alone is a good enough reason not to use any hover effects.
- They have poor affordance. Unless you know they are there, or you explore with your pointer, you will not realise that they exist. This is somewhat minimised by so many apps using this lately.
Overall they are a design solution, but not one that adds to the overall UX, so I would avoid them.
-
A responsive layout with conditional rules for interactions would mean you can satisfy both touch devices (always show close icon) and large monitors (show on hover).– cdcdcdMar 18, 2013 at 23:58
-
@PTCampbell Even if that were to work correctly 100% of the time, it would be inaccessible to anyone using a screen reader.– JohnGB ♦Mar 19, 2013 at 9:18
-
That is true, in most cases. But to say they are completely unusable on touch devices is decidedly untrue.– cdcdcdMar 20, 2013 at 0:58
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 made designers hide buttons which you can only access on hover. Sometimes these are very long sequences on hover leading to hover leading to hover which if you eventually miss a spot, loose all the sequence in once. You have to start over.
This leads to great cognitive load on the user, which is very bad usability. So in general - showing buttons on hover, especially in sequence, is a bad thing.
-
1Rather than having many controls littering the page, it would be perfectly fine to have a simple menu with all those options. In fact a menu would also give you space to put those words instead of using a row of cryptic on-hover icons for the user to decipher.– XP84Dec 6, 2022 at 20:02
Personally I'm not a fan because hover states are useless for mobile devices and as you described, there is no indicator what the user is allowed to do on first based impressions.