Updates to form controls and focus | Hacker News Reader

Updates to form controls and focus

blog.chromium.org

171 pointstwapi74 comments

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

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

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

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

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.

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

Having never used it, I didn't realize Windows 1.0 had "responsive" menu bars!

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.

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.

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

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

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

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

It will not end so soon. They just rediscovered windows 1.0 and there is a lobg way till 95.

> Windows 10 doesn't have shades and shadows. It is "cleaner" in that sense than NeXTSTEP. But few will argue that it is more beautiful.

I fixed it for you.

Similar for Athena X11 widgets, no shades and shadows. Where Motif had them everywhere.

What does a "clean UI" mean, and why would that be worth having a confusing UI that leads people to mislick?

Why would there be a fundamental tradeoff between whatever "clean" means, and being confusing? Surely it's possible to build a UI that isn't confusing, but also has whatever positives a "clean UI" has?

It means less visual business, making it easy to pick your way through it. I find all those borders and shades in the NEXT interface distracting and I bet overall it slows people down when interacting with it. Besides, ideally, most elements should be intereactive in some way anyway. Hovering over them should provide enough indication of what type of interaction is available.

It's not distracting - it's actively helpful. It helps you understand how the parts of the user interface are separated, and so guides in how to interact.

I yearn for the menus of Windows 98 whenever I'm forced to use a new/updated ios app, and don't understand where to swipe to get it do to what I want.

Back then, software even came with manuals, and often a useful "help" menu right in the application. Now, when you google "how to x in app y", you end up on some spammy help-page that spends 5 paragraphs (with ads) to tell you to "pinch and then swipe" or whatever.

You "bet" it slows people down? This is a testable hypothesis. Empirical experiments along these have found the opposite, that the flat UIs they tested slowed people down by 22% compared with the same UI with stronger clickability signifiers: https://www.nngroup.com/articles/flat-ui-less-attention-caus...

Do you have any contrary empirical evidence?

In most apps nearly everything is interactive

It's probably better to specify what isn't interactive rather than specifying what is

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.

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.

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?

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.

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

CSS was designed for that in the late 90s when css barely (?) did any layout. That isn’t really true anymore however

> 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?

Same with fonts, and colors, and text size, and scroll behavior, and on and on. Back when dinosaurs roamed the earth, web sites published hyperTEXT and the user agent (browser) operating on behalf of the user, rendered the page according to the user's preferences. I remember how cool it was to configure it so every web site rendered in white text over a brick wall background! Slowly browsers added HTML tag after tag and CSS to give more and more layout and visual control over to the web site publisher and less to the user. Today, stylistic user preferences are a relic of the past, as browsers have given everything away to the publisher.

I agree it's wishful thinking. Sadly, web publishers have gotten used to all this control and expect the browser to be some kind of pixel-perfect renderer like Photoshop, and there's no push from end users to have this kind of user configurability anymore.

Some people are saying “user styles let you do this”, but it’s not actually true: take a textarea, for example; if you set its background-color, the browser discards its regular textarea appearance (which might have a special border colour and style and radius) and leaves you with what’s actually specified. Expressed very approximately, adjusting various properties implies `appearance: none`.

And you can’t get it back. `background-color: initial`? Nope, no native appearance. `appearance: textarea !important`? No go. `background-color: f(env(x))` (a stupid way of getting a runtime-invalid value due to a bad spec, see https://github.com/w3c/csswg-drafts/issues/3792 for details)? Nada.

You could provide your own styles for form elements, but you can’t use user styles to retain native form element styling.

I think it is great that they are working on the default styles. Browser stylesheets feel almost as if they were frozen in time to the point where you realistically have to overwrite them.

My hope would be that one day the default styles are so good that it is an option again to not overwrite them.

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.

> 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?

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.shoplack.com/detail.aspx?id=1305

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

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

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

Imagine that with these, something they absolutely could have accomplished at the time. https://www.theverge.com/2020/2/20/21146028/microsoft-window...

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://cn.pling.com/img/hive/content-pre1/148927-1.png

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

[2] https://www.deviantart.com/unr3al/art/Classix-10k-2-1883531

[3] https://www.deviantart.com/fugacious/art/HmmXP-2-0-1-5514034

[4] https://www.deviantart.com/b0se/art/Codename-Opus-3-0-924039...

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.askvg.com/download-official-windows-xp-themes-no...

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

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

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!

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.

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

I think what they need is good computer graphicians, not coders or designers.

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

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.

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.

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.

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.

WebKit uses native controls on macOS. I think it does when GTK is available, too.

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

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

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?

My personal theory is that it is exactly what it says it is: they are slowly making things unusable, because they want to take control away from you. Like all the other UI dark patterns and such, they don't want you to think. They don't want you to be able to make your own choices (remember when UIs were actually customisable? Now there's disturbing amounts of praise for only "now we have a dark theme!") They want to extract as much "value" as they can out of you. They want you to be the used.

“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

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.

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.

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.

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 is a good starting point if you’re interested in this.

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.

They are restyling because it doesn't look "great", so Google follows the trends to make restyling unnecessary.

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.

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.

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.

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

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

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.

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.

https://www.reddit.com/r/programming/comments/ar1qj1/_/egl52...

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"

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.

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.

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

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.

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.

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

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.

This new redesign is gorgeous!

I wonder what will replace the web

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

Reply on news.ycombinator.com