
Improving Form Controls in Microsoft Edge and Chromium - coldtea
https://blogs.windows.com/msedgedev/2019/10/15/form-controls-microsoft-edge-chromium/
======
hudo
The whole Metro/Modern UI is in like 90% cases much much uglier than whatever
was before, and even after years of using them, I just can't get used to them.
Every time I see a dropdown, text box or check box of new Modern UI, I think
there's some CSS missing or page didn't render correctly. Looks cheap and
ugly.

Then google comes and do some version of Modern UI on web and Android, which
looks and feel miles better than MSFT!

~~~
dmix
The input/select boxes are certainly a step backwards visually.

The double border (thick black + thin white) is good for
usability/accessibility but it's just ugly and also draws a ton of attention
to itself on whatever page it's on.

~~~
ygra
I understood it as that the thick border is just the focus highlight.

------
akersten
Most of them look better than they did. The combobox is still a mess though.
It's always been one of my least favorite controls, mostly because of the UI.
Now, the flyout menu is detached from the base control, making it worse.

It would be good for the design team here to take a look at how popular web
frameworks have implemented dropdowns/combos, and take some inspiration.
Things like the button morphing into the overall list, and losing the dividing
line between the bottom of the entry field and the list of options.

The focus highlighting is excessive in my opinion and will lead more designers
to disable it - not a great step for accessibility. Maybe put the high
contrast version behind a browser option/high contrast mode for the system, so
it's a little quieter.

In any case, happy to see progress on modernizing native form elements. But I
hope these don't make it upstream without some significant UI polish.

------
yoz-y
Not a fan of most of these:

\- They are all extremely inconsistent

\- Checkbox is the only one with 2pt outline

\- Padding is all over the place between color/time/date

\- What is a button? A grey rectangle with an outline? A black glyph? A blue
text without outline or underline?

\- Up/Down to switch months does not make intuitive sense. Time could go
either way.

\- The color picker looks seriously unfinished. It's like somebody threw some
controls on a dialog in a RAD and let them where they first landed.

~~~
aspaviento
Totally agree. They are requesting feedback so maybe you can let them know
about these points.

~~~
krossitalk
Except the "smiley face in the top-right to Send Feedback" can't be found
anywhere on the page.

~~~
MrGilbert
> Except the "smiley face in the top-right to Send Feedback" can't be found
> anywhere on the page.

Because it's the smiley face in Edge, not in the page.

------
Santosh83
The colour swatch honestly seems much more functional in the old version, with
the ability to store custom colours, specify hue, saturation and luminosity
etc. The new swatch is frankly neutered down. Apart from that the other
changes seem okay.

~~~
einr
Fun fact: the old colour picker is literally unchanged since Windows 95
([https://guidebookgallery.org/pics/gui/interface/dialogs/colo...](https://guidebookgallery.org/pics/gui/interface/dialogs/colourselector/win95.png)),
complete with the really awkward use of a pipe character as separator between
"color" and "solid" (which was used for the closest non-dithered colour match
back when we had 4- and 8-bit displays)

And _to this day,_ 24 years later, adding custom colours is bugged. It does
not "add" colours, it overwrites the first colour in the list.

EDIT: to clarify, the above is only true if you exit the dialog and then
return to it. It has no concept of previously defined custom colors, it just
overwrites whatever you had before, instead of appending to the list.

All that having been said, yes, it does appear to be better and more
functional than the new proposal.

~~~
Jaruzel
> It does not "add" colours, it overwrites the first colour in the list.

It's not bugged. It's just non-obvious. Select the empty custom colour _first_
, then select from the colour box the colour you want to add, then select 'add
to custom colours'.

Simple really. /s

~~~
einr
It's actually somewhat more complicated than that even: clicking an "empty"
custom colour (I put "empty" in quotes because it actually has no concept of
empty, they're just white -- it keeps track of how many colours you've added
since opening the dialog but it does not know if the colors you're overwriting
are "empty" or not) selects the starting point where you want to start
overwriting the list. So clicking multiple times will keep overwriting your
colors, you just get to choose your starting point. So there is kind of a way
to use it but it is non-intuitive and backwards as all heck.

What the "add" button does, then:

1\. overwrite colors step by step in the list (with no undo),

2\. in order from top to bottom and then left to right,

3\. starting at the most recently clicked custom color,

4\. or at the first color in the list if no custom color has been clicked
since opening the dialog

Easy! :)

------
flyingswift
Can someone explain to me why they would spend effort on this kind of thing?
Other than minimalist websites like HN, I can't remember the last time I saw
completely unstyled form inputs in the wild.

If every web developer is going to immediately reach for CSS/JS to style these
things, who cares what the default style is?

~~~
mwcampbell
If I could use unstyled controls and know that most browsers would have
reasonable defaults, I would. I think a lot of line-of-business developers
would agree. I see an opportunity to eliminate one thing that adds bloat to
web applications.

~~~
flyingswift
I tend to agree with you but I can also tell you that 100% of web designers
will not and would rather redesign them.

Even with these 'improvements' I would not use these in a line of business app

------
dawnerd
Microsoft seriously needs to hire designers. Say what you will about Apple,
but that’s something they understand. Windows has gotten a little better but
everything look developer designed.

~~~
sebazzz
That is all determined by culture. The ones in charge, the ones not down hill.

------
interlocutor
Calling these changes "improvements" is a stretch. Still flat, still dreary.
They should have at least gone for a "Flat 2.0" look [1]. Flat 2.0 is is
mostly flat, but it makes use of subtle shadows, highlights, and layers to
create some depth in the UI. This is definitely not Flat 2.0. Look at that
button. Looks almost like a disabled text input. Dreadful.

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

~~~
pndy
That's how they present all these meaningless UI changes - as an
"improvement". But guess powerusers and professionals aren't the groups
they're aiming at anymore - which I'd say is clearly shown in iOS Skype
changes log [1].

[1] [https://i.imgur.com/PlpipoV.jpg](https://i.imgur.com/PlpipoV.jpg)

------
laurensr
I interpreted that as:

"Since we began work on the next version of Microsoft Edge based on Chromium,
we’ve been investigating ways to leave Chromium as it is, as much as possible,
without re-implementing its features to resemble IE/Edge as it was."

~~~
thrower123
Thank god, all of those IE quirks can go die in a fire. I can't remember ever
being so gleeful that something was going extinct.

~~~
DHPersonal
I don't think the poor HTML rendering and extra Microsoft code was what
laurensr meant when they mentioned the lost features in the new Chromium-based
edge; rather, it's the loss of Edge-only program features like pen/ink markup
on pages. [https://support.microsoft.com/en-
us/help/4027048/microsoft-e...](https://support.microsoft.com/en-
us/help/4027048/microsoft-edge-add-notes-to-sites)

~~~
microcolonel
They're not interested in bringing the inking features over? Did they fire the
team or something? Is there something about their code which makes it not
worth porting on to Chromium or something?

~~~
WorldMaker
All the inking stuff (and also the PDF/EPUB stuff that old Edge was really
good at) is in UWP (WinRT/XAML) controls. At the moment it looks like the
Edgmium team is entirely avoiding UWP controls. It seems like they are
avoiding them for maximum cross-platform ease, but it's still not hard to
wonder why they don't just use XAML Islands for nice stuff like Inking on
Windows 10+ at least.

------
Ciantic
I wish the calendar widget would be improved in standard Chrome too. Looks
like though they are not making the slashes optional, it's not usable for
Europeans as we tend to use dots.

Part of the problem is that it assumes browser wide setting of language, where
as it is very common here to install browser and OS with US locals, but still
want to have European inputs.

~~~
wildebaard
> it's not usable for Europeans as we tend to use dots.

We do? As a fellow European, I hardly see dots: mostly slashes or dashes.

~~~
Ciantic
There could be some east west divide. But is seems to be widely used, for
instance Germany seems to prefer dots. Someone has compiled a table here
[https://gist.github.com/mlconnor/1887156](https://gist.github.com/mlconnor/1887156)
not sure about it's accuracy.

~~~
Jaruzel
Imho, everyone should use ISO8601[1] as standard. Then there'd be none of this
'it's an american who wrote it so it's the month first for some reason'
rubbish.

\--

[1]
[https://en.wikipedia.org/wiki/ISO_8601](https://en.wikipedia.org/wiki/ISO_8601)

~~~
BuckRogers
I'm an American that prefers YYYYMMDD and has used it exclusively in my
career. As a developer with a lengthy deployment background and it's simply
the superior way to go for dates for readability and sorting. Many like myself
have 2 modes of operation, the 2nd being what business owners and executives
are expecting. We couldn't force it on them if we wanted to. This often
extends into English vs metric as well. I default on metric for everything I
can. It may not be the American developer to blame but the average person
around him. It's very surprising to me that after the American Revolution, we
weren't eager and early adopters of the Metric system considering animosity
towards the British was still lingering for some time.

------
duxup
Why does the button look "pushed in"?

That doesn't make sense to me as far as a button goes. Flatter fine but it
looks pushed in to me.

~~~
microcolonel
Indeed, it seems like they have no idea what conventions are, and just wanted
to change everything for whatever reason. The default low contrast gray
"button" is garbage.

Also, I get switching to a black outline on the focused text element, but now
you have two colours signifying that something is focused.

------
duxup
>Just click the smiley face in the top-right to Send Feedback, and let us know
what you think!

It's telling that when I wanted to provide feedback I did a ctrl-f to find
some sort of feedback link and it took me a while to figure out they meant to
download the actual build and then submit feedback... that feels as wonky as
some of the choices.

~~~
pedrocx486
Uh, the point is to provide feedback about the builds, why provide feedback
for something you're not using or even have installed?

~~~
coldtea
Because the build is not (and should not be) necessary to provide feedback for
new visual widgets.

You can see their design and provide feedback directly from the screenshots.

If I wanted to provide feedback for how they work, I could download the build
too.

But there's plenty of feedback where just the screenshot of the new design is
enough...

~~~
WorldMaker
I know we're getting dangerously close to "Ceci n'est pas une pipe" post-
modernism art theory land here, but a screenshot of a widget isn't the widget,
and how they look in a screenshot is still bereft of other context. It's not
unreasonable to ask that even "purely visual/aesthetic" feedback deal with the
widgets in the direct context of running in a browser, and used inside web
forms.

~~~
duxup
To be more specific I was thinking of that button. It looks "pressed in". That
seems like the opposite of every button.

Maybe the context would help, but that would raise all sorts of other
questions IMO.

~~~
WorldMaker
I think that's actually supposed to be the :hover and/or :focused state (as
most of the screenshots of the other controls intentionally are), which is why
that specific one especially seems to tell me it needs more context.

------
kire456
I really don't get the time picker design that basically works as two long
comboboxes side by side. Especially the minute picker requires far too much
scrolling/swiping for what it's worth.

I much prefer the Android dialog, with a clock face that allows me to select
the right time with two clicks [1]. Am I alone in this, and is it hated by all
and thus ignored in other OSes? Is it patented and thus unavailable for anyone
but Google? I don't get it.

[1]
[https://en.proft.me/media/android/android_time_picker_dialog...](https://en.proft.me/media/android/android_time_picker_dialog1.png)

~~~
tolqen
I'm fairly sure even Android has abandoned this type of time picker

~~~
aaronax
It doesn't have two rings anymore, you choose the hours and then it changes
the ring to minutes for you to choose that. Functionally the same I would say,
for all but the most pedantic person.

And I believe it has been that way for several years...I don't recall ever
seeing hours and minutes rings visible at the same time.

------
taf2
I just wish MS would release Edgium already... we can drop so many hacks and
finally stop supporting IE11 once Edgium is released because we can just tell
customers on IE11 to use Edge.

~~~
ygra
How well does that work in corporate environments (which I'd guess would be
the last vestiges of IE 11 use)? If you can't tell them to use a different
browser now, why would it be different after Edge is Chromium-based?

~~~
WorldMaker
I guess the theory is that Windows 7 can run Edgmium, but not Edge Classic, so
at least Windows 7 users _could_ upgrade from IE11 to Edgmium. But the problem
with that theory is that Windows 7 expires from security support in April and
if those users aren't already contemplating their next Windows upgrade then
yes, why would they bother upgrading IE11 to Edgmium? Especially because
wouldn't they already just be using Chrome in that case?

Yes, I know that Edgmium will also have the ~crutch~ ability to run IE11 in
specific tabs on Windows 7 (and 10) so corporations stuck in IE11 for
"reasons" can have their cake and eat it too, but that's still doesn't mean
corporate developers can stop supporting IE11, that means corporate developers
will be asked to continue to support IE11 because GPO-ing the entire LAN to
use IE11 "compatibility tabs" is easier than picking and choosing individual
intranet sites that require IE11 because of bad vendors. (If your corporation
or client is stuck with supporting IE11, it is likely stuck _forever_. IE11
will never die, because corporations won't let it.)

------
jchw
This is a cool collaboration. I would love to be able to use unstyled controls
again, especially for things like date and time!

------
miohtama
Password input peek button is very welcomed improvement.

------
foota
Many people were crying doom when Edge moved onto chromium. Would be
interesting if Microsoft and Google joined forces to improve the browser.

------
hortense
Are these changes only for Windows?

~~~
WorldMaker
Sounds like they are pushing them upstream to Chromium and every platform
Chromium supports.

------
iaml
Does it support the same css selectors as chrome though? Or is it a bunch of
new selectors, old microsoft style?

