11 ms·

It's been thus, nigh on two decades now. Product Designer: "No system controls; we want our users to have the Full Brand Experience, therefore, custom controls

It's been thus, nigh on two decades now. Product Designer: "No system controls; we want our users to have the Full Brand Experience, therefore, custom controls." Also Product Designer: "Why don't our custom controls work as well as system controls?"

smitty1e 5y ago
"Assume infinite pipe and ludicrous client resources."
Spivak 5y ago
I mean the product manager isn’t wrong, there is no good reason we shouldn’t be able to make custom components with the behavior of “native” widgets. The fact that the dev story is “build a widget from scratch out of divs” and not “extend the fully functional component with new styling and hooks and slight behavior modifications.” We created this problem ourselves by not having the tools to meet designer needs while doing it right. Pontificating about how they should just change their notion of right misses it completely.
- dev-3892 5y ago
  well it's historically been because 'extend the native widget' isn't possible with css. WebComponents change that a little bit with well-scoped css, but that's still a very javascripty solution.
  - Spivak 5y ago
    Of course, I’m not at all advocating that the solution is to just do it but that web really hasn’t kept up with the needs of the kinda of apps people want to build with it. It’s easy to build something that works but annoying to impossible to build something robust so we’re left with every single website being functional enough to work but broken. I don’t think telling developers “just do it right” is a scalable solution, the platform has to make the least effort path the one that works best.
- coffeefirst 5y ago
  No, it’s because it’s stupid difficult to replicate the native functionality exactly, retain accessibility traits, and if you get it perfect, then you have to deal with the fact that different browsers and devices interpret these controls totally differently.
  - Spivak 5y ago
    We’re saying the same thing. The web right now today requires that you reimplement all that functionality from scratch when it should be just inheriting all the behavior from the native control in your custom thing and tweaking the styles or adding some additional functionality.
    - goatlover 5y ago
      This. You should be able to subclass the DOM creation functions to specify your customized version, and have it spit out the custom tag for it.
- Nextgrid 5y ago
  Lack of technical solutions isn't the only issue. System controls (well most of them - recent Windows and macOS seem to be regressing) have decades of refinement and battle-testing behind them and users are familiar with them. You're not replicating all of this alone regardless of how much money or years of experience you have.
  - soperj 5y ago
    Literally stepping off the shoulders of giants and wondering why you're less capable.
    - mattmanser 5y ago
      You and the parent are totally missing the point. Use the system tools. But make the look of the system tools customizable. System tool. Customizable look. That's what should be available. But even today you can't consistently change something as simple as a scroll bar or a checkbox. Which, even worse, are by default styled differently on different browsers.
      - trgn 5y ago
        I think the parents are _exactly_ getting the point. Separating look&feel from functionality isn't that easy. In any kind of UX, they are bound to various degrees, depending on the use-case.
        mattmanser 5y ago
        Let's take windows. The scroll bar on the start-up screens looks different to the one in explorer, looks different to the one in Chrome, which looks different to the one in IE11, which looks different to the one in IE Edge, which looks different to the one in Firefox, which looks different to the one in excel, which looks different to the one in the control panel, which looks different to the one in visual studio, which looks different to the one in Visual Studio Code. So if they're _exactly_ getting the point, they're pretty unobservant. There already is no consistency.
- jonahx 5y ago
  Not a downvoter but... > Pontificating about how they should just change their notion of right misses it completely. The ask isn't to change their notion of right, but to understand that (yes, sadly) there is a tradeoff between "usable but ugly system components" and "pretty but janky" bespoke components, and they're making the wrong choice.
  - Shacklz 5y ago
    > they're making the wrong choice. If what feels like the vast majority of them are making the same "wrong" choice, we should probably think about ways to make that choice more "right", because clearly, the current approach isn't working
    - Spivak 5y ago
      This is my approach. To me the ask for custom components from designers is extremely reasonable. The fact that it’s so hard to get all the edge cases right on the web is a failing of the tooling not the ask. At some point we have to climb out of the trenches and introspect why the most treaded path in web design is the one with the rickety bridge and spike pits when we the software engineers are the ones who lay the bricks.
      - bmeski 5y ago
        It’s not a failing of the tooling. It’s a failing of designers and product to understand what a web page is and what an application is. If youve only designed/“Ideated” for iOS or Android, you have no business designing for web. Entirely different platform with different capabilities. Embrace reality and build simple effective products. Literally no one gives a shit about the arrows on your carousel or the border radius animation on a button. I just want to scroll and click and open new tabs.
- scelerat 5y ago
  It's not just appearance but also behavior. There are differences across browsers, OSes, and devices in how UI widgets work and inevitably the "custom" approach is a compromise in favor of the PM's personal workstation. And lest it be overlooked, the appearance of those widgets themselves, is a feature. They are easily identifiable by users of that platform as being something they can interact with and expect a predictable set of outcomes.
- ehnto 5y ago
  To be fair to "the system", it was developed over decades, much of it before design was even a consideration, and almost all of it from a time when modern designs would have been a pipe dream on given device resources.
- pjc50 5y ago
  The problem is, as always when talking about cross-platform development, is that you can have consistent widgets OR native widgets, because the native platforms have different look, feel, and interaction standards. Would it be great if everyone on the frontend could get together and agree what the native-to-browser widgets should look like and how they might be customized? Yes. Would the three warring browser manufacturers change their platforms to make web development easier and lighter for everyone, at the cost of platform uniqueness? No.
  - jen20 5y ago
    > Would it be great if everyone on the frontend could get together and agree what the native-to-browser widgets should look like and how they might be customized? Yes. This would not be great at all. I want widgets on web pages to look like macOS system widgets on macOS, and to look like Windows system widgets on Windows. I want designers to lose the notion that it is their system style, and respect the fact that the browser is _my_ user agent, and therefore must respect _my_ preferences.
- spc476 5y ago
  I recently came across a web site that allows one to zoom into the content (it's a mapping site). Only the designers just assumed that everyone would have either a mouse with a scroll wheel, or a touch pad. Well, I have neither. And the developers of the site suggested "oh, just install this piece of software that allows you to bind some keyboard shortcuts to simulate a scroll wheel" instead of, you know, providing two damn buttons to zoom in and out! ("But ... but ... but ... adding those two buttons would destroy the aesthetic of the site!")
  - bmeski 5y ago
    Bingo
timeon 5y ago
"a good rule of thumb to follow when designing your own controls: Don't." -- https://web.archive.org/web/20021009021738/http://www.iarchitect.com/visual.htm https://web.archive.org/web/20021009021738/http://www.iarchi...
- laurent92 5y ago
  And then, everyone has their custom buttons, sliders, switches, input fields, and everyone is happier for that…
  - goatlover 5y ago
    Except for when those custom controls fail to implement all the features of the built-in ones, as the article details from various popular sites, at least back on 2016. But maybe at the end of 2021, all custom stuff is fully accessible and reimplements everything.
- Andrew_nenakhov 5y ago
  Now those are controls I haven't seen in a long time. Long time.
- mekkkkkk 5y ago
  Wow, that's a sobering read, thanks! It's funny to see how some of the common gripes with modern "flat" design was so obvious even before it became mainstream. Even though it (in my opinion) looks better today, the skeumorphic, brutal, beveled Windows 95 UI was probably the most obvious and clear interface I've ever used.
inasmuch 5y ago
As a product designer, I am and have long been looking for a company that will enable—hell, allow—me to design software that employs system standards. I can’t imagine I’m the only one. Problem is, most leadership doesn’t care about usability unless it affects marketability, which is less and less likely as people (users) become more comfortable with and accustomed to hopping between needlessly proprietary workflows and abstraction of crucial processes.* Often (usually?) designers also don’t, to be sure, but those like myself who do care are, like devs, up against unreasonable speed demands and interruptions that make it difficult to do our best, most thoughtful work. And though it may seem like design is higher up the totem pole, perhaps because it’s usually upriver from dev, in my experience, most companies see designers as whiny graphics monkeys, just as they may see devs as whiny code monkeys.+ It’s significantly more difficult and time-consuming to design novel functions and flows that conform to or complement existing standards than it is to draft a new system that need only make internal sense and may wantonly disregard the environment around it. This is why people like Electron, right? This is why people liked the internal combustion engine. * I’d like to see a study on how this kind of acontextualization of work tasks might exacerbate burnout. + How many companies are actually defined by great design these days (versus, say, great functionality)? Not even Apple seems to care about that anymore, as they seem eager outpace their software with their hardware, rather than creating any iconic or lasting designs. As “product design” has evolved to include software products, the discipline and its output have become just as mutable, and therefor disposable, and therefor ‘not worth’ the effort necessary to make good things, let alone great things.
deleted 5y ago
[deleted]

smitty1e 5y ago

"Assume infinite pipe and ludicrous client resources."

Spivak 5y ago

I mean the product manager isn’t wrong, there is no good reason we shouldn’t be able to make custom components with the behavior of “native” widgets. The fact that the dev story is “build a widget from scratch out of divs” and not “extend the fully functional component with new styling and hooks and slight behavior modifications.” We created this problem ourselves by not having the tools to meet designer needs while doing it right. Pontificating about how they should just change their notion of right misses it completely.

dev-3892 5y ago
well it's historically been because 'extend the native widget' isn't possible with css. WebComponents change that a little bit with well-scoped css, but that's still a very javascripty solution.
- Spivak 5y ago
  Of course, I’m not at all advocating that the solution is to just do it but that web really hasn’t kept up with the needs of the kinda of apps people want to build with it. It’s easy to build something that works but annoying to impossible to build something robust so we’re left with every single website being functional enough to work but broken. I don’t think telling developers “just do it right” is a scalable solution, the platform has to make the least effort path the one that works best.
coffeefirst 5y ago
No, it’s because it’s stupid difficult to replicate the native functionality exactly, retain accessibility traits, and if you get it perfect, then you have to deal with the fact that different browsers and devices interpret these controls totally differently.
- Spivak 5y ago
  We’re saying the same thing. The web right now today requires that you reimplement all that functionality from scratch when it should be just inheriting all the behavior from the native control in your custom thing and tweaking the styles or adding some additional functionality.
  - goatlover 5y ago
    This. You should be able to subclass the DOM creation functions to specify your customized version, and have it spit out the custom tag for it.
Nextgrid 5y ago
Lack of technical solutions isn't the only issue. System controls (well most of them - recent Windows and macOS seem to be regressing) have decades of refinement and battle-testing behind them and users are familiar with them. You're not replicating all of this alone regardless of how much money or years of experience you have.
- soperj 5y ago
  Literally stepping off the shoulders of giants and wondering why you're less capable.
  - mattmanser 5y ago
    You and the parent are totally missing the point. Use the system tools. But make the look of the system tools customizable. System tool. Customizable look. That's what should be available. But even today you can't consistently change something as simple as a scroll bar or a checkbox. Which, even worse, are by default styled differently on different browsers.
    - trgn 5y ago
      I think the parents are _exactly_ getting the point. Separating look&feel from functionality isn't that easy. In any kind of UX, they are bound to various degrees, depending on the use-case.
      - mattmanser 5y ago
        Let's take windows. The scroll bar on the start-up screens looks different to the one in explorer, looks different to the one in Chrome, which looks different to the one in IE11, which looks different to the one in IE Edge, which looks different to the one in Firefox, which looks different to the one in excel, which looks different to the one in the control panel, which looks different to the one in visual studio, which looks different to the one in Visual Studio Code. So if they're _exactly_ getting the point, they're pretty unobservant. There already is no consistency.
jonahx 5y ago
Not a downvoter but... > Pontificating about how they should just change their notion of right misses it completely. The ask isn't to change their notion of right, but to understand that (yes, sadly) there is a tradeoff between "usable but ugly system components" and "pretty but janky" bespoke components, and they're making the wrong choice.
- Shacklz 5y ago
  > they're making the wrong choice. If what feels like the vast majority of them are making the same "wrong" choice, we should probably think about ways to make that choice more "right", because clearly, the current approach isn't working
  - Spivak 5y ago
    This is my approach. To me the ask for custom components from designers is extremely reasonable. The fact that it’s so hard to get all the edge cases right on the web is a failing of the tooling not the ask. At some point we have to climb out of the trenches and introspect why the most treaded path in web design is the one with the rickety bridge and spike pits when we the software engineers are the ones who lay the bricks.
    - bmeski 5y ago
      It’s not a failing of the tooling. It’s a failing of designers and product to understand what a web page is and what an application is. If youve only designed/“Ideated” for iOS or Android, you have no business designing for web. Entirely different platform with different capabilities. Embrace reality and build simple effective products. Literally no one gives a shit about the arrows on your carousel or the border radius animation on a button. I just want to scroll and click and open new tabs.
scelerat 5y ago
It's not just appearance but also behavior. There are differences across browsers, OSes, and devices in how UI widgets work and inevitably the "custom" approach is a compromise in favor of the PM's personal workstation. And lest it be overlooked, the appearance of those widgets themselves, is a feature. They are easily identifiable by users of that platform as being something they can interact with and expect a predictable set of outcomes.
ehnto 5y ago
To be fair to "the system", it was developed over decades, much of it before design was even a consideration, and almost all of it from a time when modern designs would have been a pipe dream on given device resources.
pjc50 5y ago
The problem is, as always when talking about cross-platform development, is that you can have consistent widgets OR native widgets, because the native platforms have different look, feel, and interaction standards. Would it be great if everyone on the frontend could get together and agree what the native-to-browser widgets should look like and how they might be customized? Yes. Would the three warring browser manufacturers change their platforms to make web development easier and lighter for everyone, at the cost of platform uniqueness? No.
- jen20 5y ago
  > Would it be great if everyone on the frontend could get together and agree what the native-to-browser widgets should look like and how they might be customized? Yes. This would not be great at all. I want widgets on web pages to look like macOS system widgets on macOS, and to look like Windows system widgets on Windows. I want designers to lose the notion that it is their system style, and respect the fact that the browser is _my_ user agent, and therefore must respect _my_ preferences.
spc476 5y ago
I recently came across a web site that allows one to zoom into the content (it's a mapping site). Only the designers just assumed that everyone would have either a mouse with a scroll wheel, or a touch pad. Well, I have neither. And the developers of the site suggested "oh, just install this piece of software that allows you to bind some keyboard shortcuts to simulate a scroll wheel" instead of, you know, providing two damn buttons to zoom in and out! ("But ... but ... but ... adding those two buttons would destroy the aesthetic of the site!")
- bmeski 5y ago
  Bingo

timeon 5y ago

"a good rule of thumb to follow when designing your own controls: Don't." -- https://web.archive.org/web/20021009021738/http://www.iarchitect.com/visual.htm https://web.archive.org/web/20021009021738/http://www.iarchi...

laurent92 5y ago
And then, everyone has their custom buttons, sliders, switches, input fields, and everyone is happier for that…
- goatlover 5y ago
  Except for when those custom controls fail to implement all the features of the built-in ones, as the article details from various popular sites, at least back on 2016. But maybe at the end of 2021, all custom stuff is fully accessible and reimplements everything.
Andrew_nenakhov 5y ago
Now those are controls I haven't seen in a long time. Long time.
mekkkkkk 5y ago
Wow, that's a sobering read, thanks! It's funny to see how some of the common gripes with modern "flat" design was so obvious even before it became mainstream. Even though it (in my opinion) looks better today, the skeumorphic, brutal, beveled Windows 95 UI was probably the most obvious and clear interface I've ever used.

inasmuch 5y ago

As a product designer, I am and have long been looking for a company that will enable—hell, allow—me to design software that employs system standards. I can’t imagine I’m the only one. Problem is, most leadership doesn’t care about usability unless it affects marketability, which is less and less likely as people (users) become more comfortable with and accustomed to hopping between needlessly proprietary workflows and abstraction of crucial processes.* Often (usually?) designers also don’t, to be sure, but those like myself who do care are, like devs, up against unreasonable speed demands and interruptions that make it difficult to do our best, most thoughtful work. And though it may seem like design is higher up the totem pole, perhaps because it’s usually upriver from dev, in my experience, most companies see designers as whiny graphics monkeys, just as they may see devs as whiny code monkeys.+ It’s significantly more difficult and time-consuming to design novel functions and flows that conform to or complement existing standards than it is to draft a new system that need only make internal sense and may wantonly disregard the environment around it. This is why people like Electron, right? This is why people liked the internal combustion engine. * I’d like to see a study on how this kind of acontextualization of work tasks might exacerbate burnout. + How many companies are actually defined by great design these days (versus, say, great functionality)? Not even Apple seems to care about that anymore, as they seem eager outpace their software with their hardware, rather than creating any iconic or lasting designs. As “product design” has evolved to include software products, the discipline and its output have become just as mutable, and therefor disposable, and therefor ‘not worth’ the effort necessary to make good things, let alone great things.

deleted 5y ago

[deleted]