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
hope they do soElliot Kirk
Use winui 3.0Elliot Kirk
I really miss this and want it to return desperately. I really liked the acrylic. I would really like for it to return.
I also miss how the buttons would highlight when the cursor would get near the button. It's just a few of those small details that were in the old Edge that I want to return in the new Edge. I don't mind the slightly rounded tabs and buttons. It's a progressive movement into the newer more modern times for technology interface.
- yes this features made it feel like it's a part of win 10 design philosophy
Good Job Elliot Kirk
I think the address bar and text aren't too large. They're ok.
And I LOVE Fluent Design so much. So I want:
- 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
Fluent Design is awesome. I really like it. And that's why I switch to Microsoft Edge.
❤ MS
❤ Edge
❤ Fluent Design
Thank You!
- totally upvoting this!!
- Spoiler
skyporker wrote:Good Job Elliot Kirk
I think the address bar and text aren't too large. They're ok.
And I LOVE Fluent Design so much. So I want:
- 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
Fluent Design is awesome. I really like it. And that's why I switch to Microsoft Edge.
❤ MS
❤ Edge
❤ Fluent Design
Thank You!
The fluent design is the reason why they are rounded and not square 🙂
but I agree with transparency / Acrylic theme, it was the best theme
Hi HotCakeX
Thanks for your reply.
(I think) Fluent design is still blurry. It's beautiful. But no one knows what Fluent Design will be, including Microsoft. M$ can't use Fluent Design well now.
I like Legacy Edge's tab design. It's square.
I also like New Edge's address bar / toolbar, but they are round.
For the sake of coordination, they are either all square or all round. Maybe you are right.
I am very contradictory and confused, I do not know what the Edge should be like. He is wonderful, so full of possibilities. We all love Edge.
M$ is hardlolThanks again.
In addition, I found that you are happy to give feedback to Microsoft, admiration! The world is beautiful because of people like you.
At last, sorry for my poor english, haha
Great categorization!
However, I do not want one of these, which is-
The corners of the tabs and browser buttons have been rounded too much.: I believe that the amount of rounding is just about perfect. It is not completely round as in Chrome, but it is not completely square either. Some amount of rounding is absolutely necessary if we want the design to be modern.
Apart from this, I firmly believe that the suggestions you listed need to be incorporated. While transparent and acrylic touches are certainly needed, I would say that do not make the browser's design very much similar to the legacy version of Edge either. When the New Microsoft Edge is rolled out finally to Windows 10 users via Windows update, I believe that users must get a fresh look, somewhat different from the one they are used to.
The browser should look neither like Chrome nor like the legacy Edge. It should be something new.
I am seeing a Windows XP icon from Edge on my Windows 10.
Considering that Windows XP was released 19 years ago, it would be nice to update the icon to 100% Fluent Design (Windows 10, 2020)
sgildertrue but definitely part of Edge.
Can I just ask how you arrived where you did with the new Edge logo/icon? It looks great, but how was the design process? How did you arrive with the logo you now have? Does it looking like a wave have any significance other than with the new surfing game?
Is there a way to keep the address bar size and respective font consistent with all other web browsers; or, at least make the address bar/font larger as an option. Even without my glasses, the address bar and font size look awkwardly big.
- The best way out of the whole "UI is too big" debate would be to implement a setting to change its density. One might say "it's too much code to maintain", but the Mail app has such options and I don't see any users complaining something does not work as expected. Mozilla Firefox has a UI density setting for "compact", "standard" and "touch" and all three are great depending on the device used and I also have not seen any bugs associated with these.
I understand users who like the big address bar and icon/menu padding as they are now, but I don't understand their "shut up, it's good as it is and we don't need any options, you simply hate Microsoft!" attitude 😉
Windows has a great style right now, if you keep up with the style of Windows 10 apps (like settings, mail, store, and start), the new Edge will fit in, and look great once finished.
Elliot Kirk please don't change the sizing. I think that it's perfect. If there are so many contradictory opinions, allow a click and drag feature to make it bigger or smaller, but leave the default at it's current sizing. I would really appreciate to see an acrylic theme (slightly transparent, like Edge legacy). I just really want to see some option to make the new edge look like the old Edge, but keeping the new slightly rounded corners!! Just please don't round the tab corners too much. Keep the tab corners as they are. I really want to see the old Edge look return with the new Edge (at least as an optional theme). Please put the set-aside tabs feature back if possible, and same for tab previewing when cursor is hovered over a tab! Please make an Edge legacy theme. I know my opinion on Edge legacy's appearance may be slightly controversial to what most people are wanting with the new Edge, but please just take my opinion seriously. Just remember that if this will be the new Windows 10 default browser, people being switched to new Edge from Edge legacy don't want a too drastic change. But that leads me to say, fantastic job with the design and keeping the button style and layout like the original Edge. Great work!!
Elliot Kirk I don't think that the buttons and address bar and text are too large. They are the perfect size. If so many people are complaining add an ability to click and drag to grow and shrink the browser functions section (tabs, address bar, tools, and favorites).
