
Updates to form controls and focus - twapi
https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html
======
petilon
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_...](https://en.wikipedia.org/wiki/NeXTSTEP#/media/File:NeXTSTEP_desktop.png)

Flat is broken [1], Flat 2.0 is much better [2].

[1] [https://www.nngroup.com/articles/flat-ui-less-attention-
caus...](https://www.nngroup.com/articles/flat-ui-less-attention-cause-
uncertainty/)

[2] [https://www.nngroup.com/articles/flat-
design/](https://www.nngroup.com/articles/flat-design/)

~~~
chance_state
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
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:Window...](https://en.wikipedia.org/wiki/Windows_1.0#/media/File:Windows1.0.png)

~~~
userbinator
I really don't understand why that adjective is so commonly used to presumably
denote something positive. To me, "cleaner" evokes images of emptiness, like a
house you've just built and haven't started to actually use. The cleanest room
has nothing in it. I think that's precisely the opposite of what you want.

~~~
fludlight
Have you ever shopped for closets? Every major closet retailer has pictures of
their product holding a ridiculously small number of apparel.[1][2] I, and
especially my wife, have more than 4 shirts. I would like to see how a closet
design looks when full. Sure the nearly empty closet looks cleaner, but it
does not represent my use case, or that of anyone I know.

The same could be said for architectural renderings showing a handful of
visitors at a place designed to be crowded.

[1] [https://www.ikea.com/us/en/images/products/pax-corner-
wardro...](https://www.ikea.com/us/en/images/products/pax-corner-
wardrobe__0608667_PE683971_S5.JPG?f=xxxl)

[2] [https://www.closetsbydesign.com/wp-
content/uploads/2019/02/C...](https://www.closetsbydesign.com/wp-
content/uploads/2019/02/ClosetWI_AntiqueWhite_CBD1.jpg)

~~~
coribuci
> Have you ever shopped for closets? Every major closet retailer has pictures
> of their product holding a ridiculously small number of apparel.[1][2] I,
> and especially my wife, have more than 4 shirts. I would like to see how a
> closet design looks when full. Sure the nearly empty closet looks cleaner,
> but it does not represent my use case, or that of anyone I know.

Ok. That explains it. So the new UI's (or UX's) are like closets waiting to be
used. You just have to add a pipe (you need to figure out where because real
programmers don't ...) and a closet seat lid and it's ready for use.

------
pg_bot
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.

~~~
jlarocco
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.

~~~
clairity
css was designed for that exact use case. your user styles can override the
developer's (and the browser's) styles on a per-site basis.

so what the parent wishes for is what you should be wishing for too (that is,
to be able to style all form controls).

~~~
extra88
> your user styles can override the developer's (and the browser's) styles on
> a per-site basis.

Too bad Mac Safari is the only browser of significance that still has an
interface to load a user style sheet.

Yes, other browsers have extensions for using them including separate ones for
separate sites but how many people really want to create and manage those,
especially on mobile?

------
ocdtrekkie
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.

~~~
basch
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-
wind...](http://www.intelliadmin.com/index.php/2007/04/forgotten-windows-xp-
theme-watercolor/)

[http://www.shoplack.com/detail.aspx?id=1305](http://www.shoplack.com/detail.aspx?id=1305)

~~~
TomJansen
It really is remarkable how far ahead of it's time Watercolor really was, and
then they just killed it.

~~~
fenwick67
In an alternate timeline, they used watercolor and now XP-style guis are in
fashion.

~~~
basch
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...](https://www.deviantart.com/rainingskies/art/Windows-Whistler-
Build-2296-106558116)

Imagine that with these, something they absolutely could have accomplished at
the time. [https://www.theverge.com/2020/2/20/21146028/microsoft-
window...](https://www.theverge.com/2020/2/20/21146028/microsoft-
windows-10-new-icons-colorful-design-changes-updates-fluent-design-system)

------
zozbot234
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!

~~~
qwerty123457
^ it seriously looks they don't have a designer on this project and the end
result is programmer art

~~~
userbinator
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.)

------
rkagerer
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.

------
cosmotic
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
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.

~~~
userbinator
I'm pretty sure browsers in the 90s used native UI, or at least IE did.

~~~
ygra
Only for the select element. And that's a major reason why it was so broken
amidst all the browser-rendered content.

------
mdonahoe
“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

------
adamleithp
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
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.

------
ridiculous_fish
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
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.

------
hcarvalhoalves
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
They are restyling because it doesn't look "great", so Google follows the
trends to make restyling unnecessary.

~~~
millstone
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.

------
donatj
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.

------
megaman821
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.

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

~~~
Waterluvian
Got a link or reference for what you're speaking of?

~~~
srgpqt
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
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.

------
keithnz
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"

------
herpderperator
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_
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.

------
nojvek
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.

------
igreulich
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.

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

~~~
ygra
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.

------
PieUser
This new redesign is gorgeous!

------
awinter-py
I wonder what will replace the web

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

