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
I disagree with a tab style change back to the old Metro based look from Windows 8 onwards because it's in conflict with the new slightly rounded edges of the https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f, also to be found in Windows 10X, where many changes are rolling out basically right now with the new icon theme, these also with a more "friendly" and rounded style.
It's honestly a little hard to believe the complaints about that when Windows 10 is so criticized for not following its own design guidelines. Changes for a more square look would break it once more and Chromium Edge would stick out like a sore thumb compared to the more rounded edges soon'ish to come to https://www.theverge.com/2020/3/3/21163687/microsoft-new-windows-10-start-menu-design-live-tiles-changes etc.
- I really loved the overall user interface of Edge Legacy and tab shape. The whole design was nice, and I think it added to the safe feel of Edge. I don't really like how the tabs in the new Edge look so much like Chrome's. I have been a loyal Edge user for a while, and preferred Edge over Chrome. I don't particularly want the new Edge to look like an "Edge-ified Chrome". I love the new speeds and compatibility with the new Edge, not to mention how I ABSOLUTELY LOVE the customization and privacy settings. I must say, great work to the Edge team. It can't be easy to please everyone, as well as pull in some Chrome users. I just really liked the overall look of Edge "legacy".
What's the point of creating XAML islands when even Microsoft guys are not using it?Elliot Kirk
The larger elements on the new Microsoft Edge are essential; this is because it facilitates use with touch as having smaller elements like Chrome would make it harder press. Touch is core part of Windows 10 and therefore the default browser should also reflect this. On Chrome, the user interface is enlarged after enabling Tablet Mode on Windows, but this is not a solution as when using touch when not using Tablet Mode would be difficult. Microsoft Edge works extremely well with touch whereas Chrome does not and making changes would only worsen the experience for touch users. My conclusion is that keeping the large elements such as the address bar, buttons and context menu options is essential and should not be changed.
As mentioned before, Microsoft Edge is a key part of Windows 10 and therefore the design and user interface of the browser would match the Operating System. Therefore, adding fluent design elements is important, however, it is not critical and not as important as the size of the elements as discussed before. Additionally, Windows is rounding off the corners around the OS, if this is where Microsoft is headed with Windows then the corners on Edge should also be kept the same to reflect the future changes to Windows.
To conclude, the size of the UI elements such as address bar and buttons should not be changed to make the UI more touch-friendly. Fluent design should be added to Edge to make it more coherent with Windows. And finally, corners should be kept the same if Windows will also have rounded corners in the future.
- Totally agree. I don't call Edge UI elements large, they are the RIGHT side, what is abnormal and small is Chrome UI.
because of their fault, people think Edge UI is big whereas Edge is normal but Chrome is too small and that makes Edge UI looks big.
Edge UI is pleasant to work with on desktop, I have a big screen for PC and a small laptop screen 13" and Edge looks just fine in both of them. - I discussed the rounded corners in my now removed comment. basically, Microsoft's squared design is so infused into Microsoft's design and identity. The Microsoft, Windows and Office logos are proof of that. They haven't really moved on from the Metro/Windows 8 era, especially with their Office logo. They even made windows borders square and haven't changed that yet. They also still aren't using WinUI for the Windows 10 shell.
The larger elements are fine for touch (I would actually prefer them to be bigger) but I expect menus to be smaller when I open it with my touchpad or mouse. I also expect them to be even smaller when I open menus on a device without a touchscreen. WinUI/XAML adapts although the system tray in the taskbar adapts even better.
- Re: "Provide a transparent theme for the browser frame"
I cannot understatement how glad I am that the dev team is planning to integrate this. Thank you in advance for implementing this! I cannot wait. Every new feature would be okay but Edge in its current form is also quite good. So, any major UI changes could be made optional. I do not want any more sharp cornered shapes (tabs, address bar, buttons, etc.). Rounded corners are also beautiful and are in sync with the evolving fluent design.
I too had not liked the large font in the address bar and other areas initially. But I have now grown to like it as it is and any change to the font size should be reversible and not permanent (font size setting like A A A would be cool).
Not everything has to be "like Chrome". Let Chrome be Chrome and Edge be Edge. Thank you.
foo_bar I completely agree. I would love to retain the larger font size. It is MUCH easier to read, and supports people without them having to turn on an accessibility setting.
I also think Edge has a real opportunity to take the reigns on accessibility and stand apart from other browsers by becoming the go-to for accessibility (whether impaired vision, or reading or focus problems through the immersive reader, reading pane, etc.) as well as the go to for researchers, writers, and academics through the collections pane. Add to this the developer tools for coders, and you have a pretty broad market just by attending to a few small details and making sure those elements that work best on edge (font visibility, collections, dev tools, reading panes, immersive reader, etc.) are absolutely functional and set the tone for other browsers.Just to weigh in on the squared/rounded discussion, I actually preferred the squared corners because they looked good and were different than what EVERY other browser does, and I think Edge stands apart from other browsers. I loved the design and features of the old Edge, and was a bit dissappointed/concerned when I learned it was being rewritten in chromium (although so far I think it was a good move)!
Yeah, the Immersive Reader mode is the pinnacle of all accessibility features in Edge. it still is missing a few features that were available in Edge classic but I'm sure they will come back too.
the latest one that was added is "picture dictionary"
Looking forward to more fluent!
Particularly some transparency/acrylic in the top bar, that enables the desktop background colour to come through.
A smaller bar at the top would also be nice as default, though I get the need for some people to have it bigger as an option.
The rounded corners are fine as they are.
I really like the new edge, and I think instead of making it more square, try to make it a little more square, and port over the new rounded corners to some other Microsoft apps, like what has been done in To Do.
I think the transparency effects would be totally cool, and would also help distinguish it from Chrome. I also think the UI should be a choice between large and small, since some people like it small and others may want it to be bigger.
If highlight colors would be added, there should be an option to sync it to your Windows highlight color to create a more coherent theme.
Other than that, I really like the browser, and will continue using it for the considerable future!
- is this the right place to ask that all the options on the Edge menu can be pinned to the toolbar like the new Share charm? I don't need the favourites button but I do need the History button there - which I can have in old Edge but have to trawl through the menu for in Edgium
Update the user interface with the Fluent Design System
whatevs but please improve the file dialog. it's nice to see the file dialog has been updated to look more like the rest of Windows but we still don't have the full file dialog that exposes different sources like the Photos store (see screenshot for an example)
Make tabs more square and less rounded, like the current version of Microsoft Edgeyes, I'd prefer that
Provide a transparent theme for the browser frameno thanks so if you do that PLEASE make it optional
The address bar and text are too large
I like the size, please don't make them smaller
Ability to add distinct color or color themes to the main browser interface.if you do that PLEASE make it optional
Add transparency or other material effect to the main browser interface.again if you do that PLEASE make it optional
The corners of the tabs and browser buttons have been rounded too much.prefer the more squared old Edge look
Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.make sure any changes don't affect the size of these elements on touch screens
Update or add animations to user interface.no thank you - some of us find these very distracting and they can have accessibility issues so if added please make them optional
Add a reveal effect to highlight on mouse hover.sounds distracting so again please make that optional
