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
MicrosoftThank 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
- So what you are saying is:
- Edge uses the Chromium framework to draw the user interface and it's just too much work to implement Fluent effects like Reveal
- once again Microsoft makes a set of UX guidelines that they do not themselves follow
Am I right? 😉The thing is that fluent design has changed over the years from when it was announced by Joe Belfiore in 2017. Then the fluent design was a system for Windows 10 OS and Its app with cool features like acrylic effect and the reveal effect but now it is a design system used by every Microsoft product and it can be used by any developer outside of Microsoft to develop his/her app and it has also changed very much by using styles such as rounded corners for buttons and changed icon design. So, it is not like Microsoft is not following the set of UI design that it has made but is changing with the times.
If I would tell about my opinion, then I will still like those effects added into Microsoft Edge.
I guess on some point UX guidelines will be rewritten to match the current state of chromium-edge. Round corners were announced after adopting chromium, despite they break Reveal effect and in many apps it was replaced with simple hover light+shadow.
Acryl also cost too much on mobile devices and maybe it also will be removed at least for title bars as it was once with win8. I didn't see it on win10x demo.
Henry08 The old Edge disabled Acrylic when running in Tablet Mode. When Fluent was originally introduced, it was really cool and futuristic but now it looks like a Microsoft skinned material design. Too bad.
- I was still holding onto a bit of hope that you guys would be able to make a good browser by at least 2022...but after seeing that the dev team is too lazy to even change the browser from Chromium's design and will ignore the basics of their own company's design principles, I've given up hope. I hoped Edge would eventually become good enough to switch back to, but after seeing that you guys will read feedback and then ignore it completely, I'll be sticking with Firefox.
MissyQ If Edge is to be the default browser in Windows, I think it should look like the other default Windows apps. It can still do so while incorporating elements of the newer implementation of Fluent. Just look at Microsoft To Do--it keeps the rounded corners while still utilizing transparency effects (like the sidebar, but only in dark mode for some reason) and universal input methods like the right-click menus, tooltips, and dropdown menus that match those of the rest of the Windows system, unlike Edge. To Do looks to me like a great balance of newer and older Fluent designs.
Also, if you're not going to implement the highlight reveal that aligns with Fluent's "Light" philosophy, you could at least make the buttons not lag when hovering over them--just like every other Microsoft service that follows Fluent design.
In addition to "Light," Edge also doesn't follow "Motion"--right click menus for example just fade in instead of animating like pretty much any other Microsoft service that follows Fluent design.
Apart from rounded corners, using the same symbols, and shadows, Edge follows none of the design philosophies that other Microsoft Services use with Fluent. Edge's work incorporating Fluent design isn't done, as you seem to suggest.
MissyQ I clicked on the link you included for fluent guidelines, the page itself links to the guidelines for Windows which clearly state that Acrylic is part of Fluent for applications on Windows. I hope you take a look and reconsider as Fluent design is part of what made Legacy Edge so nice.
- 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.
MissyQ
I agree that not every app needs every available concept for Fluent Design unless it's relevant for that specific app. The official Windows style page for Fluent Design however lists Acrylic and Reveal as design elements which are now available to all Windows apps. Many other Microsoft apps are using them, and even the upcoming changes to Windows itself is using it more as well (e.g. the new Start Menu). Having Reveal hover effects would be excellent for accessibility and people using Eye Control or Mixed Reality. Having acrylic (at least in the top portion, Start page, menus/prompts, right-click menus, etc.) would be great too have for consistency.MissyQ You guys (I mean guys in Microsoft) always make stunning videos when it comes to UX. Say this video. It shows light, depth, motion and material, perfectly matching the fluent design introduced in 2017. If the design guideline evolves, it should be THEM who give us the sign, not you guys. Frankly speaking, the current design is better than before in some ways, and it's far better than Chrome. But it is less vivid than before, which follows the fluent design guideline better. Edge should fit in the OS better (which uses acrylic in more and more elements), not being an independent one in design.
- Well, for the next time be more careful when they promise new things and in the end they won't be implemented.
- The transparency effect/Acrylic effect not being implemented is a huge bummer.
it is technically and programmatically possible to implement in Edge. MissyQ Today Microsoft office 365 released the video "The Future Vision of Microsoft 365". In this video, the acrylic effect ( transparency) is almost everywhere.
The Future Vision of Microsoft 365
Please reconsider this proposal.
