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
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 ...
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 ...
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 ...
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 ...
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' ...
It's quite a broad question and requires a lot of elaborate discussions to arrive at a conclusive "answer" but here are some of my observations and experiences
User Expectation - Users don't like to be duped
Even though the intention is noble and might turn out to be a good way to gauge the user patterns and inform them about an upcoming feature, it still ...
Your 3rd option is definitely the best. You want to make it clear that the game is awaiting an action from another player and they just need to wait (or shout across the room: "Hurry up will ya!").
If your concern is about having too much text, then just cut it down to something shorter, for example:
"Awaiting Game Master"
You could even ...
GitHub hosts code repositories that make use of the Git version control system. Traditionally, Git is a command-line driven tool, so most users of github actually "interact" with it using the command-line.
The web-based "view" on a repository (from my experience as a user) primarily holds two use cases/advantages:
Read some documentation without having to "...
Don't put your price inside the interaction point. If I am looking for a price then buttons are perceived as grey matter. I don't expect to find the answer there. I'm looking for specific visual clues: a dollar sign ($), the words "price" or "for only", a number with .99 after it.
I can appreciate wanting to be tasteful, but your primary goal is ...
To make it stage one acceptable you may want to follow the conventional ordering of the icons so that the user has one less thing to figure out or take care of before performing any action.
I do have a suggestion regarding the use of icons. If possible and feasible, place hyperlink on the defining (column) table cell of the row (like some title or id or ...
In the scenario you describe, the user has to click twice; once to get the vote control visible, and then a second time to vote either up or down. This seems like one click too many to me. It would be better if the thumbs up / down were initially visible (this is the ideal call to action), but I see in you design you don't have the space for this because of ...