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
I'd very much love to see an option to reduce the address bar panel height independently of whether my device actually supports touch or not. I feel that the URL text is needlessly large and I feel it is inconsistent.
Looking at the old Edge, you will notice that the size of text for the URL bar is smaller, more similar to Chrome. This is also inconsistent across various OSes. On macOS, the URL bar height and text size are both identical across Chrome and new Edge, whereas on Windows we get those huge letters and larger bar. I feel the Windows version should behave like the macOS version in this case.
My personal reasoning is that when I am not looking in the top browser chrome, I want to see as much content as possible. When I look there, I don't want to see huge letters, but more information and therefore smaller font size.
Of course, there could be a setting for touch-friendliness, which would have things appear as they are now. But as I said, I feel that between old Edge and Chrome, the new Edge is the odd one out here (on Windows).
LukasL I also would like to see the same thing. I value my web browser's real estate space... so, anything that can help reduce wasted space in the browser's display area is a welcome addition. Ultimately, having the vertical size of the address bar, font size, etc configurable/theme'able would be ideal.
I think Edge looks fine and I would rather you focus on bringing back features from the old Edge, making scrolling as smooth as old Edge (in the new Edge it's particularly bad in PDFs), and making it work well with touch (for example, I can't select text with touch in the new Edge).
Please don't make the tab band and address bar / toolbar smaller by default; you could add an option to make it smaller. However, I would like the spacing between the favorites in the favorites bar to be reduced a bit so it can fit as many favorites as the old Edge.
If you add transparency, animations and other visual effects you should also have the option to turn them off if they can impact battery life and performance on lower-end machines, and notify users of this.
- One of the reasons why I didn't upgrade to Edge Chromium is the weird large font in the address bar and not having the ability to use themes. Transparency is a nice to have too. It looks like Microsoft has listened to its users. Thank you. I'm excited to try these new features. Please do not take them away! Looking forward to trying it!
- Transparency/Acrylic style themes are very nice, kinda the signature of modern Microsoft UI design, combined with the right hover animations, they make a great UI for the new Edge.
Elliot Kirk Another thing i want fixed is the go back/forward for the touchscreen. Currently, its like this and i have to pull it quite a ways before it goes back.
The old edge moved the entire page over and I could deliberately flick it and it would go back. This is still on the mobile version and its a huge timesaver. Its also more visually appealing. Video file attached below.
This concept video really demonstrates the ideal and beautiful design for Edge
Happy to see this feature finally under consideration, would like to see below:
- The corners of the tabs and browser buttons have been rounded too much.
- Ability to add distinct color or color themes to the main browser interface.
- Add transparency or other material effect to the main browser interface.
Regarding second point, I would like to have different options to select either from OS theme (the default and only one in classic edge) or browser color themes. For first point, would like to see squared tabs like in classic Edge.
Here's my opinion on the listed points as of Canary 81.0.402.0:
- Ability to add distinct color or color themes to the main browser interface.
[ Okay, but not a priority for me] - Add transparency or other material effect to the main browser interface.
[ Would be a nice touch if done without negatively impacting visibility. ] - The corners of the tabs and browser buttons have been rounded too much.
[ I think they're perfect right now. Edges are not too round, not too square. ] - Make the tab band and address bar / toolbar smaller if device doesn’t support touch capability.
[ Perhaps icons could be a bit closer together on non-touch devices, but please don't make anything smaller unless it's an option. ] - Update or add animations to user interface.
[ Neutral. ] - Add a reveal effect to highlight on mouse hover.
[ Neutral. ]
The #1 cosmetic wish I have is that darker shades of grey be used in Edge dark theme. IMO the darker color schemes used in Force Dark Mode for Web Contents are much better in terms of readability/contrast and aesthetics. FDMWC is showing us a more perfect balance between too much contrast and the dull, eye-squinting world of not enough. In fact, this very Tech Community page looks fantastic right now thanks to FDMWC.
The coming features I'm most excited about are definitely Collections and FDMWC. Keep up the good work! 👍
- Ability to add distinct color or color themes to the main browser interface.
Hi Elliot Kirk
Edge Dev is my default browser and I'm very happy with it!
As for all the discussions regarding the aesthetics of the browser, I'm pleased with the looks of it as it is. Could it look cooler? Yeah! But a transparent frame doesn't add any value for me, for instance.
However, the size of the address bar is relevant for my everyday use since I use a Surface Pro, i.e. a touch screen device. I really appreciate the size or more specific the height of the address bar as it is. I hit it (almost) every time I want to type in a search query or an address. 😉
If the goal is to save space and reduce height why not make the address bar shorter and use the space next to it to display favorites, extensions and alike. After all widescreens are the standard today and therefore I could even argue to move the address bar, favorites, etc. to the left or right hand side. Think "Collections"! You can see from the screenshot even when I have open the "Collections" I still have enough room for an entire website.
Usually, the title of the tab is informative enough to know where I am. So as soon as I typed in the address it becomes kind of obsolete.
I hope this makes enough sense to understand.
Elliot Kirk, I just wanted to comment that I NEVER run the browser full screen on my main computer. Some of the feedback here has implied that we all run full screen so Edge should take advantage of all that extra width. I have multiple monitors connected my desktop computer, my main monitor being a large 4k screen. My browser windows are wide enough for a standard web page, probably established back with 1024 or 1280 pixel-wide monitors years ago. I can fit two browser windows side-by-side on my screen and still have room on the sides for additional windows. I use Windows as the name implies, with many separate windows open and visible on my desktop at a time, able to see all of them for effective multitasking. They may overlap, but I rely on the visible parts of the background windows for changing what I'm working on (just click on the visible portion to bring it to the forefront, only going down to the Taskbar in those rare cases where a window has been fully buried under other windows or sometimes to find one of many open windows of the same application -- the thumbnails there help). Even on my laptop, which has a smaller but still 4k screen, I almost never run any windows full-screen, ensuring I can see and reach my other active windows.
I know some users do run each individual window full-screen, popping the active window to the forefront using Alt-Tab, Windows-Tab, or the Taskbar as needed, like on a phone. But that's definitely not all of us. Please keep those of us who run in windows no wider than needed in mind during any design consideration.
speaking of windows and multi tasking/multi windows, I wanna suggest to try this PowerToy called Fancyzones.
https://github.com/microsoft/PowerToys
https://github.com/microsoft/PowerToys/tree/master/src/modules/fancyzones
I find it super useful
- In general, these options should be customizable, so for those who want bigger text or different look could do it through settings.
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.
