One question to ask is: Is the user aware of the benefits of upgrading / activating? How am I improving their life?
In the current state, you have a card list, other than the button label, I can't differentiate between the two. I also don't really see the benefits, and 'Activate' could mean a committment before I've learned what it's doing for my company.
Although I like your solution of naming the buttons differently (manage vs activate) but I did not noticed the difference in vocabulary right away. In my experience, I like ghosting the unavailable containers and perhaps a little snipe in the corner. Allow the entire box to be clickable.
As a general principle, I always think of error messages as inferior design/ UI, which in most cases can and should be avoided. If the user interaction triggers an error message, why would the UI allow users the option in the first place?
error message "password is not good enough" -> better: live indicator to signal password strength
I understand your justification for a "Do not click me" button. If curiosity is exactly the emotion you'd like to instill in the users when they see this button, perhaps you could try something along the lines of "Sneak peek" or "We're changing" or "Behold, the future is here". This way, you are not misleading your users. Your intention is also received as ...
Applications all over the place tend to rely on a color scheme that has already, to a certain extent, become a standard.
Red means: Oh no! Careful! Beware! ATTENTION!!!
Green means: Safe. Go for it. Ah yes, nothing to worry about.
I don't think it slows a user down, quite the contrary actually. Since universally applications have adopted red and green to ...
I've implemented such services at the request of clients and I currently work with a company that offers it as part of their software. In the right circumstances, it's a highly successful feature. Here's what I can tell you.
Call me when you're ready to talk
No one wants to sit on hold, get bounced from one department to another, or deal with some gateway ...
Given that you mentioned yourself that the user has already initiated the action, it is likely that the user will want to confirm the action.
Cancel is not really an action, but rather a dismissal of the modal dialog.
Given that, I suggest you strongly de-emphasize the cancel button.
If you do, it becomes clear that you do not need the color coding in the ...
This is very similar to the Should "Yes, delete it" be red, or green? question.
Here is my answer to that.
With respect to your particular question, Option B is what makes the most sense, as that is where your eye is naturally drawn to.
That said, I would like to suggest an Option C:
I would switch the order of the buttons so that the default ...
You'll find a lot of info out there about CTA tests and theories. But you're not going to find a whole lot that tells you what to do with horizontal alignment. The reason is, it depends on your design.
If your colleagues want to talk about what is more common, then you should align right, as you suggest. This is used more often than ...
The weightage of your call to actions should be defined by your end user goals and which call to action you want your users to click.
Hence the call to action which you think is more important for your business should be stronger as opposed to the secondary call to action. So in your case if you feel getting users to sign up for a free trial is more ...
A placeholder is an efficient tool for teaching what your user is going to do next without spoon-feeding him. The key of success here is to give an answer to the question: What am I gonna to do next, how and why? As this could be a lot of information, it's okay to split the answer on multiple dialogs.
An example: If you want to get the user's profile image, ...
Having a clear feedback button has shown to increase the amount of feedback that you get. Whether this is a good thing or not depends on your business model.
Additionally a floating feedback button on the side of a site has become common place now, so most users won't have a problem with it. Which side it is on depends partly on design issues, and I've ...
"Resend order confirmation" seems the clearest from your description.
You have already sent it, so 'request' wouldn't be a good choice as it implies that it has not been sent before.
'Send me another' is clear but too long as it has the same meaning as 'resend'.
Additionally, you don't have to specify 'email' unless there are multiple communication ...
Button animations serve a different purpose
The purpose of the animation is not to draw the user's attention, but rather to provide feedback to the user.
This is sometimes called a clunk: a clear acknowledgement to assure users that you have noticed the interaction.
In the physical world users live in, interactions provide feedback (closing a ...
Although the question does ask specifically about the colour I would like to make the following suggestion:
With a critical function such as the one you describe you want to make the function interaction steps different from other interaction steps associated with less destructive actions to avoid a user following a repetitive, almost sub-conscious pattern ...
I am actually going to attempt, after this intro., to avoid the concept of the fold entirely as it's an interesting debate - especially with mobile screen sizes being so short, laptops being short, and, generally, not being able to guarantee/know where the fold is. (This happens a lot at my current job. The designers and I all use 27" iMacs - then the ...
Your decision should also be informed other factors:
how much you desire to encourage that behavior
how dense/sparse the information on screen already is
how many social networks you plan to provide links for
how does the interaction match up to similar interactions in your product and what patterns have already been established
how much traffic you want ...
Try making the "activate" buttons stand out compared to the "manage" buttons ( e.g. ghost and filled buttons. Depends on the options you have according to your UI styleguide). Reduce the opacity of the unactivated sections by let's say 50% and set them to full opacity on hover ( if it's a web app).
The Material Design Guide has a good definition of a text button:
Text buttons and contained buttons use text labels, which describe the action that will occur if a user taps a button. If a text label is not used, an icon should be present to signify what the button does.
So, according to this, the current action CTA seems a better choice. The user will ...
While "Try the new look" may be too enticing, everyone is going to want to click "Don't click me". Furthermore, for the users that you want to start using it now, "Don't click me" gives no indication of what it does. Since you'll have to inform those users anyway to navigate to some obscure location and click on the "Don't click me" button, you might as ...
I think ideally what you'd want to do in this particular case is have the text of the button change after the user initially clicks it to something like "collapse." You can probably find a more artful label than collapse in this instance but the learn more label is no longer helpful to users after it has been clicked.
Hope this helps.
The button alone should define the call to action (specifying what the button will do / where it will take you). It should not depend on external text to explain what the action is.
You can however have additional text around it to give the user reasons why they specifically might want to do that action.
The buttons opposed to each together -> better distinctiveness and scannability .
The buttons have a more square-like shape -> they're easier to tap, less missing taps , better usability
The buttons (which are also the actions) are together and mirrored, and the email input is closer to the other form's inputs -> more consistent design.
Show a notification and eventually an error.
Keep your interface consistent and show the link. You can simply disable it and show a notification. It won't be annoying if it's friendly and informative. On the contrary, it would do your users a favor! It doesn't create misleading expectations with a working link or confusion by hiding the link all of a sudden....
I would 100% argue that these pop up modal windows take away from the user experience - I don't think there is much doubt about that. You mentioned that they destroy the flow of reading the content and I think that any user would disagree.
The reason they are used, is because they likely are successful. I guess it's going to come down to what's more ...
To me, if you're redirecting a user to a page with text on it either:
a) don't put any text on it, make the redirect seamless and reliable. Use error handling to explain clearly to the user what's happened if the redirect fails for whatever reason and requires user intervention to proceed.
b) if there is text on a redirect screen give the user enough time ...
Well, after going over the documentation it appears to me that when it comes to how the button should appear, the rule is that there is no rule.
However, there are a few things to take note of per their docs:
Avoid using floating action buttons for minor and destructive actions.
Affirmative actions are placed on the right side and continue the process. ...
There are a few things you could do, depending on the circumstances.
When the page is loaded, depending on where the initial focus is, you could have extra text associated with the first object (aria-describedby) that informs the screen reader what the CTA is.
You could have a visually hidden container that is a live region (eg <div class='sr-only' ...