Skip to main content
User Experience

Return to Answer

fixed broken markdown style. Sorry I had to change the [1]-Tag for the Link because I need to edit at least 6 chars to submit the edit
Source Link
edit approved Aug 9, 2015 at 15:13
BlueWizard
edit approved Aug 9, 2015 at 15:13
BlueWizard
  • 350
  • 1
  • 7

Let me first set out a few things that make it easier to respond to your question.

Hover. The purpose of a link's or command's hover response is to signal or enhance its affordance, or perhaps to indicate its pliancy—its willingness or receptiveness to action such as the dropping of a dragged object.

The pointer on a computer screen is a proxy for our finger or hand. We use it to indicate or select, to depress, to push or drag.

Choosing a hover style

Your question, "what's a logical and reasonable way to choose a hover colour" has many possible answers, which perhaps could be combined:
  • Use skeuomorphy. This is about relying on patterns that users already know from the physical world, and borrowing visual cues from that pattern for use in your GUI. Especially for new types of interaction, if the online experience can mimic something in the physical world, it helps people by providing a pattern that a user's brain can relate to. This "relationship" can be about actual physical interaction, like the 3D edges of a button that signals "you can depresspress me and I will move." I can't think of an inanimate physical object that responds to the proximity of a finger or hand. I suppose Well, living things might flinch or fly away, or they might lean in, or change colour.
  • Follow a standard. One standard is text decoration. So the blue text of a link becomes underlined on hover, red on mouseDown, purple after it's been visited. I wont' spend too much time identifying other standards or defending any of them, because your question implies you may not want to follow this standard.
  • Leverage prior learning. This is what makes skeuomorphism work. It's also why standards work. By any prior experience or learning can be leveraged. So based on previous experience, a user might decide that a small image that they've never seen before is an icon and therefore that they might move the pointer over it to see if it signals affordance, displays a tool tip, or causes the status bar of the browser to show a destination URL. These are all things the user has learned to recognise.
  • Leverage precognitive processing. I'm thinking of precognitive reactions, the stuff our brain figures out before we have a chance to think about it. Above, I mentioned flinching; we don't deliberately decide to flinch; it's a precognitive response. Gestalt identifies a variety of visual characteristics that our precognitive processing can interpret. We see this in action in your illustration, above: the menu bar has several links that are part of a group, and then, on hover, one of them separates from the group. Principles of 2D design identify several things you can do with an object to signal spatial relationships. For example, of two overlapped objects, "the one in front" is closer, "the larger one" is closer, "the greyer one" is further, and so on. Of course, this also relies on Gestalt, because our brain interprets that there are two circles, rather than one circle and one crescent. Have a look:

Are these two circles?

You can combine the above solutions to define/design a visual cue that best work for your audience. That's right—I have no specific answer your question, because *it dependsit depends on the context, the type of users and their prior experiences, the emotional goal of the visual design, and so on, and so on.

Let me first set out a few things that make it easier to respond to your question.

Hover. The purpose of a link's or command's hover response is to signal or enhance its affordance, or perhaps to indicate its pliancy—its willingness or receptiveness to action such as the dropping of a dragged object.

The pointer on a computer screen is a proxy for our finger or hand. We use it to indicate or select, to depress, to push or drag.

Choosing a hover style

Your question, "what's a logical and reasonable way to choose a hover colour" has many possible answers, which perhaps could be combined:
  • Use skeuomorphy. This is about relying on patterns that users already know from the physical world, and borrowing visual cues from that pattern for use in your GUI. Especially for new types of interaction, if the online experience can mimic something in the physical world, it helps people by providing a pattern that a user's brain can relate to. This "relationship" can be about actual physical interaction, like the 3D edges of a button that signals "you can depress me and I will move." I can't think of an inanimate physical object that responds to the proximity of a finger or hand. I suppose Well, living things might flinch or fly away, or they might lean in, or change colour.
  • Follow a standard. One standard is text decoration. So the blue text of a link becomes underlined on hover, red on mouseDown, purple after it's been visited. I wont' spend too much time identifying other standards or defending any of them, because your question implies you may not want to follow this standard.
  • Leverage prior learning. This is what makes skeuomorphism work. It's also why standards work. By any prior experience or learning can be leveraged. So based on previous experience, a user might decide that a small image that they've never seen before is an icon and therefore that they might move the pointer over it to see if it signals affordance, displays a tool tip, or causes the status bar of the browser to show a destination URL. These are all things the user has learned to recognise.
  • Leverage precognitive processing. I'm thinking of precognitive reactions, the stuff our brain figures out before we have a chance to think about it. Above, I mentioned flinching; we don't deliberately decide to flinch; it's a precognitive response. Gestalt identifies a variety of visual characteristics that our precognitive processing can interpret. We see this in action in your illustration, above: the menu bar has several links that are part of a group, and then, on hover, one of them separates from the group. Principles of 2D design identify several things you can do with an object to signal spatial relationships. For example, of two overlapped objects, "the one in front" is closer, "the larger one" is closer, "the greyer one" is further, and so on. Of course, this also relies on Gestalt, because our brain interprets that there are two circles, rather than one circle and one crescent. Have a look:

Are these two circles?

You can combine the above solutions to define/design a visual cue that best work for your audience. That's right—I have no specific answer your question, because *it depends on the context, the type of users and their prior experiences, the emotional goal of the visual design, and so on, and so on.

Let me first set out a few things that make it easier to respond to your question.

Hover. The purpose of a link's or command's hover response is to signal or enhance its affordance, or perhaps to indicate its pliancy—its willingness or receptiveness to action such as the dropping of a dragged object.

The pointer on a computer screen is a proxy for our finger or hand. We use it to indicate or select, to depress, to push or drag.

Choosing a hover style

Your question, "what's a logical and reasonable way to choose a hover colour" has many possible answers, which perhaps could be combined:
  • Use skeuomorphy. This is about relying on patterns that users already know from the physical world, and borrowing visual cues from that pattern for use in your GUI. Especially for new types of interaction, if the online experience can mimic something in the physical world, it helps people by providing a pattern that a user's brain can relate to. This "relationship" can be about actual physical interaction, like the 3D edges of a button that signals "you can press me and I will move." I can't think of an inanimate physical object that responds to the proximity of a finger or hand. I suppose Well, living things might flinch or fly away, or they might lean in, or change colour.
  • Follow a standard. One standard is text decoration. So the blue text of a link becomes underlined on hover, red on mouseDown, purple after it's been visited. I wont' spend too much time identifying other standards or defending any of them, because your question implies you may not want to follow this standard.
  • Leverage prior learning. This is what makes skeuomorphism work. It's also why standards work. By any prior experience or learning can be leveraged. So based on previous experience, a user might decide that a small image that they've never seen before is an icon and therefore that they might move the pointer over it to see if it signals affordance, displays a tool tip, or causes the status bar of the browser to show a destination URL. These are all things the user has learned to recognise.
  • Leverage precognitive processing. I'm thinking of precognitive reactions, the stuff our brain figures out before we have a chance to think about it. Above, I mentioned flinching; we don't deliberately decide to flinch; it's a precognitive response. Gestalt identifies a variety of visual characteristics that our precognitive processing can interpret. We see this in action in your illustration, above: the menu bar has several links that are part of a group, and then, on hover, one of them separates from the group. Principles of 2D design identify several things you can do with an object to signal spatial relationships. For example, of two overlapped objects, "the one in front" is closer, "the larger one" is closer, "the greyer one" is further, and so on. Of course, this also relies on Gestalt, because our brain interprets that there are two circles, rather than one circle and one crescent. Have a look:

Are these two circles?

You can combine the above solutions to define/design a visual cue that best work for your audience. That's right—I have no specific answer your question, because it depends on the context, the type of users and their prior experiences, the emotional goal of the visual design, and so on, and so on.

added 1020 characters in body
Source Link
JeromeR
JeromeR
  • 6.4k
  • 24
  • 36

Let me first set out a few things that make it easier to respond to your question.

Hover. The purpose of a link's or command's hover response is to signal or enhance its affordance, or perhaps to indicate its pliancy—its willingness or receptiveness to action such as the dropping of a dragged object.

The pointer on a computer screen is a proxy for our finger or hand. We use it to indicate or select, to depress, to push or drag.

Choosing a hover style

Your question, "what's a logical and reasonable way to choose a hover colour" has many possible answers, which perhaps could be combined:
  • Use skeuomorphy. EspeciallyThis is about relying on patterns that users already know from the physical world, and borrowing visual cues from that pattern for new types of interactionuse in your GUI. Especially for new types of interaction, if the online experience can mimic something in the physical world, it helps people by providing a pattern that a user's brain can relate to. This "relationship" can be about actual physical interaction, like the 3D edges of a button that signals "you can depress me and I will move." I can't think of an inanimate physical object that responds to the proximity of a finger or hand. I suppose Well, living things might flinch or fly away, or they might lean in, or change colour.
  • Follow a standard. One standard is text decoration. So the blue text of a link becomes underlined on hover, red on mouseDown, purple after it's been visited. I wont' spend too much time identifying other standards or defending any of them, because your question implies you may not want to follow this standard.
  • Leverage the user's brainprior learning. This is what makes skeuomorphism work. It's also why standards work. By any prior experience or learning can be leveraged. So based on previous experience, a user might decide that a small image that they've never seen before is an icon and therefore that they might move the pointer over it to see if it signals affordance, displays a tool tip, or causes the status bar of the browser to show a destination URL. These are all things the user has learned to recognise.
  • Leverage precognitive processing. I'm thinking of precognitive reactions, the stuff outour brain doesfigures out before we have a chance to think about it. Above, I mentioned flinchingflinching; we don't deliberately decide to flinch; it's a precognitive response. Gestalt identifies a variety of visual characteristics that our precognitive processing can interpret. We see this in action in your illustration, above: the menu bar has several links that are part of a group, and then, on hover, one of them separates from the group. Principles of 2D design identify several things you can do with an object to signal spatial relationships. For example, of two overlapped objects, "the one on top"in front" is closer, "the larger one" is closer, "the greyer one" is further, and so on. Of course, this also relies on Gestalt, because our brain interprets that there are two circles, rather than one circle and one crescent. Have a look:

enter image description hereAre these two circles?

That's my contribution. I won't undertakeYou can combine the above solutions to define/design a visual cue that best work for your audience. That's right—I have no specific answer your question, because *it depends on the context, the type of users and their prior experiences, the emotional goal of the visual design, and so on, and so on.

Let me first set out a few things that make it easier to respond to your question.

Hover. The purpose of a link's or command's hover response is to signal or enhance its affordance, or perhaps to indicate its pliancy—its willingness or receptiveness to action such as the dropping of a dragged object.

The pointer on a computer screen is a proxy for our finger or hand. We use it to indicate or select, to depress, to push or drag.

Choosing a hover style

Your question, "what's a logical and reasonable way to choose a hover colour" has many possible answers, which perhaps could be combined:
  • Use skeuomorphy. Especially for new types of interaction, if the online experience can mimic something in the physical world, it helps people by providing a pattern that a user's brain can relate to. This "relationship" can be about actual physical interaction, like the 3D edges of a button that signals "you can depress me and I will move." I can't think of an inanimate physical object that responds to the proximity of a finger or hand. I suppose Well, living things might flinch or fly away, or they might lean in, or change colour.
  • Follow a standard. One standard is text decoration. So the blue text of a link becomes underlined on hover, red on mouseDown, purple after it's been visited. I wont' spend too much time identifying other standards or defending any of them, because your question implies you may not want to follow this standard.
  • Leverage the user's brain. I'm thinking of precognitive reactions, the stuff out brain does before we have a chance to think about it. Above, I mentioned flinching. Gestalt identifies a variety of characteristics. We see this in action in your illustration, above: the menu bar has several links that are part of a group, and then, on hover, one of them separates from the group. Principles of 2D design identify several things you can do with an object to signal spatial relationships. For example, of two overlapped objects, "the one on top" is closer, "the larger one" is closer, "the greyer one" is further, and so on. Of course, this also relies on Gestalt, because our brain interprets that there are two circles, rather than one circle and one crescent. Have a look:

enter image description here

That's my contribution. I won't undertake to answer your question, because

Let me first set out a few things that make it easier to respond to your question.

Hover. The purpose of a link's or command's hover response is to signal or enhance its affordance, or perhaps to indicate its pliancy—its willingness or receptiveness to action such as the dropping of a dragged object.

The pointer on a computer screen is a proxy for our finger or hand. We use it to indicate or select, to depress, to push or drag.

Choosing a hover style

Your question, "what's a logical and reasonable way to choose a hover colour" has many possible answers, which perhaps could be combined:
  • Use skeuomorphy. This is about relying on patterns that users already know from the physical world, and borrowing visual cues from that pattern for use in your GUI. Especially for new types of interaction, if the online experience can mimic something in the physical world, it helps people by providing a pattern that a user's brain can relate to. This "relationship" can be about actual physical interaction, like the 3D edges of a button that signals "you can depress me and I will move." I can't think of an inanimate physical object that responds to the proximity of a finger or hand. I suppose Well, living things might flinch or fly away, or they might lean in, or change colour.
  • Follow a standard. One standard is text decoration. So the blue text of a link becomes underlined on hover, red on mouseDown, purple after it's been visited. I wont' spend too much time identifying other standards or defending any of them, because your question implies you may not want to follow this standard.
  • Leverage prior learning. This is what makes skeuomorphism work. It's also why standards work. By any prior experience or learning can be leveraged. So based on previous experience, a user might decide that a small image that they've never seen before is an icon and therefore that they might move the pointer over it to see if it signals affordance, displays a tool tip, or causes the status bar of the browser to show a destination URL. These are all things the user has learned to recognise.
  • Leverage precognitive processing. I'm thinking of precognitive reactions, the stuff our brain figures out before we have a chance to think about it. Above, I mentioned flinching; we don't deliberately decide to flinch; it's a precognitive response. Gestalt identifies a variety of visual characteristics that our precognitive processing can interpret. We see this in action in your illustration, above: the menu bar has several links that are part of a group, and then, on hover, one of them separates from the group. Principles of 2D design identify several things you can do with an object to signal spatial relationships. For example, of two overlapped objects, "the one in front" is closer, "the larger one" is closer, "the greyer one" is further, and so on. Of course, this also relies on Gestalt, because our brain interprets that there are two circles, rather than one circle and one crescent. Have a look:

Are these two circles?

You can combine the above solutions to define/design a visual cue that best work for your audience. That's right—I have no specific answer your question, because *it depends on the context, the type of users and their prior experiences, the emotional goal of the visual design, and so on, and so on.

Source Link
JeromeR
JeromeR
  • 6.4k
  • 24
  • 36

Let me first set out a few things that make it easier to respond to your question.

Hover. The purpose of a link's or command's hover response is to signal or enhance its affordance, or perhaps to indicate its pliancy—its willingness or receptiveness to action such as the dropping of a dragged object.

The pointer on a computer screen is a proxy for our finger or hand. We use it to indicate or select, to depress, to push or drag.

Choosing a hover style

Your question, "what's a logical and reasonable way to choose a hover colour" has many possible answers, which perhaps could be combined:
  • Use skeuomorphy. Especially for new types of interaction, if the online experience can mimic something in the physical world, it helps people by providing a pattern that a user's brain can relate to. This "relationship" can be about actual physical interaction, like the 3D edges of a button that signals "you can depress me and I will move." I can't think of an inanimate physical object that responds to the proximity of a finger or hand. I suppose Well, living things might flinch or fly away, or they might lean in, or change colour.
  • Follow a standard. One standard is text decoration. So the blue text of a link becomes underlined on hover, red on mouseDown, purple after it's been visited. I wont' spend too much time identifying other standards or defending any of them, because your question implies you may not want to follow this standard.
  • Leverage the user's brain. I'm thinking of precognitive reactions, the stuff out brain does before we have a chance to think about it. Above, I mentioned flinching. Gestalt identifies a variety of characteristics. We see this in action in your illustration, above: the menu bar has several links that are part of a group, and then, on hover, one of them separates from the group. Principles of 2D design identify several things you can do with an object to signal spatial relationships. For example, of two overlapped objects, "the one on top" is closer, "the larger one" is closer, "the greyer one" is further, and so on. Of course, this also relies on Gestalt, because our brain interprets that there are two circles, rather than one circle and one crescent. Have a look:

enter image description here

That's my contribution. I won't undertake to answer your question, because