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
Elliot Kirk The Old Edge ui is great, please bring it to the new edge!
- It's available already. try Edge canary or dev, they have exactly the same options
- I am glad to know that they take into account the opinions that are made about it. I would very much like to have the look of the old Edge again, with everything applied according to Fluent Design. I agree with all the points that have been mentioned. As for the option to make the browser bar smaller, there should be an option for this, so people who like to use the current size should keep it; and those who want the small one should just enable it. Well, that's my opinion. Thanks.
Elliot Kirk As it turns out, I may have responded too quickly about the spacing of the extensions (in my previous post, I stated that I preferred the spacing of extensions to be similar to Chrome, Firefox, et al).
After using the beta (and now stable) version for a length of time, I'm actually getting used to the extension spacing and usually prefer this spacing most of the time now (though to be honest, with at least 14 extensions currently installed (!), perhaps having an option to "compress" the extensions or have a "standard" width might satisfy the broader customer base and my occasional change of mind
).I also like the current size of the toolbar and address bar, and would strongly advocate against having a default smaller size.
- 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.
Congratulations on the launch, thanks again for listening!
- mottsawce
Microsoft
Elliot Kirk Love where this is headed and it's great to see Edge on mobile iOS devices now.
- ROUNDNESS
- I generally disagree with #3 (reduce the rounded corners). I love the rounded stuff and would like to see more of it implemented in the Windows 10 environment (corners, buttons, etc.). It makes the interface more "friendly" and feels less fragile (in other words, it's more inviting to touch/click). That said, if there's still some basic roundness to the UI, I'm good with it - just don't go hardcore on the sharp edges.
- TRANSPARENCY
- Transparency with very smooth blurring FX would look amazing, just be wary of any performance hit
- EXTENSIONS
- Love the ability to add chrome extensions, that was an amazing add
- BOOKMARKS
- You've got all the core functionality nailed with bookmarks. If possible, I'd like to see more innovation with the bookmarks bar. I love using bookmarks and spend a lot of time organizing them, but they definitely clutter up the UI. Maybe there's a way to make these more space-efficient or look cleaner - or maybe there's a show/hide type of feature as the user mouses near them (might be tricky for touch devices).
- The bookmarks functionality on iOS (mobile) was a little confusing and it seems to take a lot of taps to get to the bookmarks bar. I like the concept of having "mobile bookmarks" and regular/desktop bookmarks but I'd like to be able to access my desktop bookmarks bar with less taps (and maybe set a default bookmark set)
Thanks for reading the feedback and keep up the amazing work. I've completely switched over to Edge on all my devices now and you guys are killing it!
Elliot Kirk Original Edge had one of the best epub renderers. Is there a chance this could be open-sourced or extracted as a separate app? Sorry for off-topic.
- Yes I like rounded corners better too, I hope they keep them and add them to more of Windows as well.
- ROUNDNESS
This is awesome! One of the things I'm missing the most on the new Edge is Fluent Design. Honestly I'm completely fine with the borders and UI size, I'd like for them not to be changed, or at least for it to be an option.
Something I'd really like to be added too is the acrylic (transparency) effect on the context menus (including the three dot menu on the top right corner and the right-click menu). Also please don't forget the reveal effects when hovering.
About the animations, the Windows Start Menu has a great example of how the context menus should be animated (the context menu starts animated from the point where the cursor is.)
Here's a concept of Edge with Fluent Design on which you can see the acrylic effect: https://twitter.com/itsMichaelWest/status/1143953352662953986?s=20
And here's a concept of the context menu with the acrylic effect too: https://dribbble.com/shots/6220992-File-Explorer-context-menuYgorCortes Pretty. Maybe MS needs to hire this Michael West dude.
The links I had posted were repeated, so here are them again, this time the correct ones:
Here's a concept of Edge with Fluent Design on which you can see the acrylic effect: https://twitter.com/itsMichaelWest/status/1143953352662953986?s=20
And here's a concept of the context menu with the acrylic effect too: https://dribbble.com/shots/6220992-File-Explorer-context-menuAlso, for better visualisation, I've attached the images too.
YgorCortes I really like that. I also think that they should have that lighter effect around the mouse like in the current version. Its most notable in dark mode.
Notice how keys around the cursor are lit up, even if they're on a different key.
Also note that on long lines such as the taskbar:fast_down_button: will glow around the edges and (though you cant really see it on the recording) bulge ever so slightly.
Elliot Kirk - add reveal effects wherever possible (all context menus, buttons, tabs) and some delicate Acrylic effects here and there (maybe customizable in the settings). That's about all, I think. Edge should show other developers how such things are done in a Win32 application.
Elliot Kirk First of all, thank you for finally approaching the UI issues.
Regarding the questions, I personally do not care about being able to re-colour or theme the browser, I would rather appreciate a more consistent design of Microsoft's products - something you have a great tradition to fail on. If you look at Windows, the start button is square, the Cortana bar is square, the task bar icons are square, the live tiles are square, the buttons are square ... in your Edge, everthing is rounded - I think you get it.
Using the browser almost exclusively maximised, I almost never see much of the translucency of the title bar. However, it is still a cool feature and it still would be nice having the fluent look of menus and context menus as one of the guys here mentioned.
I was annoyed a long time by the size of the address bar, which is larger than in IE and the first Edge. However, I finally found that the thing that bothers me is not the address bar itself, but the very weird behaviour of your Edge adding additional spacing at the top when it is not maximised. I do not see the point of wasting the pixels at the very top if the browser is windowed or in a side-by-side configuration. Can't you just get rid of this?
Animations are not a top priority for me personally - except for if you consider the swipe back and forth behaviour with the whole content moving with the finger an animation. This was a much better indicator of what is happening than the weird blue arrow, which makes the interaction feel as if something would not work.
Reveal on the buttons etc. instead of the solid colour highlight would also a bonus - you remember consistency and so ...
Btw., as a developer, I wonder whether Microsoft plans to bring the fluent UI features to Win32/C++ as you are adding it to the browser?
- The squareness of UI elements in Windows will be going away. A slight rounding of corners will be implemented. So Edge is leading the way, here. Windows and the other Microsoft apps will catch up, probably within a year.
I agree with this concise and attainable list of improvements. It will go a long way to keeping the insiders energized to continue to contribute. We have been very engaged and have taken a stake in moving Edge up in browser share standing. I appreciate this entire process and have personally seen the team acknowledge my feedback. Thanks for your hard work. And thanks for delivering both the product and this list of update candidates.
Elliot Kirk
Please get rid of the awful yellow favorite icons. It's too distracting and does not go well with the rest of the design specially in dark mode, not to mention it looks outdated.
The interface in modern UI should to get out of the way and let the content shine, not steal all the attention like these yellow icons. They almost burn my eyes every time I open a new tab.
At least give us the option to choose, I know some people still like the yellow icons, but the default should be the white outline which is consistent to the rest of the design.Elliot Kirk I definitely think adding Acrylic and Reveal effects will do wonders for making Edge Chromium feel much less out of place among the other Windows apps. However, when it comes to the Acrylic effect for the title bar, it shouldn't be as strong as it used to be. Something like To-Do would work beautifully, keeping those lovely blur effects without impacting readability:
