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 think this one is easy: Windows should be consistent. You have a default toolkit in Windows called WinUI, that should be available to UWP and Win32 apps alike this year. Microsoft Edge should look juste like that. Same size, same animations, same rounded corners, same behavior.
Opening a WinUI app and Edge side-by-side should show the same scrollbar, the same buttons, the same tabs, and the same fluent design animations if possible. It should feel native.
Anything else is inconsistencies for the user.
If consistency with Windows 10 was the main spec, this debate would come to an easy resolution.
But I'm currently using edge on a Macbook at work.
For the sake of users on other platforms and users who don't really care for Fluent (which are many) please proceed slowly and thoughtfully. Many users, once they get a whiff of the old edge UI, will immediately proceed to download chrome.
Maybe try to make it consistent with Office suite at first, since many people are already used to it.
UI features (not just design language) and accessibility, gestures etc. are going to be more important in getting users to give Edge a try.
Put a pause button on the tab card, like you do with the Win10 taskbar, for example, and people will give the new Edge a second look.
Personally, the more I can use Fluent on my Macbook at work, the better -- but I know not everyone agrees.- Your reply is spot on. Someone else pointed out the scroll bar isn’t even the new scroll bar with chevrons that we see everywhere else in Windows.
Hi again,
A summary regarding sizing things:- Have a resizing slider for *all UI elements*
(not each one individually, just *all*. These are incredibly useful in my experience and can possibly follow font size.
- Option to autohide the browser UI elements when in fullscreen,
as in classic edge or Office. (rather than hide them completely as in Chrome--though that should remain an option)
- Option to shrink UI elements as the mouse moves away
or when scrolling down for touch users.
(IDEA: add proximity sensors to the top of the new surface devices, so that when your finger comes close to the top bar, it enlarges. The touchscreen in my midrange car has had this since 2015)
- Have different spacing options for touch and for mouse,
as in Windows 10 and Office. (literally just a toggle, nothing too complicated for the end user)
I think this should make everyone happy when it comes to the size of things (touch users and mouse users are comparing apples to pears in the size debate.) and when it comes to the workspace real-estate debate.
That aside, the light effect under the mouse is crucial, I think it's fantastic!
- Spoiler
A summary regarding sizing things:
- Have a resizing slider for *all UI elements*
(not each one individually, just *all*. These are incredibly useful in my experience and can possibly follow font size.
- Option to autohide the browser UI elements when in fullscreen,
as in classic edge or Office. (rather than hide them completely as in Chrome--though that should remain an option)
- Option to shrink UI elements as the mouse moves away
or when scrolling down for touch users.
(IDEA: add proximity sensors to the top of the new surface devices, so that when your finger comes close to the top bar, it enlarges. The touchscreen in my midrange car has had this since 2015)
- Have different spacing options for touch and for mouse,
as in Windows 10 and Office. (literally just a toggle, nothing too complicated for the end user)
I think this should make everyone happy when it comes to the size of things (touch users and mouse users are comparing apples to pears in the size debate.) and when it comes to the workspace real-estate debate.
That aside, the light effect under the mouse is crucial, I think it's fantastic!
Hi there,
I totally agree, especially when it comes to the requirements for touch-users (like me) vs. mouse-users, which are extremly different. Your idea of resizing (or even better: auto-hiding) the UI elements when scrolling down on tablets sounds pretty cool. I would like to have that, but only as an OPTION.
That said, auto-hiding the UI in fullscreen mode is already implemented on Dev and Canary using edge://flags/#edge-enable-shy-ui , but sadly this only works with mouse and pen, but not with finger touch. MS, please add this function for touch-users too, we really need it.
Generally, I can understand the wish for smaller UI and transparency, but again only as an OPTION. I still remember with fear when the virtual keyboard (SIP) became transparent in Win 1803 and therefore completely unusable for me until it was reverted back.
From a touch-users point of view, I have an additional (and as I think important) request regarding the tab size:
- if you have about 25+ tabs open, they become too small to use and I often close them accidentially
- also at this tab size you can't see the content anymore (only the close button) and have to guess and try multiple times to find the right tab, because you can't hover with the finger like you do with the mouse
To avoid the above, please make the tabs a fixed minimum size and then scrollable like in Edge Classic, that would be a big improvement.
Thanks and keep up the good work.
I really like that you guys are talking about adding transparency to the titlebar, making the text in the omnibox smaller and making the tab band smaller on non-touch devices.
I don't care for the reveal effect. The only thing related to animations I care about is this bug: https://techcommunity.microsoft.com/t5/discussions/animations-on-buttons/m-p/1095476
Every time I look at the roundup of common feedback, I wonder what people expect when they ask that the interface be updated to align with Fluent. The Fluent Design language seems everchanging.
I hope that the window buttons are made square to fit in with Windows 10 and I also hope that the spacing between extension icons is reduced. I'd also really love a scrollable tabstrip like Firefox. I think that the rounded/stadium-shaped InPrivate badge doesn't suit Edge. I don't mind how round elements in Edge are and prefer it over Chrome anyway. What I do wish some changes would be made on are the global media controls and the html forms controls. There are also inconsistencies with that dropdown and the one found in the immersive reader.Edit: Just remembered! There's a bug with tooltips. Some popup from random windows, even if they're minimised. Aura tooltips don't have a shadow. "Zoom" in the ellipses menu isn't greyed out and could look like a button. and there's this: https://techcommunity.microsoft.com/t5/discussions/dev-channel-update-to-81-0-381-0-is-live/m-p/1105706/highlight/true#M21360
- If its market share you're after, I don't know how much these changes will help. I liked the old edge UI -- I really did! -- but I think most people (not necessarily the ones that contribute to this forum) just want to feel like they're still in Chrome. In fact, I like that it is basically Chrome plus a few features, and I think other adopters would also like that. (Imagine opening Chrome except that it's more beautiful and has a scrollable tabstrip?!)
That said, there are obvious changes that could be done, such as a scrollable tabstrip, scrollable address bar (it's ridiculous that there is no scrollable address bar without first going in to edit the text), ability to make windows narrower, all the things that old Edge did better.
I think, for the sake of workspace size, that there should be an *option* to autohide [certain elements of or all of] the top bar, or an *option* to make it smaller until the mouse comes close. Perhaps one could choose how they want their full-screen UI, whether autohide as in old Edge and Firefox; or as it is now -- as it is in Chrome.
I also think the size slider for all UI elements is a good idea, or just two or three options as there is in office.
Why not make a few animations or UI samples as gifs and ask people to vote?GrahamJockey I fully agree, having the ability to only see certain UI elements on hover would greatly decrease overall screen clutter if done well. Having the ability to auto-hide the favorite bar for example would be a great addition.
The auto-hide feature could also allow for more UI elements to be enabled (such as side panels) and would be an effective way to further develop functionality while maintaining an overall clean and de-cluttered aesthetic.
Fluent or not isn't important to me.
But there is a important thing, do not "simulate" UWP controls within Win32 application, use real UWP controls like old Edge are acceptable.
They will looks same at first look, but not really same due different code base, that's really bad experience, difference size, color, animation, also different behavior on user inputs (click, keyboard press), this happened in other Microsoft produce, like Ribbon UI inside Windows Explorer and Office series application.
But, Please allow hide cast to device option in right click menu, it is totally useless and the longest item in menu.
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!
- I completely agree. Not all aspects of the original Edge Legacy's design language were perfect.
- "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."
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.
- This is false. They are partially backtracking with it, but Search missing acrylic was just a bug and is now back in the latest build. Also, acrylic is a key part of Edge’s design that makes it Edge, unique from other browsers. We NEED BG Acrylic. The “backtracking” needs to stop!
- Good catch about the latest build. However:
"We fixed an issue where the Search window wasn’t showing acrylic at the top."
It mentions only the top, so removing it from the rest of the search UI may actually have been intentional. I'd hope it isn't but even in that case, it's probably to stay as it is for all of 2004's lifetime. But alright, let's forget about search.
Acrylic is a part of Edge's design but I don't think that needs to be background acrylic. The in-app acrylic I suggested would still make it stand out among all other browsers on Windows while (in my opinion) looking much better. So I disagree that Edge needs background acrylic. Acrylic would suit it well (another place it would be good is all the context menus) but not necessarily background acrylic in my opinion.
Great job guys. I'm digging the way the new edge is coming together.
I sent feedback regarding my only concern which was the way the close, maximize, and minimize buttons have been shortened compared to the original edge. The shortened buttons don't do a good job with the alignment of the UI.
Regardless, though, keep up the good work!
Elliot Kirk Thanks very much for this post, very helpful to understand how the team is thinking about the changes and its impact to users.
For "The address bar and text are too large," I would love to see the spacing between my icons (both extension and Edge) become much more similar to that of Chrome. For me, it's a little clunky when it's so spread out.
Thanks for the consideration!
- I absolutely agree about the space between icons, in macOS they are much larger than in Chrome and this forces the address bar to shrink.
- If this is going to be implemented, please make it optional as the current design is more touch-friendly.
- Most of these things are just visuals which won’t impair the touch functionality, also, MS would never let touch functional be reduced
Great categorization job!
I want all of the above
"
- 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."
my only problem is the one in red color.
please don't implement it or if you are going to implement it, make it optional. I really love the current size. it would be best if you add a slider in Edge settings, for scaling down/up those UI elements.
bigger UI elements and address bar is one of the big reasons why I love new Edge and hate Google chrome.
on Google chrome everything is too small.
Also add Transparent or Acrylic theme to be one of the Edge browser themes to choose from.
HotCakeX Same Here !!
The Big Design Is One Of The Top Reasons Why I Love Microsoft Edge
On Chrome The UI Is So small That Its Difficult To See On Bigger Screens ..
We Don't Want To Make A Copy Of Chrome And Other Browsers .....We Want To ALways Make A Better And Powerful But Easy To Use Microsoft Edge!!
- Exactly 100% truth!
- Yes, a slider is one of those things where it gives you a lot more control, but is really easy to implement.
I see why there is value in making the text smaller - the top of the screen is messy and overloaded. Especially when lots of tabs are open. OTOH, small text is harder to read. I wonder if some kind of alternative might be better, such as shrinking the tabs/address-bar unless the mouse is over it?
Like the auto-hiding taskbar on windows, but less extreme (i.e. don't hide it entirely).
For me I always want to see the address of the page I'm visiting but always seeing the names/icons of the tabs and the control buttons is irrelevant - I know tabs and controls are at the top of the screen if I need to access them so auto-hiding those would be fine. The desire to always see the address is why full-screen mode is largely useless to me.
Just food for thought.
