Forum Discussion
Elliot Kirk
Microsoft
MicrosoftDiscussion - 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. ...
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
MissyQMicrosoft
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
MissyQ Can you please let us know if the below aspect will be addressed? I have raised it before several months and also sent feedback. It's the only thing keeping me and many other users on Chrome!!
Would love to see density features. I would like Edge more compact. The top area (favourites bar, tab bar, address bar) is too large, in my opinion.
With that said, the current Edge looks amazing. The slightly rounded elements are great. Colours are very attractive. Love the icons in context menus. Overall, exceptionally clean UI.
More compact dropdown menus in folders and content menus would be appreciated, along with less padding/margin in the top right extension buttons. They're too separate.
ilikered
Seriously, just add 2 versions of it. Make mouse clicks 50% smaller and touch taps 25% bigger and everyone's happy. A good example of this is what Firefox and Legacy Edge do.cjc2112 Yes, but I'm not sure why it's so hard to listen to this feedback. Anyway, I'm sticking to Chrome till this is addressed like many users are doing.
As 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.
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.
- 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 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.
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.
- Well, for the next time be more careful when they promise new things and in the end they won't be implemented.
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.
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.
