Forum Discussion
Discussion - Updating our interface with Fluent touches
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.
Thank you so much for all your feedback on the overall design of the new version of Edge, as it is invaluable to our getting the experience right. A common thread through this feedback has been a lot of discussion about the definition of “Fluent” design, and how it should apply to Microsoft products, so we wanted to share an update to provide some clarity. As opposed to a specific or static set of design rules, Fluent is intended to be an ever-evolving design system across Microsoft products. As the world around us continues to evolve, including devices, interaction models, user habits and expectations, the Microsoft design system must also evolve to meet the changing needs of our users. This means Fluent will not necessarily always represent everything that it did several years ago when the look and feel of the legacy version of Edge was first developed. You can learn more about the current direction of Fluent by visiting the Fluent Design System Page, which provides a summary of the design system as a whole, as well as how it applies to different platforms, applications and controls across Microsoft.
If you browse through the Fluent guidance at the link above, you’ll note that the new version of Edge is aligned with the current direction Fluent is going, and we will continue to evolve along with the design system and Microsoft as a whole. While Edge may be one of the first to put some of these new Fluent elements into practice, you will continue to see other products across the company update to reflect this direction as well. For example, you’ll notice that the latest Fluent designs are characterized by rounded corners across objects and controls, and the new version of Edge is consistent with that guidance. Another example is that there isn't a pivotal focus on transparency in the latest Fluent designs, and surfaces of the new version of Edge reflects this.
This is not to say we will never consider incorporating such aspects into our designs going forward, or perhaps offering options to customize the look and feel, but there are no plans to incorporate these elements into the default experience for all users at this time. However, there are other design investments on our roadmap to continue aligning with the broader Fluent direction, such as updating icons and illustrations across the product. Please continue to send your feedback on the overall Edge look and feel, including preferences and pain points, as we are always open to learning more and updating our direction based on the needs of our users.
- The Microsoft Edge Team
479 Replies
- we want winui3 in edge.
Dzień
dobry Tak popieram zmiany , ale proszę o uwzględnienie możliwości - zminimalizowania paska - kiedy nie jest potrzebny !
Daje do większy ekran a ja chciałbym
do mieć w kontekście , Tak uważam że każdy centymetr ekranu jest ważny i ustawienia powinny umożliwić ukrycie - zminimalizowanie lub powiększenieinterfejsu aby dostosować według własnych potrzeb !
dziękuję bardzo
Elliot Kirk Please... DO NOT MAKE THE TABS MORE SQUARE!!! I absolutely hated Microsoft Edge Legacy (no offense, Microsoft, but it kinda sucked), and the design was one of its major flaws. Everything was so square and so sharp that it looked like it would cut your fingers off. DO NOT MAKE ANYTHING LESS ROUNDED. Even if you considered it, make it an option, not a mandatory feature. I absolutely hate straight, square, sharp interfaces. It makes me feel like I'm walking on razor blades.
https://techcommunity.microsoft.com/t5/discussions/top-feedback-summary-for-january-12/m-p/2053932 As shown in the link, the introduction of transparency effects for Microsoft Edge dominates the rankings all the year round. Obviously, users are so looking forward to acrylic and fluent design!
With the continuous development of FDS, the transparency effect is no longer the focus. We know that using Navigation in XAML will no longer enable the transparency effect of the underlying window by default, and the default transparency effect will remain in the window of this layer. The difference is shown in the figure
In this picture, the window title bar and toolbar of "Screenshots and Sketches" are transparent to the desktop and windows below
In this screenshot of the Microsoft Store, the elements at the bottom of the window are transparent
At present, it seems that the design team intends to adopt "transparency to the elements in the window" as a trend, and will not develop more transparent title bars and side bars in the future.
Therefore, the focus is not on transparency, but on other areas.
Microsoft Edge now gives me the feeling, as if I changed the Chrome icon to Microsoft's, and then told me, look, this is Microsoft's browser. I think this is a huge irony and tragedy for the visual perception of the Microsoft brand, which means that users cannot really recognize the work that Microsoft is doing on this browser, and-let users understand that this is a different version of Chrome Browser. Microsoft must use practical actions to reshape Microsoft's brand image.
I think the core action is to use native controls, or reshape the appearance of non-native controls that look like native controls. This includes the following:
1. Forward and back buttons, refresh buttons, address bar and toolbar
2. Context menu
3. Edge's special pages, such as settings, downloads, favorites, etc.
For the address bar toolbar area, I think it’s not too difficult to build the appearance with XAML (or WinUI 3). If it is difficult, it is not too difficult to make these controls look like Windows. This area should look exactly like the old version of Edge.
The context menu is a place where it is easy to achieve a smooth design. I think it is nothing more than adding a transparency, adding a matte, adding a noise, adjusting the kerning and line height, and finally adjusting the edge and projection. I don't think how difficult it is, is it really difficult? Or, will you consider WinUI 3 release? Or use XAML island, just like the old version of Edge? Is this really so difficult? I can't understand why I can't do it after a year.
I think any user will notice the huge difference between the sidebar of the settings page and the sidebar of XAML Navigation in "Windows Settings". I don’t want to worry about whether the highlight bar is a rounded rectangle (capsule) or a right-angled rectangle-because Both are FDS, but there is no lighting effect (CompositionLight Class), completely different spacing, inexplicable margins, lack of transparency, all of which remind users that this is a web page, not a native one. UI-based application. It seems to have nothing to do with the Windows design language-although it seems that many applications have to do this, indeed, cross-platform, Web development also meets Microsoft's strategic goals, it is really difficult to resist the temptation. Skype, Microsoft Teams, and Outlook to come,-and the latest file explorer used on Windows 10X, the design looks increasingly unrelated, each team has its own ideas, compare , The unification of macOS is simply outrageous!
I implore the development team to read this article to help users build a harmonious and unified appearance, One Windows, One Microsoft
https://medium.com/microsoft-design/fluent-makeover-photolab-a583d25f362b
- Shompinice 's feedback should be noted. I want more native controls, the non native edge has a blurry UI. Chromium's blurry image, text and pdf rendering is another problem.
I said this before and I'm saying this now - i like nothing about chrome and everything about original edge based on EdgeHTML. New edge has precisely none of the advantages I liked in original edge. You can't mistake it for a UWP app that is built into OS. It is not great with touch response, the touch experience is not even tracked as a quality area.
Pretty sure if edge was forked, these things should have been on the horizon atleast, but now with chromium there are not even any exciting future plans. Nothing worth looking forward to has been announced.
Come on microsoft. Give us something.- Well, we can all appreciate Chromium's most powerful JavaScript engine (V8) and Blink engine, they are the best on the market, But, Edge legacy had the best UI and UX, the 2 need to be combined so have the best of both worlds.
I'm sure once WinUI 3 reaches stable status and gets more feature, Win32 programs such as the new Edge will be able to look more beautifully and more UWP elements will be available to them.
Great comment and valuable feedback, please make sure to submit it using feedback button on Edge (shortcuts: Alt + Shift + i ) and/or this form
https://www.microsoftedgeinsider.com/en-us/support/request
I also do hope that the UI will change to represent more of Microsoft and less of Google.
Finally someone who gets it, I share the same thoughts! Great post and you hit the right spots there. Hopefully Microsoft/the development team will read your complete post and finally work on one, unified experience, because it’s horrible for years.
- If you look at those loading wheels, you'll see the animation matches that of YouTube, Google Drive videos, and other Google-owned properties. In other words, it's Material Design and not Fluent Design.
I want only the following:
- Update the user interface with the Fluent Design System (Addressed)
- Make tabs more square and less rounded, like the current version of Microsoft Edge (Not planned)
- Provide a transparent theme for the browser frame (Not planned)
So basically what I want is either Not planned or Addressed.
- Update the user interface with the Fluent Design System (Addressed)
Elliot Kirk I wonder if some of the people asking for square corners are largely asking for that because they want their product of choice to be distinctly different from the Google product, but personally I prefer the rounded corners. I feel like the square corners make the product look unfinished / unrefined.
Microsoft products became looks much more unfinished after adopting round corners. Every app became a mess where old guidelines are superimposed on new ones, where thin frames on average 1080p look like from the NES era.
Every previous UI update wasn't fully completed so I guess this will not be completed too and apps which not be migrated to PWA will stay like this.
Yes, square corners are ugly, the people they want, they can use a browser with square corners 🙂
- Personally i have two thing to say :
1 - I absolutely want to all Microsoft software follow the fluent design (Edge, code etc).
2 - I thing the first thing you have to follow is the theme of the OS himself, you are a Microsoft product so it's normal for edge to have a design who is in total match with Windows 10 (sorry mac and linux but it's the truth)
But i will finish on this, majority of your user are user who :
1 - Hate Google (my case)
2 - Use All your other services so it's normal they use edge
3 - Want to have something different than chrome (my case).
So i will ask you Please don't listen to those who want another copy paste of chrome and have your own identity as a browser.Wittycat, I share your anti-Google perspective, but with Chrome at 75% - 80% market share, for Edge to gain users, it needs to attract existing Chrome users. Even if Edge took 100% of Firefox and Opera users, which it won't (because many of those users are passionate supporters of the browser they use and won't change), Edge would still be only a minority player in the browser space if it can't attract a large portion of Chrome users. This means it needs to appeal to people who are, at a minimum, most familiar with Chrome and don't hate Google as their reason for choosing a browser.
GraniteStateColin So are you suggesting that you just want to be a Chrome clone? Actually, it looks like the goal is to be a "prettier" Chrome. Why not try to be better? Why not aim higher? I don't think just being prettier is going to draw many away from Chrome. Forget Chrome, do what is BEST for Microsoft Office! Focus on a better fit for other Microsoft products.
My opinion:
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.
I think that the roundness is great, and im happy to see it more and more in windows (on buttons etc). (I even want windows context menus to be rounded at some point, like the ones in edge)
I also think that acrylic transparency on the broswer frame should come, as the current fluent design does still employ transparency, only not as much as it used to.
Also, nicer animations are always a nice bonus 🙂
Elliot Kirk I just want to add that I never liked the square corners in the old Edge. Please don't go that route again. Thank you.
