Forum Discussion
MicrosoftDiscussion - Updating our interface with Fluent touches
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
Elliot Kirk Thank you for kickstarting this discussion! Here are my thoughts.
- 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.
- Seems like a legit request, although I'm fine with the way it is now.
- Many people seem to ask for a transparency effect on the title bar akin to that of old Edge, but I was never too fond of that, especially in dark mode, because depending on what is behind the window it can look quite ugly. Since most people (I assume) usually run the browser maximized anyway, there is little value to derive from transparency up there, especially on such a thin strip. In addition, it seems that Microsoft has been backtracking on background acrylic lately. The Fluent Design guidelines actually don't intend it for NavigationViews anymore - as can be seen in the removal of background acrylic in Feedback Hub and Your Phone beginning with 1903. It's also gone from search in 2004 (unfortunately). Now don't get me wrong, I do like acrylic very much, including background acrylic in apps such as Calculator. However, I think what would be more appropriate for Edge would be the same effect that both Safari on macOS and the Microsoft Store itself have - in-app acrylic on the title / address / favorites bar area that shows website content underneath as you scroll up. It makes the entire interface feel more connected, looks good and is much more dynamic and lively than having plain background acrylic there. EDIT: Context menus (and the ... and favorites menus) are other places where acrylic would make sense.
- I don't agree with this, in fact it seems entirely consistent with the current Fluent Design guidelines as far as I can tell. Except for the InPrivate badge, that one is way too rounded, for some reason.
- I think it's perfect as it is. You could always handle this like Chrome where one can change the size of this area - in fact, you could make it even better by adding a user-facing option for this instead of hiding it behind a flag. But if it has to be one or the other, I'd rather keep it the way it is now. I never thought I needed more space up there (even with the favorites bar enabled) and it feels more comfortable with some non-excessive height than when it's tiny and squished together.
- I'd always dig this.
- I'm fine with the way it is now, but I guess it'd be consistent with other places of Windows, so it seems like a legit request.
Thank you for reading all our feedback and keep up all the good work!
A option would also to be to use the Windows settings. There you can turn transparency on and off - and progams could just respect that setting.
- The Opacity was high enough to prevent that.
