We have an application where every auction has a favourite and 'notify me' button (for when the auction is almost over). The 'notify me' button is linked to the favourite button, as in, you cannot unfavourite something if you have a notification active on the auction.

Once you remove the notification, you can also remove the favourite. The same issue is present when you bid on an auction; you automatically favourite it and cannot undo this until you are no longer the highest bidder. This leads to confusion regarding when you can and cannot interact with the favourite icon.

Currently we have a tooltip that tells the user the situation, but this obviously cannot work on mobile.

Any tips?

  • Are you allowed to change the buttons or are those two buttons "set in stone?" There are lots of UI components that can be used in combination that will not require a tooltip or modal disclaimer. – jhurley Oct 10 '17 at 13:42

On-click on the "Favorite" icon use "Are you sure" dialog

If users want to remove certain auction from their favorites, and they have active notifications for it, then show a dialog saying that if they remove the favorite the notification will be removed too.

Are you sure you want to remove the Auction "X" from favorites? 

Your notification/bid will be removed too. 

Are you sure you want to proceed? Yes, No

The same goes if the user is currently the highest bidder - inform them that their bid will be removed.

| improve this answer | |
  • That would technically not work though (the way it is now). Using the notify button automatically activates the favourite button and this cannot be reverted until the notification button is also turned off. My biggest struggle is showing people that a favourite button is linked and disabled until they turn off the notify button. – Wendy Wojenka Oct 6 '17 at 13:04

To make it obvious to users that they cannot interact with you should communicate this visually.

One possibility is to arrange them in this order horizontally from left to right:

  1. Favorite (button)
  2. Notify me (button)
  3. Highest bidder (status)

Next change the background of the button area, e.g. green (see the 'Related' section on the right side here on stackechange.com). Clicking the button right next to it will change the background color as well.


Nothing is selected

Favorite / Notify // Highest Bidder

Click on favorite

Favorite / Notify // Highest Bidder

Click on Notify

Favorite / Notify // Highest Bidder

Highest bidder

Favorite / Notify // Highest Bidder

| improve this answer | |

How are you handling the "Add to Favourites" and "Receive Notifications" option? Is it by simply clicking the favorite icon or you have a link?

  1. You could display the icons to pass on the information to the user (eg: Bell icon for showing notification enabled) but these icons should not be actionable.
  2. Provide links for the user to Mark as Favourite and Receive Notifications.
  3. For users who have notification enabled, give them only one option at a time based on the order in which your items become actionable. For example, a link "Stop Receiving Notifications" will be shown as long as the user clicks on it. Once the user opts for stop receiving the notifications, the next available option should be shown ie "Remove from Favourites".
  4. I would suggest establishing a workflow so that user do not get confused with multiple options that are not valid.
| improve this answer | |

If one button is controlling the state of other buttons, then a possible way to demonstrate that is using color transitions. See for example the "->" Arrow button in the Green section of this example at CoDrops: https://tympanus.net/Development/CreativeButtons/ Notice the transition from Left to Right of the background color. I'll come to it in a moment.

For your row:
[Favorite - color1] [NotifyMe - color2] [Bid]

Favorite.OnClick: Transition the [Favorite] button, possibly change the text to Favorited, if you are using a Heart symbol, change its color to active state, and darken the background to show active/pressed state (color1.dark).

Notify.OnClick: Transition the [Notify] button Right to left (darken the background to color2.dark). At completion of transition, also transition the [Favorite button].This time, change its color to (color2.dark), using the color theory and visual transition to show that the changes in that button were caused by the 1st button.

On un-favorite-attempt attempt of such a system, i.e. the user tapping the linked color buttons, open a dialogue = "This will take you off the notification list - continue (y/N) "

You can add a []Dont show me this again, if you think this is a oft-repeat behaviour.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.