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.

Filter by
Sorted by
Tagged with
2
votes
4answers
102 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
54 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
30 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
0answers
50 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
228 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 ...
23
votes
4answers
7k 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 ...
6
votes
3answers
4k views

Mouseover to reveal more data in a table

I have a table containing users like so: download bmml source – Wireframes created with Balsamiq Mockups In the system, users can associate multiple emails with their account. When the user ...
92
votes
11answers
46k views

Should a button become lighter or darker on hover?

We're having a discussion in the office about whether a button should become lighter or darker when a user hovers over it. Here are some examples from the field: Apple "Buy Now" button (Second is ...
1
vote
1answer
169 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 ...
2
votes
5answers
1k 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 ...
21
votes
7answers
19k views

How long should the delay be before a tooltip pops up?

I'm working on web site in which a "ribbon" submenu pops up as soon as the mouse touches one of the main menu items. I'm trying to explain to the designer that it should wait until the cursor has ...
3
votes
2answers
313 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 ...
7
votes
2answers
21k 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 ...
1
vote
1answer
57 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
59 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
816 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
69 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
925 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
78 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
103 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 ...
9
votes
3answers
2k views

Why are different cursors used when hovering over buttons in Gmail?

In the Gmail interface they are not consistent in which cursor they use on button/link hover. They use the "hand" pointer for: Links in the sidebar(mail, contacts, inbox, starred etc..) The mails ...
35
votes
11answers
12k views

Are hover states necessary?

We're having a discussion in the UX department here at work as to whether or not hover states are necessary to a UI. We're kind of divided. Here are the two arguments: Against (started the discussion)...
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 ...
14
votes
6answers
25k views

Alternatives to tooltips in tablets?

I understand this question has been discussed a couple of times on the site. However, it seems not to be getting the answer or inspiration I am looking for. BTW, my background is a programmer in case ...
1
vote
3answers
285 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
81 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 ...
1
vote
3answers
2k views

Hover over web images for additional details best practices

I know that a discussion was already made on various places whether it is good to use hover on images on the web or in mobile apps. With the rise in mobile use where touch is prevalent do you think ...
2
votes
2answers
310 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
779 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, ...
1
vote
3answers
140 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 ...
3
votes
5answers
630 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 / ...
81
votes
13answers
18k 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 ...
2
votes
3answers
388 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 ...
5
votes
5answers
933 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 ...
5
votes
1answer
552 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 ...
3
votes
1answer
1k 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
2answers
269 views

Using hover-overs on the web when the goal is to allow rapid clicking

I'm working to design a webpage where users are presented with a large number of product options, most of which will be irrelevant. Each product will appear as a tile and the tile will disappear upon ...
5
votes
5answers
252 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 ...
7
votes
1answer
4k 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
vote
1answer
167 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 ...
3
votes
3answers
1k 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 ...
15
votes
7answers
13k views

iPad/iPhone alternative for hover states

I've recently updated my personal portfolio with some CSS3 and jQuery magic. I'm extremely pleased with the results and yes, it's fully responsive. But i have an issue. I've structured my portfolio ...
1
vote
1answer
348 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
6k 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?
8
votes
5answers
6k views

Better to use hover vs. click to display dropdown menus on main navigation of web app?

I work on a web-based medical records system. In the previous version, main horizontal menu employed ExtJS. It used the standard click to display the sub-menu found in ExtJS. I'm considering whether ...
74
votes
7answers
89k views

Default cursor on mouse over of a button is not a hand pointer

Why is the default cursor an arrow when you hover over an HTML <button>? I always thought that arrows let you select stuff, but hands let you execute an action. Since buttons execute actions, ...
0
votes
1answer
50 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
211 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 ...
36
votes
6answers
3k views

Why this timed-hover “like button”?

I recently caught "Where Good Ideas Come From" by Stephen Johnson on Alex Hillman's blog, and was intrigued by Alex's unique implementation of a 'like button'. Behaviour The element's initial state: ...