40

enter image description here After the user Registers for an event (he goes to cart and pays, etc.) the next time he visits the page, the event for which he registered now shows a less emphasized Unregister button, which does the exact opposite of what it did until the event was purchased.

Is it a good practice to have the same button change it's function or is it bad and confusing?

Update:
If it helps anyone, I went with this layout: enter image description here

  • Another option is to completely separate notification/state from action. Change the background color for registered rows. Add a “registered” label above the row. Leave the button column to a single true/false state. Instead of “March 8” it could read “your event starts March 8”... this point is, all the action doesn’t have to revolve around the button, and you may find added SEO and accessibility tidbits with added labels and markup :) – Prestosaurus Apr 13 at 16:54
  • Adding to the specific question, changing text is fine if it's logical. Left to right, top to bottom, forward to backward. These steps can all equate back to themselves. So with that logic in mind, maybe the Register button should have the checkmark, and the Unregister button should have a relative icon like an "X". – Prestosaurus Apr 13 at 17:12
74

You can change the button to reflect the only available action, but separate the display of state.

You've replaced the button label with the only available action: reverting (unregistering).

Where it starts to get a little confusing is you have a checkmark alongside the button label.

One approach is to separate them. Separate the status 'You are attending' from the action.

Since the primary action when scanning the list is Register, you can make the Unregister button more subtle.

enter image description here

Depending on the business goals, if you need to deemphasize the act of unregistering, you can perhaps make a subtle link.

enter image description here

This example emphasizes the current state 'Attending' so it's clear at a glance.

This also uses distinct language to more clearly differentiate state from action.

  • 1
    Even though having Unregister as small and subtle as possible would be great for business goals, it just doesn't fit the overall view and idea of the page. Probably will use this version: prntscr.com/na9sd2 – Dennis Novac Apr 10 at 21:38
  • 4
    @DennisNovac Thanks for the feedback... Button / action size is just a graphic suggestion. The main emphasis I wanted to impart is clarity between state and action. – Mike M Apr 10 at 21:45
10

I would keep the general style of the button, to be consistent. However I think the most important thing is to confirm that you have registered, and not have this state be confusingly similar to not being registered, except for "Un". Since the important thing is that you have already registered I would put that on top, with the unregister button underneath. Having the lighter style also makes it less likely that a quick perusal would mistake it for needing to register. Like this:

Suggested layout

  • Good suggestion to show the current status first (top). I would encourage using the green color shade he is already using for the "You are attending" text. – Mo'ath Apr 11 at 13:07
6

For comparison, social media sites usually have something like that button for following/unfollowing.

Some examples:

  • Tumblr:

    Follow / Unfollow

  • Reddit:

    subscribe / unsubscribe

  • Twitter:

    Follow / Following / Unfollow

  • YouTube:

    Subscribe / Subscribed / Unsubscribe

  • Facebook:

    Follow / Following / Following with dropdown menu where "Unfollow this page" is one of the menu items

4

Do not "less emphasize" it unless it is a requirement!

Do not jeopardise your users' experience in the favor of discouraging an action!

These are two different buttons with two different functionalities that are EQUALLY important to the users.

Apparently users should be able to Register and to Unregister. Similarly I am able to buy from Amazon and I am able to make a return or cancel an order. Although Amazon would prefer less returns/cancellation happening, they do/should not make the Return/Cancel buttons confusing and less accessible.

*Less emphasizing does not mean confusing the user and making the task hard to achieve.

*There is nothing wrong with having the "Unregister" button replacing the "Register" button.

Recommendations:

  • Show something like "Already registered" label (with the check-mark maybe) for users who are already registered and coming back to revisits the page.
  • Display the "Unregister" button in blue just like the "Register" button and remove the check-mark that you added next to "Unregister".

Now, if deemphasizing the "Unregister" task is a Requirement:

See suggestions in the update sections below.

UPDATE (1):

I just noticed Mike's answer (I think it was posted a couple minutes before mine). I echo his idea: "Depending on the business goals, if you need to deemphasize the act of unregistering, you can perhaps make a subtle link".

END OF UPDATE (1)


UPDATE (2):

This update is to suggest a design improvement based on the OP update and other answers:

enter image description here

END OF UPDATE (2).

  • 4
    Well I don't see anything that horrible about making a button less noticeable, in case you want users to use it less often. Am I missing something? – Dennis Novac Apr 10 at 21:44
  • 7
    Yes, it is not wrong to make a button less noticeable, but not the way it is done in your question. It is confusing. The button looks disabled and the check-mark made it even more confusing. The reason I added the update section in my answer was to express that I like the idea of using the subtle link as a good way to less emphasize the option. However, making it confusing and hard to achieve is wrong. – Mo'ath Apr 10 at 23:01

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.