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]

@Mason425 

Spoiler

---

@Mason425 wrote:

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.

---

We at home have bunch of laptop users with 13" screen size and I replaced all of their Edge legacy browsers with the new one, never received any complain about screen size or the UI being too big.

[#3]

@Mason425 

Spoiler

---

@Mason425 wrote:

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.

---

I really like to know what that feature is called, I hope it's not limited to UWP platform only. that would be so bad..the proximity animation or something

it should be somewhere in these Microsoft Docs

[#4]

@HotCakeX 

A lot of that can be because of screen resolution of the device and then what DPI scaling, if any, is being used.

[#5]

Hi @HotCakeX

Thanks for your reply.

(I think) Fluent design is still blurry. It's beautiful. But no one knows what Fluent Design will be, including Microsoft. M$ can't use Fluent Design well now.

I like Legacy Edge's tab design. It's square.

I also like New Edge's address bar / toolbar, but they are round.

For the sake of coordination, they are either all square or all round. Maybe you are right.  

I am very contradictory and confused, I do not know what the Edge should be like. He is wonderful, so full of possibilities. We all love Edge. M$ is hard lol

Thanks again.

In addition, I found that you are happy to give feedback to Microsoft, admiration! The world is beautiful because of people like you.

At last, sorry for my poor english, haha

[#6]

@HotCakeX 

I was merely suggesting that if there will be many more tools added, the spacings between buttons might need to shrink. They already added the user icon, and the collections feature, and I think that they might be adding the mark up pages. So there might be six buttons soon, rather than the original four. The spacings on Edge legacy never looked small, and the new Edge has bigger spacings. I don't really have a big problem with the current spacing and sizing, but I was considering what could happen if more tools are added (tools are very useful in a browser, so by all means don't hesitate to add any; also buttons you don't want on the tool bar can be turned off, so overall, I think it should be fine).

[#7]

@HotCakeX 

Okay. I just tried to figure out the source of the problem from what I could see. So it's not about screen size. I guess everyone is just complaining too much?

[#8]

@skyporker 

I also kind of prefer the squared tabs. But to be completely honest, I hardly even noticed until becoming a contributor on here. I noticed that someone said that the tabs looked too rounded on this very conversation and then the rounded tabs bothered me, but all in all, Fluent Design has produced many good looking icon and app improvements so I suppose that Edge will look good no matter what. They could even make themes for the new Edge like maybe one that looks like old Edge? Only time will tell, but Edge will look good no matter what, and Microsoft will do a great job like they have with many other things.

[#9]

@HotCakeX 

---

@HotCakeX wrote:

@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

---

That would be great! I would love to see that! At least if they put a slider for transparency level, people have the option to change how transparent it is, or even turn it down all the way so it's not transparent at all (if people don't like acrylic transparency for whatever reason). It allows so much freedom, and if people don't want transparency, they don't have to use it!

[#10]

@Mason425 

I personally think Vivaldi offers a lot of options that would be useful in Edge, some of the features are requests that have been mentioned here - such as square tabs, tab previews, theming options, etc. It would be nice to see some of those features in Edge.

[#11]

@sgilder 

Tab previewing already existed in the original Edge. I think that's why people are wanting it again. But you do have a point, some people could have requested those features from other browsers. When I have mentioned it in a past post I was referring to how the original Edge had it.

[#12]

I think the favourites bar should be made smaller there's so much unused space in it and the icons could be made smaller. 

[#13]

@Mason425 Yeah. Looking forward to the bright future of Edge together.

[#14]

@Mason425 

---

@Mason425 wrote:

@HotCakeX 

---

@HotCakeX wrote:

@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

---

That would be great! I would love to see that! At least if they put a slider for transparency level, people have the option to change how transparent it is, or even turn it down all the way so it's not transparent at all (if people don't like acrylic transparency for whatever reason). It allows so much freedom, and if people don't want transparency, they don't have to use it!

---

Ahhhh..... Compared with the transparent content of Windows Terminal, I prefer to make the Tab bar transparent like Legacy Edge. But all are great 

[#15]

@quietrobotI don't know, I kind of like it how it is right now, and its not like anyone but tech geeks will see it, and the icon is more self explanatory than the newer one that @HotCakeX showed.  

[#16]

Use winui 3.0@Elliot Kirk 

[#17]

hope they do so@Elliot Kirk 

[#18]

Please refrain from making things (such as text size or the presence or absence of menu bars) unalterable. Allow users to adjust text size or enable or disable menu bars. One size does not fit all. If Edge wants to be a success then set it apart from other browsers by increasing its customization. New browsers (just about all but FireFox) seem to have eliminated the standard file menu bar--which apparently Microsoft deems a "legacy" issue. Sure for some people it is not a loss, but for many of us it is. WHY not just make showing the standard menu bar optional? Let users decide. What is wrong with Edge having a similar interface as that of all the other MS Office programs? Why make it different? Why focus on making the interface of Edge look like Google Chrome instead of your own successful programs? I guess I am just pleased the Microsoft doesn't make cars or else things like steering wheels would be consider "legacy" items. On the other hand, I guess I should be thankful Microsoft is not going to allow every Office program to come up with its own menu system. .....You are not are you?

[#19]

totally upvoting this!!

[#20]

yes this features made it feel like it's a part of win 10 design philosophy

[#21]

When you guys will be using winui 3.0 and bring fluent design with it's full glory to Microsoft Edge?