Hover is an interaction state where a pointer (usually a mouse cursor) is held over an item to perform an action or display information.
1
vote
3answers
155 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
33 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
39 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
72 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
60 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 ...
0
votes
0answers
27 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
165 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 ...
0
votes
0answers
42 views
Revealing information for one item in dropdown menu on hover(on click)
Is it okay to reveal information for 1 item in dropdown menu?
I need to do the following:
Load auto text (all text boxes)
Load auto text (single text box)
Preview auto text (all text boxes, to ...
1
vote
1answer
36 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
185 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 ...
1
vote
5answers
438 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
342 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
255 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 ...
79
votes
13answers
15k 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
358 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 ...
2
votes
2answers
7k 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
427 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
201 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
2k 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
643 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
130 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
257 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 ...
5
votes
5answers
844 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
137 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
42 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
180 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
524 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
136 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
271 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
813 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
201 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
802 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
2k 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
4k 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
69 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
746 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
91 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
372 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
954 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
685 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
641 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
176 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
52 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
3k 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
491 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
...
0
votes
3answers
441 views
Icon Placement within a row
I have a table with template names and the actions available will be shown in the form of icons next to the names. There are two options.
Option 1 Icons next to the name(left aligned) appearing on ...
