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.
133
questions
2
votes
1answer
47 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 ...
2
votes
2answers
102 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 ...
0
votes
0answers
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, ...
3
votes
2answers
184 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 ...
2
votes
1answer
101 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 (...
0
votes
1answer
48 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 ...
0
votes
2answers
131 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 ...
3
votes
4answers
372 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 ...
1
vote
1answer
111 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 ...
1
vote
1answer
57 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,...
3
votes
1answer
98 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, ...
2
votes
3answers
1k 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 ...
1
vote
1answer
296 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 ...
4
votes
5answers
3k 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 ...
3
votes
2answers
519 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 ...
1
vote
1answer
72 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 ...
1
vote
3answers
1k 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 ...
0
votes
1answer
89 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
1answer
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 ...
3
votes
1answer
80 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 ...
2
votes
1answer
154 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 ...
1
vote
1answer
83 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 ...
1
vote
1answer
94 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 ...
1
vote
3answers
364 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 ...
1
vote
1answer
194 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 ...
2
votes
2answers
385 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 ...
2
votes
5answers
1k 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, ...
3
votes
5answers
797 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 / ...
2
votes
3answers
450 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 ...
86
votes
13answers
20k 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
...
5
votes
1answer
603 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 ...
8
votes
2answers
28k 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 ...
3
votes
1answer
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 ...
5
votes
5answers
272 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 ...
9
votes
1answer
8k 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 ...
3
votes
3answers
2k 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 ...
14
votes
2answers
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
vote
1answer
175 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 ...
1
vote
1answer
473 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 ...
7
votes
5answers
12k 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?
1
vote
3answers
143 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 ...
0
votes
1answer
68 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 ...
0
votes
2answers
251 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 ...
4
votes
3answers
2k 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 ...
1
vote
1answer
161 views
How to users like hidden content styled?
I have a avatars table. On hover, I want the avatar's username to appear. On click, the user will go to their personal page. Of these three types of hidden content, which would best suit this purpose? ...
1
vote
1answer
537 views
Hint for the hover state in both web and mobile versions [duplicate]
I am designing a portfolio page which showcases a list of photographs. Below are is wireframe and my main doubts.
Doubts:
How will the user know the portfolio items have a description on the hover ...
2
votes
1answer
2k views
Is the context-menu cursor a useful replacement for the pointer when opening a context-menu?
To connote that an element opens a menu and is not a link, we are using cursor: context-menu. See example.
Our target browsers all support the cursor. I can't find any relevant discussion on the ...
2
votes
1answer
524 views
Avoiding cursor jump when coming out of a hover state? [closed]
I'm wondering how you would get around a cursor jump when coming out of a hover state on a menu.
Here's an example of what I mean.
See how when you come out of a hover on item one is skips you to ...
1
vote
1answer
1k views
Delay in loading dropdown menu
I am currently using Amazon and I noticed that when you mouse over a dropdown menu (e.g. "Shop by department" or "Your Account"), there is a slight delay before it brings up the menu. Most other ...
7
votes
8answers
1k views
How to handle tooltips on moving control/object?
My company is building an on-line map which displays moving objects (vehicles) and static objects (bus stops).
When the user hovers over an item, a tooltip with additional info about all the objects ...
