Button changing its text & action. Good or terrible? Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern) Announcing the arrival of Valued Associate #679: Cesar Manara Unicorn Meta Zoo #1: Why another podcast?How little is too little padding between button text and its button border?Desktop application problem: how to present a new option without confusing existing usersEvidence of Button-action and Link-action in the same scope?Primary Action Button ColorsButton text in table column - 'Open' or action name?Changing text on a button twice after actionIs it a good idea to use a Floating Action Button for non-actions?Grid action button selectionImproving button state by only changing coloursChanging button alpha value v button text colour to indicate current button status
Why is Nikon 1.4g better when Nikon 1.8g is sharper?
Converted a Scalar function to a TVF function for parallel execution-Still running in Serial mode
How fail-safe is nr as stop bytes?
How do I find out the mythology and history of my Fortress?
Chebyshev inequality in terms of RMS
A term for a woman complaining about things/begging in a cute/childish way
Disembodied hand growing fangs
Is grep documentation about ignoring case wrong, since it doesn't ignore case in filenames?
Chinese Seal on silk painting - what does it mean?
When a candle burns, why does the top of wick glow if bottom of flame is hottest?
What is the font for "b" letter?
Amount of permutations on an NxNxN Rubik's Cube
How were pictures turned from film to a big picture in a picture frame before digital scanning?
How to tell that you are a giant?
Take 2! Is this homebrew Lady of Pain warlock patron balanced?
Did Krishna say in Bhagavad Gita "I am in every living being"
Did Deadpool rescue all of the X-Force?
AppleTVs create a chatty alternate WiFi network
Why does the remaining Rebel fleet at the end of Rogue One seem dramatically larger than the one in A New Hope?
Generate an RGB colour grid
What was the first language to use conditional keywords?
Why do we need to use the builder design pattern when we can do the same thing with setters?
Does the Weapon Master feat grant you a fighting style?
How does light 'choose' between wave and particle behaviour?
Button changing its text & action. Good or terrible?
Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern)
Announcing the arrival of Valued Associate #679: Cesar Manara
Unicorn Meta Zoo #1: Why another podcast?How little is too little padding between button text and its button border?Desktop application problem: how to present a new option without confusing existing usersEvidence of Button-action and Link-action in the same scope?Primary Action Button ColorsButton text in table column - 'Open' or action name?Changing text on a button twice after actionIs it a good idea to use a Floating Action Button for non-actions?Grid action button selectionImproving button state by only changing coloursChanging button alpha value v button text colour to indicate current button status
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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:
interaction-design buttons layout design-patterns information-design
add a comment |
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:
interaction-design buttons layout design-patterns information-design
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
add a comment |
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:
interaction-design buttons layout design-patterns information-design
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:
interaction-design buttons layout design-patterns information-design
interaction-design buttons layout design-patterns information-design
edited Apr 11 at 23:51
Mike M
12.5k12736
12.5k12736
asked Apr 10 at 19:14
Dennis NovacDennis Novac
30936
30936
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
add a comment |
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
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
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
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
add a comment |
4 Answers
4
active
oldest
votes
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.
Depending on the business goals, if you need to deemphasize the act of unregistering, you can perhaps make a subtle link.
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
add a comment |
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:
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
add a comment |
For comparison, social media sites usually have something like that button for following/unfollowing.
Some examples:
Tumblr:
Reddit:
Twitter:
YouTube:
Facebook:
New contributor
add a comment |
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:
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
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "102"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
noCode: true, onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f124994%2fbutton-changing-its-text-action-good-or-terrible%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Depending on the business goals, if you need to deemphasize the act of unregistering, you can perhaps make a subtle link.
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
add a comment |
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.
Depending on the business goals, if you need to deemphasize the act of unregistering, you can perhaps make a subtle link.
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
add a comment |
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.
Depending on the business goals, if you need to deemphasize the act of unregistering, you can perhaps make a subtle link.
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.
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.
Depending on the business goals, if you need to deemphasize the act of unregistering, you can perhaps make a subtle link.
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.
edited Apr 11 at 13:40
answered Apr 10 at 19:54
Mike MMike M
12.5k12736
12.5k12736
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
add a comment |
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
1
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
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
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
@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
add a comment |
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:
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
add a comment |
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:
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
add a comment |
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:
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:
answered Apr 11 at 10:10
Nick GammonNick Gammon
62635
62635
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
add a comment |
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
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
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
add a comment |
For comparison, social media sites usually have something like that button for following/unfollowing.
Some examples:
Tumblr:
Reddit:
Twitter:
YouTube:
Facebook:
New contributor
add a comment |
For comparison, social media sites usually have something like that button for following/unfollowing.
Some examples:
Tumblr:
Reddit:
Twitter:
YouTube:
Facebook:
New contributor
add a comment |
For comparison, social media sites usually have something like that button for following/unfollowing.
Some examples:
Tumblr:
Reddit:
Twitter:
YouTube:
Facebook:
New contributor
For comparison, social media sites usually have something like that button for following/unfollowing.
Some examples:
Tumblr:
Reddit:
Twitter:
YouTube:
Facebook:
New contributor
New contributor
answered Apr 13 at 1:14
ahiijnyahiijny
1413
1413
New contributor
New contributor
add a comment |
add a comment |
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:
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
add a comment |
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:
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
add a comment |
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:
END OF UPDATE (2).
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:
END OF UPDATE (2).
edited Apr 12 at 16:26
answered Apr 10 at 19:58
Mo'athMo'ath
775213
775213
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
add a comment |
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
4
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
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
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
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
add a comment |
Thanks for contributing an answer to User Experience Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f124994%2fbutton-changing-its-text-action-good-or-terrible%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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