It's just sad that your tweet was so controversial and apparently no one read this excelent post, but eh we're talking about social media 🤷♂️... it is not designed for people to have actual productive discussions.
Speaking of design, I'm a retired designer so I can confirm that this quote is pretty accurate:
The fact is that designers always, always ask for links that look like buttons and buttons that look like link
One subtle but important difference though that you also highlight some paragraphs bellow: sometimes the designer does it, not because he wants to be a pain in the ass, but because the context where an "user action" is required asks for that particular styling, for the benefit of customers, not developers/designers.
Your post examples are excelent and highlight the myriad of complex edge cases that can happen, but I can think of one that would be a particular good fit for your twitter audience:
a link that looks like a button
but that act as a link (a navigation occurs even though unnoticiable to most users — the url is replaced)
But we can argue that at the same time acts as a button, since "navigation" is "silent", it does feel like a button to trigger that tweet popup.
So should the designers made that CTA look like an anchor just for the sake of semantics? IMO, no. They made it stand out for quicker/easier reach for the users, it's the devs job to care about semantics.
Another super simple example from top of my mind: in 99% of the landing pages that we visit, you'll see a shinny CTA that looks like a button, but that in fact is a link that redirects you to signup/login page. Again, is that wrong? No. "Form should follow function".
Woah this got a bit longer that I expected, anyways been in your shoes for way too many times. I've done both, but currently I'm also leaning towards having a single smart <app-button>, although most of the times a convinience <app-link> emerges, that is simply a wrapper around with the pre-set styling props that makes it "look like a link" by default.
Thank you for sharing — these are great examples! As you’ve shown, it’s not always black and white. For those times, a single component is, IMO, more convenient and foolproof than two separate ones with matching styles.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
It's just sad that your tweet was so controversial and apparently no one read this excelent post, but eh we're talking about social media 🤷♂️... it is not designed for people to have actual productive discussions.
Speaking of design, I'm a retired designer so I can confirm that this quote is pretty accurate:
One subtle but important difference though that you also highlight some paragraphs bellow: sometimes the designer does it, not because he wants to be a pain in the ass, but because the context where an "user action" is required asks for that particular styling, for the benefit of customers, not developers/designers.
Your post examples are excelent and highlight the myriad of complex edge cases that can happen, but I can think of one that would be a particular good fit for your twitter audience:
linkthat looks like abuttonlink(a navigation occurs even though unnoticiable to most users — the url isreplaced)So should the designers made that CTA look like an anchor just for the sake of semantics? IMO, no. They made it stand out for quicker/easier reach for the users, it's the devs job to care about semantics.
Another super simple example from top of my mind: in 99% of the landing pages that we visit, you'll see a shinny CTA that looks like a button, but that in fact is a link that redirects you to signup/login page. Again, is that wrong? No. "Form should follow function".
Woah this got a bit longer that I expected, anyways been in your shoes for way too many times. I've done both, but currently I'm also leaning towards having a single smart
<app-button>, although most of the times a convinience<app-link>emerges, that is simply a wrapper around with the pre-set styling props that makes it "look like a link" by default.Great post! Cheers, keep being controversial!
Thank you for sharing — these are great examples! As you’ve shown, it’s not always black and white. For those times, a single component is, IMO, more convenient and foolproof than two separate ones with matching styles.