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.
3
votes
2answers
169 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
34 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
334 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 ...
-1
votes
1answer
44 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
326 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 ...
4
votes
1answer
75 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
67 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
45 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
89 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
207 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
42 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
241 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
526 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
438 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
306 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 ...
80
votes
13answers
16k 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
438 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 ...
6
votes
2answers
12k 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
650 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
223 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 ...
6
votes
1answer
3k 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 ...
4
votes
3answers
837 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 ...
13
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
143 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 ...
0
votes
1answer
291 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 ...
6
votes
5answers
2k 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
139 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
44 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
187 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
612 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
146 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
332 views
Hint for the hover state in both web and mobile versions [duplicate]
I am designing a portfolio page which is showcasing the list photographs. Below are the blue print and doubts.
Doubts:
How the user will know the portfolio items have a description on the hover ...
1
vote
1answer
1k 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
256 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
884 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 ...
3
votes
3answers
3k views
Choosing the hover color of a link, logically
The menu color of the apple website fades out when you hover it, which I believe is wrong because hovering an item is like activating it, hence a positive action.
With that said, what's a logical ...
22
votes
4answers
5k views
How do users know to hover over elements?
I realized something today. I was looking at a new icon at Airbnb's site, and wanted to hover over it to see if there was anything hidden that would expose on hover: there was.
My question: How do ...
2
votes
1answer
71 views
Should minor links be styled with the same hover effects as primary links?
I have the following article which has a primary title link as well as breadcrumb and social links.
Should I use the primary links' hover effect style for the breadcrumb and social links or ...
5
votes
5answers
799 views
How to indicate data in a table is clickable on a touch device?
For users on a touch device, what is the convention for indicating each figure (cell) is clickable to a page with information on where the figure originated?
On desktop it would be easy to have a ...
7
votes
3answers
1k views
Does the hover functionality on Netflix's website break UI best practice?
For example:
My explanation of what's happening in the gif: When a title has been hovered for a short amount of time, that title expands, pushing other content off the screen and grabbing the user's ...
2
votes
2answers
92 views
When do hover animations become a distraction to users?
I'll often visit beautiful websites with hover animations on links that become distracting to me, and I've noticed that I just play around with the animation and don't even end up clicking the link. I'...
0
votes
2answers
390 views
On Hover Styling for dropdown in top header
In my application, I've a selection drop-down in the main top-header menu. Now, I'm a little confused on how I should have on hover for that element. These are the two options:
Option 1: No ...
1
vote
2answers
991 views
Using sound effects on Mouse Hover / MouseOver
I'm building an application that is will mostly be used by "novice users". My team wants to add a sound effect to help aid the user understand that something is clickable when they hover over a button....
1
vote
3answers
773 views
Ads that expand on hover aka. engagement ads
Expanding on https://www.thinkwithgoogle.com/products/engagement-ads.html -- is anybody aware of any research that covers usability vs. profitability in hover-to-expand ads (aka. engagement ads) vs. ...
5
votes
4answers
751 views
Lowering opacity on hover. Isn't it totally wrong?
It's a common practice to highlight an element on hover state.
By highlighting it, I obviously mean making it more visible than other elements.
But lately, I've witnessed the opposite trend on a ...
1
vote
1answer
180 views
How should I display this information if not in a tooltip?
I've got a tooltip (image below) that when the user hovers over it, they are given a quick one line summary of what they hovered over and then 8 more lines of information. I already know that's way ...
1
vote
1answer
53 views
Any non finicky way to show extra rollover info on an iphone
I'm converting a really long survey from a web app to a mobile app. It's 250 questions long so I've divided it into logical sections to split it up a bit. The idea is a user is presented with a ...
8
votes
2answers
4k views
Best practices for rollovers on mobile?
I noticed that most mobile browsers transform rollovers into touch/tap actions. This is good, but of course there's no indicator that the action is available to the user. So I was wondering what ...
2
votes
2answers
495 views
Responsive Grid View with Hover layer
I have a grid layout which has an hover state which reveals information that are crucial as below.
The Content of each Grid Item
Dish Name
Dish Photo
Rating
Chef Name
Chef Photo
Chef Location
...
