Forum Discussion
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. 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
- Pls highlight in color the Active Tab on vertical Tabs Bar. Move "CloseTab" button to the far left on Tabs in the Vertical Bar for easy fast closing without drugging mouse to the far right on each tab.
- Plz give us a compact option for the extension icons beside the URL bar, Chrome is much more efficient here.
Ryrynz Not quite sure which version of Edge you are using, but there is already a compact button for extensions...
Just right click it to customise which extensions are shown.
Check settings if it is not showing.
The subtle changes to Mica + Transparencies are welcome, but what I'm wondering is when will fluent animations be added?
Right now, they are all boring opacity animations, as well as being like the ones in Chrome.
With WinUi 2.6 a lot of cool animations have been added, it's time to introduce them to Edge.
Thanks.
Yeah, now what we need is the Fluent animations. The current fade animation is already inconsistent to what UWP used with sliding animation. Though maybe WinUI 3 doesn't have this which can be used by Edge which is not UWP?
The discussions about rounded corner I think is close since Windows 11 is here, and clearly new Fluent Design language now use rounded corners. I think we can move on from this. But there is a new issue with rounded corner, the radius now doesn't match with the radius use with new Fluent Design in Windows 11. Edge context-menu rounded corner for example is actually a lot smaller than the OS context menu and window. I think its time to address that.- :hundred_points:% agree with you, inconsistency in rounded edges, inconsistency in dark theme colors, and lack of fluent animations.
quietrobot This is wrong, because WinUI2.6 does not support Win32 applications. It only supports UWP. In fact, you need to wait for WinUI3. It supports Win32 but does not support UWP. The appearance of WinUI2.6(2.7+) is consistent with WinUI3. This will Unify the look and feel of UWP and Win32 programs
Shompinice So, will we have to wait until the end of the year for the fluent animations to be integrated?
I just interested on "Add transparency or other material effect to the main browser interface." I can't wait to see those, i already have app to make my browser transparent but "other material effect"? i can't wait to see what it's look like:)
I also curious what do you mean by "Add a reveal effect to highlight mouse hover" I hope it was optional though since i didn't really need it. But i also curious to see the feature:D
Really enjoying the new Windows 11 visual changes with Mica in the title bar. However I'm strictly a dark mode vertical tab user and have been enjoying the "Hide title bar" feature which saves a lot of space and looks very elegant—though in these situations, Edge's UI reverts to a flat opaque gray. I'd really like to enjoy Mica without sacrificing valuable screen space or vertical tabs, and I'm hoping that eventually the rest of Edge (namely the top bar/address bar and the vertical tab bar) gains Mica in the future as well.
Also it might be nice for the intersection between the vertical tab bar and the top bar to be rounded, for better consistency with other Windows 11 apps like Store.
Ideally, the entire Tab bar/address bar area will be updated to support Mica (maybe the settings page too?) and the rest of the Menus (Bookmarks, Share, Collections, Extensions, Downloads, etc) will be updated to add Acrylic. Those are really the big visual changes that can be made to make it more Fluent - though I low-key kind of want to see a radical redesign of the browser interface in general to be Fluent. No clue what'd that look like though lol.
- not bad iders
hi, I'm new to this discussion but I just wanted to say that windows 11 is right around the corner so i really want the rounded corners in new edge to stay and it looks fine to me cause win 11 will have rounded corners too so that'll mix well and I really want some more animations to the browser and in the install and also transparency and something I haven't heard about is that like this Microsoft page and other ms pages they aren't dark mode enabled.
- Please, NO round corners. I really hope Windows has an option to disable that.
Now We got the chrome like pop-up when we hover the cursor over the tab, Have a look
For Me That's Really Awesome
Please Share Your Thoughts Below!!
Thank You Have a Great Day
Josimhae!!
- You know the worst part?? They made the address bar smaller in stable too!!
- why are you trying to push Edge to become "like" Chrome? If you want it to behave like Chrome just go ahead and use Chrome - can;t you? Why are you pushing the ruin the Edge user interface now that Chrome has ruined its interface? Give everyone a break and use Chrome. Leave Edge alone
- I'm not pushing for anything like that. I'm just asking for an option for the non touch user who has a lot of bookmarks organized in multiple folders on the bookmark bar and use 14-15 inch screens. The current interface is best suited for Touch Screens as well as bigger sized displays. It's probably Ok if you don't work much with bookmarks inside folders and don't use the right click context menus much. It's also probably Ok if you fall into the other category that I mentioned above. And also I don't think everyone's needs and opinions should be same. Me and multiple other users who are facing this issue, are only asking for an option and NOT asking for a permanent change to the interface. About using Chrome, yes that's what me and several others have been doing for the past 1.5 years, despite having a better option in Edge. We just couldn't cope up with this UI. And a thread that was several pages long which was discussing this problem, had also been deleted without any reason.
- One more thing, the thread we had on the Answers community for this issue had been deleted for some reason. It was here.
https://answers.microsoft.com/en-us/microsoftedge/forum/all/line-spacing-in-edge-favorites-list/7e029435-b85a-497c-a5b1-20ccc4d50c4b?page=2&rtAction=1585640628942&tm=1585640730616
Please for the love of God change the address bar size to what it was before last change. I can not read anything and there is no way to change it. AWFUL AWFUL User interface. THis was the main reason why I was using Edge vs Chrome and now you have taken this away. I guess I will go to Firefox or some other browser that has a readable addressbar
MS must not increase the size (by default), we are not on tablets and the font size matches other fonts 🙂
Or MS adds an option or it is necessary to increase the scale under Windows to 125 or 150% (or the pitch/resolution of your monitor is not for you) 😉
It's very good as it is now
