Forum Discussion
Discussion - Updating our interface with Fluent touches
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
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.
sgilder, I agree with you that those do seem like wasted pixels on a Mac, unless that's for consistency with something else (I don't run Edge on a Mac). On Windows, those pixels do disappear when maximized, which is fine, because they serve no purpose when maximized.
To your point that you can drag the window with the space between the Add Tab + button and the Minimize button for the window, yes, that works... until your drag point reaches the right-end edge of your right-hand monitor. Common issue: you want to view part of the browser window while working in another window. You drag the window off the screen to the right, hiding the ads or other noise you don't need on the right side of the window. If the "handle" you're using to drag the window is on the right side of the window you want to drag, you can't drag off the screen. The window stops moving to the right as soon as your drag handle reaches the edge of the monitor. This is true for both mouse and touch users. The ONLY way I know of to overcome this on Windows is with the keyboard window Move controls. You could also effectively expand the drag handle by peeling off a single tab, giving you a much wider space you can use to drag, so you can move it further (but still not all the way to the edge of the monitor), but both of these are poor solutions that are much more easily solved via the pixels above the tabs functioning as a drag handle.
When the drag handle spans the entire width of the window by preserving those pixels above the tabs, then there is a single consistent and obvious handle to drag the window wherever desired.
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.
