17 ms·

Updates to form controls and focus

171 points by twapi 7y ago

ocdtrekkie 7y ago
It's ironic to me after being universally panned for years with their own browsers, Microsoft is making such leaps and bounds of improvement to Google's browser, to the point that even Google wants to bring it back upstream.
- magicalist 7y ago
  > It's ironic to me after being universally panned for years with their own browsers, Microsoft is making such leaps and bounds of improvement to Google's browser, to the point that even Google wants to bring it back upstream. Yes, what a crazy world we live in that Microsoft didn't start collaborating on Chromium by implementing stuff no one wanted to land. I'm not sure what this comment is getting at. Why would it be surprising that Edge engineering would make real contributions?
- basch 7y ago
  I always get a kick out of how modern design has decided to finally coalesced on a hybrid of Watercolor XP and Encarta 2000. Microsoft could have just stick with that and saved 2 decades of redesigns, but then XP/OSX came out with everything covered in shiny plastic. Oh Luna/Aqua how you set us back. The lost decades. http://www.intelliadmin.com/index.php/2007/04/forgotten-windows-xp-theme-watercolor/ http://www.intelliadmin.com/index.php/2007/04/forgotten-wind... http://www.shoplack.com/detail.aspx?id=1305 http://www.shoplack.com/detail.aspx?id=1305
  - TomJansen 7y ago
    It really is remarkable how far ahead of it's time Watercolor really was, and then they just killed it.
    - fenwick67 7y ago
      In an alternate timeline, they used watercolor and now XP-style guis are in fashion.
      - basch 7y ago
        If they had a consistent gray/white/tan everywhere, and modern icons, it would look en vogue today. https://www.deviantart.com/rainingskies/art/Windows-Whistler-Build-2296-106558116 https://www.deviantart.com/rainingskies/art/Windows-Whistler... Imagine that with these, something they absolutely could have accomplished at the time. https://www.theverge.com/2020/2/20/21146028/microsoft-windows-10-new-icons-colorful-design-changes-updates-fluent-design-system https://www.theverge.com/2020/2/20/21146028/microsoft-window...
  - rmsaksida 7y ago
    Watercolor was my favorite XP theme! I would never have remembered it if not for seeing it mentioned here. I used to find it elegant compared to other themes. On the Linux side, my favorite theme was Red Hat's Bluecurve. People still port it to modern DEs, and it still looks good. I think it was ahead of its time, but it never really caught on. https://en.wikipedia.org/wiki/Bluecurve https://en.wikipedia.org/wiki/Bluecurve https://cn.pling.com/img/hive/content-pre1/148927-1.png https://cn.pling.com/img/hive/content-pre1/148927-1.png
    - PetitPrince 7y ago
      My teenage self spent a significant amount of time using custom-made Windows XP theme ("Visual Style") (by hacking UXTheme.dll ; me being an ignorant teenager I probably followed this guide [1] ). Most of them were gaudy [2] but some of theme I still find attractive even nowadays [3][4]. [1] https://lifehacker.com/how-to-use-custom-windows-visual-styles-5056544 https://lifehacker.com/how-to-use-custom-windows-visual-styl... [2] https://www.deviantart.com/unr3al/art/Classix-10k-2-1883531 https://www.deviantart.com/unr3al/art/Classix-10k-2-1883531 [3] https://www.deviantart.com/fugacious/art/HmmXP-2-0-1-5514034 https://www.deviantart.com/fugacious/art/HmmXP-2-0-1-5514034 [4] https://www.deviantart.com/b0se/art/Codename-Opus-3-0-9240396 https://www.deviantart.com/b0se/art/Codename-Opus-3-0-924039...
      - basch 7y ago
        There was also the never released Royale Noir, Royale Blue, Embedded, and Zune themes, which were even signed and didnt need uxtheme.dll patched. https://www.istartedsomething.com/20061029/royale-noir/ https://www.istartedsomething.com/20061029/royale-noir/ https://www.askvg.com/download-official-windows-xp-themes-no-uxtheme-patching-required/ https://www.askvg.com/download-official-windows-xp-themes-no...
  - kalleboo 7y ago
    Watercolor was a fantastic theme. I've been a Mac guy since birth, but at the time I used a Watercolor theme on my Mac because it was just that nice
- chrismorgan 7y ago
  This is exactly what I hoped would happen when they said they were switching engine—because Chrome was just so bad on Windows in quite a few ways. I’m still not sold on some aspects of it, thinking legacy Edge styling was better, but it’s a vast improvement that feels much closer to native and proper. New Edge actually feels quite decent. Now I just want the text rendering fixed the rest of the way, because Chrome’s is still poor in nativeness (though again Edge has already improved it further).
zozbot234 7y ago
The accessibility improvements are very good news of course, but the visual redesign looks extremely amateurish and lacking in 'depth' compared to what was there before. It reminds me of GUI applications in the late 1980s, which had to cope with very limited color support. We can do a lot better nowadays!
- XCSme 7y ago
  I have the same feeling, I am really not impressed with the new designs, they feel dull and lacking some guiding elements, I don't really want to click them.
- qwerty123457 7y ago
  ^ it seriously looks they don't have a designer on this project and the end result is programmer art
  - zozbot234 7y ago
    I think what they need is good computer graphicians, not coders or designers.
  - userbinator 7y ago
    In my experience, "programmer art" is more usable and utilitarian, and it's "designer art" that looks "clean" but isn't very usable (as others here have already noted.)
pg_bot 7y ago
The problem that I fear is that most of this work will go to waste since it is difficult to apply your own custom styles to the default experience for most input types. Instead of having to reinvent a date picker for every project I would love to be able to use the built in types, but they are usually too inflexible or have made suboptimal aesthetic choices. Is it too much to ask to be able to style a <select>, increase the size of the date picker, or to add animated stripes to a progress meter? I want it to be easy to make the web both beautiful and accessible but am glad for the slow and steady progress.
- robdodson 7y ago
  Post author here Totally hear you on the need to make the elements styleable. That's the next phase of work that's being undertaken, specifically starting with <select>. Take a look at the talk that's linked from the article for a more in-depth explanation of the future phases.
  - benfrain 7y ago
    Some nice updates but I admit I was just skipping down to the part where I could style them. For developers, there’s little we can do with this. You’ve changed them. They are better but imagine devs will get a whole lot more excited when we can more easily visually bend them to the needs of our projects/apps. Do you have a vague idea when that should be?
- jlarocco 7y ago
  I understand how that could be frustrating, but as a user I find styled form elements pretty annoying. I would love to have control for myself (i.e. be able to customize Chromium's built-in date picker that gets used everywhere), and limit (or prevent) sites from customizing it themselves. I feel like I have a better understanding of what's usable for myself than an arbitrary web dev. But I also feel it's wishful thinking. Maybe Opera would have done something like that back in the day when they made their own browser, but I'm not hopeful it'll get into Chrome or Firefox any time soon.
  - 7y ago
adamleithp 7y ago
Only thing notable here is the date-picker redesign... Nice. I'm still waiting on a combined date + time picker.. Individually using both to accomplish one thing is such pain to use.
- wolfgang42 7y ago
  Have you seen <input type="datetime-local"> ? I’m not sure how good the browser support for it is yet but you could probably polyfill pretty easily.
rkagerer 7y ago
I think this is great news! A couple particularly welcome adjustments are the more visible focus indicator, and keyboard-friendly color picker. I'm glad they accomplished the touch improvements without making any of the controls bigger (at least not in their inactive, "collapsed" state). My only nitpick is the coloring dissonance between "input" controls; some are black (text fields, dropdowns, buttons, etc.) while others are blue (checkmark, radio button, slider). Also feel the round shape of the new sliders looks less appealing, but that's utterly subjective.
hcarvalhoalves 7y ago
Unfortunately this effort will barely matter since most pages re-style form controls, ignoring one of the foundations of good UX (familiarity). We are in 2020 and web forms are still a mess. We can hope better / more familiar default form controls will decrease this demand for customization a bit.
- est31 7y ago
  They are restyling because it doesn't look "great", so Google follows the trends to make restyling unnecessary.
  - millstone 7y ago
    It was never necessary. They restyle because it's easy and fun, and it gives the site greater brand coherence in static screenshots. And they'll continue to do it after this redesign.
Solvitieg 7y ago
After the "autocomplete" disaster, I'm very weary any time the Chromium team makes broad changes to form and form controls.
- Waterluvian 7y ago
  Got a link or reference for what you're speaking of?
  - srgpqt 7y ago
    He’s likely talking about how autocomplete=“off” is now ignored, and Chrome will “helpfully” display its own autocomplete on any textbox that look like address fields, which results in Chrome’s autocomplete being shown on top of the site’s own autocomplete. Progress.
    - XCSme 7y ago
      Biggest problem for me when working on a web game was that it was autocompleting the password input for creating a new room with the password for your account (from the login screen). I found no way to disable their autocomplete.
  - DCoder 7y ago
    https://www.reddit.com/r/programming/comments/ar1qj1/_/egl52wk/ https://www.reddit.com/r/programming/comments/ar1qj1/_/egl52...
cosmotic 7y ago
The proposals put forth in the article are lacking any affordances common place in the nineties and obliterated from "modern" and "beautiful" "design systems" of the future. Why has so much work been put into "moving forward" to a dystopian unusable future instead of backpedaling back to a past where everything was empirically more usable? I would prefer specific descriptions of changes in articles like this. Being "modern" or "beautiful" mean thing to me except "probably work poorly and look worse compared to the same thing twenty years ago". For example, "The new theme is more consistent with Windows 10 and iOS than the previous look and feel. However, it still doesn't perfectly align with native controls so users will still have trouble learning an adapting." I don't see how 100% native control implementations isn't the target here. Developers and designers wanting to steer the look of a control toward their application or website will still have the same amount of work cut out for them and will still have to fight an uphill battle to keep their applications looking the way they want. Developers and designers wanting an as-native-looking-and-feeling control will now have to augment the new designs to steer them toward native, something the user agent should be doing.
- jimrandomh 7y ago
  Using native control implementations in a browser isn't really an option. They make a lot of assumptions about how rendering works and how input events are routed which don't hold up inside a browser.
  - jfkebwjsbx 7y ago
    I guess the parent was referring to re-implementing them within the browser. In other words, not using the actual native one but creating a fake one that looks and behaves like the native one.
  - saagarjha 7y ago
    WebKit uses native controls on macOS. I think it does when GTK is available, too.
  - userbinator 7y ago
    I'm pretty sure browsers in the 90s used native UI, or at least IE did.
petilon 7y ago
It is unfortunate that the design of these controls give you no clues whatsoever as to how to interact with them -- or whether you can interact with them at all. Compare this to NeXTSTEP from the late 1980s: https://en.wikipedia.org/wiki/NeXTSTEP#/media/File:NeXTSTEP_desktop.png https://en.wikipedia.org/wiki/NeXTSTEP#/media/File:NeXTSTEP_... Flat is broken [1], Flat 2.0 is much better [2]. [1] https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ https://www.nngroup.com/articles/flat-ui-less-attention-caus... [2] https://www.nngroup.com/articles/flat-design/ https://www.nngroup.com/articles/flat-design/
- chance_state 7y ago
  Isn't there a trade-off though between always knowing what a button does on the first guess and having to misclick once or twice but then having a clean UI forever? I prefer the latter.
  - petilon 7y ago
    The notion that removing all shades and shadows is "cleaner" is a fad. This fad will end, and the sooner it ends the better it is for all of us. Windows 1.0 doesn't have shades and shadows. It is "cleaner" in that sense than NeXTSTEP. But few will argue that it is more beautiful. Here's Windows 1.0: https://en.wikipedia.org/wiki/Windows_1.0#/media/File:Windows1.0.png https://en.wikipedia.org/wiki/Windows_1.0#/media/File:Window...
    - rkagerer 7y ago
      Having never used it, I didn't realize Windows 1.0 had "responsive" menu bars!
    - robbrown451 7y ago
      I don't think anyone claimed that lack of shades and shadows automatically makes something beautiful. NeXTSTEP was simply designed by people who had more experience and taste in design. Also, that windows screenshot was when they were using sort of a hybrid "character mode" to display a graphical interface, which is quite a limitation. I like some shading and 3d-ness, but it can be taken too far.
PieUser 7y ago
This new redesign is gorgeous!
jimmaswell 7y ago
What an utter waste of time and resources. It looked fine before and doesn't look any better now. Worse if anything.
keithnz 7y ago
the filled in slider seems a problem to me. It gets used for situations where it doesn't mean "everything up to this value" it might mean "everything down to this value" or "exactly this value"
donatj 7y ago
Those new sliders are horrible. They don't give you an accurate idea of their value, or even that they are to be interacted with. Very bad.
mdonahoe 7y ago
“In an effort to help centralize this feedback and include as many developers as possible in the standards process, the team at Edge have created open-ui.org.” I did not realize these two posts were related. The open-ui website looks pretty alpha. I’m all for improving the standards though
ridiculous_fish 7y ago
How does Chrome ensure that changing these designs does not regress site layouts? For example, the date controls now have new affordances (the calendar and clock buttons) which occupy more space - won't that break some sites? I recall from AppKit days that replacing the system label font (San Francisco) regressed layouts, and there was some back-and-forth with designers to ensure the new font did not have greater advances.
- chrismorgan 7y ago
  Firefox is experimenting with changes that are rather similar in various regards. At this time it’s increasing checkboxes and radio buttons from 13×13 to 17×17, among other changes, and I find it’s breaking a lot of things, though normally not severely. Checkboxes have been 13×13 for so long that lots of layouts have assumed it. https://bugzilla.mozilla.org/show_bug.cgi?id=1381938 https://bugzilla.mozilla.org/show_bug.cgi?id=1381938 is a good starting point if you’re interested in this.
megaman821 7y ago
Any hope of select multiple not be a usability disaster? It is has been almost 10 years since I have used the native widget on that one.
awinter-py 7y ago
I wonder what will replace the web
0x0 7y ago
I thought they announced no new Chrome major releases planned for quite a while?
- ygra 7y ago
  Those changes have been in the pipeline for a while, courtesy of Microsoft's Chromium-based Edge team. They've been in Edge for quite some time already, so Chrome only has to ship them as well.
herpderperator 7y ago
I didn't even notice the checkbox on the right. It's just a white square with a border. The previous one is very well-known. That's a real shame.
- Cthulhu_ 7y ago
  Wouldn't that be because you are used to the style of checkboxes? I mean usually a checkbox would be accompanied by a label as well, which adds to the 'this is a checkbox' vibe.
igreulich 7y ago
For websites, as opposed to webapps, this might be fine. But a webapp will pretty nearly alawys want to look the same cross platform, sort of forcing styling. I get it, they didn't like what they looked like before, because reasons. But I wonder what percentage of sites and apps were using unstyled controls.
nojvek 7y ago
styling native input elements is a major pain in the ass. I would say input is probably the most styleable native input. Checkboxes, radiobuttons, select, file input need a lot of fighting to style them. In many cases, what ends up happening is we create a styled div, and have a transparent input behind it to do the right thing. The web form elements in that way just feels quite broken. There's a reason why there are tons of design systems that replicate a number of form elements using plain div/span elements with css and javascript. https://github.com/alexpate/awesome-design-systems https://github.com/alexpate/awesome-design-systems I wish the people designing the spec weren't so disconnected from reality of what people actually want to do with the web. A lot of the problems can be easily solved by giving more styling ability to native form elements and extensibility.

171 points by twapi 7y ago

It's ironic to me after being universally panned for years with their own browsers, Microsoft is making such leaps and bounds of improvement to Google's browser, to the point that even Google wants to bring it back upstream.

magicalist 7y ago
> It's ironic to me after being universally panned for years with their own browsers, Microsoft is making such leaps and bounds of improvement to Google's browser, to the point that even Google wants to bring it back upstream. Yes, what a crazy world we live in that Microsoft didn't start collaborating on Chromium by implementing stuff no one wanted to land. I'm not sure what this comment is getting at. Why would it be surprising that Edge engineering would make real contributions?
basch 7y ago
I always get a kick out of how modern design has decided to finally coalesced on a hybrid of Watercolor XP and Encarta 2000. Microsoft could have just stick with that and saved 2 decades of redesigns, but then XP/OSX came out with everything covered in shiny plastic. Oh Luna/Aqua how you set us back. The lost decades. http://www.intelliadmin.com/index.php/2007/04/forgotten-windows-xp-theme-watercolor/ http://www.intelliadmin.com/index.php/2007/04/forgotten-wind... http://www.shoplack.com/detail.aspx?id=1305 http://www.shoplack.com/detail.aspx?id=1305
- TomJansen 7y ago
  It really is remarkable how far ahead of it's time Watercolor really was, and then they just killed it.
  - fenwick67 7y ago
    In an alternate timeline, they used watercolor and now XP-style guis are in fashion.
    - basch 7y ago
      If they had a consistent gray/white/tan everywhere, and modern icons, it would look en vogue today. https://www.deviantart.com/rainingskies/art/Windows-Whistler-Build-2296-106558116 https://www.deviantart.com/rainingskies/art/Windows-Whistler... Imagine that with these, something they absolutely could have accomplished at the time. https://www.theverge.com/2020/2/20/21146028/microsoft-windows-10-new-icons-colorful-design-changes-updates-fluent-design-system https://www.theverge.com/2020/2/20/21146028/microsoft-window...
- rmsaksida 7y ago
  Watercolor was my favorite XP theme! I would never have remembered it if not for seeing it mentioned here. I used to find it elegant compared to other themes. On the Linux side, my favorite theme was Red Hat's Bluecurve. People still port it to modern DEs, and it still looks good. I think it was ahead of its time, but it never really caught on. https://en.wikipedia.org/wiki/Bluecurve https://en.wikipedia.org/wiki/Bluecurve https://cn.pling.com/img/hive/content-pre1/148927-1.png https://cn.pling.com/img/hive/content-pre1/148927-1.png
  - PetitPrince 7y ago
    My teenage self spent a significant amount of time using custom-made Windows XP theme ("Visual Style") (by hacking UXTheme.dll ; me being an ignorant teenager I probably followed this guide [1] ). Most of them were gaudy [2] but some of theme I still find attractive even nowadays [3][4]. [1] https://lifehacker.com/how-to-use-custom-windows-visual-styles-5056544 https://lifehacker.com/how-to-use-custom-windows-visual-styl... [2] https://www.deviantart.com/unr3al/art/Classix-10k-2-1883531 https://www.deviantart.com/unr3al/art/Classix-10k-2-1883531 [3] https://www.deviantart.com/fugacious/art/HmmXP-2-0-1-5514034 https://www.deviantart.com/fugacious/art/HmmXP-2-0-1-5514034 [4] https://www.deviantart.com/b0se/art/Codename-Opus-3-0-9240396 https://www.deviantart.com/b0se/art/Codename-Opus-3-0-924039...
    - basch 7y ago
      There was also the never released Royale Noir, Royale Blue, Embedded, and Zune themes, which were even signed and didnt need uxtheme.dll patched. https://www.istartedsomething.com/20061029/royale-noir/ https://www.istartedsomething.com/20061029/royale-noir/ https://www.askvg.com/download-official-windows-xp-themes-no-uxtheme-patching-required/ https://www.askvg.com/download-official-windows-xp-themes-no...
- kalleboo 7y ago
  Watercolor was a fantastic theme. I've been a Mac guy since birth, but at the time I used a Watercolor theme on my Mac because it was just that nice
chrismorgan 7y ago
This is exactly what I hoped would happen when they said they were switching engine—because Chrome was just so bad on Windows in quite a few ways. I’m still not sold on some aspects of it, thinking legacy Edge styling was better, but it’s a vast improvement that feels much closer to native and proper. New Edge actually feels quite decent. Now I just want the text rendering fixed the rest of the way, because Chrome’s is still poor in nativeness (though again Edge has already improved it further).

zozbot234 7y ago

The accessibility improvements are very good news of course, but the visual redesign looks extremely amateurish and lacking in 'depth' compared to what was there before. It reminds me of GUI applications in the late 1980s, which had to cope with very limited color support. We can do a lot better nowadays!

XCSme 7y ago
I have the same feeling, I am really not impressed with the new designs, they feel dull and lacking some guiding elements, I don't really want to click them.
qwerty123457 7y ago
^ it seriously looks they don't have a designer on this project and the end result is programmer art
- zozbot234 7y ago
  I think what they need is good computer graphicians, not coders or designers.
- userbinator 7y ago
  In my experience, "programmer art" is more usable and utilitarian, and it's "designer art" that looks "clean" but isn't very usable (as others here have already noted.)

pg_bot 7y ago

The problem that I fear is that most of this work will go to waste since it is difficult to apply your own custom styles to the default experience for most input types. Instead of having to reinvent a date picker for every project I would love to be able to use the built in types, but they are usually too inflexible or have made suboptimal aesthetic choices. Is it too much to ask to be able to style a <select>, increase the size of the date picker, or to add animated stripes to a progress meter? I want it to be easy to make the web both beautiful and accessible but am glad for the slow and steady progress.

robdodson 7y ago
Post author here Totally hear you on the need to make the elements styleable. That's the next phase of work that's being undertaken, specifically starting with <select>. Take a look at the talk that's linked from the article for a more in-depth explanation of the future phases.
- benfrain 7y ago
  Some nice updates but I admit I was just skipping down to the part where I could style them. For developers, there’s little we can do with this. You’ve changed them. They are better but imagine devs will get a whole lot more excited when we can more easily visually bend them to the needs of our projects/apps. Do you have a vague idea when that should be?
jlarocco 7y ago
I understand how that could be frustrating, but as a user I find styled form elements pretty annoying. I would love to have control for myself (i.e. be able to customize Chromium's built-in date picker that gets used everywhere), and limit (or prevent) sites from customizing it themselves. I feel like I have a better understanding of what's usable for myself than an arbitrary web dev. But I also feel it's wishful thinking. Maybe Opera would have done something like that back in the day when they made their own browser, but I'm not hopeful it'll get into Chrome or Firefox any time soon.
- 7y ago

adamleithp 7y ago

Only thing notable here is the date-picker redesign... Nice. I'm still waiting on a combined date + time picker.. Individually using both to accomplish one thing is such pain to use.

wolfgang42 7y ago
Have you seen <input type="datetime-local"> ? I’m not sure how good the browser support for it is yet but you could probably polyfill pretty easily.

rkagerer 7y ago

I think this is great news! A couple particularly welcome adjustments are the more visible focus indicator, and keyboard-friendly color picker. I'm glad they accomplished the touch improvements without making any of the controls bigger (at least not in their inactive, "collapsed" state). My only nitpick is the coloring dissonance between "input" controls; some are black (text fields, dropdowns, buttons, etc.) while others are blue (checkmark, radio button, slider). Also feel the round shape of the new sliders looks less appealing, but that's utterly subjective.

hcarvalhoalves 7y ago

Unfortunately this effort will barely matter since most pages re-style form controls, ignoring one of the foundations of good UX (familiarity). We are in 2020 and web forms are still a mess. We can hope better / more familiar default form controls will decrease this demand for customization a bit.

est31 7y ago
They are restyling because it doesn't look "great", so Google follows the trends to make restyling unnecessary.
- millstone 7y ago
  It was never necessary. They restyle because it's easy and fun, and it gives the site greater brand coherence in static screenshots. And they'll continue to do it after this redesign.

Solvitieg 7y ago

After the "autocomplete" disaster, I'm very weary any time the Chromium team makes broad changes to form and form controls.

Waterluvian 7y ago
Got a link or reference for what you're speaking of?
- srgpqt 7y ago
  He’s likely talking about how autocomplete=“off” is now ignored, and Chrome will “helpfully” display its own autocomplete on any textbox that look like address fields, which results in Chrome’s autocomplete being shown on top of the site’s own autocomplete. Progress.
  - XCSme 7y ago
    Biggest problem for me when working on a web game was that it was autocompleting the password input for creating a new room with the password for your account (from the login screen). I found no way to disable their autocomplete.
- DCoder 7y ago
  https://www.reddit.com/r/programming/comments/ar1qj1/_/egl52wk/ https://www.reddit.com/r/programming/comments/ar1qj1/_/egl52...

cosmotic 7y ago

The proposals put forth in the article are lacking any affordances common place in the nineties and obliterated from "modern" and "beautiful" "design systems" of the future. Why has so much work been put into "moving forward" to a dystopian unusable future instead of backpedaling back to a past where everything was empirically more usable? I would prefer specific descriptions of changes in articles like this. Being "modern" or "beautiful" mean thing to me except "probably work poorly and look worse compared to the same thing twenty years ago". For example, "The new theme is more consistent with Windows 10 and iOS than the previous look and feel. However, it still doesn't perfectly align with native controls so users will still have trouble learning an adapting." I don't see how 100% native control implementations isn't the target here. Developers and designers wanting to steer the look of a control toward their application or website will still have the same amount of work cut out for them and will still have to fight an uphill battle to keep their applications looking the way they want. Developers and designers wanting an as-native-looking-and-feeling control will now have to augment the new designs to steer them toward native, something the user agent should be doing.

jimrandomh 7y ago
Using native control implementations in a browser isn't really an option. They make a lot of assumptions about how rendering works and how input events are routed which don't hold up inside a browser.
- jfkebwjsbx 7y ago
  I guess the parent was referring to re-implementing them within the browser. In other words, not using the actual native one but creating a fake one that looks and behaves like the native one.
- saagarjha 7y ago
  WebKit uses native controls on macOS. I think it does when GTK is available, too.
- userbinator 7y ago
  I'm pretty sure browsers in the 90s used native UI, or at least IE did.

petilon 7y ago

It is unfortunate that the design of these controls give you no clues whatsoever as to how to interact with them -- or whether you can interact with them at all. Compare this to NeXTSTEP from the late 1980s: https://en.wikipedia.org/wiki/NeXTSTEP#/media/File:NeXTSTEP_desktop.png https://en.wikipedia.org/wiki/NeXTSTEP#/media/File:NeXTSTEP_... Flat is broken [1], Flat 2.0 is much better [2]. [1] https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ https://www.nngroup.com/articles/flat-ui-less-attention-caus... [2] https://www.nngroup.com/articles/flat-design/ https://www.nngroup.com/articles/flat-design/

chance_state 7y ago
Isn't there a trade-off though between always knowing what a button does on the first guess and having to misclick once or twice but then having a clean UI forever? I prefer the latter.
- petilon 7y ago
  The notion that removing all shades and shadows is "cleaner" is a fad. This fad will end, and the sooner it ends the better it is for all of us. Windows 1.0 doesn't have shades and shadows. It is "cleaner" in that sense than NeXTSTEP. But few will argue that it is more beautiful. Here's Windows 1.0: https://en.wikipedia.org/wiki/Windows_1.0#/media/File:Windows1.0.png https://en.wikipedia.org/wiki/Windows_1.0#/media/File:Window...
  - rkagerer 7y ago
    Having never used it, I didn't realize Windows 1.0 had "responsive" menu bars!
  - robbrown451 7y ago
    I don't think anyone claimed that lack of shades and shadows automatically makes something beautiful. NeXTSTEP was simply designed by people who had more experience and taste in design. Also, that windows screenshot was when they were using sort of a hybrid "character mode" to display a graphical interface, which is quite a limitation. I like some shading and 3d-ness, but it can be taken too far.

PieUser 7y ago

This new redesign is gorgeous!

jimmaswell 7y ago

What an utter waste of time and resources. It looked fine before and doesn't look any better now. Worse if anything.

keithnz 7y ago

the filled in slider seems a problem to me. It gets used for situations where it doesn't mean "everything up to this value" it might mean "everything down to this value" or "exactly this value"

donatj 7y ago

Those new sliders are horrible. They don't give you an accurate idea of their value, or even that they are to be interacted with. Very bad.

mdonahoe 7y ago

“In an effort to help centralize this feedback and include as many developers as possible in the standards process, the team at Edge have created open-ui.org.” I did not realize these two posts were related. The open-ui website looks pretty alpha. I’m all for improving the standards though

ridiculous_fish 7y ago

How does Chrome ensure that changing these designs does not regress site layouts? For example, the date controls now have new affordances (the calendar and clock buttons) which occupy more space - won't that break some sites? I recall from AppKit days that replacing the system label font (San Francisco) regressed layouts, and there was some back-and-forth with designers to ensure the new font did not have greater advances.

chrismorgan 7y ago
Firefox is experimenting with changes that are rather similar in various regards. At this time it’s increasing checkboxes and radio buttons from 13×13 to 17×17, among other changes, and I find it’s breaking a lot of things, though normally not severely. Checkboxes have been 13×13 for so long that lots of layouts have assumed it. https://bugzilla.mozilla.org/show_bug.cgi?id=1381938 https://bugzilla.mozilla.org/show_bug.cgi?id=1381938 is a good starting point if you’re interested in this.

megaman821 7y ago

Any hope of select multiple not be a usability disaster? It is has been almost 10 years since I have used the native widget on that one.

awinter-py 7y ago

I wonder what will replace the web

0x0 7y ago

I thought they announced no new Chrome major releases planned for quite a while?

ygra 7y ago
Those changes have been in the pipeline for a while, courtesy of Microsoft's Chromium-based Edge team. They've been in Edge for quite some time already, so Chrome only has to ship them as well.

herpderperator 7y ago

I didn't even notice the checkbox on the right. It's just a white square with a border. The previous one is very well-known. That's a real shame.

Cthulhu_ 7y ago
Wouldn't that be because you are used to the style of checkboxes? I mean usually a checkbox would be accompanied by a label as well, which adds to the 'this is a checkbox' vibe.

igreulich 7y ago

For websites, as opposed to webapps, this might be fine. But a webapp will pretty nearly alawys want to look the same cross platform, sort of forcing styling. I get it, they didn't like what they looked like before, because reasons. But I wonder what percentage of sites and apps were using unstyled controls.

nojvek 7y ago

styling native input elements is a major pain in the ass. I would say input is probably the most styleable native input. Checkboxes, radiobuttons, select, file input need a lot of fighting to style them. In many cases, what ends up happening is we create a styled div, and have a transparent input behind it to do the right thing. The web form elements in that way just feels quite broken. There's a reason why there are tons of design systems that replicate a number of form elements using plain div/span elements with css and javascript. https://github.com/alexpate/awesome-design-systems https://github.com/alexpate/awesome-design-systems I wish the people designing the spec weren't so disconnected from reality of what people actually want to do with the web. A lot of the problems can be easily solved by giving more styling ability to native form elements and extensibility.