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]

Hello @Elliot Kirk 

In my age the vision capacity is dimmed. I like the dark theme. Thus when and if the website does not have an icon or icon in not shiny I cannot see the tab of that Website when it is pinned.

Could you please brighten the border or background of tabs a little. May be dimmed beige or very light velvety color. I am happy with the rest and divorced Chrome for ever in my PC.

Thank you. Candan Esin MD Istanbul Turkey.

[#3]

@Elliot Kirk 

Sir, I like the current size of tab-band and address bar. Edge looks beautiful. Please do not make it small (like in Google Chrome). 

[#4]

when will you add this? any date to expect acrylic back?

[#5]

when will you finally add this? any date to expect acrylic back?

[#6]

HI @Elliot Kirk 

Thank you for this thread. I love the new edge. However, the interface elements on Edge feels more of touch centered. This is visible in the bigger spacing for right-click context menus etc. While this is fine at most places on the UI, it really impacts the users who have a lot of bookmark folders and bookmarks inside each folder on the bookmark bar. It takes a good bit of scrolling to go to the desired bookmark, which is inside a folder and the menu is occupying half the screen. Please see below a small comparison pic of Chrome vs Edge. This is the only reason I'm still using Chrome, despite immensely liking the new Edge.

I have seen several other users mentioning the same thing on several forums and I hope I'm at the right place where this feedback will be taken and possibly addressed. Thanks.

[#7]

@ilikered- Edge fans will eat you alive, most of them love every pixel of it. Posting about too much padding in menus and toolbars will only get you a few posts explaining how wrong you are. I know, 'cause it's been explained to me several times here and ultimately, it's best to let it go.

[#8]

I completely agree. Not all aspects of the original Edge Legacy's design language were perfect.

[#9]

@NamishB They could at least fill this empty space, though, its really getting on my nerves.

[#10]

@cjc2112 

Same here. From the time I installed this browser, I absolutely hate that space. In this aspect, I like all UWP applications, including Edge Legacy; at least when my mouse pointer hovered over the buttons, it was somewhat satisfying. This one nerves me out too.

[#11]

@relu84 If it was an issue that wasn't impacting me, I wouldn't have raised it for sure. But it gets in the way of using this browser and I'm kind of forced to stick with Chrome despite liking Edge immensely for its speed and low memory usage. Please see below to understand how bad it is.

It would be great if this aspect of the browser can be addressed. If we can at least get a flag that can be flipped for a desktop interface vs a touch interface, that would suffice I guess.

[#12]

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.

[#13]

so where's the progress? you've spent 40 weeks doing nothing in that direction.

[#14]

@royamicus185- I'm afraid this is a thing that happens frequently with Microsoft. Things get introduced but all the enthusiasm seems to die down in the middle of the road. When Fluent was introduced it showed up pretty fast in several areas of Windows and some apps, but not everywhere. One would think Fluent would become more common with each update but nothing happens.

I believe Chromium draws all of its UI with its own methods to make it easier to port to other platforms. It may be so that Edge developers need to replace each and every function of UI drawing with new code and that is why it's taking so long. I also think this is not a priority for the team and it's priority is down there next to a Linux build.

[#15]

Yes, a slider is one of those things where it gives you a lot more control, but is really easy to implement.

[#16]

I would really like to see the transparency in the new Edge. I think the best way to do this is have a switch that turns the transparency on or off, or have a slider to turn it off or make is really transparent or anything in between. It really should be optional so if people don't like it, then they aren't forced to use it, but I personally would love to see transparency. I think that the transparency would just make Edge look really good, especially with dark theme.

[#17]

I am going to write down what the topics are in bold and my views/opinions normal sized, also the headings that are blue are the ones not summarized in the last paragraph, to make it easier to skim through

• Ability to add distinct color or color themes to the main browser interface.
  • This would be good to make browsing with Edge more customized

• Add transparency or other material effect to the main browser interface.
• This would be good but sometimes the background acrylic can look ugly as a result of the stuff behind the browser, so try to make it appealing to most

•  or make an Appearances setting/New setting page called 'Themes' or something similar, where there are options for the default theme currently used, dark theme, and varying levels/types of acrylic or other materials in Fluent Design Language this would be good idea as not everything appeals to everyone so if there's choice something will appeal to the users, in the 'Themes' setting instead of having a dropdown menu, have a grid with a small screenshot of what it looks like and it's name, kind of like how Microsoft Store displays products or like how Opera shows it's themes, but making it squared with the acrylic effects used in MS Store, so it's as if MS Store is displaying it. 

• The corners of the tabs and browser buttons have been rounded too much.
• I don't think the tabs have been rounded too much, as it is square enough to differentiate it from Chrome, but squarer tabs with a smaller radius curve would not look bad if rounded at a good size, I would suggest making concepts with different levels of rounding (0px-fully rounded), and displaying on a discussion as a vote which is best.

• I think the Browser Buttons are also not too round, except for the InPrivate Button, which sticks out from the rest of the UI, making it squarer and making it blue like IE/Edge Legacy would be good as well (or being able to choose color using color picker/set number of colours)

• Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.
• Personally, it is good as it is, however for those that find it bad I would suggest the following options to put in Settings or Flags (this would make Edge more customizable):

• I would say to make the shrink optional (as in a setting or flag).

• I would also say a possibility of using auto hiding browser UI elements on touch and non touch devices but again optionally.

• Also an option to auto shrink the Toolbar elements if mouse cursor is not near/on touch devices making it shrink until drag down like hide is used in mobile chrome - I've only seen mobile chrome as no one I know uses mobile edge and I can't get it - would be good idea (scroll down on non-touch might be good) (however both the versions should be optional) and as @GrahamJockey said, a proximity sensor on the Surface line of products to make it auto shrink unless hand is near.

• I also would recommend a size slider for all of the taskbar/toolbar UI elements (buttons, extensions, spacing), whilst enabling address bar resizing without extension icons sent to menu reappearing on tool bar.

• Update or add animations to user interface.
  • This would be good if done well, although an option to enable/disable it would be good

• Add a reveal effect to highlight on mouse hover. 
  • This would be great at making the UX more interesting alongside good animations

This last paragraph is sort of a summary of what needs to be added/changed to make it more customizable

I would like to add that,  like Extensions can be added to the Extensions page, making Themes in 'Themes' page downloadable from MS Store/other webstores but have built in themes that include the current Light and Dark themes, alongside varying types/levels of Material from Fluent, this if shown in a Grid like MS Store shows it's products, except instead of details it has only name and image of what it looks like, alongside having a slider for size of all Taskbar/Toolbar elements, and an option to select what colour the InPrivate browsing button is, would make Edge one of the most customizable browsers.

[#18]

@Elliot Kirk 

I can't differentiate between the tab that is selected and all other tabs. This should be filed under an Accessibility issue. Users that have trouble seeing or trouble seeing certain colors simply cannot use this browser. Even the delineation between tabs is too faint/thin.

[#19 · Accepted solution]

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

[#20]

So what you are saying is:

- Edge uses the Chromium framework to draw the user interface and it's just too much work to implement Fluent effects like Reveal

- once again Microsoft makes a set of UX guidelines that they do not themselves follow

Am I right? 😉

[#21]

I guess on some point UX guidelines will be rewritten to match the current state of chromium-edge. Round corners were announced after adopting chromium, despite they break Reveal effect and in many apps it was replaced with simple hover light+shadow. 

Acryl also cost too much on mobile devices and maybe it also will be removed at least for title bars as it was once with win8. I didn't see it on win10x demo.