SOLVED

Discussion - Updating our interface with Fluent touches

Microsoft

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.

clipboard_image_0.jpeg

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.

479 Replies

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

D-AjdyRW4AEcJ9_.jpg

And here's a concept of the context menu with the acrylic effect too: https://dribbble.com/shots/6220992-File-Explorer-context-menu

explorer_contextmenu_crop.png

 

Also, for better visualisation, I've attached the images too.

Anaheim is such a magnificent name to call Edge browser, gets me every time 🤩
The context menu looks so beautiful. I wanna see it in dark mode!
I think Microsoft is careful with using designs like that because it could contain animations and designs that would require more GPU and hardware in general to render them.
but I'm sure they can optimize it very well that even people using low end hardware would enjoy it.

@YgorCortes Those concept are literally everything Edge needs right now, they're pure perfection. @Elliot Kirk , if you need references, look at these!

Nice designs! :thumbs_up:

@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 :lol:).

 

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!

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
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 The Old Edge ui is great, please bring it to the new edge!

Edge.png

It's available already. try Edge canary or dev, they have exactly the same options

@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.

One thing that I would love to see in the new edge mobile would be the ability to have the address bar at the bottom if the user wishes to have it, just like in Windows 10 mobile. With larger smartphones it's annoying to reach the top for the address bar. Excited to see upcoming fluent design changes!

@roxton_ - I'd go even further: open source the original Edge browser ;)

Honestly wondering if everyone happy with the current address bar and tab size all have some level of vision impairment. It's massive. It's bigger than Chrome's own, massive size post-Material Design update. Give us a "compact" option. My screen real estate is valuable, and I dont need a giant omnipresent reminder of what webpage I'm on. 

@Elliot Kirk Hi there!

I'm absolutely positively impressed by what you and other people behind this project have already done and I thank you for that!

My suggestion is simple, but totally pain-relieving for curios-minded:

in tab context menu ⁊≡  in "Move to another window" submenu  add  "Move tabs to the right to new window"

(similar to already implemented "Close tabs to the right" feature)

Thanks! ,)

Actually, if it bothers you so much, you can install ANY theme from Chrome web store https://chrome.google.com/webstore/category/themes
grab a .crx file of a theme;
in “Settings and more” (…) in the upper-right corner select Extensions and turn on "Developer mode" on the bottom left side;
drag and drop the .crx file here
✔ Done!

@murrena 

Actually you don't need to do that anymore. here is an easier way

 

Use chrome theme in canary build guide

https://techcommunity.microsoft.com/t5/discussions/use-chrome-theme-in-canary-build-guide/m-p/111611...

I don't have vision impairment, but i still love the bigger UI in Edge when i compare it to the miniature UI design of Google chrome.
i think the developers should add a slider to the Edge settings so users can drag it to the left or right to adjust the UI scaling.

@HotCakeX I want transparancy on the Mac version too :)