Questions tagged [hover]
Hover is an interaction state where a pointer (usually a mouse cursor) is held over an item to perform an action or display information.
139
questions
2
votes
1
answer
78
views
Do accessibility standards (WCAG AA) require a screen reader to announce an HTML element upon mouse hover?
We are using the screen reader NVDA. We have a website that we are trying to make WCAG AA compliant. If you use only a keyboard (no mouse), and use the Tab key to navigate around the page, whenever an ...
- 123
0
votes
0
answers
20
views
What is alternative way to show information without tooltip on mobile? [duplicate]
So i am working on a dashboard project. When I finsished this for desktop it's easy to provide information to user, they have just hover it. Then, I realize, it's not so good to have tooltip on mobile ...
0
votes
1
answer
188
views
How do you decide when to make elements darker or lighter on hover?
Looking at Slack by example, the following happens:
Buttons in the top navigation bar become lighter, so does the search bar
The button to open the workspace menu becomes darker, same for hovering ...
- 11
2
votes
2
answers
41
views
When hovering over a charts, which arrow alignment works best
I'm designing the hover states for 2 charts, a bar chart and a line chart. Maybe I'm over thinking, but for both these charts I find there is an arrow alignment that would work better based on the ...
- 10.6k
7
votes
3
answers
4k
views
Correct buttons hover state
I'm designing an e-commerce interface, and I've a doubt about the correct hover state of the primary button.
Is it correct to style the primary button as the secondary's default on hover state as in ...
- 71
46
votes
9
answers
10k
views
Is it good practice to allow users to navigate simply by hovering on a menu item without clicking?
A pattern I have noticed recently on some (desktop) websites is that users can navigate simply by hovering on menu items.
While this is more efficient (fewer clicks) it feels unexpected and therefore ...
- 2,537
2
votes
1
answer
201
views
Hover on a card with clickable links
I am working on card which has a clickable link/ clickable options but the card itself is not clickable. I want to add a shadow to the card when someone is hovering on/ clicking on the link. I have ...
- 985
2
votes
2
answers
208
views
Subtle Hover Design Ideas
I'm using tooltips on my site to show some extra info but i'm finding it hard to make it obvious that the icons are hoverable.
I have added in a swirl line that animates, also a pulse animation to the ...
- 21
0
votes
0
answers
13
views
Hover and Click action on same object on touch devices [duplicate]
I am building a timeline widget which has 2 interactions on web.
Hover to see a particular duration's details like duration, start time, assigned name.
Click to edit details of the timeline
However, ...
- 985
3
votes
2
answers
321
views
Would users appreciate a mobile hover alternative on a product list?
Edit: Not necessarily only credible sources needed, different opinions from the user's perspective are also welcome.
The mobile first approach nowadays often (or sometimes at least) leads to less ...
- 6,786
2
votes
2
answers
485
views
Hidden actions - Hover effect in the list of items
I'm currently working on WEB app, which will be the main tool for the data analysts.
We will have a navigation tree that displays a hierarchical data structure. Each item will need a list of actions (...
- 41
0
votes
1
answer
101
views
Search - autocomplete - hover a result to features in dropdown
I am working on a project where a user has to navigate to any feature for any product. So I came up with a search box component. Here the user can search for a product and when a user hovers on a ...
- 39
0
votes
2
answers
250
views
Is it bad practice to put hover interactions in a table?
Hello!
I'm designing a CRM table view for a medical web app, and a core need of our users (mostly surgeons and nurses) is to quickly ascertain the compliance of their patients by viewing
whether or ...
- 533
3
votes
4
answers
488
views
What Micro Interaction to use When Hovering Over a Button?
👋
We are trying to learn/understand UX from first principals and build the most intuitive UI.
We are creating buttons in an App and want to know what the ideal micro interaction is when hovering ...
- 141
1
vote
2
answers
184
views
Hover vs. selection? Which one should have higher emphasis in a visual editor software?
My team is working on an email design software that features a drag-and-drop interface that offers very sophisticated drag-and-drop experience compared to others.
It enables users to drop elements ...
- 5,010
2
votes
2
answers
102
views
Grid line item status column - how to display broader explanation?
Grid contains transactions of a sort. Each transaction can be: Open, Closed, or Cancelled. There's a "Status" column, and each cell has one of the 3 words in it: Open, Closed, or Cancelled.
Now, Open,...
- 183
3
votes
1
answer
106
views
Dealing With The Lack of "HOVER" on Smart Phone Web Apps
I made this CardTrick back in 2006, at a time when it would have been predominantly accessed via a desktop computer (and not a smart phone).
On a desktop computer, as the mouse hovers over any card, ...
- 141
2
votes
3
answers
2k
views
Hover styling for non-clickable elements?
In our system, currently we have good styling and effects for buttons, for example submit button, cancel button etc.
Now we have a different element. Let's say it is a summary tag element. Which acts ...
- 2,204
2
votes
1
answer
502
views
What's the purpose of this flashlight-like effect in windows callendar?
Is there any specific reason for windows callendar to have this flashlight-like hover effect?
If anything it seems to me to be distracting by spreading the area of your current mouse position. Is it ...
- 274
5
votes
5
answers
4k
views
Hover vs click on mega menu
Now implementing a new mega-menu. The current mega-menu's submenu options are shown on user cursor hover. Would a more explicit action like mouse click be more appropriate for this (like the example ...
- 53
3
votes
2
answers
712
views
Large Hover Menu/Navigation Menu - Categorically Bad UX?
Due to feedback from a handful of customers that did not understand what our menu icons meant, a hamburger icon was removed from our navigation menu, this hamburger icon was used to expand the ...
- 131
1
vote
1
answer
77
views
Allowing both hover and select state on a section / component
Do you think allowing both hover and select on a component makes sense in the bellow context?
The tool is a drag & drop application builder (UI builder).
Configuring objects (sections in the page ...
- 45
1
vote
3
answers
2k
views
In Responsive Design, how do you trigger Tooltips? mouse hover isn't there anymore
A tiny disclaimer, not looking for tooltip alternative for mobile as in another UI Pattern, i'm looking for a different interaction that could trigger the tooltip, i hope this makes it clear.
The ...
- 2,435
0
votes
1
answer
94
views
Vice versa colors for on and off hover of buttons [closed]
How should we choose the color for buttons is there a should always be a dark and light colour or two differed colors. What will be the best strategy for choosing colours.
And is it should always be ...
1
vote
1
answer
2k
views
Tooltip with a link on it (displayed on hover or on click)?
I have a tooltip with a link on it.
What is the best practice of displaying this tooltip: on click or on hover?
I will still need a clicked version for tablet. Should the popup have a close icon in ...
- 43
3
votes
1
answer
82
views
Will hover will be extinct? Any research or case studies done on frequency of hover in desktop
I am typing this on my mobile so let me keep it short. I am talking about contents that is revealed on hover in desktop. So what we do in mobile UI is we make it visible at first sight. I want to know ...
- 3,678
2
votes
1
answer
204
views
Hovering Navigation Arrows
Is there any modern and accessible approach to implementing "hovering navigation arrows"?
I was given a website layout to implement which features "hovering navigation arrows" to navigate to the ...
- 21
1
vote
1
answer
127
views
Preference: Info-tips (info tooltips) or stationary info-areas for Scatter Plots?
I've seen two different ways to display information about a point on an scatter plot
A tooltip (info tip) which appears next to your cursor
When you hover over a point, information will display in ...
- 177
1
vote
1
answer
96
views
What's the approppriate term for the window under the mouse cursor?
In an app I'm writing, the user has the choice to apply a given action to either the "focused window", the "topmost window" or the "window that's being pointed by the mouse".
Is there a way to refer ...
- 111
1
vote
3
answers
413
views
How do I make it obvious that a button is hoverable?
I need to hide away a piece of text that explains a useful part about using the UI for an app I am making (out of space) and a tooltip will work fine. My concern is that if people see a button they ...
- 111
1
vote
1
answer
299
views
What are the rules MacOs use to determine when to use hover or not on interactive elements?
So, on the web, designers use hover effects (for example a grey button becomes lighter when my pointer is above it) to signal affordance/interactivity for pretty much all types of controls. But on ...
- 7,254
2
votes
2
answers
445
views
Shopping cart interaction: how should the user check out?
On our webshop we have a shopping cart icon in the menu bar, that on hover over shows the user what they have in ther cart. Observations in user testing showed that we had a confusing interaction with ...
- 23
2
votes
5
answers
2k
views
Should a button with a dropdown always have a click action?
I have one button that offers the user up to ~10 choices. The button label says 'apply as' and the dropdown lists all the possible choices. I have multiple choices on how to design this.
As a hover, ...
- 558
3
votes
5
answers
1k
views
Background color when hovering datagrid row
My question is pretty simple. In your opinion, does changing the background color of the hovered row in the datagrid is a plus for the user - or a distraction that should be discarded? All rows / ...
- 41
2
votes
3
answers
534
views
What is the proper way to make 2 lines of hover dropdown menus not interfere with each other?
For an example of this menu, check this quick code snippet I made on jsFiddle:
https://jsfiddle.net/27w3y6dh/
Our own menu is somewhat more complex, but suffers from the same issue. Additional ...
- 2,291
87
votes
13
answers
22k
views
Should a dropdown list be closed when mouse leaves?
Should a dropdown list be automatically closed when you leave current object and navigate to another, or should it remain opened until you open next dropdown list?
Dropdown closed when mouse leaves
...
- 1,671
5
votes
1
answer
706
views
Should I show a row icon on hover?
I have several rows of content, with small font icons to the right of each row for actions to take.
I feel these icons clutter up the look of the page, so I am considering a default opacity of 0 on ...
- 305
8
votes
2
answers
31k
views
What is the difference between a mouseover and a hoverover? [closed]
I have seen both a 'mouseover' and a 'hoverover' referring to the same thing - but it is not clear if there is a difference.
Is there a functional difference between the two terms, or are they ...
- 6,517
3
votes
1
answer
2k
views
How should a mouse-over-for-keyboard-shortcuts be designed?
Our toolbar has a keyboard icon on the right, which, when hovered over, displays a large keyboard reference tooltip. Clicking the icon opens the settings' dialog on the tab for keyboard bindings.
My ...
- 131
5
votes
5
answers
284
views
How would you show separate items (products) that are on a single photo?
Let's say we have an image of a man with cool hat, t-shirt, boots, etc. The idea is to show these items as products, so you can find and buy them if you like.
At the moment I see two ways of ...
- 63
12
votes
1
answer
11k
views
Tooltip CSS cursor
I am at a bit of a loss as to what cursor I should be using for tooltips that have no click through behaviour. I have a hover only tooltip are I currently use the CSS cursor:
cursor: pointer
However ...
- 1,353
3
votes
3
answers
3k
views
What should the hover state of an outline button look like?
Me and a friend were having a discussion on button design and came across the hover-state of the outline buttons of Marvel.
I believe this is not the right approach as an outline button is designed ...
- 131
14
votes
2
answers
3k
views
How should a coloured dropdown be styled using Google Material?
I am working on a project which is using Google Material UI. I have a set of production statuses that need to be displayed - they are selectable from a list but I am not sure what that list should ...
- 1,062
1
vote
1
answer
209
views
Can an image overlay be too obstructive?
For this question lets consider only no-touch devices and lets assume it is alright to hide that text.
It is common, specially on grid layouts, to display image overlays with different levels of ...
- 16.7k
1
vote
1
answer
507
views
Design for hovering over tile [closed]
I'm creating a portfolio for my websites. I'm going to have tiles that show my work. When you hover over a tile, it will show a title, description, and a preview button. What's the best layout to show ...
- 881
8
votes
5
answers
17k
views
How can I display tool tips on a touchscreen or is there a better way? [duplicate]
On a PC with a mouse one would use the hover state. On touchscreens what's the best way to provide this kind of information?
- 193
1
vote
3
answers
144
views
Image Blocks with Sub Navigation on Hover
I'm working on a site that has a bunch of categories which I'd like to display graphically on the homepage to help the user navigate to the information most relevant to them.
Because there are quite ...
- 111
0
votes
1
answer
76
views
Editing and Deleting smart folders
The web app allows users to create smart folder based on which files are displayed. See wireframe below
download bmml source – Wireframes created with Balsamiq Mockups
How should I go about ...
- 642
0
votes
2
answers
294
views
Are hover features more discoverable in simple desktop web UIs?
Thinking only in the scope of a desktop website, I'm wondering about the discoverability of mouse hover functionality.
Allow me to contrive a scenario to explain my question: Let's say I'm designing ...
- 19.4k
6
votes
3
answers
3k
views
Indicate ”hoverable” text
I have a table with “hoverable” text, but how do I make it clear to the user that more information will show up if he hovers over it?
I was thinking of an icon at first, but I don’t know if it is ...
- 3,443