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 Thanks to you and the team for taking so much care about the feedback from us. I'm there since day one of the new Edge and so far it is a thrilling ride! I'm fully acknowledge the main points you've listed, but other than that I really want the Fluen Design back. So far the new Edge still looks too much like Chrome. I just want that the new Edge gets its own identity in terms of look & feel and fits much better into Windows 10 and the other Microsoft apps.
- Acrylic and Reveal are my hugest desires
- Make downloading UI like in Edge Classic / IE12
- Agree. Now it’s looks more like Chrome browser, please make some more independent look.
Well, I'll keep it short but simple.
- Ability to add distinct color or color themes to the main browser interface.
- OK
- Add transparency or other material effect to the main browser interface.
- This, just like the Settings-page of Windows 10. Implement it in Edge tabs and especially the address bar so that the content is somewhat blurred into it when scrolling.
- The corners of the tabs and browser buttons have been rounded too much.
- For me the tabs are too rounded, especially when the Edge window is not maximized. Browser buttons are fine for me.
- Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.
- The length of the address bar is way too stretched. Should be something like macOS Safari browser, or make is at least customizable in length. Although the address bar can be less stretched when add-ons are displayed right next to it, I like it minimal without seeing the add-ons buttons and so for me right now it's useless space.
- Update or add animations to user interface.
- Animations for sure. For example, the blue indicators in the Settings of Edge are not animated when changing category. This is animated in the Windows 10 build-in app Windows Security and Microsoft Store (bit different, but same idea). The blue indicator slides very nice and smooth to the selected category/menu. Strange this nice effect is still not updated in Windows 10 Settings itself.
- Also: swipe to go back or forward (with touchpad or finger for example) should have the same swipe effect as in the legacy Edge (very nice and comparable with macOS Safari), moving the whole page all together. Right now when swiping back or forward there is a very ugly arrow in some blue rounded circle visible on the side.
- Add a reveal effect to highlight on mouse hover.
- Should be smooth and directly implemented in the whole Windows 10 GUI if you ask me.
- Ability to add distinct color or color themes to the main browser interface.
Elliot Kirk I love the way you categorized the feedback on the topic. Please implement all of them. Would love to see them being implemented in the new Microsoft Edge.
- 1 Add transparency or other material effect to the main browser interface.
// For sure this is what we wanted! make it look more close to legacy edge!
2 The corners of the tabs and browser buttons have been rounded too much.
// Actually it's not a big deal, I love the current semi-rounded tabs and buttons (Google Chrome for example uses even more rounded elements)
3 Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.
// Don't sure at all that there are any problems with the size of address bar
4 Update or add animations to user interface.
// Refresh tab movement animation like in legacy edge
5 Add a reveal effect to highlight on mouse hover.
// Sure add this! this makes browser more alive - I agree that the design should be more fluent. While I agree with some criticism that the old edge was kind of ugly, I think that that was mostly due to bad proportions and lack of polish. Reincorporating acryllic and reveal will really help make the new edge stand out and appear more modern.
- Please don’t change the toolbar/address size. It’s perfect as it is. I prefer the new Edge over Chrome because of that 🙂
Yes! Using a decent sized font, even in the address bar, is very important for accessibility. "Squint print" is annoying to read fast. Accessible sites use larger print -- we're just not used to seeing that yet. Easy "skimming" of text is he goal.
On another accessibility note, the gray Immersive Reader and "Add to FAVs" icons in the address bar area need to be lighter in color. While the image contrast with its background when using the Dark Theme passes accessibility tests, it's quite hard to quickly notice compared to the colored icons or the white ones.
I want to have the same transparency I can get on Windows Terminal in Microsoft Edge
This is literally my biggest wish
- Who doesn't 😉
- Me too. And we had it before, but the darned new Edge had to remove it! I really hope that they add it back. Edge needs it BAD.
Carmello B. wrote:
Me too. And we had it before, but the darned new Edge had to remove it! I really hope that they add it back. Edge needs it BAD.um what?
Please, please, please make the InPrivate button blue, just like how it was in IE and classic edge. It looks so much better and more appealing if the color wasn't the same as chrome's. It's harder to see it in dark mode too, if it was blue it would be more noticeable.
