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]

1 Add transparency or other material effect to the main browser interface.
// For sure this is what we wanted! make it look more close to legacy edge!
2 The corners of the tabs and browser buttons have been rounded too much.
// Actually it's not a big deal, I love the current semi-rounded tabs and buttons (Google Chrome for example uses even more rounded elements)
3 Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.
// Don't sure at all that there are any problems with the size of address bar
4 Update or add animations to user interface.
// Refresh tab movement animation like in legacy edge
5 Add a reveal effect to highlight on mouse hover.
// Sure add this! this makes browser more alive

[#3]

yes, the current size of address bar is ok!

[#4]

In the screenshot i set the transparency level to highest but Edge will need something less transparent/acrylic to keep text readable, you know, just like in Edge classic :)

[#5]

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.

[#6]

@HotCakeX Ooh, that transparency would be so cool in the entire top bar and in the edge://urls !

Or even imagine the entire browser was somewhat transparent, basically like a transparent dark mode! Heads would turn all over the office, not even joking!

Even as crazy as it is, I think it would be fantastic as an option!

[#7]

@Elliot Kirk I love the way you categorized the feedback on the topic. Please implement all of them. Would love to see them being implemented in the new Microsoft Edge. 

[#8]

Well, I'll keep it short but simple.

• Ability to add distinct color or color themes to the main browser interface.
  • OK
• Add transparency or other material effect to the main browser interface.
  • This, just like the Settings-page of Windows 10. Implement it in Edge tabs and especially the address bar so that the content is somewhat blurred into it when scrolling.
• The corners of the tabs and browser buttons have been rounded too much.
  • For me the tabs are too rounded, especially when the Edge window is not maximized.  Browser buttons are fine for me.
• Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.
  • The length of the address bar is way too stretched. Should be something like macOS Safari browser, or make is at least customizable in length. Although the address bar can be less stretched when add-ons are displayed right next to it, I like it minimal without seeing the add-ons buttons and so for me right now it's useless space.
• Update or add animations to user interface.
  • Animations for sure. For example, the blue indicators in the Settings of Edge are not animated when changing category. This is animated in the Windows 10 build-in app Windows Security and Microsoft Store (bit different, but same idea). The blue indicator slides very nice and smooth to the selected category/menu. Strange this nice effect is still not updated in Windows 10 Settings itself.
  • Also: swipe to go back or forward (with touchpad or finger for example) should have the same swipe effect as in the legacy Edge (very nice and comparable with macOS Safari), moving the whole page all together. Right now when swiping back or forward there is a very ugly arrow in some blue rounded circle visible on the side. 
• Add a reveal effect to highlight on mouse hover.
  • Should be smooth and directly implemented in the whole Windows 10 GUI if you ask me.

[#9]

@GrahamJockey  

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.

[#10]

Make downloading UI like in Edge Classic / IE12

[#11]

Yeah the main UI and on the settings page, like how Edge classic is

[#12]

Acrylic and Reveal are my hugest desires

[#13]

@Elliot Kirk Thanks to you and the team for taking so much care about the feedback from us. I'm there since day one of the new Edge and so far it is a thrilling ride! I'm fully acknowledge the main points you've listed, but other than that I really want the Fluen Design back. So far the new Edge still looks too much like Chrome. I just want that the new Edge gets its own identity in terms of look & feel and fits much better into Windows 10 and the other Microsoft apps.

[#14]

@Elliot Kirk 

First of all I would like to say that the black color of the old EDGE is better than the beta versions, which makes the browser better, as I am not a creative professional I prefer to be surprised by you, but I would like to expose my preferences.

I'll leave an example of something beautiful I found in Deviant art, Link: https://www.deviantart.com/innocentdalek876/art/Fluent-Design-Concept-New-Tab-Sets-and-Edge-Dar-7503...

1 = Title bar should be translucent, may have a blur if you want
2 = I would like to see the browser more rounded, not much, because it inspires modernity.
3 = animations while doing certain actions, eg open settings or vertical bar of preferences.
4 = hidden bookmarks bar.

[#15]

@Elliot Kirk All sounds good but I am unsure why the address bar size needs to be changed, especially as the Ease of Access features and display settings for Windows 10 overall are now so flexible.  I don't notice any major difference in this between using Edge Beta on my main Windows 10 machine and Edge Dev on my MacBook.

The rounded 'In Private' button looks so out of place.

[#16]

@Elliot Kirk 

I think you are on track with the changes you have made so far. The corner rounding looks good, and it is in line with the future of Fluent Design. It's, what, a four-pixel radius? Looks modern and pleasant, unlike Google's super-round corners that look juvenile. The tabstrip and URL bar size are also good, in my opinion. The menus and icons in particular look great—so much better than those in Chrome.

But the main point I want to make is this. While it's good to consider user feedback, don't fall into the quicksand of making MS design "democratic." You hire designers for a reason. Design consistency is more important than trying to please everyone. Make MS design consistent across apps and throughout Windows, which so far, it has not been. Rely on your designers, and when you have your design language teased out, implement it everywhere with ruthless consistency. Don't treat your various apps as guinea pigs ("We'll try one design for Mail, another for Groove, and another for Paint 3D and see what people like").

I really like where things are going. The new icons, with their color and bit of texture, look really nice. The white menu backgrounds (on light theme) look really nice too. Keep it up and don't get bogged down. Your billion users won't all agree. Be confident.

[#17]

Dear Elliot Kirk and the Edge development team,

First of all, thank you for making this post! I'm sure I'm not the only person who is relieved and excited to see that you're all finally ready to discuss Fluent Design in detail. After all, Fluent Design isn't just the package that Windows applications come in - it's the way everything is accomplished between the user and the browser.

I want to lay down a few pieces of groundwork before I respond to the specific statements you've put forward.

First off, I will try my best to explain only my own desires for the future of Fluent Design in Edge. There are some people that would probably want Edge to feel familiar, similar to Google Chrome. There might be other people who are only interested in how the New Edge can be made to look and feel like the Old Edge. I cannot speak for these positions. I do not have adequate insight into why people hold those positions or what specific benefits those design philosophies would have. I also do not have the resources to be able to determine what camp is largest or most important to making Edge a success "with the masses". As I cannot tell if I am speaking for the masses, and I can't tell whether I am part of the masses, I must speak only for myself. My position is that Edge should "be new" and that it should fit well with the operating system it is installed on.

Second, I want to define Fluent Design in my own words. I believe this is important because my definition of Fluent Design might be very different from other people's. With the emphasis that I have personally put on design languages in the past, I've had the subconscious feeling that "design languages are everything." With the amount of feedback I've been writing to the Edge team, I've realized that this just isn't true. Fluent Design defines how apps look and how apps are laid out, but it does not define what an app can do. For example, Fluent Design says that the Set Aside Tabs feature should slide out from a side panel, and the button for it should turn blue. However, Fluent Design doesn't say whether or not Edge should have a Set Aside Tabs feature. Given this, I won't use this post to ask that any particular feature be added to Edge.

With that lengthy introduction down, let's get to responding to the topics set forth in Elliot Kirk's post.

Why Insider Edge should look Fluent

Fluent design makes it obvious that an app isn't just made to run on Windows 10, but that it's made to fully take advantage of features like Timeline, Share, and Focus assist. Apps like Your Phone and Calculator feel better to use in Windows 10 than apps like Microsoft To-Do or File Explorer. This has nothing to do with the age of the app; To-Do recently got a UI makeover while calculator was one of the oldest apps to get the Fluent treatment. The determining factor is fluent design. Even though I spend most of my time in this browser, I am also familiar with how the rest of the preinstalled apps look. Those apps define Windows 10 for me. When I booted up Edge Canary on release day, the first two things I said to myself was "wow, that was fast", and "wow, it looks like Chrome." I think Microsoft Edge is supposed to be the crown jewel of the operating system.  Edge Canary still feels like it was developed primarily by Google, and it doesn't fit with the rest of Windows 10. What task am I trying to accomplish with Fluent Design's theme? Fluent Design is the official Microsoft stamp of quality and compatibility for Windows 10. I also like the shiny, glass look of new apps like Your Phone more than the flat, google-style look of Edge.

This whole paragraph brings up a good question: how should Edge look on other operating systems? Well, I can't answer that. I don't have any experience with Mac OS, and Linux doesn't really have a "style", so I don't know if it would be better to have a Fluent style to bring home the fact that "this is a Microsoft product" or if it would be better to have a style that matches the OS to say "this software was made special, just for this environment".

There is another big part of my desire to see Fluent added to Microsoft Edge Insider. I believe that Insider Edge should react Fluently. Fluent design is about efficient, capable design. Open up the old version of Edge, and open up the latest version of Edge insider. The design choices in Classic Edge have two big advantages: You can do more with less, and you can do things more easily.

What do I mean by doing more with less? Well, when on a simple website like google.com, Classic's right click menu has only 4 items. Edge Insider has 9. There are a bunch of extra, unnecessary things in Edge insider's context menu! Some things are already easy to access from the address bar; others should stay in the Settings and More menu. This applies to a lot of the things Edge Insider inherited from Chrome. Why do we need a profile button in the address bar? Why do we need a New Tab button in the Settings and More menu? Classic Edge has so many more features than Edge Insider: Set Aside Tabs, Tab Previews, Inking on Webpages... and yet it feels way less cluttered because every tool has a specific place to be. In Edge Insider, every tool tries to be everywhere, and it just bothers me.

You shouldn't forget that Classic Edge also lets the user do things more easily. The Edge Hub combines History and Favorites into a side pane that can be pinned open. Edge insider has a massive dropdown menu for favorites. Maybe middle or right clicking on those favorites will keep the dropdown menu open, but a dedicated "pin pane" button takes out the guesswork. This isn't a unique situation: Edge Insider kept Google's Find in page popup menu; Classic Edge has an entire row worth of features and adjusts the tab size to accommodate it. Google's Fullscreen mode just has an X when you move the mouse to the top of the screen; Classic Edge pulls down the entire Edge tab and address bars.

The genius layout of Classic Edge is why I liked that browser and why I wanted to see it improve. I said it before, and I'll say it again: Classic Edge runs horribly on my PC. Smooth scroll doesn't work, rearranging tabs around used to crash it, and Youtube just wouldn't pause for a full 10 seconds when clicking the button. The layout of the features included was what made Edge good, and the pairing of that layout philosophy with the speed and reliability of Google Chrome was why I was, and am, excited to see the development of Chromium Edge. I am extremely happy to see the edge development team prioritize reliability in this version. I've had to reinstall the Your Phone application about once a month now, and that app is missing a back button if you shrink the window too small, but I haven't had any major crashes or usability hurdles (I mean, besides sync) with Edge Canary in recent memories. This is a multi-platform daily build vs a so-called stable version on one OS! It's something to be really proud of. However, I don't want to see Edge to launch looking or feeling like a Google browser plus some things that could have been extensions. If a stable chromium release came out tomorrow, I'd love it because I know how reliable this browser is. However, if a stable Chromium Edge came out tomorrow and I hadn't been using Edge Canary for a year already, I would download it and say "Well, this is just Chrome but with collections and read aloud tacked on. What were they doing for the last year?" So, what is the task that I am trying to accomplish? I want a browser that looks like it was made by Microsoft, and a browser that is easy to use (no more dropdown list for favorites!) and well laid out so that things are easy to find (no more bloated right click menu!)

@Elliot Kirk 

[#18]

I personally really like the slightly rounded buttons. That tabs being square would probably look better but Fabric UI (which I'm guessing is being used) is really nice compared to the normal UWP Fluent design. But acrylic/transparency is a must :D

[#19]

I would like to:
Pin Favorites/Bookmarks to the right/left as in Edge and IE11.
Have the ability to edit, rearrange, open, etc. them while pinned

[#20]

Yes, Fluent Design is URGENTLY needed! Ever since you guys added effects like Acrylic and Reveal to Edge, mainly in the April 2018 update of Windows, that design has become a symbol of Edge and makes it its own browser and unique, and beautiful. It just doesn’t feel like Edge without them.
We need:
Acrylic on the header, Reveal on tabs and buttons in the browser, and just bringing back some old designs from the old edge like the old vertically-expandable tab view, and add acrylic to that. Basically just bring back everything important that you removed. Because without the stuff, it’s not the Edge we know.

[#21]

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!