Button changing its text & action. Good or terrible? Planned maintenance scheduled April 17/18, 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
Cold is to Refrigerator as warm is to?
Why don't the Weasley twins use magic outside of school if the Trace can only find the location of spells cast?
Working around an AWS network ACL rule limit
What's the difference between (size_t)-1 and ~0?
How should I respond to a player wanting to catch a sword between their hands?
I'm thinking of a number
3 doors, three guards, one stone
Is there a documented rationale why the House Ways and Means chairman can demand tax info?
Why is there no army of Iron-Mans in the MCU?
If A makes B more likely then B makes A more likely"
Limit for e and 1/e
Keep going mode for require-package
What is the electric potential inside a point charge?
Why use gamma over alpha radiation?
Did the new image of black hole confirm the general theory of relativity?
What was the last x86 CPU that did not have the x87 floating-point unit built in?
How to politely respond to generic emails requesting a PhD/job in my lab? Without wasting too much time
What LEGO pieces have "real-world" functionality?
Array/tabular for long multiplication
How to say 'striped' in Latin
Unexpected result with right shift after bitwise negation
Do working physicists consider Newtonian mechanics to be "falsified"?
How can I make names more distinctive without making them longer?
What do you call a plan that's an alternative plan in case your initial plan fails?
Button changing its text & action. Good or terrible?
Planned maintenance scheduled April 17/18, 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
13
Bad user experience is ... when using "it's" instead of "its" in a title
– rexkogitans
Apr 11 at 6:34
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
yesterday
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
yesterday
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.2k12735
12.2k12735
asked Apr 10 at 19:14
Dennis NovacDennis Novac
30436
30436
13
Bad user experience is ... when using "it's" instead of "its" in a title
– rexkogitans
Apr 11 at 6:34
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
yesterday
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
yesterday
add a comment |
13
Bad user experience is ... when using "it's" instead of "its" in a title
– rexkogitans
Apr 11 at 6:34
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
yesterday
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
yesterday
13
13
Bad user experience is ... when using "it's" instead of "its" in a title
– rexkogitans
Apr 11 at 6:34
Bad user experience is ... when using "it's" instead of "its" in a title
– rexkogitans
Apr 11 at 6:34
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
yesterday
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
yesterday
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
yesterday
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
yesterday
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.2k12735
12.2k12735
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 2 days ago
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 2 days ago
answered Apr 10 at 19:58
Mo'athMo'ath
725213
725213
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
13
Bad user experience is ... when using "it's" instead of "its" in a title
– rexkogitans
Apr 11 at 6:34
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
yesterday
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
yesterday