Discussion - Updating our interface with Fluent touches

[Elliot Kirk]

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.

[#2]

@Elliot Kirk I'm actually pretty pleased with the current state of the GUI and giving that I have OCD that's major achievement.

The only thing I'd like to see happen in one of the next releases is that on Mac the tab close button is placed on the left side automatically.  For consistency... :)

[#3]

Who doesn't ;)

[#4]

@Elliot Kirk 

Ability to add distinct color or color themes to the main browser interface.

You can already adjust title bar color with Windows Color Settings, but this would be a good option for those who want the address bar and other UI to be a different color.

Add transparency or other material effect to the main browser interface.

I think transparency and material effects are unnecessary. It just reduces performance, and when the browser is maximized, you can barely see these effects anyways. I have disabled Windows 10's fluent design transparency in Settings for these exact reasons. Despite promises that these effects have negligible impacts, it does noticeably slow down programs, especially on less powerful hardware. Therefore, if you do want to add transparency and material effects, please make it optional. That way those of use who prioritize performance over visual effects can disable such effects.

The corners of the tabs and browser buttons have been rounded too much.

I think the current rounding is good. Not overly curvy like Chrome, but with just a hint of curviness to be pleasing to former Chrome users.

Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.

Please do not make the UI smaller! I agree with others that Edge's larger UI is one of the main reasons some people choose Edge over Chrome. Chrome's UI is way too small. Edge's UI is easier to see, improving accessibility for older people whose eyesight is no longer perfect. Even on non-touch devices, some people switch Office to "touch mode" just so the buttons are larger and more spaced out. If anything, some things need to be bigger. For example, the default HTML Select dropdown menu. On non-touch devices, the choices are quite small by default. An option to make them a bit bigger would help some people I think. As an example, Firefox shows taller options:

Update or add animations to user interface.

Animations are nice, but should not be excessive to the point where it would sacrifice performance.

Add a reveal effect to highlight on mouse hover.

As with other animations, it's nice as long as it doesn't degrade performance too much.

[#5]

Windows color settings only applies to the tiny top bar, not the Edge interface which covers lots of spaces.

if they do the transparency good, like in Edge classic UI, then it won't be using too much resources. it's not an active animation.

[#6]

That's why I said color options would be good for the address bar and other UI. It wasn't entirely clear to me what they want to color.

As far as transparency, on a machine with great hardware, it won't cause a problem, but on older devices and weaker laptops, classic Edge's animations did seem to slow things down. On my current machine, which I'd say is pretty average, disabling Windows transparency results in programs opening faster (not much, but definitely noticeable).

As Edge's obvious competitor is Chrome, and their motto always mentions speed, the last thing I want is for people to complain that the new Edge is slow because of transparency effects.

[#7]

Still it's Not unnecessary, transparency effect or Acrylic would make the Edge UI a lot better.
maybe they can have Light/Dark/Acrylic themes as default in Edge settings in addition to allowing an easier way to install And remove Google chrome themes on Edge. the way i see it, this would be the best for everyone.

[#8]

@Elliot Kirk @HotCakeX 

Also, with all due respect, before anyone even starts talking about implementing Fluent Design, Edge needs to completely adopt standard Windows behaviors that have been commonplace since Windows 7. I'm talking about fading the window into view when opening.

Like Chrome, Edge just suddenly pops into view when you open it, instead of gracefully fading into view like File Explorer, like literally every other built-in Windows program, like every UWP app, and like many decent Win32 apps. As the new standard browser for Windows, Edge needs to adopt this proper behavior as well.

[#9]

@Elliot Kirk 

I can agree with a lot of these pieces of feedback, as aesthetically it improves the look of Edge, makes it a bit more distinguishable from other browsers, and just makes it feel more integrated with the Windows UI language.

I think effects like material would work really well, but if not applied too heavy-handedly. For instance, a Favourites menu drop-down or a Collections pane with a faint acrylic effect would look really quite smart, as would the page links on the new tab page. Big areas of empty space, like as seen in the Settings page, might not be best for these effects as that'd be a lot of transparency. The hover reveal effects with a cursor would be a really great addition.

The UI components can be a bit more rounded than the old Edge for sure, and of course give the browser an Chrome-like look. I think bringing the rounding of corners more in line with apps like Outlook would be a lot more continuous with the wider system UI.

I have no issues with the size of the address bar etc, however. 

[#10]

@DinosaurTim 

---

@DinosaurTim wrote:

@Elliot Kirk @HotCakeX 

Also, with all due respect, before anyone even starts talking about implementing Fluent Design, Edge needs to completely adopt standard Windows behaviors that have been commonplace since Windows 7. I'm talking about fading the window into view when opening.

Like Chrome, Edge just suddenly pops into view when you open it, instead of gracefully fading into view like File Explorer, like literally every other built-in Windows program, like every UWP app, and like many decent Win32 apps. As the new standard browser for Windows, Edge needs to adopt this proper behavior as well.

---

I agree with you too, this is nice important feedback!

[#11]

this is all too vague and unorganized, Edge needs a proper public bug tracker, like Chromium. Are we supposed to use Chromium's bug tracker for Edge? I'm not going to waste my time and energy posting here anymore, when Edge has a proper bug tracker like Chromium, I will happily report issues. Until then, goodbye

[#12]

Maybe they read all of our comments, it's not that many you know
a bug tracker would be nice but i hope if they make one, it won't be as messy and bad as Chromium.
Firefox has BugZilla and their interface is a lot better and less confusing for end user.
just compare 2 examples:

Spoiler

https://bugs.chromium.org/p/chromium/issues/detail?id=346210
https://bugzilla.mozilla.org/show_bug.cgi?id=1412693

https://bugzilla.mozilla.org/buglist.cgi?quicksearch=sync
https://bugs.chromium.org/p/chromium/issues/list?q=sync&can=2

I personally like a forum, as a user it feels I'm closer to the actually developer and interact with each other better, just my opinion

[#13]

@Elliot Kirk 

I like the design of the new Edge and I also think that the address bar and text are NOT too large, please keep it as it is!

[#14]

@Elliot Kirk 

Maybe I don't understand the purpose of feedback. When I look at the bullet points of categories for improvement, I see a long series of personal preferences that have no actual impact on how a great browser should work. Person A likes their icons big, but Person B thinks they're too far apart. This all seems very subjective to me.

First, when it comes to themes, I would think any app should follow the theme set in the operating system. If my OS is in dark mode, then my app should be in dark mode, yes? If my OS is set for large icons, then my app should have large icons, right? To me, not only does this seems to fit the rules of a cohesive experience, but it would also seem to be in good service of accessibility. What's the point of the demanding tiny, squished together icons when the next person down from you needs larger icons for their eyesight? The bullet point list seems to be things that should be considered at the end of the process, after some core issues are addressed.

If you're going to be Chromium, then you should offer such an unmistakable value proposition that it would make me walk away from Chrome immediately. And I am looking to get away from Chrome: I'm really tired of the decisions that Google makes with their browser. Thus, I have high hopes for the new Edge browser. Unfortunately, what I see is actually less compelling than what I see in Google. I don't get the value proposition.

I'm surprised. If I were leading a team to build a browser, I would take a look at Google Chrome's forums, note every single thing that's making users mad, and build my browser around solving those annoyances.

Here's what I see:

• Can't control the new tab page to my liking. Look, I get it, you have to promote Bing. But I don't want Bing. I should be able to remove it from my New Tab page ... without having to install an extension. Just let me do it.
• Can't tell the difference between browser buttons and address bar buttons. What is trying to communicate to me by having some buttons outside of the address and others inside the address bar? I truly don't understand the distinction. Why would Immersive Reader, a supposedly amazing new feature, be relegated to an off-to-the-right quasi-icon? The button is in the row of navigation buttons. Same with favorites. I just ... I just don't see why these things are organized the way they are.
• Speaking of, someone help me understand why that darned user profile icon is there? Boy that thing bugs me in Chrome. And here it is in Edge now, too. That's actually super disappointing. I really really want that thing to go away. I do not need browser user profiles inside of Windows user profiles. If I need to create different Chromium experiences for things like testing, then give me an amazing sandboxing test tool.
• Sigh, the scrollbars. Please just use the OS scrollbars. Please.
• The many-tabs problem. Legacy Edge had a nifty way of handling this. But, it still wasn't great. I've seen that tabs-on-many rows. That's nifty, but not great. Tabs grouping? Nifty, but not great. Pinned tabs? Honestly, just solve the problem of needing to have 60 tabs open. Why so many tabs? What problem is the user trying to solve by having half the internet open on their computer? Is this the 21st century equivalent to Grandpa having every last square centimeter of his desktop covered in icons? I don't know. This needs more research. Here's a quick idea: you know how MacOS app bar thingy can magnify icons as you hover closer to them? Try something like that with tabs, as an option. Maybe good, maybe bad. Try it.
• Really? You had to make the menu icon three horizontal dots instead of Chrome's three vertical dots? Gee whiz, gang.
• The back button has a long press for extra features. So do the forward and refresh buttons. Why are there no smart options for the home button? Why not put the widgety thingies that you have on the new tab/home page into a home button long press? By gosh, I'd use that, especially if it meant I could keep my new tab page empty!
• Here's a fun feature idea: a browsing history scrubber. Give me a visual timeline representation of where I've been on a tab, or across tabs, whatever makes sense. But just imagine being able to slide my way through my browsing history visually, instead of having to remember every page's title tag. I'm on "Reply to Message - Microsoft Te..." OK. Which thread was that? Gosh. Actually, this might be a way to handle the many tabs problem. If I'm mobile, give me a way to visually flick through my browsing history, the same way I flick through my photo timeline. Now that's a feature!
• Can I please have a privacy button that lets me clear my browsing data per-site? Do you know how many times I've called a tech support line only to hear, "please clear your cookies." No! I do not want to sign out of the 500+ sites I'm in just so I can find out your site has a cookie problem. Grrrr. Let me hit a button, and poof! I'm signed out of that site only, no cache, no storage, but for just that site. (Would have to make a judgment call on clearing 3rd party cookies.) You could even visually close and re-create the tab to really drive the point home.
• Thinking back to the visual design, I'm still really confused by what I see. What's the difference between an app and an extension? Why is the Immersive reader icon on the address bar but not in the menu? Why is there Print to PDF, but not Save as PDF? Why is New Tab a plus sign on the tab bar, but a full icon in the menu? Do they do different things?
• Why are app updates still hiding in the About page? Shouldn't these be in Windows Update? Otherwise, shouldn't update be its own entry in Settings?
• If I go to More Tools, and I pin a page to my taskbar (YAY! HOW COOL IS THAT???) then why does the pin also show up in the Apps menu? I didn't mean to make an app, did I? And then, also, why is the pinned site still in the Apps menu when I unpin the site from my taskbar?
• Why does the New Tab page have its own Settings gear icon? That seems like a fragmentation of controllable options.
• Can I have a little kitty cat that chases my mouse pointer across the screen? My kids love kitty cats.
• Why do most of the menus have submenus, but not the Share menu? It insists on a pop-up window. That feels very inconsistent. (Note, for me, the pop-up window thinks for a moment and then disappears. I hope that's just me.)
• When I go to Settings > Site Permissions > Media autoplay and I try to set it to Limit, the setting stays at Allow. Hmm.
• How come I can choose to show the favorites button on the toolbar, but not any of the other menu items?
• On the Home button, why are the vertical and horizontal lines of the icon sharp single pixel lines, but the diagonal slopes are anti-aliased? Seems weird.
• OK, if that stupid Profile icon has to be there, shouldn't it be squared like the other icons? (Please make the stupid Profile icon go away, or at least be a menu item.)
• Uhh, something has definitely gone wrong. In all Settings dropdown boxes, I make changes, and I can see changes take effect (like turning on/off the favorites bar), but the value in the dropdown box doesn't change, and then cannot be changed again until I close and re-open the Settings page. Maybe I just need to restart the app? But, seriously, that's weird!
• What's the difference between "Browse as guest" and "InPrivate"? How can you make that difference clear, visually?
• Where's the button or badge that announces loudly and clearly that my privacy is intact? There are warning screens for bad websites. Why not a warning thingy for privacy invading sites? Like, "The site you're about to visit has 137 3rd party cookies that track you, including ... [list 3rd party websites]" and then invite me to anonymize those 3rd party cookie requests.
• What about tracking analytics? Show me a graph of sites that have tracked me across several pages. "Facebook recognized you on 1,137 page visits across 38 sites. Block?"
• Yes, definitely, I need a privacy/identity management button and menu. Show me what's tracking me. Show me whether my passwords are logged here and how secure they are. Give me buttons to nuke any tracker I don't like!
• Why is the tab context menu not similarly available in the main menu? Some people like going to the thing to get the menu. Others like going to the menu to get the thing. Let us have it both ways ... without completely bloating the main menu, please.
• How come I can pin a tab, but not favorite a tab? How do I efficiently manage my pins the way I do my favorites? What's the difference between just pinning a tab, and pinning a tab to the taskbar? Why not pin tab to tab bar? Or, pin tab to > favorites | tab bar | taskbar | desktop | Edge's context menu.
• Wouldn't it be cool if I could move my Edge tabs into Chrome or Firefox and vice versa? Maybe the engine comes with the tab OLE style, or maybe it's just treated as a state drag-n-drop where the page is re-opened in this/that browser, preserving as much state as possible. I know, I know. Incredibly wishful thinking. But think, "now you can take your tabs over to Edge -- just drag!"
• Should the address bar preserve showing the https prefix? I'm getting used to not seeing it.
• You know what I want, what I really really want? I'll tell you what I want, what I really really want. I want to password protect sites. Not just via the site's login page. I mean, I want to have to supply a pin or password or face (that can't be stored in Edge's password locker) in order to access a certain site. Not quite parental control, but just enough control that my wife can't snoop my Amazon purchases for our anniversary. Stay out, honey! Love you!

I think that's all for a first-round of things off the top of my head. I'm sure I can come up with more stuff if I really sit down and think it out.

[#15]

@HotCakeX The dark mode also needs to have more black and less gray.

[#16]

Yup there is too much gray area in menus, they might as well add a theme and name it "gray" instead of dark.

[#17]

I like the greyness of the dark theme. Maybe add a "black" theme that would be truly black for people who prefer it so?

About the address bar size and stuff - I like how I can choose "compact" mode in Firefox, which shaves quite a few pixels off the UI. I would love such a feature in Edge, where we could choose how it looks. So, by default, it could be as it is right now. But in "compact" mode, the icon padding (including the Favorites bar), address bar font size, would become smaller. Same thing with all kinds of menus - less padding.

However, all these things would be nice for me, personally, because on my laptop I have a 1366x768 screen. Each and every pixel counts ;) It doesn't bother me much when I connect a 1080p external display or use my desktop with a 1920x1200 panel. Such a low laptop resolution is becoming a lot less common nowadays, so I understand why UI designers might not feel the need to do anything here and why so many users commenting on these forums do not want anybody touching it.

[#18]

@relu84 I like that idea, and maybe when in tablet mode, they get more spaced out to be easier to tap.

[#19]

Agree. Now it’s looks more like Chrome browser, please make some more independent look.

[#20]

@HotCakeX In case users haven't installed the amazing Language Packs, please don't call it 'gray' because of differences in spelling such as 'grey'!  Call it 'lighter' or 'medium' or something!

[#21]

@Elliot Kirk Using Dark Mode on Edge running in macOS I do sometimes find it difficult to work out which of my tabs is actually open.  This was never a problem in Classic Edge on Windows 10 when Dark Mode became available there.