Discussion - Updating our interface with Fluent touches

[Elliot Kirk]

Hi Insiders. We have received a whole lot of feedback on the overall design of the next version of Microsoft Edge. First off, we would like to thank you all for the feedback that you have submitted.  We also want you to know that we are continuing to evolve the look and feel of the new Microsoft Edge.  You can see our progress in our new icon, in the changes to dark theme, on the layout of the settings pages and in the style of the controls that we have added so far. Our goal has been to modernize the next version of Microsoft Edge while keeping the feel of the original. In the five years since we released the first Microsoft Edge browser with Windows 10, the Microsoft Design Language has and will continue to change and adapt.  We have been evolving our user interface with this in mind and may be the first place you see some of these changes. We are planning on continuing to apply elements of the Microsoft Design Language to align with other Microsoft products.

We are thrilled with how much you think about the look and feel of the new Microsoft Edge browser.  As we dug into the feedback, we found different ideas lumped together into very broad buckets and felt like we needed to re-sort the issues into new categories that are more specific to the actual issues that were being discussed.  The previous categories that we have been reporting on are:

• Update the user interface with the Fluent Design System
• Make tabs more square and less rounded, like the current version of Microsoft Edge
• Provide a transparent theme for the browser frame
• The address bar and text are too large

The first step of this journey was to dig into each of the feedback items individually and understand what your ask was, and if there was a reason listed for the feedback.  This helped us better understand why you are asking for these changes.  The next step we took was to recombine the feedback and sort it into more specific buckets.  We understand change is challenging, and we are not changing our interface just to be different.  We have been working closely with our designers to get a look and feel that aligns with our Fluent Design language and meets our standards for usability and accessibility.  It is our goal for our design to be easier to use on a daily basis.  When you provide feedback, it helps us to challenge our assumptions and makes us reanalyze our conclusions.

Based on this analysis, we are seeing the following themes emerge from your comments: we will be tracking and following feedback in these categories going forward:

• Ability to add distinct color or color themes to the main browser interface.
• Add transparency or other material effect to the main browser interface.
• The corners of the tabs and browser buttons have been rounded too much.
• Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.
• Update or add animations to user interface.
• Add a reveal effect to highlight on mouse hover.

We would love to start talking about these items now.  Please let us know if you think that we are on the right track with the changes we have made so far. The most impactful feedback is that which lists the task that you are trying to accomplish, the challenges that you face while accomplishing it, and your ideas on how it could be made easier. Also, feel free to reach out if you think that we have missed something important here.  We will always take feedback and suggestions to help us make this the best, fastest, most productive browser possible.

[#2]

Is there a way to keep the address bar size and respective font consistent with all other web browsers; or, at least make the address bar/font larger as an option.  Even without my glasses, the address bar and font size look awkwardly big. 

[#3]

The best way out of the whole "UI is too big" debate would be to implement a setting to change its density. One might say "it's too much code to maintain", but the Mail app has such options and I don't see any users complaining something does not work as expected. Mozilla Firefox has a UI density setting for "compact", "standard" and "touch" and all three are great depending on the device used and I also have not seen any bugs associated with these.

I understand users who like the big address bar and icon/menu padding as they are now, but I don't understand their "shut up, it's good as it is and we don't need any options, you simply hate Microsoft!" attitude ;)

[#4]

@HotCakeX 

Yes! I really, really want to see a semi-transparent acrylic theme on the new Edge. But yes not too transparent, it should be just like the original Edge.

[#5]

I am seeing a Windows XP icon from Edge on my Windows 10.

Considering that Windows XP was released 19 years ago, it would be nice to update the icon to 100% Fluent Design (Windows 10, 2020)

[#6]

@quietrobot 

That looks more like the auto update client rather than Edge itself.

[#7]

@sgildertrue but definitely part of Edge.

[#8]

@Elliot Kirk 

Great categorization!

However, I do not want one of these, which is-

• The corners of the tabs and browser buttons have been rounded too much.:                                  I believe that the amount of rounding is just about perfect. It is not completely round as in Chrome, but it is not completely square either. Some amount of rounding is absolutely necessary if we want the design to be modern. 

Apart from this, I firmly believe that the suggestions you listed need to be incorporated. While transparent and acrylic touches are certainly needed, I would say that do not make the browser's design very much similar to the legacy version of Edge either. When the New Microsoft Edge is rolled out finally to Windows 10 users via Windows update, I believe that users must get a fresh look, somewhat different from the one they are used to.

The browser should look neither like Chrome nor like the legacy Edge. It should be something new.

[#9]

@quietrobot 

I agree with you about the setup Icon, which belongs to Edge installer

in here on the left there is a high quality icon for the installer of Uplay and on the right side there is Edge installer which just looks old and nostalgic, specially with the jagged outlines..

Microsoft should take care of it and swap it with an actual high quality Icon for the new Edge browser setup/installer.

[#10]

@relu84 

Edge does not have the biggest user interface in the "browser world". I have done a test with Edge canary (which is the one you need to look at before making complaints) and Chrome side by side and they have the same user interface size. 

[#11]

Definitely, hopefully in the next Build this is already solved.

[#12]

Good Job @Elliot Kirk 

I think the address bar and text aren't too large. They're ok.

And I LOVE Fluent Design so much. So I want:

• Update the user interface with the Fluent Design System
• Make tabs more square and less rounded, like the current version of Microsoft Edge
• Provide a transparent theme for the browser frame

Fluent Design is awesome. I really like it. And that's why I switch to Microsoft Edge.

❤ MS

❤ Edge

❤ Fluent Design

Thank You!

[#13]

@Carmello B. 

That is what I've been really wanting since the new Edge came out. I really want the acrylic (slightly transparent appearance) on the new Edge. I want the new Edge to still carry over some of that feel and look of the original Edge but also getting some new updates and changes.

[#14]

I really miss this and want it to return desperately. I really liked the acrylic. I would really like for it to return.

[#15]

I also miss how the buttons would highlight when the cursor would get near the button. It's just a few of those small details that were in the old Edge that I want to return in the new Edge. I don't mind the slightly rounded tabs and buttons. It's a progressive movement into the newer more modern times for technology interface.

[#16]

@relu84 

So, it appears to me that the browser bar up at the top needs to be proportional to the screen size. I personally like the size as it is (but that is just my screen), it also appears that people with smaller screens (like on a laptop) say that the browser user interface/browser bar is too big. I can understand where they are coming from because on my phone, with ads hugging both the top and bottom of my screen when I am on a website or article, it leaves such a small space for page content. Again, on my 24 inch screen, I think the sizing is perfect, but it may not be that way for some people.

[#17]

Also, if there is going to be more tools added to the tool bar, the spacing between buttons there will definitely need to shrink down a little bit.

[#18]

@skyporker 

Spoiler

---

@skyporker wrote:

Good Job @Elliot Kirk 

I think the address bar and text aren't too large. They're ok.

And I LOVE Fluent Design so much. So I want:

• Update the user interface with the Fluent Design System
• Make tabs more square and less rounded, like the current version of Microsoft Edge
• Provide a transparent theme for the browser frame

Fluent Design is awesome. I really like it. And that's why I switch to Microsoft Edge.

❤ MS

❤ Edge

❤ Fluent Design

Thank You!

---

The fluent design is the reason why they are rounded and not square :)

but I agree with transparency / Acrylic theme, it was the best theme

[#19]

@Mason425 

Spoiler

---

@Mason425 wrote:

That is what I've been really wanting since the new Edge came out. I really want the acrylic (slightly transparent appearance) on the new Edge. I want the new Edge to still carry over some of that feel and look of the original Edge but also getting some new updates and changes.

---

Yeah it's great, the only improvement to the design i want is to have a slider to modify the transparency level. the same thing that exists for the new Microsoft Terminal UWP app

[#20]

@Mason425 

---

@Mason425 wrote:

Also, if there is going to be more tools added to the tool bar, the spacing between buttons there will definitely need to shrink down a little bit.

---

I don't think they need to shrink, the current size is standard and good for both mouse and touch users. plus you can always grab the edge of the address bar and drag it left or right to have more space. the toolbar is fluid ;)

[#21]

@Mason425 

---

@Mason425 wrote:

I really miss this and want it to return desperately. I really liked the acrylic. I would really like for it to return.

---

it simply looks magnificent!