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
Elliot Kirk One thing I really feel is missing from Edge is the scrollbar design improvements: I feel like the hardcoded-white Win32-style scrollbars look out of place in a modern Microsoft app. I'd love for the thin ones you'll find in OneNote and Your Phone for example. Or if people prefer the thicker scrollbars, at least have them change to a darker color when dark mode is on; it's an eyesore when you're on a dark website and the whole browser chrome is dark, the page is dark, the menus/flyouts are dark — but the scrollbars are white!
Please consider improving the scrollbars, I feel like it's the one little thing sticking out in an otherwise great design.
Hello SixFourSix
the scroll bar of the new tab is an excellent bar and better than the win32 bar
I would like to see this new bar by default in the browser
- If you're no longer going to add Acrylic (which is honestly not the most important design aspect to me) or Highlight Reveal, I think there are some other important steps to making a user interface consistent with the rest of Windows.
The highlight effect on toolbar buttons takes a second to show up--this should be changed to show up instantly, like every other Windows application and the operating system itself. And of course, highlight reveal if you're willing 🙂
Use native dropdown menus, tooltips, and right-click menus. They look really nice in Windows and I think this is enough to keep it consistent with Windows while still maintaining the rest of the "new" Fluent.
I understand that Windows is slowly moving towards rounded corners, so I completely get why you're not going with a square design. But these small steps will make the browser instantly look much better and more consistent with Windows. For me
- 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.
Elliot Kirk
Thanks for the post. I wanted to chip in my opinion on the chromium edge version ui:
It feels like a chrome browser. I know, there are some differences and tweaks, even distinct features, but overall - the layout, the menu, the settings, the behaviour... it's chrome.
Now with the 'edge legacy' browser, there was a feeling of "this is a windows 10 application" as the user-interface and behaviour matched that of i.e. mail&calendar, onenote, store. As long as the system doesn't switch it's design-language, the browser should not do it. Consistency!
The "tab corners" are just one of the parts that does not match the rest of the system: There is no roundness in Windows10 - neither tabs nor input-fields or highlighting.
I'd wish for more engagement and commitment to making the edge browser feel like a part of the system again.
Suggestions:
Enable full theme support and provide (secure) os-integration-themes for the primary operating systems this is built for.
Consistency to the primary system edge is build for.Elliot Kirk Hide the address bar when opening a age.
- Knowing that Edge will not support acrylic is THE worst news You could've given us. This is so very disappointing, Microsoft is a HUGE company, you should be able to deliver a consistent design. This is absolutely disgusting 😕
- By not giving the acrylic effect to Edge, they can give the possibility of generating very customizable themes which can modify the browser to a point where something like this can be done:
https://twitter.com/RobinWithTheD/status/1283392814743773186 I prefer the more square look.
first of all, how have you guys still not fixed the problems I've reported like combo boxes and radio buttons?
if you really cared about your FDS, you'd do this: https://github.com/microsoft/ProjectReunion/issues/82 OR go back to UWP. Just look at the certificate dialog. It uses the win32 common controls. And you could've chosen to update the style of the shadows everywhere but instead you chose to make custom menus for Edge? The APIs were there from XP and could have been tweaked for ALL apps, including Office, another one of your (Microsoft) favourite apps.
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 TeamAs a software developer who works in a large organisation but also works closely with UX people, I understand the challenges of implementing a single design and experience language across the entire organisation.
However, the thing that has always bothered me about Microsoft products since Fluent Design was introduced, is that even years later there still isn't consistency between products. But it's not big things, it's little things that you notice after some time of use, it's menu items being different heights in different apps, it's the inconsistent use of things like acrylic, it's that some apps have more pronounced hover effects and styles than others. This inconsistent experience is frustrating for the end user.
If Edge is to be one of the flagship products in Windows, then it has to fully embrace all of the elements of the design system, otherwise those inconsistencies will turn off users and they won't even realise why, because all of these inconsistencies are really subtle, they're not at first obvious.
As a end user, I don't really care what the design system is, if it looks good then that's a nice bonus, and of course it has to be usable, but at the end of the day all I care about is that it's implemented in a consistent way that creates an experience which feels seamless between products. Unfortunately Edge, as it is right now, kind of stick out like a sore thumb in the modern Windows experience. Even within Edge itself there are design inconsistencies, and as someone who has used Chromium before, it kind of feels like the Edge Team has just taken Chromium, made some design tweaks, and called it a day, it feels like you haven't bothered to take the time to properly implement Fluent, across the entire app, and the user experience of Edge, and Windows as a whole, ultimately suffers because of that.
P.S. I'd love to see the acrylic look be implemented in Edge, I think it looks so much nicer than the current UI, here's an example someone linked earlier: https://twitter.com/RobinWithTheD/status/1283392814743773186
- Transparency is still a thing for Windows. Some Windows Insiders have an updated Start menu that uses Acrylic in the app tiles. A recent(!) updated to the Microsoft News app for Windows 10 added a button that uses the highlight reveal effect. The fact that these were implemented RECENTLY shows that these are still important to Windows design. As a default Windows app, Edge should reflect this.
