Muted colors for buttons... #1707
-
|
Is there an option to allow more color to the latest buttons? Maybe the blue-ish border and then a grey hover state? I like keeping up to date with the latest Paste buttons... but this page feels quite muted/brutalist in terms of color. I know the previous versions had more color to them, possible to allow for that option?
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
Hi @ramoneguru I've asked one of the @twilio-labs/design-systems-pd team to swing by to give you the run down on the reasoning behind the change. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @ramoneguru - thanks for the feedback! We introduced this style change to our secondary buttons because we received feedback from product designers across Twilio that they were having trouble achieving property hierarchy in their UIs with so much of the interface being blue. Toning down the visual prominence of the secondary buttons was a very intentional decision aimed at improving the user experience. This change allows the primary buttons—which are used only for the most important actions on a given page—to draw the user's attention more easily. If you take a look at this GH Discussions page, for example, you'll notice that all the secondary buttons are quite muted, which allows the green primary button to pop. If you or anyone on your team does encounter usability issues with the new secondary button styles, please do channel that feedback our way! |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, I don't think usability is much of an issue on this one. I'm not saying I need to have everything "pop", but would be nice to have a splash more color in there. I know buying a number isn't the most exciting thing in the world, but maybe there's something we can do with it? What do you think? Yeah, I don't think GitHub does a super great job in terms of colors/designs for their pages. Ever try to make a Pull Request into a Draft? Try it out :) |
Beta Was this translation helpful? Give feedback.
-
|
Color can be decorative at times, but in many cases—especially in product UIs—it's used purposefully to derive meaning. There could be other ways to add personality to the page—using something like iconography or illustrations—but before doing that, it's important to consider what user problem that splash of color or personality is trying to solve. Does it help direct the user's attention to the next step they should take to accomplish their task? Does it visually highlight an important piece of information? If not, it might not be the right place to introduce additional color, as it may be an unintentional distraction from the user's job to be done. Another thing to think about: is the completion of this task an exciting milestone for the user? If so, that could be a great place to introduce more personality into the UI, through something like a celebratory illustration. We definitely hear ya that the UI can look a little drab at times, but color and personality can absolutely be introduced into a product UI in a thoughtful way. Also, I'd recommend collaborating with Luz and Bhooma if you are looking to make design changes to this page—I bet they could help! |
Beta Was this translation helpful? Give feedback.
Hey @ramoneguru - thanks for the feedback!
We introduced this style change to our secondary buttons because we received feedback from product designers across Twilio that they were having trouble achieving property hierarchy in their UIs with so much of the interface being blue.
Toning down the visual prominence of the secondary buttons was a very intentional decision aimed at improving the user experience. This change allows the primary buttons—which are used only for the most important actions on a given page—to draw the user's attention more easily. If you take a look at this GH Discussions page, for example, you'll notice that all the secondary buttons are quite muted, which allows th…