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
Square the Tabs like the current Edge.
Implement Transparency
Add ability to move the Profile button to the hamburger menu.
Remove the several pixel gap between Tabs and the top / side of a window. (Gap highlighted below. It is a waste of valuable space!)
nasonexguy I'm not sure what you mean by the several pixel space on the tabs. Also, if anything the tabs need to be bigger, especially when working with a touchscreen. The tab drop down in legacy edge was a lifesaver when I was using my laptop in tablet mode.
Everything else, I agree with,(although instead of either-or for square tabs, maybe make it a customizable option with round as default, to attract chrome users).
I'd prefer that instead of just bringing back the transparency, they bring back the full acrylics styling. Maybe on first start ask users which interface they are moving from so it seems the most similar.
Edit: Literally 5 seconds after I posted this and was comparing the tab size between New and Legacy edge, I found out what you meant by the extra space above the tabs that is only happening when not in fullscreen(not f11, middle button). Also, why are the 3 buttons stretched in full screen when their more Squareish than rectanglish in half. They should use that top space to make the tabs bigger and make the 3 buttons go all the way to the bottom.
nasonexguy and sgilder, I disagree about the removing the padding space above and to the left of the tabs. You need that space to drag the window when it's not maximized (when it is, that space is removed already). This is appropriate the way it is and it should not change. The only other part of the window you can grab to drag the window is the space between the + to add tabs and the minimize button, but you can't use that if you want to drag that part of the window off the right edge of the monitor (which I do frequently).
The only other way I know of to move the window is to pop-up the universal window control (by pressing Alt-Space) and select "Move," then use the arrow keys to start the window moving (then the mouse will work), which I suspect very, very few users even know exists as an option. If you grab a tab, it separates the tab from the window and creates a new window. That's not viable.
Padding is necessary with the current UI and must remain.
I believe the space between the new tab button and the windows controls was left there specifically for moving the window.
I'm not sure what you were referring to when mentioned not being able to use that part to drag the window off the right edge of the monitor, is that in reference to touch controls or just in general? I ask because I can move the window, using the space between the tab and window controls, to another monitor or for split window view without any issues.
Honestly my biggest issues are the UI size (based on a 24", 1080p monitor at work) and the fact that fullscreen Edge on Mac still has the gap between the top of the tab and the window, unlike Edge on Windows. I'm not too picky on the spacing when the window isn't maximized or in fullscreen mode but if the window is maximized or in fullscreen mode, Edge shouldn't really have gaps between the screen edge and the tabs in my opinion.
The gap is definitely not needed. It's weird that the top gap is gone in a maximized window but the side gap remains. And on a Mac the gaps are there regardless of being in a fullscreen window or not.
I definitely want all of these, but I don't care about the rounded corners very much. Definitely approve the differentiated UI for touch vs. non-touch uses; perhaps the UI on touch devices could include not only a larger UI but also incorporate some of the new UI from the Edge apps on mobile. Elliot Kirk
shandon1385 There is no such division of users, even, there is nothing to invent here.
Why? the distance between the buttons, texts in the different UWP apps and Settings is perfect, just use those same dimensions Fluent Design and it's solved, the perfect balance.
I will once again post about the huge UI size of Edge. Please, add an option which has been introduced in Mail, for example, which is a few UI size options: compact, medium and spatious. This will solve all problems.
One of the reasons why I like Firefox, except for the better font rendering, is how I can choose the UI to become "compact". Take a look at the attached screenshot.
In the age of 4K displays this might not be an issue, but on my laptop with a 1366x768 panel this is on the verge of being unacceptable 😉
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.
All of that sounds great!
My biggest issue is that the UI is just far too large for me, personally. I understand a lot of people like the current size of the UI but please add an option to shrink the UI. I would love to be able to remove the gaps between the tabs and the top of the window. I would also really like to have a smaller navigation bar as a whole. I am a big fan of the compact density setting in Firefox for reference.
Just for context, I strictly use a mouse and do not use any touch elements and that is why I prefer a smaller UI along with the added usable space for the webpage.
EDIT: I should have noted I am using edge on macOS Catalina, so that is where my perspective is coming from.
- I prefer a unified design for all platforms. But I understand your point, maybe add an "compact mode option in settings.
The corners of the tabs and browser buttons have been rounded too much.
I think it's not a lot or a little rounded corners, just use the one set by Fluent Design (4px I think)Elliot Kirk This is probably not the best place to ask for this but it's slightly related.
Are there any plans of starting to use the 'accent color' on Mac OS in Edge, instead of the standard blue?
It would fit in with the plan to update the browser to better fit the OS Theming.
Elliot KirkDon't forget touch base devices. We should consider using Microsoft Edge on touch screen devices like tablet and tablet mode like Microsoft Surface, so if icons and everything is not in right size and too small, it is hard to interact with fingers. There should be option to set size so if people want small size just change it, big size or medium size and there should be special mode for tablet and when tablet mode is enable in Windows 10.
Many people love Microsoft Edge because it is easy to interact in Tablet and Kiosk compare to other browser.
I agree. I would love to be able to set up Edge so that when Windows switches to tablet mode, Edge goes to fullscreen mode and I can bring down the tabs, address bar, etc. by swiping down from the top edge of the screen, and I would like the tabs to always be shown with previews in this mode. This would provide a very similar experience to Internet Explorer on Windows 8 which I think was great on tablets.
MarinM as I said earlier, it should fully support touch-based devices, there are people who don't like use Chrome in touch devices because of its small tabs is hard to navigate with fingers and I don't want same behavior for Microsoft Edge.
However, there should be flexibility to customize it , so people could chose to show large, small, medium tabs and select as they want.
- Make the scroll bar collapsible and compatible with the theme of the browser
- Add fluent design system animation
- Add acrylic blur effect at the title bar and not just for black and white, but for other system colors as well, depending on the system theme.
- Add reveal effect
- Elliot Kirk
Elliot Kirk Please do not change the roundedness of the tabs, I feel like they are the perfect blend of old Edge and Chrome and I like the look of the tabs on new Edge better than old Edge and Chrome as well. I do agree with some of the other posts about the InPrivate being too round when compared to everyone else. I personally have been using Chromium Edge on my MacBook Pro and love it.
hope they add soonElliot Kirk
I think in the brewing holy war of readability vs conservation of space, I am going to have to rationally side with readability for everyone, and conservation of space for no one.
I don't know that crunching down controls to their absolute minimum pixel space actually does anyone any favors or improves the usability of a product. A product must be comfortable to use. Yes, available space should be used efficiently, but not at the expense of usability or the day-to-day experience of the product.
Whether a browser bar or a button uses two pixel rows too many has lost relevance over the years, especially as physical pixels have shrunk in size and screens increased in size. Thus, the paradigm has shifted: when you have this much real estate to work with, UI/UX becomes the primary concern. In other words: you have the room, so make your product comfortable.
Additionally, I argue against a configurable visual density at the application level. Allowing user preferences down to the pixel level has generally turned out to be a bad thing for developers and users. Developers have too dive too deep into testing each preference combination. In the former, users suffer "choice fatigue" which reduces product stability. In the latter, we lose product satisfaction.
Graphic designers over the last 100 years have mastered the art of using negative space to visually inform users of the relative importance of elements on a page/screen, where we should look for information, and to describe the general tone or aesthetic of their subject. This is why prestige designs don't Cram. Every. Little. Space. With. Information., while your local coupon circular packs it in as tightly as possible. Why? Because they perform different functions. For circulars, every bit of space translates to $. Bargain hunters brains' light up relative to the number of "deals" they see. Maximum density on the page equals maximum returns -- an absolute necessity for a low profit margin industry. Prestige designs take a different approach to lighting up brains: they must efficiently communicate their value proposition. This requires subtle, but carefully thought out design cues: space, negative space, font size, color, all of it, all the way down to stroke width.
So, if your prestige design only needs to communicate a very specific value proposition, why not make your design as small as possible and make room for other information? Because you are the information. You need to command a specific amount of attention with your use of space. Negative space around an element literally communicates, "this is my importance compared to the things around me."
It's why Morpheus is the sole element in a featureless white room. It's not about showing off a "construct." What he has to say is so important that he needs to command your whole attention. Whoa.
All of this is to say that designing a UI/UX isn't just about space efficiency or its strict utility. Your design sells your product. Your balance of buttons and space and tools and colors all communicate your product's value proposition. Could a browser minify itself to give content as much real estate as possible? Sure. But not enough people will want to use it because not enough people will understand it. A minified UI/UX is a value proposition that appeals only to a very specific audience. We need to shoot for actual market share.
Why does a product have to sell itself via its UI/UX? It's worth it to go back and study what choices informed UIs of the past. For example, remember when Word 2.0 introduced their toolbar buttons? Why did they do that at the cost of being able to see less of the page on the screen, my very angry nerd friends asked. (They were SO. MAD.) But think about it, Word was growing its feature set rapidly to catch up to WordPerfect. They needed a way to simultaneously communicate their feature set and make that feature set easier to use than WordPerfect's four row matrix of Shift/Ctrl/Alt and Function keys. (Remember printing that thing out and taping it to the top huuuuuuge bezel of your IBM Model M keyboard? How quaint.) The clickable toolbar on screen was a breath of fresh air, by comparison. Buttons that tell me when bold is on, or whether I'm making bullet lists or number lists? Come on, that was amazing! It looked great on the standard 640x480 screens of the day. The trade-off between tools and content real estate had huge advantages for users who needed a more comfortable experience. Word's toolbar said, "what do you need to memorize function keys for? I'm here for you."
I think Edge is well served by being a comfortable experience. Edge should be easy to find, easy to learn, and easy to interact with. Toolbars and menus and tabs should not be crowded, lest they be ignored or overlooked. Like, imagine you're learning a new product, and you didn't even realize a super-important feature existed because you didn't have enough of a visual clue that it was there and that it did something? I can fully appreciate why Edge's toolbar and menus are sized as they are. The design says to me, "[contented sigh] it's ok. We don't have to prove anything to each other. Here's what I do. I'm easy. Let's just chill and enjoy some sites."
Make your apps comfortable.
JasonLovesMicrosoft I have, but one word for your polemic on UI/UX design theory: Brilliant
Obviously not everyone will agree, but IMO if you don't already work at Microsoft, some smart manager should be preparing a job offer with all the haste they can muster.
Thanks! You're right, I'm sure a lot of people will find something to pick apart in what I said, and many things they say will be good points that deserve consideration. And, a lot of what I think will be irrelevant as new technology emerges and changes the way we interact (like touch vs mouse). I'm always excited to learn that I don't always know what I think I know. You know?
Hey there some smart manager, I'm happy and well paid at my current work. But that doesn't mean I can't be lured away to something really cool.
